/* =====================================================================
   SIMTU WWW Client — screen-misc.css
   ---------------------------------------------------------------------
   WLASCICIEL: agent "reszta". Ekrany, ktore NIE maja projektu w Figmie:
     Login, Task Board, Gantt, Calendar, Contacts, Messages,
     Projects (structure / files / shopping / orders), Requests + Bug,
     Workspaces, Account Settings, My SIMTU Profile.

   Wymaga wczesniejszego zaladowania theme.css i components.css.
   ZASADA: zero wartosci hex/rgba — wylacznie var(--token) z theme.css.
   Surowe piksele sa dozwolone wylacznie jako WYMIARY ukladu.

   ---------------------------------------------------------------------
   SKAD BIERZE SIE WYGLAD TYCH EKRANOW

   Figma (5EhOBm4rUvbayzFZkwnQpT, strona 232:159) projektuje piec ekranow:
   Dashboard, Home, Task List, Personal List, Products/Brands. Ekrany w tym
   arkuszu nie maja tam odpowiednika, wiec NIE wymyslamy im nowych ukladow —
   zachowujemy obecna strukture i przebieramy ja w ten sam jezyk wizualny:

     powierzchnia   .card / .panel / .glazed  (glazed dark z components.css)
     typografia     10/14 listy i meta, 13/18 nazwy, 7/14 odznaki
     kontrolki      .searchbar .filters-btn .filter-chip .pill-priority
                    .pill-project .status-dot .avatar .progress .table
                    .btn* .badge* — WYLACZNIE z components.css
     odstepy        --module-gap (4px) miedzy modulami, --panel-pad (12px)
                    wewnatrz paneli
     kolory         wylacznie var(--token) (paleta Qt6, decyzja usera)

   Wzorce przejete 1:1 z ekranow zaprojektowanych:
     - pasek narzedzi  = uklad .tl-toolbar z Task List (search 212x16,
       Filters, akcje 16px na prawym koncu)  -> tu jako .ms-toolbar
     - wiersz listy    = "Message List" z Dashboardu (awatar 32, dwie linie
       po 14px, prawa kolumna 16px/14px)     -> tu jako .mrow
     - karta modulu    = karta Dashboardu (naglowek 40px = --submenu-h,
       tytul Inter Medium 10/14, tresc od 9px)

   ---------------------------------------------------------------------
   SPIS TRESCI
     00. Wspolne: powierzchnia ekranu, pasek narzedzi, wiersz .mrow
     01. Login
     02. Task Board (kanban)
     03. Gantt Chart
     04. Calendar
     05. Contacts
     06. Messages
     07. Projects — structure / files / shopping / orders
     08. Requests + Bug report
     09. Workspaces
     10. Account Settings
     11. My SIMTU Profile (mysite)
     12. Waskie okno
   ===================================================================== */


/* =====================================================================
   00. WSPOLNE
   ===================================================================== */

/* --- Powierzchnia ekranu pelnowysokosciowego -------------------------
   Korzen ekranu jest PRZEZROCZYSTY — dokladnie jak .tasklist w Task List
   i .dashboard na Dashboardzie. Glazed niosa dopiero moduly w srodku
   (kolumny, karty, wiersze), a nie plaszczyzna pod nimi. Padding 12px
   i odstep 12px to ten sam rytm, co w ekranach zaprojektowanych.

   Trasy #/board, #/gantt, #/calendar i ekrany Projects NIE maja flagi
   `flush`, wiec layout.css daje im dodatkowo .page z paddingiem 4px.   */

.board-screen,
.gantt-screen,
.cal-screen,
.contacts-screen,
.messages-screen,
.structure-screen,
.files-screen,
.orders-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: var(--panel-pad);
    gap: var(--panel-pad);
    overflow: hidden;
}

/* --- Pasek narzedzi --------------------------------------------------
   Ten sam uklad, co .tl-toolbar w Task List: linia bazowa 16px, odstep
   12px, akcje dosuniete do prawej. Owijka to .searchrow z components.css
   (padding 12px), wiec tutaj zostaje tylko to, czego tam nie ma.       */

.ms-toolbar {
    display: flex;
    align-items: center;
    gap: var(--panel-pad);
    flex-wrap: wrap;
    row-gap: var(--space-2);
    min-height: var(--control-h);
    flex-shrink: 0;
}

.ms-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-shrink: 0;
}

/* Akcje list schodza z Qt-owych 93x26 do linii bazowej 16px paska —
   dokladnie tak, jak zrobil to Task List. */
.ms-actions .btn-add,
.ms-actions .btn-edit,
.ms-actions .btn-delete,
.ms-toolbar .btn-add,
.ms-toolbar .btn-edit,
.ms-toolbar .btn-delete {
    width: auto;
    min-width: 0;
    height: var(--control-h);
    padding: 0 9px;
    border-radius: var(--radius-md);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
}

/* Przycisk paska z ikona (np. "Zarzadzaj grupami") — kwadrat 16x16. */
.ms-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    border-radius: var(--radius-md);
    background: var(--glaze-3);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: color var(--t-fast), background var(--t-fast);
}
.ms-icon-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--overlay-active); }
.ms-icon-btn:disabled { opacity: 0.45; }
.ms-icon-btn .ic { --ic-w: 12px; --ic-h: 12px; }

.ms-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--panel-pad);
    flex-shrink: 0;
}

/* .page-head (components.css) niesie wlasny padding 12px. Wewnatrz ekranu,
   ktory ma juz --panel-pad na korzeniu, odstep bylby podwojny. */
.ms-head { padding: 0; }

/* Grupa nawigacji okresem (Gantt, Calendar) — kontrolki 16px w tej samej
   linii bazowej co search i chipy. */
