:root {
    color-scheme: light;
    --page: #f8f5ff;
    --surface: #ffffff;
    --surface-muted: #f1ebff;
    --surface-tint: #fbfaff;
    --line: #ded3f3;
    --line-strong: #c4b2e2;
    --text: #251d35;
    --muted: #71657f;
    --accent: #7c4dde;
    --accent-strong: #6232bd;
    --warning: #a05a12;
    --danger: #b83a5a;
    --focus: #8b5cf6;
    --shadow: 0 14px 34px rgba(74, 45, 122, 0.09);
    --topbar-bg: rgba(255, 255, 255, 0.94);

    /* Signature button border-light (patrz .button-signature) - osobne od --accent/
       --accent-strong, bo Light i Dark potrzebuja INNEGO kierunku: na jasnym tle
       potrzeba ciemniejszego/bardziej nasyconego fioletu dla kontrastu (biel/jasny
       odcien "gubi sie" na jasnej stronie - to byl powod skargi "wyglada jak blur"). */
    --sig-glow-lead: #9333ea;
    --sig-glow-mid: #6232bd;

    /* FINAL - swiadomie ODWROCONE wnetrze/tekst wzgledem Dark (patrz sekcja 13/14 briefu):
       Light = jasne lavender wnetrze + ciemny purple tekst/border; Dark (nizej) = glebokie
       purple wnetrze + jasny tekst + jasniejszy electric-purple border. --sig-bg-light
       reuzywa juz istniejacy --surface-muted (ta sama pastelowa lawenda co gdzie indziej
       w UI), --sig-text-light/--sig-border-light reuzywaja --accent-strong. */
    --sig-bg-light: var(--surface-muted);
    --sig-bg-light-hover: #e7d9ff;
    --sig-text-light: var(--accent-strong);
    --sig-border-light: var(--accent-strong);

    /* Semantyczne tokeny badge/status - LIGHT: identyczne z dotychczasowymi wartosciami literalnymi. */
    --status-success-bg: #e4f5ea;
    --status-success-text: #1f6b43;
    --status-info-bg: #ece7ff;
    --status-info-text: #5731a8;
    --status-cancelled-bg: #f7e2df;
    --status-cancelled-text: #883030;
    --status-critical-bg: #f8dddd;
    --status-critical-text: #983030;
    --status-warning-bg: #fef3c7;
    --status-warning-text: #7c4a03;
    --status-high-bg: #fff1d6;
    --status-high-text: #8a520f;
    --priority-high-rail: #c27614;
    --priority-critical-rail: #c84963;
    --status-neutral-bg: #f0eef6;
    --status-neutral-text: #5b526b;
    --status-waiting-bg: #f4e8ff;
    --status-waiting-text: #713b9f;
    /* Wydarzenie UDOSTEPNIONE - jedyny chip w rodzinie niebieskiej. Osobny token, a nie
       --status-neutral-*, bo "udostepnione" jest STANEM WYDARZENIA, a nie brakiem stanu:
       na szarym tle chip czytal sie jak kontrolka wylaczona (sekcja 43 zadania 4.4B).
       Spokojny blekit, nie agresywne "info blue" - ma wspolgrac z pastelowa paleta IKTEL Flow. */
    --status-shared-bg: #e1ecfb;
    --status-shared-text: #1f4d87;
    --due-soon-bg: #fbf3e3;
    --due-soon-text: #8a6314;
    --due-tomorrow-bg: #fbe9cc;
    --due-today-bg: #fbdcc4;
    --due-today-text: #8a3b0f;
    --due-overdue-bg: #fff0f4;
    --flash-success-bg: #f0eaff;
    --flash-success-border: #c9b8ee;
    --flash-success-text: #4b238f;
    --flash-error-bg: #fff0f4;
    --flash-error-border: #f2b7c7;
    --flash-error-text: #8f2544;
}

/* IKTEL Flow dark theme: powierzchnie ciemno-fioletowo-neutralne, nie czysta czern. */
html[data-theme="dark"] {
    color-scheme: dark;
    --page: #16131e;
    --surface: #211c2c;
    --surface-muted: #2a2438;
    --surface-tint: #241f2f;
    --line: #3a3350;
    --line-strong: #4d4468;
    --text: #ede8f7;
    --muted: #a99cc4;
    /* Korekta po Human Approval: poprzedni fiolet (--accent #a684f2, --accent-strong
       #c3a8ff) byl za jasny/pastelowy - czytal sie jak swiecaca plama, nie akcent marki.
       Nowe wartosci sa glebsze i bardziej nasycone (zweryfikowane skillem ui-ux-pro-max,
       ten sam odcien co sprawdzone "purple na dark" palety produktowe), przy czym
       --accent-strong swiadomie NIE schodzi tak nisko jak --accent - jest uzywany niemal
       wylacznie jako kolor TEKSTU na ciemnych powierzchniach (linki, aktywne stany, etykiety),
       wiec musi zachowac kontrast >=4.5:1 (zmierzone: ~5.5:1 na --surface/--surface-muted).
       --accent jako TLO (przyciski, avatar) moze byc glebszy, bo stoi na nim biały tekst. */
    --accent: #8b5cf6;
    --accent-strong: #a78bfa;
    --warning: #e3a85f;
    --danger: #f0879f;
    --focus: #a78bfa;
    --shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    --topbar-bg: rgba(22, 19, 31, 0.92);

    /* Signature button - Dark: elektryczny, jasny fiolet (kontrastuje z ciemnym tlem
       przycisku), NIE bialy/srebrny/RGB. Osobne, glebsze wartosci tla dla primary CTA w
       Dark (patrz .button-signature nizej) - "wyraznie ciemny fiolet w spoczynku, jeszcze
       ciemniejszy po hover", zamiast dotychczasowego globalnego :hover, ktory rozjasnia. */
    --sig-glow-lead: #c084fc;
    --sig-glow-mid: #a855f7;
    --sig-bg: #5b21b6;
    --sig-bg-hover: #4c1d95;

    /* Semantyczne tokeny badge/status - DARK: ta sama jasna rodzina co Light.
       Rozróżnienie na ciemnej powierzchni zapewniają delikatna obwódka chipu oraz
       kontrastowy tekst, bez brunatnych i bordowych wariantów. */
    --status-success-bg: #e4f5ea;
    --status-success-text: #1f6b43;
    --status-info-bg: #ece7ff;
    --status-info-text: #5731a8;
    --status-cancelled-bg: #f7e2df;
    --status-cancelled-text: #883030;
    --status-critical-bg: #f8dddd;
    --status-critical-text: #983030;
    --status-warning-bg: #fef3c7;
    --status-warning-text: #7c4a03;
    --status-high-bg: #fff1d6;
    --status-high-text: #8a520f;
    --priority-high-rail: #e0a243;
    --priority-critical-rail: #e56882;
    --status-neutral-bg: #f0eef6;
    --status-neutral-text: #5b526b;
    --status-waiting-bg: #f4e8ff;
    --status-waiting-text: #713b9f;
    /* Wydarzenie UDOSTEPNIONE - jedyny chip w rodzinie niebieskiej. Osobny token, a nie
       --status-neutral-*, bo "udostepnione" jest STANEM WYDARZENIA, a nie brakiem stanu:
       na szarym tle chip czytal sie jak kontrolka wylaczona (sekcja 43 zadania 4.4B).
       Spokojny blekit, nie agresywne "info blue" - ma wspolgrac z pastelowa paleta IKTEL Flow. */
    --status-shared-bg: #e1ecfb;
    --status-shared-text: #1f4d87;
    --due-soon-bg: #4a3610;
    --due-soon-text: #f0b95e;
    --due-tomorrow-bg: #4a3610;
    --due-today-bg: #4a2a10;
    --due-today-text: #ff9d5c;
    --due-overdue-bg: #4a2030;
    --flash-success-bg: #2f2650;
    --flash-success-border: #4d4468;
    --flash-success-text: #cbb6ff;
    --flash-error-bg: #4a2030;
    --flash-error-border: #6b2d44;
    --flash-error-text: #ff9fb8;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

a {
    color: var(--accent-strong);
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

a:hover {
    text-decoration: underline;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* UI shell micro checkpoint (2026-09-09): kompaktowy, lekki header - tylko marka (lewa)
   i akcje (prawa). Nawigacja modulow zyje teraz w niezaleznym, pywajacym .dock (patrz
   nizej), nie w topbarze. Zastepuje stary .topbar (grid brand/nav/actions, min-height 144px)
   z odrzuconego Stage 1A / oryginalnego topbara sprzed niego. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 0;
    min-height: 75px;
    padding: 9px 28px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Licensing Core: compact status and activation surfaces shared by both themes. */
.license-alert {
    margin: 0 0 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--license-alert-accent);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    box-shadow: 0 5px 18px rgba(74, 45, 122, .05);
}
.license-alert--warning { --license-alert-accent: #a96513; --license-badge-bg: #fff1d6; --license-badge-text: #754208; }
.license-alert--high { --license-alert-accent: #b83a5a; --license-badge-bg: #f8dddd; --license-badge-text: #84263e; }
.license-alert--critical { --license-alert-accent: #aa244a; --license-badge-bg: #f8dddd; --license-badge-text: #84263e; }
html[data-theme="dark"] .license-alert--warning { --license-alert-accent: #e3a85f; --license-badge-bg: #493315; --license-badge-text: #f8d29d; }
html[data-theme="dark"] .license-alert--high,
html[data-theme="dark"] .license-alert--critical { --license-alert-accent: #f0879f; --license-badge-bg: #4a2030; --license-badge-text: #ffc0d0; }
.license-alert-icon {
    flex: 0 0 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--license-alert-accent);
    border-radius: 50%;
    color: var(--license-alert-accent);
    font-weight: 800;
    line-height: 1;
}
.license-alert-copy { flex: 1; min-width: 0; }
.license-alert-badge {
    display: inline-block;
    width: fit-content;
    padding: .16rem .55rem;
    border-radius: 999px;
    background: var(--license-badge-bg, var(--status-critical-bg));
    color: var(--license-badge-text, var(--status-critical-text));
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.4;
}
.license-alert-copy strong { display: block; margin-top: .38rem; font-size: 1.05rem; }
.license-alert-copy p { margin: .2rem 0 0; color: var(--muted); max-width: 78ch; }
.license-alert-link {
    align-self: center;
    flex: 0 0 auto;
    padding: .45rem .7rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.license-alert-link:focus-visible,
.license-blocked-actions a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.license-disabled-action,
.license-disabled-action:hover {
    opacity: .55;
    cursor: not-allowed;
    text-decoration: none;
    box-shadow: none;
}
.license-disabled-action:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
body[data-license-can-mutate="false"] form[method="post"]:not([action^="/Admin/License"]):not([action^="/Account/Logout"]) { display: none !important; }
body[data-license-can-mutate="false"] [data-license-write-action] { display: none !important; }
body[data-license-can-mutate="false"] [data-cal-resize-handle] { display: none !important; }
.license-blocked-page {
    max-width: 700px;
    margin: clamp(1.5rem, 7vh, 5rem) auto;
    padding: clamp(1.4rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    border-top: 4px solid var(--danger);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.license-blocked-symbol {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--status-critical-bg);
    color: var(--status-critical-text);
    font-weight: 800;
    font-size: 1.25rem;
}
.license-blocked-page h1 { margin: .6rem 0; line-height: 1.2; }
.license-blocked-page p { max-width: 60ch; color: var(--muted); }
.license-blocked-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
@media (max-width: 600px) {
    .license-alert { flex-wrap: wrap; padding: .85rem; }
    .license-alert-link { align-self: auto; flex: 0 0 calc(100% - 2.65rem); margin-left: 2.65rem; }
    .license-blocked-actions .button { flex: 1 1 auto; text-align: center; }
}
.license-card {
    max-width: 780px;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.license-status-row, .license-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.license-status-row h2 { margin: .2rem 0 0; overflow-wrap: anywhere; }
.license-mode { border-radius: 99px; padding: .4rem .75rem; background: var(--surface-muted); font-weight: 700; }
.license-activation-form { display: grid; gap: .65rem; max-width: 520px; margin: 1.5rem 0; }
.license-activation-form input { width: 100%; min-height: 44px; padding: .65rem .8rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--text); }
.license-activation-form button { justify-self: start; min-height: 44px; }
.license-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1.5rem; margin: 1.5rem 0; }
.license-facts div { border-top: 1px solid var(--line); padding: .8rem 0; min-width: 0; }
.license-facts dt { color: var(--muted); font-size: .88rem; }
.license-facts dd { margin: .25rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.license-technical { font-family: ui-monospace, Consolas, monospace; font-size: .86rem; }
.license-actions { justify-content: flex-start; }
.license-actions button { min-height: 44px; }
@media (max-width: 600px) { .license-facts { grid-template-columns: 1fr; } .license-actions form, .license-actions button { width: 100%; } }

/* Wspolny wzorzec ikonowych akcji topbara: Powiadomienia, Chat i Ogloszenia. */
.topbar-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--accent-strong);
    cursor: pointer;
}

.topbar-icon-button:hover {
    border-color: var(--line-strong);
    background: var(--surface-muted);
    color: var(--accent-strong);
    text-decoration: none;
}

.topbar-icon-button.active,
.topbar-icon-button[aria-expanded="true"] {
    border-color: var(--accent-strong);
    background: var(--surface-muted);
    color: var(--accent-strong);
}

.topbar-icon-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent);
    outline-offset: 2px;
}

.topbar-icon-button > svg {
    display: block;
    flex-shrink: 0;
}

.shell {
    width: min(1180px, calc(100% - 32px));
    margin: 26px auto 56px;
}

.page-header {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 4px;
    font-size: 30px;
    line-height: 1.18;
}

h2 {
    margin-bottom: 14px;
    font-size: 21px;
    line-height: 1.25;
}

h3 {
    margin-bottom: 8px;
    font-size: 17px;
}

.muted {
    color: var(--muted);
}

.grid {
    display: grid;
    gap: 18px;
}

.grid.two {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
}

.section-gap {
    margin-top: 18px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.stat {
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.stat strong {
    display: block;
    font-size: 30px;
    line-height: 1.1;
}

.panel {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.admin-tile {
    display: grid;
    gap: 8px;
    min-height: 132px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}

.admin-tile:hover {
    border-color: var(--line-strong);
    background: var(--surface-tint);
    text-decoration: none;
}

.admin-tile strong {
    color: var(--accent-strong);
    font-size: 19px;
}

.admin-tile span {
    color: var(--muted);
}

.cleanup-section { margin-block: 22px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.cleanup-section h2 { margin-top: 0; }
.cleanup-form, .cleanup-orphan-scan { display: grid; gap: 16px; }
.cleanup-orphan-scan { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 20px; }
.cleanup-choices, .cleanup-dates { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.cleanup-choices label, .cleanup-dates label { display: flex; align-items: center; gap: 8px; }
.cleanup-dates input { max-width: 190px; }
.cleanup-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 18px; }
.cleanup-summary > div { min-width: 145px; display: grid; gap: 4px; padding: 12px 16px; background: var(--surface-tint); border-radius: 8px; }
.cleanup-summary strong { font-size: 1.2rem; }
.cleanup-summary span { color: var(--muted); }
.cleanup-details { border-top: 1px solid var(--line); padding-block: 12px; }
.cleanup-details summary { cursor: pointer; font-weight: 700; }
.cleanup-details li { padding-block: 6px; overflow-wrap: anywhere; }
.cleanup-history { padding-left: 1.5rem; overflow-wrap: anywhere; }
.cleanup-history li { margin-block: 8px; }
.cleanup-progress progress { width: 100%; max-width: 480px; }
.cleanup-section .danger-confirm { padding: 16px; margin-block: 18px; border: 1px solid var(--flash-error-border); border-radius: 8px; background: var(--flash-error-bg); color: var(--flash-error-text); }
.cleanup-section .danger-confirm form { display: grid; gap: 10px; max-width: 420px; }
.cleanup-section .button:focus-visible, .cleanup-details summary:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; }
@media (max-width: 560px) {
    .cleanup-section { padding: 16px; }
    .cleanup-choices, .cleanup-dates { display: grid; }
    .cleanup-section .button { width: 100%; white-space: normal; }
}

.flash {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-weight: 700;
}

.flash.success {
    background: var(--flash-success-bg);
    border-color: var(--flash-success-border);
    color: var(--flash-success-text);
}

.flash.error {
    background: var(--flash-error-bg);
    border-color: var(--flash-error-border);
    color: var(--flash-error-text);
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.button:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    text-decoration: none;
}

.button.secondary {
    border-color: var(--line-strong);
    background: var(--surface-tint);
    color: var(--accent-strong);
}

.button.secondary:hover,
.button.ghost:hover {
    background: var(--surface-muted);
}

.button.ghost {
    min-height: 34px;
    border-color: var(--line);
    background: transparent;
    color: var(--accent-strong);
}

/* Destructive to SEMANTYKA, nie osobny mniejszy rozmiar (Product Owner decision lock, FINAL
   human-review correction, sekcje 17-18 zadania). .button.ghost sam w sobie zostaje kompaktowy
   (34px) tam, gdzie zyje wsrod innych .ghost - np. gesty rzad akcji tabeli Admin
   (.table-actions, patrz nizej). Ale gdziekolwiek .danger stoi obok Primary/Secondary z bazowej
   40px rodziny (.form-actions, dialogi potwierdzenia, akcje zalacznika), wysokosc musi byc
   TAKA SAMA jak sasiadow - stad jawne nadpisanie z powrotem do bazowej wysokosci .button. */
.button.ghost.danger {
    min-height: 40px;
    border-color: #f0b3c3;
    color: var(--danger);
}

/* Wyjatek: w gestym rzedzie akcji tabeli Admin (Kategorie/Uzytkownicy/Dzialy) .danger stoi
   WYLACZNIE obok innych .ghost (Edytuj/Aktywuj), nigdy obok 40px Primary/Secondary - tam 34px
   jest juz spojne ze wszystkimi sasiadami i nie ma zadnej niezgodnosci do naprawy. */
.table-actions .button.ghost.danger {
    min-height: 34px;
}

.button.ghost.danger:hover {
    background: #fff0f4;
    border-color: #e79ab0;
}

/* Signature hover TEST na jednym reprezentatywnym primary CTA ("Nowe zgloszenie" na
   Pulpicie, patrz Pages/Index.cshtml) - modyfikator DODATKOWY do .button, NIE zmiana
   .button samego w sobie (kazdy inny .button uzywa dzis tej samej klasy bazowej).

   Mechanizm (bez zmian architektonicznych, tylko dopracowany po dwoch rundach Human
   Approval): przycisk zostaje spokojny, caly efekt skupia sie na OBRYSIE - punkt swiatla
   biegnie WOKOL zaokraglonej krawedzi (conic-gradient + mask-composite:exclude, "animowany
   obrys bez podswietlania srodka"), z delikatnym liftem. @property rejestruje --sig-angle
   jako animowalny kat - w przegladarkach bez wsparcia obrys nie wiruje, ale nadal pojawia
   sie statycznie po hover (bezpieczna degradacja).

   FINAL CORRECTION (2 runda): Light - poprzedni bialy/blady akcent (rgba(255,255,255,.95))
   mial za mало kontrastu na jasnym tle strony - "wygladalo jak blur". Zastapiony
   ciemniejszym, bardziej nasyconym --sig-glow-lead (fiolet, NIE biel) + szerszy/grubszy
   luk, wiec ruch jest jednoznacznie widoczny. Dark - poprzednie bialawe swiatlo zastapione
   elektrycznym --sig-glow-lead (jasny, nasycony fiolet), a samo TLO przycisku w Dark
   dostaje osobne, glebsze wartosci (--sig-bg / --sig-bg-hover): w spoczynku wyraznie ciemny
   fiolet, po hover JESZCZE ciemniejszy (nie jasniejszy jak w domyslnym .button:hover). */
@property --sig-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Light (domyslne, bez selektora motywu) - swiadomie ODWROCONE wzgledem Dark: jasne
   lavender wnetrze, ciemny nasycony purple tekst i border. Rownej specyficznosci co bazowe
   .button/.button:hover ((0,1,0)/(0,2,0)) - wygrywa dzieki kolejnosci w pliku (ta regula
   jest zdefiniowana PO .button), dokladnie tak samo jak dzisiejszy wzorzec html[data-theme
   ="dark"] .button-signature ponizej (tam wygrywa przez wyzsza specyficznosc selektora). */
.button-signature {
    position: relative;
    background: var(--sig-bg-light);
    border-color: var(--sig-border-light);
    color: var(--sig-text-light);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.button-signature::after {
    content: "";
    position: absolute;
    inset: -2.5px;
    z-index: 1;
    border-radius: inherit;
    padding: 2.5px;
    background: conic-gradient(
        from var(--sig-angle),
        transparent 0deg,
        transparent 250deg,
        var(--sig-glow-mid) 300deg,
        var(--sig-glow-lead) 335deg,
        var(--sig-glow-mid) 358deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(0 0 3px var(--sig-glow-lead));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.button-signature:hover {
    background: var(--sig-bg-light-hover);
    border-color: var(--sig-border-light);
    color: var(--sig-text-light);
    transform: translateY(-1px);
}

.button-signature:hover::after {
    opacity: 1;
    animation: button-signature-spin 2.6s linear infinite;
}

.button-signature:active {
    transform: translateY(0);
}

/* Dark: przycisk w spoczynku juz wyraznie ciemny fiolet (glebszy niz zwykly .button z
   --accent), po hover jeszcze ciemniejszy - odwrotnie niz domyslny .button:hover (ktory
   rozjasnia do --accent-strong). Tekst jasny/prawie bialy (jawnie #fff - .button-signature
   bazowe wyzej ustawia go na ciemny purple dla Light, wiec Dark MUSI go tu jawnie
   nadpisac, inaczej zostaje ciemny tekst na ciemnym tle). Border - FINAL: jasniejszy
   electric-purple (--sig-glow-mid), NIE ten sam odcien co tlo jak poprzednio - ma byc
   widoczny w spoczynku, nie tylko przez ruchomy luk (.button-signature::after). Po hover
   border "zyje mocniej": jeszcze jasniejszy (--sig-glow-lead). Dotyczy WYLACZNIE tego
   jednego przycisku-testu. */
html[data-theme="dark"] .button-signature {
    background: var(--sig-bg);
    border-color: var(--sig-glow-mid);
    color: #fff;
}

html[data-theme="dark"] .button-signature:hover {
    background: var(--sig-bg-hover);
    border-color: var(--sig-glow-lead);
    color: #fff;
}

@keyframes button-signature-spin {
    from {
        --sig-angle: 0deg;
    }
    to {
        --sig-angle: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .button-signature {
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .button-signature:hover {
        transform: none;
    }

    .button-signature:hover::after {
        animation: none;
        opacity: 1;
    }
}

.segmented {
    display: inline-flex;
    max-width: 100%;
    padding: 4px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow-x: auto;
}

.segmented a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    color: var(--muted);
    font-weight: 700;
    white-space: nowrap;
}

.segmented a.active {
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: 0 1px 5px rgba(74, 45, 122, 0.11);
}

/* Segmented control (Kalendarz Miesiac/Tydzien/Dzien/Agenda, Wszystko/Zadania/Wydarzenia) nie mial
   wlasnego :hover - dziedziczyl globalne "a:hover { text-decoration: underline }" i wygladal jak
   zwykly tekstowy link zamiast segmentowanej kontrolki (FINAL PRE-QA UI/UX corrective pass,
   sekcje 31-34). Wlasny hover/focus-visible, bez underline. */
.segmented a:hover {
    background: var(--surface-tint);
    color: var(--accent-strong);
    text-decoration: none;
}

.segmented a.active:hover {
    background: var(--surface);
}

.segmented a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
    text-decoration: none;
}

.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.quick-filter {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-tint);
    color: var(--muted);
    font-weight: 800;
}

.quick-filter:hover,
.quick-filter.active {
    background: var(--surface-muted);
    border-color: var(--line-strong);
    color: var(--accent-strong);
    text-decoration: none;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

tr:last-child td {
    border-bottom: 0;
}

.status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.status.Completed {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.status.Open {
    background: var(--status-info-bg);
    color: var(--status-info-text);
}

.status.Cancelled {
    background: var(--status-cancelled-bg);
    color: var(--status-cancelled-text);
}

.status.InProgress {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.status.New {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
}

.status.Waiting {
    background: var(--status-waiting-bg);
    color: var(--status-waiting-text);
}

.status.Active {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.status.Inactive {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
}

.priority {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.priority.Low {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
}

.priority.Normal {
    background: var(--status-info-bg);
    color: var(--status-info-text);
}

.priority.High {
    background: var(--status-high-bg);
    color: var(--status-high-text);
}

.priority.Critical {
    background: var(--status-critical-bg);
    color: var(--status-critical-text);
}

.badge-overdue {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-left: 6px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff0f4;
    color: var(--danger);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.form {
    display: grid;
    gap: 16px;
}

.compact-form {
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.compact-form:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.field {
    display: grid;
    gap: 7px;
}

.form h2 {
    margin: 8px 0 0;
    font-size: 18px;
}

.form h3 {
    margin: 14px 0 0;
    font-size: 15px;
}

.field label {
    font-weight: 800;
}

/* Pudelko pola TEKSTOWEGO - wysokosc dotyku, ramka, tlo. Radio i checkbox sa z tej reguly
   wylaczone: to nie sa pola do wpisywania, a doklejenie im ramki 1px i wysokosci 42px robilo
   z 18-pikselowej kontrolki wysoki prostokat. To wlasnie ten prostokat obrysowywal outline po
   kliknieciu (finding Product Ownera po Etapie 4.3A) - poprawka ponizej usuwa przyczyne, a nie
   tylko jej widoczny objaw. */
.field input:not([type="radio"]):not([type="checkbox"]),
.field select,
.field textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
}

.field textarea {
    min-height: 150px;
    resize: vertical;
}

/* Kontrolki, w ktorych klikniecie realnie ustawia kursor do pisania/wyboru wartosci - tam ring
   przy kazdym focusie jest poprawny i oczekiwany. */
.field input:not([type="radio"]):not([type="checkbox"]):focus,
.field select:focus,
.field textarea:focus,
.button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(139, 92, 246, 0.28);
    outline-offset: 2px;
}

/* ---- Focus radio / checkbox (korekta po Etapie 4.3A) ------------------------
   Poprzednio radio i checkbox lapaly ten sam ":focus" co pole tekstowe, wiec ZWYKLE KLIKNIECIE
   MYSZKA zostawialo wokol malej kontrolki duzy, kanciasty prostokat - a w kartach wyboru
   dokladalo sie do tego drugie obramowanie kafelka.

   Przyczyna byla podwojna i obie sa naprawione wyzej i tutaj:

     1. PUDELKO. Radio i checkbox lapaly reguly pola tekstowego (".field input": min-height 42px,
        padding, ramka 1px), wiec 18-pikselowa kontrolka miala pudelko 18x42 - i to je obrysowywal
        outline. Reguly pola tekstowego wykluczaja teraz radio i checkbox (patrz wyzej), wiec
        kontrolka ma wreszcie swoj wlasny, kwadratowy rozmiar.
     2. MOMENT. Ring pokazuje sie wylacznie przy ":focus-visible", czyli po Tab/Shift+Tab
        i strzalkach, a nie po kliknieciu wskaznikiem.

   "border-radius" nizej dotyczy ksztaltu ringu tam, gdzie przegladarka honoruje go na natywnej
   kontrolce; tam, gdzie nie honoruje, decyduje poprawione pudelko z punktu 1.

   NIGDZIE nie ma tu "outline: none" bez zamiennika: tam, gdzie ring przejmuje caly kafelek
   (patrz ".choice-option" i picker odbiorcow nizej), robi to regula ":has(...)", wiec w
   przegladarce bez wsparcia ":has" kontrolka nadal ma wlasny, widoczny focus. */
input[type="radio"],
input[type="checkbox"] {
    border-radius: 4px;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent);
    outline-offset: 2px;
}

.validation-summary-errors,
.field-validation-error {
    color: var(--danger);
    font-weight: 700;
}

.checkbox-line {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    font-weight: 700;
}

/* Secondary CTA zachowuje spokojna hierarchie, ale reuzywa firmowy obrotowy border
   z .button-signature. Uzywany dla powrotu na formularzach Tickets / Tasks. */
.button-signature.button-signature-secondary {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--accent-strong);
}

.button-signature.button-signature-secondary:hover {
    background: var(--surface-muted);
    border-color: var(--accent-strong);
    color: var(--accent-strong);
}

html[data-theme="dark"] .button-signature.button-signature-secondary,
html[data-theme="dark"] .button-signature.button-signature-secondary:hover {
    color: var(--text);
}

html[data-theme="dark"] .button-signature.button-signature-secondary {
    background: var(--surface);
    border-color: var(--line-strong);
}

html[data-theme="dark"] .button-signature.button-signature-secondary:hover {
    background: var(--surface-muted);
    border-color: var(--sig-glow-lead);
}

/* UI/UX Stage 3 — wspólny język operacyjny Tickets + Tasks.
   Selektory są celowo lokalne dla .work-module, aby nie przeprojektować Dashboardu/Admin. */
.work-module {
    --work-accent-soft: color-mix(in srgb, var(--accent) 9%, var(--surface));
    --work-accent-line: color-mix(in srgb, var(--accent) 30%, var(--line));
    --work-record-hover: color-mix(in srgb, var(--accent) 5%, var(--surface));
    display: grid;
    gap: 0;
}

.work-page-header {
    position: relative;
    align-items: center;
    min-height: 118px;
    padding: 22px 24px 22px 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(112deg, var(--work-accent-soft), var(--surface) 72%);
    box-shadow: 0 12px 30px rgba(74, 45, 122, 0.07);
}

.work-page-header::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--accent);
}

.work-page-header > * {
    position: relative;
    z-index: 1;
}

.work-page-header h1 {
    font-size: clamp(28px, 3vw, 36px);
    letter-spacing: -0.025em;
}

.work-page-header .muted strong {
    color: var(--text);
}

.module-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-strong);
    text-transform: none;
}

.module-kicker-icon,
.record-type-icon,
.section-heading-with-icon > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-strong);
    background: var(--surface-muted);
    border: 1px solid var(--work-accent-line);
}

.module-kicker-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}

.module-kicker-icon svg {
    width: 16px;
    height: 16px;
}

.work-module-tasks .module-kicker-icon,
.work-module-tasks .record-type-icon {
    border-radius: 50%;
}

.work-list-panel {
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
}

.work-list-panel > .toolbar {
    margin: 0;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-tint);
}

.work-list-panel .segmented {
    padding: 3px;
    border-radius: 10px;
}

.work-list-panel .segmented a {
    min-height: 38px;
    padding-inline: 14px;
}

.work-filters {
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
}

.search-form.work-search {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
}

.search-form.work-search input {
    width: 100%;
    min-height: 44px;
    padding-left: 42px;
    background: var(--surface-tint);
}

.work-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.work-search-icon svg {
    width: 100%;
    height: 100%;
}

.work-search .button {
    min-height: 44px;
}

.work-filters .filters-grid {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 10px;
}

.work-filters .field {
    gap: 5px;
}

.work-filters .field label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.work-filters select {
    min-height: 42px;
    background: var(--surface-tint);
}

.active-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.active-filter-label {
    margin-right: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    color: var(--accent-strong);
    background: var(--surface-muted);
    border: 1px solid var(--work-accent-line);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
}

.work-list-panel > .task-summary {
    margin: 0;
    padding: 13px 18px 9px;
}

/* FINAL PRE-QA UI/UX corrective pass (sekcje 43-46): `gap` na elemencie bez display:flex/grid jest
   CICHYM no-opem - Tasks/Tickets dzialaly przez przypadek, bo ich <ul> ma DODATKOWO klase
   .task-list (display:grid). Agenda uzywa WYLACZNIE .work-record-list/.cal-agenda-list, bez
   .task-list, wiec zadeklarowany .cal-agenda-list{gap:20px} nigdy sie nie renderowal - stad
   zmierzone REALNE 0px miedzy kartami mimo poprawnej deklaracji CSS (root cause diagnozy sekcji
   44). display:grid na wspolnej bazowej klasie naprawia to raz, dla kazdego konsumenta naraz. */
.work-record-list {
    display: grid;
    gap: 8px;
    padding: 0 12px 14px;
}

.work-record-list > li {
    min-width: 0;
}

.work-record {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 96px;
    /* padding-left is 2px narrower than the other sides (12px vs 14px) to absorb the real
       border-left growing from 1px to 3px (FINAL SEMANTIC LEFT BORDER FIX) - box-sizing:
       border-box means the extra border width eats into content space, so this keeps the
       icon/title column starting at the exact same offset from the card's outer edge as before. */
    padding: 14px 16px 14px 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-left: 3px solid var(--status-info-text);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(74, 45, 122, 0.035);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* .work-record jest zawsze <a> (Task/Ticket/Dashboard/Agenda) - bez jawnego nadpisania globalne
   `a:hover { text-decoration: underline }` (site.css, poczatek pliku) podkresla ID/tytul/metadane
   na hover, bo .work-record:hover/:focus-visible nie deklaruja text-decoration (Product Owner
   decision lock, FINAL human-review correction, sekcja 11 zadania). Jawnie w kazdym stanie
   interaktywnym - nie globalny reset `a:hover`, ktory zepsulby zwykle linki tekstowe gdzie
   indziej w aplikacji. */
.work-record:link,
.work-record:visited,
.work-record:hover,
.work-record:focus-visible,
.work-record:active {
    text-decoration: none;
}

/* Interactive record hover/focus (Etap 4.4C, sekcja 15-17 zadania): rekord juz NIE podskakuje -
   Product Owner odrzucil translateY/shadow-lift jako niespojne miedzy priorytetami. Caly obrys
   wzmacnia sie kolorem semantycznym PRIORYTETU (ten sam token, co plakietka .priority.<Priority>
   wewnatrz rekordu, wybrany przez :has() - zero nowego markupu/logiki), zostaje subtelny cien.
   Rekordy bez plakietki priorytetu (np. przyszle uzycia .work-record poza Tasks/Tickets) dostaja
   spokojny fallback kolorem akcentu marki, tak jak wczesniej. */
.work-record:hover,
.work-record:focus-visible {
    border-color: var(--work-accent-line);
    background: var(--work-record-hover);
    box-shadow: 0 4px 14px rgba(74, 45, 122, 0.07);
}

.work-record:hover:has(.priority.Critical),
.work-record:focus-visible:has(.priority.Critical) {
    border-color: var(--status-critical-text);
}

.work-record:hover:has(.priority.High),
.work-record:focus-visible:has(.priority.High) {
    border-color: var(--status-high-text);
}

.work-record:hover:has(.priority.Normal),
.work-record:focus-visible:has(.priority.Normal) {
    border-color: var(--status-info-text);
}

.work-record:hover:has(.priority.Low),
.work-record:focus-visible:has(.priority.Low) {
    border-color: var(--status-neutral-text);
}

/* Overdue ma pierwszenstwo nad priority na interactive list hover (POST-4.4C, sekcje 7-9):
   overdue rekord komunikowal dwa konkurujace stany - czerwony lewy accent i fioletowy/amber
   hover border z priority ponizej. Ten selektor stoi PO regulach priority, wiec przy tej samej
   specyficznosci wygrywa dla kazdego rekordu z widocznym due-pill "po terminie" (dziala dla
   Tasks i Dashboard "Wymaga uwagi" - oba dziela .work-record i ten sam .due-pill.due-overdue;
   Tickets nie maja overdue semantics, wiec regula ich nie dotyczy). */
.work-record:hover:has(.due-pill.due-overdue),
.work-record:focus-visible:has(.due-pill.due-overdue) {
    border-color: var(--status-critical-text);
}

.work-record:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 2px;
}

/* Shared semantic left border (FINAL SEMANTIC LEFT BORDER FIX): real border-left, part of the
   card's own border box, for Tasks, Tickets AND Dashboard "Wymaga uwagi" (.dashboard-attention-
   record also carries .work-record, so it inherits this rule). A real border is drawn following
   border-radius natively, so the semantic color reaches the top-left and bottom-left rounded
   corners - the previous ::before overlay could only cover the straight edge. The border is
   STALE (always visible), not only for attn-high/attn-critical: Normal and Low records fall
   through to this base rule instead of rendering with zero left accent. Default color matches
   the Normal-priority hover border token (--status-info-text) so the left border and the hover
   border never disagree on the same semantic state; Low overrides to its own neutral hover-border
   token. Because the hover/focus rules above set `border-color` (all four sides, including left)
   to that same semantic token, the left border is automatically kept in sync with the outer hover
   border for every state - no separate override is needed for overdue like the old ::before
   mechanism required. */
.work-record:has(.priority.Low) {
    border-left-color: var(--status-neutral-text);
}

.work-record.attn-high {
    background: linear-gradient(90deg, color-mix(in srgb, var(--status-high-bg) 64%, var(--surface)), var(--surface) 28%);
    border-left-color: var(--priority-high-rail);
}

.work-record.attn-critical {
    background: linear-gradient(90deg, color-mix(in srgb, var(--status-critical-bg) 68%, var(--surface)), var(--surface) 32%);
    border-left-color: var(--priority-critical-rail);
}

/* ==========================================================================
   WAŻNE OGŁOSZENIA
   ========================================================================== */

.work-module-announcements {
    --announcement-rail: var(--accent);
}

.announcement-center {
    position: relative;
}

.announcement-center-panel {
    position: absolute;
    z-index: 70;
    top: calc(100% + 10px);
    right: 0;
    width: min(390px, calc(100vw - 24px));
    max-height: min(620px, calc(100vh - 90px));
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.announcement-center-panel > header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.announcement-center-panel > header div,
.announcement-center-panel li > a {
    display: grid;
}

.announcement-center-panel > header span,
.announcement-center-panel small {
    color: var(--muted);
    font-size: .78rem;
}

.announcement-center-panel ul,
.announcement-list,
.dashboard-announcement-list,
.announcement-attachments ul,
.announcement-audit ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.announcement-center-panel li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    border-left: 4px solid var(--announcement-rail, var(--accent));
}

.announcement-center-panel li.is-important { --announcement-rail: var(--priority-high-rail); }
.announcement-center-panel li.is-critical { --announcement-rail: var(--priority-critical-rail); }
.announcement-center-panel li.is-unread { background: var(--surface-tint); }
.announcement-center-panel li > a { gap: 4px; color: var(--text); min-width: 0; }
.announcement-center-panel li > a:hover { text-decoration: none; }
.announcement-center-panel li > a strong { overflow-wrap: anywhere; }
.announcement-center-panel li form { align-self: end; }
.announcement-center-panel li form .button { min-height: 34px; padding: 5px 8px; font-size: .76rem; }
.announcement-center-empty { margin: 0; padding: 22px 16px; color: var(--muted); text-align: center; }

.announcement-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid var(--line-strong);
    border-left: 5px solid var(--priority-high-rail);
    border-radius: 13px;
    background: var(--status-high-bg);
    color: var(--status-high-text);
}

.announcement-banner.is-critical {
    border-left-color: var(--priority-critical-rail);
    background: var(--status-critical-bg);
    color: var(--status-critical-text);
}

.announcement-banner-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.announcement-banner-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.announcement-banner-copy > span {
    font-size: .75rem;
    font-weight: 750;
}

.announcement-banner-copy > strong {
    color: inherit;
    font-size: .98rem;
    overflow-wrap: anywhere;
}

.announcement-banner-copy > small {
    font-size: .78rem;
}

.announcement-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.announcement-banner-actions form { margin: 0; }
.announcement-banner-actions .button { min-height: 44px; white-space: nowrap; }
.announcement-banner-close,
.icon-button {
    width: 44px;
    height: 44px;
    border: 1px solid currentColor;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 1.35rem;
    cursor: pointer;
}

.announcement-tabs,
.announcement-filters {
    width: fit-content;
}

.announcement-tabs {
    margin: 18px 0 10px;
}

.announcement-filters { margin-bottom: 16px; }
.announcement-list { display: grid; gap: 9px; }

.announcement-row {
    --announcement-rail: var(--accent);
    min-height: 92px;
    display: grid;
    grid-template-columns: 5px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: stretch;
    padding: 0 16px 0 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text);
}

.announcement-row.is-important { --announcement-rail: var(--priority-high-rail); }
.announcement-row.is-critical { --announcement-rail: var(--priority-critical-rail); }
.announcement-row.is-unread { border-color: color-mix(in srgb, var(--announcement-rail) 50%, var(--line)); background: var(--surface-tint); }
.announcement-row:hover { border-color: var(--announcement-rail); text-decoration: none; }
.announcement-row-marker { background: var(--announcement-rail); }
.announcement-row-main { min-width: 0; display: grid; align-content: center; gap: 5px; padding: 13px 0; }
.announcement-row-main > strong { font-size: 1rem; overflow-wrap: anywhere; }
.announcement-row-topline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.announcement-row-meta { color: var(--muted); font-size: .8rem; }
.announcement-row-arrow { align-self: center; color: var(--muted); font-size: 1.7rem; }

.announcement-priority-badge,
.announcement-unread-badge,
.announcement-overdue-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 750;
}

.announcement-priority-badge.is-normal { background: var(--status-info-bg); color: var(--status-info-text); }
.announcement-priority-badge.is-important { background: var(--status-high-bg); color: var(--status-high-text); }
.announcement-priority-badge.is-critical { background: var(--status-critical-bg); color: var(--status-critical-text); }
.announcement-unread-badge { background: var(--status-info-bg); color: var(--status-info-text); }
.announcement-overdue-badge { background: var(--status-critical-bg); color: var(--status-critical-text); }
.announcement-reread-note { color: var(--status-info-text); font-size: .8rem; font-weight: 650; }
.announcement-publication-error { color: var(--flash-error-text); font-size: .82rem; font-weight: 650; }

.announcement-priority-options,
.announcement-publication-mode {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.announcement-publication-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }

.announcement-priority-option {
    --announcement-priority-color: var(--accent);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 88px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.announcement-priority-option.is-important { --announcement-priority-color: var(--priority-high-rail); }
.announcement-priority-option.is-critical { --announcement-priority-color: var(--priority-critical-rail); }
.announcement-priority-option.is-normal:has(input:checked) {
    padding: 12px;
    border: 2px solid var(--announcement-priority-color);
    background: color-mix(in srgb, var(--announcement-priority-color) 12%, var(--surface));
}
.announcement-priority-option.is-important:has(input:checked) {
    padding: 12px;
    border: 2px solid var(--announcement-priority-color);
    background: color-mix(in srgb, var(--announcement-priority-color) 12%, var(--surface));
}
.announcement-priority-option.is-critical:has(input:checked) {
    padding: 12px;
    border: 2px solid var(--announcement-priority-color);
    background: color-mix(in srgb, var(--announcement-priority-color) 12%, var(--surface));
}
.announcement-priority-option:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent);
    outline-offset: 2px;
}
.announcement-priority-option input:focus-visible { outline: 0; }
.announcement-priority-option span { display: grid; gap: 2px; }
.announcement-priority-option small { color: var(--muted); }

