/* =====================================================================
   screen-dashboard.css — ekrany "Dashboard" i "Home"
   ---------------------------------------------------------------------
   Wlasciciel: agent "dashboard". Nie dopisuj tu regul innych ekranow.
   Kolejnosc ladowania: theme.css -> components.css -> layout.css -> screen-*.
   Wymaga: .glazed / .module / .card / .avatar / .badge-notify /
           .status-dot / .searchbar / .empty-state / .ic  (components.css)

   ZRODLO WYMIAROW — Figma "App - Komponenty" (fileKey 5EhOBm4rUvbayzFZkwnQpT):
     432:894  Content Window / Dashboard-All Projects   988 x 604
              padding 12px; search 212x16 na (12,12); wykresy w rzedzie y=40,
              listy w rzedzie y=214; kolumny x = 12 / 335 / 658 (gap 4px)
     443:2697 Tasks by Status    319 x 170
     444:3750 Tasks by Projects  319 x 170
     444:3866 Tasks by Team      319 x 170
     449:3233 Recent Messages    319 x 378
     452:4787 Recent Folders     319 x 378
     456:5421 Recent Files       319 x 378
     445:3993 Message List  452:4775 Folder List  455:5316 File List  (301 x 32)
     445:3965 Member Avatar 32x32   445:3975 Notification Badge 13px

   Geometria karty (identyczna dla wszystkich szesciu):
     padding-left/right 9px, tytul na y=8 (Inter Medium 10/14),
     tresc startuje na y=54  (8 + 14 + 32),
     dol: 18px w kartach wykresow, 4px w kartach list.

   Kolory: WYLACZNIE tokeny z theme.css. Figmowe #00ADEE / #FFA100 /
   #FF3B30 / #34C759 z wykresu odwzorowane tokenami --status-* (decyzja
   usera: paleta zostaje z SIMTU-Qt6).
   ===================================================================== */


/* =====================================================================
   01. POWLOKA EKRANU — siatka 3 x 2
   ---------------------------------------------------------------------
   .page (layout.css) daje juz padding 12px, wiec .dashboard go nie dubluje.
   Wysokosci wierszy sa z Figmy; dolny wiersz rosnie na wyzszych ekranach,
   zeby dashboard wypelnial okno zamiast konczyc sie w polowie.
   ===================================================================== */

.dashboard {
    --dash-card-pad:  9px;      /* Figma: tresc karty od 9px do 310px */
    --dash-head-h:    54px;     /* 8 (top) + 14 (tytul) + 32 (odstep) */
    --dash-chart-h:  170px;
    --dash-list-h:   378px;
    --dash-row-h:     32px;     /* Message / Folder / File List */
    --dash-row-gap:   16px;
    --dash-donut:     94px;

    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-width: 0;

    /* Wewnetrzny margines okna tresci (Figma 432:894: search 12,12;
       karty 12/335/658 x 319, y 40 i 214). .page nie dokłada juz insetu. */
    padding: var(--panel-pad);
}

/* Pasek wyszukiwania — Figma 436:2547: search 212x16 na (12,12),
   pierwszy rzad kart zaczyna sie na y=40, wiec odstep pod paskiem = 12px. */
.dash-toolbar {
    display: flex;
    align-items: center;
    gap: var(--panel-pad);
    margin-bottom: var(--panel-pad);
    flex-shrink: 0;
}

.dash-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    gap: var(--module-gap);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: var(--dash-chart-h) minmax(var(--dash-list-h), 1fr);
}


/* =====================================================================
   02. KARTA DASHBOARDU
   ---------------------------------------------------------------------
   Efekt "glazed dark" wnosi klasa .module z components.css — tu tylko
   geometria. Swiadomie BEZ transform/opacity/isolation: pseudoelementy
   .module::before/::after siedza na z-index:-1 i kazdy nowy kontekst
   ukladania by je schowal.
   ===================================================================== */

.dash-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: var(--space-2) var(--dash-card-pad) 0;
    border-radius: var(--radius-md);
}

