/* ============================================================================
 * POWŁOKA PANELU ZLIKWIDOWANI — adaptacja kanonu G-Digital shell.css
 * (za zgodą właścicieli platformy; ANALIZA-G-DIGITAL.md).
 *
 * Różnice wobec oryginału — ŚWIADOME:
 *  - marka: czerwień Zlikwidowanych #E3000F zamiast #2A47D1;
 *  - kroje: Eurostile/Mundial to komercyjne licencje Digital Development —
 *    nagłówki idą z Google Fonts („Saira", zbliżony techniczny charakter),
 *    tekst na systemowym kroju (panel wewnętrzny, zero dodatkowych kB);
 *  - cień rozmywa się głębokim atramentem (60 16 22), nie granatem — granat
 *    brudziłby na ciepłym płótnie tak, jak czerń brudziła na ich chłodnym.
 * Zachowane 1:1: geometria (promienie 10/12/16/24), cztery poziomy cienia,
 * ekran logowania z poświatą, sidebar → dolny pasek czystym CSS-em na
 * telefonie, belka .page-head / .page-body, kafelki Startu.
 * ========================================================================== */

:root {
  /* --- MARKA ------------------------------------------------------------- */
  --gd-brand: #E3000F;
  --gd-brand-hover: #C2000D;
  --gd-brand-tint: #FDEDEE;
  --gd-brand-soft: rgb(227 0 15 / 0.08);
  --gd-brand-soft-border: rgb(227 0 15 / 0.15);
  --gd-brand-ink: #C2000D;        /* marka jako tekst — osobno od wypełnienia */

  /* --- POWIERZCHNIE I TEKST ----------------------------------------------
     Płótno z lekką ciepłą tintą (odpowiednik ich #F4F6FC z tintą marki):
     karta na tle ma widoczną krawędź bez pomocy ramki. */
  --gd-bg: #F7F5F5;
  --gd-card: #ffffff;
  --gd-sunken: #F0EDED;
  --gd-text: #171412;
  --gd-text-2: #3B3734;
  --gd-muted: #6E6660;
  --gd-border: #E8E4E1;
  --gd-border-soft: #F3F0EE;
  --gd-border-strong: #8F8781;
  --gd-err: #DC2626;
  --gd-ok: #2E6B41;
  --gd-warn: #8A5A00;

  /* --- PALETA DANYCH (8 barw × tint/line/ink — kanon §4.1) --------------- */
  --gd-hue-brand-tint: #FDEDEE;   --gd-hue-brand-line: #F5C2C6;   --gd-hue-brand-ink: #B4000C;
  --gd-hue-violet-tint: #F5F1FF;  --gd-hue-violet-line: #D7CBFB;  --gd-hue-violet-ink: #6D28D9;
  --gd-hue-magenta-tint: #FDF0FB; --gd-hue-magenta-line: #F2C2E9; --gd-hue-magenta-ink: #A21CAF;
  --gd-hue-cyan-tint: #ECFAFF;    --gd-hue-cyan-line: #B6E7F8;    --gd-hue-cyan-ink: #0369A1;
  --gd-hue-teal-tint: #EAFBF6;    --gd-hue-teal-line: #A8E6D5;    --gd-hue-teal-ink: #0F766E;
  --gd-hue-orange-tint: #FFF4EC;  --gd-hue-orange-line: #FBD3B4;  --gd-hue-orange-ink: #C2410C;
  --gd-hue-olive-tint: #F5F8E8;   --gd-hue-olive-line: #D3E2A4;   --gd-hue-olive-ink: #4D7C0F;
  --gd-hue-grafit-tint: #F2F4F7;  --gd-hue-grafit-line: #D3D9E2;  --gd-hue-grafit-ink: #3F4A5A;

  /* --- TYPOGRAFIA --------------------------------------------------------- */
  --gd-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --gd-font-heading: 'Saira', -apple-system, 'Segoe UI', sans-serif;

  /* --- PROMIENIE (kanon: pole 10, przycisk 12, karta 16, duża karta 24) --- */
  --gd-radius-field: 10px;
  --gd-radius-control: 12px;
  --gd-radius-surface: 16px;
  --gd-radius-card: 24px;

  /* --- CIENIE: wysokość, nie ozdoba (4 poziomy) --------------------------- */
  --gd-shadow-raised: 0 1px 2px rgb(60 16 22 / 0.04), 0 6px 16px -6px rgb(60 16 22 / 0.10);
  --gd-shadow-lifted: 0 2px 4px rgb(60 16 22 / 0.05), 0 12px 28px -8px rgb(60 16 22 / 0.16);
  --gd-shadow-overlay: 0 4px 8px -2px rgb(60 16 22 / 0.06), 0 18px 40px -12px rgb(60 16 22 / 0.22);
  --gd-shadow-modal: 0 24px 60px rgb(23 20 18 / 0.18), 0 8px 20px rgb(23 20 18 / 0.06);
  --gd-shadow-brand: 0 8px 30px rgb(227 0 15 / 0.25);

  /* --- GRADIENT: wyłącznie powierzchnia-bohater (ekran logowania) --------- */
  --gd-grad-brand: linear-gradient(135deg, #B4000C 0%, #E3000F 55%, #F03A45 100%);

  /* --- RUCH: trzy czasy, jedna krzywa ------------------------------------ */
  --gd-dur-fast: 120ms;
  --gd-dur: 180ms;
  --gd-dur-slow: 260ms;
  --gd-ease: cubic-bezier(0.2, 0, 0.13, 1);

  --gd-navbar-h: 0px;
}

.gd-login-screen, .gd-sidebar {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- EKRAN LOGOWANIA ---------------------------------------------- */
/* 100dvh, nie 100vh — na iOS 100vh liczy się z ukrytym paskiem adresu. */
.gd-login-screen { min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: var(--gd-bg); position: relative; overflow: hidden; font-family: var(--gd-font); }
.gd-login-screen::before { content: ''; position: absolute; top: -160px; right: -160px; width: 600px; height: 600px;
  background: rgba(227,0,15,.08); border-radius: 50%; filter: blur(64px); pointer-events: none; }
.gd-login-screen::after { content: ''; position: absolute; bottom: -160px; left: -160px; width: 500px; height: 500px;
  background: rgba(227,0,15,.04); border-radius: 50%; filter: blur(64px); pointer-events: none; }
.gd-login-card { background: var(--gd-card); border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius-card);
  padding: 48px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center;
  width: 100%; max-width: 420px; box-shadow: 0 10px 40px rgba(227,0,15,.10); position: relative; z-index: 1; }
.gd-login-title { font-family: var(--gd-font-heading); font-size: 26px; letter-spacing: .01em;
  color: var(--gd-text); margin: 0; line-height: 32px; font-weight: 700; }
.gd-login-sub { font-size: 14px; color: var(--gd-muted); margin: 0; line-height: 20px; }
.gd-login-error { font-size: 14px; color: var(--gd-err); margin: 0; }

/* Sygnet Zlikwidowanych: czerwone koło z inicjałem (inline SVG w HTML). */
.zlk-sygnet { width: 40px; height: 40px; display: block; border-radius: 50%; }
.zlk-sygnet-mini { width: 34px; height: 34px; display: block; border-radius: 50%; flex-shrink: 0; }

/* ---------- UKŁAD APLIKACJI ---------------------------------------------- */
.app-layout { display: flex; height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--gd-bg); font-family: var(--gd-font); }
.app-layout main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.app-layout main > section { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* BELKA WIDOKU — kanon PageHeader/PageBody: przewija się WYŁĄCZNIE treść. */
.page-head { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 16px; padding: 14px 24px; background: var(--gd-card); border-bottom: 1px solid var(--gd-border); }
.page-head-text { min-width: 0; flex-shrink: 0; }
.page-title { font-family: var(--gd-font-heading); font-size: 18px; line-height: 1.3; font-weight: 700;
  color: var(--gd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-sub { font-size: 13.5px; color: var(--gd-muted); }
.page-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.page-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
.page-body > .inner { max-width: 1060px; margin: 0 auto; }

/* ---------- SIDEBAR ------------------------------------------------------- */
.gd-sidebar { width: 232px; flex-shrink: 0; background: var(--gd-card); color: var(--gd-text-2);
  border-right: 1px solid var(--gd-border); display: flex; flex-direction: column;
  font-family: var(--gd-font); }
.gd-sidebar-head { display: flex; align-items: center; gap: 12px; padding: 20px 18px;
  border-bottom: 1px solid var(--gd-border-soft); }
/* Znak firmowy w nagłówku panelu. Kolory marki zostają na sztywno (to jest
   logo, nie element interfejsu), ale NAPIS bierze kolor tekstu z tokenów —
   w oryginale jest niemal czarny i w trybie ciemnym byłby niewidoczny. */
.zlk-logo { width: 148px; height: auto; display: block; }
.zlk-logo .zl-napis { fill: var(--gd-text); }
.zlk-logo .zl-czerwony { fill: #E3000F; }
.zlk-logo .zl-ciemny { fill: #A90E07; }
.zlk-logo .zl-zolty { fill: #FFEA00; }
.zlk-logo .zl-pomaranczowy { fill: #FCBD00; }
.zlk-logo .zl-brak { fill: none; }
.gd-sidebar-head { flex-direction: column; align-items: flex-start; gap: 6px; }

.gd-sidebar-brand { font-family: var(--gd-font-heading); color: var(--gd-text); font-size: 15px;
  letter-spacing: .02em; line-height: 20px; font-weight: 700; }
.gd-sidebar-domain { font-size: 11px; color: var(--gd-muted); margin-top: 2px; line-height: 14px; }
.gd-sidebar-nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.nav-section { margin-bottom: 18px; }
.gd-nav-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .2em; color: var(--gd-muted); padding: 0 12px 8px; }
.gd-nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px;
  border: none; background: none; border-radius: var(--gd-radius-control); font-size: 14px;
  font-family: inherit; color: var(--gd-text-2); cursor: pointer; transition: all .15s; text-align: left;
  text-decoration: none; }
.gd-nav-item:hover { background: var(--gd-border-soft); color: var(--gd-text); }
.gd-nav-item.aktywna { background: var(--gd-brand-tint); color: var(--gd-brand-ink); font-weight: 600; }
.gd-nav-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.gd-sidebar-foot { border-top: 1px solid var(--gd-border-soft); padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gd-sidebar-user { font-size: 12px; color: var(--gd-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.gd-sidebar-logout { background: none; border: none; color: var(--gd-err); font-size: 12px;
  cursor: pointer; font-family: inherit; padding: 6px 10px; border-radius: 8px; flex-shrink: 0; }
.gd-sidebar-logout:hover { background: rgba(239,68,68,.1); }

/* ---------- START: kafelki aplikacji -------------------------------------- */
.start-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.start-tile { display: flex; align-items: flex-start; gap: 12px; padding: 14px;
  border: 1px solid var(--gd-border); border-radius: var(--gd-radius-surface);
  background: var(--gd-card); box-shadow: var(--gd-shadow-raised);
  text-decoration: none; color: inherit; cursor: pointer; text-align: left;
  font-family: inherit; font-size: inherit;
  transition: box-shadow var(--gd-dur-fast) var(--gd-ease), transform var(--gd-dur-fast) var(--gd-ease); }
@media (hover: hover) {
  .start-tile:hover { box-shadow: var(--gd-shadow-lifted); transform: translateY(-2px); }
}
.start-tile-icon { width: 40px; height: 40px; flex: 0 0 auto; display: block; }
.start-tile-icon svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.start-tile-name { display: block; font-family: var(--gd-font-heading); font-weight: 700; font-size: 15px; color: var(--gd-text); }
.start-tile-desc { display: block; margin-top: 2px; font-size: 12.5px; color: var(--gd-muted); line-height: 1.45; }

/* ---------- PRZYCISKI (kanon: CTA w marce, z poświatą) -------------------- */
button.primary { background: var(--gd-brand); color: #fff; border: none; border-radius: 14px;
  padding: 11px 20px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: all .2s; box-shadow: 0 8px 24px rgba(227,0,15,.20); }
button.primary:hover { background: var(--gd-brand-hover); transform: translateY(-1px); }
button.primary:disabled { opacity: .55; cursor: default; transform: none; }
button.ghost { background: transparent; border: 1.5px solid var(--gd-brand); border-radius: 12px;
  padding: 8px 16px; font-size: 13px; font-family: inherit; cursor: pointer; color: var(--gd-brand-ink); transition: all .2s; }
button.ghost:hover { background: var(--gd-brand); color: #fff; }

.lbl-krotka { display: none; }

/* ============================================================================
 * TELEFON — sidebar staje się dolnym paskiem nawigacji (czysty CSS,
 * wymaga struktury: .gd-sidebar i main są RODZEŃSTWEM w .app-layout).
 * ========================================================================== */
@media (max-width: 767px) {
  :root { --gd-navbar-h: calc(66px + env(safe-area-inset-bottom, 0px)); }

  .gd-sidebar {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    flex-direction: row;
    align-items: stretch;
    border-right: none;
    border-top: 1px solid var(--gd-border);
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 20px rgb(23 20 18 / 0.06);
  }
  .gd-sidebar-head, .gd-nav-section-title, .gd-sidebar-user { display: none; }
  .gd-sidebar-nav {
    display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 6px 8px;
    overflow-x: auto; scrollbar-width: none; justify-content: space-evenly;
    overscroll-behavior-x: contain;
  }
  .gd-sidebar-nav::-webkit-scrollbar { display: none; }
  .nav-section { margin-bottom: 0; display: contents; }
  /* 6 zakładek + Wyloguj na 390 px: 6×48 + 44 + paddingi = 372 px. Długie
     nazwy mają krótkie odpowiedniki (.lbl-krotka), żeby nic nie uciekało
     poza ekran — pasek nie ma widocznego scrollbara. */
  .gd-nav-item {
    flex-direction: column; gap: 2px; padding: 6px 2px;
    min-width: 40px; min-height: 44px; justify-content: center;
    font-size: 9.5px; line-height: 11px; text-align: center; white-space: nowrap;
    width: auto; flex: 1 1 0;
  }
  .gd-nav-item svg { width: 17px; height: 17px; }
  .lbl-pelna { display: none; }
  .lbl-krotka { display: inline; }
  .gd-nav-item.aktywna { font-weight: 700; }
  /* Na wąskim telefonie osiem zakładek z podpisami nachodzi na siebie.
     Podpis zostaje przy tej, na której właśnie jesteś — reszta to same ikony.
     Wzorzec z pasków dolnych Androida; kolejne widoki z planu zmieszczą się
     bez przebudowy paska. */
  /* Licznik alertów na telefonie nie może poszerzać zakładki — siada
     na ikonie jako plakietka, nie jako kolejny wiersz w kolumnie. */
  .gd-nav-item { position: relative; }
  .gd-nav-licznik { position: absolute; top: 2px; right: 50%; transform: translateX(150%);
    margin-left: 0; font-size: 9px; padding: 0 4px; line-height: 14px; min-width: 14px; }
  /* Dziewięć zakładek plus wylogowanie na 375 px: 9×32 + 28 + paddingi.
     Przy kolejnej zakładce trzeba będzie zwinąć rzadziej używane w „więcej". */
  @media (max-width: 430px) {
    .gd-nav-item { min-width: 32px; padding: 6px 0; }
    .gd-nav-item .lbl-krotka { display: none; }
    .gd-nav-item.aktywna .lbl-krotka { display: inline; }
    .gd-nav-item svg { width: 19px; height: 19px; }
    .gd-sidebar-logout { min-width: 28px; font-size: 9px; padding: 6px 0; }
    .gd-sidebar-foot { padding: 6px 2px; }
  }
  .gd-sidebar-foot {
    border-top: none; border-left: 1px solid var(--gd-border-soft);
    padding: 6px 8px; flex-shrink: 0; align-items: center;
  }
  .gd-sidebar-logout { min-width: 38px; min-height: 44px; display: grid; place-items: center;
    font-size: 9.5px; line-height: 11px; text-align: center; padding: 6px 2px; }
  .gd-sidebar-foot { padding: 6px 4px; }

  /* Treść kończy się NAD paskiem — inaczej ostatni wiersz jest zasłonięty. */
  .gd-sidebar ~ main { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

  .gd-login-card { padding: 28px 20px; border-radius: var(--gd-radius-surface); }
  .gd-login-title { font-size: 22px; line-height: 28px; }
  .page-head { padding: 12px 16px; padding-right: 58px; }
  .page-head-text { flex-shrink: 1; }
  .gd-motyw { top: 10px; right: 10px; width: 36px; height: 36px; }
  .page-body { padding: 16px 12px; }

  /* Pole z fokusem nie może lądować dokładnie pod klawiaturą. */
  input, textarea, select { scroll-margin-block: 96px; }
}

/* ============================================================================
 * TRYB CIEMNY — te same tokeny, inne wartości. Nic poniżej nie zna kolorów
 * wprost, więc przełącznik podmienia całą powłokę jednym atrybutem na <html>.
 *
 * Neutralne są CIEPŁE (nie granatowe): jasna paleta ma tint marki w płótnie,
 * ciemna musi mieć ten sam bias, inaczej panel wygląda jak dwa różne produkty.
 * Marka jako WYPEŁNIENIE zostaje #E3000F (biały tekst na niej ma kontrast 4,7),
 * marka jako TEKST jaśnieje do #FF7A80 — czerwień z jasnej palety na węglu
 * jest nieczytelna.
 * ========================================================================== */
:root[data-motyw="ciemny"] {
  --gd-brand: #E3000F;
  --gd-brand-hover: #F03A45;
  --gd-brand-ink: #FF7A80;
  --gd-brand-tint: #2E1618;
  --gd-brand-soft: rgb(255 122 128 / 0.12);
  --gd-brand-soft-border: rgb(255 122 128 / 0.22);

  --gd-bg: #141110;
  --gd-card: #1D1917;
  --gd-sunken: #262120;
  --gd-text: #F4F0EC;
  --gd-text-2: #D6CFC9;
  --gd-muted: #9C938C;
  --gd-border: #322C29;
  --gd-border-soft: #241F1D;
  --gd-border-strong: #6A615B;
  --gd-err: #FF6B6B;
  --gd-ok: #4FBF87;
  --gd-warn: #E0A040;

  /* Paleta danych: tinty stają się przyciemnionymi polami, atramenty jaśnieją. */
  --gd-hue-brand-tint: #2E1618;   --gd-hue-brand-line: #4D2326;   --gd-hue-brand-ink: #FF8A90;
  --gd-hue-violet-tint: #241E33;  --gd-hue-violet-line: #3A3052;  --gd-hue-violet-ink: #B49BFF;
  --gd-hue-magenta-tint: #2E1B2B; --gd-hue-magenta-line: #4A2D45; --gd-hue-magenta-ink: #EE8FE0;
  --gd-hue-cyan-tint: #17252E;    --gd-hue-cyan-line: #274050;    --gd-hue-cyan-ink: #6FC6EE;
  --gd-hue-teal-tint: #16292A;    --gd-hue-teal-line: #244445;    --gd-hue-teal-ink: #5FD1BA;
  --gd-hue-orange-tint: #2E2118;  --gd-hue-orange-line: #4C3826;  --gd-hue-orange-ink: #F4A46B;
  --gd-hue-olive-tint: #232918;   --gd-hue-olive-line: #3B4527;   --gd-hue-olive-ink: #A9CC62;
  --gd-hue-grafit-tint: #1F242B;  --gd-hue-grafit-line: #333C48;  --gd-hue-grafit-ink: #9FB0C4;

  /* Cienie na ciemnym tle nie budują wysokości — robi to jaśniejsza karta.
     Zostawiamy ślad, żeby modale odrywały się od tła. */
  --gd-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.30);
  --gd-shadow-lifted: 0 2px 6px rgb(0 0 0 / 0.38);
  --gd-shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.46);
  --gd-shadow-modal: 0 24px 60px rgb(0 0 0 / 0.60);
  --gd-shadow-brand: 0 8px 30px rgb(227 0 15 / 0.35);

  color-scheme: dark;
}

/* Przełącznik motywu — jedyny element powłoki zakotwiczony do okna, bo musi
   być widoczny na telefonie, gdzie sidebar zwija się w dolny pasek. */
.gd-motyw {
  position: fixed; top: 12px; right: 12px; z-index: 60;
  width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--gd-border); background: var(--gd-card); color: var(--gd-text-2);
  box-shadow: var(--gd-shadow-raised); transition: transform .15s, color .15s;
}
.gd-motyw:hover { color: var(--gd-brand-ink); transform: translateY(-1px); }
.gd-motyw svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.gd-motyw .ikona-ciemny { display: none; }
:root[data-motyw="ciemny"] .gd-motyw .ikona-ciemny { display: block; }
:root[data-motyw="ciemny"] .gd-motyw .ikona-jasny { display: none; }
/* Belka widoku nie może chować się pod przełącznikiem. */
.page-head { padding-right: 60px; }
@media (prefers-reduced-motion: reduce) { .gd-motyw { transition: none; } }

/* ── Podsekcje: drugi poziom nawigacji w obrębie zakładki ──────────────────
   Ekrany rosną i nie mogą być jedną długą taśmą. Karta deklaruje przynależność
   atrybutem `data-sekcja`, pasek buduje się z DOM — dorzucenie karty to jeden
   atrybut, zero zmian w kodzie. Pasek jest przyklejony do góry przewijanej
   treści, żeby po zjechaniu w dół nadal było wiadomo, gdzie się jest. */
.gd-podsekcje { position: sticky; top: -24px; z-index: 5; display: flex; gap: 4px;
  margin: -24px -24px 20px; padding: 16px 24px 12px; overflow-x: auto;
  background: var(--gd-bg); border-bottom: 1px solid var(--gd-border-soft);
  scrollbar-width: none; }
.gd-podsekcje::-webkit-scrollbar { display: none; }
.gd-podsekcje button { flex: 0 0 auto; appearance: none; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--gd-muted);
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  padding: 8px 14px; border-radius: 9px; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s; }
.gd-podsekcje button:hover { background: var(--gd-sunken); color: var(--gd-text-2); }
.gd-podsekcje button.aktywna { background: var(--gd-card); color: var(--gd-text);
  border-color: var(--gd-border); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.gd-podsekcje button:focus-visible { outline: 2px solid var(--gd-brand); outline-offset: 2px; }
/* Karta spoza wybranej podsekcji. `!important`, bo część kart ma własne
   `style="display:…"` sterowane z app.js — to ma nadal działać WEWNĄTRZ
   aktywnej podsekcji, ale nie może przebić samego wyboru zakładki. */
.poza-podsekcja { display: none !important; }

@media (max-width: 860px) {
  .gd-podsekcje { top: -16px; margin: -16px -12px 16px; padding: 12px 12px 10px; }
  .gd-podsekcje button { padding: 7px 12px; font-size: 12.5px; }
}
/* ============================================================================
 * ZLIKWIDOWANI · SYSTEM WIZUALNY v2 — blok do doklejenia NA KOŃCU shell.css
 * ----------------------------------------------------------------------------
 * Cel: gęstość i czytelność dobrego SaaS-a 2026 (wzorzec DigiBOS), przy
 * ZEROWEJ zmianie w app.js. Wszystko poniżej to wyłącznie CSS.
 *
 * ⚠ SPECYFICZNOŚĆ — najważniejsza pułapka tego pliku.
 * W <head> index.html arkusz shell.css jest PIERWSZY, a blok <style> DRUGI.
 * Przy równej specyficzności wygrywa <style> z index.html, nie shell.css.
 * Dlatego każda reguła, która NADPISUJE istniejący wygląd, ma przedrostek
 * `.app-layout` (0,2,0) albo `:root[data-motyw=…]` — a nowe, własne klasy
 * (.gd-pigulki, .gd-wiersz, .gd-plakietka…) stoją bez przedrostka, bo nie
 * mają z czym kolidować.
 *
 * ⚠ NIGDZIE PONIŻEJ NIE USTAWIAMY `display` NA `.karta`.
 * `#podpisy` (stopki mailowe) i `#fin-faktury-karta` to karty zamknięte
 * atrybutem `hidden` — to jest BRAMKA DOSTĘPU. Reguła autorska z `display`
 * bije `[hidden]{display:none}` z arkusza przeglądarki i odsłoniłaby ekran
 * zarządu w panelu Dominiki. Na wszelki wypadek §0 ustawia twardy bezpiecznik.
 * ========================================================================== */

/* ── §0. Bezpiecznik bramek dostępu ──────────────────────────────────────── */
[hidden] { display: none !important; }

/* ── §1. TOKENY GĘSTOŚCI I TYPOGRAFII ─────────────────────────────────────
 * Jedna jednostka = 4 px. Wysokości wierszy są TOKENAMI, nie liczbami
 * wpisanymi w komponent — zmiana gęstości całego panelu to zmiana tutaj.
 * -------------------------------------------------------------------------- */
:root {
  --gd-krok: 4px;

  /* Odstępy zewnętrzne */
  --gd-pad-widok: 20px;          /* padding .page-body        (było 24) */
  --gd-pad-karta: 16px;          /* padding poziomy .karta    (było 22) */
  --gd-pad-karta-y: 14px;        /* padding pionowy .karta    (było 20) */
  --gd-luka: 12px;               /* odstęp między kartami     (było 18) */
  --gd-luka-mala: 8px;

  /* Wysokości wierszy — trzy stopnie, nic pomiędzy */
  --gd-w1: 36px;                 /* wiersz jednolinijkowy, tabela         */
  --gd-w2: 48px;                 /* wiersz dwulinijkowy bez ikony         */
  --gd-w3: 60px;                 /* ikona 28 + tytuł + opis + akcja       */

  /* Stopnie pisma */
  --gd-t-caps: 10.5px;           /* nagłówki kolumn, etykiety (UPPERCASE) */
  --gd-t-meta: 11.5px;           /* metadane pod wierszem     (było 12)   */
  --gd-t-drobny: 12.5px;         /* .info, opisy              (było 13)   */
  --gd-t-tekst: 13.5px;          /* treść wiersza             (było 14/15)*/
  --gd-t-tytul: 14px;            /* tytuł wiersza                         */
  --gd-t-sekcja: 14.5px;         /* h2 karty                  (było 15)   */
  --gd-t-widok: 17px;            /* .page-title               (było 18)   */
  --gd-t-liczba: 24px;           /* .kafel .wart              (było 26)   */

  /* Geometria drobnicy */
  --gd-ikona: 16px;              /* ikona w pigułce / plakietce */
  --gd-krazek: 28px;             /* krążek ikony w wierszu i na osi (było 34) */
  --gd-radius-pigulka: 999px;
  --gd-radius-plakietka: 999px;

  /* ── Semantyka stanu: wprost na kanon --gd-hue-*, więc tryb ciemny
     dostaje poprawne wartości ZA DARMO (te same nazwy, inne wartości). ── */
  --gd-stan-ok-tlo: var(--gd-hue-olive-tint);
  --gd-stan-ok-linia: var(--gd-hue-olive-line);
  --gd-stan-ok-tekst: var(--gd-hue-olive-ink);
  --gd-stan-uwaga-tlo: var(--gd-hue-orange-tint);
  --gd-stan-uwaga-linia: var(--gd-hue-orange-line);
  --gd-stan-uwaga-tekst: var(--gd-hue-orange-ink);
  --gd-stan-blad-tlo: var(--gd-hue-brand-tint);
  --gd-stan-blad-linia: var(--gd-hue-brand-line);
  --gd-stan-blad-tekst: var(--gd-hue-brand-ink);
  --gd-stan-info-tlo: var(--gd-hue-cyan-tint);
  --gd-stan-info-linia: var(--gd-hue-cyan-line);
  --gd-stan-info-tekst: var(--gd-hue-cyan-ink);
  --gd-stan-neutral-tlo: var(--gd-hue-grafit-tint);
  --gd-stan-neutral-linia: var(--gd-hue-grafit-line);
  --gd-stan-neutral-tekst: var(--gd-hue-grafit-ink);
}

@media (max-width: 767px) {
  :root { --gd-pad-widok: 12px; --gd-pad-karta: 13px; --gd-pad-karta-y: 12px; }
}

/* ── §2. BIBLIOTEKA IKON (maski CSS) ──────────────────────────────────────
 * Ikony są pojedynczymi obrazkami SVG w data:URI, używanymi jako MASKA —
 * kolor bierze się z `currentColor`, więc ikona sama dostosowuje się do
 * trybu ciemnego, stanu aktywnego i koloru tekstu. Zero plików, zero JS.
 * Te same ścieżki leżą w sprite `<symbol>` w index.html (patrz wzorce.html)
 * dla miejsc, gdzie ikona musi być prawdziwym elementem (sidebar, oś czasu).
 * Siatka 24×24, stroke 1.7, zakończenia okrągłe.
 * -------------------------------------------------------------------------- */
:root {
  --ik-start: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.2' width='7.6' height='7.6' rx='2'/%3E%3Crect x='13.2' y='3.2' width='7.6' height='4.4' rx='1.6'/%3E%3Crect x='13.2' y='10.2' width='7.6' height='10.6' rx='2'/%3E%3Crect x='3.2' y='13.2' width='7.6' height='7.6' rx='2'/%3E%3C/svg%3E");
  --ik-lista: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 6.5h12M8.5 12h12M8.5 17.5h12'/%3E%3Cpath d='M3.6 6.5h.01M3.6 12h.01M3.6 17.5h.01'/%3E%3C/svg%3E");
  --ik-dokument: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5Z'/%3E%3Cpath d='M13.5 3v5.5H19'/%3E%3Cpath d='m8.8 14.6 2.2 2.2 4-4.4'/%3E%3C/svg%3E");
  --ik-blyskawica: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 2.6 4.7 13.2h6.1l-1 8.2 8.5-10.6h-6.1z'/%3E%3C/svg%3E");
  --ik-wykres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 20.6h17.6'/%3E%3Cpath d='M6.6 20.6v-5.4M12 20.6V9.4M17.4 20.6v-8.2'/%3E%3Cpath d='m5 8.4 5.2-3.6 3.4 2.3L20 3.2'/%3E%3Cpath d='M16.6 3.2H20v3.4'/%3E%3C/svg%3E");
  --ik-lejek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 4.6h17.2l-6.7 7.9v6.3l-3.8 2.3v-8.6z'/%3E%3C/svg%3E");
  --ik-puls: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 12h4l2.4-7.2 4.2 14.4 2.4-7.2h5.8'/%3E%3C/svg%3E");
  --ik-banknot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='6' width='18.8' height='12' rx='2.4'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='M6.2 10.2v3.6M17.8 10.2v3.6'/%3E%3C/svg%3E");
  --ik-dzwonek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 1 0-12 0c0 6.1-2.1 7.7-2.1 7.7h16.2S18 15.1 18 9Z'/%3E%3Cpath d='M13.9 20.3a2.2 2.2 0 0 1-3.8 0'/%3E%3C/svg%3E");
  --ik-sluchawka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 16.9v2.8a1.9 1.9 0 0 1-2.1 1.9 18.6 18.6 0 0 1-8.1-2.9 18.3 18.3 0 0 1-5.6-5.6A18.6 18.6 0 0 1 2.1 5a1.9 1.9 0 0 1 1.9-2.1h2.8a1.9 1.9 0 0 1 1.9 1.6c.12.9.34 1.8.66 2.6a1.9 1.9 0 0 1-.43 2L7.7 10.3a15 15 0 0 0 5.6 5.6l1.2-1.2a1.9 1.9 0 0 1 2-.43c.85.32 1.73.54 2.63.66a1.9 1.9 0 0 1 1.67 1.97Z'/%3E%3C/svg%3E");
  --ik-czat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 12.3a7.7 7.7 0 0 1-8.3 7.6c-1 0-1.9-.14-2.7-.42L4 21.1l1.6-4.9a7.5 7.5 0 0 1-.8-3.4A7.7 7.7 0 0 1 12.7 5a7.7 7.7 0 0 1 7.9 7.3Z'/%3E%3Cpath d='M9.4 12.4h.01M12.6 12.4h.01M15.8 12.4h.01'/%3E%3C/svg%3E");
  --ik-koperta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='4.8' width='18.4' height='14.4' rx='2.4'/%3E%3Cpath d='m3.6 6.6 7.4 5.5a1.7 1.7 0 0 0 2 0l7.4-5.5'/%3E%3C/svg%3E");
  --ik-komorka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.6' y='2.6' width='10.8' height='18.8' rx='2.6'/%3E%3Cpath d='M10.6 5.6h2.8M12 18.2h.01'/%3E%3C/svg%3E");
  --ik-notatka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 4.2H7.4a2 2 0 0 0-2 2v13.2a2 2 0 0 0 2 2h9.2a2 2 0 0 0 2-2V6.2a2 2 0 0 0-2-2h-1.8'/%3E%3Crect x='9.2' y='2.6' width='5.6' height='3.2' rx='1'/%3E%3Cpath d='M9 11.4h6M9 15.2h3.6'/%3E%3C/svg%3E");
  --ik-obieg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 12a8.4 8.4 0 0 1-14.2 6.1'/%3E%3Cpath d='M3.6 12A8.4 8.4 0 0 1 17.8 5.9'/%3E%3Cpath d='M17.8 2.6v3.3h-3.3M6.2 21.4v-3.3h3.3'/%3E%3C/svg%3E");
  --ik-przelew: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.6h16.8'/%3E%3Cpath d='M16.9 5.1 20.4 8.6 16.9 12.1'/%3E%3Cpath d='M20.4 15.4H3.6'/%3E%3Cpath d='M7.1 11.9 3.6 15.4 7.1 18.9'/%3E%3C/svg%3E");
  --ik-blokada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m5.9 5.9 12.2 12.2'/%3E%3C/svg%3E");
  --ik-tarcza: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.6 6v6.1c0 4.4 3.2 8.2 7.4 9 4.2-.8 7.4-4.6 7.4-9V6z'/%3E%3Cpath d='m9.4 11.9 1.9 1.9 3.5-3.8'/%3E%3C/svg%3E");
  --ik-waga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4v17.2M6.4 6.6h11.2'/%3E%3Cpath d='M6.4 6.6 3.4 13h6z'/%3E%3Cpath d='M17.6 6.6 14.6 13h6z'/%3E%3Cpath d='M8.4 20.6h7.2'/%3E%3C/svg%3E");
  --ik-flaga: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 21.2V3.4'/%3E%3Cpath d='M5.6 4.6h12.8l-2.1 3.9 2.1 3.9H5.6z'/%3E%3C/svg%3E");
  --ik-cisza: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.2 5.2 6.9 9H3.4v6h3.5l4.3 3.8z'/%3E%3Cpath d='m15.8 9.6 5 4.8M20.8 9.6l-5 4.8'/%3E%3C/svg%3E");
  --ik-alarm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.2 17.9a2 2 0 0 0 1.7 3h16.2a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.2v4.3M12 17.3h.01'/%3E%3C/svg%3E");
  --ik-powrot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 12a8.6 8.6 0 1 0 2.7-6.2L2.8 9'/%3E%3Cpath d='M2.8 4.4V9h4.6'/%3E%3C/svg%3E");
  --ik-ptaszek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m8.3 12.2 2.6 2.6 4.8-5.2'/%3E%3C/svg%3E");
  --ik-zegar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.2V12l3.1 1.9'/%3E%3C/svg%3E");
  --ik-kolo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M18.6 14.4a1.5 1.5 0 0 0 .3 1.7l.06.05a1.8 1.8 0 1 1-2.6 2.6l-.05-.06a1.5 1.5 0 0 0-1.7-.3 1.5 1.5 0 0 0-.9 1.37v.16a1.8 1.8 0 0 1-3.6 0v-.09a1.5 1.5 0 0 0-.98-1.37 1.5 1.5 0 0 0-1.7.3l-.05.06a1.8 1.8 0 1 1-2.6-2.6l.06-.05a1.5 1.5 0 0 0 .3-1.7 1.5 1.5 0 0 0-1.37-.9h-.16a1.8 1.8 0 1 1 0-3.6h.09a1.5 1.5 0 0 0 1.37-.98 1.5 1.5 0 0 0-.3-1.7l-.06-.05a1.8 1.8 0 1 1 2.6-2.6l.05.06a1.5 1.5 0 0 0 1.7.3h.07a1.5 1.5 0 0 0 .9-1.37v-.16a1.8 1.8 0 1 1 3.6 0v.09a1.5 1.5 0 0 0 .9 1.37 1.5 1.5 0 0 0 1.7-.3l.05-.06a1.8 1.8 0 1 1 2.6 2.6l-.06.05a1.5 1.5 0 0 0-.3 1.7v.07a1.5 1.5 0 0 0 1.37.9h.16a1.8 1.8 0 1 1 0 3.6h-.09a1.5 1.5 0 0 0-1.37.9Z'/%3E%3C/svg%3E");
  --ik-wgraj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15.4v3.2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3.2'/%3E%3Cpath d='m7.6 8.4 4.4-4.4 4.4 4.4'/%3E%3Cpath d='M12 4v11.6'/%3E%3C/svg%3E");
  --ik-ksiazka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 5a2.4 2.4 0 0 1 2.4-2.4H20v14.8H5.8A2.4 2.4 0 0 0 3.4 19.8Z'/%3E%3Cpath d='M3.4 19.8a2.4 2.4 0 0 1 2.4-2.4H20v4H5.8a2.4 2.4 0 0 1-2.4-1.6Z'/%3E%3C/svg%3E");
  --ik-szukaj: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='7.2'/%3E%3Cpath d='m16.2 16.2 4.4 4.4'/%3E%3C/svg%3E");
  /* jedyna ikona rysowana TŁEM (pole <input> nie ma ::before) — stały szary */
  --ik-szukaj-szary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A827C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='7.2'/%3E%3Cpath d='m16.2 16.2 4.4 4.4'/%3E%3C/svg%3E");
  --ik-wyjscie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 20.4H5.8a2 2 0 0 1-2-2V5.6a2 2 0 0 1 2-2h3.8'/%3E%3Cpath d='m15.4 16.6 4.6-4.6-4.6-4.6'/%3E%3Cpath d='M20 12H9.2'/%3E%3C/svg%3E");
  --ik-taca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13.5h4.2l1.6 2.6h6.4l1.6-2.6H21'/%3E%3Cpath d='M5.6 5.6 3 13.5V18a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4.5l-2.6-7.9A2 2 0 0 0 16.5 4.2h-9A2 2 0 0 0 5.6 5.6Z'/%3E%3C/svg%3E");
}

/* Wspólny rysownik ikony: element bez ikony ma szerokość 0 i nie zostawia
   dziury (dlatego marginesem steruje --ikona-mr, a nie `gap` rodzica).
   Domyślna maska jest PRZEZROCZYSTA, nie `none` — przy `none` element bez
   ustawionej ikony narysowałby pełny prostokąt w kolorze tekstu. */
.gd-ik::before,
.gd-pigulki button::before,
.gd-podsekcje button::before,
.gd-plakietka::before,
.gd-filtry button::before,
.filtry-akt button::before {
  content: "";
  flex: 0 0 auto;
  width: var(--ikona-w, 0px);
  height: var(--ikona-h, var(--gd-ikona));
  margin-inline-end: var(--ikona-mr, 0px);
  background: currentColor;
  -webkit-mask: var(--ikona, linear-gradient(#0000, #0000)) center / contain no-repeat;
  mask: var(--ikona, linear-gradient(#0000, #0000)) center / contain no-repeat;
}

/* ── §3. ZAGĘSZCZENIE ISTNIEJĄCEJ POWŁOKI ────────────────────────────────
 * To jest cała różnica „rzadko → gęsto" na dzisiejszych ekranach. Nic tu nie
 * zmienia struktury DOM ani nazw klas — tylko liczby.
 * -------------------------------------------------------------------------- */
.app-layout .page-body { padding: var(--gd-pad-widok); }
.app-layout .page-body > .inner { max-width: 1180px; }

.app-layout .page-head {
  min-height: 56px;
  padding: 10px var(--gd-pad-widok);
  padding-right: 60px;              /* miejsce na przycisk motywu (fixed) */
  gap: 6px 14px;
}
.app-layout .page-title { font-size: var(--gd-t-widok); line-height: 1.25; }
.app-layout .page-sub { font-size: var(--gd-t-drobny); line-height: 1.4; }
.app-layout .page-actions { gap: 8px; }

.app-layout .karta {
  padding: var(--gd-pad-karta-y) var(--gd-pad-karta);
  margin-bottom: var(--gd-luka);
}
.app-layout .karta h2 { font-size: var(--gd-t-sekcja); margin: 0 0 10px; }
.app-layout .karta h3 { font-size: var(--gd-t-tekst); }
.app-layout .info { font-size: var(--gd-t-drobny); line-height: 1.45; }
.app-layout label { font-size: var(--gd-t-drobny); margin: 10px 0 3px; }

/* Kafle wskaźników: 132 px zamiast 140 mieści 7 w rzędzie zamiast 6. */
.app-layout .kafle { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.app-layout .kafel { padding: 11px 13px; }
.app-layout .kafel .naz { font-size: var(--gd-t-caps); letter-spacing: .07em; }
.app-layout .kafel .wart { font-size: var(--gd-t-liczba); line-height: 1.15; margin-top: 1px; }
.app-layout .kafel .dod { font-size: var(--gd-t-meta); line-height: 1.35; }

/* Sidebar: 34 px na pozycję zamiast 40 — dziesięć zakładek mieści się
   bez przewijania na laptopie 13". */
.app-layout .gd-nav-item { padding: 7px 10px; gap: 9px; font-size: var(--gd-t-tekst); }
.app-layout .gd-sidebar-nav { padding: 10px 10px; }
.app-layout .nav-section { margin-bottom: 12px; }
.app-layout .gd-nav-section-title { padding: 0 10px 6px; font-size: var(--gd-t-caps); }
.app-layout .gd-sidebar-head { padding: 14px 16px; }
.app-layout .gd-sidebar-foot { padding: 10px 14px; }

/* Kafelki Startu */
.app-layout .start-tiles { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }
.app-layout .start-tile { padding: 12px; gap: 11px; }
.app-layout .start-tile-icon { width: 34px; height: 34px; }
.app-layout .start-tile-name { font-size: var(--gd-t-tytul); }
.app-layout .start-tile-desc { font-size: var(--gd-t-meta); line-height: 1.4; }

/* Przyciski — mniejsze pola, ten sam język. */
.app-layout button.zapisz { padding: 8px 18px; font-size: var(--gd-t-tekst); border-radius: 12px; margin-top: 12px; }
.app-layout button.primary { padding: 9px 16px; font-size: var(--gd-t-tekst); border-radius: 12px; }
.app-layout button.ghost { padding: 7px 13px; font-size: var(--gd-t-drobny); }
.app-layout .btn { padding: 6px 12px; font-size: var(--gd-t-drobny); }

/* ── §4. NAPRAWY TRYBU CIEMNEGO ──────────────────────────────────────────
 * Cztery miejsca w index.html używają `var(--gd-text)` JAKO TŁA albo mają
 * kolor wpisany na sztywno. W trybie ciemnym --gd-text to prawie biel, więc
 * biały tekst na nim znika. Poniżej naprawa bez ruszania index.html.
 * -------------------------------------------------------------------------- */
/* Toast: biały tekst na białym tle = komunikat, którego nikt nie zobaczy. */
:root[data-motyw="ciemny"] .toast {
  background: var(--gd-sunken); color: var(--gd-text);
  border: 1px solid var(--gd-border); box-shadow: var(--gd-shadow-overlay);
}
/* Surowe dane leada: jasne tło + jasny tekst. */
:root[data-motyw="ciemny"] pre.payload { background: #0F0D0C; color: #E6E0DA; }
/* Aktywny okres (Dokumentacja, Marketing): tekst musi pociemnieć, nie tło. */
:root[data-motyw="ciemny"] .okresy button.aktywny { background: var(--gd-text); color: var(--gd-bg); border-color: var(--gd-text); }
/* Podpowiedź na ekranie logowania: kremowe tło z jasnym tekstem. */
body .hint { background: var(--gd-stan-uwaga-tlo); border-color: var(--gd-stan-uwaga-linia); color: var(--gd-text); }
/* Znaczki: wpisane na sztywno #E7F0E8 / #F8EFDD nie mają wersji ciemnej. */
.app-layout .znaczek { font-size: var(--gd-t-meta); padding: 2px 8px; }
.app-layout .znaczek.ok { background: var(--gd-stan-ok-tlo); color: var(--gd-stan-ok-tekst); }
.app-layout .znaczek.warn { background: var(--gd-stan-uwaga-tlo); color: var(--gd-stan-uwaga-tekst); }
.app-layout .znaczek.zle { background: var(--gd-stan-blad-tlo); color: var(--gd-stan-blad-tekst); }
.app-layout .rodzaj-stop, .app-layout .rodzaj-rodo { color: var(--gd-err); }
.app-layout .rodzaj-niejasne { color: var(--gd-warn); }
/* Karta werdyktu Sita: kreska rgb(0 0 0/.09) na ciemnym tincie nie istnieje. */
:root[data-motyw="ciemny"] .werdykt-pojazd { border-top-color: rgb(255 255 255 / .13); }
:root[data-motyw="ciemny"] .oferta-rozbicie div:last-child { border-top-color: var(--gd-border-strong); }

/* ── §5. PIGUŁKI: ZAKŁADKI POZIOMU 1 I 2 ─────────────────────────────────
 * Poziom 1 = przełącznik sekcji widoku (u nas: .gd-podsekcje budowane z DOM).
 * Poziom 2 = przełącznik wewnątrz sekcji (okres, wariant) — mniejszy, w korycie.
 * Filtry z licznikami to OSOBNA rodzina (§6) — filtr to stan, nie miejsce.
 * -------------------------------------------------------------------------- */
.gd-pigulki {
  display: flex; gap: 4px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
}
.gd-pigulki::-webkit-scrollbar { display: none; }
.gd-pigulki > button, .gd-pigulka {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--gd-muted);
  font: 600 var(--gd-t-drobny)/1 var(--gd-font); letter-spacing: .01em;
  white-space: nowrap; cursor: pointer; appearance: none;
  transition: background var(--gd-dur-fast) var(--gd-ease),
              color var(--gd-dur-fast) var(--gd-ease),
              border-color var(--gd-dur-fast) var(--gd-ease);
}
@media (hover: hover) {
  .gd-pigulki > button:hover, .gd-pigulka:hover { background: var(--gd-sunken); color: var(--gd-text-2); }
}
.gd-pigulki > button.aktywna, .gd-pigulki > button.aktywny,
.gd-pigulka.aktywna, .gd-pigulka.aktywny,
.gd-pigulki > button[aria-selected="true"] {
  background: var(--gd-card); color: var(--gd-text);
  border-color: var(--gd-border); box-shadow: var(--gd-shadow-raised);
}
.gd-pigulki > button:focus-visible, .gd-pigulka:focus-visible {
  outline: 2px solid var(--gd-brand); outline-offset: 2px;
}
/* Wariant „w korycie" — poziom 2. Tło koryta daje kontrast aktywnej pigułce
   bez używania koloru marki (marka zostaje na akcje i alarmy). */
.gd-pigulki--korytko {
  padding: 3px; border-radius: var(--gd-radius-pigulka);
  background: var(--gd-sunken); border: 1px solid var(--gd-border-soft);
  width: max-content; max-width: 100%;
}
.gd-pigulki--korytko > button { min-height: 28px; padding: 0 11px; border-radius: 999px; font-size: var(--gd-t-meta); }

/* ISTNIEJĄCY pasek podsekcji dostaje ten sam język — bez zmian w app.js.
   Sticky trzyma się paddingu widoku, więc marginesy liczymy z tokenu;
   przy zmianie --gd-pad-widok nic nie trzeba poprawiać ręcznie. */
.app-layout .gd-podsekcje {
  top: calc(-1 * var(--gd-pad-widok));
  margin: calc(-1 * var(--gd-pad-widok)) calc(-1 * var(--gd-pad-widok)) 14px;
  padding: 12px var(--gd-pad-widok) 10px;
  gap: 4px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gd-pad-widok);
  overscroll-behavior-x: contain;
}
.app-layout .gd-podsekcje button {
  display: inline-flex; align-items: center; scroll-snap-align: start;
  min-height: 32px; padding: 0 12px; border-radius: 9px;
  font-size: var(--gd-t-drobny); line-height: 1;
}
/* Ikony przy podsekcjach — wyłącznie CSS, klucz to `data-sekcja-cel`,
   czyli dokładnie to, co app.js już wpisuje w przycisk. Nowa sekcja bez
   wpisu poniżej po prostu nie ma ikony (szerokość 0, zero dziury) —
   dlatego geometria siedzi w jawnej liście kluczy, nie w [data-sekcja-cel]. */
.app-layout .gd-podsekcje button:is(
  [data-sekcja-cel="lista"], [data-sekcja-cel="kompletnosc"], [data-sekcja-cel="stopki"],
  [data-sekcja-cel="ochrona"], [data-sekcja-cel="reguly"], [data-sekcja-cel="os"],
  [data-sekcja-cel="wynik"], [data-sekcja-cel="faktury"], [data-sekcja-cel="koszty"],
  [data-sekcja-cel="decyzje"], [data-sekcja-cel="wgraj"], [data-sekcja-cel="analiza"],
  [data-sekcja-cel="nauka"], [data-sekcja-cel="historia"], [data-sekcja-cel="lejek"],
  [data-sekcja-cel="kontrola"], [data-sekcja-cel="ustawienia"]
) { --ikona-w: 15px; --ikona-h: 15px; --ikona-mr: 7px; }
.app-layout .gd-podsekcje button[data-sekcja-cel="lista"]        { --ikona: var(--ik-lista); }
.app-layout .gd-podsekcje button[data-sekcja-cel="kompletnosc"]  { --ikona: var(--ik-dokument); }
.app-layout .gd-podsekcje button[data-sekcja-cel="stopki"]       { --ikona: var(--ik-koperta); }
.app-layout .gd-podsekcje button[data-sekcja-cel="ochrona"]      { --ikona: var(--ik-tarcza); }
.app-layout .gd-podsekcje button[data-sekcja-cel="reguly"]       { --ikona: var(--ik-blyskawica); }
.app-layout .gd-podsekcje button[data-sekcja-cel="os"]           { --ikona: var(--ik-puls); }
.app-layout .gd-podsekcje button[data-sekcja-cel="wynik"]        { --ikona: var(--ik-wykres); }
.app-layout .gd-podsekcje button[data-sekcja-cel="faktury"]      { --ikona: var(--ik-banknot); }
.app-layout .gd-podsekcje button[data-sekcja-cel="koszty"]       { --ikona: var(--ik-przelew); }
.app-layout .gd-podsekcje button[data-sekcja-cel="decyzje"]      { --ikona: var(--ik-dzwonek); }
.app-layout .gd-podsekcje button[data-sekcja-cel="wgraj"]        { --ikona: var(--ik-wgraj); }
.app-layout .gd-podsekcje button[data-sekcja-cel="analiza"]      { --ikona: var(--ik-lejek); }
.app-layout .gd-podsekcje button[data-sekcja-cel="nauka"]        { --ikona: var(--ik-ksiazka); }
.app-layout .gd-podsekcje button[data-sekcja-cel="historia"]     { --ikona: var(--ik-zegar); }
.app-layout .gd-podsekcje button[data-sekcja-cel="lejek"]        { --ikona: var(--ik-lejek); }
.app-layout .gd-podsekcje button[data-sekcja-cel="kontrola"]     { --ikona: var(--ik-tarcza); }
.app-layout .gd-podsekcje button[data-sekcja-cel="ustawienia"]   { --ikona: var(--ik-kolo); }

/* ── §6. FILTRY Z LICZNIKAMI ─────────────────────────────────────────────
 * Filtr mówi „co widzisz", więc aktywny jest pełną marką. Kategoria pusta
 * zostaje na ekranie wyszarzona — układ nie może się przestawiać przy
 * każdym kliknięciu (to była pretensja właściciela).
 * -------------------------------------------------------------------------- */
.gd-filtry, .app-layout .filtry-akt { display: flex; gap: 6px; flex-wrap: wrap; }
.gd-filtry button, .app-layout .filtry-akt button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 11px;
  border: 1px solid var(--gd-border); border-radius: 999px;
  background: var(--gd-card); color: var(--gd-text-2);
  font: 600 var(--gd-t-drobny)/1 var(--gd-font); cursor: pointer; white-space: nowrap;
  transition: background var(--gd-dur-fast) var(--gd-ease), color var(--gd-dur-fast) var(--gd-ease);
}
@media (hover: hover) {
  .gd-filtry button:hover:not([disabled]), .app-layout .filtry-akt button:hover:not([disabled]) {
    border-color: var(--gd-border-strong); color: var(--gd-text);
  }
}
.gd-filtry button.aktywny, .app-layout .filtry-akt button.aktywny,
.gd-filtry button.aktywna {
  background: var(--gd-brand); border-color: var(--gd-brand); color: #fff;
}
.gd-filtry button .ile, .app-layout .filtry-akt button .ile {
  font-size: var(--gd-t-meta); font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: 999px;
  background: var(--gd-sunken); color: var(--gd-muted); opacity: 1;
}
.gd-filtry button.aktywny .ile, .app-layout .filtry-akt button.aktywny .ile {
  background: rgb(255 255 255 / .22); color: #fff;
}
.app-layout .filtry-akt button.pusty { opacity: .45; }
.app-layout .filtry-akt button[disabled] { cursor: default; }

/* Segment (7/14/30 dni) — to samo koryto co pigułki poziomu 2. */
.app-layout #akt-zakres { gap: 2px; padding: 3px; border: 1px solid var(--gd-border-soft); }
.app-layout #akt-zakres button { min-height: 28px; padding: 0 12px; font-size: var(--gd-t-meta); }
.app-layout .okresy { display: flex; gap: 4px; padding: 3px; background: var(--gd-sunken);
  border: 1px solid var(--gd-border-soft); border-radius: 999px; width: max-content; max-width: 100%; }
.app-layout .okresy button { min-height: 28px; padding: 0 12px; border: 0; background: transparent;
  border-radius: 999px; font-size: var(--gd-t-meta); }
.app-layout .okresy button.aktywny { background: var(--gd-card); color: var(--gd-text);
  box-shadow: var(--gd-shadow-raised); }

/* ── §7. PLAKIETKI STANU ─────────────────────────────────────────────────
 * Cztery znaczenia i ani jednego więcej: ok / uwaga / błąd / neutralna.
 * Kolor NIGDY nie jest jedynym nośnikiem — każda ma ikonę albo słowo.
 * -------------------------------------------------------------------------- */
.gd-plakietka {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 20px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--gd-radius-plakietka);
  font: 600 var(--gd-t-meta)/1 var(--gd-font); letter-spacing: .01em;
  white-space: nowrap; vertical-align: middle;
  background: var(--gd-stan-neutral-tlo); border-color: var(--gd-stan-neutral-linia);
  color: var(--gd-stan-neutral-tekst);
  --ikona-h: 12px;   /* szerokość dokładają dopiero warianty z ikoną */
}
.gd-plakietka--ok      { background: var(--gd-stan-ok-tlo);      border-color: var(--gd-stan-ok-linia);      color: var(--gd-stan-ok-tekst);      --ikona: var(--ik-ptaszek); --ikona-w: 12px; --ikona-mr: 5px; }
.gd-plakietka--uwaga   { background: var(--gd-stan-uwaga-tlo);   border-color: var(--gd-stan-uwaga-linia);   color: var(--gd-stan-uwaga-tekst);   --ikona: var(--ik-zegar);   --ikona-w: 12px; --ikona-mr: 5px; }
.gd-plakietka--blad    { background: var(--gd-stan-blad-tlo);    border-color: var(--gd-stan-blad-linia);    color: var(--gd-stan-blad-tekst);    --ikona: var(--ik-alarm);   --ikona-w: 12px; --ikona-mr: 5px; }
.gd-plakietka--info    { background: var(--gd-stan-info-tlo);    border-color: var(--gd-stan-info-linia);    color: var(--gd-stan-info-tekst); }
.gd-plakietka--neutral { --ikona-w: 0px; --ikona-mr: 0px; }
/* Wariant bez ikony (gęste tabele — 12 px ikony w komórce to szum). */
.gd-plakietka--sama    { --ikona-w: 0px; --ikona-mr: 0px; }
/* Tag / etykieta kategorii: prostokątna, żeby nie mylić jej ze stanem. */
.gd-plakietka--tag { border-radius: 6px; font-weight: 600; text-transform: none;
  background: var(--gd-sunken); border-color: var(--gd-border); color: var(--gd-text-2); }
/* Kropka stanu do wierszy, gdzie nie ma miejsca na słowo. */
.gd-kropka { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto;
  background: var(--gd-stan-neutral-tekst); }
.gd-kropka--ok { background: var(--gd-stan-ok-tekst); }
.gd-kropka--uwaga { background: var(--gd-stan-uwaga-tekst); }
.gd-kropka--blad { background: var(--gd-stan-blad-tekst); }
.gd-kropka--zywa { box-shadow: 0 0 0 3px var(--gd-stan-ok-tlo); }

/* ── §8. WIERSZ LISTY ────────────────────────────────────────────────────
 * [ikona] [tytuł + opis] [plakietki] [przełącznik] [akcja]
 * Dwa warianty pojemnika: „linie" (gęsty, długie listy) i „kafelki"
 * (rzadszy, krótkie listy konfiguracyjne — jak integracje w DigiBOS).
 * -------------------------------------------------------------------------- */
.gd-lista { display: flex; flex-direction: column; }
.gd-lista--kafelki { gap: 8px; }

.gd-wiersz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  min-height: var(--gd-w3);
  padding: 8px 10px;
  border-radius: var(--gd-radius-control);
  color: inherit; text-decoration: none; text-align: left;
  background: transparent; border: 1px solid transparent;
  transition: background var(--gd-dur-fast) var(--gd-ease);
}
.gd-lista--linie .gd-wiersz { border-radius: 0; border-bottom: 1px solid var(--gd-border-soft); padding-inline: 2px; }
.gd-lista--linie .gd-wiersz:last-child { border-bottom: 0; }
.gd-lista--kafelki .gd-wiersz { background: var(--gd-card); border-color: var(--gd-border); }

.gd-wiersz--klikalny { cursor: pointer; }
@media (hover: hover) {
  .gd-wiersz--klikalny:hover { background: var(--gd-sunken); }
  .gd-lista--kafelki .gd-wiersz--klikalny:hover { background: var(--gd-card); border-color: var(--gd-border-strong); }
}
.gd-wiersz:focus-visible { outline: 2px solid var(--gd-brand); outline-offset: -2px; }
.gd-wiersz--wybrany { background: var(--gd-brand-tint); box-shadow: inset 2px 0 0 var(--gd-brand); }

.gd-wiersz-ikona {
  width: var(--gd-krazek); height: var(--gd-krazek); flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--gd-stan-neutral-tlo); border: 1px solid var(--gd-stan-neutral-linia);
  color: var(--gd-stan-neutral-tekst);
}
.gd-wiersz-ikona svg { width: 15px; height: 15px; display: block; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gd-wiersz-ikona--ok    { background: var(--gd-stan-ok-tlo);    border-color: var(--gd-stan-ok-linia);    color: var(--gd-stan-ok-tekst); }
.gd-wiersz-ikona--uwaga { background: var(--gd-stan-uwaga-tlo); border-color: var(--gd-stan-uwaga-linia); color: var(--gd-stan-uwaga-tekst); }
.gd-wiersz-ikona--blad  { background: var(--gd-stan-blad-tlo);  border-color: var(--gd-stan-blad-linia);  color: var(--gd-stan-blad-tekst); }
.gd-wiersz-ikona--marka { background: var(--gd-brand-tint);     border-color: var(--gd-brand-soft-border);color: var(--gd-brand-ink); }

.gd-wiersz-tresc { min-width: 0; }
.gd-wiersz-tytul {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--gd-t-tytul); font-weight: 600; line-height: 1.3; color: var(--gd-text);
  overflow-wrap: anywhere;
}
.gd-wiersz-opis {
  margin-top: 2px; font-size: var(--gd-t-drobny); line-height: 1.4; color: var(--gd-muted);
  display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.gd-wiersz-opis--dwie { -webkit-line-clamp: 2; line-clamp: 2; }
.gd-wiersz-meta {
  margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--gd-t-meta); color: var(--gd-muted);
}
.gd-wiersz-meta > span:not([class])::after { content: "\00b7"; margin-left: 6px; opacity: .55; }
.gd-wiersz-meta > span:not([class]):last-child::after { content: none; }

.gd-wiersz-prawo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gd-wiersz-czas { font-size: var(--gd-t-meta); color: var(--gd-muted); white-space: nowrap;
  text-align: right; font-variant-numeric: tabular-nums; line-height: 1.35; }
.gd-wiersz-czas b { display: block; font-weight: 600; color: var(--gd-text-2); }

/* Akcja odsłaniana kursorem — ale wyłącznie na myszy i nigdy przed
   klawiaturą (opacity, nie display, żeby fokus dalej ją znajdował). */
.gd-akcja {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 11px;
  border: 1px solid var(--gd-border); border-radius: 999px;
  background: var(--gd-card); color: var(--gd-text);
  font: 600 var(--gd-t-meta)/1 var(--gd-font); cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .gd-akcja:hover { border-color: var(--gd-border-strong); } }
.gd-akcja--marka { background: var(--gd-brand); border-color: var(--gd-brand); color: #fff; }
.gd-akcja--grozna { color: var(--gd-err); }
@media (hover: hover) and (pointer: fine) {
  .gd-wiersz .gd-akcja--cicha { opacity: 0; transition: opacity var(--gd-dur-fast) var(--gd-ease); }
  .gd-wiersz:hover .gd-akcja--cicha,
  .gd-wiersz:focus-within .gd-akcja--cicha { opacity: 1; }
}

/* Przełącznik (integracje, reguły włącz/wyłącz) — czysty CSS na checkboksie,
   klawiatura działa sama, bo pod spodem jest prawdziwy <input>. */
.gd-przelacznik { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }
.gd-przelacznik input { position: absolute; opacity: 0; width: 0; height: 0; }
.gd-przelacznik i {
  width: 38px; height: 22px; border-radius: 999px; flex: 0 0 auto; position: relative;
  background: var(--gd-border); transition: background var(--gd-dur) var(--gd-ease);
}
.gd-przelacznik i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--gd-card); box-shadow: var(--gd-shadow-raised);
  transition: transform var(--gd-dur) var(--gd-ease);
}
.gd-przelacznik input:checked + i { background: var(--gd-stan-ok-tekst); }
.gd-przelacznik input:checked + i::after { transform: translateX(16px); }
.gd-przelacznik input:focus-visible + i { outline: 2px solid var(--gd-brand); outline-offset: 2px; }
.gd-przelacznik input:disabled + i { opacity: .45; }

/* ── §9. UKŁAD MASTER–DETAIL ─────────────────────────────────────────────
 * Lewa kolumna = wybór, prawa = szczegół, opcjonalna trzecia = kontekst
 * (wzorzec z ekranu kontaktu w DigiBOS). Panel boczny jest przyklejony,
 * ale przewija się sam, gdy jest wyższy od okna.
 * -------------------------------------------------------------------------- */
.gd-md {
  display: grid; gap: var(--gd-luka); align-items: start;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}
.gd-md--3 { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(220px, 290px); }
.gd-md-panel {
  position: sticky; top: var(--gd-md-top, 0px);
  max-height: calc(100dvh - var(--gd-navbar-h) - 96px);
  overflow: auto; overscroll-behavior: contain;
}
.gd-md-panel::-webkit-scrollbar { width: 8px; }
.gd-md-panel::-webkit-scrollbar-thumb { background: var(--gd-border); border-radius: 999px; }
/* Trzecia kolumna schodzi pierwsza, potem układ robi się jednokolumnowy. */
@media (max-width: 1180px) { .gd-md--3 { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
  .gd-md--3 > :nth-child(3) { grid-column: 1 / -1; } }
@media (max-width: 880px) {
  .gd-md, .gd-md--3 { grid-template-columns: minmax(0, 1fr); }
  .gd-md--3 > :nth-child(3) { grid-column: auto; }
  .gd-md-panel { position: static; max-height: none; }
}

/* ── §10. OŚ CZASU Z SZYNĄ IKON ──────────────────────────────────────────
 * Szyna jest rysowana NA WPISIE, nie na liście — dzięki temu nie trzeba
 * zgadywać wysokości i nie rozjeżdża się przy zawijaniu treści. Krążek ma
 * nieprzezroczyste tło i zasłania linię, więc wygląda jak przerwa w szynie.
 * -------------------------------------------------------------------------- */
.gd-os { position: relative; }
.gd-os-wpis {
  position: relative; display: grid;
  grid-template-columns: var(--gd-krazek) minmax(0, 1fr) auto; gap: 10px;
  padding: 9px 0;
}
.gd-os-wpis::before {
  content: ""; position: absolute; left: calc(var(--gd-krazek) / 2 - 1px);
  top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--gd-border-soft);
}
.gd-os-wpis:first-of-type::before { top: 9px; }
.gd-os-wpis:last-of-type::before { bottom: calc(100% - 9px - var(--gd-krazek)); }
.gd-os-wpis > .gd-wiersz-ikona, .gd-os-ikona { position: relative; z-index: 1; }
.gd-os-tresc { min-width: 0; }

/* Ten sam wygląd dla ISTNIEJĄCEGO Centrum Aktywności — bez zmian w app.js.
   app.js wstawia w .akt-ikona inline `style` z kolorami hue, więc tutaj
   ruszamy wyłącznie geometrię (inline style i tak wygrałby z kolorem). */
.app-layout .akt-wpis {
  position: relative;
  grid-template-columns: var(--gd-krazek) minmax(0, 1fr) auto;
  gap: 10px; padding: 9px 0;
}
.app-layout .akt-wpis::before {
  content: ""; position: absolute; left: calc(var(--gd-krazek) / 2 - 1px);
  top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--gd-border-soft);
}
.app-layout .akt-wpis:first-of-type::before { top: 9px; }
.app-layout .akt-wpis:last-of-type::before { bottom: calc(100% - 9px - var(--gd-krazek)); }
.app-layout .akt-wpis:last-of-type { border-bottom: 0; }
.app-layout .akt-ikona {
  position: relative; z-index: 1;
  width: var(--gd-krazek); height: var(--gd-krazek); border-radius: 9px; font-size: 13px;
}
.app-layout .akt-tytul { font-size: var(--gd-t-tytul); line-height: 1.3; }
/* Opis: dwie linijki zamiast trzech. NIE dotykamy `display` — zwijanie
   stoi na -webkit-box i każde nadpisanie display je zabija. */
.app-layout .akt-opis { font-size: var(--gd-t-drobny); line-height: 1.42; margin-top: 2px; }
.app-layout .akt-opis.zwiniety { -webkit-line-clamp: 2; line-clamp: 2; }
.app-layout .akt-meta { font-size: var(--gd-t-meta); margin-top: 4px; gap: 6px; }
.app-layout .akt-kiedy { font-size: var(--gd-t-meta); }
.app-layout .akt-data { font-size: 10.5px; }
.app-layout .akt-zal span { font-size: var(--gd-t-meta); padding: 1px 6px; }
.app-layout .akt-wiecej { font-size: var(--gd-t-meta); margin-top: 3px; }
.app-layout .akt-pasek { gap: 8px; margin-bottom: 10px; }
/* Lupa w polu szukania: na <input> nie da się użyć ::before ani maski, więc
   ikona idzie tłem. Dlatego JEDYNIE ta ikona ma obrys w stałej szarości
   (#8A827C) — czyta się i na białej karcie, i na węglu, a nie wymaga dwóch
   wersji pliku ani filtrów. */
.app-layout .akt-pasek input[type="search"] {
  min-height: 38px; padding: 8px 12px 8px 32px; font-size: var(--gd-t-tekst);
  background-image: var(--ik-szukaj-szary);
  background-repeat: no-repeat; background-position: 10px center; background-size: 15px;
}

/* Alerty zarządu — ta sama gęstość co oś czasu. */
.app-layout .al-wpis { padding: 9px 0; gap: 10px; }
.app-layout .al-tytul { font-size: var(--gd-t-tytul); line-height: 1.3; }
.app-layout .al-opis { font-size: var(--gd-t-drobny); line-height: 1.42; margin-top: 2px; }
.app-layout .al-meta { font-size: var(--gd-t-meta); margin-top: 4px; gap: 6px; }
.app-layout .al-zrobione { padding: 5px 11px; font-size: var(--gd-t-meta); }

/* ── §11. PUSTY STAN ─────────────────────────────────────────────────────
 * Pusty ekran ma powiedzieć, CO ZROBIĆ. Trzy elementy: znak, jedno zdanie
 * wyjaśnienia, opcjonalnie jedna akcja. Nigdy sam szary tekst w rogu.
 * -------------------------------------------------------------------------- */
.gd-pusto {
  display: grid; justify-items: center; text-align: center;
  gap: 6px; padding: 30px 16px; max-width: 420px; margin: 0 auto;
}
.gd-pusto-znak {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--gd-sunken); border: 1px solid var(--gd-border);
  color: var(--gd-muted); margin-bottom: 2px;
}
.gd-pusto-znak::before { content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--ikona, var(--ik-lista)) center / contain no-repeat;
  mask: var(--ikona, var(--ik-lista)) center / contain no-repeat; }
.gd-pusto-tytul { font-size: var(--gd-t-tytul); font-weight: 600; color: var(--gd-text); }
.gd-pusto-tekst { font-size: var(--gd-t-drobny); color: var(--gd-muted); line-height: 1.45; }
.gd-pusto .gd-akcja { margin-top: 8px; }

/* Zero-JS ulepszenie: dzisiejsze „Nic nie pasuje…" / „Ładowanie…" to
   samotny <p class="info"> w karcie. Ustawiamy go na środku, żeby czytało
   się jak pusty stan, a nie jak zgubione zdanie. */
.app-layout #akt-lista > p.info:only-child,
.app-layout #alerty-lista > p.info:only-child,
.app-layout #lista-automatyzacji > p.info:only-child {
  display: block; text-align: center; padding: 30px 16px;
  max-width: 420px; margin: 0 auto; font-size: var(--gd-t-tekst);
}

/* ── §12. NAGŁÓWEK WIDOKU Z AKCJAMI ──────────────────────────────────────
 * Lewa strona: co to za ekran. Środek: fakty na teraz (chipy). Prawa: akcje.
 * Chipy są TYLKO do czytania — jeśli coś da się kliknąć, to jest akcją.
 * -------------------------------------------------------------------------- */
.gd-chipy { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.gd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 26px; padding: 0 9px; border-radius: 999px;
  background: var(--gd-sunken); border: 1px solid var(--gd-border-soft);
  color: var(--gd-text-2); font-size: var(--gd-t-meta); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gd-chip b { font-weight: 700; color: var(--gd-text); }
.gd-chip--zywy { background: var(--gd-stan-ok-tlo); border-color: var(--gd-stan-ok-linia); color: var(--gd-stan-ok-tekst); }
.gd-chip--alarm { background: var(--gd-stan-blad-tlo); border-color: var(--gd-stan-blad-linia); color: var(--gd-stan-blad-tekst); }
.app-layout .page-head-text + .gd-chipy { margin-left: 4px; }

/* ── §13. TABELA GĘSTA ───────────────────────────────────────────────────
 * Wiersz 36 px, nagłówek wersalikami 10,5 px, linie tylko poziome,
 * liczby tabularne i do prawej. Bez zebry — na 13 px zebra brudzi.
 * UWAGA: tabele z własnym ID (#podpisy-osoby, #fin-*) mają wyższą
 * specyficzność i zostają przy swoich odstępach. To jest OK.
 * -------------------------------------------------------------------------- */
.app-layout .page-body table { font-size: var(--gd-t-drobny); }
.app-layout .page-body th {
  font-size: var(--gd-t-caps); letter-spacing: .07em; font-weight: 700;
  padding: 0 10px 7px; color: var(--gd-muted); white-space: nowrap;
  border-bottom: 1px solid var(--gd-border);
}
.app-layout .page-body td { padding: 7px 10px; line-height: 1.4; vertical-align: middle; }
.app-layout .page-body th:first-child, .app-layout .page-body td:first-child { padding-left: 2px; }
.app-layout .page-body th:last-child, .app-layout .page-body td:last-child { padding-right: 2px; }
.app-layout .page-body tbody tr:last-child td { border-bottom: 0; }
.app-layout tr.wiersz-leada td, .app-layout tr.wiersz-rozmowy td { cursor: pointer; }
.app-layout tr.szczegoly > td { padding: 12px 14px; }
.app-layout .kroki { font-size: var(--gd-t-drobny); padding-left: 16px; }
.app-layout pre.payload { font-size: 11.5px; padding: 10px 12px; }
/* Liczby: `td.l` jest już w użyciu w tabelach Finansów. */
.app-layout .page-body td.l, .app-layout .page-body th.l { text-align: right; font-variant-numeric: tabular-nums; }
/* Kolumna „najważniejsza": pierwszy człon wiersza pogrubiony i ciemniejszy. */
.gd-tabela-glowna { font-weight: 600; color: var(--gd-text); }
/* Przyklejony nagłówek działa TYLKO w pojemniku o ustalonej wysokości —
   .tabela-scroll ma overflow-x:auto, więc sam z siebie nigdy nie przewija
   się pionowo i sticky w nim nic nie robi. Ten wariant to naprawia. */
.gd-tabela-okno { max-height: 62vh; overflow: auto; }
.gd-tabela-okno thead th { position: sticky; top: 0; z-index: 2; background: var(--gd-card); }

/* ── §14. RUCH, KLAWIATURA, TELEFON ──────────────────────────────────────── */
/* Pojedyncza reguła fokusu dla wszystkiego, co nie jest natywnym polem. */
.gd-wiersz:focus-visible, .gd-akcja:focus-visible, .gd-chip:focus-visible,
.gd-pigulki > button:focus-visible, .gd-filtry button:focus-visible {
  outline: 2px solid var(--gd-brand); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gd-wiersz, .gd-pigulki > button, .gd-pigulka, .gd-filtry button, .gd-akcja,
  .gd-przelacznik i, .gd-przelacznik i::after, .app-layout .start-tile,
  .app-layout .aut-karta, .app-layout button.primary, .app-layout button.zapisz,
  .app-layout .oferta, .gd-akcja--cicha {
    transition: none !important; animation: none !important;
  }
  .app-layout .start-tile:hover, .app-layout .aut-karta:hover,
  .app-layout button.primary:hover, .app-layout button.zapisz:hover { transform: none !important; }
  /* Ukryta akcja przestaje być ukryta — miganie na hoverze bez animacji
     jest gorsze niż stale widoczny przycisk. */
  .gd-wiersz .gd-akcja--cicha { opacity: 1 !important; }
  .gd-pigulki, .app-layout .gd-podsekcje { scroll-behavior: auto; }
}

@media (max-width: 767px) {
  /* Cel dotykowy: 44 px dla akcji stojącej samotnie w wierszu, 40 px dla
     pigułek w pasku (są szerokie, więc trafia się w nie łatwiej). */
  .gd-akcja { min-height: 44px; padding: 0 14px; }
  .gd-filtry button, .app-layout .filtry-akt button,
  .gd-pigulki > button, .app-layout .gd-podsekcje button,
  .app-layout .okresy button, .app-layout #akt-zakres button { min-height: 40px; }
  /* Nagłówek widoku nie może urosnąć w trzy rzędy: chipy drugorzędne
     znikają, zostaje ten jeden, który mówi, czy jest dobrze. */
  .gd-chip--drugorzedny { display: none; }
  .gd-wiersz { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; padding: 10px 2px; }
  .gd-wiersz-prawo { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .gd-wiersz-czas { text-align: left; }
  /* Akcja w wierszu zawsze widoczna — na telefonie nie ma hoveru. */
  .gd-wiersz .gd-akcja--cicha { opacity: 1; }
  .gd-pusto { padding: 22px 12px; }
  .app-layout .page-head { min-height: 52px; }
  /* Cokolwiek przyklejonego do dołu musi minąć dolny pasek nawigacji. */
  .gd-pasek-dolny { position: sticky; bottom: calc(8px + var(--gd-navbar-h)); z-index: 30; }
}

/* Pasek pigułek: na wąskim ekranie zjeżdża poza kadr, więc dostaje
   wygaszenie krawędzi, żeby było widać, że jest co przewijać.
   Nie stosujemy go na .gd-podsekcje — tam pasek jest przyklejony i musi
   mieć NIEPRZEZROCZYSTE tło, inaczej treść przeświecałaby pod spodem. */
.gd-pigulki--gasnacy {
  -webkit-mask-image: linear-gradient(90deg, #0000 0, #000 12px, #000 calc(100% - 12px), #0000 100%);
  mask-image: linear-gradient(90deg, #0000 0, #000 12px, #000 calc(100% - 12px), #0000 100%);
}

/* ── §15. DROBIAZGI, KTÓRE PSUŁY WRAŻENIE GĘSTOŚCI ───────────────────────── */
/* Pola formularzy w kartach — 38 px zamiast 40+, ale na telefonie 48 px
   (tam reguła z index.html ustawia 16 px pisma, żeby iOS nie przybliżał). */
.app-layout input[type="text"], .app-layout input[type="number"], .app-layout textarea {
  padding: 8px 10px; border-radius: var(--gd-radius-field); border-color: var(--gd-border);
}
.app-layout input[type="text"]:focus, .app-layout input[type="number"]:focus,
.app-layout textarea:focus { border-color: var(--gd-border-strong); }
.app-layout .przelaczniki { gap: 10px 18px; }
.app-layout .przelaczniki label { font-size: var(--gd-t-tekst); line-height: 1.45; }
/* Lejek i słupki strat: niższe wiersze, ta sama czytelność. */
.app-layout .lejek-wiersz { padding: 5px 0; font-size: var(--gd-t-drobny); }
.app-layout .lejek-pasek { height: 14px; }
.app-layout .straty-wiersz { font-size: var(--gd-t-drobny); }
.app-layout .straty-pasek { height: 12px; }
/* Karta automatyzacji to element klikalny — niech to widać kursorem. */
.app-layout .aut-karta { padding: 12px 14px; margin-bottom: 8px; }
.app-layout .aut-karta h2 { margin-bottom: 4px; }

/* Sidebar rysuje ikony z stroke-width 2 — komplet v2 jest kreślony 1,7,
   inaczej ikona w nawigacji byłaby grubsza niż ta sama ikona w wierszu. */
.app-layout .gd-nav-item svg { stroke-width: 1.7; width: 18px; height: 18px; }
.gd-os-wpis { align-items: start; }


/* ── §16. DOLNY PASEK NA TELEFONIE PRZY DZIESIĘCIU ZAKŁADKACH ────────────
 * Pomiar na 375 px: pasek potrzebuje 358 px, a ma 305 px — „Rozmowy"
 * wypadają poza ekran, a pasek nie ma widocznego suwaka, więc dla
 * użytkownika ta zakładka po prostu NIE ISTNIEJE. Winne jest słowo
 * „Wyloguj" (ok. 62 px). Zwijamy je do ikony: 10 × 30 + odstępy + wyjście
 * = 372 px, czyli mieści się na najwęższym telefonie w firmie.
 * Docelowo (wymaga JS): sześć najczęstszych zakładek + „Więcej".
 * -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .app-layout .gd-nav-item { min-width: 30px; }
  .app-layout .gd-sidebar-logout {
    min-width: 30px; width: 30px; padding: 6px 0; font-size: 0; line-height: 0;
    display: grid; place-items: center; color: var(--gd-err);
  }
  .app-layout .gd-sidebar-logout::before {
    content: ""; display: block; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--ik-wyjscie) center / contain no-repeat;
    mask: var(--ik-wyjscie) center / contain no-repeat;
  }
  .app-layout .gd-sidebar-foot { padding: 6px 2px; }
  /* Licznik alertów przy 30 px zakładce wchodził na sąsiednią ikonę. */
  .app-layout .gd-nav-licznik { transform: translateX(105%); top: 0; }
}

/* ── §17. REGUŁY: LISTA PO LEWEJ, JEDNA REGUŁA PO PRAWEJ ───────────────────
   Zarzut właściciela brzmiał „dalej długo ciągnąca się strona": lista pięciu
   reguł i cztery edytory (14 kart) leżały jedna pod drugą, a otwarcie reguły
   chowało listę i gubiło kontekst pozostałych. Teraz lista jest szyną po
   lewej, a wybrana reguła zajmuje prawą kolumnę — wzorzec z DigiBOS.
   Siatkę włącza WYŁĄCZNIE aktywna podsekcja „reguly", więc Stopki, Ochrona
   i Integracje zachowują układ jednokolumnowy. */
#widok-automatyzacje[data-sekcja-aktywna="reguly"] .page-body > .inner {
  display: grid; grid-template-columns: 296px minmax(0, 1fr);
  align-items: start; column-gap: 20px;
}
#widok-automatyzacje[data-sekcja-aktywna="reguly"] .gd-podsekcje { grid-column: 1 / -1; }
#widok-automatyzacje[data-sekcja-aktywna="reguly"] #lista-automatyzacji {
  grid-column: 1; grid-row: 2; position: sticky; top: 56px;
  display: flex; flex-direction: column; gap: 6px;
}
/* Wszystkie edytory i zachęta dzielą JEDNĄ komórkę — widoczny jest zawsze
   dokładnie jeden, więc nakładanie się nie grozi. */
#widok-automatyzacje[data-sekcja-aktywna="reguly"] #reguly-pusto,
#widok-automatyzacje[data-sekcja-aktywna="reguly"] #edytor,
#widok-automatyzacje[data-sekcja-aktywna="reguly"] #edytor-statusy,
#widok-automatyzacje[data-sekcja-aktywna="reguly"] #edytor-przelew,
#widok-automatyzacje[data-sekcja-aktywna="reguly"] #edytor-sekwencja { grid-column: 2; grid-row: 2; }

/* Karta reguły w szynie: z pełnej karty robi się pozycja listy. */
#widok-automatyzacje[data-sekcja-aktywna="reguly"] .aut-karta {
  margin: 0; padding: 11px 13px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--gd-border); background: var(--gd-card);
}
#widok-automatyzacje[data-sekcja-aktywna="reguly"] .aut-karta h2 {
  font-size: 13.5px; margin: 0 0 3px; line-height: 1.3;
}
#widok-automatyzacje[data-sekcja-aktywna="reguly"] .aut-karta .info {
  font-size: 11.5px; line-height: 1.45; margin: 0 0 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#widok-automatyzacje[data-sekcja-aktywna="reguly"] .aut-karta.aktywna {
  border-color: var(--gd-brand); background: var(--gd-brand-soft);
}
/* W układzie dwukolumnowym powrót „‹ wszystkie automatyzacje" nie ma sensu —
   lista stoi obok. Poniżej progu kolumny się składają i link wraca. */