.announcement-form-page {
    width: min(1100px, 100%);
    margin-inline: auto;
}

.announcement-form-page .work-form-panel {
    width: 100%;
}

.announcement-form-page .ikt-datepicker-field {
    display: flex;
    width: 100%;
}

.announcement-form-page .ikt-dp-trigger {
    flex: 1 1 auto;
}

.recipient-picker-grid {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(300px, 1.25fr);
    gap: 14px;
}

.recipient-picker-departments,
.recipient-picker-users {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-tint);
}

.recipient-picker-users {
    display: grid;
    gap: 12px;
}

.recipient-picker-departments h3,
.recipient-picker-users h3 { margin: 0 0 10px; font-size: .95rem; }
.recipient-picker-user-header { display: flex; justify-content: space-between; gap: 10px; }
.recipient-picker-user-header span { color: var(--muted); font-size: .82rem; }
.recipient-picker-users input[type="search"] { width: 100%; }
.recipient-picker-grid .scroll-list { max-height: 330px; }
.recipient-picker-grid .checkbox-line { margin-left: calc(var(--recipient-department-level, 0) * 14px); }
.recipient-picker-grid .checkbox-line span { display: grid; }
.recipient-picker-grid .checkbox-line small { color: var(--muted); font-size: .76rem; }
.announcement-reread-option { border-color: var(--line-strong); background: var(--surface-muted); }

.announcement-preview-dialog {
    width: min(720px, calc(100vw - 28px));
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}

.announcement-preview-dialog::backdrop { background: rgba(20, 15, 30, .55); }
.announcement-preview-shell > header,
.announcement-preview-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.announcement-preview-shell > footer { justify-content: flex-end; border-top: 1px solid var(--line); border-bottom: 0; }
.announcement-preview-shell h2 { margin: 6px 0 0; }
.announcement-preview-content,
.announcement-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.announcement-preview-content { min-height: 180px; padding: 20px; }

.announcement-details-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }

.announcement-article { border-top: 5px solid var(--accent); }
.announcement-article.is-important { border-top-color: var(--priority-high-rail); }
.announcement-article.is-critical { border-top-color: var(--priority-critical-rail); }
.announcement-content { min-height: 180px; font-size: 1.02rem; line-height: 1.65; }
.announcement-info-panel { border-top: 4px solid var(--accent); }
.announcement-info-panel h2,
.announcement-management-panel h2,
.announcement-attachments h2 { margin-top: 0; font-size: 1rem; }
.announcement-management-panel { display: grid; gap: 9px; }
.announcement-management-panel form,
.announcement-management-panel .button { width: 100%; }

.announcement-attachments { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.announcement-attachments ul { display: grid; gap: 7px; }
.announcement-attachments li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-tint); }
.announcement-attachments li > a { min-width: 0; display: grid; }
.announcement-attachments li > a strong { overflow-wrap: anywhere; }
.announcement-attachments li > a span { color: var(--muted); font-size: .78rem; }
.announcement-read-action { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.announcement-read-action span { color: var(--muted); font-size: .82rem; }
.announcement-read-confirmed { width: fit-content; margin-top: 24px; padding: 8px 11px; border-radius: 9px; background: var(--status-success-bg); color: var(--status-success-text); font-weight: 650; }
.announcement-reread-alert { margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--status-info-bg); color: var(--status-info-text); font-weight: 650; }

.announcement-stats,
.announcement-audit { margin-top: 16px; }
.announcement-stats > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.announcement-stats h2,
.announcement-audit h2 { margin: 0; }
.announcement-stats header p { margin: 3px 0 0; color: var(--muted); }
.announcement-stats header > strong { padding: 7px 11px; border-radius: 999px; background: var(--surface-muted); color: var(--accent-strong); white-space: nowrap; }
.announcement-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.announcement-stat-row { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.announcement-stat-row span { color: var(--muted); font-size: .8rem; }
.announcement-stat-row.is-unread { background: var(--surface-tint); }
.announcement-stat-row.is-overdue { border-color: var(--priority-critical-rail); }
.announcement-audit ol { display: grid; gap: 0; margin-top: 14px; }
.announcement-audit li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.announcement-audit-dot { width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.announcement-audit li div { display: grid; }
.announcement-audit li span,
.announcement-audit li small { color: var(--muted); }
.announcement-audit li small { font-size: .76rem; }
.announcement-quick-upload { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.announcement-quick-upload-label { font-weight: 650; }
.announcement-quick-upload > .button { justify-self: start; }

.dashboard-announcements-section { border-top: 4px solid var(--accent); }
.dashboard-announcement-list { display: grid; gap: 7px; padding: 16px 20px 4px; }
.dashboard-announcement-row {
    --announcement-rail: var(--accent);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--announcement-rail);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}
.dashboard-announcement-row.is-important { --announcement-rail: var(--priority-high-rail); }
.dashboard-announcement-row.is-critical { --announcement-rail: var(--priority-critical-rail); }
.dashboard-announcement-row.is-unread { background: var(--surface-tint); border-color: var(--announcement-rail); }
.dashboard-announcement-row:hover { text-decoration: none; }
.dashboard-announcement-copy { min-width: 0; display: grid; }
.dashboard-announcement-copy strong { overflow-wrap: anywhere; }
.dashboard-announcement-copy small { color: var(--muted); }
.dashboard-section-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 0 20px 20px; color: var(--muted); font-size: .85rem; }

@media (max-width: 760px) {
    .announcement-banner { grid-template-columns: auto minmax(0, 1fr); }
    .announcement-banner-actions { grid-column: 1 / -1; flex-wrap: wrap; }
    .announcement-banner-actions .button { flex: 1 1 auto; }
    .announcement-priority-options,
    .announcement-publication-mode,
    .recipient-picker-grid,
    .announcement-details-layout,
    .announcement-stat-grid { grid-template-columns: 1fr; }
    .announcement-row { grid-template-columns: 5px minmax(0, 1fr); padding-right: 12px; }
    .announcement-row-arrow { display: none; }
    .announcement-details-header { align-items: flex-start; }
    .announcement-stats > header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
    .announcement-center-panel { position: fixed; top: 62px; right: 8px; left: 8px; width: auto; }
    .announcement-banner-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .announcement-banner-actions > a,
    .announcement-banner-actions > form:not(.announcement-banner-dismiss),
    .announcement-banner-actions .button { width: 100%; }
    .announcement-banner-actions .button { white-space: normal; }
    .announcement-banner-dismiss { justify-self: end; }
    .dashboard-announcement-row { grid-template-columns: minmax(0, 1fr) auto; }
    .dashboard-announcement-row .announcement-priority-badge { grid-column: 1 / -1; }
    .announcement-read-action { align-items: stretch; flex-direction: column; }
    .announcement-attachments li { align-items: stretch; flex-direction: column; }
    .announcement-quick-upload > .button { width: 100%; }
    .dashboard-section-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .announcement-center-panel,
    .announcement-preview-dialog { scroll-behavior: auto; }
}

/* ==========================================================================
   CHAT / WIADOMOŚCI
   ========================================================================== */

.chat-center { position: relative; }
.chat-center-panel {
    position: absolute;
    z-index: 72;
    top: calc(100% + 10px);
    right: 0;
    width: min(410px, calc(100vw - 24px));
    max-height: min(620px, calc(100dvh - 90px));
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.chat-center-panel > header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.chat-center-panel > header div { display: grid; }
.chat-center-panel > header span { color: var(--muted); font-size: .78rem; }
.chat-center-panel ul { list-style: none; margin: 0; padding: 0; }
.chat-center-panel li { border-bottom: 1px solid var(--line); }
.chat-center-panel li > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 10px 14px;
    color: var(--text);
}
.chat-center-panel li > a:hover { background: var(--surface-tint); text-decoration: none; }
.chat-center-copy,
.chat-center-meta { display: grid; min-width: 0; }
.chat-center-copy strong,
.chat-center-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-center-copy small,
.chat-center-meta { color: var(--muted); font-size: .78rem; }
.chat-center-meta { justify-items: end; gap: 5px; }
.chat-center-empty { margin: 0; padding: 24px 16px; color: var(--muted); text-align: center; }

.chat-page { min-width: 0; }
.chat-page-heading { margin-bottom: 16px; }
.chat-page-heading h1 { margin: 0; font-size: clamp(1.55rem, 2vw, 2rem); }
.chat-page-heading p { margin: 4px 0 0; color: var(--muted); }
.chat-page-heading .eyebrow { color: var(--accent-strong); font-size: .8rem; font-weight: 700; }
.chat-shell {
    display: grid;
    grid-template-columns: minmax(270px, 34%) minmax(0, 1fr);
    height: min(760px, calc(100dvh - 175px));
    min-height: 560px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.chat-sidebar {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-right: 1px solid var(--line);
    background: var(--surface-tint);
}
.chat-sidebar-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 68px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.chat-sidebar-header > div { display: grid; }
.chat-sidebar-header > div > span { color: var(--muted); font-size: .78rem; }
.chat-new-direct summary { min-height: 40px; padding: 7px 10px; list-style: none; cursor: pointer; }
.chat-new-direct summary::-webkit-details-marker { display: none; }
.chat-new-direct[open] > form {
    position: absolute;
    z-index: 8;
    top: calc(100% - 6px);
    right: 12px;
    left: 12px;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.chat-new-direct label { font-size: .82rem; font-weight: 650; }
.chat-new-direct select {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
}
.chat-conversation-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat-conversation-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 78px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}
.chat-conversation-item:hover { background: var(--surface-muted); text-decoration: none; }
.chat-conversation-item.active { background: var(--surface-muted); box-shadow: inset 4px 0 0 var(--accent); }
.chat-conversation-item.is-unread .chat-conversation-name { font-weight: 750; }
.chat-conversation-copy,
.chat-conversation-meta { display: grid; min-width: 0; }
.chat-conversation-name,
.chat-conversation-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation-preview { color: var(--muted); font-size: .8rem; }
.chat-conversation-meta { align-self: stretch; justify-items: end; align-content: center; gap: 5px; color: var(--muted); font-size: .72rem; }
.chat-online-label { color: var(--status-success-text); font-size: .72rem; font-weight: 650; }
.chat-online-label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--status-success-text); }
.chat-archive-label,
.chat-muted-label { color: var(--muted); font-size: .7rem; }
.chat-unread-count {
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.chat-empty-list,
.chat-empty-messages { display: grid; gap: 3px; padding: 28px 18px; color: var(--muted); text-align: center; }
.chat-empty-list strong,
.chat-empty-messages strong { color: var(--text); }

.chat-conversation { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; background: var(--surface); }
.chat-no-selection { align-self: center; justify-self: center; display: grid; justify-items: center; max-width: 360px; padding: 32px; text-align: center; }
.chat-no-selection-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--surface-muted); color: var(--accent); }
.chat-no-selection h2 { margin: 14px 0 4px; }
.chat-no-selection p { margin: 0; color: var(--muted); }
.chat-conversation-header {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 68px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.chat-conversation-title { min-width: 0; display: grid; flex: 1; }
.chat-conversation-title h2 { margin: 0; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation-title span { color: var(--muted); font-size: .78rem; }
.chat-mobile-back { display: none; align-items: center; min-height: 44px; }
.chat-mute-button { min-height: 40px; gap: 8px; }
.chat-readonly-notice { display: grid; gap: 2px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--status-warning-bg); color: var(--status-warning-text); font-size: .8rem; }
.chat-history { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px 16px; scroll-padding: 80px 0; }
.chat-history-top { min-height: 30px; display: grid; place-items: center; margin-bottom: 8px; }
.chat-message {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 8px;
    margin: 10px 0;
    scroll-margin-block: 90px;
}
.chat-message.is-own { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.chat-message-body { min-width: 0; width: fit-content; max-width: min(72%, 660px); padding: 9px 11px; border: 1px solid var(--line); border-radius: 13px 13px 13px 4px; background: var(--surface-tint); overflow-wrap: anywhere; }
.chat-message.is-own .chat-message-body { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 13px 13px 4px 13px; background: var(--surface-muted); }
.chat-message.is-highlighted .chat-message-body { outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent); outline-offset: 3px; }
.chat-message-body > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
.chat-message-body > header strong { font-size: .79rem; }
.chat-message-body time,
.chat-message-body > footer { color: var(--muted); font-size: .69rem; }
.chat-message-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message-body > footer { display: flex; justify-content: flex-end; gap: 8px; min-height: 15px; margin-top: 4px; }
.chat-read-receipt { color: var(--accent-strong); font-weight: 650; }
.chat-deleted-placeholder { margin: 0; color: var(--muted); font-style: italic; }
.chat-reply-quote {
    width: 100%;
    display: grid;
    gap: 1px;
    margin: 2px 0 7px;
    padding: 7px 9px;
    border: 0;
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.chat-reply-quote strong { color: var(--accent-strong); font-size: .75rem; }
.chat-reply-quote span { overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chat-message-actions .button { min-height: 32px; padding: 4px 7px; font-size: .72rem; }
.chat-message-actions .button.ghost:not(.danger):hover,
.chat-message-actions .button.ghost:not(.danger):focus-visible {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent-strong);
}
.chat-message-actions .button.ghost:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent);
    outline-offset: 2px;
}
.chat-message-actions .button.ghost.danger:hover,
.chat-message-actions .button.ghost.danger:focus-visible {
    border-color: var(--flash-error-border);
    background: var(--flash-error-bg);
    color: var(--flash-error-text);
}
.chat-attachment-list { display: grid; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }
.chat-attachment-list a { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
.chat-attachment-list a:hover { border-color: var(--accent); text-decoration: none; }
.chat-attachment-list small { color: var(--muted); }
.chat-typing { min-height: 24px; padding: 2px 16px; color: var(--muted); font-size: .78rem; }
.chat-composer { position: relative; display: grid; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.chat-composer textarea { width: 100%; min-height: 58px; max-height: 150px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface-tint); color: var(--text); font: inherit; }
.chat-composer textarea:focus { border-color: var(--focus); outline: 2px solid color-mix(in srgb, var(--focus) 34%, transparent); outline-offset: 1px; }
.chat-composer-actions { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.chat-composer .file-upload { min-width: 0; }
.chat-composer .file-upload-trigger { min-height: 40px; }
.chat-composer .file-upload-types { display: none; }
.chat-composer .file-upload-names { max-height: 76px; overflow-y: auto; }
.chat-composer-feedback { min-height: 18px; margin: 0; color: var(--muted); font-size: .78rem; }
.chat-reply-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border-left: 3px solid var(--accent); border-radius: 7px; background: var(--surface-muted); }
.chat-reply-preview > div { min-width: 0; display: grid; }
.chat-reply-preview span { overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-preview .button { min-width: 36px; min-height: 36px; padding: 4px; }

@media (max-width: 860px) {
    .chat-center-panel { position: fixed; top: 62px; right: 8px; left: 8px; width: auto; }
    .chat-shell { grid-template-columns: minmax(230px, 38%) minmax(0, 1fr); }
    .chat-message-body { max-width: 86%; }
}

@media (max-width: 700px) {
    .chat-page-heading { display: none; }
    .chat-shell { display: block; height: calc(100dvh - 152px); min-height: 460px; border-radius: 13px; }
    .chat-sidebar { height: 100%; border-right: 0; }
    .chat-page.has-active-conversation .chat-sidebar { display: none; }
    .chat-page:not(.has-active-conversation) .chat-conversation { display: none; }
    .chat-page.has-active-conversation .chat-conversation { height: 100%; }
    .chat-mobile-back { display: inline-flex; }
    .chat-conversation-header { padding-inline: 9px; }
    .chat-mute-button span { display: none; }
    .chat-mute-button { min-width: 44px; min-height: 44px; padding: 8px; }
    .chat-history { padding-inline: 10px; }
    .chat-message-body { max-width: 92%; }
    .chat-composer { padding: 8px 10px 10px; }
    .chat-composer textarea { font-size: 16px; }
    .chat-composer-actions { align-items: center; }
    .chat-composer .file-upload-status { display: none; }
    .chat-composer .button-signature { min-height: 44px; }
}

@media (max-width: 390px) {
    .chat-new-direct summary span { display: none; }
    .chat-conversation-title h2 { font-size: .92rem; }
    .chat-composer-actions { align-items: stretch; }
    .chat-composer .file-upload-trigger { min-width: 44px; padding: 8px; }
    .chat-composer .file-upload-trigger > span:last-child { display: none; }
    .chat-composer .button-signature { padding-inline: 12px; }
}

.chat-page .confirm-dialog textarea { width: 100%; min-height: 110px; resize: vertical; }

/* Ponizej 1240 px shell pokazuje dolna nawigacje (80 px); Chat miesci sie nad nia, zeby composer
   nie chowal sie pod dockiem. */
@media (max-width: 1240px) {
    html[data-dock] .chat-shell { height: min(760px, calc(100dvh - 255px - env(safe-area-inset-bottom))); min-height: 420px; }
}

@media (max-width: 700px) {
    html[data-dock] .chat-shell { height: calc(100dvh - 232px - env(safe-area-inset-bottom)); min-height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-message.is-highlighted .chat-message-body { transition: none; }
    .chat-center-trigger,
    .chat-conversation-item,
    .chat-attachment-list a { transition: none; }
}

/* Calendar Stage 4.7 — pointerowe move/resize. Afordancje istnieja tylko dla precyzyjnego
   wskaznika; mobile zachowuje dotychczasowy tap, scroll i bottom-sheet. */
@media (hover: hover) and (pointer: fine) {
    .cal-entry-interactive {
        cursor: grab;
        transition: opacity 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    }

    .cal-entry-interactive:active,
    body.is-calendar-dragging .cal-entry-interactive.is-cal-drag-source {
        cursor: grabbing;
    }

    .cal-entry-interactive:hover,
    .cal-entry-interactive:focus-visible {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent);
    }

    .cal-entry-interactive:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .cal-resize-handle {
        position: absolute;
        z-index: 4;
        left: 8px;
        right: 8px;
        bottom: 1px;
        height: 8px;
        cursor: ns-resize;
        opacity: 0;
    }

    .cal-resize-handle::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 1px;
        width: 24px;
        height: 3px;
        border-radius: 999px;
        background: currentColor;
        transform: translateX(-50%);
        opacity: .58;
    }

    .cal-entry-interactive:hover .cal-resize-handle,
    .cal-entry-interactive:focus-visible .cal-resize-handle,
    .cal-entry-interactive.is-cal-drag-source .cal-resize-handle {
        opacity: 1;
    }
}

.cal-entry.is-cal-drag-source,
.cal-allday-bar.is-cal-drag-source {
    opacity: .24;
}

.cal-entry.is-cal-saving,
.cal-allday-bar.is-cal-saving {
    opacity: .4;
    pointer-events: none;
}

.cal-interaction-ghost {
    position: fixed !important;
    z-index: 2200 !important;
    width: min(250px, calc(100vw - 32px)) !important;
    min-height: 34px;
    margin: 0 !important;
    pointer-events: none !important;
    opacity: .94 !important;
    border: 1px solid color-mix(in srgb, var(--accent) 65%, var(--line)) !important;
    border-left: 4px solid var(--accent) !important;
    border-radius: 10px !important;
    background: var(--surface) !important;
    box-shadow: 0 14px 34px rgba(35, 22, 65, .22) !important;
    transform: none !important;
}

.cal-interaction-ghost::after {
    content: attr(data-cal-ghost-label);
    display: block;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
}

[data-cal-drop-date].is-cal-drop-target {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent);
    background-color: color-mix(in srgb, var(--accent) 8%, transparent);
}