.ms-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}
.ms-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-h);
    min-width: var(--control-h);
    padding: 0 9px;
    border-radius: var(--radius-md);
    background: var(--glaze-3);
    color: var(--text-secondary);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    white-space: nowrap;
    transition: color var(--t-fast), background var(--t-fast);
}
.ms-nav-btn:hover { color: var(--text-primary); background: var(--overlay-active); }
.ms-nav-btn .ic { --ic-w: 12px; --ic-h: 12px; }

.ms-period {
    font: var(--fw-medium) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Przelacznik trybu (Month / Week / Day) — ten sam wzorzec, co przelacznik
   zakladek w tabbarze: nieaktywny --text-tertiary, wybrany --bg-elevated. */
.ms-segmented {
    display: flex;
    align-items: center;
    gap: var(--module-gap);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.ms-segmented-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--control-h);
    padding: 0 9px;
    border-radius: var(--radius-md);
    background: var(--glaze-3);
    color: var(--text-tertiary);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    white-space: nowrap;
    transition: color var(--t-fast), background var(--t-fast);
}
.ms-segmented-btn .ic { --ic-w: 12px; --ic-h: 12px; }
.ms-segmented-btn:hover { color: var(--text-primary); background: var(--overlay-active); }
.ms-segmented-btn.active {
    background: var(--bg-elevated);
    background-image: linear-gradient(var(--overlay-strong), var(--overlay-strong));
    color: var(--text-primary);
}


/* --- Ikony wypelnieniowe z Figmy ------------------------------------
   W ui.js zyja DWA rodzaje ikon i wymagaja przeciwnych regul:
     - eksporty z Figmy — WYPELNIENIOWE (`fill="currentColor"`),
     - blok LEGACY (nazwy, dla ktorych Figma nie ma odpowiednika) —
       OBRYSOWE (`fill="none" stroke="currentColor"`).
   components.css ustawia `.ic svg { stroke: currentColor }` dla obu, wiec
   ikonom z Figmy dorysowuje kontur. Zdejmujemy go OPT-IN: drugi argument
   `icon(name, "ic-fill")` oznacza ikone wypelnieniowa. Regula NIE moze byc
   globalna — `stroke: none` na ikonie LEGACY wygasilaby ja calkowicie
   (nie ma czym rysowac: `fill` jest `none`).                          */

.ic-fill svg { stroke: none; }


/* --- Naglowek sekcji wewnatrz karty ---------------------------------- */

.ms-card-sub {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    flex-shrink: 0;
}


/* --- Wiersz listy osob / rozmow / plikow (.mrow) ---------------------
   Anatomia przejeta z karty "Message List" na Dashboardzie (Figma
   449:3233): awatar 32x32, odstep 8px (tytul na x=40), dwie linie po
   SZTYWNE 14px, prawa kolumna 16px (odznaka) / 14px (czas).
   Roznica: tu wiersz jest KLIKALNY, wiec dostaje 4px oddechu w pionie
   (32 + 4 + 4 = 40) i wlasny promien pod podswietlenie.

   UWAGA: gdy ten wzorzec bedzie potrzebny czwartemu ekranowi, jego
   miejsce jest w components.css — tu siedzi, bo components.css nalezy
   do innego agenta i nie wolno go dotykac.                            */

.mlist {
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    min-height: 0;
}

.mrow {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--t-fast);
}
.mrow:hover { background: var(--overlay-hover); }
.mrow:focus-visible { outline: 1px solid var(--border-accent); outline-offset: -1px; }
.mrow.selected,
.mrow.active {
    background: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent-primary);
}
.mrow.static { cursor: default; }
.mrow.static:hover { background: transparent; }

/* Awatar i ikona typu — 32x32, bez obwodki (Figma jej nie ma). */
.mrow > .avatar { border: 0; }
.mrow-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Obie linie maja SZTYWNE 14px — inaczej wtracona rola (7px) rozpycha
   pole liniowe tytulu i podpis zjezdza w dol (tak samo jak w Dashboardzie). */
