/* ============================================================================
   CONNECT DESIGN SYSTEM 2.0  —  "Aurora"
   Connect by PartnerIT · wrzesień 2026
   ----------------------------------------------------------------------------
   Warstwa nakładkowa (drop-in). Ładować PO public/css/style.css.
   Redefiniuje istniejące nazwy tokenów (--primary, --bg, --card, --border…),
   więc legacy CSS dziedziczy odświeżony wygląd bez zmian w markupie,
   i dokłada nowe tokeny (--brand-*, --sp-*, --fs-*, --r-*, --elev-*)
   oraz komponenty z prefiksem `ds-`.

   Spis sekcji:
     01  Tokeny — marka i skale kolorów
     02  Tokeny — role semantyczne (jasny)
     03  Tokeny — tryb ciemny
     04  Tokeny — przestrzeń, promień, typografia, cień, ruch, warstwy
     05  Reset i baza
     06  Typografia
     07  Layout: powłoka aplikacji, kontenery, siatki
     08  Nawigacja: górny pasek, szyna boczna, pasek mobilny
     09  Przyciski
     10  Pola formularza
     11  Karty i panele
     12  Odznaki, chipy, statusy
     13  Tabele i listy mobilne
     14  Kafle aplikacji i KPI
     15  Modale, arkusze, menu
     16  Toast, baner, pusty stan
     17  Skeleton, spinner, progres
     18  Awatary, oś czasu, dymki czatu
     19  Narzędzia (utilities)
     20  Dostępność, ruch, druk
   ========================================================================== */

/* ══ 01 · TOKENY — MARKA I SKALE KOLORÓW ═══════════════════════════════════
   System ma DWA zakresy marki (zasada przyjęta już przy brandingu maili):

   • ZAKRES SYSTEMU (--connect-*) — fiolet ze znaku Connect. Obowiązuje na
     powierzchniach platformy: logowanie, superadmin, e-maile, ekrany prawne,
     instalacja PWA, loader. Organizacja go NIE zmienia.
   • ZAKRES ORGANIZACJI (--brand-*) — kolor wybrany w superadminie
     (primary_color / accent_color). Obowiązuje w obszarze roboczym:
     konto użytkownika, panel administratora, czat.

   Dziś oba są rozjechane: znak Connect jest fioletowy (#7B4BBE), a domyślny
   --primary niebieski (#2563eb) — na loaderze fioletowy spinner sąsiaduje
   z niebieskim tytułem. DS 2.0 to porządkuje.
   ========================================================================= */

:root {
  /* ── Connect — fiolet systemowy (skala 50–900) ───────────────────────── */
  --connect-50:  #f6f2fd;
  --connect-100: #ece2fa;
  --connect-200: #dbc9f4;
  --connect-300: #c2a5ea;
  --connect-400: #a37cdb;
  --connect-500: #7b4bbe;   /* znak Connect */
  --connect-600: #6739a6;
  --connect-700: #542d88;
  --connect-800: #452470;
  --connect-900: #2f1850;
  --connect-rgb: 123, 75, 190;

  /* ── Marka organizacji — skala domyślna (nadpisywana per-tenant) ──────── */
  --brand-50:  #eff5ff;
  --brand-100: #dbe8fe;
  --brand-200: #bfd7fe;
  --brand-300: #93bbfd;
  --brand-400: #6096fa;
  --brand-500: #2563eb;
  --brand-600: #1d4ed8;
  --brand-700: #1a3fb0;
  --brand-800: #1b378c;
  --brand-900: #1b3172;
  --brand-rgb: 37, 99, 235;

  /* Role marki — jedyne, których używają komponenty.
     branding.php nadpisuje --brand-500/-600 i --brand-rgb; reszta podąża. */
  --brand:        var(--brand-500);
  --brand-hover:  var(--brand-600);
  --brand-active: var(--brand-700);
  --brand-soft:   rgba(var(--brand-rgb), .10);
  --brand-softer: rgba(var(--brand-rgb), .06);
  --brand-ring:   rgba(var(--brand-rgb), .28);
  --brand-on:     #ffffff;

  /* Aliasy zgodności — legacy CSS (style.css, konto.php, adminpanel-*.js) */
  --primary:       var(--brand);
  --primary-hover: var(--brand-hover);
  --primary-light: var(--brand-soft);
  --primary-ring:  var(--brand-ring);
  --primary-rgb:   var(--brand-rgb);

  /* ── Kolory funkcjonalne ─────────────────────────────────────────────── */
  --success:      #0f9d6e;  --success-strong: #067a55;
  --success-bg:   #e9f9f2;  --success-border: #b6ebd6;
  --warning:      #b7791f;  --warning-strong: #8f5d10;
  --warning-bg:   #fdf6e3;  --warning-border: #f2ddaa;
  --danger:       #d92d3f;  --danger-strong:  #b21f30;
  --danger-bg:    #fdeef0;  --danger-border:  #f7c9cf;
  --info:         #0b7fc4;  --info-strong:    #0a659c;
  --info-bg:      #eaf5fd;  --info-border:    #b7dcf5;
  --neutral-bg:   #f1f3f6;  --neutral-border: #dde2e9;

  /* ── Kolory tożsamości usług Connect ─────────────────────────────────── */
  --svc-helpdesk:  #2563eb;
  --svc-chat:      #0ea472;
  --svc-assets:    #7c3aed;
  --svc-rooms:     #db6e1f;
  --svc-knowledge: #0891b2;
  --svc-wifi:      #d946a0;
  --svc-points:    #ca8a04;
  --svc-files:     #475569;
  --svc-radio:     #e11d48;
}

/* ══ 02 · TOKENY — ROLE SEMANTYCZNE (JASNY) ═══════════════════════════════ */

:root {
  --bg:            #f5f7fa;   /* płótno strony             */
  --bg-subtle:     #eceff4;   /* wgłębienie, szyna boczna  */
  --surface:       #ffffff;   /* karta, modal, panel       */
  --surface-2:     #f4f6f9;   /* nagłówek tabeli, stopka   */
  --surface-3:     #e8ecf1;   /* hover na powierzchni 2    */
  --surface-inv:   #12151b;   /* tooltip, toast            */

  --border:        #e2e7ee;   /* domyślna kreska           */
  --border-soft:   #eef1f5;   /* separator wewnątrz karty  */
  --border-strong: #c6ced9;   /* obrys pola formularza     */

  --text:          #0f1319;   /* treść główna              */
  --text-2:        #545e6d;   /* opis, etykieta            */
  --text-3:        #7b8494;   /* placeholder, metadane     */
  --text-inv:      #ffffff;

  --overlay:       rgba(15, 19, 25, .48);
  --scrim:         rgba(15, 19, 25, .06);

  /* Aliasy zgodności */
  --card:     var(--surface);
  --field-bg: var(--surface);
  --muted:    var(--text-2);

  /* Czat — dziedziczy kolor organizacji */
  --chat-mine-bg:  rgba(var(--brand-rgb), .12);
  --chat-other-bg: var(--surface);
  --chat-media-bg: var(--surface-2);

  color-scheme: light;
}

/* ══ 03 · TOKENY — TRYB CIEMNY ════════════════════════════════════════════
   Trzy równoważne wyzwalacze, żeby objąć cały system naraz:
     • body.dark-mode        — istniejący przełącznik (konto.php, adminpanel)
     • [data-theme="dark"]   — nowy, deklaratywny (superadmin, ekrany publiczne)
     • prefers-color-scheme  — gdy użytkownik nic nie wybrał
   Superadmin nie ma dziś ANI JEDNEJ reguły dark-mode — po podpięciu tej
   warstwy dostaje tryb ciemny bez zmian w swoim kodzie.
   ======================================================================== */