.cal-scope-dialog {
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(24, 15, 44, .3);
}

.cal-scope-dialog::backdrop {
    background: rgba(20, 14, 32, .55);
}

.cal-scope-dialog-card {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.cal-scope-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cal-scope-dialog-head h2 {
    margin: 2px 0 0;
    font-size: 1.25rem;
}

.cal-scope-dialog-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    background: var(--surface-muted);
    font-size: 1.35rem;
    cursor: pointer;
}

.cal-scope-options {
    display: grid;
    gap: 8px;
}

.cal-scope-dialog .scope-option {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.cal-interaction-toast {
    position: fixed;
    z-index: 2300;
    right: 22px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(460px, calc(100vw - 32px));
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius: 12px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 16px 44px rgba(27, 18, 46, .24);
}

.cal-interaction-toast[hidden] {
    display: none;
}

.cal-interaction-toast.is-error {
    border-color: var(--danger);
}

.cal-interaction-toast button {
    min-height: 32px;
    border: 0;
    color: var(--accent-strong);
    background: transparent;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.cal-interaction-toast [data-cal-toast-close] {
    color: var(--muted);
    font-size: 1.15rem;
}

@media (max-width: 640px), (hover: none), (pointer: coarse) {
    .cal-resize-handle,
    .cal-interaction-ghost {
        display: none !important;
    }

    .cal-interaction-toast {
        right: 12px;
        bottom: 12px;
        left: 12px;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cal-entry-interactive {
        transition: none !important;
    }
}

/* Stan zakonczony jest nadrzedna semantyka rekordu: historyczny priorytet lub termin pozostaja
   czytelne na badge'ach, ale akcent rekordu potwierdza, ze praca jest juz domknieta. W stanie
   normalnym zielona pozostaje lewa listwa; na hover/focus zielony pelny obrys wygrywa z wczesniejsza
   regula priority/overdue bez potrzeby uzywania !important. */
.work-record.is-completed:has(.status.Completed) {
    border-left-color: var(--status-success-text);
}

.work-record.is-completed:hover:has(.status.Completed),
.work-record.is-completed:focus-visible:has(.status.Completed) {
    border-color: var(--status-success-text);
}

/* UI/UX Stage 3 final dark priority micro polish: prawa strona rekordow zachowuje
   zaakceptowane, jasne badge. Ten blok dotyczy wylacznie powierzchni listy po lewej:
   ciemniejszego kontenera ikony, waskiej listwy oraz przyciemnionego semanticznego tintu.
   Wspolne selektory obejmuja Tickets i Tasks bez zmiany ich geometrii. */
html[data-theme="dark"] .work-record .record-type-icon {
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--surface-muted) 62%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}

html[data-theme="dark"] .work-record.attn-high,
html[data-theme="dark"] .work-record.attn-critical {
    background: var(--surface);
}

html[data-theme="dark"] .work-record.attn-high {
    background: linear-gradient(90deg, color-mix(in srgb, var(--priority-high-rail) 12%, var(--surface)), var(--surface) 38%);
}

html[data-theme="dark"] .work-record.attn-critical {
    background: linear-gradient(90deg, color-mix(in srgb, var(--priority-critical-rail) 16%, var(--surface)), var(--surface) 42%);
}

.record-type-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.record-type-icon svg {
    width: 20px;
    height: 20px;
}

.task-status-icon.Completed {
    color: var(--status-success-text);
    background: var(--status-success-bg);
}

.task-status-icon.Cancelled {
    color: var(--status-cancelled-text);
    background: var(--status-cancelled-bg);
}

.task-status-icon.InProgress {
    color: var(--status-warning-text);
    background: var(--status-warning-bg);
}

.work-record .task-title-line {
    align-items: center;
    gap: 5px 9px;
}

.work-record .task-number {
    font-variant-numeric: tabular-nums;
}

.work-record .task-title {
    overflow-wrap: anywhere;
    font-size: 16px;
}

.record-metadata {
    gap: 7px 16px;
    margin-top: 8px;
}

.metadata-item {
    display: inline-grid;
    grid-template-columns: auto minmax(0, auto);
    gap: 5px;
    align-items: baseline;
    min-width: 0;
}

.metadata-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.metadata-label::after {
    content: ":";
}

.metadata-item strong {
    min-width: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.ticket-metadata .metadata-category {
    flex-basis: auto;
}

.work-record .task-side {
    min-width: 160px;
}

.work-record .status,
.work-record .priority,
.detail-state-line .status,
.detail-state-line .priority {
    min-height: 26px;
    padding-inline: 9px;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.work-record .priority::before,
.detail-state-line .priority::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
}

.task-record .task-due {
    min-width: 138px;
    padding: 7px 9px;
    align-items: center;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-tint);
}

.task-record .task-due::before {
    content: "Termin";
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.task-record .task-due-date {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.work-form-page.work-form-create {
    width: min(960px, 100%);
    margin-inline: auto;
}

.work-form-panel {
    width: min(920px, 100%);
    padding: 26px 28px;
    border-radius: 16px;
}

.work-form-create .work-form-panel {
    width: 100%;
}

.work-form-panel .form {
    gap: 18px;
}

.form-section-heading {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-top: 5px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.form-section-heading:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.form-section-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--accent-strong);
    background: var(--surface-muted);
    border: 1px solid var(--work-accent-line);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
}

.form-section-heading h2 {
    margin-bottom: 2px;
    font-size: 18px;
}

.form-section-heading p {
    margin-bottom: 0;
    font-size: 13px;
}

.work-form-panel textarea {
    min-height: 170px;
}

.work-form-panel .form-actions {
    position: sticky;
    bottom: 10px;
    z-index: 4;
    margin: 6px -10px -10px;
    padding: 12px 10px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(10px);
}

.file-upload-icon,
.file-upload-icon svg {
    width: 18px;
    height: 18px;
}

/* Shared header dla Task/Ticket/Event Details. .page-header jest domyslnie flex bez wrap - z
   dlugim tytulem (np. Task test data) flex item tytulu nie mial min-width:0, wiec przycisk
   headera bywal scisniety przez tytul zamiast zawijac sie normalnie (FINAL PRE-QA UI/UX
   corrective pass, sekcje 19-20). Grid z minmax(0, 1fr) auto daje tytulowi bezpieczne miejsce
   do zawijania, a grupie przyciskow stala szerokosc auto, ktora nigdy nie jest scisniety. */
.work-detail-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
}

.work-detail-header > *:first-child {
    min-width: 0;
}

.work-detail-header h1 {
    overflow-wrap: break-word;
}

.work-detail-header > .form-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.detail-state-line {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.work-detail-layout {
    grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.85fr);
    align-items: start;
}

.work-detail-main,
.work-detail-rail {
    min-width: 0;
}

.work-detail-rail {
    align-content: start;
}

.work-detail-rail > .panel,
.task-execution-panel,
.event-info-panel {
    border-radius: 14px;
}

.ticket-detail-layout .work-detail-rail,
.task-execution-panel,
.event-info-panel {
    position: sticky;
    top: 96px;
}

/* Wspolny fioletowy top accent bocznych paneli informacyjnych (POST-4.4C, sekcje 14-16):
   Task/Ticket/Event maja ten sam wizualny sygnal "to jest panel informacyjny rekordu",
   niezaleznie od tego, ze kazdy modul dostal go w innym etapie. */
.task-execution-panel,
.case-summary-panel,
.event-info-panel {
    border-top: 4px solid var(--accent);
}

.rail-kicker {
    margin-bottom: 4px;
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 800;
}

.case-summary-panel h2,
.task-execution-panel h2,
.event-info-panel h2 {
    font-size: 20px;
}

.section-heading-with-icon {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 18px;
}

.section-heading-with-icon > span {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

.section-heading-with-icon svg {
    width: 20px;
    height: 20px;
}

.section-heading-with-icon h2 {
    margin-bottom: 2px;
}

.section-heading-with-icon p {
    margin-bottom: 0;
    font-size: 13px;
}

.section-count,
.history-disclosure summary > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding-inline: 7px;
    color: var(--accent-strong);
    background: var(--surface-muted);
    border-radius: 999px;
    font-size: 12px;
    vertical-align: middle;
}

.conversation-panel .message,
.discussion-panel .task-comment {
    border-radius: 10px;
    background: var(--surface-tint);
}

.conversation-panel .timeline {
    gap: 10px;
}

.attachments-panel {
    border-style: solid;
}

.history-disclosure {
    padding: 0;
    overflow: hidden;
}

.history-disclosure summary {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 58px;
    padding: 16px 20px;
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.history-disclosure summary::-webkit-details-marker {
    display: none;
}

.history-disclosure summary::after {
    content: "+";
    margin-left: auto;
    color: var(--accent-strong);
    font-size: 20px;
}

.history-disclosure[open] summary::after {
    content: "−";
}

.history-disclosure[open] summary {
    border-bottom: 1px solid var(--line);
}

.history-disclosure > .timeline,
.history-disclosure > p {
    margin: 0;
    padding: 16px 20px 20px;
}

.history-disclosure summary:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
}

html[data-theme="dark"] .work-page-header,
html[data-theme="dark"] .work-record,
html[data-theme="dark"] .dashboard-attention-record {
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .work-record {
        transition: none;
    }
}

@media (max-width: 900px) {
    .work-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ticket-detail-layout .work-detail-rail,
    .task-execution-panel,
    .event-info-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .work-page-header {
        min-height: 0;
        padding: 20px;
    }

    .work-page-header .button,
    .work-page-header .form-actions {
        width: 100%;
    }

    .work-page-header .form-actions .button {
        flex: 1 1 auto;
        width: auto;
    }

    .work-list-panel .segmented {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        overflow: visible;
    }

    .work-list-panel .segmented a {
        justify-content: center;
        min-width: 0;
        text-align: center;
        white-space: normal;
    }

    .search-form.work-search {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .work-search .secondary {
        grid-column: 1 / -1;
    }

    .work-record {
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: start;
        padding: 13px 13px 13px 11px;
    }

    .record-type-icon {
        width: 34px;
        height: 34px;
    }

    .work-record .task-side {
        grid-column: 2;
        align-items: flex-start;
        min-width: 0;
        text-align: left;
    }

    .work-record .task-badges {
        justify-content: flex-start;
    }

    .task-record .task-due {
        align-items: center;
        min-width: min(100%, 180px);
        text-align: center;
    }

    .record-metadata {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metadata-item {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .metadata-label::after {
        content: "";
    }

    .work-form-panel {
        padding: 20px 16px;
    }
}

@media (max-width: 430px) {
    .work-list-panel > .toolbar,
    .work-filters {
        padding-inline: 12px;
    }

    .search-form.work-search {
        grid-template-columns: minmax(0, 1fr);
    }

    .work-search .button {
        grid-column: 1;
        width: 100%;
    }

    .record-metadata {
        grid-template-columns: minmax(0, 1fr);
    }

    .work-record {
        grid-template-columns: minmax(0, 1fr);
    }

    .record-type-icon {
        display: none;
    }

    .task-record {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .task-record .task-status-icon {
        display: inline-flex;
    }

    .work-record .task-side {
        grid-column: 1;
    }

    .task-record .task-side {
        grid-column: 2;
    }

    /* Agenda dzieli klasy z rekordem Zadania, ale po ukryciu ikony nie moze zachowac jego
       mobilnej kolumny statusu 34px. Jedna kolumna oddaje cala szerokosc glownej tresci,
       a pusta prawa sekcja wydarzenia nie zostawia po sobie miejsca. */
    .cal-record.task-record {
        grid-template-columns: minmax(0, 1fr);
    }

    .cal-record.task-record .task-side {
        grid-column: 1;
    }

    .cal-record .task-side:not(:has(.task-badges > *)) {
        display: none;
    }

    .form-section-heading {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-section-heading > span {
        display: none;
    }
}

.checkbox-line input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.login-panel .checkbox-line {
    min-height: 32px;
    margin: -7px 0;
    cursor: pointer;
}

.login-panel .checkbox-line input {
    appearance: none;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background-color: var(--surface);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    cursor: pointer;
    transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.login-panel .checkbox-line:hover input {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line-strong));
    background-color: var(--surface-tint);
}

.login-panel .checkbox-line input:checked {
    border-color: var(--accent);
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.2 8.2 3 3 6.7-6.7' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'/%3E%3C/svg%3E");
}

.login-panel .checkbox-line:hover input:checked {
    border-color: var(--accent-strong);
    background-color: var(--accent-strong);
}

.login-panel .checkbox-line input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 34%, transparent);
    outline-offset: 2px;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.user-form {
    gap: 18px;
}

.form-section {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-tint);
}

.section-heading {
    display: grid;
    gap: 4px;
}

.section-heading h2,
.section-heading h3,
.section-heading p {
    margin: 0;
}

.section-heading.small h3 {
    font-size: 16px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.helper-note {
    padding: 11px 12px;
    border: 1px solid #d7c8f4;
    border-radius: 8px;
    background: var(--surface-muted);
    color: #51308f;
    font-weight: 700;
}

html[data-theme="dark"] .helper-note {
    border-color: var(--line-strong);
    color: var(--accent-strong);
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.option-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.option-card.compact {
    margin-top: 8px;
}

.option-card input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--accent);
}

.option-card strong,
.option-card small {
    display: block;
}

.option-card small {
    margin-top: 3px;
    color: var(--muted);
    font-weight: 500;
}

.membership-list {
    display: grid;
    gap: 10px;
}

.membership-list.compact {
    gap: 0;
    max-height: 360px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.membership-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 240px);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.membership-list.compact .membership-row {
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 210px);
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.membership-list.compact .membership-row:last-child {
    border-bottom: 0;
}

.membership-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.membership-role-field select {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
}

.scope-choice {
    display: grid;
    gap: 8px;
}

.permission-item {
    display: grid;
    gap: 10px;
}

.permission-item + .permission-item {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.managed-units-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.unit-picker {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.mini-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.selection-count {
    margin-left: auto;
    padding: 5px 8px;
    border: 1px solid #d7c8f4;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--accent-strong);
    font-size: 14px;
    font-weight: 800;
}

.scroll-list {
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow: auto;
    padding: 2px 4px 2px 0;
}

.unit-item {
    min-height: 32px;
}

.summary-section {
    background: var(--surface-muted);
}

.permission-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.permission-summary > div {
    padding: 12px;
    border: 1px solid #d7c8f4;
    border-radius: 8px;
    background: var(--surface);
}

.permission-summary strong {
    color: var(--accent-strong);
}

.permission-summary ul {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    padding-left: 18px;
}

.permission-summary p {
    margin: 8px 0 0;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.search-form input {
    min-height: 40px;
    width: min(330px, 100%);
    padding: 8px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
}

.filters-form {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-tint);
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.list-summary {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

/* Pagination jako JEDEN spojny control, nie dwa przyciski i tekst luzem obok siebie (FINAL
   PRE-QA UI/UX corrective pass, sekcje 28-30): wspolna wysokosc (40px, jak .button), wspolna
   ramka/tlo spinajace caly rzad, wskaznik strony jako czytelna plakietka miedzy strzalkami. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 16px;
    margin-left: auto;
    width: fit-content;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.pagination .button {
    min-height: 30px;
}

.page-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.button.disabled {
    cursor: default;
    opacity: 0.45;
    pointer-events: none;
    box-shadow: none;
}

@media (max-width: 480px) {
    /* Na waskim ekranie kontrolki moga sie zawijac, ale maja wygladac celowo - pelna szerokosc
       i wyrownanie do srodka, nie luzny tekst miedzy dwoma przyciskami (sekcja 30 zadania). */
    .pagination {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

    .pagination .button {
        flex: 1 1 auto;
    }

    .page-indicator {
        flex: 1 1 100%;
        order: 3;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pre-wrap {
    margin-bottom: 0;
    white-space: pre-wrap;
}

.reply-box {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.timeline {
    display: grid;
    gap: 12px;
}

.message,
.history-event {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.message-meta,
.history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 14px;
}

.comment-list {
    display: grid;
    gap: 12px;
}

.task-comment {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.comment-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 900;
}

.comment-content {
    min-width: 0;
}

.comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 14px;
}

.comment-meta strong {
    color: var(--text);
}

.attachment-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.attachment-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.attachment-main {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 220px;
}

.attachment-name {
    font-weight: 700;
    color: var(--text);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.attachment-meta {
    color: var(--muted);
    font-size: 14px;
    word-break: break-word;
}

.attachment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.file-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.file-upload .file-upload-input,
.field .file-upload input.file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-upload-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface-tint);
    color: var(--accent-strong);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.file-upload-trigger:hover {
    background: var(--surface-muted);
}

.file-upload .file-upload-input:focus-visible + .file-upload-trigger {
    outline: 3px solid rgba(139, 92, 246, 0.28);
    outline-offset: 2px;
}

.file-upload-icon {
    font-size: 16px;
}

.file-upload-status {
    color: var(--muted);
    font-weight: 700;
    font-size: 14px;
}

.file-upload-names {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.file-upload-name {
    color: var(--muted);
    font-size: 13px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.file-upload-name.is-removable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 6px 8px 6px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-tint);
    word-break: normal;
}

.file-upload-name > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.file-upload-remove {
    min-width: 44px;
    min-height: 44px;
    padding: 4px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--danger);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.file-upload-remove:hover { background: var(--status-critical-bg); }
.file-upload-remove:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent);
    outline-offset: 1px;
}

.file-upload-types {
    display: block;
}

.side-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-list li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.side-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.login-page {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: clamp(36px, 6vw, 76px);
    align-items: center;
    max-width: 980px;
    margin: 34px auto 72px;
}

.login-welcome {
    max-width: 430px;
    padding-left: clamp(0px, 2vw, 20px);
}

.login-welcome h1 {
    max-width: 12ch;
    margin: 0 0 18px;
    font-size: clamp(36px, 4.2vw, 54px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.login-welcome-flow {
    color: var(--accent-strong);
}

.login-welcome p {
    max-width: 42ch;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.login-panel {
    width: min(100%, 470px);
    justify-self: end;
    padding: clamp(26px, 3vw, 36px);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent));
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(74, 45, 122, 0.1), 0 1px 3px rgba(74, 45, 122, 0.05);
}

html[data-theme="dark"] .login-panel {
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42), 0 1px 3px rgba(0, 0, 0, 0.24);
}

.login-panel-intro {
    margin-bottom: 26px;
}

.login-panel-intro h2 {
    margin: 0;
    font-size: clamp(27px, 3vw, 34px);
    letter-spacing: -0.025em;
}

.app-footer {
    width: min(1180px, calc(100% - 32px));
    margin: -28px auto 28px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.empty-state {
    padding: 24px;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    color: var(--muted);
    text-align: center;
}

.task-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 12px;
    font-size: 15px;
}

.task-summary-count {
    font-weight: 800;
}

.task-summary-sep {
    color: var(--line-strong);
}

.task-summary-overdue {
    color: var(--danger);
    font-weight: 800;
}

a.task-summary-overdue:hover {
    text-decoration: underline;
}

.task-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* .task-row byla WSPOLNA baza z .dept-row, zanim powstal ujednolicony .work-record. Task/Ticket/
   Dashboard/Agenda markup nadal niesie klase .task-row OBOK .work-record (historyczny narost), a
   ta regula (display:flex, border-radius:8px, border-left:4px, wlasny hover/focus) miala TA SAMA
   specyficznosc co .work-record i wygrywala kaskada przez kolejnosc w pliku - realny .work-record
   byl wiec po cichu flex+8px+cienki obrys zamiast grid+12px z nowego systemu, a hover mieszal
   STARY plaski kolor z NOWYM kolorem semantycznym priorytetu (ten wygrywal tylko dzieki wyzszej
   specyficznosci selektorow :has()). To byla realna przyczyna, dla ktorej Dashboard "Wymaga uwagi"
   i listy Zadan/Zgloszen wygladaly rozjezdzone mimo wspolnej klasy .work-record (FINAL PRE-QA
   UI/UX corrective pass, sekcje 47-51). .work-record ma juz wlasny, kompletny system (uklad,
   hover, responsive) - .task-row zostaje odtad WYLACZNIE dla Admin/Departments (.dept-row), ktore
   nie uzywa .work-record. */
.dept-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid transparent;
    border-radius: 8px;
    background-color: var(--surface);
    color: var(--text);
    /* background-color celowo NIE jest tu animowany: przy zmianie motywu na zywo (bez
       reloadu) transition na wlasciwosci sterowanej przez custom property (--surface)
       potrafi "utknac" na starej wartosci w niektorych silnikach - potwierdzone
       odtworzeniem 2026-09-06. border-color/box-shadow nie mialy tego problemu. */
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.dept-row:hover {
    border-color: var(--line-strong);
    background-color: var(--surface-tint);
    box-shadow: var(--shadow);
    text-decoration: none;
}

.dept-row:focus-visible {
    outline: 3px solid rgba(139, 92, 246, 0.28);
    outline-offset: 2px;
    text-decoration: none;
}

/* Etap B.1 UI polish: proste drzewo dzialow/jednostek w Admin/Departments.
   Reuzywa wyglad/hover/focus .task-row (patrz wyzej) - tylko uklad wewnetrzny wiersza
   jest inny (prefiks drzewa zamiast tytul+meta). Bez biblioteki tree-view. */
.dept-tree {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.dept-row[hidden] {
    display: none;
}

.dept-prefix {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    height: 28px;
}

.dept-connector {
    color: var(--muted);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.dept-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--accent-strong);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}

.dept-toggle:hover {
    background: var(--surface-muted);
    border-color: var(--line);
}

.dept-toggle:focus-visible {
    outline: 3px solid rgba(139, 92, 246, 0.28);
    outline-offset: 1px;
}

/* Jednostka bez dzieci nie dostaje strzalki - to swiadomie tylko rezerwacja miejsca,
   zeby kolumna kodu/nazwy zaczynala sie w tym samym miejscu w kazdym wierszu. */
.dept-toggle-spacer {
    display: inline-block;
    width: 24px;
    height: 24px;
}

.dept-main {
    flex: 1 1 260px;
    min-width: 0;
}

.dept-name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.dept-code {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.dept-name {
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}

.dept-actions {
    flex: 0 0 auto;
}

.task-main {
    flex: 1 1 320px;
    min-width: 0;
}

.task-title-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}

.task-number {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.task-title {
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}

.task-row:hover .task-title {
    color: var(--accent-strong);
}

/* 1D.3: subtelny wskaznik unread comment activity, spojny z chipem .notif-type,
   ale wizualnie odrebny od pastylki terminu (.due-pill), zeby nie mieszac semantyk. */
.task-badge-comment {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-strong);
    background: var(--surface-muted);
    border-radius: 6px;
    padding: 1px 8px;
    white-space: nowrap;
}

/* Wspolny badge identyfikujacy modul w mieszanej liscie. Reuzywa powierzchnie,
   obwodke i ikonografie module kickerow Stage 3. */
.entity-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    gap: 5px;
    padding: 3px 8px 3px 6px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-strong);
    background: var(--surface-muted);
    border: 1px solid var(--work-accent-line);
    border-radius: 8px;
    white-space: nowrap;
}

.entity-type-badge svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.entity-type-badge-task {
    border-radius: 999px;
}

.task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
}

.task-meta-sep {
    color: var(--line-strong);
}

.task-side {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    text-align: right;
}

.task-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.task-due {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
    font-size: 14px;
    color: var(--text);
}

/* Wzgledna prezentacja terminu (relative due): pastylka pilnosci + mniejsza konkretna data.
   Semantyka rosnaca: soon (lagodne) -> tomorrow (zauwazalne) -> today (mocniejsze) -> overdue (mocne). */
.due-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.due-pill.due-soon {
    background: var(--due-soon-bg);
    color: var(--due-soon-text);
}

.due-pill.due-tomorrow {
    background: var(--due-tomorrow-bg);
    color: var(--warning);
}

.due-pill.due-today {
    background: var(--due-today-bg);
    color: var(--due-today-text);
}

.due-pill.due-overdue {
    background: var(--due-overdue-bg);
    color: var(--danger);
}

.due-pill.due-neutral {
    background: var(--surface-muted);
    color: var(--muted);
}

.task-due-date {
    font-size: 12px;
    color: var(--muted);
}

/* Details: konkretna data terminu obok pastylki nie powinna byc "wciiśnieta" w kolumne. */
.side-list .due-pill {
    margin-right: 6px;
}

.side-list .task-due-date {
    white-space: nowrap;
}

/* Akcent chipu typu powiadomienia, spojny z semantyka terminow. */
.notif-type.notif-type-soon {
    color: var(--due-soon-text);
    background: var(--due-soon-bg);
}

.notif-type.notif-type-today {
    color: var(--due-today-text);
    background: var(--due-today-bg);
}

.notif-type.notif-type-overdue {
    color: var(--danger);
    background: var(--due-overdue-bg);
}

.task-assignee {
    font-size: 14px;
    color: var(--text);
}

.task-assignee-label {
    color: var(--muted);
}

@media (max-width: 820px) {
    .account {
        justify-content: space-between;
        width: 100%;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    /* .work-detail-header jest grid, nie flex - flex-direction powyzej go nie dotyczy. Pojedyncza
       kolumna daje ten sam efekt: akcje ida pod tytulem (sekcja 20 zadania). */
    .work-detail-header {
        grid-template-columns: 1fr;
    }

    .grid.two,
    .login-page {
        grid-template-columns: 1fr;
    }

    .login-page {
        gap: 30px;
        max-width: 590px;
        margin-top: 24px;
    }

    .login-welcome {
        max-width: 540px;
        padding-left: 0;
    }

    .login-welcome h1 {
        max-width: none;
        font-size: clamp(34px, 7vw, 46px);
    }

    .login-panel {
        width: 100%;
        justify-self: stretch;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .membership-row {
        grid-template-columns: 1fr;
    }

    .selection-count {
        width: 100%;
        margin-left: 0;
    }

    .dept-row {
        flex-direction: column;
        align-items: stretch;
    }

    .task-main {
        flex: 0 0 auto;
    }

    /* Mniejszy krok wciecia i akcje pod spodem na pelnej szerokosci - dziecko na mobile
       nadal jest wyraznie wciete, ale nie kosztem miejsca na nazwe/akcje. */
    .dept-tree {
        --dept-indent-step: 12px;
    }

    /* flex-basis 260px z .dept-main jest myslany dla ukladu w rzad (szerokosc startowa);
       po przelaczeniu .dept-row na column (wyzej) ta sama wartosc liczylaby sie jako
       WYSOKOSC, rozciagajac wiersz o zbedna pusta przestrzen - tak samo jak przy .task-main. */
    .dept-main {
        flex: 0 0 auto;
    }

    .dept-actions {
        flex-wrap: wrap;
        width: 100%;
    }

    .dept-actions .button {
        flex: 1 1 auto;
    }

    .task-side {
        flex: 0 0 auto;
        align-items: flex-start;
        text-align: left;
    }

    .task-badges {
        justify-content: flex-start;
    }
}

.notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Powiadomienia: panel na pulpicie */
.notif-panel {
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.notif-panel-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.notif-panel-head h2 {
    margin: 0;
    font-size: 18px;
}

/* Powiadomienia: lista wierszy */
.notif-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.notif-list.compact {
    gap: 6px;
}

.notif-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    border: 1px solid var(--line);
    border-left: 4px solid transparent;
    border-radius: 8px;
    background: var(--surface);
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.notif-row.unread {
    border-left-color: var(--accent);
    background: var(--surface-tint);
}

.notif-row:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.notif-link {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    color: var(--text);
}

.notif-link:hover {
    text-decoration: none;
}

.notif-link:focus-visible {
    outline: 3px solid rgba(139, 92, 246, 0.28);
    outline-offset: 2px;
    border-radius: 8px;
}

.notif-row:hover .notif-title {
    color: var(--accent-strong);
}

.notif-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
    background: transparent;
}

.notif-row.unread .notif-dot {
    background: var(--accent);
}

.notif-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.notif-title-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: baseline;
}

.notif-type {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-strong);
    background: var(--surface-muted);
    border-radius: 6px;
    padding: 1px 8px;
    white-space: nowrap;
}

.notif-title {
    font-size: 15px;
    font-weight: 700;
    word-break: break-word;
}

.notif-row.read .notif-title {
    font-weight: 600;
}

.notif-message {
    color: var(--muted);
    font-size: 14px;
    word-break: break-word;
}

.notif-time {
    color: var(--muted);
    font-size: 13px;
}

.notif-actions {
    display: flex;
    align-items: center;
    padding: 8px 12px 8px 0;
}

.pager {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}

.pager-info {
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 820px) {
    .notif-row {
        flex-direction: column;
    }

    .notif-actions {
        padding: 0 14px 12px;
    }

    .notif-actions .button {
        width: 100%;
    }
}

/* Shell brand: istniejace, warstwowe SVG z Login Brand Intro. Anchor zachowuje stala
   geometrie kompaktowego sygnetu; absolutny viewport rozszerza sie nad topbarem, wiec
   reveal wordmarku nie zmienia wysokosci headera ani polozenia bell/account/contentu. */
.brand-reveal {
    --shell-brand-height: 45px;
    --shell-brand-collapsed: 51px;
    --shell-brand-expanded: 259px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: var(--shell-brand-collapsed);
    height: var(--shell-brand-height);
}

.brand-reveal:hover {
    text-decoration: none;
}

.brand-reveal:focus-visible {
    border-radius: 8px;
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
}

.shell-brand-viewport {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: var(--shell-brand-collapsed);
    height: var(--shell-brand-height);
    overflow: hidden;
    background: transparent;
    transition: width 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0s;
    will-change: width;
}

.brand-reveal.is-active {
    z-index: 3;
}

.brand-reveal.is-active .shell-brand-viewport {
    width: var(--shell-brand-expanded);
    transition-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
    .shell-brand-viewport {
        transition-duration: 0.16s;
        transition-delay: 0s !important;
    }
}

.shell-brand-svg,
.shell-brand-svg img {
    display: block;
    width: var(--shell-brand-expanded);
    height: var(--shell-brand-height);
}

.shell-brand-svg {
    position: absolute;
    inset: 0 auto auto 0;
    border: 0;
    pointer-events: none;
}

.shell-brand-svg-dark {
    display: none;
}

html[data-theme="dark"] .shell-brand-svg-light {
    display: none;
}

html[data-theme="dark"] .shell-brand-svg-dark {
    display: block;
}

/* ---- Brand intro animation (Stage 1 final pass) ----
   Jeden motyw ruchu, dwa miejsca: duzy, wysrodkowany na ekranie logowania (.brand-intro-mark)
   i maly, w lewym gornym rogu shellu TYLKO raz po faktycznym zalogowaniu (.brand-reveal.
   post-login-intro, patrz app.js). Oba uzywaja TEGO SAMEGO PRAWDZIWEGO assetu
   (wwwroot/images/iktel-flow-{light,dark}.png) - zero nowej grafiki. Login ma osobne,
   rozszerzone keyframes konczace sie pelnym logo; post-login zachowuje ponizsza sekwencje
   konczaca sie compact sygnetem.

   Faza w % czasu animacji (przy 1.5s to: fade-in sygnetu 0-285ms, reveal wordmarku
   285-705ms, hop 705-960ms [szczyt ~825ms], pauza 960-1125ms, schowanie 1125-1500ms):
   0%   - niewidoczny, collapsed (sam sygnet), lekko pomniejszony
   19%  - w pelni widoczny, nadal collapsed (koniec fazy 1)
   47%  - w pelni rozwiniety (koniec fazy 2 - wordmark "wysunięty")
   55%  - szczyt "hopu" (kilka px w gore)
   64%  - powrot z hopu (koniec fazy 3)
   75%  - koniec pauzy (poczatek fazy 4)
   100% - z powrotem collapsed (sam sygnet zostaje - koniec fazy 4)

   --intro-collapsed/--intro-expanded parametryzuja SZEROKOSC per-element (logowanie uzywa
   wiekszej skali niz maly shell-owy .brand-reveal), zeby nie duplikowac calego bloku
   keyframes dla dwoch rozmiarow. */
@keyframes brand-intro-sequence {
    0% {
        opacity: 0;
        width: var(--intro-collapsed);
        transform: scale(0.9) translateY(0);
    }
    19% {
        opacity: 1;
        width: var(--intro-collapsed);
        transform: scale(1) translateY(0);
    }
    47% {
        width: var(--intro-expanded);
        transform: scale(1) translateY(0);
    }
    55% {
        width: var(--intro-expanded);
        transform: scale(1) translateY(-6px);
    }
    64% {
        width: var(--intro-expanded);
        transform: scale(1) translateY(0);
    }
    75% {
        width: var(--intro-expanded);
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 1;
        width: var(--intro-collapsed);
        transform: scale(1) translateY(0);
    }
}

/* UI/UX Stage 2.2: Admin Users. Ten blok jest celowo lokalny dla katalogu
   użytkowników i wspólnego formularza Create/Edit. */
.admin-users-header > div:first-child {
    max-width: 720px;
}

.users-directory {
    padding: 0;
    overflow: hidden;
}

.users-directory .quick-filters {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-muted) 46%, var(--surface));
}

.users-table-wrap {
    width: 100%;
}

.users-table {
    width: 100%;
    table-layout: fixed;
}

.users-table th,
.users-table td {
    padding: 18px 14px;
    vertical-align: middle;
}

.users-table th:first-child,
.users-table td:first-child {
    width: 27%;
    padding-left: 20px;
}

.users-table th:nth-child(2) { width: 18%; }
.users-table th:nth-child(3) { width: 24%; }
.users-table th:nth-child(4) { width: 15%; }
.users-table th:last-child,
.users-table td:last-child {
    width: 16%;
    padding-right: 20px;
}

.user-identity {
    display: flex;
    min-width: 0;
    gap: 12px;
    align-items: center;
}

.user-avatar {
    display: inline-grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 11px;
    background: var(--surface-muted);
    color: var(--accent-strong);
    font-size: 14px;
    font-weight: 900;
}

.user-identity-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.user-identity-copy strong,
.user-identity-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-identity-copy strong {
    color: var(--text);
    font-size: 15px;
}

.user-identity-copy small,
.cell-note,
.account-type,
.access-summary small {
    color: var(--muted);
    font-size: 13px;
}

.user-meta-separator {
    margin: 0 4px;
    color: var(--line-strong);
}

.membership-chips,
.module-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.membership-chip,
.membership-more {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-tint);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.membership-more {
    border-color: transparent;
    background: var(--surface-muted);
    color: var(--accent-strong);
}

.access-summary {
    display: grid;
    gap: 6px;
}

.access-summary.is-admin {
    gap: 1px;
}

.access-summary.is-admin strong {
    color: var(--accent-strong);
}

.module-summary span:not(.cell-note) {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.module-summary i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
}

.users-table .status {
    margin-bottom: 5px;
}

.account-type {
    display: block;
    line-height: 1.3;
}

.user-row-actions {
    justify-content: flex-end;
}

.user-row-actions .button {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 13px;
}

.user-editor-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.user-form {
    gap: 20px;
}

.user-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(286px, 320px);
    gap: 22px;
    align-items: start;
}

.user-editor-main {
    display: grid;
    min-width: 0;
    gap: 18px;
}

/* One form, four local views. Hidden controls remain enabled for the shared POST. */
.user-form-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.user-form-tab {
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.user-form-tab:hover {
    background: var(--surface-tint);
    color: var(--text);
}

.user-form-tab[aria-selected="true"] {
    border-color: var(--line);
    background: var(--surface-muted);
    color: var(--accent-strong);
}

.user-form-tab:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.user-form-tab-error {
    display: inline-block;
    margin-left: 4px;
    color: var(--danger);
}

.user-form [data-user-panel][hidden] {
    display: none;
}

.user-form [data-user-panel] {
    min-width: 0;
}

@media (max-width: 780px) {
    .user-form-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.user-form-section {
    gap: 18px;
    padding: 24px;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(74, 45, 122, 0.055);
}

.user-form-section > .section-heading {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.user-form-section > .section-heading h2 {
    font-size: 19px;
}

.user-form-section .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* .field to siatka z wierszami auto - bez tego komorka rozciagnieta do wysokosci sasiada
   (np. "Nowe haslo" z tekstem pomocniczym) rozpychala input E-mail do wysokosci textarea. */
.user-form-section .form-grid > .field {
    align-content: start;
}

.account-status-control {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-tint);
    cursor: pointer;
}

.account-status-control > span,
.account-status-control strong,
.account-status-control small {
    display: block;
}

.account-status-control small {
    margin-top: 2px;
    color: var(--muted);
    font-weight: 500;
}

.account-status-control input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
}

.module-access-card {
    min-height: 88px;
    align-items: center;
    border-radius: 11px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.module-access-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: color-mix(in srgb, var(--surface-muted) 54%, var(--surface));
}

.membership-explainer {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border-left: 3px solid var(--accent);
    border-radius: 0 9px 9px 0;
    background: var(--surface-muted);
    color: var(--text);
}

.membership-explainer span {
    color: var(--muted);
    font-size: 14px;
}

.membership-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 300px;
}

.membership-picker .unit-item {
    min-height: 46px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-tint);
    cursor: pointer;
}

.membership-picker .unit-item:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
    background: var(--surface-muted);
    color: var(--accent-strong);
}

