/*
 * SilesiaSolar UI rebuild — warstwa prezentacji, 2026-08-14
 *
 * Ten plik celowo zawiera wyłącznie CSS. Nie zmienia identyfikatorów,
 * atrybutów data-* ani kolejności modułów JavaScript. Dzięki temu można
 * przebudować wygląd bez naruszania kalkulacji, zapisu SQL, PDF-ów i PWA.
 * Usunięcie tego jednego pliku przywraca poprzednią warstwę wizualną.
 */

/* Fonty zewnętrzne nie są wymagane do działania aplikacji. Nie importujemy
   ich blokująco z Google Fonts: PWA i tryb offline muszą wyrenderować UI od
   razu, korzystając z lokalnego Roboto Condensed lub bezpiecznego fallbacku. */

/* JS steruje widocznością przez hidden; komponenty z display:flex/grid nie mogą
   tego atrybutu nadpisywać (np. komunikat pustej listy ofert). */
*[hidden] { display: none !important; }

:root {
  --ss-graphite: #242428;
  --ss-navy-950: #071426;
  --ss-navy-900: #0b1d36;
  --ss-navy-850: #0f2544;
  --ss-navy-800: #132d50;
  --ss-blue-line: #274e7d;
  --ss-blue-line-strong: #3c6d9f;
  --ss-white: #f5f8fc;
  --ss-muted: #9bb1cf;
  --ss-yellow: #ffd638;
  --ss-lime: #95c11f;
  --ss-danger: #f27777;
  --ss-radius: 12px;
  --ss-radius-small: 8px;
  --ss-shadow: 0 12px 34px rgba(1, 9, 24, .28);
  --font-ui: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif;
  --font-mono: "Roboto Mono", Consolas, monospace;
}

/* Delikatna korekta tokenów starego UI — zachowujemy kontrast i motyw jasny. */
html:not(.theme-light) {
  --bg-app: var(--ss-navy-950);
  --bg-panel: var(--ss-navy-900);
  --bg-panel-alt: var(--ss-navy-850);
  --bg-panel-hover: var(--ss-navy-800);
  --bg-input: #081a32;
  --border-subtle: var(--ss-blue-line);
  --border-strong: var(--ss-blue-line-strong);
  --text-primary: var(--ss-white);
  --text-secondary: #bdd0e8;
  --text-muted: var(--ss-muted);
  --accent-heat: var(--ss-yellow);
  --accent-heat-dim: rgba(255, 214, 56, .14);
  --accent-cool: var(--ss-lime);
  --accent-cool-dim: rgba(149, 193, 31, .16);
  --accent-gradient: linear-gradient(100deg, var(--ss-yellow), var(--ss-lime));
  --shadow-panel: var(--ss-shadow);
}

html.theme-light {
  --accent-heat: #c48b00;
  --accent-heat-dim: rgba(196, 139, 0, .13);
  --accent-cool: #69950f;
  --accent-cool-dim: rgba(105, 149, 15, .13);
  --accent-gradient: linear-gradient(100deg, #ffd638, #95c11f);
}

body {
  font-family: var(--font-ui);
  letter-spacing: .005em;
}

h1, h2, h3,
.main-panel__heading h1,
.card__header-title,
.summary-total__value,
.summary-panel__header-title {
  font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
}

.app-shell {
  grid-template-columns: 224px minmax(0, 1fr) 316px;
  grid-template-rows: 72px minmax(0, 1fr) 72px;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 70px minmax(0, 1fr) 316px;
}

.topbar {
  gap: 16px;
  padding: 0 18px;
  background: linear-gradient(180deg, #102847 0%, #0b1d36 100%);
  border-bottom-color: var(--ss-blue-line);
}

.topbar__toggle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border-color: var(--ss-blue-line);
  background: rgba(255,255,255,.035);
  color: var(--ss-muted);
}

.topbar__toggle:hover {
  background: var(--ss-navy-800);
  border-color: var(--ss-lime);
  color: var(--ss-white);
}

.topbar__logo-img {
  height: 48px;
  width: auto;
  max-width: 94px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(149, 193, 31, .18));
}

.topbar__brand-text {
  min-height: 34px;
  border-left: 0;
}

.topbar__brand-sub {
  color: var(--ss-muted);
  font-size: 12px;
  letter-spacing: .035em;
}

.topbar__title {
  min-width: 0;
  margin-left: 4px;
  padding-left: 0;
  border-left: 0;
}

.topbar__title-main {
  font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
}

.topbar__title-crumb {
  color: var(--ss-muted);
  font-size: 11px;
}

.sidebar {
  background: #0c203d;
  border-right-color: var(--ss-blue-line);
  padding: 22px 12px 14px;
}

.sidebar__section {
  margin-bottom: 22px;
}

.sidebar__section-label {
  margin: 0 10px 7px;
  color: #7f9ac0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sidebar__nav {
  display: grid;
  gap: 4px;
}

.sidebar__link {
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #c0d1e8;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.sidebar__link:hover {
  background: rgba(60, 109, 159, .18);
  border-color: rgba(60, 109, 159, .55);
  color: var(--ss-white);
  transform: translateX(1px);
}

.sidebar__link.is-active {
  background: linear-gradient(90deg, rgba(149,193,31,.23), rgba(149,193,31,.08));
  border-color: rgba(149,193,31,.64);
  color: var(--ss-white);
  box-shadow: inset 3px 0 0 var(--ss-lime);
}

.sidebar__link.is-active::before {
  display: none;
}

.sidebar__icon {
  width: 22px;
  color: var(--ss-yellow);
  filter: saturate(.9);
}

.sidebar__theme-control {
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
}

.sidebar__theme-buttons {
  gap: 5px;
}

.sidebar__theme-btn {
  padding: 6px 8px;
  border-color: var(--ss-blue-line);
  background: rgba(255,255,255,.035);
  color: #c0d1e8;
  font-size: 11px;
}

.sidebar__theme-btn:hover,
.sidebar__theme-btn.is-active {
  border-color: var(--ss-lime);
  background: rgba(149,193,31,.16);
  color: var(--ss-white);
}

.main-panel {
  min-width: 0;
  padding: 26px 28px 30px;
  gap: 20px;
  background:
    radial-gradient(circle at 78% 2%, rgba(39,78,125,.15), transparent 33%),
    var(--bg-app);
}