body.dark-mode,
[data-theme="dark"] {
  --bg:            #0c0f14;
  --bg-subtle:     #090b0f;
  --surface:       #151a22;
  --surface-2:     #1d232d;
  --surface-3:     #262d39;
  --surface-inv:   #e8ecf2;

  --border:        #2b3341;
  --border-soft:   #212836;
  --border-strong: #3b4557;

  --text:          #e9edf3;
  --text-2:        #a4aebe;
  --text-3:        #6f7889;
  --text-inv:      #0f1319;

  --overlay:       rgba(0, 0, 0, .66);
  --scrim:         rgba(255, 255, 255, .05);

  --brand-soft:   rgba(var(--brand-rgb), .18);
  --brand-softer: rgba(var(--brand-rgb), .10);
  --brand-ring:   rgba(var(--brand-rgb), .40);

  --success:      #34c793;  --success-bg: #0d2a20;  --success-border: #1c4d3a;
  --warning:      #e0a63a;  --warning-bg: #2c2410;  --warning-border: #524219;
  --danger:       #f2707e;  --danger-bg:  #2e1418;  --danger-border:  #5c242c;
  --info:         #4bb3f0;  --info-bg:    #0d2233;  --info-border:    #17456a;
  --neutral-bg:   #1d232d;  --neutral-border: #313a48;

  --elev-1: 0 1px 2px rgba(0,0,0,.36), 0 1px 3px rgba(0,0,0,.28);
  --elev-2: 0 2px 6px rgba(0,0,0,.40), 0 6px 14px rgba(0,0,0,.32);
  --elev-3: 0 4px 10px rgba(0,0,0,.44), 0 12px 26px rgba(0,0,0,.38);
  --elev-4: 0 8px 20px rgba(0,0,0,.50), 0 24px 52px rgba(0,0,0,.44);
  --elev-5: 0 16px 36px rgba(0,0,0,.56), 0 40px 88px rgba(0,0,0,.52);

  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-ring);

  --chat-mine-bg:  rgba(var(--brand-rgb), .24);
  --chat-other-bg: #1d232d;
  --chat-media-bg: #262d39;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.theme-light) {
    --bg:            #0c0f14;
    --bg-subtle:     #090b0f;
    --surface:       #151a22;
    --surface-2:     #1d232d;
    --surface-3:     #262d39;
    --surface-inv:   #e8ecf2;
    --border:        #2b3341;
    --border-soft:   #212836;
    --border-strong: #3b4557;
    --text:          #e9edf3;
    --text-2:        #a4aebe;
    --text-3:        #6f7889;
    --text-inv:      #0f1319;
    --overlay:       rgba(0, 0, 0, .66);
    --scrim:         rgba(255, 255, 255, .05);
    --brand-soft:    rgba(var(--brand-rgb), .18);
    --brand-softer:  rgba(var(--brand-rgb), .10);
    --brand-ring:    rgba(var(--brand-rgb), .40);
    --success:  #34c793;  --success-bg: #0d2a20;  --success-border: #1c4d3a;
    --warning:  #e0a63a;  --warning-bg: #2c2410;  --warning-border: #524219;
    --danger:   #f2707e;  --danger-bg:  #2e1418;  --danger-border:  #5c242c;
    --info:     #4bb3f0;  --info-bg:    #0d2233;  --info-border:    #17456a;
    --neutral-bg: #1d232d; --neutral-border: #313a48;
    --chat-mine-bg:  rgba(var(--brand-rgb), .24);
    --chat-other-bg: #1d232d;
    --chat-media-bg: #262d39;
    color-scheme: dark;
  }
}

/* ══ 04 · TOKENY — PRZESTRZEŃ, PROMIEŃ, TYPOGRAFIA, CIEŃ, RUCH ════════════ */

:root {
  /* Przestrzeń — krok 4 px. Jedyne dozwolone wartości odstępów. */
  --sp-0:  0;      --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;
  --sp-4:  16px;   --sp-5:  20px;  --sp-6:  24px;  --sp-7:  32px;
  --sp-8:  40px;   --sp-9:  48px;  --sp-10: 64px;  --sp-11: 80px;

  /* Promień — 6 kroków zamiast 16 przypadkowych wartości w kodzie */
  --r-xs:   6px;    /* chip, znacznik           */
  --r-sm:   9px;    /* mały przycisk, małe pole */
  --r-md:   12px;   /* przycisk, pole, kafel    */
  --r-lg:   16px;   /* karta, panel             */
  --r-xl:   22px;   /* modal, arkusz            */
  --r-2xl:  28px;   /* powłoka na desktopie     */
  --r-full: 999px;
  --radius-sm: var(--r-sm);  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);  --radius-full: var(--r-full);

  /* Typografia — skala płynna, jedno źródło rozmiarów */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono",
               Consolas, "Liberation Mono", monospace;

  --fs-2xs:  clamp(.625rem,  .600rem + .10vw, .6875rem);  /* 10 → 11 */
  --fs-xs:   clamp(.6875rem, .660rem + .12vw, .7500rem);  /* 11 → 12 */
  --fs-sm:   clamp(.7500rem, .720rem + .15vw, .8125rem);  /* 12 → 13 */
  --fs-base: clamp(.8750rem, .850rem + .15vw, .9375rem);  /* 14 → 15 */
  --fs-md:   clamp(.9375rem, .900rem + .20vw, 1.0000rem); /* 15 → 16 */
  --fs-lg:   clamp(1.0625rem,1.010rem + .28vw, 1.1875rem);/* 17 → 19 */
  --fs-xl:   clamp(1.2500rem,1.150rem + .50vw, 1.5000rem);/* 20 → 24 */
  --fs-2xl:  clamp(1.5000rem,1.320rem + .90vw, 2.0000rem);/* 24 → 32 */
  --fs-3xl:  clamp(1.8750rem,1.550rem + 1.6vw, 2.7500rem);/* 30 → 44 */

  --fw-normal: 400;  --fw-medium: 500;  --fw-semi: 600;
  --fw-bold:   700;  --fw-black:  800;

  --lh-tight: 1.2;   --lh-snug: 1.35;  --lh-base: 1.55;  --lh-loose: 1.7;
  --leading:  var(--lh-base);
  --tracking-tight: -.015em;
  --tracking-wide:   .04em;
  --tracking-caps:   .07em;

  /* Cień — sześć stopni */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --elev-2: 0 2px 4px rgba(16,24,40,.05), 0 4px 10px rgba(16,24,40,.05);
  --elev-3: 0 4px 8px rgba(16,24,40,.05), 0 10px 22px rgba(16,24,40,.07);
  --elev-4: 0 8px 16px rgba(16,24,40,.06), 0 20px 44px rgba(16,24,40,.10);
  --elev-5: 0 16px 32px rgba(16,24,40,.10), 0 36px 80px rgba(16,24,40,.14);
  --elev-brand: 0 6px 18px rgba(var(--brand-rgb), .26);
  --shadow-sm: var(--elev-1);
  --shadow-md: var(--elev-2);
  --shadow-lg: var(--elev-4);

  /* Ruch */
  --dur-1: 110ms;  --dur-2: 190ms;  --dur-3: 300ms;  --dur-4: 460ms;
  --ease-out:    cubic-bezier(.22, .8, .3, 1);
  --ease-in-out: cubic-bezier(.5, 0, .3, 1);
  --ease-spring: cubic-bezier(.32, 1.3, .5, 1);
  --ease: var(--dur-2) var(--ease-out);

  /* Warstwy — jedna skala na cały system */
  --z-base: 0;      --z-sticky: 100;  --z-dropdown: 300;
  --z-overlay: 500; --z-modal: 600;   --z-toast: 800;
  --z-tooltip: 900; --z-loader: 1000;

  /* Layout */
  --container:        1280px;
  --container-narrow: 780px;
  --container-wide:   1600px;
  --rail-w:           268px;
  --rail-w-collapsed: 72px;
  --header-h:         60px;
  --tabbar-h:         62px;
  --tap:              44px;   /* minimalny cel dotykowy (WCAG 2.5.8) */

  /* Fokus — jeden pierścień w całym systemie */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-ring);

  /* Bezpieczne marginesy urządzenia */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* Punkty łamania — cały DS używa wyłącznie tych pięciu:
     xs   480px  telefon w pionie
     sm   640px  duży telefon
     md   768px  tablet w pionie   ← granica mobile / desktop
     lg  1024px  tablet poziomo, mały laptop
     xl  1280px  desktop                                                    */

/* ══ 05 · RESET I BAZA ════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overscroll-behavior-y: none;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

::selection { background: var(--brand-soft); color: var(--text); }

/* Pasek przewijania — dyskretny, spójny w obu motywach */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

