/* ============================================================
   CLOUDE — warstwa PREMIUM (ładowana PO styles.css).
   Cel: nowoczesny, „aplikacyjny" wygląd + wizytówki zamiast gołych tabel.
   Zasada: nadpisujemy tokeny i polerujemy komponenty po klasach.
   Nic w JS ani markupie nie jest ruszane — to wyłącznie wygląd.
   ============================================================ */

/* ---------- TOKENY ----------
   PRZENIESIONE do styles.css (jedno źródło prawdy, sterowane z kartoteki
   „Styl CSS"). theme-premium.css NIE definiuje już tokenów — tylko
   stylizuje komponenty, czytając tokeny przez var(). Koniec wojny tokenów. */

/* ---------- Baza ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -.005em; }
.content { padding: 28px 34px; }
.toolbar, .catalog-toolbar { margin-bottom: 18px; }

/* ---------- Panel boczny ---------- */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 14px 12px;
}
.sidebar .brand { padding: 8px 10px 16px; }
.sidebar .brand strong { letter-spacing: .04em; font-size: 16px; color: var(--text); }
.nav { gap: 3px; }
.nav-item {
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-weight: 600;
  color: var(--muted);
  border: none;
  background: transparent;
  transition: background .16s ease, color .16s ease;
}
.nav-item:hover { background: var(--surface-muted); color: var(--text); }
.nav-item.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(59,110,240,.28);
}
.nav-item.active .icon { color: #fff; opacity: 1; }
.nav-catalog-group summary {
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-weight: 600;
  color: var(--muted);
}
.nav-catalog-group summary:hover { background: var(--surface-muted); color: var(--text); }
.collapse-button { border-radius: var(--radius-sm); color: var(--muted); }

/* ---------- Górny pasek ---------- */
.topbar {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--line);
  padding: 12px 22px;
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(1.2) blur(6px);
}
.topbar-title h1 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.user-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface-muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 14px 5px 5px; font-weight: 600; color: var(--text);
}
.user-chip > span:first-child {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 800;
}

/* ---------- Przyciski ---------- */
.ghost-button, .icon-button {
  border-radius: var(--button-radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.ghost-button:hover, .icon-button:hover { border-color: var(--accent); transform: translateY(-1px); }
.primary-button, .button-primary, button.primary, [data-action="save"]:not(.nav-item) {
  background: var(--accent); border-color: var(--accent); color: #fff;
  border-radius: var(--button-radius); box-shadow: 0 6px 16px rgba(59,110,240,.28);
}
.primary-button:hover, .button-primary:hover, button.primary:hover { background: var(--accent-strong); }

/* ---------- Pola formularzy ---------- */
input, select, textarea {
  border-radius: var(--input-radius) !important;
  border-color: var(--line);
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* ============================================================
   GLOBALNY POLISH WSPÓLNYCH KOMPONENTÓW (działa na wielu widokach)
   ============================================================ */
/* Nagłówki widoków */
.section-header h1, .section-header h2, .settings-page h1, .catalog-toolbar h1, .content > h1 {
  font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.02em !important;
}
.section-header { margin-bottom: 14px !important; padding-bottom: 0 !important; border-bottom: none !important; }
.panel-body { padding: 14px !important; }

/* Panele jako czyste karty (bez ciężkich obwódek) */
.panel, .card, .surface-card, .catalog-card {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface) !important;
  overflow: hidden;
}
.panel > header, .panel-head, .panel-title, .panel-heading {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--line) !important;
  font-weight: 800 !important;
  background: var(--surface) !important;
}
.panel-body { padding: 14px !important; }

/* Listy/wiersze nawigacyjne (np. menu Ustawień) -> klikalne karty-wiersze */
.settings-status-item, .settings-nav-item, .nav-list-item {
  border-radius: 10px !important;
  transition: background .15s ease;
}

/* Pola TYLKO w Ustawieniach — większe i nowoczesne (nie ruszamy gęstych Kalkulacji) */
.settings-form-grid input:not([type="checkbox"]):not([type="radio"]),
.settings-form-grid select, .settings-form-body input:not([type="checkbox"]),
.settings-form-body select {
  min-height: 38px !important;
  border-radius: 9px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

/* ---------- Panele / karty ---------- */
.content > section { border-radius: var(--radius); }
.catalog-toolbar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}

/* ============================================================
   WIZYTÓWKI — katalogi jako karty zamiast gołej tabeli
   (technika border-spacing: każdy wiersz = osobna karta)
   ============================================================ */
.catalog-table {
  border-collapse: separate;
  border-spacing: 0 7px;
  width: 100%;
}
.catalog-table thead th {
  background: transparent !important;
  border: none !important;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 18px 2px;
}
/* Wiersz = czysta karta: biel + miękki cień, BEZ ramki. Kontrast daje szare tło treści. */
.catalog-table tbody tr {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  transition: box-shadow .18s ease, transform .18s ease;
}
.catalog-table tbody tr:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.catalog-table tbody td {
  background: transparent;
  border: none !important;
  padding: 9px 14px;
  vertical-align: middle;
}
.catalog-table tbody td:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
  font-weight: 700;
  color: var(--text);
}
.catalog-table tbody td:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
/* Ciemny motyw — karty katalogu bez ramek (wyższa specyficzność niż bazowe reguły) */
:root[data-theme="dark"] .catalog-table tbody tr { background: var(--surface); }
:root[data-theme="dark"] .catalog-table tbody td { border: none !important; background: transparent; }