.main-panel__header {
  align-items: end;
  gap: 18px;
  padding: 0 2px;
}

.main-panel__heading h1 {
  margin-bottom: 3px;
  color: var(--ss-white);
  font-size: clamp(24px, 2.25vw, 34px);
  line-height: 1;
}

.main-panel__heading p {
  max-width: 720px;
  color: var(--ss-muted);
  font-size: 14px;
}

/* Wizualny pasek etapów. Formularz nadal pozostaje jednostronicowy; kliknięcie
   jest wyłączone, aby nie zmieniać istniejącej logiki tabów. */
#quoteView .main-panel__steps {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: auto;
}

#quoteView .step-chip {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border-color: var(--ss-blue-line);
  background: rgba(19,45,80,.72);
  color: var(--ss-muted);
  font-size: 11px;
}

#quoteView .step-chip.is-current {
  border-color: var(--ss-lime);
  background: rgba(149,193,31,.15);
  color: var(--ss-white);
}

#quoteView .step-chip__dot {
  background: var(--ss-blue-line-strong);
}

#quoteView .step-chip.is-current .step-chip__dot {
  background: var(--ss-lime);
  box-shadow: 0 0 0 3px rgba(149,193,31,.14);
}

.card {
  overflow: hidden;
  border-color: var(--ss-blue-line);
  border-radius: var(--ss-radius);
  background: linear-gradient(180deg, rgba(19,45,80,.94), rgba(11,29,54,.94));
  box-shadow: var(--ss-shadow);
}

.card__header {
  padding: 16px 20px;
  background: rgba(19,45,80,.72);
  border-bottom-color: var(--ss-blue-line);
}

.card__header-icon,
.summary-panel__header-icon {
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ss-yellow), var(--ss-lime));
  color: var(--ss-graphite);
}

.card__header-title {
  color: var(--ss-white);
  font-size: 18px;
  letter-spacing: .045em;
}

.card__header-sub {
  color: var(--ss-muted);
  font-size: 12px;
}

/* Czytelne sekcje formularza — mniejszy chaos wizualny, bez zmiany pól. */
#quoteView .tab-panel {
  gap: 20px;
  padding: 22px 24px 26px;
}

#quoteView #tab-client,
#quoteView #tab-installation,
#quoteView #tab-distances,
#quoteView #tab-summary {
  display: block !important;
}

#quoteView #tab-installation,
#quoteView #tab-distances,
#quoteView #tab-summary {
  margin-top: 0;
  padding-top: 26px;
  border-top: 1px solid rgba(60,109,159,.65);
}

#quoteView .one-page-section-title {
  margin: 0 0 4px;
  color: var(--ss-white);
  font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
}

.field-grid {
  gap: 15px 16px;
}

.field {
  gap: 7px;
}

.field label {
  color: #b7cae3;
  font-size: 12px;
  letter-spacing: .01em;
}

.field input,
.field select,
.field textarea,
input[type="text"], input[type="tel"], input[type="email"], input[type="date"],
input[type="number"], input[type="search"], select, textarea {
  min-height: 40px;
  border: 1px solid var(--ss-blue-line);
  border-radius: var(--ss-radius-small);
  background: #081a32;
  color: var(--ss-white);
  font-family: var(--font-ui);
  font-size: 14px;
}

.field input::placeholder,
.field textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: #718aaa;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--ss-lime);
  box-shadow: 0 0 0 3px rgba(149,193,31,.13);
  outline: none;
}

.btn {
  min-height: 38px;
  padding: 9px 15px;
  border-radius: var(--ss-radius-small);
  border-color: var(--ss-blue-line);
  background: rgba(19,45,80,.9);
  color: #c7d7eb;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
}

.btn:hover {
  border-color: var(--ss-blue-line-strong);
  background: var(--ss-navy-800);
  color: var(--ss-white);
}

.btn--primary {
  border: 0;
  background: linear-gradient(100deg, var(--ss-yellow), var(--ss-lime));
  color: #1b2528;
  box-shadow: 0 5px 16px rgba(149,193,31,.18);
}

.btn--primary:hover {
  color: #1b2528;
  filter: brightness(1.06);
}

.pill-option,
.choice-pill,
.radio-pill {
  border-color: var(--ss-blue-line);
  background: rgba(19,45,80,.9);
  color: #b8cbe2;
}

.pill-option.is-active,
.choice-pill.is-active,
.radio-pill.is-active,
.pill-option:has(input:checked),
.choice-pill:has(input:checked),
.radio-pill:has(input:checked) {
  border-color: var(--ss-yellow);
  background: rgba(255,214,56,.16);
  color: var(--ss-white);
}

.summary-panel {
  padding: 22px 18px 24px;
  border-left-color: var(--ss-blue-line);
  background: linear-gradient(180deg, #0d213e 0%, #0a1a31 100%);
  gap: 14px;
}

.summary-panel__header-title {
  font-size: 19px;
  letter-spacing: .04em;
}

.summary-panel__header-sub {
  color: var(--ss-muted);
}

.summary-list {
  border-top-color: var(--ss-blue-line);
}

.summary-row {
  min-height: 39px;
  padding: 9px 4px;
  border-bottom-color: rgba(39,78,125,.72);
}

.summary-row__label {
  color: #abc0db;
}

.summary-row__value {
  color: var(--ss-white);
  font-family: var(--font-ui);
  font-weight: 600;
}

.summary-total {
  margin-top: 6px;
  padding: 16px;
  border-color: rgba(149,193,31,.45);
  background: linear-gradient(135deg, rgba(149,193,31,.19), rgba(255,214,56,.1));
}

.summary-total__label {
  color: #bed0e6;
}

.summary-total__value {
  color: var(--ss-yellow);
  font-size: 30px;
  letter-spacing: .04em;
}

.footer {
  min-width: 0;
  padding: 0 22px;
  background: #0a1a31;
  border-top-color: var(--ss-blue-line);
}

.footer__actions {
  gap: 8px;
}

/* Pozostałe widoki dziedziczą ten sam rytm kart, tabel i list. */
#offersView .card,
#heatSourceView .card,
#heatAuditsView .card,
#templatesView .card,
#adminView .card,
#rulesView .card,
#ordersView .card,
#helpView .card,
#settingsView .card {
  border-color: var(--ss-blue-line);
  border-radius: var(--ss-radius);
}