.mrow-title {
    height: var(--lh-list);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mrow-role {
    font-size: var(--fs-badge);
    font-weight: var(--fw-regular);
    line-height: var(--lh-list);
    color: var(--text-secondary);
}
.mrow-sub {
    height: var(--lh-list);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prawa kolumna: odznaka przy gornej krawedzi, czas przy dolnej. */
.mrow-side {
    flex-shrink: 0;
    height: var(--ic-file);
    display: grid;
    grid-template-rows: 16px var(--lh-list);
    justify-items: end;
    align-items: start;
    text-align: right;
    gap: 2px;
}
.mrow-meta {
    grid-row: 2;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    white-space: nowrap;
}
.mrow-side > .badge-notify,
.mrow-side > .mrow-unread { grid-row: 1; }

/* Nieprzeczytane bez licznika — kropka w kolorze akcentu. */
.mrow-unread {
    width: var(--space-2);
    height: var(--space-2);
    margin-top: 4px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    flex-shrink: 0;
}

/* Naglowek grupy w liscie (litera alfabetu, nazwa grupy kontaktow). */
.mlist-group {
    padding: var(--space-2) var(--space-2) 2px;
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Stan pusty listy — jedna linia, ta sama skala co wiersze. */
.mlist-empty {
    padding: var(--space-6) var(--space-3);
    text-align: center;
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
}


/* --- Strefa upuszczania plikow (Projects, Bug report) ---------------- */

.ms-dropzone {
    padding: var(--space-5);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.ms-dropzone:hover,
.ms-dropzone.drag-over {
    border-color: var(--border-accent);
    background: var(--accent-soft);
    color: var(--text-primary);
}


/* =====================================================================
   01. LOGIN
   ---------------------------------------------------------------------
   Powloka logowania zyje w app.js (plik agenta "rama") — tutaj sa tylko
   jej style. Sygnet marki nie jest rysowany znakiem: .login-logo maskuje
   wyeksportowany z Figmy assets/icons/logo.svg (232:202) i chowa tresc
   tekstowa, ktora niesie znacznik.
   ===================================================================== */

.login-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--bg-void);
    overflow-y: auto;
}

.login-card {
    width: 360px;
    max-width: 100%;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    /* .panel dokladalby blur; tu wystarczy glazed + cien okna z Figmy. */
    box-shadow: var(--shadow-window);
}

.login-card .logo {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-4);
    background-image: url("../icons/logo.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    /* Znak zastepczy z app.js nie ma sie pokazac obok sygnetu. */
    font-size: 0;
    color: transparent;
    flex-shrink: 0;
}

.login-card h1 {
    text-align: center;
    font: var(--fw-bold) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}
.login-card .subtitle {
    text-align: center;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
}

.login-card .field { margin-bottom: var(--space-3); }
.login-card .field label {
    display: block;
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}
.login-card button[type="submit"],
.login-card .btn {
    width: 100%;
    margin-top: var(--space-3);
}
.login-card .error {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--status-danger-bg);
    border: 1px solid var(--status-danger-bd);
    border-radius: var(--radius-md);
    color: var(--status-danger-fg);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    display: none;
}
.login-card .error.visible { display: block; }
.login-card .hint {
    margin-top: var(--space-3);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.login-card .hint code {
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: var(--overlay-active);
    border-radius: var(--radius-sm);
    padding: 1px var(--space-1);
}


/* =====================================================================
   02. TASK BOARD (kanban)
   ---------------------------------------------------------------------
   Zadanie: "kolumny kanban maja wygladac jak karty z Dashboardu".
   Kolumna = .card (glazed) z naglowkiem 40px (--submenu-h), tytulem
   Inter Medium 10/14 i licznikiem .badge-notify; tresc od 9px, jak
   w kartach Dashboardu. Kafelek zadania uzywa tych samych kontrolek
   co Task List: .status-dot, .pill-priority, .pill-project, .avatar,
   .progress — wszystkie z components.css.
   ===================================================================== */

.board-columns {
    flex: 1;
    display: grid;
    gap: var(--module-gap);
    overflow: auto;
    min-height: 0;
    align-items: stretch;
}

/* Kolumna dziedziczy powierzchnie karty z components.css (.card). */
.board-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.board-column-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--submenu-h);
    padding: 0 9px;
    flex-shrink: 0;
}
.board-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: var(--radius-full);
    background: var(--status-neutral);
    flex-shrink: 0;
}
.board-column-label {
    flex: 1;
    min-width: 0;
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Licznik zadan = odznaka powiadomienia z Figmy (13x13, 7/14). */
.board-column-count { flex-shrink: 0; }

.board-column-drop {
    flex: 1;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    padding: 0 9px 9px;
    overflow-y: auto;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: background var(--t-fast), box-shadow var(--t-fast);
}
.board-column-drop.drag-active { box-shadow: inset 0 0 0 1px var(--border-default); }
.board-column-drop.drag-over {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--border-accent);
}

.board-column-placeholder {
    padding: var(--space-6) var(--space-3);
    text-align: center;
    color: var(--text-tertiary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-subtle);
}

/* --- Kafelek zadania -------------------------------------------------
   Powierzchnia: .glazed-sm (radius 4) na tle kolumny — dwie warstwy
   glazed jedna na drugiej daja czytelna hierarchie bez obwodek.      */

.board-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-2) 9px;
    flex-shrink: 0;
    cursor: grab;
    transition: box-shadow var(--t-fast), opacity var(--t-fast);
}
.board-card:hover { box-shadow: inset 0 0 0 1px var(--border-default); }
.board-card.selected { box-shadow: inset 0 0 0 1px var(--border-accent); }
.board-card.dragging { opacity: 0.45; cursor: grabbing; }
/* Zadanie zamkniete przygasa — jedyny stan niesiony przez kolor kolumny. */
.board-card.s-completed { opacity: 0.7; }

.board-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
/* Kropka statusu jest wysrodkowana wzgledem pierwszej linii tytulu. */
.board-card-title-row > .status-dot { margin-top: 2px; }
.board-card-title {
    flex: 1;
    min-width: 0;
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    word-break: break-word;
}
.board-sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.board-sub-badge .ic-subtasks { opacity: 0.85; }

.board-card-pills {
    display: flex;
    align-items: center;
    gap: var(--module-gap);
    flex-wrap: wrap;
}
/* W kafelku 220px pigulki nie moga trzymac swoich 100px z listy. */
.board-card-pills .pill-priority {
    width: auto;
    min-width: 56px;
    padding: 0 var(--space-2);
}
.board-card-pills .pill-project { max-width: 100%; }

.board-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.board-card-bottom .avatar-stack > .avatar { border: 0; }
.board-due {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    white-space: nowrap;
}
.board-due.overdue { color: var(--status-danger-fg); }
.board-due.done    { color: var(--status-success-fg); }

.board-progress { padding-top: 2px; }
/* Postep w kafelku: obrys + procent w srodku (wzorzec z Task List). */
.board-progress .progress { min-width: 0; border-radius: var(--radius-md); }