/* Jeden pierścień fokusu na cały system.
   Dziś focus-visible występuje w całym repo 4 razy — to główny dług dostępności. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"],
       [role="tab"], [role="menuitem"], [role="option"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
  position: relative;
  z-index: 1;
}

/* Klasa dla treści widocznej tylko dla czytników ekranu */
.ds-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ds-skip-link {
  position: absolute; top: var(--sp-2); left: var(--sp-2);
  transform: translateY(-200%);
  z-index: var(--z-loader);
  background: var(--surface); color: var(--text);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--elev-3); font-weight: var(--fw-semi);
  transition: transform var(--dur-2) var(--ease-out);
}
.ds-skip-link:focus { transform: translateY(0); }

/* ══ 06 · TYPOGRAFIA ══════════════════════════════════════════════════════ */

.ds-display { font-size: var(--fs-3xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; }
.ds-h1      { font-size: var(--fs-2xl); font-weight: var(--fw-bold);  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; }
.ds-h2      { font-size: var(--fs-xl);  font-weight: var(--fw-bold);  line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); margin: 0; }
.ds-h3      { font-size: var(--fs-lg);  font-weight: var(--fw-semi);  line-height: var(--lh-snug);  margin: 0; }
.ds-body    { font-size: var(--fs-base);line-height: var(--lh-base);  margin: 0; }
.ds-body-lg { font-size: var(--fs-md);  line-height: var(--lh-base);  margin: 0; }
.ds-caption { font-size: var(--fs-sm);  color: var(--text-2); line-height: var(--lh-snug); margin: 0; }
.ds-meta    { font-size: var(--fs-xs);  color: var(--text-3); line-height: var(--lh-snug); margin: 0; }
.ds-overline{
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-3); margin: 0;
}
.ds-mono    { font-family: var(--font-mono); font-size: .92em; font-variant-numeric: tabular-nums; }
.ds-num     { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Ucinanie tekstu — bez ręcznych trójlinijkowców w każdym pliku */
.ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ds-clamp-2, .ds-clamp-3 {
  display: -webkit-box; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.ds-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.ds-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* ══ 07 · LAYOUT ══════════════════════════════════════════════════════════ */

.ds-container        { width: 100%; max-width: var(--container);        margin-inline: auto; padding-inline: max(var(--sp-4), var(--safe-l)) max(var(--sp-4), var(--safe-r)); }
.ds-container-narrow { max-width: var(--container-narrow); }
.ds-container-wide   { max-width: var(--container-wide); }
@media (min-width: 768px) { .ds-container { padding-inline: var(--sp-6); } }

/* Powłoka aplikacji: pasek górny + szyna boczna + treść + pasek mobilny.
   Mobile: jedna kolumna, szyna schowana, dolny pasek widoczny.
   ≥1024px: szyna po lewej, dolny pasek zniknięty. */
.ds-shell {
  display: grid;
  grid-template-areas: "header" "main";
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
}
@media (min-width: 1024px) {
  .ds-shell {
    grid-template-areas: "header header" "rail main";
    grid-template-columns: var(--rail-w) 1fr;
    grid-template-rows: auto 1fr;
  }
  .ds-shell.is-collapsed { grid-template-columns: var(--rail-w-collapsed) 1fr; }
}
.ds-shell > .ds-appbar { grid-area: header; }
.ds-shell > .ds-rail   { grid-area: rail; }
.ds-shell > .ds-main   { grid-area: main; min-width: 0; }

.ds-main {
  padding-block: var(--sp-5) calc(var(--tabbar-h) + var(--safe-b) + var(--sp-6));
}
@media (min-width: 768px) { .ds-main { padding-block: var(--sp-6) var(--sp-9); } }

/* Siatki responsywne — auto-fit, bez ręcznych breakpointów per widok */
.ds-grid       { display: grid; gap: var(--sp-4); }
.ds-grid-auto  { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.ds-grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.ds-grid-kpi   { grid-template-columns: repeat(auto-fit,  minmax(min(150px, 100%), 1fr)); }
.ds-grid-2     { grid-template-columns: 1fr; }
.ds-grid-3     { grid-template-columns: 1fr; }
@media (min-width: 768px)  { .ds-grid-2 { grid-template-columns: 1fr 1fr; } .ds-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ds-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Układ „lista + szczegóły" (czat, zgłoszenia, baza wiedzy).
   Mobile: jedna kolumna, przełączana klasą is-detail. */
.ds-split { display: grid; grid-template-columns: 1fr; min-height: 0; }
.ds-split > .ds-split-detail { display: none; }
.ds-split.is-detail > .ds-split-list   { display: none; }
.ds-split.is-detail > .ds-split-detail { display: flex; }
@media (min-width: 1024px) {
  .ds-split { grid-template-columns: minmax(300px, 380px) 1fr; gap: var(--sp-4); }
  .ds-split > .ds-split-list,
  .ds-split.is-detail > .ds-split-list   { display: block; }
  .ds-split > .ds-split-detail,
  .ds-split.is-detail > .ds-split-detail { display: flex; }
}

.ds-stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.ds-row     { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ds-row-tight { gap: var(--sp-2); }
.ds-spacer  { flex: 1 1 auto; min-width: 0; }

/* Nagłówek widoku — tytuł, opis i akcje; zawija się na telefonie */
.ds-pagehead {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
}
.ds-pagehead-text { flex: 1 1 260px; min-width: 0; }
.ds-pagehead-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin: 0; }
.ds-pagehead-sub   { font-size: var(--fs-sm); color: var(--text-2); margin: var(--sp-1) 0 0; }
.ds-pagehead-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 640px) {
  .ds-pagehead-actions { width: 100%; }
  .ds-pagehead-actions > .ds-btn { flex: 1 1 auto; }
}

/* ══ 08 · NAWIGACJA ═══════════════════════════════════════════════════════ */

/* Górny pasek — sticky, półprzezroczysty z rozmyciem */
.ds-appbar, .header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--header-h);
  padding: var(--sp-2) max(var(--sp-4), var(--safe-l)) var(--sp-2) max(var(--sp-4), var(--safe-r));
  padding-top: calc(var(--sp-2) + var(--safe-t));
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) {
  .ds-appbar, .header { background: var(--surface); }
}

.ds-brand, .brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; text-decoration: none; color: inherit; }
.ds-brand-mark { width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0; }
.ds-brand img, .brand img { height: 32px; width: auto; }
.ds-brand-title, .brand-title {
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); color: var(--text);
  line-height: 1.15; margin: 0;
}
.ds-brand-sub { font-size: var(--fs-2xs); color: var(--text-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--fw-semi); }

/* Poziome zakładki w pasku (desktop) */
.ds-topnav { display: none; align-items: center; gap: var(--sp-1); margin-inline: auto; }
@media (min-width: 768px) { .ds-topnav { display: flex; } }
.ds-navitem, .nav-item {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 38px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--text-2); background: transparent;
  border: 1px solid transparent;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
  cursor: pointer; white-space: nowrap;
}
.ds-navitem svg, .nav-item svg { width: 18px; height: 18px; }
.ds-navitem:hover, .nav-item:hover { color: var(--text); background: var(--surface-2); }
.ds-navitem.is-active, .nav-item.active {
  color: var(--brand); background: var(--brand-soft);
}
.ds-navitem-badge, .nav-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--danger); color: #fff;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* Szyna boczna (desktop) — grupowana nawigacja aplikacji */
.ds-rail {
  display: none;
  border-right: 1px solid var(--border);
  background: var(--bg-subtle);
  padding: var(--sp-4) var(--sp-3) var(--sp-6);
  overflow-y: auto;
  position: sticky; top: var(--header-h);
  max-height: calc(100dvh - var(--header-h));
}
@media (min-width: 1024px) { .ds-rail { display: block; } }
.ds-rail-group { margin-bottom: var(--sp-5); }
.ds-rail-label {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-3); padding: 0 var(--sp-3) var(--sp-2);
}
.ds-rail-item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text-2); text-decoration: none; text-align: left;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ds-rail-item svg { width: 18px; height: 18px; opacity: .85; }
.ds-rail-item:hover { background: var(--surface-3); color: var(--text); }
.ds-rail-item.is-active {
  background: var(--surface); color: var(--brand);
  font-weight: var(--fw-semi); box-shadow: var(--elev-1);
}
.ds-rail-item.is-active svg { opacity: 1; }
.ds-rail-item .ds-rail-count {
  margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--text-3); font-variant-numeric: tabular-nums;
}