.admin-table-wrap,
.auth-management__table-wrap {
  border-color: var(--ss-blue-line);
  border-radius: var(--ss-radius-small);
  background: rgba(8,26,50,.42);
}

.admin-table th,
.auth-management__table th {
  background: rgba(19,45,80,.85);
  color: #b9cce3;
  letter-spacing: .045em;
}

.admin-table td,
.auth-management__table td {
  border-bottom-color: rgba(39,78,125,.7);
}

.rule-card,
.configuration-card {
  border-color: var(--ss-blue-line);
  border-radius: var(--ss-radius-small);
  background: rgba(19,45,80,.62);
}

.rule-card:hover,
.configuration-card:hover,
.configuration-card.is-active {
  border-color: var(--ss-lime);
  background: rgba(149,193,31,.1);
}

/* Na telefonie: jedna kolumna, pola bez poziomego ścisku, menu pozostaje
   istniejącą nakładką sterowaną przez #sidebarToggle. */
@media (max-width: 1180px), (pointer: coarse) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 68px auto auto 68px;
    grid-template-areas: "topbar" "main" "summary" "footer";
  }

  .summary-panel {
    border-left: 0;
    border-top: 1px solid var(--ss-blue-line);
  }

  .main-panel {
    padding: 20px 16px 24px;
  }

  .main-panel__header {
    align-items: flex-start;
    flex-direction: column;
  }

  #quoteView .main-panel__steps {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  #quoteView .step-chip {
    flex: 0 0 auto;
  }

  #quoteView .tab-panel {
    padding: 20px 16px 24px;
  }

  .footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    min-height: 68px;
    height: auto;
    padding: 10px 12px;
  }

  .footer__status {
    min-width: 0;
    max-width: 34%;
  }

  .footer__actions {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .footer__actions .btn {
    min-height: 36px;
    padding-inline: 11px;
    font-size: 12px;
  }
}

@media (max-width: 560px), (pointer: coarse) {
  .topbar {
    height: 68px;
    padding-inline: 10px;
  }

  .topbar__logo-img {
    height: 38px;
    max-width: 76px;
  }

  .topbar__brand-text,
  .topbar__title {
    display: none;
  }

  .main-panel__heading h1 {
    font-size: 28px;
  }

  .main-panel__heading p {
    font-size: 13px;
  }

  .card__header {
    padding: 14px 15px;
  }

  .card__header-title {
    font-size: 16px;
  }

  .summary-panel {
    padding: 18px 14px 22px;
  }

  .summary-total__value {
    font-size: 26px;
  }

  .footer {
    align-items: flex-end;
  }

  .footer__status {
    display: none;
  }

  .footer__actions {
    width: 100%;
    justify-content: stretch;
  }

  .footer__actions .btn {
    flex: 1 1 0;
    justify-content: center;
    padding-inline: 8px;
  }
}

/* ========================================================================
   Makieta 1:1 — układ aplikacji z logo w panelu bocznym
   ------------------------------------------------------------------------
   Poniższa sekcja jest świadomym nadpisaniem wcześniejszego layoutu. Nie
   dotyka treści pól ani eventów — tylko zmienia ich prezentację, aby ekran
   wyceny wyglądał jak docelowy projekt, a nie jak karta z liftingiem.
   ======================================================================== */
@media (min-width: 1181px) and (pointer: fine) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: 228px minmax(0, 1fr) 304px;
    grid-template-rows: 0 minmax(0, 1fr) 72px;
    grid-template-areas: "sidebar main summary" "sidebar main summary" "footer footer footer";
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 70px minmax(0, 1fr) 304px;
  }

  .topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 228px;
    height: 78px;
    padding: 0;
    background: linear-gradient(180deg, #102847 0%, #0b1d36 100%);
    border-bottom: 1px solid var(--ss-blue-line);
    pointer-events: none;
    z-index: 40;
  }

  .app-shell.sidebar-collapsed .topbar { left: 70px; }

  .topbar__brand {
    position: fixed;
    top: 0;
    left: 0;
    width: 228px;
    height: 98px;
    padding: 0;
    border-right: 0;
    background: #071426;
    pointer-events: auto;
    z-index: 50;
  }

  .app-shell.sidebar-collapsed .topbar__brand { width: 70px; }

  .topbar__brand .topbar__toggle {
    position: absolute;
    top: 24px;
    left: 13px;
  }

  .topbar__logo-img {
    position: absolute;
    top: 16px;
    left: 63px;
    width: 145px;
    height: 68px;
    max-width: none;
    object-fit: contain;
    object-position: left center;
  }

  .app-shell.sidebar-collapsed .topbar__logo-img,
  .app-shell.sidebar-collapsed .topbar__brand-text { display: none; }

  .topbar__brand-text { display: none; }

  .topbar__title {
    position: fixed;
    top: 15px;
    left: 260px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    pointer-events: auto;
  }

  .app-shell.sidebar-collapsed .topbar__title { left: 100px; }

  .topbar__title-main { font-size: 23px; }

  .topbar .auth-user {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 60;
    margin: 0;
    pointer-events: auto;
    background: rgba(19,45,80,.78);
    border-color: var(--ss-blue-line);
  }

  .sidebar {
    padding-top: 116px;
    background: linear-gradient(180deg, #0b1d36 0%, #0d2342 100%);
  }

  .sidebar__section { padding-top: 13px; }

  .main-panel {
    padding: 30px 26px 28px;
    gap: 18px;
  }

  #quoteView .main-panel__header {
    align-items: stretch;
    flex-direction: column;
    gap: 17px;
    padding: 0 2px;
  }

  #quoteView .main-panel__heading h1 {
    font-size: 33px;
    line-height: .98;
  }

  #quoteView .main-panel__heading p { font-size: 13px; }

  /* Stepper z kołami i łącznikami, zachowuje tekst i istniejące data-tab. */
  #quoteView .main-panel__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    overflow: visible;
    pointer-events: none;
  }

  #quoteView .step-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    min-height: 75px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #b7c8df;
    font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
  }

  #quoteView .step-chip__label {
    display: block;
    color: #c8d6e8;
    font-family: "Roboto Condensed", Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  #quoteView .step-chip::before {
    position: absolute;
    top: 17px;
    left: calc(50% + 26px);
    width: calc(100% - 52px);
    height: 5px;
    border: 0;
    border-radius: 999px;
    background: #596b8d;
    content: "";
  }

  #quoteView .step-chip:last-child::before { display: none; }

  #quoteView .step-chip__dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border: 0;
    border-radius: 50%;
    background: #445271;
    color: #fff;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px;
    font-weight: 700;
  }

  #quoteView .step-chip.is-current .step-chip__dot {
    width: 40px;
    height: 40px;
    margin-top: -2px;
    background: var(--ss-lime);
    color: #152127;
    box-shadow: 0 0 0 5px rgba(149,193,31,.12);
  }

  #quoteView .step-chip.is-current::before {
    background: linear-gradient(90deg, var(--ss-lime), #596b8d);
  }

  #quoteView .step-chip.is-current .step-chip__label { color: var(--ss-lime); }

  /* Form nie jest już ciężką kartą w karcie; sekcje tworzą czystą kolumnę. */
  #quoteView > .card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #quoteView > .card > .card__header { display: none; }

  #quoteView .tab-panel {
    gap: 18px;
    padding: 24px 14px 28px;
    border-bottom: 1px solid rgba(60,109,159,.75);
  }

  #quoteView #tab-client,
  #quoteView #tab-installation,
  #quoteView #tab-distances,
  #quoteView #tab-summary {
    margin: 0;
    border-top: 0;
  }

  #quoteView #tab-client .field-grid,
  #quoteView #tab-installation .field-grid,
  #quoteView #tab-summary .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
  }

  #quoteView #tab-distances .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  #quoteView .one-page-section-title {
    margin-bottom: 5px;
    font-size: 22px;
  }

  #quoteView .field input,
  #quoteView .field select,
  #quoteView .field textarea { min-height: 41px; }

  .summary-panel {
    padding: 24px 18px;
    border-left: 1px solid var(--ss-blue-line);
    background: #0a1a31;
  }

  .footer { padding-inline: 20px; }
}