/* =====================================================================
   03. GANTT CHART
   ---------------------------------------------------------------------
   Zadanie: "pasek zadania w kolorze projektu, siatka i naglowki jak
   w tabeli Task List".

   Naglowki (lewy panel + os czasu) przejmuja typografie naglowka .table
   z components.css: Inter Regular 10/14, --text-primary — a nie dawne
   uppercase 9px. Wiersz ma 36px, jak wiersz Task List.

   Pasek: fill = var(--pill-color) niesione przez klase .pc-* z
   components.css (ta sama, ktora koloruje pigulke projektu), wiec kolor
   projektu jest identyczny w Task List, na Gantcie i w Kalendarzu.
   ===================================================================== */

.gantt-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Wykres to jeden modul — lewy panel i os czasu dziela jedna powierzchnie
   glazed (.card), zeby siatka nie rozpadala sie na dwie karty. */
.gantt-container {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.gantt-left {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: inset -1px 0 0 var(--border-subtle);
}
.gantt-left-header {
    height: var(--row-h);
    display: grid;
    grid-template-columns: 1fr 100px;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--panel-pad);
    box-shadow: inset 0 -1px 0 var(--border-subtle);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
}

.gantt-left-rows { position: relative; overflow: hidden; }
.gantt-left-row {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--row-h);
    display: grid;
    grid-template-columns: var(--dot-size) 1fr 100px;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--panel-pad);
    cursor: pointer;
    transition: background var(--t-fast);
}
.gantt-left-row:hover { background: var(--overlay-hover); }
.gantt-left-row.selected {
    background: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent-primary);
}
.gantt-task-name {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Pigulka projektu w lewym panelu nie rozpycha kolumny 100px. */
.gantt-left-row .pill-project { max-width: 100%; }

.gantt-right {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
}
.gantt-chart { position: relative; min-height: 100%; }

.gantt-header {
    height: var(--row-h);
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: inset 0 -1px 0 var(--border-subtle);
}
.gantt-day-cell {
    height: var(--row-h);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset -1px 0 0 var(--border-hairline);
}
.gantt-day-cell.month-start { box-shadow: inset 1px 0 0 var(--border-strong); }
.gantt-month-label {
    font: var(--fw-medium) var(--fs-badge) / 1 var(--font);
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.gantt-day-num {
    font: var(--fw-regular) var(--fs-list) / 1 var(--font);
    color: var(--text-secondary);
}
.gantt-day-cell.today   .gantt-day-num { color: var(--accent-primary); font-weight: var(--fw-medium); }
.gantt-day-cell.weekend .gantt-day-num { color: var(--text-tertiary); }

.gantt-svg { display: block; }

/* Pasek zadania — kolor projektu przez --pill-color (klasa .pc-*). */
.gantt-bar {
    fill: var(--pill-color, var(--project-gray));
    transition: opacity var(--t-fast);
}
.gantt-bar-group { cursor: pointer; }
.gantt-bar-group:hover .gantt-bar { stroke: var(--text-primary); stroke-width: 1; }
.gantt-bar-group.selected .gantt-bar { stroke: var(--accent-primary); stroke-width: 2; }
/* Zadanie zamkniete przygasa — status niesie kropka w lewym panelu. */
.gantt-bar-group.s-completed .gantt-bar { opacity: 0.55; }
.gantt-bar-text {
    pointer-events: none;
    user-select: none;
    fill: var(--text-on-accent);
    font-family: var(--font);
    font-size: var(--fs-list);
    font-weight: var(--fw-medium);
}
.gantt-today-line { stroke: var(--accent-primary); stroke-width: 2; opacity: 0.7; }
.gantt-grid-line       { stroke: var(--border-hairline); }
.gantt-grid-line.month { stroke: var(--border-strong); }
.gantt-row-line        { stroke: var(--border-hairline); }
.gantt-today-band      { fill: var(--accent-soft); }
.gantt-dep-path,
.gantt-dep-head { stroke: var(--border-strong); fill: none; }
.gantt-dep-head { fill: var(--border-strong); stroke: none; }


/* =====================================================================
   04. CALENDAR
   ---------------------------------------------------------------------
   Zadanie: "komorki dnia jako karty, wydarzenia jako pigulki projektu".
   Siatka nie ma juz obwodek — komorki sa osobnymi kartami rozdzielonymi
   odstepem --module-gap, dokladnie jak moduly na Dashboardzie.
   Pigulka pozycji bierze kolor przez --pill-color: projekt z klasy .pc-*,
   zadanie ze statusu (.s-*).
   ===================================================================== */

.cal-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cal-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: var(--module-gap);
}

.cal-dows {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--module-gap);
    flex-shrink: 0;
}
.cal-dow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--lh-list);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
}

.cal-cells {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(64px, 1fr));
    gap: var(--module-gap);
    min-height: 0;
    overflow-y: auto;
}

/* Komorka = karta (.card z components.css niesie glazed). */
.cal-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-1);
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--t-fast);
}
.cal-cell:hover { box-shadow: inset 0 0 0 1px var(--border-default); }
.cal-cell.selected { box-shadow: inset 0 0 0 1px var(--border-accent); }
.cal-cell.other-month { opacity: 0.45; }

.cal-day-num {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    flex-shrink: 0;
}
.cal-day-num.today       { background: var(--accent-primary); color: var(--text-on-accent); }
.cal-day-num.weekend     { color: var(--text-secondary); }
.cal-day-num.other-month { color: var(--text-tertiary); }

.cal-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    min-height: 0;
}

/* Pigulka pozycji — obrys w kolorze projektu / statusu, jak .pill-project. */
.cal-event-pill {
    display: block;
    width: 100%;
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    border: 1px solid var(--pill-color, var(--project-gray));
    border-left-width: 2px;
    background: transparent;
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast);
}
.cal-event-pill:hover { background: var(--overlay-active); }