#widok-automatyzacje[data-sekcja-aktywna="reguly"] #wroc,
#widok-automatyzacje[data-sekcja-aktywna="reguly"] #st-wroc,
#widok-automatyzacje[data-sekcja-aktywna="reguly"] #pz-wroc,
#widok-automatyzacje[data-sekcja-aktywna="reguly"] #sek-wroc { display: none; }

@media (max-width: 1100px) {
  #widok-automatyzacje[data-sekcja-aktywna="reguly"] .page-body > .inner {
    display: block;
  }
  #widok-automatyzacje[data-sekcja-aktywna="reguly"] #lista-automatyzacji { position: static; }
  /* Na wąskim ekranie kolumny się składają, więc lista i edytor leżałyby
     jedna pod drugą — czyli dokładnie ta taśma, którą likwidujemy. Gdy
     reguła jest wybrana (klasa `aktywna` z app.js), lista schodzi z drogi,
     a powrót zapewnia link „‹ wszystkie automatyzacje". */
  #widok-automatyzacje[data-sekcja-aktywna="reguly"] #lista-automatyzacji:has(.aut-karta.aktywna) { display: none; }
  #widok-automatyzacje[data-sekcja-aktywna="reguly"] #reguly-pusto { display: none !important; }
  #widok-automatyzacje[data-sekcja-aktywna="reguly"] #wroc,
  #widok-automatyzacje[data-sekcja-aktywna="reguly"] #st-wroc,
  #widok-automatyzacje[data-sekcja-aktywna="reguly"] #pz-wroc,
  #widok-automatyzacje[data-sekcja-aktywna="reguly"] #sek-wroc { display: inline; }
}