.permissions-editor {
    gap: 22px;
}

.permission-quick-config {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 11px;
    background: color-mix(in srgb, var(--surface-muted) 68%, var(--surface));
}

.permission-quick-config > div:first-child,
.permission-quick-config strong,
.permission-quick-config span {
    display: block;
}

.permission-quick-config span {
    max-width: 56ch;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
}

.permission-bulk-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 7px;
}

.permission-bulk-actions .button {
    min-height: 44px;
    padding: 8px 11px;
    font-size: 13px;
}

.permission-group {
    display: grid;
    gap: 10px;
}

.permission-group + .permission-group {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--line-strong);
}

.permission-group-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 0 2px 4px;
}

.permission-group-tools {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.permission-group-header h3 {
    margin: 0;
    font-size: 17px;
}

.permission-group-module-state {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.permission-group-module-state.is-enabled {
    color: var(--status-success-text);
}

.permission-item {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-tint);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.permission-item + .permission-item {
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid var(--line);
}

.permission-item.is-active {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: inset 3px 0 0 var(--accent);
}

.permission-item-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 11px 14px;
}

.permission-toggle {
    display: flex;
    min-width: 0;
    min-height: 44px;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
}

.permission-info-button {
    align-self: center;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    font-size: 20px;
}

.permission-info-pop {
    position: fixed;
    inset: auto;
    margin: 0;
    width: min(400px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
    font-size: 14px;
    line-height: 1.5;
}

.permission-toggle input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--accent);
}

.permission-toggle > span,
.permission-toggle strong,
.permission-toggle small {
    display: block;
}

.permission-item-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.permission-toggle strong {
    color: var(--text);
    line-height: 1.35;
}

.permission-toggle small {
    max-width: 68ch;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.45;
}

.permission-scope-preview {
    max-width: 220px;
    padding: 5px 8px;
    border-radius: 7px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.permission-item.is-active .permission-scope-preview {
    color: var(--accent-strong);
}

.permission-expand-button {
    min-height: 44px;
    padding: 7px 10px;
    white-space: nowrap;
}

.permission-expand-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.permission-details {
    padding-top: 2px;
    border-top: 1px solid var(--line);
}

.permission-details[hidden] {
    display: none;
}

.permission-scope-choice,
.permission-unit-picker {
    margin: 0 16px 16px;
}

.permission-scope-choice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
    border-top: 0;
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface-muted) 60%, var(--surface));
}

.permission-scope-choice h3 {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    color: var(--text);
    font-size: 14px;
}

.scope-option-card {
    margin-top: 0 !important;
    padding: 11px;
    background: var(--surface);
    cursor: pointer;
}

.scope-option-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.permission-unit-picker {
    padding: 14px;
    border-radius: 9px;
    box-shadow: none;
}

.permission-unit-picker .scroll-list {
    max-height: 210px;
}

.permission-details-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.permission-details-actions .button {
    min-height: 44px;
}

.user-editor-sidebar {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 12px;
}

.user-editor-sidebar .summary-section {
    padding: 20px;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.permission-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.permission-summary > .summary-block {
    display: grid;
    gap: 2px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

.permission-summary > .summary-block:last-child {
    border-bottom: 0;
}

.summary-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.permission-summary .summary-block > strong {
    color: var(--text);
}

.permission-summary .summary-block > small {
    color: var(--muted);
    font-size: 13px;
}

.user-form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.user-form-actions .button[type="submit"] {
    min-height: 44px;
}

/* Actions now sit below the panels, outside the sidebar's former sticky context. */
.user-form > .user-form-actions {
    position: static;
}

html[data-theme="dark"] .user-form-section,
html[data-theme="dark"] .user-editor-sidebar .summary-section {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .permission-item,
html[data-theme="dark"] .membership-picker .unit-item {
    background: color-mix(in srgb, var(--surface-tint) 88%, #120f19);
}

@media (max-width: 1100px) {
    .users-table th,
    .users-table td {
        padding-right: 10px;
        padding-left: 10px;
    }

    .users-table th:first-child,
    .users-table td:first-child {
        padding-left: 16px;
    }

    .users-table th:last-child,
    .users-table td:last-child {
        padding-right: 16px;
    }

    .user-editor-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-editor-sidebar {
        position: static;
        grid-template-columns: minmax(0, 1fr);
    }

    .user-form-actions {
        position: sticky;
        bottom: 12px;
        z-index: 8;
    }
}

@media (max-width: 780px) {
    .user-form-actions {
        bottom: 88px;
    }

    .users-directory {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .users-directory .quick-filters {
        margin-bottom: 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
    }

    .users-table,
    .users-table tbody,
    .users-table tr,
    .users-table td {
        display: block;
        width: 100% !important;
    }

    .users-table thead {
        display: none;
    }

    .users-table tbody {
        display: grid;
        gap: 12px;
    }

    .users-table tr {
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: var(--surface);
        box-shadow: 0 8px 22px rgba(74, 45, 122, 0.06);
    }

    .users-table td,
    .users-table td:first-child,
    .users-table td:last-child {
        padding: 10px 0;
        border: 0;
    }

    .users-table td + td {
        border-top: 1px solid var(--line);
    }

    .users-table td::before {
        display: block;
        margin-bottom: 6px;
        color: var(--muted);
        content: attr(data-label);
        font-size: 12px;
        font-weight: 800;
    }

    .users-table td:first-child::before,
    .users-table td:last-child::before {
        display: none;
    }

    .user-identity-copy small {
        white-space: normal;
    }

    .user-row-actions {
        justify-content: flex-start;
    }

    .user-form-section {
        padding: 20px;
    }

    .permission-quick-config {
        align-items: stretch;
        flex-direction: column;
    }

    .permission-item-heading {
        grid-template-columns: minmax(0, 1fr);
    }

    .permission-item-controls {
        justify-content: space-between;
        margin-left: 32px;
    }

    .permission-scope-preview {
        max-width: none;
        text-align: left;
    }
}

@media (max-width: 560px) {
    .user-form-section .form-grid,
    .membership-picker,
    .permission-scope-choice {
        grid-template-columns: minmax(0, 1fr);
    }

    .permission-scope-choice h3 {
        grid-column: auto;
    }

    .permission-group-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .permission-group-tools {
        width: 100%;
        justify-items: start;
    }

    .permission-bulk-actions {
        width: 100%;
    }

    .permission-quick-config .permission-bulk-actions .button {
        flex: 1 1 180px;
    }

    .permission-item-controls {
        align-items: stretch;
        flex-direction: column;
        margin-left: 32px;
    }

    .permission-expand-button {
        width: 100%;
    }

    .permission-scope-choice,
    .permission-unit-picker {
        margin-right: 12px;
        margin-left: 12px;
    }

    .user-form-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .user-form-actions .button {
        width: 100%;
    }
}

@keyframes brand-intro-fade-reduced {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Login Brand Intro V2. Element zachowuje docelowe miejsce w layoucie, a JS wylicza tylko
   poczatkowe przesuniecie do srodka viewportu. Dzięki temu to samo logo fizycznie wraca nad
   formularz bez podmiany elementu i bez layout shift po zakonczeniu sekwencji. */
.brand-intro {
    display: flex;
    justify-content: center;
    margin: 8px 0 28px;
}

.brand-intro-mark {
    position: relative;
    display: block;
    width: min(460px, calc(100vw - 32px));
    aspect-ratio: 3731 / 645;
    opacity: 0;
    will-change: transform, opacity;
    animation: brand-intro-mark-failsafe 0s linear 4.25s forwards;
}

.brand-intro.is-playing .brand-intro-mark {
    animation: login-brand-travel 3.75s linear both;
}

.brand-intro.is-complete .brand-intro-mark {
    opacity: 1;
    transform: none;
    will-change: auto;
}

@keyframes brand-intro-mark-failsafe {
    to {
        opacity: 1;
    }
}

.login-brand-svg,
.login-brand-svg img {
    display: block;
    width: 100%;
    height: 100%;
}

.login-brand-svg {
    position: absolute;
    inset: 0;
    border: 0;
    pointer-events: none;
}

.login-brand-svg-dark {
    display: none;
}

html[data-theme="dark"] .login-brand-svg-light {
    display: none;
}

html[data-theme="dark"] .login-brand-svg-dark {
    display: block;
}

@keyframes login-brand-travel {
    0%,
    28% {
        opacity: 1;
        transform: translate3d(var(--login-brand-symbol-x, 0), var(--login-brand-start-y, 0), 0) scale(1.04);
    }
    33%,
    82.66% {
        opacity: 1;
        transform: translate3d(var(--login-brand-logo-x, 0), var(--login-brand-start-y, 0), 0) scale(1.04);
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
    94.66%,
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-intro-mark {
        opacity: 1;
        animation: brand-intro-fade-reduced 0.25s ease both;
        transform: none;
        will-change: auto;
    }
}

/* Formularz jest nieaktywny podczas intro. Stan pending zapobiega
   pojedynczej klatce pelnego formularza przed inicjalizacja JS; failsafe odslania go także,
   gdy zewnetrzny SVG nie zdola sie zaladowac. */
.login-page.is-intro-pending {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(10px);
    animation: brand-intro-form-failsafe 0s linear 4.25s forwards;
}

.login-page.is-intro-playing {
    pointer-events: none;
    animation: brand-intro-form-in 0.40s cubic-bezier(0.16, 1, 0.3, 1) 3.30s both;
}

@keyframes brand-intro-form-in {
    from {
        opacity: 0;
        filter: blur(3px);
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes brand-intro-form-failsafe {
    to {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-page.is-intro-pending,
    .login-page.is-intro-playing {
        opacity: 1;
        animation: none;
        filter: none;
        pointer-events: auto;
        transform: none;
    }
}

/* Login jest jedynym miejscem z duzym, wysrodkowanym brand-intro - maly .brand-reveal w
   headerze bylby zdublowanym brandingiem obok niego, wiec zostaje ukryty tylko tutaj
   (:has, bez zmiany _Layout.cshtml - dziala identycznie na kazdej innej stronie). */
body:has(.login-page) .topbar {
    display: none;
}

body:has(.login-page) .app-footer {
    display: none;
}

body:has(.login-page) {
    overflow-x: hidden;
}

/* Post-login: DOKLADNIE ten sam motyw, ale odtworzony w docelowym miejscu logo w shellu
   (lewy gorny rog), nie jako osobny splash na srodku ekranu. Klasa dodawana/usuwana przez
   JS (patrz app.js, initPostLoginBrandIntro) WYLACZNIE raz, bezposrednio po realnym
   zalogowaniu (sessionStorage, patrz komentarz w JS) - normalne przejscia miedzy stronami
   i zwykle odswiezenie NIE dodaja tej klasy. */
.brand-reveal.post-login-intro {
    --intro-collapsed: var(--shell-brand-collapsed);
    --intro-expanded: var(--shell-brand-expanded);
}

.brand-reveal.post-login-intro .shell-brand-viewport {
    animation: brand-intro-sequence 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .brand-reveal.post-login-intro .shell-brand-viewport {
        animation: brand-intro-fade-reduced 0.25s ease both;
    }
}

@media (max-width: 620px) {
    .topbar {
        min-height: 73px;
        padding: 8px 16px;
    }

    .brand-reveal {
        --shell-brand-height: 43px;
        --shell-brand-collapsed: 50px;
        --shell-brand-expanded: 250px;
    }

    /* Na urzadzeniach dotykowych pozostaje kompaktowy sygnet. Fokus po przypadkowym tapie
       nie uruchamia reveal; klawiaturowy focus na szerszych viewportach nadal go obsluguje. */
    .brand-reveal.is-active .shell-brand-viewport {
        width: var(--shell-brand-collapsed);
        transition-delay: 0s;
    }
}

/* ---- Floating navigation dock (UI shell micro checkpoint, 2026-09-09) ----
   NIE sidebar/rail od gory do dolu - maly, pywajacy, pionowy panel wysrodkowany wzgledem
   wysokosci viewportu, odsuniety od lewej krawedzi, z wlasna ramka/cieniem. Frame obejmuje
   WYLACZNIE grupe ikon (5 pozycji max), nie cala wysokosc ekranu. Zastepuje odrzucony
   pelnowysokosciowy rail z Etapu Stage 1A. */
.dock {
    position: fixed;
    left: 22px;
    top: 50%;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    /* Wlasny, dopasowany cien - NIE reuzywamy wspoldzielonego --shadow (34px blur, myslany
       dla duzych kart 300px+). Na waskim ~60px panelu ten sam token dawal niewspolmiernie
       duzy, rozlany halo, ktory czytal sie jak obcy prostokat/kolumna innego koloru za
       dockiem (Human Approval FAIL). Cien tutaj jest znacznie ciasniejszy/slabszy. */
    box-shadow: 0 6px 16px rgba(74, 45, 122, 0.12), 0 1px 3px rgba(74, 45, 122, 0.08);
    transform: translateY(-50%);
    transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="dark"] .dock {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    .dock {
        transition: none;
    }
}

.dock-item-wrap {
    position: relative;
}

.dock-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--muted);
    transition: background-color 0.15s ease, color 0.15s ease, width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        justify-content 0.28s ease;
}

.dock-item-icon {
    display: flex;
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
}

.dock-item:hover,
.dock-item:focus-visible {
    background: var(--surface-muted);
    color: var(--accent-strong);
    text-decoration: none;
}

.dock-item svg {
    width: 21px;
    height: 21px;
}

/* Aktywny modul: pastelowe fioletowe tlo (duotone) + subtelny glow ikony - kontrolowany
   akcent marki, bez pulsowania/RGB (brief: rounded outline base, duotone active). */
.dock-item.active {
    background: var(--surface-muted);
    color: var(--accent-strong);
}

.dock-item.active svg {
    filter: drop-shadow(0 0 5px rgba(124, 77, 222, 0.4));
}

.dock-item-label {
    display: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

/* ---- Dock "zawsze pokazuj nazwy" (expanded) - preferencja z My Account, localStorage.
   Rosnie SZEROKOSC malego floating docka (nadal tylko ramka wokol grupy ikon, NIE pelny
   sidebar) - etykieta staje sie widoczna inline zamiast tooltipa na hover. ---- */
html[data-dock="expanded"] .dock {
    width: 196px;
}

html[data-dock="expanded"] .dock-item {
    width: 100%;
    justify-content: flex-start;
    padding: 0 13px;
}

html[data-dock="expanded"] .dock-item-label {
    display: inline;
}

html[data-dock="expanded"] .dock-tooltip {
    display: none;
}

/* Expanded dock zmienia wyłącznie własną geometrię. Shell zachowuje ten sam width/margins,
   dzięki czemu preferencja nazw nie przesuwa zawartości żadnego modułu. */
@media (min-width: 1241px) {
    html[data-dock] .shell {
        width: min(1180px, calc(100% - 258px));
        margin-right: 16px;
        margin-left: max(242px, calc((100% - 1180px) / 2));
    }
}

/* Tooltip: WYLACZNIE prosta nazwa modulu, nic wiecej (zaden dodatkowy link - to bylo
   odrzucone w Stage 1A, gdzie "Przekazane" bylo doklejone pod tooltipem "Zgloszenia"). */
.dock-tooltip {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 8px 20px rgba(74, 45, 122, 0.14);
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}

.dock-item:hover + .dock-tooltip,
.dock-item:focus-visible + .dock-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .dock-tooltip {
        transition: none;
    }
}

@media (max-width: 1240px) {
    /* Wezszy desktop, tablet i mobile maja nadrzedny responsive mode: poziomy bottom nav
       niezaleznie od zapisanej preferencji. Ta sama permission-aware struktura i ikony. */
    html[data-dock] .dock {
        top: auto;
        right: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        left: 50%;
        flex-direction: row;
        width: max-content;
        max-width: calc(100vw - 24px);
        transform: translateX(-50%);
    }

    html[data-dock] .dock-item-wrap {
        min-width: 0;
    }

    html[data-dock] .dock-item {
        justify-content: center;
        width: auto;
        min-width: 44px;
        padding: 0 12px;
    }

    html[data-dock] .dock-item-label {
        display: inline;
        font-size: 12px;
    }

    html[data-dock] .dock-tooltip {
        display: none;
    }

    html[data-dock] .shell {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    html[data-dock] .app-footer {
        margin-bottom: calc(96px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 620px) {
    /* Na waskich telefonach nazwy ustępują miejsca czytelnym ikonom. aria-label na kazdym
       linku zachowuje pelna nazwe bez ryzyka poziomego overflow. */
    html[data-dock] .dock-item {
        width: 48px;
        padding: 0;
    }

    html[data-dock] .dock-item-label {
        display: none;
    }
}

/* ---- My Account dropdown ---- */

.account-menu {
    position: relative;
}

.account-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.account-trigger:hover {
    background: var(--surface-muted);
}

.account-trigger[aria-expanded="true"] {
    background: var(--surface-muted);
    border-color: var(--line);
}


.account-trigger-name {
    max-width: 160px;
    overflow: hidden;
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 560px) {
    .account-trigger-name { max-width: 76px; font-size: 13px; }
    .account-trigger { gap: 4px; padding-inline: 6px; }
}

.account-trigger-caret {
    display: flex;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: transform 0.15s ease;
}

.account-trigger[aria-expanded="true"] .account-trigger-caret {
    transform: rotate(180deg);
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 250px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 22px 48px rgba(74, 45, 122, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.account-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .account-dropdown,
    .account-trigger-caret {
        transition: none;
    }
}

.account-dropdown-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-dropdown-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.account-dropdown-divider {
    height: 1px;
    margin: 0;
    background: var(--line);
    border: 0;
}

.menu-segmented {
    display: flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-muted);
}

.menu-segmented-option {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.menu-segmented-option svg {
    width: 15px;
    height: 15px;
}

.menu-segmented-option:hover {
    color: var(--accent-strong);
}

.menu-segmented-option[aria-pressed="true"] {
    background: var(--surface);
    color: var(--accent-strong);
    box-shadow: 0 1px 5px rgba(74, 45, 122, 0.11);
}

.account-dropdown-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

/* Dark theme: definicja badge/status/priority/due/notif - kolory pochodza juz z tokenow
   --status-*/--due-*/--flash-* w :root / html[data-theme="dark"] powyzej. Tutaj tylko
   subtelna jasna obwodka, zeby kazdy chip mial czytelna krawedz na ciemnym tle. */
html[data-theme="dark"] .status,
html[data-theme="dark"] .priority,
html[data-theme="dark"] .due-pill,
html[data-theme="dark"] .notif-type {
    border: 1px solid rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .selection-count,
html[data-theme="dark"] .permission-summary > div {
    border-color: var(--line-strong);
}

/* UI/UX Stage 2.1 final correction: Dashboard jest ekranem pierwszego kontaktu.
   Jedna mocna strefa wejscia i niezmieniony tor uwagi dominuja nad spokojniejszym
   zestawem Powiadomienia + Podsumowanie. Wszystkie selektory sa lokalne dla Pulpitu. */
#attention {
    scroll-margin-top: 150px;
}

.dashboard-canvas {
    --dashboard-welcome-start: #eee6ff;
    --dashboard-welcome-mid: #f7f2ff;
    --dashboard-welcome-end: #ffffff;
    --dashboard-welcome-edge: var(--accent);
    --dashboard-filter-active: var(--accent);
    --dashboard-elevation: 0 16px 40px rgba(74, 45, 122, 0.08);
    --dashboard-hero-elevation: 0 22px 52px rgba(74, 45, 122, 0.12);
    display: grid;
    gap: 24px;
}

.dashboard-canvas > *,
.dashboard-workspace > *,
.dashboard-attention-layout > * {
    min-width: 0;
}

.dashboard-welcome {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    min-height: 190px;
    padding: 32px 34px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 18px;
    background: linear-gradient(128deg, var(--dashboard-welcome-start) 0%, var(--dashboard-welcome-mid) 58%, var(--dashboard-welcome-end) 100%);
    box-shadow: var(--dashboard-hero-elevation);
}

.dashboard-welcome::before {
    content: "";
    position: absolute;
    inset: 24px auto 24px 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: var(--dashboard-welcome-edge);
}

.dashboard-welcome-copy {
    max-width: 610px;
}

.dashboard-welcome h1 {
    margin-bottom: 18px;
    font-size: clamp(38px, 5vw, 52px);
    line-height: 1;
    letter-spacing: -0.045em;
}

.dashboard-greeting {
    margin-bottom: 4px;
    color: var(--text);
    font-size: clamp(21px, 2.3vw, 27px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.dashboard-welcome-text {
    max-width: 520px;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 15px;
}

.dashboard-current-date {
    display: inline-flex;
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 750;
}

.dashboard-welcome-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

.dashboard-attention-signal {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 210px;
    padding-left: 24px;
    border-left: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
    color: var(--text);
}

.dashboard-attention-signal:hover {
    text-decoration: none;
}

.dashboard-attention-count {
    color: var(--accent-strong);
    font-size: 48px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.dashboard-attention-copy {
    display: flex;
    flex-direction: column;
    max-width: 150px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.dashboard-attention-copy strong {
    color: var(--text);
    font-size: 14px;
}

.dashboard-attention-signal:hover .dashboard-attention-copy strong,
.dashboard-attention-signal:focus-visible .dashboard-attention-copy strong {
    color: var(--accent-strong);
}

.dashboard-attention-signal:focus-visible,
.dashboard-text-link:focus-visible,
.dashboard-attention-filter:focus-visible,
.dashboard-activity-item:focus-visible,
.dashboard-item:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 36%, transparent);
    outline-offset: 2px;
    text-decoration: none;
}

.dashboard-workspace {
    display: grid;
    gap: 24px;
    align-items: start;
}

.dashboard-workspace.has-two-columns {
    grid-template-columns: minmax(0, 1.72fr) minmax(300px, 0.88fr);
}

.dashboard-workspace.single-column {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-overview {
    display: grid;
    gap: 24px;
    align-items: start;
}

.dashboard-overview.has-two-columns {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
}

.dashboard-overview.single-column {
    grid-template-columns: minmax(0, 1fr);
}

.dashboard-overview-inner {
    padding: 24px 26px 26px;
}

.dashboard-primary {
    display: grid;
    gap: 24px;
}

.dashboard-section {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--dashboard-elevation);
}

.dashboard-section-header,
.dashboard-rail-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.dashboard-section-header {
    padding: 24px 26px 20px;
    border-bottom: 1px solid var(--line);
}

.dashboard-section-header h2,
.dashboard-rail-header h2 {
    margin-bottom: 3px;
    font-size: 21px;
    letter-spacing: -0.015em;
}

.dashboard-section-header p,
.dashboard-rail-header p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 13px;
}

.dashboard-section-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--surface-muted);
    color: var(--accent-strong);
    font-size: 19px;
    font-weight: 800;
}

.dashboard-attention-layout {
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr);
}

.dashboard-attention-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 14px;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-muted) 52%, var(--surface));
}

.dashboard-attention-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 8px 10px 8px 12px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.dashboard-attention-filter strong {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    color: var(--text);
    font-size: 12px;
}

.dashboard-attention-filter:hover {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--accent-strong);
    text-decoration: none;
}

.dashboard-attention-filter.active {
    background: var(--dashboard-filter-active);
    color: #fff;
}

.dashboard-attention-filter.active strong {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.dashboard-attention-filter:not(.active):active,
.dashboard-activity-item:active,
.dashboard-item:active {
    background: var(--surface-muted);
}

.dashboard-attention-stream {
    padding: 8px 20px 18px;
}

.dashboard-attention-list,
.dashboard-record-list {
    gap: 8px;
}

.dashboard-attention-list li + li,
.dashboard-record-list li + li {
    border-top: 0;
}

.dashboard-attention-list .dashboard-attention-record {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    gap: 10px 16px;
    margin: 0;
    /* padding-left compensates the real border-left the same way .work-record does (see there) -
       14px instead of the other sides' 16px, since box-sizing:border-box lets the 3px border eat
       into content space. Top/right/bottom are declared as longhands, deliberately leaving
       border-left untouched, so the shared .work-record/.attn-high/.attn-critical rules below
       keep control of border-left-width/color here instead of a `border` shorthand resetting it
       back to 1px/var(--line) (FINAL SEMANTIC LEFT BORDER FIX). */
    padding: 14px;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(74, 45, 122, 0.035);
    isolation: isolate;
}

.dashboard-attention-record .task-side {
    min-width: 148px;
}

/* Dashboard "Wymaga uwagi" shares the exact same real border-left mechanism as the full Task/
   Ticket lists (FINAL SEMANTIC LEFT BORDER FIX): .dashboard-attention-record carries .work-record,
   so border-left-width/color/rounded-corner behavior all come from the rules above - no
   dashboard-specific color rule needed here. */

.dashboard-attention-record:has(.dashboard-attention-due-column) {
    grid-template-columns: minmax(0, 1fr) minmax(152px, 0.52fr) auto;
    align-items: center;
}

.dashboard-attention-due-column {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 3px;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-attention-due-label {
    font-size: 10px;
    font-weight: 800;
}

.dashboard-attention-due-column .task-due-date {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dashboard-attention-list .task-title {
    font-weight: 750;
}

.dashboard-attention-stream .attention-more {
    margin: 0;
    font-size: 13px;
}

.dashboard-attention-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    margin: 14px 6px 0;
}

.dashboard-attention-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-left: auto;
}

.dashboard-attention-all {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 800;
}

.dashboard-attention-all:hover {
    color: var(--text);
    text-decoration: none;
}

.dashboard-attention-all:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 36%, transparent);
    outline-offset: 2px;
}

.dashboard-section-header-compact {
    align-items: center;
}

.dashboard-upcoming-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 16px 20px 20px;
    list-style: none;
}

.dashboard-upcoming-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 9px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 650;
}

.dashboard-upcoming-legend > span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.dashboard-upcoming-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
}

.dashboard-upcoming-legend-dot.is-mine {
    background: var(--status-success-text);
}

.dashboard-upcoming-event {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 76px;
    padding: 11px 14px 11px 12px;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 8%, var(--surface)) 0%, var(--surface) 58%);
    transition: border-color .16s ease;
}