.cal-event-more {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--accent-primary);
    padding: 0 var(--space-1);
    text-align: left;
    cursor: pointer;
}

/* Dialog wydarzenia — natywne pola daty musza znac ciemny motyw. */
.event-dialog .dialog-input[type="datetime-local"],
.event-dialog .dialog-input[type="date"] { color-scheme: dark; }


/* =====================================================================
   05. CONTACTS
   ---------------------------------------------------------------------
   Zadanie: wiersze jak "Message List" z Dashboardu -> lista uzywa .mrow.
   Lewa kolumna dostaje szerokosc lewego panelu aplikacji (--panel-w),
   zeby ekran mial ten sam rytm co powloka.
   ===================================================================== */

/* Dwie kolumny = dwa moduly glazed rozdzielone 12px — ten sam uklad, co
   lewy panel + obszar tresci w powloce aplikacji. */
.contacts-screen { flex-direction: row; }

.contacts-left {
    width: var(--panel-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.contacts-left-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--submenu-h);
    padding: 0 9px;
    flex-shrink: 0;
}
/* Search zwezony do kolumny — 212px z Figmy nie miesci sie w 236px panelu
   razem z dwoma przyciskami, wiec elastycznie, ale ta sama wysokosc. */
.contacts-left-toolbar .searchbar,
.contacts-left-toolbar .search-bar { flex: 1; width: auto; min-width: 0; }
.contacts-actions { display: flex; gap: var(--module-gap); flex-shrink: 0; }

.contacts-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    padding: 0 var(--space-1) 9px;
}

.contacts-right {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

.contacts-detail {
    padding: var(--panel-pad);
    display: flex;
    flex-direction: column;
    gap: var(--panel-pad);
}
.contacts-detail-header {
    display: flex;
    align-items: center;
    gap: var(--panel-pad);
}
.contacts-detail-info { flex: 1; min-width: 0; }
.contacts-detail-name {
    font: var(--fw-bold) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
}
.contacts-detail-meta {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    margin-top: 2px;
}
.contacts-detail-actions {
    display: flex;
    align-items: center;
    gap: var(--module-gap);
    flex-shrink: 0;
}
.contacts-detail-actions .btn-add,
.contacts-detail-actions .btn-edit,
.contacts-detail-actions .btn-delete {
    width: auto;
    min-width: 0;
    height: var(--control-h);
    padding: 0 9px;
    border-radius: var(--radius-md);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
}
.contacts-detail-divider { height: 1px; background: var(--border-subtle); }

.contacts-detail-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--panel-pad);
}
.contacts-field { min-width: 0; }
.contacts-field-label {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.contacts-field-value {
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
    word-break: break-word;
}
.contacts-field-value.email { color: var(--accent-primary); }

.contacts-detail-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    text-align: center;
}
.contacts-detail-empty-icon {
    --ic-w: var(--ic-file);
    --ic-h: var(--ic-file);
    color: var(--text-tertiary);
}
.contacts-detail-empty-title {
    font: var(--fw-medium) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
}
.contacts-detail-empty-sub {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    max-width: 320px;
}

/* Lista grup w dialogu — wiersz bez awatara, w tej samej skali. */
.contacts-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    height: 22px;
    padding: 0 9px;
    margin-bottom: var(--module-gap);
    border-radius: var(--radius-md);
    background: var(--overlay-hover);
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
}
.contacts-empty {
    padding: var(--space-5) var(--space-3);
    text-align: center;
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
}


/* =====================================================================
   06. MESSAGES
   ---------------------------------------------------------------------
   Zadanie: wiersze rozmow jak "Message List" z Dashboardu -> .mrow.
   Lewa kolumna ma szerokosc lewego panelu aplikacji (--panel-w).
   ===================================================================== */

.messages-screen { flex-direction: row; }

.messages-left {
    width: var(--panel-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.messages-search-bar {
    display: flex;
    align-items: center;
    height: var(--submenu-h);
    padding: 0 9px;
    flex-shrink: 0;
}
.messages-search-bar .searchbar,
.messages-search-bar .search-bar { width: 100%; }

.messages-section-label {
    padding: 0 9px var(--space-1);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.messages-conv-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    padding: 0 var(--space-1) 9px;
}

/* Kropka obecnosci na awatarze — obwodka w kolorze tla panelu. */
.msg-conv-avatar-wrap,
.msg-header-avatar-wrap { position: relative; flex-shrink: 0; }
.msg-conv-avatar-wrap .avatar,
.msg-header-avatar-wrap .avatar { border: 0; }
.msg-online-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: var(--radius-full);
    background: var(--status-neutral);
    box-shadow: 0 0 0 2px var(--bg-void);
}
.msg-online-dot.on { background: var(--status-success); }
.msg-online-dot.lg { right: 0; bottom: 0; }

.msg-conv-empty {
    padding: var(--space-6) var(--space-3);
    text-align: center;
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
}

/* --- Prawa kolumna: naglowek, czat, pasek wpisywania ----------------- */

.messages-right {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.msg-header {
    height: 56px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 9px;
    flex-shrink: 0;
    box-shadow: inset 0 -1px 0 var(--border-subtle);
}
.msg-header-info { display: flex; flex-direction: column; min-width: 0; }
.msg-header-name {
    font: var(--fw-bold) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-header-status { font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font); }
.msg-header-status.online  { color: var(--status-success-fg); }
.msg-header-status.offline { color: var(--text-secondary); }
.msg-header-status.typing  { color: var(--accent-primary); }
.msg-header-actions { margin-left: auto; display: flex; gap: var(--module-gap); flex-shrink: 0; }

.msg-chat-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 9px;
}
.msg-chat-empty {
    text-align: center;
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    padding: var(--space-8) var(--space-6);
}

.msg-date-chip {
    align-self: center;
    padding: 0 var(--space-3);
    height: var(--control-h);
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-md);
    background: var(--glaze-3);
    color: var(--text-secondary);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    margin: var(--space-2) 0;
}