.dash-card-title {
    height: var(--lh-list);
    margin: 0 0 calc(var(--dash-head-h) - var(--space-2) - var(--lh-list));
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pasek przewijania. Figma rysuje go jako 6px kciuk r2 w powloce glazed
   (wezly "SIMTU App Text 6" przy prawej krawedzi kart), ale theme.css
   ustawia `* { scrollbar-width: thin }` dla calej aplikacji — a to
   w Chrome od wersji 121 WYLACZA ::-webkit-scrollbar i narzuca ~10px.
   Zamiast walczyc o 4px kosztem spojnosci z reszta ekranow zostawiamy
   szerokosc systemowa i poprawiamy tylko kolor kciuka na glazed. */
.dash-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-color: var(--glaze-flat) transparent;
}


/* =====================================================================
   03. KARTA Z WYKRESEM PIERSCIENIOWYM
   ---------------------------------------------------------------------
   Figma 444:3599 "Pie chart": pole 94x94 przy lewej krawedzi tresci,
   obrys Ellipse 94 = circle r=46 stroke 2px #9C9C9C, segmenty w polu
   83.783px -> promien zewnetrzny 41.891, wewnetrzny 29.324 (dokladnie 70%).
   Stad linia srodkowa r=35.6075 i grubosc 12.567 (patrz dashboard.js).
   Legenda startuje na x=121, czyli 18px za pierscieniem.
   ===================================================================== */

.dash-chart {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding-bottom: 18px;
}

.dash-donut {
    width: var(--dash-donut);
    height: var(--dash-donut);
    flex-shrink: 0;
    align-self: flex-start;
}

/* Obrys pierscienia — 1:1 z Ellipse 94 (#9C9C9C == --text-secondary). */
.dash-donut-ring {
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 2;
}

/* Sciezka zastepcza, gdy nie ma ani jednego zadania — Figma nie ma tego
   stanu, bo w makiecie segmenty zawsze pokrywaja 100%. */
.dash-donut-track {
    fill: none;
    stroke: var(--border-subtle);
}

.dash-donut-seg {
    fill: none;
    stroke-linecap: butt;
    transition: stroke-dasharray var(--t-slow) var(--ease),
                stroke-dashoffset var(--t-slow) var(--ease);
}

/* --- Legenda ---------------------------------------------------------
   Figma "Tasks Status Summary" 443:2632: wiersz 14px, odstep 7px,
   [dot 10 + gap 9 + nazwa] | 16px | liczba 30px do prawej | 16px |
   procent 32px do prawej. Przy karcie 319px legenda ma dokladnie 189px.
   -------------------------------------------------------------------- */

.dash-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dash-legend-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px 32px;
    column-gap: var(--space-4);
    align-items: center;
    height: var(--lh-list);
    flex-shrink: 0;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
}

.dash-legend-row[data-route],
.dash-legend-row[data-project] { cursor: pointer; }

.dash-legend-row[data-route]:hover .dash-legend-label,
.dash-legend-row[data-project]:hover .dash-legend-label {
    color: var(--accent-primary);
}

.dash-legend-key {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.dash-legend-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--t-fast);
}

.dash-legend-value,
.dash-legend-pct {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Wiersz "All Tasks" — suma; w Figmie ma szara kropke i nie jest
   segmentem wykresu. */
.dash-legend-row.is-total .dash-legend-label { color: var(--text-primary); }


/* =====================================================================
   04. KARTA Z LISTA (Recent Messages / Folders / Files)
   ---------------------------------------------------------------------
   Figma 445:3993 / 452:4775 / 455:5316 — wiersz 301x32:
     ikona lub awatar 32x32 na x=0,
     tytul  na x=40, y=2   Inter Medium 10/14,
     podpis na x=40, y=16  Inter Regular 10/14, --text-secondary,
     prawa kolumna: badge na y=0, znacznik czasu / rozmiar na y=16.
   Odstep miedzy wierszami 16px, w jego srodku separator 2px (484:5951).
   ===================================================================== */

/* Podswietlenie wiersza ma siegac 4px poza kolumne tresci, a przewijanie
   w pionie obcina wszystko poza pole listy — dlatego lista wychodzi 5px
   poza kolumne i tyle samo oddaje z powrotem paddingiem. Tekst i tak
   zaczyna sie na x=9 (9 - 5 - 4 + 4 + 5), jak w Figmie. */
.dash-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dash-row-gap);
    margin: 0 -5px;
    padding: 0 5px var(--space-1);
}