.dashboard-upcoming-event.is-more-mine {
    border-left-color: var(--status-success-text);
    background: linear-gradient(110deg, color-mix(in srgb, var(--status-success-text) 11%, var(--surface)) 0%, var(--surface) 58%);
}

.dashboard-upcoming-event:hover,
.dashboard-upcoming-event:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    text-decoration: none;
}

.dashboard-upcoming-event.is-more-mine:hover,
.dashboard-upcoming-event.is-more-mine:focus-visible {
    border-color: color-mix(in srgb, var(--status-success-text) 55%, var(--line));
}

.dashboard-upcoming-date {
    display: grid;
    min-width: 92px;
    padding-right: 12px;
    place-items: center;
    align-content: center;
    align-self: stretch;
    border-right: 1px solid var(--line);
    color: var(--muted);
    line-height: 1.05;
}

.dashboard-upcoming-date strong {
    color: var(--text);
    font-size: 1.35rem;
}

.dashboard-upcoming-date span {
    font-size: .72rem;
    line-height: 1.4;
    white-space: nowrap;
}

.dashboard-upcoming-main,
.dashboard-upcoming-meta {
    min-width: 0;
}

.dashboard-upcoming-main {
    display: grid;
    gap: 7px;
}

.dashboard-upcoming-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-upcoming-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: var(--muted);
    font-size: .83rem;
}

.dashboard-text-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 44px;
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 800;
}

.dashboard-text-link:hover {
    color: var(--text);
    text-decoration: none;
}

.dashboard-record-list {
    padding: 0 20px 10px;
}

.dashboard-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 18px;
    align-items: center;
    padding: 16px 8px 16px 12px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    transition: background-color 0.12s ease;
}

.dashboard-item:hover {
    background: var(--surface-tint);
    text-decoration: none;
}

.dashboard-item:hover .task-title {
    color: var(--accent-strong);
}

.dashboard-item.attn-high {
    border-left-color: var(--warning);
}

.dashboard-item.attn-critical {
    border-left-color: var(--danger);
}

.dashboard-item-main {
    min-width: 0;
}

.dashboard-item-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    min-width: 0;
}

.dashboard-item-badges,
.dashboard-item-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px 9px;
}

.dashboard-item-footer {
    color: var(--muted);
    font-size: 12px;
}

.dashboard-rail {
    overflow: hidden;
    padding: 0 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-muted) 52%, var(--surface));
    box-shadow: var(--dashboard-elevation);
}

.dashboard-rail-section {
    padding: 24px 0;
}

.dashboard-rail-section + .dashboard-rail-section {
    border-top: 1px solid var(--line);
}

.dashboard-rail-header {
    align-items: center;
    margin-bottom: 15px;
}

.dashboard-notifications-section,
.dashboard-summary-section {
    min-height: 100%;
}

.dashboard-summary-header {
    margin-bottom: 18px;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-muted) 62%, var(--surface));
}

.dashboard-metric {
    display: flex;
    min-width: 0;
    min-height: 70px;
    padding: 14px 15px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dashboard-metric:nth-child(even) {
    border-left: 1px solid var(--line);
}

.dashboard-metric:nth-child(n + 3) {
    border-top: 1px solid var(--line);
}

.dashboard-metric dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.dashboard-metric dd {
    margin: 0;
    color: var(--accent-strong);
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.dashboard-metric-critical dd {
    color: var(--danger);
}

.dashboard-task-progress {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.dashboard-rail .dashboard-record-list {
    padding: 0;
}

.dashboard-task-list .dashboard-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding-right: 6px;
}

.dashboard-task-list .dashboard-item-status {
    align-items: flex-start;
}

.dashboard-task-list .dashboard-item-badges,
.dashboard-task-list .dashboard-item-footer {
    justify-content: flex-start;
}

.dashboard-empty {
    margin: 16px 20px 20px;
    padding: 18px 20px;
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 14px;
    text-align: left;
}

.dashboard-empty-compact {
    margin: 0;
    padding: 16px;
}

.dashboard-activity-feed {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-activity-feed li + li {
    border-top: 1px solid var(--line);
}

.dashboard-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 6px;
    margin: 0 -6px;
    border-radius: 7px;
    color: var(--text);
}

.dashboard-activity-item:hover {
    background: color-mix(in srgb, var(--surface) 58%, transparent);
    text-decoration: none;
}

.dashboard-activity-rail {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--accent);
}

.dashboard-activity-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dashboard-activity-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 8px;
}