.msg-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    max-width: 80%;
}
.msg-bubble-row.incoming { align-self: flex-start; }
.msg-bubble-row.outgoing { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble-row .avatar {
    width: var(--space-6);
    height: var(--space-6);
    border: 0;
    font-size: var(--fs-list);
}

.msg-bubble {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) 9px;
    border-radius: var(--radius-md);
    word-break: break-word;
}
/* Przychodzaca = powierzchnia glazed; wychodzaca = odcien akcentu. */
.msg-bubble.incoming {
    background: var(--glaze-3);
    border-top-left-radius: var(--radius-xs);
    color: var(--text-primary);
}
.msg-bubble.outgoing {
    background: var(--accent-strong);
    border-top-right-radius: var(--radius-xs);
    color: var(--text-primary);
}
.msg-bubble-body {
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
    white-space: pre-wrap;
}
.msg-bubble-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
}
.msg-bubble-time {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.msg-tick {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.msg-tick.displayed { color: var(--accent-primary); }

.msg-input-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 9px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 var(--border-subtle);
}
.msg-input {
    flex: 1;
    min-width: 0;
    height: var(--space-7);
    padding: 0 9px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: var(--glaze-3);
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
    outline: none;
    transition: border-color var(--t-fast);
}
.msg-input:focus { border-color: var(--border-accent); }
.msg-input::placeholder { color: var(--text-secondary); }
.msg-send-btn {
    width: var(--space-7);
    height: var(--space-7);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--accent-primary);
    color: var(--text-on-accent);
    transition: background var(--t-fast);
}
.msg-send-btn .ic { --ic-w: var(--ic-md); --ic-h: var(--ic-md); }
.msg-send-btn:hover  { background: var(--accent-hover); }
.msg-send-btn:active { background: var(--accent-active); }
.msg-send-btn:disabled { opacity: 0.5; }

/* --- Stany puste i bledy --------------------------------------------- */

.msg-empty-state,
.msg-error-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6);
    text-align: center;
}
.msg-empty-icon {
    --ic-w: var(--ic-file);
    --ic-h: var(--ic-file);
    color: var(--text-tertiary);
}
.msg-empty-title {
    font: var(--fw-medium) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
}
.msg-empty-body {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    max-width: 360px;
}
.msg-empty-list { text-align: left; max-width: 360px; }
.msg-empty-list li {
    position: relative;
    padding-left: var(--space-4);
    margin-top: 6px;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.msg-empty-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: var(--space-1);
    height: var(--space-1);
    border-radius: var(--radius-full);
    background: var(--accent-primary);
}
.msg-error-title {
    font: var(--fw-bold) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--status-danger-fg);
}
.msg-error-body {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-bright);
    max-width: 480px;
}
.msg-error-hint {
    padding: var(--panel-pad);
    border-radius: var(--radius-md);
    background: var(--glaze-3);
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / 1.6 var(--font);
    text-align: left;
    max-width: 520px;
}
.msg-error-hint code {
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--overlay-active);
    color: var(--status-warning-fg);
    font-family: var(--font-mono);
}


/* =====================================================================
   07. PROJECTS — structure / files / shopping / orders
   ===================================================================== */

/* --- Structure -------------------------------------------------------- */

.structure-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
}
/* Pomieszczenie = karta (.card niesie glazed). */
.structure-project { overflow: hidden; }
.structure-project-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--submenu-h);
    padding: 0 9px;
    cursor: pointer;
    transition: background var(--t-fast);
}
.structure-project-header:hover { background: var(--overlay-hover); }
.structure-name {
    flex: 1;
    min-width: 0;
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.structure-count {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    flex-shrink: 0;
}
.structure-empty {
    padding: var(--space-3) 9px var(--panel-pad);
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
}
/* Ikona rozwiniecia — wyeksportowany z Figmy trojkat listy (.ic-list-toggle). */
.structure-project-header .ic-list-toggle { flex-shrink: 0; }

/* --- Files ------------------------------------------------------------ */

.files-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    min-height: var(--control-h);
    flex-shrink: 0;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.files-breadcrumb a { color: var(--text-secondary); }
.files-breadcrumb a:hover { color: var(--text-primary); }
.files-breadcrumb .sep { color: var(--text-tertiary); }
.files-breadcrumb .current { color: var(--text-primary); font-weight: var(--fw-medium); }

.files-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.files-body .ms-dropzone { margin-top: var(--panel-pad); }

/* --- Ilosc pozycji ----------------------------------------------------
   Jedyna pozostalosc po dawnej sekcji "Shopping list": lista zakupowa
   renderuje sie dzis tabela (.table z components.css), a `.shop-row /
   .shop-check / .shop-del / .shop-notes / .shop-title / .shop-rows` nie
   maja juz zadnego uzycia w JS — nie przenosze ich z app.css.        */

.shop-qty {
    flex-shrink: 0;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--overlay-active);
    color: var(--text-secondary);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    font-variant-numeric: tabular-nums;
}

/* --- Orders ----------------------------------------------------------- */

.orders-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.orders-table { min-width: 820px; }