.dash-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);          /* 32 + 8 = tytul na x=40 */
    height: var(--dash-row-h);
    flex-shrink: 0;
    margin: 0 -4px;
    padding: 0 4px;
    border-radius: var(--radius-sm);
}

/* Separator w polowie 16-pikselowej przerwy: wiersz konczy sie na Y-16,
   nastepny zaczyna na Y, srodek na Y-8, pasek 2px -> top = Y-9. */
.dash-row + .dash-row::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: -9px;
    height: 2px;
    background: var(--glaze-3);
    pointer-events: none;
}

.dash-row.is-clickable { cursor: pointer; }
.dash-row.is-clickable:hover { background: var(--overlay-hover); }

/* Ikona pliku / folderu — 32x32, wypelnieniowa. Zdejmujemy odziedziczony
   po .ic svg { stroke: currentColor }, ktory obrysowalby wypelnienia. */
.dash-row-ico {
    --ic-w: var(--ic-file);
    --ic-h: var(--ic-file);
    width: var(--ic-file);
    height: var(--ic-file);
    flex-shrink: 0;
}
.dash-row-ico svg { stroke: none; }

/* Member Avatar 32x32 nie ma w Figmie obwodki, ktora .avatar nosi domyslnie. */
.dash-row > .avatar { border: 0; }

.dash-row-main {
    flex: 1;
    min-width: 0;
    padding-top: 2px;             /* tytul na y=2 */
    display: flex;
    flex-direction: column;
}

/* Obie linie maja SZTYWNE 14px. Bez tego wtracona rola (7px) rozpycha
   pole liniowe tytulu do 16px i podpis zjezdza z y=16 na y=18. */
.dash-row-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;
}

/* Rola rozmowcy w nawiasie — Figma: Inter Regular 7/14, ten sam kolor. */
.dash-row-role {
    font-size: var(--fs-badge);
    font-weight: var(--fw-regular);
    line-height: var(--lh-list);
}

.dash-row-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: pierwszy wiersz 16px (badge przyklejony do gory),
   drugi wiersz 14px (czas / rozmiar) — dokladnie jak w Figmie. */
.dash-row-side {
    flex-shrink: 0;
    height: var(--dash-row-h);
    display: grid;
    grid-template-rows: 16px var(--lh-list);
    justify-items: end;
    align-items: start;
    text-align: right;
}

.dash-row-meta {
    grid-row: 2;
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    white-space: nowrap;
}


/* =====================================================================
   05. STAN PUSTY W KARCIE
   ---------------------------------------------------------------------
   Backend SIMTU nie ma endpointow historii wiadomosci ani plikow
   (README: "Project files", "Messages"), wiec trzy dolne karty pokazuja
   uczciwy stan pusty zamiast danych demonstracyjnych z Figmy.
   Wspolny .empty-state z components.css, przyciety do skali karty 319px.
   ===================================================================== */

.dash-card .empty-state {
    flex: 1;
    min-height: 0;
    padding: 0 var(--space-2) var(--space-4);
    gap: var(--space-1);
}
.dash-card .empty-state-icon svg { width: 28px; height: 28px; }
.dash-card .empty-state-title {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
}
.dash-card .empty-state-text {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    max-width: 240px;
}
.dash-card .empty-state-actions { margin-top: var(--space-2); }

/* Krotki komunikat w legendzie wykresu bez danych. */
.dash-legend-empty {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}

/* Komunikat filtra "brak wynikow" — pokazywany przez dashboard.js. */
.dash-nomatch {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    padding-top: var(--space-1);
}

/* Filtr paska wyszukiwania ustawia atrybut [hidden]. Domyslna regula
   przegladarki ([hidden]{display:none}) przegrywa z .dash-legend-row
   i .dash-row, wiec chowamy je jawnie. */
.dash-legend-row[hidden],
.dash-row[hidden],
.dash-nomatch[hidden] { display: none; }