@media (max-width: 1180px), (pointer: coarse) {
  .topbar {
    position: sticky;
    top: 0;
    height: 68px;
    background: #0b1d36;
    border-bottom-color: var(--ss-blue-line);
    z-index: 40;
  }

  .topbar__brand {
    position: relative;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .topbar__logo-img {
    position: static;
    width: auto;
    height: 40px;
    max-width: 82px;
  }

  .topbar__title { position: static; }

  .main-panel { padding-top: 22px; }

  #quoteView > .card > .card__header { display: flex; }

  #quoteView .main-panel__steps { order: 2; }
}

@media (max-width: 560px), (pointer: coarse) {
  #quoteView .main-panel__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr));
    gap: 0;
    overflow-x: auto;
    padding: 0 0 8px;
  }

  #quoteView .step-chip { min-height: 67px; }
  #quoteView .step-chip__label { font-size: 13px; }
  #quoteView .step-chip::before { top: 15px; }
  #quoteView .step-chip__dot { width: 32px; height: 32px; font-size: 15px; }
  #quoteView .step-chip.is-current .step-chip__dot { width: 36px; height: 36px; }

  #quoteView #tab-client .field-grid,
  #quoteView #tab-installation .field-grid,
  #quoteView #tab-distances .field-grid,
  #quoteView #tab-summary .field-grid { grid-template-columns: 1fr; }
}

/* Etapowy formularz: panel jest naprawdę przełączany, ale wszystkie pola
   pozostają w DOM i nadal są obsługiwane przez kalkulator. */
#quoteView.wizard-mode .main-panel__steps { pointer-events: auto; }
#quoteView.wizard-mode #tab-client[hidden],
#quoteView.wizard-mode #tab-installation[hidden],
#quoteView.wizard-mode #tab-distances[hidden],
#quoteView.wizard-mode #tab-summary[hidden] { display: none !important; }
#quoteView.wizard-mode #tab-client:not([hidden]),
#quoteView.wizard-mode #tab-installation:not([hidden]),
#quoteView.wizard-mode #tab-distances:not([hidden]),
#quoteView.wizard-mode #tab-summary:not([hidden]) { display: block !important; }

/* Zakres jest ograniczony do pierwszej karty — karta materiałów pozostaje
   normalną, odseparowaną kartą i nie nachodzi na podsumowanie. */
#quoteView > .main-panel__header + section.card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#quoteView > .main-panel__header + section.card > .card__header { display: none; }
#quoteView > .main-panel__header + section.card + section.card {
  display: none;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid var(--ss-blue-line);
  border-radius: var(--ss-radius);
  background: linear-gradient(180deg, rgba(19,45,80,.94), rgba(11,29,54,.94));
  box-shadow: var(--ss-shadow);
}
#quoteView.wizard-mode[data-wizard-stage="4"] > .main-panel__header + section.card + section.card { display: block; }
#quoteView > .main-panel__header + section.card + section.card > .card__header { display: flex; }
#quoteView > .main-panel__header + section.card + section.card > .tab-panel { border: 0; }

/* Ukryty element techniczny nie zostawia pustej etykiety „Własny zasobnik”.
   Stan nadal jest zachowany przez #ownCwuTank dla zgodności ze starszymi
   ofertami i zapisami. */
#quoteView #ownCwuTank { display: none !important; }
#quoteView .field:has(> label[for="ownCwuTank"]) { display: none !important; }

.wizard-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(60,109,159,.6);
}
.wizard-actions__hint {
  color: var(--ss-muted);
  font-size: 12px;
  text-align: center;
}
.wizard-actions .btn { min-width: 112px; justify-content: center; }
.wizard-actions--final .btn--primary {
  min-width: 190px;
  min-height: 46px;
  font-size: 14px;
  letter-spacing: .025em;
}

#quoteView .step-chip.is-complete .step-chip__dot {
  background: var(--ss-lime);
  color: #152127;
}

@media (max-width: 760px), (pointer: coarse) {
  .wizard-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .wizard-actions__hint {
    grid-column: 1 / -1;
    grid-row: 1;
    order: -1;
  }
  .wizard-actions .btn { width: 100%; }
  .wizard-actions .btn--primary { grid-column: 2; }
  .wizard-actions .btn--ghost { grid-column: 1; }
  .wizard-actions--final .btn--primary { min-width: 0; }
}