.order-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 130px 110px 110px 80px;
    align-items: center;
    gap: var(--space-2);
    height: var(--row-h);
    padding: 0 9px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--t-fast);
}
.order-row + .order-row { margin-top: var(--module-gap); }
.order-row:hover { background: var(--overlay-hover); }
.order-row.selected {
    background: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent-primary);
}
/* Naglowek tabeli — typografia naglowka .table z components.css. */
.order-row.head {
    height: var(--submenu-h);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--bg-primary);
    border-radius: 0;
    margin-bottom: var(--module-gap);
    box-shadow: inset 0 -1px 0 var(--border-subtle);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    cursor: default;
}
.order-row.head:hover { background: var(--bg-primary); }

.order-num {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    font-family: var(--font-mono);
    color: var(--accent-primary);
}
.order-name {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-date {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.order-total {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.order-detail {
    display: flex;
    flex-direction: column;
    gap: var(--panel-pad);
    padding: var(--panel-pad);
}
.order-lines { display: flex; flex-direction: column; gap: var(--module-gap); }
.order-line {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 60px 100px 110px;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 9px;
    border-radius: var(--radius-md);
}
.order-line:hover { background: var(--overlay-hover); }
.order-line-thumb {
    width: var(--ic-file);
    height: var(--ic-file);
    border-radius: var(--radius-sm);
    background-color: var(--overlay-active);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.order-line-name {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-line-brand {
    font: var(--fw-regular) var(--fs-badge) / var(--lh-badge) var(--font);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.order-summary {
    margin-left: auto;
    width: 280px;
    max-width: 100%;
    padding: 9px;
}
.order-summary-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.order-summary-row.total {
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
    font: var(--fw-bold) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
}


/* =====================================================================
   08. REQUESTS (Feature / Product / Brand) + BUG REPORT
   ===================================================================== */

.request-screen,
.bug-screen {
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: var(--panel-pad);
}

/* Wstep — karta z akcentowanym lewym brzegiem. */
.request-intro,
.bug-intro {
    padding: 9px var(--panel-pad);
    border-left: 2px solid var(--accent-primary);
    font: var(--fw-regular) var(--fs-list) / 1.6 var(--font);
    color: var(--text-secondary);
}
.request-intro strong,
.bug-intro strong { color: var(--text-primary); font-weight: var(--fw-medium); }

.request-form,
.bug-form { padding: var(--panel-pad); }

.request-actions,
.bug-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--panel-pad);
    padding-top: var(--panel-pad);
    border-top: 1px solid var(--border-subtle);
}

/* Potwierdzenie wyslania. */
.request-sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-6);
    text-align: center;
}
.request-sent-icon {
    width: var(--space-8);
    height: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    --ic-w: var(--ic-lg);
    --ic-h: var(--ic-lg);
}
.request-sent-title {
    font: var(--fw-medium) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
}
.request-sent-text {
    font: var(--fw-regular) var(--fs-list) / 1.6 var(--font);
    color: var(--text-secondary);
    max-width: 380px;
}

.bug-attach { display: flex; flex-direction: column; gap: var(--module-gap); }
.bug-dropzone {
    padding: var(--space-5);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.bug-dropzone:hover,
.bug-dropzone.drag-over {
    border-color: var(--border-accent);
    background: var(--accent-soft);
    color: var(--text-primary);
}
.bug-file {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 9px;
    border-radius: var(--radius-sm);
    background: var(--overlay-hover);
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
}
.bug-file .ic { --ic-w: 12px; --ic-h: 12px; color: var(--text-secondary); }
.bug-file-size { margin-left: auto; color: var(--text-secondary); }

.bug-env {
    padding: 9px;
    border-radius: var(--radius-md);
    background: var(--overlay-hover);
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / 1.7 var(--font-mono);
    white-space: pre-wrap;
    word-break: break-word;
}


/* =====================================================================
   09. WORKSPACES
   ===================================================================== */

.ws-screen {
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: var(--panel-pad);
}

.ws-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--module-gap);
}

/* Karta workspace'a — .card z components.css + wlasny uklad. */
.ws-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 9px;
    transition: box-shadow var(--t-fast);
}
.ws-card:hover   { box-shadow: inset 0 0 0 1px var(--border-default); }
.ws-card.current { box-shadow: inset 0 0 0 1px var(--border-accent); }