.dashboard-activity-type {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.dashboard-activity-type.notif-type-soon {
    color: var(--due-soon-text);
    background: var(--due-soon-bg);
}

.dashboard-activity-type.notif-type-today {
    color: var(--due-today-text);
    background: var(--due-today-bg);
}

.dashboard-activity-type.notif-type-overdue {
    color: var(--danger);
    background: var(--due-overdue-bg);
}

.dashboard-activity-title {
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}

.dashboard-activity-item:hover .dashboard-activity-title {
    color: var(--accent-strong);
}

.dashboard-activity-time {
    color: var(--muted);
    font-size: 12px;
}

.dashboard-stats-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.dashboard-stats-header h3 {
    margin-bottom: 3px;
    font-size: 16px;
}

.dashboard-stats-header p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-completed-count {
    padding: 5px 8px;
    border-radius: 7px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.dashboard-stats-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.dashboard-stats-headline {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dashboard-stats-headline strong {
    color: var(--accent-strong);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.dashboard-stats-headline span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-stats-detail {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
}

.dashboard-stats-bar {
    display: flex;
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
}

.dashboard-stats-segment {
    height: 100%;
}

.dashboard-stats-segment.on-time,
.dashboard-stats-swatch.on-time {
    background: var(--status-success-text);
}

.dashboard-stats-segment.late,
.dashboard-stats-swatch.late {
    background: var(--danger);
}

.dashboard-stats-segment.no-due,
.dashboard-stats-swatch.no-due {
    background: var(--line-strong);
}

.dashboard-stats-legend {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-stats-legend strong {
    float: right;
    margin-left: 10px;
    color: var(--text);
}

.dashboard-stats-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 3px;
}

html[data-theme="dark"] .dashboard-canvas {
    --dashboard-welcome-start: #312348;
    --dashboard-welcome-mid: #251d36;
    --dashboard-welcome-end: #1d1927;
    --dashboard-welcome-edge: #7c4dde;
    --dashboard-filter-active: #6742c0;
    --dashboard-elevation: 0 18px 42px rgba(0, 0, 0, 0.25);
    --dashboard-hero-elevation: 0 24px 54px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .dashboard-welcome {
    border-color: rgba(167, 139, 250, 0.22);
    box-shadow: var(--dashboard-hero-elevation);
}

html[data-theme="dark"] .dashboard-section,
html[data-theme="dark"] .dashboard-rail {
    border-color: rgba(199, 181, 255, 0.12);
    box-shadow: var(--dashboard-elevation);
}

html[data-theme="dark"] .dashboard-rail {
    background: color-mix(in srgb, var(--surface-muted) 62%, var(--surface));
}

html[data-theme="dark"] .dashboard-attention-nav {
    background: color-mix(in srgb, var(--surface-muted) 68%, var(--surface));
}

@media (max-width: 1100px) {
    .dashboard-workspace.has-two-columns {
        grid-template-columns: minmax(0, 1.65fr) minmax(290px, 0.9fr);
        gap: 20px;
    }

    .dashboard-welcome {
        padding: 28px;
    }

    .dashboard-welcome-status {
        gap: 18px;
    }

    .dashboard-attention-signal {
        min-width: 188px;
        padding-left: 18px;
    }

    .dashboard-overview.has-two-columns {
        grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .dashboard-workspace.has-two-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-rail {
        padding: 0 24px;
    }

    .dashboard-task-list .dashboard-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dashboard-task-list .dashboard-item-status {
        align-items: flex-end;
    }

    .dashboard-task-list .dashboard-item-badges,
    .dashboard-task-list .dashboard-item-footer {
        justify-content: flex-end;
    }

    .dashboard-overview.has-two-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-attention-record:has(.dashboard-attention-due-column) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dashboard-attention-due-column {
        grid-column: 1;
        grid-row: 2;
    }

    .dashboard-attention-record:has(.dashboard-attention-due-column) .task-side {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 720px) {
    .dashboard-canvas {
        gap: 18px;
    }

    .dashboard-welcome {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        min-height: 0;
        padding: 26px 24px;
    }

    .dashboard-welcome-status {
        justify-content: space-between;
    }

    .dashboard-attention-signal {
        min-width: 0;
        padding-left: 0;
        border-left: 0;
    }

    .dashboard-attention-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-attention-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .dashboard-section-header {
        padding: 21px 20px 18px;
    }

    .dashboard-attention-stream,
    .dashboard-record-list {
        padding-right: 14px;
        padding-left: 14px;
    }

    .dashboard-overview-inner {
        padding: 21px 20px 22px;
    }

    .dashboard-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-item-status {
        align-items: flex-start;
    }

    .dashboard-item-badges,
    .dashboard-item-footer {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .dashboard-welcome {
        padding: 24px 20px;
        border-radius: 14px;
    }

    .dashboard-welcome-status {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-attention-signal {
        justify-content: flex-start;
    }

    .dashboard-welcome-status .button-signature {
        align-self: flex-start;
    }

    .dashboard-attention-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-section,
    .dashboard-rail {
        border-radius: 14px;
    }

    .dashboard-section-header,
    .dashboard-rail-header {
        gap: 10px;
    }

    .dashboard-section-header {
        align-items: flex-start;
    }

    .dashboard-section-total {
        min-width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 17px;
    }

    .dashboard-attention-list .dashboard-attention-record {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-attention-record:has(.dashboard-attention-due-column) .dashboard-attention-due-column,
    .dashboard-attention-record:has(.dashboard-attention-due-column) .task-side {
        grid-column: 1;
        grid-row: auto;
    }

    .dashboard-attention-record .task-side {
        grid-column: 1;
        align-items: flex-start;
        min-width: 0;
        text-align: left;
    }

    .dashboard-attention-record .task-badges {
        justify-content: flex-start;
    }

    .dashboard-rail {
        padding: 0 18px;
    }

    .dashboard-task-list .dashboard-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-task-list .dashboard-item-status {
        align-items: flex-start;
    }

    .dashboard-task-list .dashboard-item-badges,
    .dashboard-task-list .dashboard-item-footer {
        justify-content: flex-start;
    }

    .dashboard-stats-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-metric:nth-child(even) {
        border-left: 0;
    }

    .dashboard-metric:nth-child(n + 2) {
        border-top: 1px solid var(--line);
    }
}

/* ============================================================================
   KALENDARZ (Etap 4.2 - read-only Month / Week / Day / Agenda)

   Kalendarz nalezy do tego samego jezyka wizualnego co Zgloszenia i Zadania: te same tokeny
   powierzchni, linii, promieni i cieni, ten sam fiolet marki, te same badge statusu/priorytetu.
   Zadnego generycznego, bootstrapowego kalendarza i zadnego obcego komponentu.

   Dwie zasady przewijaja sie przez caly ten blok:

   1. GEOMETRIA CZASU LICZY SIE W CSS, NIE NA SERWERZE. Serwer podaje wylacznie liczby calkowite
      (minuty od polnocy w --cal-offset, liczba kolumn w --cal-day-count, liczba wierszy pasa
      all-day w --cal-allday-rows), a piksele wylicza calc(). Projekt mial juz potwierdzony blad
      "pl-PL decimal comma -> niepoprawny procent w inline style"; tutaj nie da sie go powtorzyc,
      bo zadna wartosc ulamkowa nie przechodzi przez serwer.

   2. KOLOR NIGDY NIE JEST JEDYNYM NOSNIKIEM INFORMACJI. Priorytet i rodzaj wpisu rozroznia
      KSZTALT znacznika (.cal-entry-glyph: kolo / romb / trojkat / pierscien / pasek), a pelny
      opis slowny zawsze siedzi w accessible name wpisu.
   ============================================================================ */

.work-module-calendar .cal-page-header {
    gap: 18px;
}

.cal-header-note {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 0;
}

/* Wejscie do formularza wydarzenia (Etap 4.3A). Tworzenie wprost z siatki - klikniecie pustego
   slotu i prefill daty - nalezy do Etapu 4.3C. */
.cal-header-actions {
    display: flex;
    margin: 10px 0 0;
}

.cal-range-nav {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    align-items: center;
}

.cal-nav-step {
    width: 42px;
    padding: 0;
}

.cal-nav-today {
    font-weight: 800;
}

.cal-toolbar {
    gap: 12px;
    padding: 16px 16px 0;
    margin-bottom: 0;
}

.cal-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Przelacznik "Pokaz zadania zespolu" pojawia sie WYLACZNIE u osob, ktore i tak maja prawo
   ogladac cudze zadania (Tasks.ViewUnitTasks z niepustym zakresem).
   Stan wlaczony/wylaczony jest czytelny ksztaltem pola wyboru i znacznikiem, nie samym kolorem,
   a pelny stan niesie accessible name linku. */
.cal-team-toggle-form {
    display: contents;
}

/* Od korekty Human Approval przelacznik jest <button type="submit"> w formularzu POST, a nie
   linkiem - stad reset przycisku. Wyglad pozostaje dokladnie ten sam, ktory zostal zaakceptowany. */
.cal-team-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 0 14px;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.cal-team-toggle:hover {
    border-color: var(--line-strong);
    color: var(--text);
    text-decoration: none;
}

.cal-team-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 2px;
}

.cal-team-toggle.is-on {
    border-color: var(--accent);
    background: var(--surface-muted);
    color: var(--accent-strong);
}

.cal-team-toggle-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--line-strong);
    border-radius: 5px;
}

.cal-team-toggle.is-on .cal-team-toggle-box {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
}

.cal-team-toggle-box svg {
    width: 11px;
    height: 11px;
}

.cal-scope-note {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 12px 0 0;
    padding: 0 16px;
    color: var(--muted);
    font-size: 13px;
}

/* ---- Bezposredni wybor daty (sekcja 4 zadania Etapu 4.2) -------------------
   Natywny input date/month zamiast wlasnego widgetu - zero zaleznosci, pelna klawiatura i
   dostepnosc "za darmo". Formularz submituje sie GET-em wprost do tej samej strony; JS (patrz
   app.js) dodaje wylacznie autosubmit na "change", przycisk zostaje jawnym fallbackiem. */
.cal-date-jump {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: 2px;
}

.cal-date-jump-input {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
}

.cal-date-jump-input:hover {
    border-color: var(--line-strong);
}

.cal-date-jump-input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 1px;
}

.cal-date-jump-go {
    width: 38px;
    min-height: 38px;
    padding: 0;
}

/* ---- Wspolne akcenty wpisow -------------------------------------------------
   Kazdy wariant ustawia wlasny zestaw zmiennych, a reszta regul jest wspolna. Dzieki temu
   dolozenie przyszlego wariantu (np. wydarzenie odwolane w 4.3) to jeden blok zmiennych,
   a nie kopia calego komponentu. */

.cal-accent-task {
    --cal-entry-strong: var(--accent);
    --cal-entry-line: color-mix(in srgb, var(--accent) 26%, var(--line));
    --cal-entry-bg: color-mix(in srgb, var(--accent) 7%, var(--surface));
    --cal-entry-bg-hover: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.cal-accent-high {
    --cal-entry-strong: var(--priority-high-rail);
    --cal-entry-line: color-mix(in srgb, var(--priority-high-rail) 40%, var(--line));
    --cal-entry-bg: color-mix(in srgb, var(--priority-high-rail) 10%, var(--surface));
    --cal-entry-bg-hover: color-mix(in srgb, var(--priority-high-rail) 18%, var(--surface));
}

.cal-accent-critical {
    --cal-entry-strong: var(--priority-critical-rail);
    --cal-entry-line: color-mix(in srgb, var(--priority-critical-rail) 44%, var(--line));
    --cal-entry-bg: color-mix(in srgb, var(--priority-critical-rail) 11%, var(--surface));
    --cal-entry-bg-hover: color-mix(in srgb, var(--priority-critical-rail) 19%, var(--surface));
}

.cal-accent-overdue {
    --cal-entry-strong: var(--danger);
    --cal-entry-line: color-mix(in srgb, var(--danger) 45%, var(--line));
    --cal-entry-bg: color-mix(in srgb, var(--danger) 10%, var(--surface));
    --cal-entry-bg-hover: color-mix(in srgb, var(--danger) 18%, var(--surface));
}

.cal-accent-event {
    --cal-entry-strong: var(--accent-strong);
    --cal-entry-line: color-mix(in srgb, var(--accent-strong) 38%, var(--line));
    --cal-entry-bg: color-mix(in srgb, var(--accent-strong) 13%, var(--surface));
    --cal-entry-bg-hover: color-mix(in srgb, var(--accent-strong) 21%, var(--surface));
}

/* Wydarzenie ODWOLANE (Etap 4.3C). Zostaje w kalendarzu na swoim terminie, ale przestaje wygladac
   jak aktywny termin: neutralny, przygaszony akcent zamiast fioletu marki.

   Swiadomie NIE czerwien alarmowa - odwolanie jest informacja historyczna ("to sie nie odbedzie"),
   a nie bledem systemu ani czyms, co wymaga natychmiastowej reakcji. Informacja nie idzie tez samym
   kolorem: tytul jest przekreslony, karta niesie slowo "Odwolane" tam, gdzie jest na nie miejsce,
   a accessible name wpisu zawiera je zawsze. */
.cal-accent-cancelled {
    --cal-entry-strong: var(--muted);
    --cal-entry-line: var(--line-strong);
    --cal-entry-bg: var(--surface-muted);
    --cal-entry-bg-hover: var(--surface-tint);
}

.cal-entry {
    box-sizing: border-box;
    display: flex;
    gap: 7px;
    align-items: flex-start;
    width: 100%;
    min-height: 24px;
    padding: 4px 8px;
    overflow: hidden;
    border: 1px solid var(--cal-entry-line);
    border-radius: 8px;
    background: var(--cal-entry-bg);
    color: var(--text);
    font-size: 12px;
    line-height: 1.32;
    text-align: left;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.cal-entry:hover {
    border-color: var(--cal-entry-strong);
    background: var(--cal-entry-bg-hover);
    text-decoration: none;
}

.cal-entry:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 1px;
}

/* Wydarzenie dostaje gruba listwe po lewej, zadanie nie - rozroznienie rodzaju jest wiec
   widoczne takze bez rozrozniania kolorow. Odwolane wydarzenie zachowuje te sama listwe:
   zmienia sie jego STATUS, nie rodzaj. */
.cal-entry.cal-accent-event,
.cal-entry.cal-accent-cancelled {
    border-left-width: 4px;
}

/* Odwolane: przekreslony tytul + przygaszona cala karta. Przekreslenie nie jest jedynym nosnikiem
   (patrz .cal-entry-cancelled i accessible name), wiec dziala takze dla czytnikow ekranu. */
.cal-entry.is-cancelled .cal-entry-title,
.cal-day-pop-item.is-cancelled .cal-day-pop-title,
.cal-allday-bar.is-cancelled .cal-allday-bar-text,
.task-title.is-cancelled {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.cal-entry.is-cancelled .cal-entry-title,
.cal-entry.is-cancelled .cal-entry-time {
    color: var(--muted);
}

/* Segment wydarzenia przechodzacego przez polnoc: krawedz od strony kontynuacji jest PLASKA i
   przerywana, zeby uklad mowil "to sie nie zaczyna/nie konczy tutaj" niezaleznie od tekstu. */
.cal-entry.is-continued {
    border-top-style: dashed;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.cal-entry.is-continuing {
    border-bottom-style: dashed;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Ksztalt znacznika niesie priorytet/rodzaj: kolo = zadanie zwykle, romb = wysoki,
   trojkat = krytyczny, pierscien = po terminie, pionowy pasek = wydarzenie. */
.cal-entry-glyph {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 4px;
    background: var(--cal-entry-strong);
}

.cal-accent-task .cal-entry-glyph {
    border-radius: 50%;
}

.cal-accent-high .cal-entry-glyph {
    border-radius: 2px;
    transform: rotate(45deg);
}

.cal-accent-critical .cal-entry-glyph {
    width: 0;
    height: 0;
    background: none;
    border-right: 5px solid transparent;
    border-bottom: 9px solid var(--cal-entry-strong);
    border-left: 5px solid transparent;
}

.cal-accent-overdue .cal-entry-glyph {
    border: 3px solid var(--cal-entry-strong);
    border-radius: 50%;
    background: none;
}

.cal-accent-event .cal-entry-glyph,
.cal-accent-cancelled .cal-entry-glyph {
    width: 4px;
    height: 14px;
    margin-top: 2px;
    border-radius: 2px;
}

/* Klodka wydarzenia prywatnego: mala plytka na koncu linii tytulu.

   Human Approval 4.3C: poprzednia wersja byla goła ikona 12 px w kolorze --muted i w kompaktowym
   wpisie Miesiaca gubila sie w tle karty. Plytka niesie wlasne tlo (12% koloru tekstu NA tym, co
   jest pod spodem), wiec odcina sie od kazdego wariantu akcentu - takze od przygaszonej karty
   odwolanej - i czyta sie tak samo przy krotkim jak przy dlugim, ucietym wielokropkiem tytule.
   Swiadomie nadal NIE badge "Prywatne": to ma byc przypomnienie dla autora, nie ostrzezenie.

   Znaczenie nie idzie ani samym kolorem, ani sama ikona: accessible name calego wpisu zawiera
   slowo "prywatne" (CalendarPresentation.AccessibleName).

   flex: 0 0 auto + staly rozmiar = klodka nigdy nie wypycha tytulu; to tytul sie skraca. */
.cal-entry-lock {
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--text) 12%, transparent);
    color: var(--text);
}

.cal-entry-lock svg {
    width: 11px;
    height: 11px;
}

/* Tydzien: linia wpisu jest kolumna (godzina nad tytulem), wiec klodka staje sie wlasnym wierszem.
   align-self steruje tam osia POZIOMA - "center" zepchnalby ja na srodek waskiej kolumny dnia. */
.cal-entry-week .cal-entry-lock {
    align-self: flex-start;
}

/* Slowny status odwolania na karcie, tam gdzie jest na niego miejsce (Dzien, Tydzien). */
.cal-entry-cancelled {
    flex: 0 0 auto;
    padding: 0 7px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface-tint);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.cal-entry-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cal-entry-line {
    display: flex;
    gap: 6px;
    align-items: baseline;
    min-width: 0;
}

.cal-entry-time {
    flex: 0 0 auto;
    color: var(--cal-entry-strong);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.cal-entry-title {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Wariant tygodnia (korekta Human Approval, sekcja 8) --------------------
   Marker byl mikroskopijny i ucinal tytul po kilku znakach. Nadal JEST markerem terminu, a nie
   blokiem trwania - nie rozciaga sie od 09:00 do 10:00 i nie udaje czasu trwania - ale dostaje
   tyle miejsca, zeby dalo sie odczytac godzine i realna czesc tytulu. */
.cal-entry-week {
    min-height: 0;
    padding: 5px 7px;
    font-size: 11.5px;
}

/* Godzina przechodzi nad tytul: w kolumnie szerokosci ~130 px uklad "godzina + tytul" w jednej
   linii zostawial tytulowi kilkanascie pikseli. Pionowo tytul dostaje cala szerokosc kolumny. */
.cal-entry-week .cal-entry-line {
    flex-direction: column;
    gap: 1px;
    align-items: stretch;
}

.cal-entry-week .cal-entry-title {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 650;
    line-height: 1.28;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

/* ---- Wariant Miesiaca: 1-2 wpisy wprost (Human Approval follow-up, sekcja 9) ----------------
   Poprzednio "compact" nie mial wlasnej klasy i dziedziczyl wylacznie z bazowego .cal-entry
   (24 px wysokosci, jednoliniowy tytul) - PO ocenil to jako "przypadkowy maly chip pływający
   w duzej komorce". Wpis juz wykorzystuje niemal cala szerokosc komorki (rodzic .cal-month-body
   jest flex column, wiec domyslnie sie rozciaga) - problemem byla wylacznie zbyt niska,
   mikroskopijna wysokosc. Nie chodzi o wypelnienie calej wysokosci dnia (stad NIE tyle co wariant
   tygodnia), tylko o pelnowartosciowy wpis: godzina nad tytulem i tytul na maks. dwie linie,
   zamiast urwania po kilkunastu znakach w jednej linii. */
.cal-entry-compact {
    min-height: 24px;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 11.5px;
}

.cal-entry-compact .cal-entry-line {
    flex-direction: row;
    gap: 5px;
    align-items: baseline;
}

/* Human Approval 4.3C: wpisy Miesiaca byly optycznie ZA CIEZKIE - mala czcionka (11.5 px) plus
   wysoka grubosc zlepialy godzine z tytulem i rozmywaly tekst przy szybkim skanowaniu siatki.
   W "Segoe UI" waga 800 trafia w Black, a 650 w Bold, wiec kompaktowy wpis mial dotad DWA
   najciezsze kroje rodziny obok siebie, przy wlosowatych obramowaniach kalendarza.

   Kazdy z nich schodzi o jeden REALNIE dostepny poziom: godzina Black -> Bold (nadal pierwsza
   w hierarchii wpisu), tytul Bold -> Semibold. Rozroznienie Zadanie/Wydarzenie w ogole nie
   zalezy od grubosci tekstu - niesie je ksztalt znacznika i listwa wydarzenia - wiec odchudzenie
   niczego nie zaciera. Semibold zostaje takze ze wzgledu na Dark, gdzie Regular bylby juz za
   slaby na przygaszonym tle komorki.

   Zmiana dotyczy WYLACZNIE wariantu kompaktowego (Miesiac); Tydzien i Dzien zostaja bez zmian. */
.cal-entry-compact .cal-entry-time {
    font-weight: 700;
}

.cal-entry-compact .cal-entry-title {
    overflow: hidden;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Przekreslenie bylo dobrane do tytulu Bold - na Semibold ta sama kreska 1.5 px robi sie
   nieproporcjonalnie gruba i zjada litery. Semantyka odwolania sie nie zmienia. */
.cal-entry-compact.is-cancelled .cal-entry-title {
    text-decoration-thickness: 1.2px;
}

.cal-entry-detailed {
    min-height: 0;
    padding: 6px 9px;
    font-size: 12.5px;
}

/* Dlugi tytul NIE moze powiekszac temporal footprint wpisu (korekta geometrii Etapu 4.2,
   sekcja 7) - stad ten sam limit 2 linii + wielokropek co warianty Tydzien/Miesiac, zamiast
   dotychczasowego nieograniczonego zawijania. Pelna tresc pozostaje dostepna przez accessible
   name (aria-label na rodzicu _CalendarEntry) niezaleznie od tego, gdzie tytul zostanie ucięty. */
.cal-entry-detailed .cal-entry-title {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.28;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cal-entry-meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

/* Zaden pojedynczy badge nie moze rozepchac paska metadanych ponad szerokosc karty - przy braku
   miejsca skraca sie wielokropkiem zamiast wypychac sasiadow poza widoczny obszar. */
.cal-entry-meta > * {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-entry-kind {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-entry-assignee {
    color: var(--muted);
    font-size: 12px;
}

/* .status/.priority/.due-pill sa reuzyte z widoku Zadan, gdzie min-height 22-28px ma sens przy
   pelnowymiarowym wierszu tabeli. W kompaktowym wierszu meta wpisu kalendarza ten sam min-height
   zostawal, bo dotychczas nadpisywany byl tylko font-size - to byl glowny powod, dla ktorego
   .cal-entry-detailed rosl znacznie ponad hour band (korekta geometrii Etapu 4.2, sekcja 5/6).
   Padding/min-height sa tu wiec explicite skalowane w dol; kolor i znaczenie (WCAG 2.2 non-text
   contrast) zostaja nietkniete. */
.cal-entry-meta .status,
.cal-entry-meta .priority,
.cal-entry-meta .due-pill {
    min-height: 18px;
    padding: 0 7px;
    font-size: 11px;
}

/* Karta na osi zachowuje hierarchie informacji zależnie od REALNEJ szerokosci I WYSOKOSCI
   przydzielonego prostokata.

   container-type: size (a nie samo inline-size, jak do Etapu 4.2) domyka zaakceptowany deferred
   polish z 4.2: "przy bardzo gestych/waskich kartach drugorzedne metadane moga zostac przyciete".
   Przyczyna byla PIONOWA, nie pozioma - wysokosc karty wynika ze skali czasu (Task 66/51 px,
   krotkie wydarzenie moze byc jeszcze nizsze), wiec tytul w dwoch liniach + pasek metadanych po
   prostu nie miescil sie w prostokacie i konczyl przyciety przez overflow karty. Zamiast ciac
   w polowie znaku, karta teraz SAMA redukuje tresc: najpierw tytul do jednej linii, potem znikaja
   metadane. Wysokosc godziny pozostaje nietknieta - to karta ustepuje osi, nigdy odwrotnie.

   Prostokat ma definitywne oba wymiary (pozycjonowanie absolutne + height z czasu), wiec
   container-type: size jest tu bezpieczny i nie tworzy petli layoutu. */
.cal-layout-entry {
    container-type: size;

    /* Wydarzenie krotsze niz ~9 minut byloby przy skali 1.5px/min paskiem kilku pikseli - nie do
       klikniecia i nie do przeczytania. Minimum dotyczy WYLACZNIE takich skrajnie krotkich kart
       i nie zmienia geometrii zadnego normalnego wpisu ani wysokosci godziny. */
    min-height: 14px;
}

/* Kolejnosc ustepstw pozioma idzie od najmniej do najbardziej informacyjnego badge'a (Etap 4.4C,
   sekcje 10-13 zadania - przy 4-5 rownoleglych pozycjach karta wazyla ~200px i trzy plakietki
   tekstowe (Rodzaj/Priorytet/Status) obok siebie w jednym, nierozwijanym wierszu .cal-entry-meta
   koncowo obcinaly sie wielokropkiem na nieczytelne strzepki, dominujac nad jednowierszowym
   tytulem powyzej. "Rodzaj" (Zadanie/Zgloszenie/Wydarzenie) jest z tej trojki NAJMNIEJ
   informacyjny - ksztalt .cal-entry-glyph juz go koduje wizualnie - wiec znika najpierw, razem
   z wykonawca. Priorytet zostaje najdluzej jako najwazniejszy pojedynczy sygnal stanu. */
/* POST-4.4C, sekcje 25-29: progi z 4.4C ustepowaly za pozno - przy realnych gestych kartach
   (3-5 rownoleglych pozycji) "Normalny/Nowe/Po terminie" nadal potrafily stac obok siebie w
   ciasnym pasku metadanych. Progi przesuniete wyzej, wiec ustepstwo zaczyna sie wczesniej;
   kolejnosc zostaje ta sama (kind/assignee -> status/due-pill -> priority), bo status "Po
   terminie" ma zapasowy kanal niezalezny od tego badge'a: caly akcent karty (obrys/tlo/ksztalt
   znacznika, .cal-accent-overdue) i accessible name (sekcja 28). Szerokosc, nie licznik kolizji
   (sekcja 29) - to nadal @container na .cal-layout-entry, nie warunek po liczbie wpisow. */
@container (max-width: 260px) {
    .cal-entry-detailed .cal-entry-assignee,
    .cal-entry-detailed .cal-entry-kind {
        display: none;
    }
}

/* FINAL PRE-QA UI/UX corrective pass (sekcje 38-41): zmierzona REALNA szerokosc karty w
   scenariuszu 5 rownoleglych kolizji (Dzien, 18 wrzesnia danych DEV) to 207px na 1440px. Stary
   prog 220px zostawial samo "Priorytet" (np. "Normalny") widoczne w tym zakresie - dokladnie
   badge, ktory Product Owner nadal widzial na realnym runtime. WIDTH-BASED, nie collision-count:
   pojedynczy prog 230px (z zapasem powyzej zmierzonych 207px) usuwa CALY pasek metadanych naraz -
   Rodzaj/Priorytet/Status/Overdue-pill znikaja razem, zamiast schodzic stopniowo i zostawiac
   jeden samotny badge. Godzina i tytul zostaja nietkniete; priorytet/status/overdue nadal siedza
   w accessible name (sekcja 41) i overdue ma wlasny kanal niezalezny od tego badge'a (akcent
   .cal-accent-overdue na ksztalcie znacznika). */
@container (max-width: 230px) {
    .cal-entry-detailed .cal-entry-meta {
        display: none;
    }
}

@container (max-width: 180px) {
    .cal-entry-detailed .cal-entry-line {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
}

/* Redukcja pionowa - kolejnosc ustepstw jest ta sama co pozioma: najpierw tekst drugorzedny,
   tytul i godzina zostaja do konca. */
@container (max-height: 74px) {
    .cal-entry-detailed .cal-entry-title {
        -webkit-line-clamp: 1;
    }
}

@container (max-height: 54px) {
    .cal-entry-detailed .cal-entry-meta,
    .cal-entry-week .cal-entry-meta {
        display: none;
    }
}

@container (max-height: 38px) {
    .cal-entry-detailed,
    .cal-entry-week {
        padding-block: 2px;
    }

    .cal-entry-detailed .cal-entry-line,
    .cal-entry-week .cal-entry-line {
        flex-direction: row;
        gap: 6px;
        align-items: baseline;
    }
}

/* Ponizej tej wysokosci nie ma juz miejsca na dwa teksty obok siebie - zostaje sama godzina,
   ktora jednoznacznie wskazuje wpis, a tytul czyta sie z popovera albo ze szczegolow. */
@container (max-height: 22px) {
    .cal-layout-entry > .cal-entry {
        align-items: center;
        padding-block: 0;
    }

    .cal-layout-entry .cal-entry-glyph {
        margin-top: 0;
    }

    .cal-layout-entry .cal-entry-title {
        display: none;
    }
}

/* ---- Pasek wydarzenia wielodniowego -----------------------------------------
   Etap 4.2 nie tworzy wydarzen, ale pas all-day i geometria paska istnieja juz teraz, zeby
   Etap 4.3 dopelnil je danymi zamiast przepisywac widoki.

   Ciaglosc w stylu Google Calendar jest zrobiona SEGMENTAMI: jeden segment na dzien, bez
   odstepu bocznego, z zaokragleniem wylacznie na koncach serii. W siatce miesiaca segmenty
   sasiednich komorek stykaja sie (tabela ma border-collapse, a pas jest pelnej szerokosci
   komorki), wiec czytaja sie jako jeden ciagly pasek przez kolejne dni. */
.cal-allday-bar {
    display: flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    overflow: hidden;
    background: var(--cal-entry-bg-hover);
    border: 1px solid var(--cal-entry-line);
    border-left-width: 4px;
    color: var(--text);
    font-size: 11.5px;
    font-weight: 700;
}

.cal-allday-bar.is-single {
    border-radius: 7px;
}

.cal-allday-bar.is-start {
    border-right: 0;
    border-radius: 7px 0 0 7px;
}

.cal-allday-bar.is-middle {
    border-right: 0;
    border-left-width: 0;
    border-radius: 0;
}

.cal-allday-bar.is-end {
    border-left-width: 0;
    border-radius: 0 7px 7px 0;
}

.cal-allday-bar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pas wielodniowy w komorce Miesiaca jest takim samym wpisem jak kazdy inny, wiec idzie za
   odchudzona typografia wpisow kompaktowych (Bold -> Semibold). Ten sam pasek w pasie all-day
   Tygodnia/Dnia zostaje bez zmian - tam ciezar tekstu nie byl zgloszony. */
.cal-month-allday .cal-allday-bar {
    font-weight: 600;
}

/* Klodka prywatnosci w pasie wielodniowym. Pasek jest flex-row bez gapu, wiec ikona potrzebuje
   wlasnego odstepu od tytulu; reszta wygladu przychodzi z .cal-entry-lock, zeby pas i zwykly wpis
   mowily dokladnie tym samym jezykiem. 16 px miesci sie w 18 px wnetrza paska (min-height 20 px
   minus obramowanie, box-sizing: border-box), wiec wskaznik NIE zmienia wysokosci paska ani
   geometrii wiersza wielodniowego. */
.cal-allday-bar .cal-entry-lock {
    margin-left: 5px;
}

/* Od Etapu 4.3C pasek jest LINKIEM do szczegolow wydarzenia - kazdy jego segment prowadzi pod ten
   sam adres, bo wielodniowe wydarzenie jest jednym wydarzeniem. */
a.cal-allday-bar {
    color: var(--text);
}

a.cal-allday-bar:hover {
    border-color: var(--cal-entry-strong);
    background: var(--cal-entry-bg);
    text-decoration: none;
}

a.cal-allday-bar:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: -1px;
}

.cal-allday-bar.is-cancelled .cal-allday-bar-text {
    color: var(--muted);
}

/* Pas all-day nie rosnie bez konca (sekcja 50 zadania Etapu 4.3C): nadmiar wpisow calodziennych
   wchodzi do jednego dyskretnego licznika, ktory otwiera ISTNIEJACY popover dnia. Zaden nowy
   system paneli nie powstaje. */
.cal-allday-overflow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 20px;
    padding: 0 7px;
    border: 1px dashed var(--line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--accent-strong);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.cal-allday-overflow:hover {
    border-style: solid;
    border-color: var(--accent);
    background: var(--surface-tint);
}

.cal-allday-overflow:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 1px;
}

/* ---- Widok miesiaca ---------------------------------------------------------
   Zwykla, semantyczna tabela: naglowki kolumn ze scope, caption dla czytnikow ekranu,
   aria-current="date" na dzisiejszej komorce. Bez role="grid" i bez przechwytywania klawiatury -
   to tresc do przeczytania i klikniecia, nie widget siatki. */
.cal-month-wrap {
    margin: 14px 16px 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.cal-month {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.cal-month th {
    padding: 9px 10px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
}

.cal-month th abbr {
    text-decoration: none;
}

.cal-month th.is-weekend {
    color: var(--accent-strong);
}

.cal-month-cell {
    padding: 0;
    border: 1px solid var(--line);
    vertical-align: top;
}

.cal-month-day {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 154px;
    padding: 8px;
    overflow: hidden;
    background: var(--surface);
}

.cal-month-cell.is-weekend .cal-month-day {
    background: color-mix(in srgb, var(--surface-muted) 40%, var(--surface));
}

/* Dni sasiednich miesiecy: subtelne, ale nadal czytelne i klikalne. */
.cal-month-cell.is-outside .cal-month-day {
    background: var(--surface-tint);
}

.cal-month-cell.is-outside .cal-month-daynum {
    color: var(--muted);
    opacity: 0.75;
}

/* Dzisiaj: obwodka akcentu PLUS wypelniona pastylka numeru dnia - rozpoznawalne takze bez
   rozrozniania kolorow, a aria-current="date" niesie to samo do czytnikow ekranu. */
.cal-month-cell.is-today {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.cal-month-daynum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    border-radius: 9px;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cal-month-daynum:hover {
    background: var(--surface-muted);
    text-decoration: none;
}

.cal-month-cell.is-today .cal-month-daynum {
    background: var(--accent);
    color: #ffffff;
}

/* Pas all-day jest pelnej szerokosci komorki (ujemne marginesy znosza padding), zeby segmenty
   paska wielodniowego stykaly sie przez granice dni. */
.cal-month-allday {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 -8px;
}

.cal-month-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* ---- Pusty obszar komorki dnia = kontekstowa akcja (Etap 4.3C, sekcja 10) ----
   Wypelnia WYLACZNIE miejsce, ktorego nie zajely realne wpisy, wiec fizycznie nie moze przejac
   klikniecia wpisu, numeru dnia ani licznika "+N". Domyslnie prawie niewidoczny - podpowiedz
   pojawia sie dopiero przy najechaniu/aktywacji, zeby siatka miesiaca nie zamienila sie w scianę
   przyciskow "+ Nowe" w kazdym pustym dniu.

   Podpowiedz jest wzmocnieniem, nie warunkiem: na dotyku (brak hover) caly obszar i tak dziala
   jako cel tapniecia, a panel akcji otwiera sie tak samo. */
.cal-month-slot {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 14px;
    padding: 2px 4px;
    border: 1px dashed transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--accent-strong);
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.cal-month-slot:hover,
.cal-month-slot:active {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    text-decoration: none;
}

.cal-month-slot-hint {
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.16s ease;
}

/* Krotki wariant podpowiedzi - w komorce telefonu (~46 px) pelne "+ Nowe" zawija sie na dwie
   linie i zamienia siatke miesiaca w sciane przyciskow. Ten sam wzorzec full/short, ktorego
   uzywa juz licznik "+N wiecej". */
.cal-month-slot-short {
    display: none;
}

.cal-month-slot:hover .cal-month-slot-hint,
.cal-month-slot:active .cal-month-slot-hint {
    opacity: 1;
}

/* Ostatni wiersz pojemnosci jest zwykla dyskretna akcja "+N wiecej". Nie udaje wpisu ani badge'a,
   ale caly wiersz pozostaje wygodnym celem i zachowuje istniejacy focus language IKTEL Flow. */
.cal-month-overflow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 24px;
    padding: 1px 5px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--accent-strong);
    font: inherit;
    font-size: 11.5px;
    /* Po odchudzeniu wpisow licznik w wadze 800 (Black) bylby najciezszym tekstem w komorce -
       czyli dokladnie odwrotna hierarchia niz zamierzona. Schodzi o ten sam jeden poziom. */
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.cal-month-overflow:hover {
    background: var(--surface-tint);
}

.cal-month-overflow:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 1px;
}

.cal-month-overflow-short {
    display: none;
}

.cal-mobile-day-trigger,
.cal-week-mobile-trigger {
    display: none;
}

/* ---- Podglad dnia w widoku Miesiaca (korekta Human Approval, sekcja 6) ------
   Poprzedni pattern - mikroprzycisk "..." 20x20 px obok licznika - zostal usuniety w calosci.
   Byl nieczytelny, wygladal przypadkowo i nie spelnial minimum 24x24 CSS px z WCAG 2.2 AA
   (Target Size Minimum). Teraz calym celem jest sam licznik, a panel otwiera sie jako natywny
   popover w top-layer: nie jest przycinany przez komorke tabeli i nie zmienia jej wysokosci,
   wiec siatka miesiaca nie skacze przy otwieraniu podgladu. */
.cal-day-pop {
    width: min(304px, calc(100vw - 24px));
    max-height: min(420px, calc(100vh - 32px));
    padding: 12px 13px 11px;
    overflow: auto;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    pointer-events: auto;

    /* Popover domyslnie centruje sie w viewporcie przez "inset: 0; margin: auto".
       Pozycje przy przycisku wylicza skrypt i wpisuje w top/left, wiec oba trzeba zwolnic. */
    position: fixed;
    inset: auto;
    margin: 0;
}

.cal-day-pop-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}

.cal-day-pop-date {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.cal-day-pop-count {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
}

.cal-day-pop-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Swiadomie BEZ sciany badge'y: godzina, tytul, rodzaj i najwyzej jedna flaga
   (po terminie / wysoki / krytyczny). Pelny zestaw metadanych nalezy do widoku Dnia.

   Rekord jest LINKIEM (Human Approval follow-up, sekcja 8 zadania) - caly rekord jest celem
   klikniecia/dotyku/klawiatury, nie tylko tytul. */
.cal-day-pop-item {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 8px 10px;
    border: 1px solid var(--cal-entry-line);
    border-radius: 10px;
    background: var(--cal-entry-bg);
    color: var(--text);
    text-align: left;
    transition: background 0.16s ease, border-color 0.16s ease;
}

a.cal-day-pop-item:hover {
    border-color: var(--cal-entry-strong);
    background: var(--cal-entry-bg-hover);
    text-decoration: none;
}

a.cal-day-pop-item:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 1px;
}

.cal-day-pop-item.cal-accent-event,
.cal-day-pop-item.cal-accent-cancelled {
    border-left-width: 4px;
}

.cal-day-pop-item.is-cancelled .cal-day-pop-title,
.cal-day-pop-item.is-cancelled .cal-day-pop-time {
    color: var(--muted);
}

.cal-day-pop-item-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cal-day-pop-item-line {
    display: flex;
    gap: 7px;
    align-items: baseline;
    min-width: 0;
}

.cal-day-pop-time {
    flex: 0 0 auto;
    color: var(--cal-entry-strong);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

/* Tytul moze zajac dwie linie - w panelu jest na to miejsce, a to wlasnie po tytul
   uzytkownik ten podglad otwiera. */
.cal-day-pop-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.34;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cal-day-pop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    align-items: center;
}

.cal-day-pop-flag {
    padding: 1px 7px;
    border: 1px solid var(--cal-entry-line);
    border-radius: 999px;
    background: var(--cal-entry-bg-hover);
    color: var(--cal-entry-strong);
    font-size: 10.5px;
    font-weight: 800;
}

.cal-day-pop-flag.is-cancelled {
    border-color: var(--line-strong);
    background: var(--surface-tint);
    color: var(--muted);
}

.cal-day-pop-rest {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
}

.cal-day-pop-go {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-top: 10px;
    padding: 0 12px;
    border: 1px solid var(--accent);
    border-radius: 9px;
    background: var(--surface-muted);
    color: var(--accent-strong);
    font-size: 12.5px;
    font-weight: 800;
}

.cal-day-pop-go:hover {
    background: var(--surface-tint);
    text-decoration: none;
}

.cal-day-pop-go:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 2px;
}

/* Tworzenie wydarzenia z panelu dnia (Etap 4.3C). Renderowane WYLACZNIE dla osoby z prawem
   Calendar.CreateEvents - bez niego panel go po prostu nie ma, zamiast pokazywac wyszarzony
   przycisk sugerujacy funkcje, ktorej uzytkownik nie dostanie. */
.cal-day-pop-create {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-top: 10px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--accent);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 800;
}

.cal-day-pop-create:hover {
    background: var(--accent-strong);
    text-decoration: none;
}

.cal-day-pop-create:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 2px;
}

.cal-day-pop-create + .cal-day-pop-go {
    margin-top: 6px;
}

/* Panel akcji pustego dnia jest wezszy - nie ma w nim listy wpisow, tylko naglowek i dwie akcje. */
.cal-day-pop-actions {
    width: min(252px, calc(100vw - 24px));
}

/* ---- Wspolna os godzinowa (Tydzien / Dzien) ---------------------------------
   --cal-minute to jedyny "wspolczynnik skali" calego widoku; wszystko inne z niego wynika.
   --cal-axis-minutes (dlugosc okna godzin) i --cal-offset (pozycja wpisu w tym oknie) podaje
   serwer jako liczby CALKOWITE - okno jest liczone z danych tak, zeby zawsze objac kazdy wpis
   zakresu, wiec skrocenie osi niczego nie ukrywa. Patrz CalendarTimeGridModel. */
.cal-timegrid-scroll {
    max-height: min(78vh, 900px);
    margin: 14px 16px 18px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

/* Jedna wspolna, proporcjonalna wartosc dla Dnia i Tygodnia. Layout kolizji zmienia wyłącznie os X;
   zadna liczba kart ani dlugosc tytulu nie moze zmienic 90px przypisanych kazdej godzinie. */
.cal-timegrid.cal-timegrid-day,
.cal-timegrid.cal-timegrid-week {
    --cal-minute: 1.5px;
}

.cal-timegrid {
    --cal-head-h: 46px;
    --cal-allday-row-h: 22px;
    --cal-allday-h: calc((var(--cal-allday-rows) * var(--cal-allday-row-h)) + 10px);
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    min-width: 0;
}

.cal-axis {
    padding-top: calc(var(--cal-head-h) + var(--cal-allday-h));
    border-right: 1px solid var(--line);
}

.cal-axis-hour {
    height: calc(60 * var(--cal-minute));
    padding-right: 9px;
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cal-axis-hour span {
    display: inline-block;
    transform: translateY(-7px);
    background: var(--surface);
}

.cal-days {
    display: grid;
    grid-template-columns: repeat(var(--cal-day-count), minmax(0, 1fr));
    min-width: 0;
}

.cal-daycol {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid var(--line);
}

.cal-daycol:first-child {
    border-left: 0;
}

.cal-daycol.is-weekend .cal-daycol-timed {
    background-color: color-mix(in srgb, var(--surface-muted) 32%, var(--surface));
}

.cal-daycol-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--cal-head-h);
    margin: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}

.cal-daycol-head a {
    display: inline-flex;
    gap: 7px;
    align-items: baseline;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--text);
}

.cal-daycol-head a:hover {
    background: var(--surface-muted);
    text-decoration: none;
}

.cal-daycol-weekday {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
}

.cal-daycol-number {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cal-daycol.is-today .cal-daycol-head a {
    background: var(--accent);
    color: #ffffff;
}

.cal-daycol.is-today .cal-daycol-weekday {
    color: #ffffff;
}

.cal-daycol-allday {
    position: sticky;
    top: var(--cal-head-h);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: var(--cal-allday-h);
    padding: 4px 3px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

/* Linie godzin sa tlem kolumny, nie 24 pustymi elementami na kolumne. */
.cal-daycol-timed {
    position: relative;
    height: calc(var(--cal-minute) * var(--cal-axis-minutes));
    background-image: repeating-linear-gradient(
        to bottom,
        var(--line) 0,
        var(--line) 1px,
        transparent 1px,
        transparent calc(60 * var(--cal-minute))
    );
}

/* ---- Poziomy layout kolizji Day / Week --------------------------------------
   Presentation model wyznacza spojne grupy przedzialow i stabilne numery kolumn. CSS zachowuje
   prawdziwy top/height osi; JS mierzy jedynie dostepna szerokosc i wlacza overflow, gdy karta
   spadlaby ponizej minimum czytelnosci. */
.cal-timegrid-day {
    --cal-min-card-width: 150px;
    --cal-overflow-span: 44;
}

.cal-timegrid-week {
    --cal-min-card-width: 64px;
    --cal-overflow-span: 34;
}

.cal-collision-group {
    position: absolute;
    top: calc(var(--cal-group-offset) * var(--cal-minute));
    right: 2px;
    left: 2px;
    z-index: 1;
    height: calc(var(--cal-group-span) * var(--cal-minute));
    pointer-events: none;
}

.cal-collision-group:hover,
.cal-collision-group:focus-within {
    z-index: 5;
}

.cal-layout-entry {
    position: absolute;
    top: calc(var(--cal-item-offset) * var(--cal-minute));
    left: calc(var(--cal-left) + 2px);
    width: calc(var(--cal-width) - 4px);
    height: calc(var(--cal-item-span) * var(--cal-minute));
    min-width: 0;
    pointer-events: auto;
}

.cal-layout-entry[hidden] {
    display: none;
}

/* ---- Tworzenie wprost z osi czasu (Etap 4.3C, sekcja 11) --------------------
   Warstwa lezy POD grupami kolizji (z-index 0 vs 1), wiec klikniecie karty wpisu, przycisku "+N"
   albo linii "teraz" nigdy jej nie dosiega - a pusty slot tak. To jest LINK: bez JS prowadzi do
   formularza z prefillem samej daty, a skrypt dokleja do adresu godzine klikniecia. */
.cal-slot-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    border-radius: 6px;
}

.cal-slot-layer:hover {
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.cal-layout-entry > .cal-entry {
    height: 100%;
}

/* Overflow zajmuje normalny slot poziomego layoutu i ten sam bounded footprint co Task danego
   wariantu. Nie jest mikropastylka; jego polozenie w pionie wskazuje minute pierwszego ukrytego
   wpisu, a popover zawiera wszystkie ukryte rekordy jako bezposrednie linki. */
.cal-collision-overflow {
    position: absolute;
    top: calc(var(--cal-overflow-offset, 0) * var(--cal-minute));
    left: calc(var(--cal-overflow-left, 0%) + 2px);
    z-index: 2;
    display: flex;
    width: calc(var(--cal-overflow-width, 100%) - 4px);
    height: calc(var(--cal-overflow-span) * var(--cal-minute));
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    justify-content: center;
    padding: 5px 8px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
}

.cal-collision-overflow[hidden] {
    display: none;
}

.cal-collision-overflow:hover {
    border-color: var(--accent);
    background: var(--surface-tint);
}

.cal-collision-overflow:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 2px;
}

.cal-collision-overflow-time {
    color: var(--accent-strong);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.cal-collision-overflow-label {
    max-width: 100%;
    overflow: hidden;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Widoczne dopiero w mobilnym ukladzie listowym (patrz breakpoint 860px). */
.cal-daycol-empty {
    display: none;
    margin: 0;
    padding: 6px 2px;
    color: var(--muted);
    font-size: 12.5px;
}

/* ---- Linia "teraz" (sekcja 5 zadania Etapu 4.2) -----------------------------
   Wylacznie w widoku Dzien, wylacznie dla dzisiaj - patrz IndexModel.NowMinuteOfDayLocal.
   Subtelna, ale ma tez WLASNY tekstowy kontekst (widoczna godzina + sr-only zdanie), nie tylko
   kolor - ta sama zasada dostepnosci co reszta kalendarza. pointer-events:none, zeby linia nigdy
   nie przechwycila klikniecia nalezacego do wpisu pod nia. */
.cal-now-line {
    position: absolute;
    right: 0;
    left: 0;
    top: calc(var(--cal-now-offset) * var(--cal-minute));
    z-index: 4;
    display: flex;
    align-items: center;
    pointer-events: none;
    transform: translateY(-50%);
}

.cal-now-line::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--danger) 75%, transparent);
}

.cal-now-line-time {
    flex: 0 0 auto;
    margin-right: 5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--danger);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ---- Agenda ----------------------------------------------------------------
   Reuzywa rekordow .work-record znanych z Zadan i Zgloszen. Jest zarazem najprostszym
   fallbackiem dostepnosciowym: naglowki dni + lista linkow, bez geometrii czasu. */
.cal-agenda {
    padding: 10px 4px 16px;
}

.cal-agenda-section + .cal-agenda-section {
    margin-top: 10px;
}

.cal-agenda-day {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    /* Dzien-do-dnia (grupowanie) musi czytac sie wyrazniej niz wpis-do-wpisu w tym samym dniu
       (.cal-agenda-list gap ponizej) - inaczej Agenda wyglada jak jeden sklejony blok zamiast
       listy pogrupowanej po dniach (Etap 4.4C, sekcja 7-8 zadania). */
    margin: 32px 0 12px;
    padding: 0 14px;
    font-size: 14px;
}

.cal-agenda-section:first-child .cal-agenda-day {
    margin-top: 4px;
}

.cal-agenda-day a {
    color: var(--text);
}

.cal-agenda-today {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-agenda-list {
    margin: 0;
    list-style: none;
    /* .work-record-list ustawia 8px, ale wpisy Agendy sa nizsze niz rekordy Zadan (brak pudelka
       terminu), wiec przy tym samym 8px caly widok wyglada na sklejony w jeden blok mimo
       poprawnego grupowania po dniach (Etap 4.4C, sekcja 7-9 zadania). POST-4.4C: PO nadal
       ocenial 16px jako za ciasne - kazdy wpis ma czytac sie jak osobny rekord, a nie wiersz
       zwartej tabeli (sekcja 31-32). 20px, przy 32px odstepie miedzy dniami (margin .cal-agenda-day
       powyzej) - dzien zostaje wyraznie silniejsza granica niz wpis-do-wpisu (sekcja 33). */
    gap: 20px;
}

/* Sama karta juz ma position:relative (patrz .work-record) - z-index na hover/focus wystarczy,
   zeby uniesiony/podswietlony rekord zawsze rysowal sie NAD sasiadami, a nie tylko nad wczesniej
   wyrenderowanymi. */
.cal-agenda-list .work-record:hover,
.cal-agenda-list .work-record:focus-within {
    z-index: 2;
}

/* ---- Rekord Agendy (korekta Human Approval, sekcja 26) ----------------------
   Rekord nosi teraz ten sam zestaw klas co wiersz na liscie Zadan, wiec promien, cien, hover,
   focus, listwa priorytetu i pudelko terminu przychodza z jednego, wspolnego zrodla wyzej w tym
   pliku. Kalendarz nie ma juz wlasnego systemu priorytetow ani wlasnej geometrii rekordu.

   Ponizej zostaje WYLACZNIE to, co faktycznie rozni Agende od listy Zadan: godzina w linii
   tytulu. */
.cal-record-time {
    flex: 0 0 auto;
    padding: 1px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-tint);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Kontener ikony jest ten sam co w Zadaniach (.record-type-icon), a zmienne akcentu nadaja mu
   wylacznie kolor odpowiadajacy rodzajowi/priorytetowi wpisu. */
.cal-record-icon {
    color: var(--cal-entry-strong);
    background: var(--cal-entry-bg);
    border-color: var(--cal-entry-line);
}

.cal-agenda-list .work-record {
    min-height: 0;
}

/* Odwolane wydarzenie w Agendzie: przygaszone, ale nadal w pelni czytelne i klikalne. Status
   niesie tez badge "Odwolane" w prawej kolumnie wiersza, wiec informacja nie zalezy od koloru. */
.cal-agenda-list .cal-record.is-cancelled .task-title,
.cal-agenda-list .cal-record.is-cancelled .cal-record-time {
    color: var(--muted);
}

.cal-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin: 14px 16px 18px;
}

.cal-empty p {
    margin: 0;
}

/* ---- Motyw ciemny ----------------------------------------------------------
   Powierzchnie kalendarza sa liczone z tokenow, wiec Dark dziala bez duplikowania regul.
   Wyjatkiem sa dwa miejsca, ktore w Dark potrzebuja mniej kontrastu tla, zeby siatka nie
   czytala sie jak szachownica. */
html[data-theme="dark"] .cal-month-cell.is-weekend .cal-month-day,
html[data-theme="dark"] .cal-daycol.is-weekend .cal-daycol-timed {
    background-color: color-mix(in srgb, var(--surface-muted) 55%, var(--surface));
}

html[data-theme="dark"] .cal-month-cell.is-outside .cal-month-day {
    background: color-mix(in srgb, var(--page) 45%, var(--surface));
}

/* W Dark neutralne tlo odwolanego wydarzenia zlewa sie z powierzchnia kolumny - karta przestawala
   byc rozpoznawalna jako karta. Podnosimy wylacznie kontrast tla i linii; semantyka (przekreslenie,
   slowo "Odwolane", accessible name) zostaje bez zmian. */
html[data-theme="dark"] .cal-accent-cancelled {
    --cal-entry-bg: color-mix(in srgb, var(--muted) 14%, var(--surface));
    --cal-entry-bg-hover: color-mix(in srgb, var(--muted) 22%, var(--surface));
}

/* Wspolna regula Dark dla .work-record .record-type-icon ustawia jeden, neutralny akcent dla
   wszystkich modulow. W Agendzie ikona niesie rodzaj wpisu (zadanie / wydarzenie), wiec zostaje
   przy swoich zmiennych akcentu - tak samo jak w Light. */
html[data-theme="dark"] .work-record .cal-record-icon {
    color: var(--cal-entry-strong);
    background: var(--cal-entry-bg);
    border-color: var(--cal-entry-line);
}

/* ---- Responsywnosc ---------------------------------------------------------- */

/* Gestosc osi pozostaje taka sama na kazdej szerokosci. Brak miejsca uruchamia poziomy overflow,
   a nie sciskanie skali czasu; ponizej 860px Week przechodzi w istniejacy uklad listowy. */

/* Ponizej tej szerokosci siedem kolumn tygodnia byloby nieczytelne. Zamiast sciskac je do
   mikroskopijnych pasow, te same kolumny ukladaja sie jedna pod druga jako lista dnia po dniu -
   nadal jest to WYBRANY TYDZIEN, a nie podmiana widoku. Robi to wylacznie CSS na tym samym
   DOM: zaden markup nie jest duplikowany i nie ma tu zadnego JS. */
@media (max-width: 860px) {
    /* Lista dnia po dniu plynie razem ze strona - zagniezdzony, wlasny obszar przewijania byl
       by w tym ukladzie pulapka (scroll w scrollu na dotyku). */
    .cal-timegrid-scroll:has(.cal-timegrid-week) {
        max-height: none;
        overflow: visible;
    }

    .cal-timegrid-week {
        grid-template-columns: minmax(0, 1fr);
    }

    .cal-timegrid-week .cal-axis {
        display: none;
    }

    .cal-timegrid-week .cal-days {
        grid-template-columns: minmax(0, 1fr);
    }

    .cal-timegrid-week .cal-daycol {
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }

    .cal-timegrid-week .cal-daycol-head {
        justify-content: flex-start;
        padding: 0 10px;
        background: var(--surface-muted);
    }

    .cal-timegrid-week .cal-daycol-allday {
        position: static;
        min-height: 0;
        padding: 0;
        border-bottom: 0;
    }

    .cal-timegrid-week .cal-daycol-allday:empty {
        display: none;
    }

    .cal-timegrid-week .cal-daycol-timed {
        height: auto;
        padding: 8px 10px 12px;
        background-image: none;
    }

    .cal-timegrid-week .cal-collision-group {
        position: static;
        display: grid;
        height: auto;
        gap: 4px;
        margin-top: 4px;
        pointer-events: auto;
    }

    .cal-timegrid-week .cal-layout-entry {
        position: static;
        width: auto;
        height: auto;
    }

    .cal-timegrid-week .cal-layout-entry > .cal-entry {
        height: auto;
        min-height: 44px;
    }

    /* W listowym fallbacku cala szerokosc dnia jest dostepna, wiec pokazywane sa realne wpisy. */
    .cal-timegrid-week .cal-collision-overflow {
        display: none;
    }

    /* Grupy kolizji sa tu w normalnym przeplywie (position: static), wiec absolutnie pozycjonowana
       warstwa tworzenia rysowalaby sie NAD kartami i przejmowalaby ich klikniecia. W tym ukladzie
       nie ma tez czego "kliknac o 14:30" - nie istnieje widoczna os czasu. Tworzenie wydarzenia
       pozostaje dostepne glownym CTA i z widoku Miesiac/Dzien. */
    .cal-timegrid-week .cal-slot-layer {
        display: none;
    }

    .cal-timegrid-week .cal-daycol-empty {
        display: block;
    }
}

@media (max-width: 720px) {
    /* Na telefonie caly widok plynie ze strona. Wewnetrzny obszar przewijania osi godzinowej ma
       sens na desktopie (trzyma naglowek i filtry w polu widzenia), ale na dotyku tworzylby
       scroll w scrollu. Naglowki kolumn przestaja byc sticky z tego samego powodu - przyklejalyby
       sie do gornej krawedzi okna, pod pasek aplikacji. */
    .cal-timegrid-scroll {
        max-height: none;
        overflow: visible;
    }

    .cal-daycol-head,
    .cal-daycol-allday {
        position: static;
    }

    .cal-page-header .cal-range-nav {
        width: 100%;
        flex-wrap: wrap;
    }

    /* Ogolna regula naglowka modulu (".work-page-header .button { width: 100% }") rozpycha na
       telefonie KAZDY przycisk naglowka do pelnej szerokosci. Dla pary strzalek Poprzedni/Nastepny
       i przycisku Dzisiaj znaczy to trzy pelnowymiarowe wiersze, ktore spychaja caly kalendarz
       ponizej ekranu - wykryte podczas realnej weryfikacji na 375 px. Nawigacja zakresu zostaje
       wiec w jednym rzedzie: strzalki jako kwadratowe cele dotykowe 44x44, "Dzisiaj" wypelnia
       reszte. Selektory sa kwalifikowane rodzicem, zeby wygrac z regula ogolna specyficznoscia,
       a nie !important. */
    .cal-page-header .cal-nav-step {
        flex: 0 0 44px;
        width: 44px;
        min-height: 44px;
    }

    .cal-page-header .cal-nav-today {
        flex: 1 1 auto;
        width: auto;
        min-height: 44px;
    }

    .cal-date-jump {
        flex: 1 1 100%;
        margin-left: 0;
    }

    /* Selektor daty jest osobnym wierszem na pelna szerokosc - jego trigger niesie najdluzszy
       tekst w calej nawigacji ("14 września 2026"), wiec sciskanie go obok innych kontrolek
       konczy sie wielokropkiem zamiast data. */
    .cal-date-jump-picker {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cal-date-jump-picker .ikt-dp-trigger {
        width: 100%;
        min-height: 44px;
    }

    .cal-date-jump-input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cal-toolbar,
    .cal-scope-note {
        padding-inline: 12px;
    }

    /* Selektory sa celowo kwalifikowane rodzicem .work-list-panel: istnieje juz ogolna regula
       ".work-list-panel .segmented { grid-template-columns: repeat(2, ...) }" dla list Zadan i
       Zgloszen, ktora ma wyzsza specyficznosc niz sama klasa kalendarza i inaczej wygrywalaby
       ten pojedynek, zwijajac przelaczniki do dwoch kolumn. */
    .work-list-panel .cal-view-switch,
    .work-list-panel .cal-type-switch {
        display: grid;
        width: 100%;
        overflow: visible;
    }

    .work-list-panel .cal-view-switch {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .work-list-panel .cal-type-switch {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .work-list-panel .cal-view-switch a,
    .work-list-panel .cal-type-switch a {
        justify-content: center;
        min-width: 0;
        padding: 0 4px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
    }

    .cal-team-toggle {
        justify-content: center;
        width: 100%;
    }

    .cal-month-wrap,
    .cal-timegrid-scroll,
    .cal-empty {
        margin-inline: 12px;
    }

    /* Mobilny miesiac: jeden pelnowymiarowy trigger dnia z countem zamiast zbioru mikropastylek.
       Pelna lista zachowuje wszystkie typy wpisow w istniejacym dolnym arkuszu. */
    .cal-month-day {
        gap: 3px;
        height: 94px;
        padding: 5px;
    }

    .cal-month-allday,
    .cal-month-body > .cal-entry,
    .cal-month-body > .cal-month-overflow,
    .cal-month-body > .cal-month-slot {
        display: none;
    }

    .cal-month-body {
        display: block;
    }

    .cal-mobile-day-trigger {
        display: inline-flex;
        gap: 5px;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        width: 100%;
        min-height: 44px;
        padding: 4px;
        border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
        border-radius: 9px;
        background: color-mix(in srgb, var(--accent) 7%, var(--surface));
        color: var(--accent-strong);
        font: inherit;
        font-size: 12px;
        cursor: pointer;
    }

    .cal-mobile-day-trigger:hover,
    .cal-mobile-day-trigger:active {
        background: color-mix(in srgb, var(--accent) 13%, var(--surface));
    }

    .cal-mobile-day-trigger:focus-visible,
    .cal-week-mobile-trigger:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
        outline-offset: 1px;
    }

    .cal-mobile-day-trigger-dot {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: var(--accent);
    }

    .cal-timegrid-week .cal-daycol-allday,
    .cal-timegrid-week .cal-daycol-timed {
        display: none;
    }

    .cal-week-mobile-trigger {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        margin: 8px 10px 10px;
        padding: 8px 12px;
        border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
        border-radius: 10px;
        background: color-mix(in srgb, var(--accent) 6%, var(--surface));
        color: var(--text);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .cal-week-mobile-trigger > span {
        display: flex;
        gap: 6px;
        align-items: baseline;
    }

    .cal-week-mobile-trigger strong {
        color: var(--accent-strong);
        font-size: 17px;
    }

    .cal-week-mobile-trigger span span {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
    }

    .cal-month-daynum {
        min-width: 23px;
        height: 23px;
        padding: 0 4px;
        font-size: 12px;
    }

    .cal-month th {
        padding: 7px 5px;
        font-size: 10.5px;
        text-align: center;
    }

    .cal-allday-bar-text {
        font-size: 10.5px;
    }

    /* ---- Klodka prywatnosci na bardzo waskim Miesiacu (Human Review 4.3C, micro-fix) --------
       W komorce ~46 px plytka 16 px + 5 px marginesu + 8 px paddingu paska zjadala tytul niemal
       do jednego znaku. Klodka WYCHODZI wiec z flow i kladzie sie na prawej krawedzi paska,
       wchodzac w jego wlasny padding, a tytul rezerwuje pod nia tylko tyle, ile ona naprawde
       zaslania. Koszt dla tekstu spada z ~21 px do ~8 px, czyli tytul odzyskuje ponad polowe
       utraconego miejsca, a wskaznik zostaje na swoim miejscu - nie znika i nie zamienia sie
       w slowny badge.

       Pozycja absolutna wyjmuje klodke z wysokosci wiersza, wiec pas nadal ma dokladnie 20 px.
       Wyglad desktopowy (4d86539) pozostaje nietkniety - cala regula zyje w tym media query. */
    .cal-month-allday .cal-allday-bar {
        position: relative;
    }

    .cal-month-allday .cal-allday-bar .cal-entry-lock {
        position: absolute;
        top: 50%;
        right: 2px;
        width: 13px;
        height: 13px;
        margin-left: 0;
        border-radius: 4px;
        transform: translateY(-50%);
    }

    .cal-month-allday .cal-allday-bar .cal-entry-lock svg {
        width: 9px;
        height: 9px;
    }

    /* Rezerwacja idzie na TYTUL, nie na pasek, i tylko tam, gdzie klodka faktycznie jest -
       pasek udostepniony nie traci ani piksela. Dzieki temu wielokropek wypada PRZED klodka,
       wiec tekst nigdy pod nia nie wchodzi. */
    .cal-month-allday .cal-allday-bar:has(.cal-entry-lock) .cal-allday-bar-text {
        padding-right: 8px;
    }
}

@media (max-width: 560px) {
    .cal-month-wrap,
    .cal-timegrid-scroll,
    .cal-empty {
        margin-inline: 8px;
    }

    /* Celowo tylko wariant Dzien: Tydzien ma na tej szerokosci uklad listowy bez osi, a ta
       regula ma te sama specyficznosc co .cal-timegrid-week i stoi pozniej w pliku, wiec
       niezawezona nadpisywalaby tamten uklad i zwijala kolumny dni do 44px. */
    .cal-timegrid-day {
        grid-template-columns: 44px minmax(0, 1fr);
        --cal-min-card-width: 124px;
    }

    .cal-agenda-day {
        padding-inline: 10px;
    }
}

/* Na dotyku nie ma hover, wiec podpowiedz pustego obszaru musi byc widoczna sama z siebie -
   inaczej funkcja istnialaby wylacznie dla myszy (sekcja 45 zadania Etapu 4.3C). */
@media (hover: none) {
    .cal-month-slot-hint {
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cal-entry,
    .cal-team-toggle,
    .cal-month-slot-hint {
        transition: none;
    }
}

/* ============================================================================
   WYDARZENIE KALENDARZA - FORMULARZ I SZCZEGOLY (Etap 4.3A)

   Celowo maly dodatek, nie osobny jezyk wizualny: formularz stoi na istniejacych ".form",
   ".field", ".panel" i ".form-actions", a szczegoly na ".work-detail-layout" / ".side-list"
   uzywanych przez Zadania. Ponizej sa wylacznie rzeczy, ktorych w projekcie jeszcze nie bylo:
   wybor typu jako karta, lista osob i dwustopniowe potwierdzenie usuniecia.

   Kolory pochodza wylacznie z tokenow, wiec Dark dziala bez ani jednej dodatkowej reguly.
   ============================================================================ */

/* Wydarzenie zaplanowane. Pozostale warianty ".status.*" juz istnieja (sekcja tabel). */
.status.Planned {
    background: var(--status-info-bg);
    color: var(--status-info-text);
}

/* ---- Wybor typu (rodzaj terminu, widocznosc) --------------------------------
   Radio jako karta z tytulem i wyjasnieniem. Klikalny jest CALY obszar etykiety, a nie sam
   maly krazek - to samo dotyczy obslugi z klawiatury, bo <label for> zostaje prawdziwym
   powiazaniem, a nie atrapa. */
.choice-group {
    display: grid;
    gap: 8px;
    border: 0;
    padding: 0;
    margin: 0 0 18px;
}

.choice-group legend {
    padding: 0;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.choice-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-tint);
    transition: border-color 0.16s ease, background 0.16s ease;
}

.choice-option:hover {
    border-color: var(--line-strong);
}

.choice-option input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent);
}

.choice-option label {
    display: grid;
    gap: 2px;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
}

.choice-option:has(input:checked) {
    border-color: var(--accent);
    background: var(--surface-muted);
}

/* Focus calego kafelka, a nie samego krazka - kafelek JEST ta opcja. Wewnetrzny ring jest wtedy
   zbedna druga ramka, wiec go zdejmujemy (regula dziala tylko tam, gdzie dziala ":has", czyli
   dokladnie tam, gdzie kafelek ring rysuje). */
.choice-option:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 2px;
}

.choice-option:has(input:focus-visible) input {
    outline: none;
}

.choice-title {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.choice-note {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

/* ---- Pola terminu -----------------------------------------------------------
   Obie pary pol (z godzinami / calodzienne) sa w DOM zawsze; skrypt chowa nieuzywana i ukrywa
   opisy ponizej. Bez skryptu widac obie pary WRAZ z opisem, ktora z nich liczy sie przy
   zapisie - formularz zostaje uzywalny zamiast zamieniac sie w zgadywanke. */
.event-time-group {
    padding-left: 14px;
    border-left: 3px solid var(--line);
    margin-bottom: 4px;
}

.event-time-group-note {
    margin: 0 0 10px;
    font-size: 13px;
}

/* ---- Powtarzanie (Etap 4.4A) ------------------------------------------------
   Sekcja powtarzania celowo NIE wprowadza nowego jezyka wizualnego: wybor reguly to zwykly
   ".field" z <select>, tryb miesieczny i koniec serii stoja na istniejacym ".choice-group",
   a caly blok pol jest wciety tak samo jak pola terminu wyzej. Jedyna naprawde nowa rzecz to
   przelaczniki dni tygodnia.

   Zadnego nowego koloru - wszystko idzie z tokenow, wiec Dark dziala bez osobnych regul. */
.event-recurrence {
    margin-bottom: 18px;
}

.event-recurrence-fields {
    padding-left: 14px;
    border-left: 3px solid var(--line);
    margin-bottom: 4px;
}

.event-recurrence-note {
    margin: 0 0 10px;
    font-size: 13px;
}

.event-recurrence-interval-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Liczba "co ile" nie potrzebuje calej szerokosci formularza - wezsze pole czyta sie jako
   liczba, a nie jako kolejne pole tekstowe. */
.event-recurrence-interval-row input {
    max-width: 130px;
}

.event-recurrence-unit {
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.event-recurrence-yearly {
    margin: 0 0 18px;
    font-size: 13px;
}

.event-recurrence-monthweekday-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Oba selektory zwijaja sie pod siebie zamiast wymuszac poziomy scroll (375 px). */
.event-recurrence-monthweekday-row select {
    flex: 1 1 170px;
    min-width: 0;
}

/* ---- Dni tygodnia -----------------------------------------------------------
   To sa ZWYKLE CHECKBOXY, tylko inaczej narysowane. Kontrolka jest schowana wizualnie, ale
   zostaje w drzewie dostepnosci i w kolejnosci Tab - dzieki temu stan "zaznaczone" niesie
   natywna semantyka, a nie atrapa z div + onclick.

   Stan zaznaczenia NIE idzie samym kolorem: dochodzi ptaszek przed nazwa dnia i grubsza ramka.

   Rzad ZAWIJA SIE. Siedem pigulek nie miesci sie w 375 px i nie ma sie miescic - poziomy scroll
   zbudowany specjalnie dla dni tygodnia bylby gorszy niz drugi wiersz (sekcja 14 zadania). */
.weekday-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.weekday-toggle {
    position: relative;
}

.weekday-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.weekday-toggle label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-tint);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.weekday-toggle label:hover {
    border-color: var(--line-strong);
}

.weekday-toggle:has(input:checked) label {
    border-color: var(--accent);
    border-width: 2px;
    padding: 0 11px;
    background: var(--surface-muted);
}

.weekday-toggle:has(input:checked) label::before {
    content: "✓";
    margin-right: 6px;
    font-size: 12px;
}

.weekday-toggle:has(input:focus-visible) label {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 2px;
}

/* ---- Picker odbiorcow (Etap 4.3B) -------------------------------------------
   Wybor odbiorcow stoi na istniejacym pickerze jednostek z Admina (".unit-picker",
   ".mini-toolbar", ".selection-count", ".scroll-list", ".checkbox-line") - to ten sam jezyk
   wizualny, tylko z innymi danymi. Ponizej sa wylacznie roznice: wiersz osoby z loginem,
   wciecie hierarchii przy dzialach i grzeczny region statusu helperow.

   Zrodlem prawdy dostepu jest zaznaczona OSOBA. Dzial jest tu wylacznie przyciskiem hurtowego
   zaznaczenia, dlatego jego sekcja jest zwinieta i wizualnie drugorzedna wobec listy osob. */
.event-recipients {
    margin-bottom: 18px;
}

.event-recipients-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.event-recipients-hint {
    margin: 0 0 10px;
    font-size: 13px;
}

.recipient-picker {
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
}

.recipient-picker-search {
    margin: 0;
}

.recipient-picker-search input {
    width: 100%;
}

.recipient-picker-toolbar .selection-count {
    margin-left: auto;
}

.recipient-departments {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-tint);
}

.recipient-departments > summary {
    display: flex;
    min-height: 32px;
    align-items: center;
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
}

.recipient-departments > summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 2px;
}

.recipient-departments-note {
    margin: 8px 0 10px;
    font-size: 13px;
}

.recipient-department-list,
.recipient-user-list {
    gap: 2px;
    padding: 4px;
    margin: 0;
    list-style: none;
}

.recipient-department-list {
    max-height: 220px;
}

.recipient-user-list {
    max-height: 300px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-tint);
}

.recipient-user-option,
.recipient-department-option {
    display: flex;
    min-height: 40px;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    font-weight: 600;
}

/* Wciecie pokazuje strukture organizacji i NIC WIECEJ - zaznaczenie jednostki nadrzednej nie
   zaznacza jednostek podrzednych (helper dziala na czlonkostwie dokladnie wybranej jednostki). */
.recipient-department-option {
    padding-left: calc(8px + var(--recipient-department-level, 0) * 16px);
}

.recipient-user-option:hover,
.recipient-department-option:hover {
    background: var(--surface-muted);
}

.recipient-user-option label,
.recipient-department-option label {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    align-items: baseline;
    margin: 0;
    cursor: pointer;
}

.recipient-user-name,
.recipient-department-name {
    font-size: 14px;
}

.recipient-user-login,
.recipient-department-count {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.recipient-department-option:has(input:disabled) {
    opacity: 0.55;
}

.recipient-department-option:has(input:disabled) label {
    cursor: default;
}

/* Ring obejmuje caly wiersz - klikalny jest caly wiersz, wiec focus ma pokazywac wiersz, a nie
   sam kwadracik. Wewnetrzny ring znika tylko tam, gdzie ten zewnetrzny naprawde powstaje. */
.recipient-picker .checkbox-line:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 1px;
}

.recipient-picker .checkbox-line:has(input:focus-visible) input {
    outline: none;
}

/* Filtr wyszukiwarki i sekcje odslaniane przez skrypt chowaja sie atrybutem "hidden". Wlasne
   "display" na tych elementach bije regule UA, wiec rezygnacja z wyswietlania musi byc tu jawna. */
.recipient-picker [hidden] {
    display: none;
}

.recipient-picker-empty {
    margin: 0;
}

/* Region statusu odzywa sie wylacznie po uzyciu helpera; pusty nie zajmuje miejsca. */
.recipient-picker-status {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.recipient-picker-status:empty {
    display: none;
}

.event-recipients-preserved {
    margin: 8px 0 0;
    font-size: 13px;
}

.cal-day-pop-head-with-close {
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.cal-day-pop-head-with-close > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cal-day-pop-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-tint);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.cal-day-pop-close:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.cal-day-pop-close:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 2px;
}

.status.event-lifecycle-upcoming {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent-strong);
}

.status.event-lifecycle-progress {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.status.event-lifecycle-completed {
    background: var(--surface-tint);
    color: var(--muted);
}

.status.event-lifecycle-cancelled {
    background: var(--status-critical-bg);
    color: var(--status-critical-text);
}

.event-reactivation-note {
    margin-bottom: 16px;
    border-left: 4px solid var(--status-success-text);
}

.cal-admin-switch {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 12px;
}

.cal-admin-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-left: 4px solid var(--accent-strong);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 9%, var(--surface));
    color: var(--text);
}

.cal-admin-banner strong {
    color: var(--accent-strong);
    font-size: .78rem;
    letter-spacing: .055em;
}

.cal-admin-banner span {
    color: var(--muted);
    font-size: .88rem;
}

.work-module-calendar.is-admin-mode .cal-panel {
    border-top: 3px solid color-mix(in srgb, var(--accent) 68%, var(--line));
}

/* ---- Przypomnienia Calendar (Etap 4.5) ------------------------------------ */
.event-reminders {
    margin-bottom: 18px;
}

.reminder-list {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.reminder-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-tint);
}

.reminder-row > .field {
    margin: 0;
}

.reminder-custom {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(110px, 1fr);
    gap: 8px;
}

.reminder-custom[hidden],
.reminder-row[hidden],
.reminder-selected-users[hidden],
.event-reminders [data-reminder-own-settings][hidden],
.reminder-recipient-option[hidden] {
    display: none;
}

.reminder-add {
    margin-bottom: 6px;
}

.reminder-limit {
    margin: 0 0 16px;
    font-size: 13px;
}

.reminder-selected-users {
    margin-bottom: 18px;
}

.reminder-inheritance {
    margin-bottom: 16px;
}

@media (max-width: 720px) {
    .dashboard-upcoming-list {
        grid-template-columns: 1fr;
    }

    .dashboard-upcoming-event {
        grid-template-columns: max-content minmax(0, 1fr);
        padding-inline: 10px;
    }
    .reminder-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .reminder-remove {
        justify-self: start;
    }
}

@media (max-width: 430px) {
    .reminder-custom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .recipient-picker-toolbar .button {
        flex: 1 1 auto;
    }

    .recipient-picker-toolbar .selection-count {
        flex: 1 1 100%;
        margin-left: 0;
        text-align: center;
    }
}

/* ---- Szczegoly wydarzenia --------------------------------------------------- */

/* Prywatnosc niesie ikone ORAZ slowo - nigdy sam kolor (sekcja 27 zadania). */
.event-visibility {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.event-visibility-private {
    background: var(--status-waiting-bg);
    color: var(--status-waiting-text);
}

.event-visibility-shared {
    background: var(--status-shared-bg);
    color: var(--status-shared-text);
}

/* Chip "Cykliczne" - INFORMACJA O TYPIE, nie kontrolka (sekcja 44 zadania 4.4B). Zadnego hovera,
   zadnego kursora wskaznika: uzytkownik nie ma w niego probowac klikac. Stan neutralny jest tu
   wlasciwy - to metadana rodzaju wydarzenia, a nie jego status ani widocznosc. */
.event-recurring-chip {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
}

/* ---- Akcje zarzadzania w naglowku szczegolow (Product Owner decision lock, FINAL human-review
   correction) ------------------------------------------------------------------------------
   Akcje naleza do naglowka wydarzenia, a nie do bocznego panelu z metadanymi. Ten sam odstep
   (gap) miedzy rzedami co WEWNATRZ rzedu, zero separatora - caly blok czyta sie jako jedna
   grupa akcji z dwoma logicznymi rzedami. */
.detail-header-actions {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.detail-header-manage {
    width: 100%;
}

/* Desktop: wszystkie cztery akcje Event Details w jednej linii, jesli szerokosc na to pozwala -
   naturalny wrap gdy zabraknie miejsca, zero wymuszania na 1440. */
@media (min-width: 901px) {
    .detail-header-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .detail-header-manage {
        width: auto;
    }
}

@media (max-width: 720px) {
    .detail-header-actions,
    .detail-header-actions .form-actions {
        width: 100%;
    }

    /* Na waskim ekranie akcje ida pod tytulem pelna szerokoscia - naglowek NIE zamienia sie w
       pasek z poziomym scrollem. */
    .detail-header-actions .button,
    .detail-header-actions .inline-form,
    .detail-header-actions .inline-form .button {
        width: 100%;
        justify-content: center;
    }
}

/* Termin tego wystapienia zostal przesuniety - sam FAKT, bez diffu "bylo/jest" (sekcja 22). */
.event-occurrence-note,
.event-private-note {
    display: flex;
    gap: 7px;
    align-items: center;
    margin: 12px 0 0;
    font-size: 13px;
}

.event-occurrence-hint {
    margin: 4px 0 0;
    font-size: 13px;
}

.event-scope-note {
    margin: 0 0 18px;
    padding: 10px 12px;
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
    background: var(--surface-tint);
    font-size: 13px;
}

/* Grupowanie wierszy panelu informacyjnego. Separatory sa juz na kazdym wierszu (.side-list li),
   wiec grupa potrzebuje wylacznie odrobiny powietrza - nie drugiej kreski (sekcja 47). */
.event-info-list li.is-group-start {
    margin-top: 7px;
}

.event-recipient-more {
    margin-top: 8px;
}

.event-recipient-more > summary {
    cursor: pointer;
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 700;
}

.event-recipient-more > summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}

.event-recipient-more .event-recipient-summary {
    margin-top: 8px;
}

/* ---- Wybor zakresu operacji na serii (Etap 4.4B) ----------------------------
   Osobna strona zamiast modala: dziala bez JavaScriptu, z klawiatury i z czytnikiem ekranu, ma
   wlasny adres i tak samo czyta sie na 375 px (sekcja 8 zadania). Kafelki sa NATYWNYMI <a>/<button>,
   nigdy div z onclick. */
.scope-panel {
    max-width: 720px;
}

.scope-context {
    margin-bottom: 18px;
}

.scope-note {
    margin-bottom: 14px;
}

.scope-options {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 0 0 18px;
    list-style: none;
}

.scope-options form {
    display: block;
}

.scope-option,
.scope-option:visited {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-tint);
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* `.scope-option` moze byc <a> (Edytuj) albo <button> (Odwolaj/Usun) - dla <a> globalne `a:hover`
   (text-decoration: underline) ma wyzszy priorytet niz sam `.scope-option`, bo dolicza selektor
   elementu. Trzeba jawnie nadpisac text-decoration w kazdym stanie interaktywnym, nie tylko :hover. */
.scope-option:hover,
.scope-option:focus-visible,
.scope-option:active {
    text-decoration: none;
}

.scope-option:hover {
    border-color: var(--accent);
    background: var(--surface-muted);
}

.scope-option:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 2px;
}

.scope-option-title {
    font-size: 15px;
    font-weight: 800;
}

.scope-option-note {
    color: var(--muted);
    font-size: 13px;
}

/* Kafelek niszczacy - czerwien, nigdy fioletowy efekt primary (sekcja 56 zadania). */
.scope-option.is-danger .scope-option-title {
    color: var(--danger);
}

.scope-option.is-danger:hover {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* ---- Bramka utraty wyjatkow wystapien (Etap 4.4B) ---------------------------
   Nie ozdobne ostrzezenie: dopoki checkbox nie jest zaznaczony, serwer nie zapisuje niczego
   (sekcje 37-39 zadania). */
.event-override-warning {
    display: grid;
    gap: 8px;
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--line));
    border-radius: 12px;
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.event-override-warning h2 {
    margin: 0;
    font-size: 15px;
}

.event-override-warning .muted {
    margin: 0;
    color: inherit;
    font-size: 13px;
}

.event-cancelled-note {
    margin-bottom: 16px;
}

.event-recipient-summary {
    display: grid;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.event-recipient-summary li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    font-weight: 600;
}

.event-recipient-inactive {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-text);
    font-size: 12px;
    font-weight: 700;
}

.event-recipient-sources {
    margin: 10px 0 0;
    font-size: 13px;
}

.event-schedule-change {
    margin: 0;
}

/* Poprzedni termin jest przekreslony ORAZ opisany slowem "z ... na ..." w tresci zdania -
   przekreslenie samo w sobie nie jest nosnikiem informacji. */
.event-schedule-old {
    color: var(--muted);
    text-decoration: line-through;
}

/* ---- Confirmation dialog (POST-4.4B human review correction) ----------------------------
   Zastepuje dawne "dwustopniowe potwierdzenie usuniecia" (inline <details> w naglowku
   Details.cshtml) - Product Owner odrzucil ten wzorzec, bo tresc ostrzezenia "wyskakiwala"
   w srodku naglowka i psula uklad akcji (sekcja 13 korekty). Jeden wspolny, dostepny dialog
   dla KAZDEGO potwierdzenia w aplikacji (Usun/Odwolaj, jedno wystapienie/cala seria) - natywny
   <dialog> + .showModal(): przegladarka sama daje top-layer, dimming tla, inert reszty strony
   i Esc-to-close (sekcje 14 i 18 korekty, patrz initConfirmDialogs w app.js). Zero wlasnego
   focus-trapu - to jest dokladnie to, czego natywny <dialog> w stanie modalnym juz pilnuje. */
dialog.confirm-dialog {
    width: min(92vw, 440px);
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}

/* Subtelny backdrop (sekcja 19 korekty) - stonowany, nie czarna plansza pelnej nieprzezroczystosci. */
dialog.confirm-dialog::backdrop {
    background: color-mix(in srgb, var(--text) 45%, transparent);
}

.confirm-dialog h2 {
    margin: 0 0 10px;
    font-size: 18px;
}

.confirm-dialog p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.confirm-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 480px) {
    dialog.confirm-dialog {
        padding: 18px;
    }

    /* Ten sam powod co reszta akcji na 375px (sekcja 20 korekty): przyciski pelnej
       szerokosci zamiast sciskac sie w rzedzie. */
    .confirm-dialog-actions {
        flex-direction: column-reverse;
    }

    .confirm-dialog-actions .button {
        width: 100%;
    }
}

/* ============================================================================
   WSPOLNY SELEKTOR DATY IKTEL FLOW
   (Etap 4.2 Human Approval correction pass, sekcje 10-18 zadania)

   Jeden komponent obslugujacy KAZDY wybor daty w aplikacji: naglowek Kalendarza (Miesiac /
   Tydzien / Dzien / Agenda) oraz termin zadania w Tasks/Create i Tasks/Edit. Markup pochodzi
   z jednego partiala (_DatePicker.cshtml), zachowanie z jednej funkcji (initDatePickers w
   app.js), wyglad stad. Zadnej zewnetrznej biblioteki (sekcja 28 zadania).

   Komponent jest wzbogaceniem prawdziwego pola natywnego, nie jego podmianka: dopoki skrypt nie
   doda ".is-enhanced", trigger i panel maja [hidden], a uzytkownik widzi zwykly input. Stad
   ".ikt-datepicker.is-enhanced .ikt-dp-native { display: none }" zamiast chowania pola w markupie.

   Kolory, promienie, cienie i stany focusu pochodza wylacznie z istniejacych tokenow, wiec Dark
   dziala bez ani jednej osobnej reguly motywu.
   ============================================================================ */

.ikt-datepicker {
    position: relative;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

/* Pole natywne nadal istnieje i nadal jest wysylane w formularzu (blokuje to dopiero atrybut
   disabled, ktorego tu nie ma) - po prostu przestaje byc widoczne, gdy skrypt przejmie UI. */
.ikt-datepicker.is-enhanced .ikt-dp-native {
    display: none;
}

.ikt-dp-trigger {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.ikt-dp-trigger:hover {
    border-color: var(--accent);
    background: var(--surface-tint);
}

.ikt-dp-trigger:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 1px;
}

.ikt-dp-trigger[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--surface-muted);
}

.ikt-dp-trigger-icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var(--accent-strong);
}

.ikt-dp-trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Brak wybranej wartosci to poprawny stan (zadanie bez terminu), a nie blad - stad stonowany,
   ale nadal czytelny tekst zastepczy, bez sygnalu ostrzegawczego. */
.ikt-datepicker.is-empty .ikt-dp-trigger-text {
    color: var(--muted);
    font-weight: 650;
}

.ikt-dp-trigger-caret {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--muted);
}

/* Godzina terminu: natywny type="time" sprowadzony do wygladu zwyklego pola tego design systemu. */
.ikt-dp-time {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ikt-dp-time:hover {
    border-color: var(--accent);
}

.ikt-dp-time:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 1px;
}

/* ---- Panel ------------------------------------------------------------------
   Natywny popover="auto": Escape, zamkniecie klikiem poza panelem, top-layer (panel nigdy nie
   jest przycinany przez overflow naglowka ani formularza) i powrot fokusu na trigger sa
   zachowaniem przegladarki. Domyslne "inset: 0; margin: auto" centruje popover w viewporcie -
   zwalniamy oba, bo pozycje przy triggerze wylicza skrypt (CSS Anchor Positioning nie ma jeszcze
   wsparcia pozwalajacego oprzec na nim dzialajaca funkcje bez polyfilla). */
.ikt-dp-pop {
    position: fixed;
    inset: auto;
    width: 306px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
}

.ikt-dp-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
}

.ikt-dp-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.ikt-dp-nav:hover {
    border-color: var(--accent);
    background: var(--surface-muted);
}

.ikt-dp-nav:focus-visible,
.ikt-dp-title:focus-visible,
.ikt-dp-day:focus-visible,
.ikt-dp-month:focus-visible,
.ikt-dp-foot-action:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent);
    outline-offset: 1px;
}