/* Finalny układ makiety: bez pustej stopki, akcje należą do podsumowania. */
@media (min-width: 1181px) and (pointer: fine) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-rows: 0 minmax(0, 1fr);
    grid-template-areas: "sidebar main summary" "sidebar main summary";
  }

  .app-shell.admin-mode,
  .app-shell.admin-mode.sidebar-collapsed {
    grid-template-rows: 0 minmax(0, 1fr);
    grid-template-areas: "sidebar main" "sidebar main";
  }

  .main-panel { padding-top: 104px; }
  .summary-panel { padding-top: 104px; }
  .footer { display: none !important; }
}

/* Karta materiałów zawsze zaczyna się od wyraźnej przerwy po formularzu. */
#quoteView > .main-panel__header + section.card + section.card {
  clear: both;
  position: relative;
  z-index: 1;
  margin-top: 30px !important;
  margin-bottom: 32px;
}
#quoteView > .main-panel__header + section.card + section.card > .card__header,
#quoteView > .main-panel__header + section.card + section.card > .tab-panel {
  position: relative;
  z-index: 1;
}
#quoteView .tab-panel { position: relative; z-index: 0; }

/* Akcje zebrane pod kartą podsumowania: zapis jest główny, pozostałe akcje
   pozostają mniejsze i nie zabierają miejsca formularzowi. */
.summary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--ss-blue-line);
}
.summary-actions .btn {
  width: 100%;
  min-height: 42px;
  justify-content: center;
  padding-inline: 10px;
}
.summary-actions__save {
  grid-column: 1 / -1;
  min-height: 50px !important;
  font-size: 15px !important;
  letter-spacing: .03em;
}
.summary-actions #showCostBreakdownBtn { grid-column: 1 / -1; }

/* Nagłówki pozostają ostre i czytelne — bez poświaty/obrysu. */
h1, h2, h3,
.main-panel__heading h1,
.one-page-section-title,
.card__header-title,
.summary-total__value,
.summary-panel__header-title {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
}

/* Jasny motyw dostaje własne tła, aby tekst nie ginął w ciemnych kartach. */
html.theme-light .main-panel {
  background: #eef3f8;
}
html.theme-light .sidebar,
html.theme-light .summary-panel {
  background: #f8fafc;
}
html.theme-light .topbar__brand { background: #f8fafc; }
html.theme-light .sidebar__link { color: #2d4664; }
html.theme-light .sidebar__link.is-active { color: #1d2b3d; }
html.theme-light .main-panel__heading h1,
html.theme-light .one-page-section-title,
html.theme-light .card__header-title,
html.theme-light .summary-panel__header-title { color: #162b44; }

@media (max-width: 1180px), (pointer: coarse) {
  .app-shell {
    grid-template-rows: var(--topbar-height) auto auto;
    grid-template-areas: "topbar" "main" "summary";
  }
  .app-shell.admin-mode {
    grid-template-rows: var(--topbar-height) auto;
    grid-template-areas: "topbar" "main";
  }
  .footer { display: none !important; }
  .summary-panel { padding-top: 20px; }
  .summary-actions { margin-bottom: 22px; }
}

@media (max-width: 560px), (pointer: coarse) {
  .summary-actions { grid-template-columns: 1fr; }
  .summary-actions__save,
  .summary-actions #showCostBreakdownBtn { grid-column: 1; }
  .summary-actions .btn { min-height: 46px; }
}

/* Oś czasu jest linią z punktami, a nie czterema dużymi kartami. */
#quoteView .step-chip {
  position: relative;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--ss-muted);
}
#quoteView .step-chip:focus,
#quoteView .step-chip:focus-visible { outline: none !important; }
#quoteView .step-chip.is-current { border-color: transparent !important; background: transparent !important; }
#quoteView .step-chip.is-current .step-chip__dot {
  box-shadow: none !important;
}
#quoteView .step-chip.is-complete::before {
  background: var(--ss-lime) !important;
}
#quoteView .step-chip.is-current::before {
  background: linear-gradient(90deg, var(--ss-lime) 0 50%, #596b8d 50% 100%) !important;
}

/* Nawigacja etapu jest przy polach na dole i ma zwarte przyciski. */
.wizard-actions {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  min-height: 48px;
}
.wizard-actions > .btn[data-wizard-prev] { grid-column: 1; }
.wizard-actions > .wizard-actions__hint {
  grid-column: 2;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wizard-actions > .btn[data-wizard-next] { grid-column: 3; }
.wizard-actions .btn {
  width: auto !important;
  min-width: 104px;
  max-width: 170px;
  justify-content: center;
  white-space: nowrap;
  min-height: 42px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
}
.wizard-actions .btn--primary {
  background: linear-gradient(100deg, var(--ss-yellow), var(--ss-lime)) !important;
  border: 0 !important;
  color: #152127 !important;
}
.wizard-actions .btn--ghost {
  background: transparent !important;
  border: 1px solid var(--ss-lime) !important;
  color: var(--ss-lime) !important;
}
.wizard-actions--final { margin-top: 24px; }

#tab-summary > .form-fieldset + .field-grid { margin-top: 16px; }

/* Przyciski akcji mają jeden język wizualny: zapis jest mocny, reszta
   pomocnicza, ale żadnego nie rozciągamy na całą szerokość bez potrzeby. */
.summary-actions__save {
  border-radius: 7px !important;
  background: linear-gradient(100deg, var(--ss-yellow), var(--ss-lime)) !important;
  color: #152127 !important;
  box-shadow: 0 8px 18px rgba(149,193,31,.16);
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
}
.summary-actions .btn:not(.summary-actions__save) {
  border-radius: 7px;
  background: #132d50;
  border-color: var(--ss-blue-line);
  color: #c8d6e8;
}
.summary-actions .btn:not(.summary-actions__save):hover {
  border-color: var(--ss-lime);
  color: var(--ss-white);
}

/* Pigułka jest jedynym widocznym elementem wyboru. Etykieta radio nie może
   dostawać własnego prostokątnego tła z warstwy UI — to ono tworzyło obrys
   wokół VAT-u mimo poprawnego stylu samego przycisku. */
.pill-option,
.pill-option:has(input:checked) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
}
.pill-option input:focus-visible + span { outline: none !important; }
.topbar__title { border-left: 0 !important; padding-left: 0 !important; }
.topbar__title-main,
.topbar__title-crumb,
.main-panel__heading h1,
.one-page-section-title,
.card__header-title,
.summary-panel__header-title { text-shadow: none !important; filter: none !important; }