/* Dolny pasek (telefon) — bezpieczny margines i cele dotykowe 44 px */
.ds-tabbar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
  display: flex; align-items: stretch;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) { .ds-tabbar { background: var(--surface); } }
@media (min-width: 768px) { .ds-tabbar { display: none; } }
.ds-tabbar-item {
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: var(--sp-1);
  color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  transition: color var(--dur-1) var(--ease-out);
}
.ds-tabbar-item svg { width: 21px; height: 21px; transition: transform var(--dur-2) var(--ease-spring); }
.ds-tabbar-item.is-active { color: var(--brand); }
.ds-tabbar-item.is-active svg { transform: translateY(-1px) scale(1.06); }
.ds-tabbar-item.is-active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 var(--r-full) var(--r-full);
  background: var(--brand);
}
.ds-tabbar-item .ds-navitem-badge { position: absolute; top: 6px; left: calc(50% + 6px); }

/* Zakładki wewnątrz widoku — przewijalne poziomo na telefonie */
.ds-tabs {
  display: flex; gap: var(--sp-1);
  padding: var(--sp-1); margin-bottom: var(--sp-4);
  background: var(--surface-2); border-radius: var(--r-md);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab, .tab-btn {
  flex: 0 0 auto; scroll-snap-align: start;
  min-height: 36px; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm); border: none;
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--text-2); background: transparent; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.ds-tab:hover, .tab-btn:hover { color: var(--text); }
.ds-tab.is-active, .tab-btn.active {
  background: var(--surface); color: var(--text);
  box-shadow: var(--elev-1);
}

/* Przełącznik segmentowy — dla par/trójek wykluczających się opcji */
.ds-segmented { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.ds-segmented button {
  min-height: 32px; padding: 0 var(--sp-3);
  border-radius: var(--r-xs); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--text-2); transition: all var(--dur-1) var(--ease-out);
}
.ds-segmented button[aria-pressed="true"], .ds-segmented button.is-active {
  background: var(--surface); color: var(--text); box-shadow: var(--elev-1);
}

/* Okruszki */
.ds-breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-3); flex-wrap: wrap; }
.ds-breadcrumb a { color: var(--text-2); text-decoration: none; }
.ds-breadcrumb a:hover { color: var(--brand); }
.ds-breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--text-3); }
.ds-breadcrumb ol { display: flex; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }

/* ══ 09 · PRZYCISKI ═══════════════════════════════════════════════════════ */

.ds-btn, .btn {
  --btn-h: 40px;
  --btn-px: var(--sp-4);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h); padding: 0 var(--btn-px);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-family: var(--font); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  line-height: 1; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ds-btn svg, .btn svg { width: 16px; height: 16px; }
.ds-btn:active, .btn:active { transform: scale(.975); }
.ds-btn[disabled], .ds-btn.is-disabled, .btn[disabled], .btn.disabled {
  opacity: .5; pointer-events: none; transform: none;
}
/* Cel dotykowy — na urządzeniach dotykowych każdy przycisk ma min. 44 px */
@media (pointer: coarse) { .ds-btn, .btn { --btn-h: var(--tap); } }

/* Rozmiary */
.ds-btn-xs, .btn-xs { --btn-h: 28px; --btn-px: var(--sp-2); font-size: var(--fs-xs); border-radius: var(--r-sm); }
.ds-btn-sm, .btn-sm { --btn-h: 34px; --btn-px: var(--sp-3); font-size: var(--fs-xs); border-radius: var(--r-sm); }
.ds-btn-lg, .btn-lg { --btn-h: 48px; --btn-px: var(--sp-6); font-size: var(--fs-md); border-radius: var(--r-md); }
.ds-btn-block       { width: 100%; }
.ds-btn-pill, .btn-pill { border-radius: var(--r-full); }
.ds-btn-icon, .btn-icon {
  --btn-px: 0; width: var(--btn-h); padding: 0; flex-shrink: 0;
}
@media (pointer: coarse) { .ds-btn-xs, .btn-xs, .ds-btn-sm, .btn-sm { --btn-h: 38px; } }

/* Warianty */
.ds-btn-primary, .btn-primary {
  background: var(--brand); color: var(--brand-on);
  box-shadow: 0 1px 2px rgba(16,24,40,.10);
}
.ds-btn-primary:hover, .btn-primary:hover { background: var(--brand-hover); box-shadow: var(--elev-brand); }
.ds-btn-primary:active, .btn-primary:active { background: var(--brand-active); }

.ds-btn-secondary, .btn-secondary, .btn-muted {
  background: var(--surface); color: var(--text);
  border-color: var(--border-strong); box-shadow: var(--elev-1);
}
.ds-btn-secondary:hover, .btn-secondary:hover, .btn-muted:hover { background: var(--surface-2); border-color: var(--text-3); }

.ds-btn-ghost {
  background: transparent; color: var(--text-2);
}
.ds-btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.ds-btn-soft {
  background: var(--brand-soft); color: var(--brand);
}
.ds-btn-soft:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }

.ds-btn-outline, .btn-outline {
  background: transparent; color: var(--brand); border-color: var(--brand);
}
.ds-btn-outline:hover, .btn-outline:hover { background: var(--brand-soft); }

.ds-btn-danger, .btn-danger {
  background: var(--danger); color: #fff;
}
.ds-btn-danger:hover, .btn-danger:hover { background: var(--danger-strong); box-shadow: 0 6px 18px rgba(217,45,63,.26); }

.ds-btn-danger-soft { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.ds-btn-danger-soft:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }

.ds-btn-success, .btn-success { background: var(--success); color: #fff; }
.ds-btn-success:hover, .btn-success:hover { background: var(--success-strong); }

.ds-btn-link, .btn-link {
  --btn-h: auto; --btn-px: 0;
  background: none; color: var(--brand); font-weight: var(--fw-semi);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
.ds-btn-link:hover, .btn-link:hover { text-decoration-color: currentColor; transform: none; }

/* Stan ładowania — spinner zamiast tekstu, bez skoku szerokości */
.ds-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.ds-btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: ds-spin .7s linear infinite;
  color: var(--brand-on);
}
.ds-btn-secondary.is-loading::after, .ds-btn-ghost.is-loading::after { color: var(--text-2); }

/* Grupa przycisków */
.ds-btn-group { display: inline-flex; }
.ds-btn-group > .ds-btn { border-radius: 0; margin-left: -1px; }
.ds-btn-group > .ds-btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.ds-btn-group > .ds-btn:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* Przycisk pływający (telefon) — nad dolnym paskiem, w bezpiecznym marginesie */
.ds-fab {
  position: fixed; right: max(var(--sp-4), var(--safe-r));
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-4));
  z-index: var(--z-sticky);
  width: 54px; height: 54px; border-radius: var(--r-full);
  background: var(--brand); color: var(--brand-on);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--elev-brand), var(--elev-3);
  transition: transform var(--dur-2) var(--ease-spring);
}
.ds-fab:active { transform: scale(.92); }
.ds-fab svg { width: 24px; height: 24px; }
@media (min-width: 768px) { .ds-fab { bottom: var(--sp-6); } }

/* ══ 10 · POLA FORMULARZA ═════════════════════════════════════════════════ */

.ds-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); min-width: 0; }
.ds-label {
  font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text);
  display: flex; align-items: center; gap: var(--sp-2);
}
.ds-label-req::after { content: "*"; color: var(--danger); font-weight: var(--fw-bold); }
.ds-hint  { font-size: var(--fs-xs); color: var(--text-3); }
.ds-error { font-size: var(--fs-xs); color: var(--danger); font-weight: var(--fw-medium); display: flex; align-items: center; gap: var(--sp-1); }