/* ── §18 SPRAWY: kolejka pracy i karta sprawy (15.09.2026) ─────────────────
   Ekran roboczy, nie pulpit: gęsto, bez ozdób, z jedną liczbą prowadzącą oko —
   dni bez ruchu. Master–detail jak w regułach (§17): kolejka po lewej nie jest
   potrzebna, bo tabela ma osiem kolumn, więc karta ląduje POD listą i sama
   przewija do siebie po kliknięciu wiersza. */
.spr-filtry { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px }
.spr-filtry input[type="search"] { flex:1 1 320px; min-width:220px }
.spr-checkbox { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--gd-text-muted); white-space:nowrap }
.spr-checkbox input { margin:0 }

.spr-kubelki { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:4px }
.spr-kubelek { display:flex; flex-direction:column; gap:2px; padding:9px 14px; border-radius:8px;
  border:1px solid var(--gd-border); background:var(--gd-surface); min-width:118px }
.spr-kubelek b { font-size:20px; line-height:1.1; font-variant-numeric:tabular-nums }
.spr-kubelek span { font-size:11.5px; color:var(--gd-text-muted) }
.spr-kubelek.zle { border-color:#E3000F; background:var(--gd-hue-zle, #FDF0F1) }
.spr-kubelek.zle b { color:#E3000F }
.spr-kubelek.uwaga { border-color:#B47A00 }
.spr-kubelek.uwaga b { color:#B47A00 }

#spr-tabela tbody tr.spr-wiersz { cursor:pointer }
#spr-tabela tbody tr.spr-wiersz:hover { background:var(--gd-surface-hover, rgba(0,0,0,.03)) }
#spr-tabela tbody tr.spr-wiersz.aktywna { background:var(--gd-surface-hover, rgba(0,0,0,.05));
  box-shadow: inset 3px 0 0 #E3000F }
#spr-tabela td.l, #spr-tabela th.l { text-align:right; font-variant-numeric:tabular-nums }

.spr-karta-head { display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between;
  align-items:flex-start; padding-bottom:14px; border-bottom:1px solid var(--gd-border); margin-bottom:14px }
.spr-karta-tytul { font-size:19px; font-weight:600; letter-spacing:-.01em }
.spr-kwoty { display:flex; gap:1px; background:var(--gd-border); border:1px solid var(--gd-border);
  border-radius:8px; overflow:hidden }
.spr-kwoty > div { background:var(--gd-surface); padding:8px 14px; min-width:104px }
.spr-kwoty span { display:block; font-size:11px; color:var(--gd-text-muted); margin-bottom:2px }
.spr-kwoty b { font-size:15px; font-variant-numeric:tabular-nums }
.spr-kwoty .wyroz b { color:#E3000F }

.spr-kolumny { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:26px }
@media (max-width:900px) { .spr-kolumny { grid-template-columns:1fr } }
.spr-kolumny h4 { font-size:12px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--gd-text-muted); margin:18px 0 8px; font-weight:600 }
.spr-kolumny h4:first-child { margin-top:0 }
.spr-pole { display:flex; justify-content:space-between; gap:14px; padding:5px 0;
  border-bottom:1px dashed var(--gd-border); font-size:14px }
.spr-pole span { color:var(--gd-text-muted); flex:0 0 auto }
.spr-pole b { font-weight:500; text-align:right; word-break:break-word }

.spr-dok > div { padding:6px 0; border-bottom:1px solid var(--gd-border); font-size:14px;
  display:flex; gap:9px; flex-wrap:wrap; align-items:baseline }
.spr-dok .info { font-size:12px }

/* Oś czasu z szyną — ten sam wzorzec, co w Centrum Aktywności (§11). */
.spr-os { position:relative; padding-left:15px; max-height:460px; overflow-y:auto }
.spr-os::before { content:''; position:absolute; left:4px; top:4px; bottom:4px; width:2px;
  background:var(--gd-border) }
.spr-os-wpis { position:relative; padding:7px 0 7px 4px; font-size:14px }
.spr-os-wpis::before { content:''; position:absolute; left:-15px; top:13px; width:8px; height:8px;
  border-radius:50%; background:var(--gd-border) }
.spr-os-wpis .info { font-size:12px }
.spr-os-tresc { color:var(--gd-text-muted); font-size:13px; margin-top:2px; white-space:pre-wrap;
  word-break:break-word }

/* ── ROZDZIELNIK: jedno wejście, dwa narzędzia ───────────────────────────── */
.rozdzielnik { width: min(560px, 92vw); margin: 10vh auto 0; text-align: center }
.rozdzielnik h1 { margin: 0 0 4px; font-size: 20px }
.rozdzielnik .kto-rozdz { margin: 0 0 20px; color: var(--gd-text-muted); font-size: 12.5px }
.rozdzielnik .kafle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
@media (max-width: 520px) { .rozdzielnik .kafle { grid-template-columns: 1fr } }
.rozdzielnik .kafel {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 16px 18px;
  border: 1px solid var(--gd-border); border-radius: 12px;
  background: var(--gd-surface); cursor: pointer;
  font-family: inherit; color: var(--gd-text);
  transition: border-color .12s, transform .12s;
}
.rozdzielnik .kafel:hover { border-color: var(--gd-brand); transform: translateY(-1px) }
.rozdzielnik .kafel i {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; background: var(--gd-surface-2);
}
.rozdzielnik .kafel svg {
  width: 20px; height: 20px; fill: none;
  stroke: var(--gd-brand-ink, var(--gd-brand)); stroke-width: 1.8; stroke-linecap: round;
}
.rozdzielnik .kafel b { font-size: 15px }
.rozdzielnik .kafel span { font-size: 11.5px; color: var(--gd-text-muted); line-height: 1.4 }
.rozdzielnik .rozdz-stopka { margin: 18px 0 0; font-size: 11px; color: var(--gd-text-muted) }