@media (max-width: 760px), (pointer: coarse) {
  .wizard-actions {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px;
  }
  .wizard-actions .btn { min-width: 86px; max-width: 120px; padding-inline: 10px; }
  .wizard-actions > .wizard-actions__hint { font-size: 11px; }
}

/* Tożsamość użytkownika jest częścią menu, nie nagłówka aplikacji. */
.topbar > .auth-user { display: none !important; }
.sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar__footer .sidebar__theme-control {
  order: 2;
  margin: 0;
  padding: 5px 0;
}
.sidebar__footer .auth-user--sidebar {
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--ss-blue-line);
  border-radius: 8px;
  background: rgba(19,45,80,.72);
  color: var(--ss-white);
  font-size: 12px;
}
.auth-user--sidebar .auth-user__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.auth-user--sidebar .auth-user__identity strong,
.auth-user--sidebar .auth-user__role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-user--sidebar .auth-user__role { color: var(--ss-muted); }
.auth-user--sidebar .auth-logout {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 7px;
}

/* Pełny, jasny motyw: podmieniamy również tokeny używane przez warstwę UI,
   nie tylko tło strony. Dzięki temu pola, karty i panel podsumowania nie
   pozostają granatowe po wybraniu opcji „Jasny”. */
html.theme-light {
  --bg-app: #eef3f8;
  --bg-panel: #ffffff;
  --bg-panel-alt: #f3f6fa;
  --bg-panel-hover: #e7edf5;
  --bg-input: #ffffff;
  --border-subtle: #d2dce8;
  --border-strong: #aebed1;
  --text-primary: #18253a;
  --text-secondary: #50637b;
  --text-muted: #72849b;
  --ss-white: #18253a;
  --ss-muted: #61748d;
  --ss-navy-950: #eef3f8;
  --ss-navy-900: #ffffff;
  --ss-navy-850: #f3f6fa;
  --ss-navy-800: #e7edf5;
  --ss-blue-line: #c2d1e1;
  --ss-blue-line-strong: #7b9fc6;
}
html.theme-light body {
  background: #eef3f8;
  color: #18253a;
}
html.theme-light .topbar {
  background: #ffffff;
  border-bottom-color: #d2dce8;
}
html.theme-light .topbar__brand,
html.theme-light .sidebar {
  background: #f8fafc;
  border-color: #d2dce8;
}
html.theme-light .topbar__toggle {
  color: #304862;
  border-color: #aebed1;
  background: #ffffff;
}
html.theme-light .sidebar__section-label { color: #6a7e96; }
html.theme-light .sidebar__link { color: #2d4664; }
html.theme-light .sidebar__link:hover { color: #18253a; background: rgba(60,109,159,.10); }
html.theme-light .sidebar__link.is-active { color: #18253a; }
html.theme-light .sidebar__icon { color: #c48b00; }
html.theme-light .sidebar__theme-btn { color: #50637b; border-color: #c2d1e1; background: #ffffff; }
html.theme-light .sidebar__theme-btn.is-active { color: #18253a; border-color: #95c11f; background: rgba(149,193,31,.18); }
html.theme-light .main-panel,
html.theme-light .summary-panel { background: #eef3f8; }
html.theme-light .summary-panel { border-left-color: #d2dce8; }
html.theme-light .card,
html.theme-light .summary-total,
html.theme-light .quote-standard-note,
html.theme-light .summary-note,
html.theme-light .summary-actions .btn:not(.summary-actions__save) {
  background: #ffffff;
  color: #304862;
}
html.theme-light .card__header {
  background: #f3f6fa !important;
  border-bottom-color: #d2dce8 !important;
}
html.theme-light .card__header-title { color: #18253a !important; }
html.theme-light .card__header-sub { color: #50637b !important; }
html.theme-light .admin-table-wrap,
html.theme-light .auth-management__table-wrap {
  background: #ffffff !important;
  border-color: #c2d1e1 !important;
}
html.theme-light .admin-table th,
html.theme-light .auth-management__table th {
  background: #e7edf5 !important;
  color: #304862 !important;
  border-bottom-color: #c2d1e1 !important;
}
html.theme-light .admin-table td,
html.theme-light .auth-management__table td {
  background: #ffffff !important;
  color: #304862 !important;
  border-bottom-color: #d2dce8 !important;
}
html.theme-light .admin-table input,
html.theme-light .admin-table select,
html.theme-light .admin-input {
  background: #ffffff !important;
  color: #18253a !important;
  border-color: #b8c8da !important;
}
html.theme-light .rule-card,
html.theme-light .configuration-card {
  background: #ffffff !important;
  color: #304862;
  border-color: #c2d1e1 !important;
}
html.theme-light #offersView .offer-actions .btn:not(.btn--primary),
html.theme-light #offersView .offer-delete-btn {
  background: #ffffff !important;
  color: #304862 !important;
  border-color: #9fb7d1 !important;
}
html.theme-light .field input,
html.theme-light .field select,
html.theme-light .field textarea,
html.theme-light .quote-select {
  background: #ffffff;
  color: #18253a;
  border-color: #b8c8da;
}
html.theme-light .field label,
html.theme-light .form-fieldset__label,
html.theme-light .main-panel__heading p { color: #50637b; }
html.theme-light .summary-row,
html.theme-light .summary-block__title { border-color: #d2dce8; }
html.theme-light .summary-row__label { color: #50637b; }
html.theme-light .summary-row__value { color: #18253a; }
html.theme-light .sidebar__footer .auth-user--sidebar { background: #0f2544; color: #f5f8fc; border-color: #274e7d; }
html.theme-light .auth-user--sidebar .auth-user__role { color: #9bb1cf; }
html.theme-light #quoteView .step-chip__label { color: #5b6f87; }
html.theme-light #quoteView .step-chip.is-current .step-chip__label { color: #69950f; }

@media (min-width: 1181px) and (pointer: fine) {
  /* Logo i przycisk menu pozostają w lewym panelu; pusty pasek nad formularzem
     nie pełni już żadnej funkcji po usunięciu tytułu nawigacyjnego. */
  .topbar {
    height: 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
  }
  .main-panel { padding-top: 30px; }
  .summary-panel { padding-top: 30px; }
  html.theme-light .topbar__logo-img { filter: none; }
}

/* Ciemny motyw zgodny z makietą: sidebar ma kolor strefy logo, a obszary
   robocze są o jeden poziom jaśniejsze i czytelniej oddzielają formularz od
   menu. */
html:not(.theme-light) .sidebar,
html:not(.theme-light) .topbar__brand {
  background: #071426;
}
html:not(.theme-light) .main-panel,
html:not(.theme-light) .summary-panel {
  background: #0b1d36;
}

/* Menu boczne ma działać jak czysta kolumna nawigacji. Ukryty scrollbar
   zostawia przewijanie kółkiem/touchem, ale nie tworzy drugiej pionowej kreski
   obok granicy logo i menu. */
.sidebar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; }
.sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* Granica należy do panelu menu. Blok logo nie rysuje drugiego paska obok
   tej samej krawędzi; znika również odziedziczona kreska tekstu marki. */
.topbar__brand { border-right: 0; }
.topbar__brand-text { border-left: 0; }

/* Panel zamówień ma stały rytm również na komputerze. Wcześniej odstępy
   zależały od bazowych stylów karty, przez co nagłówek, zakładki i pusty stan
   potrafiły zlać się w jedną kolumnę po zmianie szerokości widoku. */
#ordersView .main-panel__header {
  margin-bottom: 16px;
  padding: 0 4px;
  gap: 8px;
}
#ordersView > .card { margin-top: 0; }
#ordersView > .card > .card__header { padding: 18px 22px; }
#ordersView #ordersTabs {
  margin: 16px 22px 0;
  gap: 10px;
}
#ordersView #ordersList {
  padding: 16px 22px 20px;
  gap: 16px;
}
#ordersView #ordersEmptyState { margin: 16px 22px 20px; }

@media (max-width: 760px), (pointer: coarse) {
  #ordersView .main-panel__header {
    margin-bottom: 10px;
    padding: 0 2px;
    gap: 6px;
  }
  #ordersView > .card {
    margin-top: 0;
  }
  #ordersView > .card > .card__header {
    padding: 14px 16px;
  }
  #ordersView #ordersTabs {
    margin: 12px 14px 0;
    gap: 8px;
  }
  #ordersView #ordersList {
    padding: 12px 14px;
    gap: 12px;
  }
  #ordersView #ordersEmptyState {
    margin: 12px 14px 14px;
  }
}

/* Stały rytm odstępów w etapach wyceny — pola i komunikaty nie mogą się
   zlewać nawet przy długich etykietach lub zmianie szerokości okna. */
#quoteView #tab-distances .field-grid {
  column-gap: 16px;
  row-gap: 16px;
}
#quoteView #tab-distances .quote-standard-note + .field-grid {
  margin-top: 22px;
}
#quoteView #tab-summary > .form-fieldset + .field-grid {
  margin-top: 16px;
}

/* W jasnym motywie karta materiałów ma własne style modułu, dlatego wymaga
   osobnego, jednoznacznego nadpisania tła i tekstu. */
html.theme-light #quoteView > .main-panel__header + section.card + section.card {
  background: #ffffff !important;
  color: #18253a;
  border-color: #c2d1e1;
  box-shadow: 0 8px 24px rgba(24,37,58,.08);
}
html.theme-light #quoteView > .main-panel__header + section.card + section.card > .card__header {
  background: #f3f6fa !important;
  border-bottom-color: #d2dce8;
}
html.theme-light #quoteView > .main-panel__header + section.card + section.card .materials-list__item,
html.theme-light #quoteView > .main-panel__header + section.card + section.card .materials-list__name {
  color: #18253a;
  border-color: #d2dce8;
}
html.theme-light #quoteView > .main-panel__header + section.card + section.card input {
  background: #ffffff;
  color: #18253a;
  border-color: #b8c8da;
}