.ds-input, .ds-select, .ds-textarea,
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font);
  /* 16 px na telefonie — mniej powoduje automatyczny zoom w iOS Safari */
  font-size: max(16px, var(--fs-base));
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-out);
  appearance: none; -webkit-appearance: none;
}
@media (min-width: 768px) {
  .ds-input, .ds-select, .ds-textarea, .form-control,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"], select, textarea { font-size: var(--fs-base); min-height: 40px; }
}
.ds-input::placeholder, textarea::placeholder, input::placeholder { color: var(--text-3); }
.ds-input:hover, input:hover, select:hover, textarea:hover { border-color: var(--text-3); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.ds-input[disabled], input[disabled], select[disabled], textarea[disabled] {
  background: var(--surface-2); color: var(--text-3); cursor: not-allowed;
}
.ds-input.is-invalid, [aria-invalid="true"] { border-color: var(--danger); }
.ds-input.is-invalid:focus, [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(217,45,63,.22); }

.ds-textarea, textarea { min-height: 104px; resize: vertical; line-height: var(--lh-base); }

.ds-select, select {
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8494' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
}

/* Pole z ikoną / przyciskiem w środku */
.ds-input-group { position: relative; display: flex; align-items: center; }
.ds-input-group > svg:first-child {
  position: absolute; left: var(--sp-3); width: 18px; height: 18px;
  color: var(--text-3); pointer-events: none;
}
.ds-input-group > svg:first-child ~ .ds-input { padding-left: calc(var(--sp-3) + 18px + var(--sp-2)); }
.ds-input-group-suffix { position: absolute; right: var(--sp-2); display: flex; gap: var(--sp-1); }

/* Checkbox i radio — własna kontrolka, cel dotykowy w etykiecie */
.ds-check {
  display: inline-flex; align-items: flex-start; gap: var(--sp-3);
  min-height: var(--tap); padding: var(--sp-2) 0; cursor: pointer;
  font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-snug);
}
.ds-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-check-box {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-xs);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-1) var(--ease-out);
}
.ds-check-box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.6); transition: all var(--dur-2) var(--ease-spring); }
.ds-check input:checked + .ds-check-box { background: var(--brand); border-color: var(--brand); }
.ds-check input:checked + .ds-check-box svg { opacity: 1; transform: scale(1); }
.ds-check input:focus-visible + .ds-check-box { box-shadow: var(--focus-ring); }
.ds-check-radio .ds-check-box { border-radius: 50%; }
.ds-check-radio input:checked + .ds-check-box { background: var(--surface); border-color: var(--brand); border-width: 6px; }
.ds-check-radio input:checked + .ds-check-box svg { display: none; }

/* Przełącznik — jedna kontrolka na cały system (dziś: 3 różne implementacje) */
.ds-switch { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); cursor: pointer; }
.ds-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-switch-track {
  position: relative; flex-shrink: 0;
  width: 44px; height: 26px; border-radius: var(--r-full);
  background: var(--border-strong);
  transition: background var(--dur-2) var(--ease-out);
}
.ds-switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--elev-1);
  transition: transform var(--dur-2) var(--ease-spring);
}
.ds-switch input:checked + .ds-switch-track { background: var(--brand); }
.ds-switch input:checked + .ds-switch-track::after { transform: translateX(18px); }
.ds-switch input:focus-visible + .ds-switch-track { box-shadow: var(--focus-ring); }
.ds-switch input[disabled] + .ds-switch-track { opacity: .5; }
.ds-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-switch-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.ds-switch-desc  { font-size: var(--fs-xs); color: var(--text-2); }

/* Wiersz ustawienia — etykieta po lewej, kontrolka po prawej, zawija na telefonie */
.ds-setting-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-soft);
}
.ds-setting-row:last-child { border-bottom: none; }
.ds-setting-row > :last-child { margin-left: auto; flex-shrink: 0; }
@media (max-width: 480px) {
  .ds-setting-row { flex-wrap: wrap; }
  .ds-setting-row > :last-child { margin-left: 0; width: 100%; }
}

/* Pasek wyszukiwania i filtrów */
.ds-searchbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ds-searchbar > .ds-input-group { flex: 1 1 240px; min-width: 0; }
@media (max-width: 640px) { .ds-searchbar > * { flex: 1 1 100%; } }

/* Kafelek załącznika */
.ds-attach {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-sm); min-width: 0;
}
.ds-attach-ico { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; }
.ds-attach.is-verified { border-color: var(--success-border); background: var(--success-bg); }
.ds-attach.is-rejected { border-color: var(--danger-border);  background: var(--danger-bg); }
.ds-attach.is-checking .ds-attach-ico { animation: ds-pulse 1.4s ease-in-out infinite; }

/* Strefa upuszczania pliku */
.ds-dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-4); text-align: center;
  background: var(--surface-2); color: var(--text-2);
  transition: all var(--dur-2) var(--ease-out);
}
.ds-dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

/* ══ 11 · KARTY I PANELE ══════════════════════════════════════════════════ */

.ds-card, .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  overflow: hidden;
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.ds-card-hover:hover, .card:hover { box-shadow: var(--elev-3); border-color: var(--border-strong); }
.ds-card-interactive { cursor: pointer; }
.ds-card-interactive:hover { transform: translateY(-2px); box-shadow: var(--elev-3); border-color: var(--brand); }
.ds-card-interactive:active { transform: translateY(0); }

.ds-card-head, .card-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-md); font-weight: var(--fw-semi);
  min-height: 52px;
}
.ds-card-head > :last-child:not(:only-child) { margin-left: auto; }
.ds-card-body, .card-body { padding: var(--sp-5); }
.ds-card-foot, .card-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  font-size: var(--fs-sm); color: var(--text-2);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
@media (max-width: 640px) {
  .ds-card-head, .card-header { padding: var(--sp-3) var(--sp-4); }
  .ds-card-body, .card-body   { padding: var(--sp-4); }
  .ds-card-foot, .card-footer { padding: var(--sp-3) var(--sp-4); }
}

/* Karta akcentowana kolorem usługi */
.ds-card-accent { border-top: 3px solid var(--accent, var(--brand)); }

/* Panel — powierzchnia bez cienia, do zagnieżdżania w karcie */
.ds-panel {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: var(--sp-4);
}

/* Sekcja z tytułem i kreską */
.ds-section-title {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.ds-section-title-ico {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; flex-shrink: 0;
}
.ds-section-title-ico svg { width: 15px; height: 15px; }

/* Rozwijana sekcja */
.ds-accordion { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.ds-accordion + .ds-accordion { margin-top: var(--sp-2); }
.ds-accordion summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); min-height: var(--tap);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); cursor: pointer;
  list-style: none;
}
.ds-accordion summary::-webkit-details-marker { display: none; }
.ds-accordion summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-2) var(--ease-out);
}
.ds-accordion[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.ds-accordion[open] summary { border-bottom: 1px solid var(--border-soft); }
.ds-accordion-body { padding: var(--sp-4); font-size: var(--fs-sm); color: var(--text-2); }

/* ══ 12 · ODZNAKI, CHIPY, STATUSY ═════════════════════════════════════════ */

.ds-badge, .badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px var(--sp-2); border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.45;
  white-space: nowrap;
  background: var(--neutral-bg); color: var(--text-2);
  border: 1px solid var(--neutral-border);
}
.ds-badge-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.ds-badge-pill { border-radius: var(--r-full); padding-inline: var(--sp-3); }

/* Odznaki wg tonu */
.ds-badge-brand   { background: var(--brand-soft);  color: var(--brand);   border-color: transparent; }
.ds-badge-success { background: var(--success-bg);  color: var(--success-strong); border-color: var(--success-border); }
.ds-badge-warning { background: var(--warning-bg);  color: var(--warning-strong); border-color: var(--warning-border); }
.ds-badge-danger  { background: var(--danger-bg);   color: var(--danger-strong);  border-color: var(--danger-border); }
.ds-badge-info    { background: var(--info-bg);     color: var(--info-strong);    border-color: var(--info-border); }
body.dark-mode .ds-badge-success, [data-theme="dark"] .ds-badge-success { color: var(--success); }
body.dark-mode .ds-badge-warning, [data-theme="dark"] .ds-badge-warning { color: var(--warning); }
body.dark-mode .ds-badge-danger,  [data-theme="dark"] .ds-badge-danger  { color: var(--danger); }
body.dark-mode .ds-badge-info,    [data-theme="dark"] .ds-badge-info    { color: var(--info); }