/* =====================================================================
   06. HOME — ten sam jezyk wizualny, uklad bez zmian
   ---------------------------------------------------------------------
   Ekran Home nie ma projektu w tej Figmie. Zostaje jego dotychczasowa
   kompozycja (hero + slider + skroty + kafle + karty + wiersze /home),
   przebrana w tokeny, typografie 10/14 i powloke glazed. Tla i obwodki
   znikaja na rzecz klasy .glazed, ktora dodaje home.js.
   ===================================================================== */

.home-screen {
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    min-height: 0;
    /* Ten sam wewnetrzny margines okna tresci co Dashboard. */
    padding: var(--panel-pad);
}

/* --- Hero / baner ----------------------------------------------------- */

.home-hero {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background-size: cover;
    background-position: center;
    min-height: 96px;
}

.home-greeting {
    font: var(--fw-bold) var(--fs-title) / var(--lh-title) var(--font);
    color: var(--text-primary);
}
.home-sub {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}
.home-hero-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* --- Szybkie akcje (Products Library / Project Management / Messages) -- */

.home-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--module-gap);
}

.home-action {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--panel-pad);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    text-align: left;
    cursor: pointer;
    transition: color var(--t-fast);
}
.home-action:hover { color: var(--accent-primary); }

/* Ikony railu (32x32, wypelnieniowe) uzyte poza railem — kolor z tokenu,
   geometria zaprojektowana. Zadnej wspolnej reguly skalujacej. */
.home-action .ic {
    --ic-w: var(--ic-rail);
    --ic-h: var(--ic-rail);
    color: var(--accent-primary);
}
.home-action .ic svg { stroke: none; }

/* --- Kafle liczbowe --------------------------------------------------- */

.home-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--module-gap);
}

.home-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--panel-pad);
    border-radius: var(--radius-md);
    min-width: 0;
}
.home-stat-value {
    font: var(--fw-semi) var(--fs-kpi) / var(--lh-kpi) var(--font);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.home-stat-label {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
}
.home-stat.accent  .home-stat-value { color: var(--accent-primary); }
.home-stat.success .home-stat-value { color: var(--status-success-fg); }
.home-stat.warning .home-stat-value { color: var(--status-warning-fg); }
.home-stat.danger  .home-stat-value { color: var(--status-danger-fg); }

/* --- Karty tresci ----------------------------------------------------- */

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--module-gap);
    align-items: start;
}

.home-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--radius-md);
}

/* Naglowek karty jak "Top Submenu" z Figmy: 40px, tytul Inter Medium 10/14. */
.home-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--submenu-h);
    padding: 0 var(--panel-pad);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.home-card-title {
    flex: 1;
    min-width: 0;
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-card-link {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}
.home-card-link:hover { color: var(--accent-hover); }

.home-card-body { padding: var(--panel-pad); }

/* --- Listy w kartach Home — wiersz 32px jak w Figmie ------------------- */

.home-list { display: flex; flex-direction: column; }

.home-list-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--dash-row-h, 32px);
    padding: 0 var(--space-1);
    margin: 0 calc(-1 * var(--space-1));
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-width: 0;
}
.home-list-row + .home-list-row { border-top: 1px solid var(--border-hairline); }
.home-list-row:hover { background: var(--overlay-hover); }

.home-list-main { flex: 1; min-width: 0; }
.home-list-title {
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-list-sub {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================================
   07. ZWEZANIE OKNA
   ---------------------------------------------------------------------
   Ponizej 1040px trzy kolumny po 319px juz sie nie mieszcza — schodzimy
   do dwoch, a potem do jednej. Wysokosci kart z Figmy zostaja jako
   minimum, zeby wiersze list nie zlepialy sie w harmonijke.
   ===================================================================== */

@media (max-width: 1040px) {
    .dash-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: minmax(var(--dash-chart-h), auto);
    }
    .dash-card-list { min-height: var(--dash-list-h); }
}

@media (max-width: 680px) {
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    .dash-toolbar { flex-wrap: wrap; }
    .searchbar { width: 100%; }
    .home-hero { flex-direction: column; align-items: flex-start; }
    .home-hero-actions { margin-left: 0; }
}

/* Uzytkownicy z wylaczona animacja — donut nie ma sie "dorysowywac". */
@media (prefers-reduced-motion: reduce) {
    .dash-donut-seg { transition: none; }
}