/* Akcje oferty tworzą jeden, czytelny rząd. Na węższym ekranie zawijają się
   z równym odstępem zamiast tworzyć ciasną kolumnę bez przerw. */
#offersView .admin-table td:last-child {
  min-width: 360px;
}
#offersView .offer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#offersView .offer-actions .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 760px), (pointer: coarse) {
  #offersView .admin-table td:last-child { min-width: 260px; }
  #offersView .offer-actions { gap: 7px; }
}

/* Mały, nienachalny status zapisu pojedynczego pola katalogu. */
#catalogSaveStatus {
  margin-left: auto;
  min-height: 1.2em;
  font-size: 12px;
  color: var(--muted, #9fb3ce);
  text-align: right;
}
#catalogSaveStatus.is-saving { color: #ffd638; }
#catalogSaveStatus.is-saved { color: #95c11f; }
#catalogSaveStatus.is-error { color: #ff9b8f; }
@media (max-width: 760px), (pointer: coarse) {
  #catalogSaveStatus { width: 100%; margin: 6px 0 0; text-align: left; }
}

/* Jedyny separator pozostaje na prawej krawędzi menu. Nagłówek nie dostaje
   drugiej kreski przy tytule „Nowa wycena”. */
.topbar__title {
  border-left: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.sidebar {
  box-sizing: border-box;
  border-right: 1px solid var(--ss-blue-line) !important;
}
.main-panel { border-left: 0 !important; margin-left: 0 !important; }

/* Stabilne motywy: aplikacja nie może dziedziczyć kolorystyki systemu telefonu
   ani jego natywnego trybu formularzy. */
html:not(.theme-light) { color-scheme: dark !important; }
html.theme-light { color-scheme: only light !important; }
html.theme-light,
html.theme-light body,
html.theme-light #app,
html.theme-light .app-shell { forced-color-adjust: none; }
html, body, #app, .app-shell { max-width: 100%; min-width: 0; }
body { overflow-x: hidden; }
html.theme-light body { background: #eef3f8 !important; }
html:not(.theme-light) body { background: #071426 !important; }
html.theme-light input,
html.theme-light select,
html.theme-light textarea,
html.theme-light button { color-scheme: light; }
html:not(.theme-light) input,
html:not(.theme-light) select,
html:not(.theme-light) textarea,
html:not(.theme-light) button { color-scheme: dark; }

/* Przyciski nawigacji mają wspólną wysokość i wspólną linię bazową. Dzięki
   stałej wysokości panelu kliknięcie „Dalej” nie przeskakuje przy zmianie etapu. */
#quoteView.wizard-mode #tab-client:not([hidden]),
#quoteView.wizard-mode #tab-installation:not([hidden]),
#quoteView.wizard-mode #tab-distances:not([hidden]),
#quoteView.wizard-mode #tab-summary:not([hidden]) {
  min-height: 560px;
}
#quoteView.wizard-mode .wizard-actions {
  min-height: 78px !important;
  margin-top: auto !important;
  align-items: center;
}
#quoteView.wizard-mode .wizard-actions .btn {
  height: 42px !important;
  min-height: 42px !important;
}