/* Statusy zgłoszeń — jeden słownik na cały system.
   Kolejność cyklu życia: new → accepted → in_progress → on_hold
                          → pending_closure → completed | cancelled       */
.badge.new,            .ds-status-new            { background: var(--info-bg);    color: var(--info-strong);    border-color: var(--info-border); }
.badge.accepted,       .ds-status-accepted       { background: var(--brand-soft); color: var(--brand);          border-color: transparent; }
.badge.in_progress,    .ds-status-in_progress    { background: var(--warning-bg); color: var(--warning-strong); border-color: var(--warning-border); }
.badge.on_hold,        .ds-status-on_hold        { background: var(--neutral-bg); color: var(--text-2);         border-color: var(--neutral-border); }
.badge.pending_closure,.ds-status-pending_closure{ background: #fdf1f8; color: #a3196b; border-color: #f6cee4; }
.badge.completed,      .ds-status-completed      { background: var(--success-bg); color: var(--success-strong); border-color: var(--success-border); }
.badge.cancelled,      .ds-status-cancelled      { background: var(--danger-bg);  color: var(--danger-strong);  border-color: var(--danger-border); }
body.dark-mode .badge.pending_closure, [data-theme="dark"] .ds-status-pending_closure { background: #331030; color: #f0a3d0; border-color: #59245078; }

/* Priorytety */
.ds-prio-normal { background: var(--neutral-bg); color: var(--text-2); border-color: var(--neutral-border); }
.ds-prio-high   { background: var(--danger-bg);  color: var(--danger-strong); border-color: var(--danger-border); }

/* Kropka statusu obecności */
.ds-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px var(--surface); }
.ds-dot-online  { background: var(--success); }
.ds-dot-away    { background: var(--warning); }
.ds-dot-offline { background: var(--text-3); }
.ds-dot-busy    { background: var(--danger); }
.ds-dot-live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: currentColor; animation: ds-ping 1.8s var(--ease-out) infinite;
}

/* Chip — filtr, tag, wybór wielokrotny */
.ds-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 32px; padding: 0 var(--sp-3);
  border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  transition: all var(--dur-1) var(--ease-out); cursor: pointer;
}
.ds-chip:hover { border-color: var(--border-strong); color: var(--text); }
.ds-chip.is-active, .ds-chip[aria-pressed="true"] {
  background: var(--brand-soft); border-color: transparent; color: var(--brand);
}
.ds-chip-close { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--scrim); }
.ds-chiprow { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); scrollbar-width: none; }
.ds-chiprow::-webkit-scrollbar { display: none; }

/* Licznik SLA / zegar */
.ds-sla {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  padding: 2px var(--sp-2); border-radius: var(--r-xs);
}
.ds-sla-ok      { background: var(--success-bg); color: var(--success-strong); }
.ds-sla-warn    { background: var(--warning-bg); color: var(--warning-strong); }
.ds-sla-breach  { background: var(--danger-bg);  color: var(--danger-strong); }
.ds-sla-paused  { background: var(--neutral-bg); color: var(--text-2); }

/* ══ 13 · TABELE I LISTY MOBILNE ══════════════════════════════════════════
   Zasada: tabela żyje w kontenerze .ds-tablewrap z własnym przewijaniem.
   Strona NIGDY nie przewija się poziomo. Poniżej 768 px wiersze można
   przełączyć na karty klasą .ds-table-cards (wymaga data-label na td).
   ======================================================================== */

.ds-tablewrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
.ds-table, .sa-table, table.table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm);
}
.ds-table th, .sa-table th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--sp-3) var(--sp-4); text-align: left;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-3); background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ds-table td, .sa-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text); vertical-align: middle;
}
.ds-table tbody tr:last-child td, .sa-table tr:last-child td { border-bottom: none; }
.ds-table tbody tr, .sa-table tbody tr { transition: background var(--dur-1) var(--ease-out); }
.ds-table tbody tr:hover td, .sa-table tr:hover td { background: var(--surface-2); }
.ds-table-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table-actions { display: flex; gap: var(--sp-1); justify-content: flex-end; }

@media (max-width: 767px) {
  .ds-table-cards thead { display: none; }
  .ds-table-cards, .ds-table-cards tbody, .ds-table-cards tr, .ds-table-cards td { display: block; width: 100%; }
  .ds-table-cards tr {
    border: 1px solid var(--border); border-radius: var(--r-md);
    margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
  }
  .ds-table-cards td {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-soft);
  }
  .ds-table-cards td:last-child { border-bottom: none; }
  .ds-table-cards td::before {
    content: attr(data-label);
    flex: 0 0 40%; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3);
  }
  .ds-tablewrap:has(.ds-table-cards) { border: none; background: transparent; }
}

/* Lista pozycji — natywna alternatywa dla tabeli na telefonie */
.ds-list { display: flex; flex-direction: column; }
.ds-list-item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 60px; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  text-align: left; color: inherit; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out);
}
.ds-list-item:last-child { border-bottom: none; }
.ds-list-item:hover  { background: var(--surface-2); }
.ds-list-item:active { background: var(--surface-3); }
.ds-list-item.is-unread { background: var(--brand-softer); }
.ds-list-main  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-list-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text); }
.ds-list-sub   { font-size: var(--fs-xs); color: var(--text-2); }
.ds-list-side  { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); flex-shrink: 0; }

/* Siatka bezpieczeństwa dla ikon: SVG bez width/height w kontenerze flex
   rozdyma się do rozmiaru rodzica. Komponenty, które przyjmują dowolną ikonę,
   narzucają jej rozmiar same. */
.ds-list-item > svg,
.ds-list-side > svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.ds-badge > svg     { width: 12px; height: 12px; flex-shrink: 0; }
.ds-empty-ico > svg { width: 28px; height: 28px; }
.ds-kpi-ico > svg   { width: 16px; height: 16px; }
.ds-app-ico > svg   { width: 22px; height: 22px; }

/* Paginacja */
.ds-pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); flex-wrap: wrap; padding: var(--sp-4) 0; }
.ds-pagination button {
  min-width: 36px; height: 36px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--text-2); transition: all var(--dur-1) var(--ease-out);
}
.ds-pagination button:hover { background: var(--surface-2); color: var(--text); }
.ds-pagination button[aria-current="page"] { background: var(--brand); color: var(--brand-on); }

/* ══ 14 · KAFLE APLIKACJI I KPI ═══════════════════════════════════════════ */

/* Kafel aplikacji w launcherze — zastępuje .app-card */
.ds-app, .app-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--elev-1);
  text-align: left; text-decoration: none; color: inherit;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  overflow: hidden;
}
.ds-app::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent, var(--brand));
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out);
}
.ds-app:hover, .app-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-3);
  border-color: color-mix(in srgb, var(--accent, var(--brand)) 45%, var(--border));
}
.ds-app:hover::before { opacity: 1; }
.ds-app-ico, .app-card-ico {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center; flex-shrink: 0;
  color: #fff; position: relative;
  background: linear-gradient(135deg,
              var(--accent, var(--brand)),
              color-mix(in srgb, var(--accent, var(--brand)) 68%, #000));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent, var(--brand)) 32%, transparent);
  transition: transform var(--dur-2) var(--ease-spring);
}
.ds-app:hover .ds-app-ico { transform: scale(1.07) rotate(-3deg); }
.ds-app-ico svg, .app-card-ico svg { width: 22px; height: 22px; }
.ds-app-name, .app-card-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); }
.ds-app-desc, .app-card-desc { font-size: var(--fs-xs); color: var(--text-2); line-height: var(--lh-snug); flex: 1; }
.ds-app-foot { width: 100%; padding-top: var(--sp-3); margin-top: auto; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: var(--sp-2); }
.ds-app-open { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--brand); display: inline-flex; align-items: center; gap: 4px; }
.ds-app-fav {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-3);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ds-app:hover .ds-app-fav, .ds-app-fav.is-active, .ds-app-fav:focus-visible { opacity: 1; }
.ds-app-fav.is-active { color: var(--warning); }
@media (pointer: coarse) { .ds-app-fav { opacity: 1; } }
.ds-app.is-locked { opacity: .62; }
.ds-app.is-locked .ds-app-ico { filter: grayscale(1); box-shadow: none; }