/* ============================================================
   WIZYTÓWKI PROJEKTÓW — karty zamiast tabeli (widok Projekty)
   ============================================================ */
.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
  padding: 2px;
  align-items: start;
}
.empty-cards { padding: 50px; text-align: center; color: var(--muted); grid-column: 1 / -1; }
.project-tile {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 11px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.project-tile:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
/* Rozwinięta karta NIE poszerza się — zostaje w swojej (szerokiej) kolumnie, rośnie tylko w dół.
   Kompaktowe, kompletne okno. */
.project-tile.is-warranty-active { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tile-headline { min-width: 0; flex: 1 1 auto; }            /* min-width:0 = pozwala obcinać wielokropkiem */
.tile-number { font-size: 11px; font-weight: 700; color: var(--muted); }
/* Nazwa projektu: jedna linia, za długa -> „…" (kropki wliczone w długość) */
.tile-name { margin: 3px 0 2px; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nazwa klienta: OSOBNE pole, też obcinane wielokropkiem (bez norm!) */
.tile-client { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Prawa kolumna nagłówka: status + norma jako osobne rekordy */
.tile-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.tile-standard { display: inline-block; padding: 2px 9px; border-radius: 7px; background: var(--surface-strong);
  color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.tile-people { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile-person { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile-person .tiny { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); }
.tile-totals {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
  border-top: 1px solid var(--line); padding-top: 11px;
}
.tile-totals > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-totals span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-2); }
.tile-totals b { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-total b { color: var(--accent); }
.tile-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.tile-actions-spacer { flex: 1; }

/* Pasek-akordeon etapów (intuicyjny rozwijacz) */
.tile-expander {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 12px; padding: 9px 12px;
  border: none; border-top: 1px solid var(--line); background: transparent;
  cursor: pointer; border-radius: 0 0 10px 10px; transition: background .15s ease;
  text-align: left;
}
.tile-expander:hover { background: var(--surface-muted); }
.tile-stage-dots { display: inline-flex; align-items: center; gap: 4px; }
.tile-stage-dot { width: 10px; height: 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); flex: none; }
.tile-stage-dot-empty { background: var(--line-strong) !important; }
.tile-expander-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.tile-expander-chevron { margin-left: auto; font-size: 15px; color: var(--muted); transition: transform .26s cubic-bezier(.4,0,.2,1); line-height: 1; }
.project-tile.open .tile-expander-chevron { transform: rotate(180deg); color: var(--accent); }
.project-tile.open .tile-expander { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.project-tile.open .tile-expander-label { color: var(--accent); }

/* Płynne wysuwanie etapów (grid 0fr->1fr) — bez przerenderowania, bez skakania sąsiadów */
.tile-stages-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.4,0,.2,1); }
.project-tile.open .tile-stages-wrap { grid-template-rows: 1fr; }
.tile-stages { overflow: hidden; min-height: 0; }
.project-tile.open .tile-stages { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }

/* Etapy jako kafelki (zamiast tabeli) */
.tile-stage-list { display: flex; flex-direction: column; gap: 6px; }
.tile-stage-item { display: flex; gap: 0; background: var(--surface-muted); border-radius: 9px; transition: background .15s ease; }
.tile-stage-item:hover { background: color-mix(in srgb, var(--stage) 10%, var(--surface-muted)); }
.tile-stage-accent { width: 4px; background: var(--stage); flex: none; border-radius: 9px 0 0 9px; }
.tile-stage-main { flex: 1; min-width: 0; padding: 7px 11px; display: flex; flex-direction: column; gap: 3px; }
.tile-stage-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-stage-name { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-stage-cost { font-weight: 400; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.tile-stage-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tile-stage-sub .status-pill, .tile-stage-sub .production-step-status-button { font-size: 10px !important; padding: 1px 8px !important; min-height: 0 !important; }
.tile-stage-count { font-size: 10.5px; color: var(--muted); }
.tile-stage-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 12px; background: var(--surface-muted); border-radius: 9px; }

/* Nagłówek etapu — jeden rząd: nazwa (klik=rozwiń) + cena materiału + menu ⋮ */
.tile-stage-row { display: flex; align-items: center; gap: 8px; }
.tile-stage-head { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.tile-stage-head .tile-stage-name { flex: 1; }
/* Klik = rozwiń: cały nagłówek (rząd + podrząd ze statusem) jest klikalny, nie tylko chevron. */
.tile-stage-item.has-constr .tile-stage-row,
.tile-stage-item.has-constr .tile-stage-sub { cursor: pointer; }
/* Chevron tej samej wielkości co napis nagłówka (glif „⌄" jest wizualnie mniejszy -> większy px) */
.tile-stage-chevron { font-size: 16px; font-weight: 700; color: var(--muted); transition: transform .22s ease; flex: none; }
.tile-stage-item.open .tile-stage-chevron { transform: rotate(180deg); color: var(--accent); }
.tile-stage-cost { font-weight: 400; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }

/* Menu ⋮ (3 kropki) — chowa wszystkie akcje */
.tile-menu { position: relative; flex: none; }
.tile-menu > summary { list-style: none; cursor: pointer; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); font-size: 16px; line-height: 1; user-select: none; }
.tile-menu > summary::-webkit-details-marker { display: none; }
.tile-menu > summary::marker { content: ""; }
.tile-menu > summary:hover { background: var(--surface-muted); color: var(--text); }
.tile-menu[open] > summary { background: var(--surface-strong); color: var(--accent); }
.tile-menu-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 5px; display: flex; flex-direction: column; gap: 2px; }

/* „Dodaj etap" (dropdown w stopce karty) — zakotwiczony pod przyciskiem, nie lata po planszy */
.project-tile .project-stage-menu { position: relative !important; }
.project-tile .project-stage-menu-panel {
  position: absolute !important; left: auto !important; right: 0 !important; top: calc(100% + 5px) !important; bottom: auto !important;
  z-index: 60 !important; min-width: 210px !important; max-height: 320px; overflow: auto;
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 10px !important;
  box-shadow: var(--shadow-lg) !important; padding: 5px !important; display: flex !important; flex-direction: column !important; gap: 2px !important;
}
.project-tile .project-stage-menu-action {
  width: 100% !important; text-align: left !important; border: none !important; background: transparent !important;
  padding: 7px 10px !important; border-radius: 7px !important; font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer;
}
.project-tile .project-stage-menu-action:hover { background: var(--surface-muted) !important; }
.tile-menu-panel .tile-menu-item, .tile-menu-panel button {
  display: block !important; width: 100% !important; text-align: left !important; border: none !important;
  background: transparent !important; padding: 7px 10px !important; border-radius: 7px !important;
  font-size: 12.5px !important; font-weight: 600 !important; color: var(--text) !important; cursor: pointer; box-shadow: none !important; min-height: 0 !important; }
.tile-menu-panel button:hover, .tile-menu-panel .tile-menu-item:hover { background: var(--surface-muted) !important; }
.tile-menu-panel .danger, .tile-menu-panel [class*="delete"], .tile-menu-panel [data-action^="delete"] { color: var(--danger) !important; }
.tile-menu-panel .inline-actions, .tile-menu-panel .row-actions, .tile-menu-panel .row-action-left, .tile-menu-panel .row-action-right { display: contents !important; }
.tile-menu-panel .icon { display: none; }
/* przyciski „tylko ikona" z renderStageActions dostają etykietę tekstową w menu */
.tile-menu-panel .delete-stage-button::after { content: "Usuń etap"; }
.tile-menu-panel .delete-design-button::after { content: "Usuń design"; }
.tile-menu-panel .delete-construction-button::after { content: "Usuń konstrukcję"; }

/* Rozwijane wnętrze etapu (płynnie) */
.tile-constr-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s cubic-bezier(.4,0,.2,1); }
.tile-stage-item.open .tile-constr-wrap { grid-template-rows: 1fr; }
.tile-constr-list { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.tile-stage-item.open .tile-constr-list { margin-top: 8px; }
/* gdy otwarte menu ⋮ — pozwól mu wyjść poza klip (zachowując animację zwijania) */
.tile-constr-list:has(.tile-menu[open]), .tile-constr-sublist:has(.tile-menu[open]) { overflow: visible; }
.tile-stage-item.open:has(.tile-menu[open]) .tile-constr-wrap { overflow: visible; }

/* Grupa Design (A/B) */
.tile-design-group { border: 1px solid var(--line); border-radius: 9px; }
.tile-design-head { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: var(--surface-muted); border-radius: 9px 9px 0 0; }
.tile-design-badge { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; flex: none; }
.tile-design-label { flex: 1; min-width: 0; font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-design-cost { font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.tile-constr-sublist { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.tile-constr-empty { color: var(--muted); font-size: 11.5px; padding: 4px 2px; }

/* Konstrukcja: ikona przed nazwą + capacity/atrakcje + cena materiału + ⋮ */
/* Tło/ramka na CAŁYM wierszu konstrukcji -> ⋮ należy do tła. Przycisk otwierający jest przezroczysty. */
.tile-constr-item {
  display: flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding-right: 4px;
  transition: border-color .15s ease, background .15s ease;
}
.tile-constr-item:hover { border-color: var(--accent); background: var(--surface-muted); }
.tile-constr-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.tile-constr-open:hover { background: transparent; }
.tile-constr-icon { color: var(--accent); font-size: 14px; flex: none; }
.tile-constr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tile-constr-name { font-weight: 500; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-constr-ver { font-size: 9.5px; color: var(--muted); background: var(--surface-strong); padding: 0 5px; border-radius: 4px; font-weight: 600; }
.tile-constr-metrics { font-size: 10px; color: var(--muted); }
.tile-constr-metrics .version-metrics { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.tile-constr-cost { font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
/* Status (pill / przycisk) w kompaktowych wierszach Plany/Produkcja/Gwarancja */
.tile-constr-statuswrap { flex: none; display: inline-flex; align-items: center; margin-left: auto; }
.tile-constr-item > .status-pill,
.tile-constr-item .tile-constr-statuswrap .status-pill {
  flex: none; align-self: center; font-size: 10px; padding: 1px 9px; min-height: 0; white-space: nowrap;
}
.tile-constr-item > .production-step-status-button { cursor: pointer; }
@media (max-width: 560px) { .project-cards { grid-template-columns: 1fr; } }

/* ============================================================
   WIDOK PROJEKTÓW jako profesjonalna TABELA (PC, >=1024px).
   Wąski ekran (tablet/telefon) dostaje wizytówki (czytelniejsze) — przełącza JS.
   Wiersz reużywa .project-tile, więc rozwijanie/etapy/menu działają bez zmian.
   ============================================================ */
/* Pas-karta na jasnoszarym tle z odstępem -> każdy projekt jest WYRAŹNIE oddzielony
   (wcześniej cienka kreska zlewała wiersze). Spójne z kartowym stylem aplikacji. */
.project-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--surface-muted);
}
.project-row.project-tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
  padding: 0;
  gap: 0;
  transition: box-shadow .16s ease, border-color .16s ease;
}
/* Rozdzielenie NEUTRALNE: cień + szara ramka + odstęp. ŻADNYCH kolorów na całym projekcie —
   kolory niosą tylko ETAPY (--stage) i STATUSY (pille). */
.project-row.project-tile:hover,
.project-row.project-tile.open {
  transform: none;
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
/* Gwarancja: bez bursztynowej ramki na całym projekcie (nadpisuje regułę kart) — info niesie etap/status */
.project-row.project-tile.is-warranty-active { border-color: var(--line); }
.project-row.project-tile.is-warranty-active:hover,
.project-row.project-tile.is-warranty-active.open { border-color: var(--line-strong); }

.prow-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto);
  align-items: center;
  gap: 16px;
  padding: 11px 16px;
}
.prow-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prow-number { font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: .02em; white-space: nowrap; }
.prow-titles { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prow-name { margin: 0; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow-client { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.prow-status { display: flex; align-items: center; gap: 8px; flex: none; }
.prow-standard { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--surface-strong); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }

.prow-people { display: flex; align-items: center; flex: none; }
.prow-people .inline-actions { display: inline-flex; align-items: center; }
.prow-people .muted { font-size: 11px; white-space: nowrap; }

.prow-totals { display: grid; grid-template-columns: repeat(4, minmax(64px, max-content)); gap: 2px 18px; flex: none; }
.prow-totals > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: right; }
.prow-totals span { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); }
.prow-totals b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prow-total b { color: var(--accent); }

.prow-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex: none; }
.prow-actions .icon-button { width: 30px; height: 30px; }
/* „Dodaj etap" jako kwadratowy „+” (jak na wzorcu) — etykieta tekstowa schowana w tabeli */
.project-row .prow-actions .project-stage-trigger { width: 30px; height: 30px; min-height: 0; padding: 0; justify-content: center; gap: 0; }
.project-row .prow-actions .project-stage-trigger span:not(.icon) { display: none; }

.prow-strip {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 6px 16px 9px;
  cursor: pointer; background: transparent; border: 0;
  border-top: 1px dashed color-mix(in srgb, var(--line) 65%, transparent);
  text-align: left;
}
.prow-strip:hover { background: var(--surface-muted); }
.prow-stagecount { font-size: 11px; font-weight: 700; color: var(--muted); }
.prow-chevron { margin-left: auto; font-size: 16px; font-weight: 700; color: var(--muted); transition: transform .26s cubic-bezier(.4,0,.2,1); line-height: 1; }
.project-row.open .prow-chevron { transform: rotate(180deg); color: var(--accent); }

/* Rozwinięte etapy pod wierszem — pełna szerokość, wcięte i oddzielone linią */
.project-row.open .tile-stages { margin: 0 16px 14px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Etapy w rozwiniętym wierszu jako siatka kafelków z MAKSYMALNĄ szerokością (nie 1fr!).
   Dzięki temu:
   - mało etapów (np. 2) -> każdy ma swoją max szerokość (360px) i są wyrównane do lewej,
     a NIE rozciągnięte na pół rzędu („za szeroko"),
   - dużo etapów (np. 5) -> kurczą się (do min 258px) i wypełniają cały rząd.
   auto-fit + minmax(min, STAŁY max): wzorcowy pattern „responsive cards z max-width".
   min(100%,…) chroni przed przepełnieniem na bardzo wąskim kontenerze. */
/* FLEXBOX (nie grid): grid z auto-fit + stałym max liczy kolumny wg MAX, więc albo 5 etapów
   się zawija, albo 2 są rozciągnięte. Flex robi jedno i drugie naturalnie:
   - flex-basis 258 + grow -> dużo etapów (5) kurczy się i WYPEŁNIA rząd (~300px),
   - max-width 360 -> mało etapów (2) CAPuje na 360px, wyrównane do lewej (trailing space),
   - min-width 258 + wrap -> na węższym ekranie zwija się płynnie. */
.project-row .tile-stage-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
}
.project-row .tile-stage-list > .tile-stage-item {
  flex: 1 1 258px;
  min-width: 258px;
  max-width: 360px;
}

/* ============================================================
   OKNA / MODALE — przebudowa na premium (nie tylko zaokrąglone rogi)
   Zdejmujemy ramki pól, robimy duże nowoczesne inputy, czytelne etykiety,
   sekcje z oddechem. Agresywne !important, by pokonać gęste reguły bazowe.
   ============================================================ */
.modal-backdrop {
  background: rgba(10, 15, 25, 0.55) !important;
  backdrop-filter: blur(4px);
}
.modal {
  border-radius: 18px !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--line);
  font-size: 13px !important;
}
/* Nagłówek okna */
.modal > header { padding: 14px 20px !important; border-bottom: 1px solid var(--line) !important; }
.modal > header h2, .modal > header h3 { font-size: 16px !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
.modal > header p.muted { font-size: 11.5px !important; margin-top: 2px !important; }
/* Stopka okna */
.modal > footer { padding: 12px 20px !important; gap: 10px !important; border-top: 1px solid var(--line) !important; }

/* --- Uniwersalne pola w oknach: prawdziwe, duże inputy --- */
.modal input:not([type="checkbox"]):not([type="radio"]),
.modal select,
.modal textarea {
  min-height: 32px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}
.modal textarea { min-height: 60px !important; }
.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* --- FORMULARZE KARTOTEK (dodawanie/edycja): koniec starego ścisku --- */
.modal > form { padding: 16px 20px !important; }
.modal .form-grid, .modal .user-form-grid { gap: 13px 14px !important; align-items: start !important; }
.modal .field { gap: 5px !important; min-width: 0; }
.modal .field label {
  font-size: 10.5px !important; font-weight: 700 !important;
  color: var(--muted) !important; text-transform: none !important; letter-spacing: 0 !important;
}
.modal .field small { font-size: 10.5px !important; color: var(--muted) !important; margin-top: 1px; }
.modal fieldset, .modal .form-section { border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 14px !important; }
.modal legend { font-size: 11px !important; font-weight: 800 !important; color: var(--text) !important; padding: 0 6px !important; }

/* --- Okno EDYCJI PROJEKTU: rozbicie gęstych „kart-pól" w ramkach --- */
.project-editor-shell { background: var(--surface-muted) !important; gap: 0 !important; }
.project-card-form { padding: 16px !important; gap: 12px !important; background: var(--surface-muted) !important; }
.project-card-stack, .project-status-card {
  border: none !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  padding: 16px !important;
  gap: 11px !important;
  box-shadow: var(--shadow-sm) !important;
}
.project-panel-head { min-height: auto !important; padding-bottom: 9px !important; margin-bottom: 1px !important; border-bottom: 1px solid var(--line) !important; }
.project-panel-head strong { font-size: 13px !important; font-weight: 800 !important; color: var(--text) !important; }
/* Pole = etykieta + subtelny input, BEZ ramki wokół pola */
.project-field-card {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  gap: 5px !important;
}
.project-field-card > span, .project-card-title-row > span {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important;
}
.project-field-card input:not([type="checkbox"]),
.project-field-card select,
.project-field-card textarea {
  min-height: 32px !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}
.project-field-card input:focus, .project-field-card select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
/* Wiersze z inputem + przyciskiem (klient, adres) */
.project-client-row, .project-address-row { display: flex !important; gap: 10px !important; align-items: stretch !important; }
.project-client-row select, .project-address-row input { flex: 1 1 auto !important; }
.project-client-row .button, .project-address-row .button { white-space: nowrap; }

/* ---------- Responsywność ---------- */
@media (max-width: 920px) {
  .content { padding: 14px; }
  .catalog-table thead { display: none; }
  .catalog-table, .catalog-table tbody, .catalog-table tbody tr, .catalog-table tbody td { display: block; width: 100%; }
  .catalog-table tbody tr {
    border-radius: var(--radius);
    padding: 6px 4px;
    margin-bottom: 12px;
  }
  .catalog-table tbody td {
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 14px;
  }
  .catalog-table tbody td:first-child { font-size: 14px; padding-top: 12px; }
  .catalog-table tbody td:last-child { padding-bottom: 12px; }
}

/* ============================================================
   WIZYTÓWKI PROJEKTÓW — dopracowanie (2026-06-08)
   Design rozwijalny (domyślnie ZWINIĘTY) z markerem po lewej,
   ⋮ zawsze na jasnym chipie, gęstszy/mniejszy układ karty.
   ============================================================ */

/* --- mniejsza, gęstsza karta --- */
.project-tile { padding: 12px 14px 10px; gap: 9px; }
.tile-name { font-size: 15px; }
.tile-client { font-size: 11px; }
.tile-totals { gap: 7px 12px; padding-top: 10px; }
.tile-totals b { font-size: 13px; }
.tile-totals span { font-size: 9px; }
.tile-people { gap: 7px; }

/* --- ⋮ (trzy kropki) ZAWSZE na jasnym chipie, nigdy na zielonym akcencie --- */
.tile-menu { position: relative; flex: none; }
.tile-menu-btn {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer;
  box-shadow: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
/* tło/ramka tylko na hover lub gdy menu otwarte */
.tile-menu-btn:hover,
.tile-menu:has(.tile-menu-panel:not([hidden])) .tile-menu-btn {
  border-color: var(--line); color: var(--accent); background: var(--surface-muted);
}
/* Panel menu ⋮ MUSI być ukryty domyślnie. Reguła .tile-menu-panel ustawia
   display:flex i nadpisywała atrybut [hidden] — przy overflow:visible (akordeon)
   panele były „zawsze włączone i na wierzchu". [hidden] musi wygrywać. */
.tile-menu-panel[hidden] { display: none !important; }

/* --- Design jako rozwijalny pasek (domyślnie ZWINIĘTY); marker A/B po LEWEJ, nazwa zaraz po nim --- */
.tile-design-head { cursor: pointer; border-radius: 9px; padding: 7px 8px; align-items: center; }
.tile-design-group.open .tile-design-head { border-radius: 9px 9px 0 0; }
.tile-design-label { flex: 0 1 auto; }
.tile-design-count {
  flex: none; font-size: 9.5px; font-weight: 500; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.tile-design-cost { margin-left: auto; }
.tile-design-chevron {
  flex: none; margin-left: auto; font-size: 16px; font-weight: 700; line-height: 1; color: var(--muted);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
}
/* menu ⋮ jako OSTATNI element nagłówka Design (po chevronie) — bez auto-marginu, trzyma się chevronu */
.tile-design-head > .tile-menu { flex: none; margin-left: 6px; }
.tile-design-group.open .tile-design-chevron { transform: rotate(180deg); color: var(--accent); }
/* AKORDEONY (projekt -> etap -> design) na display zamiast grid 0fr/1fr.
   Trzy zagnieżdżone akordeony grid-fr nie odrastały, gdy wewnętrzny się
   rozwijał -> treść była przycinana (główny powód „gniota"). display + brak
   klipu = każdy poziom rośnie naturalnie. Delikatny fade zamiast animacji
   wysokości (opacity jest niezawodne, w przeciwieństwie do height/fr). */
@keyframes tileReveal { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* poziom 1: etapy projektu */
.tile-stages-wrap { display: none; }
.project-tile.open .tile-stages-wrap { display: block; animation: tileReveal .18s ease; }
.tile-stages { overflow: visible; min-height: 0; }

/* poziom 2: konstrukcje/designy w etapie */
.tile-stage-item .tile-constr-wrap { display: none; }
.tile-stage-item.open .tile-constr-wrap { display: block; animation: tileReveal .16s ease; }
.tile-constr-list { overflow: visible; min-height: 0; }

/* poziom 3: konstrukcje w designie */
.tile-design-constr-wrap { display: none; }
.tile-design-group.open .tile-design-constr-wrap { display: block; animation: tileReveal .16s ease; }

/* KARTA MUSI ROSNĄĆ Z TREŚCIĄ. Resztkowe min-height:0 (z czasów grid-fr)
   pozwalało kolumnom flex kurczyć się poniżej treści -> karta nie rosła,
   a rozwinięte konstrukcje wylewały się i nachodziły na sąsiednie karty. */
.tile-stages, .tile-stage-list, .tile-stage-main, .tile-constr-list, .tile-constr-sublist { min-height: auto; }
.tile-stages-wrap, .tile-stage-item, .tile-constr-item, .tile-design-group { flex-shrink: 0; }

/* --- konstrukcja: zwięźlej --- */
.tile-constr-open { padding: 6px 9px; }
.tile-constr-name { font-size: 11.5px; }
.tile-constr-sublist { gap: 5px; padding: 7px; }
/* szary marker wersji (A/B/—) jako LEWY znacznik konstrukcji — w miejscu starej ikony ▥ */
.tile-constr-open .tile-constr-marker {
  flex: none; align-self: center; min-width: 20px; text-align: center;
  font-size: 11px; font-weight: 600; padding: 2px 6px; line-height: 1.2;
  color: var(--muted); background: var(--surface-strong); border-radius: 6px;
}

/* ============================================================
   CHEVRON ROZWIJANIA — GLOBALNIE (etap / design / oferta / projekt / karta).
   Problem: znak „⌄"/„^" z HTML siedzi NISKO w wierszu, więc wygląda na zaniżony,
   a obrót 180° „przeskakuje" (glif jest poza środkiem bboxu). Rozwiązanie: chowamy
   znak (font-size:0) i rysujemy WYŚRODKOWANY chevron przez SVG mask. Obrót wokół
   środka własnego bboxu (transform-origin:center): domyślnie „⌄" (w dół), po
   rozwinięciu rotate(180°) -> „⌃" (w górę). Idealnie na linii tekstu.
   ============================================================ */
.tile-stage-chevron,
.tile-design-chevron,
.prow-chevron,
.tile-expander-chevron {
  font-size: 0 !important;
  flex: none;
  width: 15px; height: 15px;
  align-self: center;
  background-color: currentColor;
  color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  transform-origin: 50% 50%;
  transition: transform .24s cubic-bezier(.4,0,.2,1), color .2s ease;
}
.tile-stage-item.open .tile-stage-chevron,
.tile-design-group.open .tile-design-chevron,
.project-row.open .prow-chevron,
.project-tile.open .tile-expander-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

/* --- Okno „Pomoc" (easter egg) — małe, wyśrodkowana treść --- */
.modal.help-modal { width: min(440px, calc(100vw - 32px)); }
.modal.help-modal .help-modal-body { padding: 26px 24px 30px; text-align: center; }
.modal.help-modal .help-phone-label { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.modal.help-modal .help-phone-number { display: block; font-size: 19px; font-weight: 800; letter-spacing: .02em; color: var(--accent); }
.modal.help-modal footer { justify-content: center; }