/* Na telefonie i w poziomie żadna stała szerokość nie może zostawić pustego
   pasa obok aplikacji. */
@media (max-width: 1024px), (pointer: coarse) {
  html, body, #app, .app-shell, .main-panel, .summary-panel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .main-panel { overflow-x: hidden !important; }
  .topbar, .topbar__brand, .topbar__logo-img { max-width: 100%; }
  html:not(.theme-light) .topbar { background: #102847 !important; }
  html.theme-light .topbar { background: #ffffff !important; border-bottom-color: #d2dce8 !important; }
  #quoteView.wizard-mode #tab-client:not([hidden]),
  #quoteView.wizard-mode #tab-installation:not([hidden]),
  #quoteView.wizard-mode #tab-distances:not([hidden]),
  #quoteView.wizard-mode #tab-summary:not([hidden]) { min-height: 520px; }
}
@media (max-width: 1024px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  .app-shell, .app-shell.sidebar-collapsed { grid-template-columns: 100% !important; }
  .main-panel { margin-left: 0 !important; padding-inline: 18px !important; }
  .summary-panel { border-left: 0 !important; }
}

/* Jedyna kontrolowana granica przebiega między menu a treścią. Blok logo i
   tytuł nie mają własnych borderów, więc nie tworzą podwójnej kreski. */
.topbar__brand, .topbar__brand-text, .topbar__title { border-left: 0; border-right: 0; }
.main-panel { border-left: 0; }
/* Przełączanie hidden paneli nie może uruchamiać scroll anchoring i przesuwać
   całego wizarda o wysokość nagłówka poprzedniego etapu. */
.main-panel { overflow-anchor: none; }

/* Ostatnia warstwa wizarda: wcześniejszy lifting UI miał regułę
   `display:block !important` na panelach, przez co atrybut `hidden` z modułu
   30-wizard-ui nie mógł ich przełączać. Tu jawnie przywracamy jeden aktywny
   etap i układ flex, dzięki któremu nawigacja trzyma się tej samej krawędzi. */
#quoteView.wizard-mode #tab-client[hidden],
#quoteView.wizard-mode #tab-installation[hidden],
#quoteView.wizard-mode #tab-distances[hidden],
#quoteView.wizard-mode #tab-summary[hidden] { display:none !important; }
#quoteView.wizard-mode #tab-client:not([hidden]),
#quoteView.wizard-mode #tab-installation:not([hidden]),
#quoteView.wizard-mode #tab-distances:not([hidden]),
#quoteView.wizard-mode #tab-summary:not([hidden]) {
  display:flex !important;
  flex-direction:column !important;
  height:700px !important;
  min-height:700px !important;
  max-height:700px !important;
  overflow-y:auto !important;
}
#quoteView.wizard-mode .wizard-actions {
  margin-top:auto !important;
  min-height:78px !important;
  height:78px !important;
  flex:0 0 78px !important;
  align-items:center !important;
}
#quoteView.wizard-mode .wizard-actions .btn {
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
}
@media (max-width:1024px) {
  #quoteView.wizard-mode .wizard-actions {
    position:sticky;
    bottom:0;
    z-index:10;
    background:var(--ss-panel, #102a4c);
  }
}

/* Kanoniczna oś etapów: etykieta jest prawdziwym tekstem w HTML, a CSS
   odpowiada wyłącznie za układ, węzły i łączniki. Ten sam model działa na
   desktopie, w pionie i w poziomie — bez pseudo-elementów z nazwami etapów. */
#quoteView .main-panel__steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  min-width: 0;
  overflow: visible;
  pointer-events: auto;
}
#quoteView .step-chip {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 72px;
  padding: 0 4px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--ss-muted);
  font-family: var(--font-ui);
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
#quoteView .step-chip__label {
  display: block;
  max-width: 100%;
  color: var(--ss-muted);
  font: inherit;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
#quoteView .step-chip__dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 0;
  border-radius: 50%;
  background: #445271;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
#quoteView .step-chip::before {
  position: absolute;
  top: 16px;
  left: calc(50% + 22px);
  width: calc(100% - 44px);
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: #596b8d;
  content: "";
}
#quoteView .step-chip:last-child::before { display: none; }
#quoteView .step-chip.is-current .step-chip__dot {
  background: var(--ss-lime);
  color: #152127;
  box-shadow: 0 0 0 4px rgba(149,193,31,.14);
}
#quoteView .step-chip.is-current .step-chip__label { color: var(--ss-lime); }
#quoteView .step-chip.is-current::before,
#quoteView .step-chip.is-complete::before {
  background: linear-gradient(90deg, var(--ss-lime) 0 50%, #596b8d 50% 100%);
}
@media (max-width: 600px), (pointer: coarse) {
  #quoteView .step-chip { min-height: 66px; gap: 7px; padding-inline: 2px; font-size: 11px !important; }
  #quoteView .step-chip__dot { width: 30px; height: 30px; font-size: 14px; }
  #quoteView .step-chip.is-current .step-chip__dot { width: 34px; height: 34px; margin-top: -2px; }
  #quoteView .step-chip::before { top: 13px; left: calc(50% + 19px); width: calc(100% - 38px); height: 3px; }
}

/* Wąskie widoki nie mogą dziedziczyć szerokości dokumentu ani zostawiać
   pustego pasa po prawej stronie w orientacji poziomej. */
@media (max-width: 1024px), (pointer: coarse) {
  html, body, #app, .app-shell { width: 100%; max-width: 100%; overflow-x: clip; }
  .app-shell { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  .app-shell,
  .app-shell.sidebar-collapsed,
  .app-shell.admin-mode,
  .app-shell.admin-mode.sidebar-collapsed {
    width: 100dvw;
    grid-template-columns: 100%;
    grid-template-rows: var(--topbar-height) auto auto;
    grid-template-areas: "topbar" "main" "summary";
  }
  .main-panel, .summary-panel { width: 100%; max-width: 100%; min-width: 0; }
}