/* Kafel KPI */
.ds-kpi {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--elev-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.ds-kpi-interactive { cursor: pointer; }
.ds-kpi-interactive:hover { transform: translateY(-2px); box-shadow: var(--elev-3); }
.ds-kpi-head { display: flex; align-items: center; gap: var(--sp-2); }
.ds-kpi-ico {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex-shrink: 0;
  background: color-mix(in srgb, var(--accent, var(--brand)) 12%, transparent);
  color: var(--accent, var(--brand));
}
.ds-kpi-ico svg { width: 16px; height: 16px; }
.ds-kpi-label { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-2); }
.ds-kpi-value {
  font-size: var(--fs-2xl); font-weight: var(--fw-black);
  line-height: 1; letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums; color: var(--text);
}
.ds-kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.ds-kpi-trend-up   { color: var(--success); }
.ds-kpi-trend-down { color: var(--danger); }
.ds-kpi-trend-flat { color: var(--text-3); }

/* Miniwykres słupkowy — bez biblioteki */
.ds-spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.ds-spark i {
  flex: 1; min-width: 3px; border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--accent, var(--brand)) 30%, transparent);
  transition: background var(--dur-1) var(--ease-out);
}
.ds-spark i:last-child { background: var(--accent, var(--brand)); }

/* ══ 15 · MODALE, ARKUSZE, MENU ═══════════════════════════════════════════
   Na telefonie modal jest arkuszem dolnym (bottom sheet) z uchwytem;
   od 768 px klasycznym oknem na środku. Jeden komponent, dwa zachowania.
   ======================================================================== */

.ds-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--overlay);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  animation: ds-fade var(--dur-2) var(--ease-out);
}
@media (min-width: 768px) { .ds-overlay { align-items: center; padding: var(--sp-6); } }

.ds-modal {
  position: relative; z-index: var(--z-modal);
  width: 100%; max-width: 560px;
  max-height: min(92dvh, 860px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--elev-5);
  padding-bottom: var(--safe-b);
  animation: ds-sheet-in var(--dur-3) var(--ease-out);
  overflow: hidden;
}
@media (min-width: 768px) {
  .ds-modal { border-radius: var(--r-xl); padding-bottom: 0; animation: ds-modal-in var(--dur-3) var(--ease-out); }
}
.ds-modal-sm { max-width: 420px; }
.ds-modal-lg { max-width: 780px; }
.ds-modal-xl { max-width: 1040px; }
/* Pełny ekran na telefonie — dla widoków złożonych (szczegóły urządzenia, czat) */
@media (max-width: 767px) {
  .ds-modal-full { max-height: 100dvh; height: 100dvh; border-radius: 0; padding-top: var(--safe-t); }
}

.ds-modal-grip {
  width: 38px; height: 4px; border-radius: var(--r-full);
  background: var(--border-strong); margin: var(--sp-2) auto 0; flex-shrink: 0;
}
@media (min-width: 768px) { .ds-modal-grip { display: none; } }

.ds-modal-head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-soft); flex-shrink: 0;
}
.ds-modal-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin: 0; }
.ds-modal-sub   { font-size: var(--fs-sm); color: var(--text-2); margin: var(--sp-1) 0 0; }
.ds-modal-close {
  margin-left: auto; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text-2);
  transition: background var(--dur-1) var(--ease-out);
}
.ds-modal-close:hover { background: var(--surface-2); color: var(--text); }
.ds-modal-body {
  padding: var(--sp-5);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; flex: 1;
}
.ds-modal-foot {
  display: flex; gap: var(--sp-2); justify-content: flex-end;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2); flex-shrink: 0;
}
@media (max-width: 640px) {
  .ds-modal-head, .ds-modal-body, .ds-modal-foot { padding-inline: var(--sp-4); }
  .ds-modal-foot { flex-direction: column-reverse; }
  .ds-modal-foot > .ds-btn { width: 100%; }
}

/* Menu kontekstowe / rozwijane */
.ds-menu {
  min-width: 208px; padding: var(--sp-1);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--elev-4);
  z-index: var(--z-dropdown);
  animation: ds-pop var(--dur-2) var(--ease-out);
}
.ds-menu-item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 38px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--text); text-align: left; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out);
}
.ds-menu-item svg { width: 16px; height: 16px; color: var(--text-3); }
.ds-menu-item:hover { background: var(--surface-2); }
.ds-menu-item.is-danger { color: var(--danger); }
.ds-menu-item.is-danger svg { color: var(--danger); }
.ds-menu-item.is-danger:hover { background: var(--danger-bg); }
.ds-menu-sep { height: 1px; background: var(--border-soft); margin: var(--sp-1) 0; }
.ds-menu-label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); padding: var(--sp-2) var(--sp-3) var(--sp-1); }

/* Podpowiedź */
.ds-tooltip {
  position: absolute; z-index: var(--z-tooltip);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: var(--surface-inv); color: var(--bg);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  box-shadow: var(--elev-3); pointer-events: none;
  max-width: 260px;
}

/* ══ 16 · TOAST, BANER, PUSTY STAN ════════════════════════════════════════ */

.ds-toaster {
  position: fixed; z-index: var(--z-toast);
  left: max(var(--sp-4), var(--safe-l)); right: max(var(--sp-4), var(--safe-r));
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-3));
  display: flex; flex-direction: column-reverse; gap: var(--sp-2);
  pointer-events: none;
}
@media (min-width: 768px) {
  .ds-toaster { left: auto; right: var(--sp-6); bottom: var(--sp-6); width: 380px; }
}
.ds-toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md); box-shadow: var(--elev-4);
  font-size: var(--fs-sm); pointer-events: auto;
  animation: ds-toast-in var(--dur-3) var(--ease-spring);
}
.ds-toast-success { border-left-color: var(--success); }
.ds-toast-warning { border-left-color: var(--warning); }
.ds-toast-danger  { border-left-color: var(--danger); }
.ds-toast-ico { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand); }
.ds-toast-success .ds-toast-ico { color: var(--success); }
.ds-toast-warning .ds-toast-ico { color: var(--warning); }
.ds-toast-danger  .ds-toast-ico { color: var(--danger); }
.ds-toast-body  { flex: 1; min-width: 0; }
.ds-toast-title { font-weight: var(--fw-semi); }
.ds-toast-desc  { color: var(--text-2); font-size: var(--fs-xs); margin-top: 2px; }

/* Baner / alert w treści */
.ds-alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--info-border); background: var(--info-bg);
  color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.ds-alert svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--info); margin-top: 1px; }
.ds-alert-title { font-weight: var(--fw-semi); margin-bottom: 2px; }
.ds-alert-success { background: var(--success-bg); border-color: var(--success-border); }
.ds-alert-success svg { color: var(--success); }
.ds-alert-warning { background: var(--warning-bg); border-color: var(--warning-border); }
.ds-alert-warning svg { color: var(--warning); }
.ds-alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border); }
.ds-alert-danger svg { color: var(--danger); }
.ds-alert-brand   { background: var(--brand-soft); border-color: transparent; }
.ds-alert-brand svg { color: var(--brand); }

/* Pasek systemowy (offline, tryb podglądu, konserwacja) */
.ds-systembar {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  background: var(--warning-bg); color: var(--warning-strong);
  border-bottom: 1px solid var(--warning-border);
  padding-top: calc(var(--sp-2) + var(--safe-t));
}

/* Pusty stan */
.ds-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3); padding: var(--sp-9) var(--sp-5); text-align: center;
}
.ds-empty-ico {
  width: 60px; height: 60px; border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-3);
}
.ds-empty-ico svg { width: 28px; height: 28px; }
.ds-empty-title { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--text); }
.ds-empty-desc  { font-size: var(--fs-sm); color: var(--text-2); max-width: 44ch; }

/* ══ 17 · SKELETON, SPINNER, PROGRES ══════════════════════════════════════ */