.ws-card-head { display: flex; align-items: center; gap: var(--space-2); }
.ws-card-icon {
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--accent-glow);
    color: var(--accent-primary);
    --ic-w: var(--ic-md);
    --ic-h: var(--ic-md);
}
.ws-card-name {
    font: var(--fw-bold) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-card-role {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.ws-card-meta {
    display: flex;
    gap: var(--panel-pad);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.ws-card-meta b {
    display: block;
    font: var(--fw-medium) var(--fs-body) / var(--lh-body) var(--font);
    color: var(--text-primary);
}
.ws-card-actions {
    display: flex;
    gap: var(--module-gap);
    margin-top: auto;
    flex-wrap: wrap;
}

/* Znacznik "biezacy" — odznaka w skali Figmy (7/14). */
.ws-current-tag {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--accent-strong);
    color: var(--accent-primary);
    font: var(--fw-medium) var(--fs-badge) / var(--lh-badge) var(--font);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Czlonkowie, zaproszenia, zespoly -------------------------------- */

.ws-members,
.ws-teams { display: flex; flex-direction: column; gap: var(--module-gap); }

.ws-member-row,
.ws-invite-row,
.ws-team-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: var(--row-h);
    padding: var(--space-1) 9px;
    border-radius: var(--radius-md);
    transition: background var(--t-fast);
}
.ws-member-row:hover,
.ws-invite-row:hover { background: var(--overlay-hover); }
.ws-team-row { background: var(--overlay-hover); }

.ws-member-row > .avatar { border: 0; }
.ws-member-info  { flex: 1; min-width: 0; }
.ws-member-name,
.ws-invite-email,
.ws-team-name {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-invite-email,
.ws-team-name { flex: 1; min-width: 0; }
.ws-member-email,
.ws-member-role,
.ws-invite-meta,
.ws-team-count {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-member-role,
.ws-invite-meta,
.ws-team-count { flex-shrink: 0; }
.ws-member-actions { display: flex; gap: var(--module-gap); flex-shrink: 0; }

.ws-invite-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.ws-invite-form .field { flex: 1; min-width: 180px; margin-bottom: 0; }


/* =====================================================================
   10. ACCOUNT SETTINGS
   ===================================================================== */

.account-screen {
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: var(--panel-pad);
}

.settings-container {
    display: flex;
    justify-content: center;
}
.settings-card {
    width: 100%;
    max-width: 560px;
    padding: var(--panel-pad);
    display: flex;
    flex-direction: column;
}
.settings-card.wide { max-width: 820px; }

/* Grupa ustawien = karta (.card niesie glazed). */
.settings-group { padding: 9px; }

.settings-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--row-h);
    padding: var(--space-1) 0;
}
.settings-row + .settings-row { border-top: 1px solid var(--border-hairline); }
.settings-row-main { flex: 1; min-width: 0; }
.settings-row-title {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
}
.settings-row-desc {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.settings-row-ctl { flex-shrink: 0; }

/* Lista sesji urzadzen. */
.session-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--row-h);
    padding: var(--space-1) 0;
}
.session-row + .session-row { border-top: 1px solid var(--border-hairline); }
.session-info { flex: 1; min-width: 0; }
.session-agent {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.session-meta {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.session-row.current .session-agent::after {
    content: "TA SESJA";
    margin-left: var(--space-2);
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--accent-strong);
    color: var(--accent-primary);
    font: var(--fw-medium) var(--fs-badge) / var(--lh-badge) var(--font);
    letter-spacing: 0.05em;
}

.danger-zone { box-shadow: inset 0 0 0 1px var(--status-danger-bd); }
.danger-zone .settings-row-title { color: var(--status-danger-fg); }


/* =====================================================================
   11. MY SIMTU PROFILE (mysite)
   ===================================================================== */

.mysite-screen {
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--panel-pad);
}

.mysite-head {
    display: flex;
    align-items: center;
    gap: var(--panel-pad);
    padding: var(--panel-pad);
}
.mysite-avatar {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--avatar-1);
    color: var(--text-on-accent);
    font: var(--fw-bold) var(--fs-title) / var(--lh-title) var(--font);
}
.mysite-avatar img { width: 100%; height: 100%; object-fit: cover; }

.mysite-identity { flex: 1; min-width: 0; padding-bottom: 2px; }
.mysite-name {
    font: var(--fw-bold) var(--fs-title) / var(--lh-title) var(--font);
    color: var(--text-primary);
}
.mysite-handle {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--accent-primary);
}
.mysite-tagline {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    margin-top: 2px;
}
.mysite-head-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
    padding-bottom: 2px;
}

.mysite-sections { display: flex; flex-direction: column; gap: var(--module-gap); }
.mysite-section { padding: var(--panel-pad); }
.mysite-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 9px;
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.mysite-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--module-gap);
}
.mysite-gallery-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    background-color: var(--overlay-hover);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--t-fast);
}
.mysite-gallery-item:hover { box-shadow: inset 0 0 0 1px var(--border-default); }
.mysite-gallery-item .remove {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--scrim);
    color: var(--text-primary);
    --ic-w: 12px;
    --ic-h: 12px;
}
.mysite-gallery-item:hover .remove { display: flex; }

.mysite-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mysite-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--control-h);
    padding: 0 9px;
    border-radius: var(--radius-md);
    background: var(--glaze-3);
    color: var(--text-secondary);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    transition: color var(--t-fast);
}
.mysite-link:hover { color: var(--text-primary); }
.mysite-link .ic { --ic-w: 12px; --ic-h: 12px; }

/* Company — te same sekcje + dane rejestrowe. */
.company-legal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--panel-pad);
}
.company-logo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background-color: var(--text-primary);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* =====================================================================
   12. WASKIE OKNO
   ---------------------------------------------------------------------
   780px to ten sam prog, ktorego uzywaja messages.js (MOBILE_MQ) i
   contacts.js (NARROW) przez matchMedia — obie warstwy MUSZA go dzielic,
   inaczej przycisk "Wroc" pojawia sie bez schowanej listy.
   ===================================================================== */

@media (max-width: 1040px) {
    .contacts-detail-fields { grid-template-columns: minmax(0, 1fr); }
    .order-row,
    .order-line { font-size: var(--fs-list); }
}

@media (max-width: 780px) {
    /* Contacts i Messages: jedna kolumna, przelaczana klasa .show-detail. */
    .contacts-left,
    .messages-left {
        width: 100%;
        box-shadow: none;
    }
    .contacts-screen,
    .messages-screen { flex-direction: column; }

    .contacts-screen .contacts-right,
    .messages-screen .messages-right { display: none; }
    .contacts-screen.show-detail .contacts-left,
    .messages-screen.show-detail .messages-left { display: none; }
    .contacts-screen.show-detail .contacts-right,
    .messages-screen.show-detail .messages-right { display: flex; }
    .contacts-screen.show-detail .contacts-right { display: block; }

    .board-columns { grid-template-columns: minmax(0, 1fr) !important; }
    .ws-grid { grid-template-columns: minmax(0, 1fr); }
    .mysite-head { flex-wrap: wrap; }
    .msg-bubble-row { max-width: 92%; }
}