/* Etykieta miesiaca jest przyciskiem otwierajacym wybor miesiaca i roku - to jest caly "skok do
   miesiaca/roku" z sekcji 12, bez osobnej kontrolki w naglowku. */
.ikt-dp-title {
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.ikt-dp-title:hover {
    border-color: var(--line);
    background: var(--surface-muted);
}

.ikt-dp-title.is-static {
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.ikt-dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 4px;
}

.ikt-dp-weekdays span {
    padding: 4px 0;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.ikt-dp-weekdays .is-weekend {
    color: var(--accent-strong);
}

.ikt-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

/* 38x38 px z zapasem przekracza minimum 24x24 CSS px (WCAG 2.2 AA Target Size) i jest wygodne
   takze kciukiem na dotyku. */
.ikt-dp-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.ikt-dp-day:hover {
    border-color: var(--line-strong);
    background: var(--surface-muted);
}

/* Dni sasiednich miesiecy: subtelne, ale nadal czytelne i klikalne. */
.ikt-dp-day.is-outside {
    color: var(--muted);
    font-weight: 600;
    opacity: 0.68;
}

/* DEF-02: dzien poza native min/max (np. 31 grudnia 1999 obok stycznia 2000) - widoczny, ale
   niedostepny do wyboru. disabled wygrywa nad .is-outside jesli oba sie naloza. */
.ikt-dp-day:disabled {
    color: var(--muted);
    opacity: 0.4;
    cursor: not-allowed;
}

.ikt-dp-day:disabled:hover {
    border-color: transparent;
    background: none;
}

/* DZISIAJ i DZIEN WYBRANY nie sa przekazywane samym kolorem (sekcja 18 zadania):
   dzisiaj ma dodatkowo kropke pod cyfra i aria-current="date", a dzien wybrany - wypelniona
   pastylke i aria-pressed="true". Kazdy z tych stanow jest rozpoznawalny takze bez rozrozniania
   kolorow i takze dla czytnika ekranu. */
.ikt-dp-day.is-today {
    border-color: var(--accent);
}

.ikt-dp-day.is-today::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateX(-50%);
}

.ikt-dp-day.is-selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
    font-weight: 800;
}