.ds-skel {
  background: linear-gradient(90deg,
              var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}
.ds-skel-text  { height: 11px; margin-bottom: var(--sp-2); }
.ds-skel-title { height: 17px; width: 45%; margin-bottom: var(--sp-3); }
.ds-skel-circle{ border-radius: 50%; }
.ds-skel-card  { height: 132px; border-radius: var(--r-lg); }

.ds-spinner {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ds-spin .7s linear infinite;
}
.ds-spinner-lg { width: 34px; height: 34px; border-width: 3px; }

.ds-progress { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.ds-progress-bar {
  height: 100%; border-radius: inherit;
  background: var(--accent, var(--brand));
  transition: width var(--dur-3) var(--ease-out);
}
.ds-progress-indeterminate .ds-progress-bar {
  width: 36%; animation: ds-indeterminate 1.3s var(--ease-in-out) infinite;
}

/* Pierścień postępu (SLA, wypełnienie profilu) */
.ds-ring { --val: 0; --size: 44px; width: var(--size); height: var(--size); flex-shrink: 0; }
.ds-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.ds-ring .ds-ring-track { stroke: var(--surface-3); }
.ds-ring .ds-ring-value {
  stroke: var(--accent, var(--brand));
  stroke-dasharray: 126;
  stroke-dashoffset: calc(126 - (126 * var(--val) / 100));
  transform: rotate(-90deg); transform-origin: center;
  transition: stroke-dashoffset var(--dur-4) var(--ease-out);
}

/* ══ 18 · AWATARY, OŚ CZASU, DYMKI CZATU ══════════════════════════════════ */

.ds-avatar {
  position: relative; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-2);
  display: grid; place-items: center; overflow: hidden;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  border: 1px solid var(--border);
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-avatar-xs { width: 24px; height: 24px; font-size: var(--fs-2xs); }
.ds-avatar-sm { width: 32px; height: 32px; font-size: var(--fs-xs); }
.ds-avatar-lg { width: 56px; height: 56px; font-size: var(--fs-md); }
.ds-avatar-xl { width: 88px; height: 88px; font-size: var(--fs-xl); }
.ds-avatar-brand { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.ds-avatar .ds-dot { position: absolute; right: -1px; bottom: -1px; }
.ds-avatar-stack { display: flex; }
.ds-avatar-stack > .ds-avatar + .ds-avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--surface); }

/* Oś czasu zgłoszenia */
.ds-timeline { position: relative; padding-left: 30px; }
.ds-timeline::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.ds-tl-item { position: relative; padding-bottom: var(--sp-5); }
.ds-tl-item:last-child { padding-bottom: 0; }
.ds-tl-dot {
  position: absolute; left: -30px; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border);
  display: grid; place-items: center; color: var(--text-3);
}
.ds-tl-dot svg { width: 12px; height: 12px; }
.ds-tl-item.is-current .ds-tl-dot { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.ds-tl-item.is-done    .ds-tl-dot { border-color: var(--success); color: #fff; background: var(--success); }
.ds-tl-title { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.ds-tl-meta  { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.ds-tl-body  { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-2); }

/* Dymki czatu */
.ds-bubble {
  max-width: min(76%, 560px);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm); line-height: var(--lh-snug);
  overflow-wrap: anywhere; position: relative;
}
.ds-bubble-in  { background: var(--chat-other-bg); border: 1px solid var(--border); border-bottom-left-radius: var(--r-xs); align-self: flex-start; }
.ds-bubble-out { background: var(--chat-mine-bg);  border: 1px solid transparent;   border-bottom-right-radius: var(--r-xs); align-self: flex-end; }
.ds-bubble-meta { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1); font-size: var(--fs-2xs); color: var(--text-3); justify-content: flex-end; }
.ds-bubble-reply {
  border-left: 3px solid var(--brand); padding: var(--sp-1) var(--sp-2);
  background: var(--scrim); border-radius: var(--r-xs);
  font-size: var(--fs-xs); color: var(--text-2); margin-bottom: var(--sp-2);
}
.ds-bubble-system {
  align-self: center; max-width: 90%;
  background: var(--brand-soft); color: var(--brand);
  border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); text-align: center;
}
.ds-chatlog { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.ds-chat-daysep { align-self: center; font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--text-3); background: var(--surface-2); padding: 3px var(--sp-3); border-radius: var(--r-full); margin: var(--sp-3) 0; }

/* Kod klawiszowy */
.ds-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  background: var(--surface-2); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: var(--r-xs); color: var(--text-2);
}

/* ══ 19 · NARZĘDZIA ═══════════════════════════════════════════════════════ */

.ds-hide       { display: none !important; }
@media (max-width: 767px)  { .ds-hide-mobile  { display: none !important; } }
@media (min-width: 768px)  { .ds-hide-desktop { display: none !important; } }
@media (max-width: 1023px) { .ds-hide-tablet-down { display: none !important; } }

.ds-mt-0 { margin-top: 0 !important; }
.ds-mt-2 { margin-top: var(--sp-2); }  .ds-mt-4 { margin-top: var(--sp-4); }
.ds-mt-6 { margin-top: var(--sp-6); }  .ds-mb-2 { margin-bottom: var(--sp-2); }
.ds-mb-4 { margin-bottom: var(--sp-4); } .ds-mb-6 { margin-bottom: var(--sp-6); }

.ds-text-muted   { color: var(--text-2); }
.ds-text-faint   { color: var(--text-3); }
.ds-text-brand   { color: var(--brand); }
.ds-text-danger  { color: var(--danger); }
.ds-text-success { color: var(--success); }
.ds-text-center  { text-align: center; }
.ds-text-right   { text-align: right; }

.ds-full   { width: 100%; }
.ds-nowrap { white-space: nowrap; }
.ds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ds-divider { height: 1px; background: var(--border); border: none; margin: var(--sp-5) 0; }
.ds-divider-text {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--text-3); margin: var(--sp-5) 0;
}
.ds-divider-text::before, .ds-divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Akcent — ustawiany per element, np. style="--accent: var(--svc-chat)" */
.ds-accent-helpdesk  { --accent: var(--svc-helpdesk); }
.ds-accent-chat      { --accent: var(--svc-chat); }
.ds-accent-assets    { --accent: var(--svc-assets); }
.ds-accent-rooms     { --accent: var(--svc-rooms); }
.ds-accent-knowledge { --accent: var(--svc-knowledge); }
.ds-accent-wifi      { --accent: var(--svc-wifi); }
.ds-accent-points    { --accent: var(--svc-points); }
.ds-accent-files     { --accent: var(--svc-files); }
.ds-accent-radio     { --accent: var(--svc-radio); }

/* ══ 20 · ANIMACJE, DOSTĘPNOŚĆ, DRUK ══════════════════════════════════════ */

@keyframes ds-spin      { to { transform: rotate(360deg); } }
@keyframes ds-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-pop       { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ds-modal-in  { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ds-sheet-in  { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ds-toast-in  { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ds-shimmer   { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes ds-pulse     { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ds-ping      { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(2.4); opacity: 0; } }
@keyframes ds-indeterminate { 0% { margin-left: -36%; } 100% { margin-left: 100%; } }

/* Szanuj ustawienie systemowe „ogranicz ruch". Dziś respektuje je 5 miejsc
   w całym repozytorium — poniżej obejmuje to każdą animację i przejście. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ds-spinner, .ds-skel { animation: none !important; }
  .ds-skel { background: var(--surface-2); }
}

/* Tryb wysokiego kontrastu / wymuszone kolory (Windows) */
@media (forced-colors: active) {
  .ds-btn, .btn, .ds-card, .card, .ds-input, input, select, textarea { border: 1px solid ButtonBorder; }
  .ds-navitem.is-active, .nav-item.active { forced-color-adjust: none; }
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* Użytkownik prosi o grubsze kreski */
@media (prefers-contrast: more) {
  :root { --border: var(--border-strong); --text-2: var(--text); --text-3: #4b5563; }
}

/* Druk — protokoły sprzętu, etykiety, wydruk zgłoszenia */
@media print {
  .ds-appbar, .header, .ds-rail, .ds-tabbar, .ds-fab, .ds-toaster,
  .ds-modal-close, .ds-pagehead-actions, .ds-tabs { display: none !important; }
  body { background: #fff; color: #000; }
  .ds-card, .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .ds-main { padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}