.ikt-dp-day.is-selected::after {
    background: #ffffff;
}

.ikt-dp-months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.ikt-dp-month {
    min-height: 44px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.ikt-dp-month:hover {
    border-color: var(--line-strong);
    background: var(--surface-muted);
}

.ikt-dp-month.is-today {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.ikt-dp-month.is-selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #ffffff;
    font-weight: 800;
}

.ikt-dp-foot {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.ikt-dp-foot-action {
    flex: 1 1 0;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--accent);
    border-radius: 9px;
    background: var(--surface-muted);
    color: var(--accent-strong);
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}

.ikt-dp-foot-action:hover {
    background: var(--surface-tint);
}

.ikt-dp-foot-action.is-muted {
    border-color: var(--line);
    background: var(--surface);
    color: var(--muted);
}

.ikt-dp-foot-action.is-muted:hover {
    border-color: var(--line-strong);
    color: var(--text);
}

/* ---- Osadzenie w konkretnych miejscach -------------------------------------- */

/* Naglowek Kalendarza: selektor ma wygladac jak czesc paska nawigacji zakresu, a nie jak
   doklejone pole formularza. Po wzbogaceniu przycisk potwierdzenia jest zbedny - wybor sam
   nawiguje - ale w wariancie bez JS zostaje jedyna droga do zatwierdzenia daty. */
.cal-date-jump-picker .ikt-dp-trigger {
    min-height: 38px;
}

.cal-date-jump-picker.is-enhanced ~ .cal-date-jump-go {
    display: none;
}

/* Formularz zadania: selektor zajmuje cala szerokosc pola, tak jak kazda inna kontrolka. */
.ikt-datepicker-field {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.ikt-datepicker-field .ikt-dp-trigger {
    flex: 1 1 210px;
    min-height: 42px;
}

.ikt-datepicker-field .ikt-dp-time {
    flex: 0 1 130px;
    min-height: 42px;
}

/* Reguly .field nadaja KAZDEMU inputowi w polu width:100% i wlasne obramowanie. Pole natywne
   selektora jest widoczne wylacznie w wariancie bez wzbogacenia - i ma wygladac dokladnie tak
   jak przed ta zmiana. */
.field .ikt-datepicker .ikt-dp-native {
    width: 100%;
}

/* ---- Waski ekran: panel jako dolny arkusz ----------------------------------- */

/* Ponizej tej szerokosci desktopowy popover przy triggerze jest bez sensu: zajmowalby wiekszosc
   ekranu i i tak musialby zostac dosuniety do krawedzi. Zamiast wciskac go na sile, panel staje
   sie dolnym arkuszem na pelna szerokosc - ten sam mechanizm dla selektora daty i dla podgladu
   dnia w widoku Miesiaca, wiec uzytkownik uczy sie jednego zachowania. */
@media (max-width: 620px) {
    .ikt-dp-pop,
    .cal-day-pop {
        top: auto;
        right: 8px;
        bottom: 8px;
        left: 8px;
        width: auto;
        max-height: min(78vh, 560px);
        overflow: auto;
        border-radius: 16px;
    }

    .ikt-dp-day {
        height: 42px;
    }

    .ikt-datepicker-field .ikt-dp-trigger,
    .ikt-datepicker-field .ikt-dp-time {
        flex: 1 1 100%;
    }

    .cal-mobile-day-sheet::backdrop {
        background: rgba(24, 17, 36, 0.34);
    }

    .cal-mobile-day-sheet .cal-day-pop-list {
        max-height: min(52vh, 440px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .cal-mobile-day-sheet .cal-day-pop-item,
    .cal-mobile-day-sheet .cal-day-pop-close {
        min-height: 44px;
    }
}

/* ---- Panel pokazuje sie dopiero, gdy zna swoja pozycje --------------------
   Zdarzenie "toggle" popovera jest asynchroniczne, wiec miedzy otwarciem panelu a wyliczeniem
   jego pozycji mijaja klatki, w ktorych byl juz widoczny, ale stal jeszcze w lewym gornym rogu
   ekranu (position:fixed + inset:auto). Skrypt dodaje ".is-placed" dopiero po ustawieniu
   wspolrzednych - do tego czasu panel jest przezroczysty, ale NADAL W PELNI FOKUSOWALNY, wiec
   ustawienie fokusu po otwarciu dziala bez zmian (visibility/display zabralyby te mozliwosc).

   Reguly dotycza wylacznie stanu OTWARTEGO: zamkniety popover i tak jest display:none, a bez
   zawezenia do :popover-open wersja bez wsparcia Popover API dostalaby przezroczysty panel. */
.ikt-dp-pop:popover-open,
.cal-day-pop:popover-open {
    opacity: 0;
    transition: opacity 0.1s ease;
}

.ikt-dp-pop:popover-open.is-placed,
.cal-day-pop:popover-open.is-placed {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ikt-dp-trigger {
        transition: none;
    }

    .ikt-dp-pop:popover-open,
    .cal-day-pop:popover-open {
        transition: none;
    }
}

/* ---- Chat / Role Model Extension (2026-09-21) --------------------------------
   Grupy Chatu, reakcje, picker emoji, Nadzor komunikacji, Dziennik audytu.
   Wylacznie istniejace tokeny (Light/Dark przez custom properties). */

.chat-type-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 1px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 650;
}

/* Reakcje pod wiadomoscia */
.chat-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}
.chat-reactions[hidden] { display: none; }
.chat-reactions.is-readonly { margin: 7px 0 0; padding: 0; list-style: none; }
.chat-reaction {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 2px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .82rem;
    line-height: 1;
}
button.chat-reaction { cursor: pointer; }
button.chat-reaction:hover { border-color: var(--line-strong); background: var(--surface-tint); }
button.chat-reaction:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 2px; }
.chat-reaction.is-mine {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.chat-reaction-count { color: var(--muted); font-size: .74rem; font-weight: 700; }
.chat-reaction.is-mine .chat-reaction-count { color: var(--accent-strong); }

/* Composer: emoji + zalaczniki po lewej, Wyslij po prawej */
.chat-composer-tools { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.chat-emoji-trigger { flex: 0 0 auto; min-width: 40px; min-height: 40px; padding: 8px; }
.chat-emoji-trigger[aria-expanded="true"] { background: var(--surface-muted); color: var(--accent-strong); }

/* Picker emoji - popover nad przyciskiem (desktop) albo dolny arkusz (mobile) */
.emoji-picker {
    position: fixed;
    z-index: 1200;
    display: grid;
    gap: 8px;
    width: 336px;
    max-width: calc(100vw - 16px);
    padding: 10px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}
.emoji-picker[hidden] { display: none; }
.emoji-picker-quick,
.emoji-picker-tabs,
.emoji-picker-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.emoji-picker-quick[hidden] { display: none; }
.emoji-picker-quick { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.emoji-picker-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.emoji-picker-grid { max-height: 212px; overflow-y: auto; overscroll-behavior: contain; }
.emoji-picker-item,
.emoji-picker-tab {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.emoji-picker-item:hover,
.emoji-picker-tab:hover { background: var(--surface-muted); }
.emoji-picker-item:focus-visible,
.emoji-picker-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 0; }
.emoji-picker-tab[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface-muted); }
.emoji-picker.is-sheet {
    top: auto !important;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: 8px !important;
    width: auto;
    max-width: none;
}
.emoji-picker.is-sheet .emoji-picker-grid { max-height: 38dvh; }
.emoji-picker.is-sheet .emoji-picker-item { min-height: 44px; }

@media (prefers-reduced-motion: no-preference) {
    .emoji-picker:not([hidden]) { animation: emoji-picker-in 120ms ease-out; }
}
@keyframes emoji-picker-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 390px) {
    .chat-emoji-trigger { min-width: 44px; min-height: 44px; }
}

/* Panel Administracja */
.admin-section-title { margin: 22px 0 10px; color: var(--muted); font-size: .82rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.admin-section-title:first-of-type { margin-top: 4px; }
.optional-label { margin-left: 6px; color: var(--muted); font-size: .78rem; font-weight: 600; }
.user-role-limit-note { margin: 8px 0 0; font-size: .82rem; }
.chat-admin-empty { display: grid; gap: 4px; padding: 28px 16px; color: var(--muted); text-align: center; }
.chat-admin-empty strong { color: var(--text); }
.chat-group-row { align-items: center; flex-wrap: nowrap; }
.chat-group-row .dept-main { flex: 1 1 auto; min-width: 0; }
.chat-group-row .dept-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chat-group-description { margin: 2px 0 4px; overflow-wrap: anywhere; }
.chat-group-form .recipient-picker-grid { margin-top: 6px; }

@media (max-width: 700px) {
    .chat-group-row { flex-wrap: wrap; }
    .chat-group-row .dept-actions { width: 100%; }
    .chat-group-row .dept-actions .button { width: 100%; }
}

/* Nadzor komunikacji */
.oversight-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.oversight-filters .quick-filters { margin: 0; }
.oversight-search { display: flex; gap: 8px; margin: 0; min-width: min(100%, 320px); }
.oversight-search input { flex: 1 1 auto; min-width: 0; }
.oversight-banner { position: sticky; top: 70px; z-index: 5; }
.chat-oversight-panel { padding: 14px 16px; }
.chat-oversight-history { display: grid; gap: 2px; }
.chat-oversight-history .chat-message-body { max-width: min(86%, 760px); }
.chat-oversight-history a.chat-reply-quote { text-decoration: none; }

@media (max-width: 700px) {
    .oversight-search { width: 100%; }
    .oversight-banner { top: 62px; }
    .chat-oversight-panel { padding: 10px; }
    .chat-oversight-history .chat-message-body { max-width: 92%; }
}

/* Dziennik audytu */
.audit-filters .filters-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.audit-filter-actions { margin-top: 12px; }
.audit-table th:nth-child(1) { width: 15%; }
.audit-table th:nth-child(2) { width: 16%; }
.audit-table th:nth-child(3) { width: 21%; }
.audit-table th:nth-child(4) { width: 22%; }
.audit-table th:last-child,
.audit-table td:last-child { width: 26%; }
.audit-table td { overflow-wrap: anywhere; vertical-align: top; }
.audit-action { display: block; font-weight: 650; }
.audit-category { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; }
.audit-details { color: var(--muted); font-size: .86rem; }

@media (max-width: 780px) {
    .audit-table td:first-child::before,
    .audit-table td:last-child::before { display: block; }
}

/* Data retention: guided process in the existing IKTEL Flow palette. */
.cleanup-nav { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.cleanup-nav a { padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); text-decoration:none; font-weight:600; }
.cleanup-nav a[aria-current="page"] { border-color:var(--accent); background:var(--surface-muted); color:var(--accent-strong); }
.cleanup-nav a:focus-visible, .cleanup-dialog button:focus-visible, .cleanup-section a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.cleanup-section { border-radius:16px; padding:clamp(18px,3vw,32px); }
.cleanup-section h2 { line-height:1.25; }
.cleanup-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cleanup-choice { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr) 22px; align-items:center; gap:14px; min-height:88px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-tint); cursor:pointer; }
.cleanup-choice:has(input:checked) { border:2px solid var(--accent); background:var(--surface-muted); padding:15px; }
.cleanup-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.cleanup-choice:has(input:focus-visible) { border-color:var(--focus); box-shadow:0 0 0 2px var(--focus); }
.cleanup-choice:has(input:focus-visible) input { outline:0; }
.cleanup-choice strong, .cleanup-choice small { display:block; }
.cleanup-choice small { margin-top:4px; color:var(--muted); font-size:.88rem; }
.cleanup-choice-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--surface-muted); color:var(--accent-strong); font-size:1.2rem; }
.cleanup-choice-icon svg { width:22px; height:22px; }
.cleanup-choice-check { opacity:0; font-weight:800; color:var(--accent-strong); }
.cleanup-choice:has(input:checked) .cleanup-choice-check { opacity:1; }
.cleanup-dates { display:grid; grid-template-columns:repeat(2,minmax(0,220px)); gap:16px; }
.cleanup-dates .field { display:grid; gap:6px; min-width:0; }
.cleanup-dates .ikt-dp-trigger, .cleanup-dates .ikt-dp-native { min-height:44px; }
.cleanup-steps { display:flex; flex-wrap:wrap; gap:6px; margin:20px 0; }
.cleanup-steps span { padding:8px 11px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:var(--surface); font-size:.85rem; }
.cleanup-steps .done { color:var(--status-success-text); background:var(--status-success-bg); border-color:transparent; }
.cleanup-steps .current { color:var(--accent-strong); background:var(--surface-muted); border-color:var(--accent); font-weight:700; }
.cleanup-details { border:1px solid var(--line); border-radius:12px; margin-block:10px; padding:0; }
.cleanup-details summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:16px; list-style-position:inside; }
.cleanup-details summary span { color:var(--muted); font-weight:400; }
.cleanup-details .cleanup-table-wrap { padding:0 16px 16px; }
.cleanup-table-wrap { max-width:100%; overflow-x:auto; }
.cleanup-table-wrap table { min-width:620px; }
.cleanup-table-wrap td { overflow-wrap:anywhere; }
.cleanup-summary > div { border:1px solid var(--line); border-radius:12px; min-width:min(160px,100%); }
.cleanup-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px; }
.cleanup-actions form { margin:0; }
.cleanup-notice, .cleanup-success { display:grid; gap:6px; padding:16px; border-radius:12px; background:var(--surface-muted); border:1px solid var(--line); margin-block:16px; }
.cleanup-success { border-color:var(--status-success-text); }
.cleanup-success strong { color:var(--status-success-text); font-size:1.1rem; }
html[data-theme="dark"] .cleanup-success { background:#203229; border-color:#5ca875; color:#c8f2d4; }
html[data-theme="dark"] .cleanup-success strong { color:#c8f2d4; }
.cleanup-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin:18px 0; }
.cleanup-facts div { border-bottom:1px solid var(--line); padding:10px 0; min-width:0; }
.cleanup-facts dt { color:var(--muted); font-size:.88rem; }
.cleanup-facts dd { margin:3px 0 0; overflow-wrap:anywhere; font-weight:600; }
.cleanup-password-form { display:grid; gap:16px; max-width:420px; margin-top:20px; }
.cleanup-password-form .field { min-width:0; }
.cleanup-confirm-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.cleanup-cancel-separated { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.cleanup-dialog { width:min(94vw,550px); max-height:90vh; overflow:auto; border:1px solid var(--line); border-radius:18px; padding:24px; background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.cleanup-dialog::backdrop { background:rgba(18,13,31,.7); }
.cleanup-dialog .button.ghost.danger { background:var(--flash-error-bg); color:var(--flash-error-text); border-color:var(--flash-error-border); }
.cleanup-dialog .button.ghost.danger:hover { background:color-mix(in srgb,var(--flash-error-bg) 90%,var(--flash-error-text)); border-color:var(--danger); color:var(--flash-error-text); }
.cleanup-dialog .button.ghost.danger:active { background:color-mix(in srgb,var(--flash-error-bg) 82%,var(--flash-error-text)); border-color:var(--danger); color:var(--flash-error-text); }
.cleanup-dialog .button:focus-visible { border-color:var(--focus); outline:3px solid var(--focus); outline-offset:0; box-shadow:none; }
.cleanup-dialog .button.ghost.danger:focus-visible { border-color:var(--focus); }
.cleanup-progress-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0; list-style:none; }
.cleanup-progress-list li { padding:12px; border-radius:10px; background:var(--surface-muted); color:var(--muted); }
.cleanup-progress-list li.done { color:var(--status-success-text); background:var(--status-success-bg); }
.cleanup-progress-list li.current { color:var(--accent-strong); outline:2px solid var(--accent); font-weight:700; }
.cleanup-section progress { width:min(100%,600px); height:16px; accent-color:var(--accent); }
.cleanup-report-row { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; padding:14px 0; border-bottom:1px solid var(--line); }
.cleanup-operation-list { display:grid; gap:12px; }
.cleanup-operation-card { position:relative; min-width:0; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface-tint); }
.cleanup-operation-card-link::after { content:""; position:absolute; inset:0; }
.cleanup-operation-card:has(.cleanup-operation-card-link):focus-within { outline:3px solid var(--focus); outline-offset:2px; }
.cleanup-operation-card p { margin:12px 0; }
.cleanup-operation-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.cleanup-operation-heading a { font-weight:700; }
.cleanup-operation-metrics { display:flex; flex-wrap:wrap; gap:12px 32px; margin:14px 0; }
.cleanup-operation-metrics div { min-width:115px; }
.cleanup-operation-metrics dt { color:var(--muted); font-size:.85rem; }
.cleanup-operation-metrics dd { margin:3px 0 0; font-weight:700; }
.cleanup-operation-id { color:var(--muted); font-size:.85rem; overflow-wrap:anywhere; }
.cleanup-status { display:inline-block; padding:5px 10px; border-radius:999px; background:var(--surface-muted); color:var(--text); font-weight:700; }
.cleanup-cancel { margin-top:18px; }
@media(max-width:650px) {
 .cleanup-choices, .cleanup-dates, .cleanup-facts { grid-template-columns:1fr; }
 .cleanup-steps span { font-size:.78rem; padding:6px 8px; }
 .cleanup-progress-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .cleanup-actions, .cleanup-actions form, .cleanup-actions .button { width:100%; }
 .cleanup-choice { min-height:78px; }
 .cleanup-confirm-actions { display:grid; }
}
@media(max-width:780px) {
 .cleanup-table-wrap .users-table { min-width:0; }
 .cleanup-table-wrap .users-table td:first-child::before,
 .cleanup-table-wrap .users-table td:last-child::before { display:block; }
}

/* INSTALL-3 first-run pages reuse the product's existing palette and controls. */
.setup-body { min-height:100vh; background:var(--page); color:var(--text); }
.setup-theme-button { position:absolute; top:18px; right:18px; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); cursor:pointer; }
.setup-shell { width:min(100% - 32px, 760px); margin:clamp(24px, 6vh, 72px) auto; }
.setup-header { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:28px; }
.setup-header h1 { margin:0; text-align:center; font-size:clamp(1.5rem, 4vw, 2rem); }
.setup-logo { width:250px; max-width:100%; height:auto; object-fit:contain; flex:none; }
.setup-logo-dark { display:none; }
html[data-theme="dark"] .setup-logo-light { display:none; }
html[data-theme="dark"] .setup-logo-dark { display:block; }
.setup-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0; margin:0 0 24px; list-style:none; }
.setup-steps li { padding:10px 8px; border-bottom:3px solid var(--line); color:var(--muted); font-size:.9rem; }
.setup-steps li.current { border-color:var(--accent); color:var(--text); font-weight:700; }
.setup-steps li.done { border-color:var(--status-success-text); color:var(--text); }
.setup-card { padding:clamp(24px, 5vw, 44px); border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--shadow); }
.setup-card h2 { margin:0 0 12px; font-size:clamp(1.3rem, 3vw, 1.7rem); }
.setup-card p { max-width:58ch; line-height:1.55; }
.setup-card .form { max-width:500px; margin-top:24px; }
.setup-card .setup-code-form { width:100%; max-width:none; }
.setup-card .field input { width:100%; }
.setup-card .button { min-height:44px; margin-top:12px; }
.setup-code-form .button { width:100%; }
.setup-licensee { padding:16px 20px; border:1px solid var(--line); border-radius:12px; background:var(--surface-muted); font-size:1.25rem; font-weight:700; overflow-wrap:anywhere; }
.setup-card :focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
@media(max-width:520px) {
 .setup-theme-button { position:static; display:block; margin:8px 16px 0 auto; }
 .setup-logo { width:195px; }
 .setup-steps { gap:3px; }
 .setup-steps li { padding:8px 3px; font-size:.74rem; overflow-wrap:anywhere; }
 .setup-card { border-radius:15px; }
 .setup-card .button { width:100%; justify-content:center; }
}

/* ACCOUNT-1: existing panels and tokens, no profile avatars. */
.account-trigger, .account-trigger:hover, .account-trigger:focus-visible { min-height: 44px; text-decoration: none; }
.account-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.account-dropdown .account-dropdown-link { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); font-size: .9rem; font-weight: 600; text-decoration: none; }
.account-dropdown .account-dropdown-link:hover, .account-dropdown .account-dropdown-link:focus-visible { background: var(--surface-muted); text-decoration: none; }
.account-dropdown-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.my-account-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; max-width: 1080px; }
.my-account-layout > .panel { min-width: 0; align-self: start; }
.account-details { margin: 0; display: grid; gap: 6px; }
.account-details dt { color: var(--muted); font-size: .85rem; margin-top: 12px; }
.account-details dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.account-preferences { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.chat-job-title { color: var(--muted); font-size: .75rem; line-height: 1.4; font-weight: 400; overflow-wrap: anywhere; }
.chat-conversation-copy .chat-job-title, .chat-center-copy .chat-job-title { font-size: .75rem; }
.chat-conversation-copy .chat-conversation-name, .chat-center-copy strong { font-weight: 700; }
.chat-conversation-copy .chat-conversation-preview, .chat-center-copy .chat-conversation-preview { margin-top: 6px; color: var(--text); font-size: .82rem; line-height: 1.45; }
.person-label { cursor: help; border-bottom: 0; text-decoration: none; }
.person-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.person-tooltip { position: fixed; z-index: 10000; display: grid; gap: 4px; max-width: min(300px, calc(100vw - 24px)); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: .85rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; text-align: left; }
.person-tooltip[hidden] { display: none; }
.person-tooltip > span:first-child { font-weight: 700; }
.person-tooltip > span:last-child { color: var(--muted); }
@media (max-width: 700px) {
    .my-account-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .my-account-layout input { max-width: 100%; }
}

/* Konkretne czynności i jawne zależności Podglądu w Admin Users. */
.permission-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0; }
.permission-presets > span { font-weight: 600; }
.permission-presets > small { flex-basis: 100%; }
.permission-dependency-note { color: var(--muted); margin: .5rem 0 0; font-size: .875rem; }
.permission-item input[aria-disabled="true"] { cursor: not-allowed; opacity: .65; }
:root { --demo-persona-gap: .65rem; }
.demo-personas { margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.demo-personas h2 { margin: .3rem 0 .65rem; }
.demo-persona-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--demo-persona-gap); margin-top: 1rem; }
.demo-persona { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-height: 76px; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.demo-persona strong { font-size: .92rem; }
.demo-persona span { font-size: .86rem; color: var(--muted); }
.demo-persona:hover { border-color: var(--accent); background: var(--surface-muted); }
.demo-persona:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.demo-public-note { font-size: .85rem; line-height: 1.6; margin-top: 1rem; }
.demo-more-personas, .demo-private-login { margin-top: 1rem; }
.demo-more-personas summary, .demo-private-login summary { min-height: 44px; padding: .65rem 0; color: var(--accent-strong); font-weight: 600; cursor: pointer; }
.demo-private-login .login-panel-intro { margin-top: 1rem; }
.demo-personas { margin-bottom: .5rem; padding-bottom: .25rem; }
.demo-reset-panel { max-width: 850px; padding: 1.5rem; }
.demo-session-notice { padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); color: var(--text); font-size: .9rem; line-height: 1.5; }
@media (max-width: 480px) { .demo-persona-grid { grid-template-columns: 1fr; } }