/* Szkielet panelu: dat-shell / dat-sidebar / dat-topbar / dat-page. */

.dat-shell {
    display: grid;
    /* Szerokość kolumny sidebara idzie przez zmienną, żeby oba tory zwinięcia
       (wariant --collapsed przez :has() i próg 1200px, który zwija sidebar
       samym nadpisaniem zmiennych bez tej klasy) nadpisywały jedno miejsce,
       zamiast dwa razy powtarzać tę samą regułę grid-template-columns. */
    --_shell-sidebar-width: var(--sidebar-width);
    grid-template-columns: var(--_shell-sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.dat-shell:has(.dat-sidebar--collapsed) {
    --_shell-sidebar-width: var(--sidebar-width-collapsed);
}

.dat-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-surface);
    border-right: var(--border-width) solid var(--color-border);

    /* Zmienne sterujące stanem zwinięcia. Wartości domyślne odpowiadają stanowi
       rozwiniętemu; wariant --collapsed i media query pod 1200px nadpisują
       wyłącznie te zmienne, więc reguły poniżej istnieją w arkuszu raz.
       Prefiks "--_" wyklucza je z regexu var(--...) w teście kontraktu skórki
       (klasa znaków tam nie ma podkreślnika) — to prywatny stan komponentu,
       nie token, którego mogłaby nie zdefiniować skórka. */
    --_sidebar-label-display: block;
    --_sidebar-item-justify: flex-start;
    --_sidebar-item-width: auto;
    --_sidebar-item-height: auto;
    --_sidebar-item-padding: var(--nav-item-padding);
    --_sidebar-group-label-height: auto;
    --_sidebar-group-label-padding: 0 var(--space-2);
    --_sidebar-group-label-bg: transparent;
    --_sidebar-group-label-overflow: visible;
    --_sidebar-group-label-indent: 0;
}

.dat-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: var(--border-width) solid var(--color-border);
}

.dat-sidebar__mark {
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-radius: var(--radius-md);
}

.dat-sidebar__household { display: flex; flex-direction: column; min-width: 0; }

.dat-sidebar__name {
    display: var(--_sidebar-label-display);
    font-size: var(--text-small-size);
    font-weight: var(--text-title-weight);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dat-sidebar__sub {
    display: var(--_sidebar-label-display);
    font-size: var(--text-overline-size);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dat-sidebar__nav { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-2); }
.dat-sidebar__group { display: flex; flex-direction: column; gap: var(--space-1); }

.dat-sidebar__group-label {
    height: var(--_sidebar-group-label-height);
    padding: var(--_sidebar-group-label-padding);
    background: var(--_sidebar-group-label-bg);
    overflow: var(--_sidebar-group-label-overflow);
    text-indent: var(--_sidebar-group-label-indent);
}

.dat-sidebar__item {
    display: flex;
    align-items: center;
    justify-content: var(--_sidebar-item-justify);
    gap: var(--space-3);
    width: var(--_sidebar-item-width);
    height: var(--_sidebar-item-height);
    padding: var(--_sidebar-item-padding);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-small-size);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out);
}

.dat-sidebar__item:hover { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }

.dat-sidebar__item.is-active {
    background: var(--color-accent-soft);
    color: var(--color-accent-soft-fg);
    font-weight: var(--text-title-weight);
}

.dat-sidebar__item-label { display: var(--_sidebar-label-display); }

.dat-sidebar__badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--nav-badge-min-width);
    height: var(--nav-badge-height);
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-size: var(--text-overline-size);
    font-weight: var(--text-overline-weight);
}

.dat-sidebar__foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    border-top: var(--border-width) solid var(--color-border);
}

.dat-sidebar__logout {
    display: flex;
}

.dat-sidebar__logout .dat-sidebar__item {
    flex: 1;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.dat-sidebar__theme {
    display: flex;
    gap: var(--space-1);
    padding: var(--segmented-padding);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
}

.dat-sidebar__theme-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--segmented-item-padding);
    border: 0;
    border-radius: var(--segmented-radius);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-overline-size);
    cursor: pointer;
}

.dat-sidebar__theme-btn.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    font-weight: var(--text-title-weight);
}

.dat-sidebar__theme-label { display: var(--_sidebar-label-display); }

/* Zwinięty sidebar zachowuje ikony i liczniki, a nagłówki grup zamienia na
   separator — bez nich rząd ikon traci hierarchię i zostaje listą znaczków. */
.dat-sidebar--collapsed {
    align-items: center;
    padding: var(--space-3) 0;
    --_sidebar-label-display: none;
    --_sidebar-item-justify: center;
    --_sidebar-item-width: var(--nav-collapsed-target);
    --_sidebar-item-height: var(--nav-collapsed-target);
    --_sidebar-item-padding: 0;
    --_sidebar-group-label-height: var(--border-width);
    --_sidebar-group-label-padding: 0;
    --_sidebar-group-label-bg: var(--color-border);
    --_sidebar-group-label-overflow: hidden;
    --_sidebar-group-label-indent: -999px;
}

/* Przyklejony do góry, bo nagłówek dnia w osi wydarzeń przykleja się pod nim
   (--topbar-height) -- gdyby pasek przewijał się swobodnie, nagłówek dnia
   zawisałby w pustym miejscu, a treść przewijałaby się nad nim. */
.dat-topbar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    /* min-height, nie height: przy dlugiej nazwie gospodarstwa sztywna wysokosc
       przycinala tresc zamiast ja pomiescic. Nazwa i tak sie nie zawija (nizej),
       wiec pasek zostaje 52px -- to zabezpieczenie, nie zmiana wygladu. */
    min-height: var(--topbar-height);
    padding: 0 var(--space-4);
    background: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
}

.dat-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* min-width: 0 pozwala sciezce kurczyc sie w kontenerze flex zamiast rozpychac
   pasek. Skraca sie nazwa gospodarstwa, bo to ona bywa dowolnie dluga; biezaca
   sekcja zostaje w calosci, inaczej uzytkownik traci informacje, gdzie jest. */
.dat-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--text-overline-size);
}

.dat-breadcrumb__link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.dat-breadcrumb__sep { flex: none; color: var(--color-text-muted); }

.dat-breadcrumb__current {
    flex: none;
    white-space: nowrap;
    color: var(--color-text);
    font-weight: var(--text-title-weight);
}

.dat-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: var(--search-width);
    height: var(--control-height-sm);
    padding: 0 var(--input-padding-x);
    border-radius: var(--input-radius);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
}

.dat-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: var(--text-small-size); }
.dat-search__kbd { font-family: var(--font-mono); font-size: var(--text-overline-size); color: var(--color-text-muted); }

.dat-page { display: flex; flex-direction: column; min-width: 0; }

/* Kolumna tresci trzyma sie sidebara zamiast plywac na srodku. Ograniczenie
   szerokosci zostaje -- dlugie wiersze sa nieczytelne -- ale nadmiar miejsca
   ladu po prawej, nie po obu stronach. Przy szerokim monitorze wysrodkowanie
   odklejalo liste od nawigacji, do ktorej nalezy. */
.dat-page__inner {
    width: 100%;
    max-width: var(--content-max);
    margin-right: auto;
    padding: var(--space-6) var(--space-6) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--gap-blocks);
}

/* Waska kolumna zostaje wysrodkowana: to pojedynczy formularz do wypelnienia,
   zadanie skupione, a nie lista nalezaca do nawigacji. */
.dat-page__inner--narrow { max-width: var(--content-max-narrow); }

.dat-page__head { display: flex; align-items: flex-start; gap: var(--space-4); }
.dat-page__head-text { display: flex; flex-direction: column; gap: var(--space-1); }
.dat-page__head-desc { font-size: var(--text-small-size); color: var(--color-text-secondary); }
.dat-page__head-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.dat-page__section-title { margin-top: var(--space-2); }

.dat-icon { width: var(--nav-icon-size); height: var(--nav-icon-size); flex: none; }
.dat-icon--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.dat-icon--xl { width: var(--icon-size-xl); height: var(--icon-size-xl); }

.dat-grid { display: grid; gap: var(--gap-blocks); }
.dat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dat-stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* Referencja nie podaje progów. Te wynikają z szerokości, przy której kolumna
   treści przestaje mieścić kartę statystyk w czytelnej szerokości. */
@media (max-width: 1200px) {
    .dat-shell { --_shell-sidebar-width: var(--sidebar-width-collapsed); }

    .dat-sidebar {
        align-items: center;
        padding: var(--space-3) 0;
        --_sidebar-label-display: none;
        --_sidebar-item-justify: center;
        --_sidebar-item-width: var(--nav-collapsed-target);
        --_sidebar-item-height: var(--nav-collapsed-target);
        --_sidebar-item-padding: 0;
        --_sidebar-group-label-height: var(--border-width);
        --_sidebar-group-label-padding: 0;
        --_sidebar-group-label-bg: var(--color-border);
        --_sidebar-group-label-overflow: hidden;
        --_sidebar-group-label-indent: -999px;
    }
}

/* Pod 860px na sidebar nie starcza już wysokości ekranu telefonu — zamiast
   znikać, spłaszcza się w poziomy pasek ikon nad treścią. Nawigacja musi
   działać na każdej szerokości, więc w przeciwieństwie do 1200px chowamy tu
   markę i etykiety grup, a nie tylko etykiety pozycji. Stopka zostaje --
   to jedyny sposób przełączenia motywu, więc znika tylko jej etykieta
   tekstowa (przez tę samą zmienną --_sidebar-label-display), nie ona sama.
   Cel dotykowy rośnie do --touch-target: --nav-collapsed-target (36px) jest
   dobry dla wskaźnika myszy przy zwinięciu na biurku, ale za mały pod palec. */
@media (max-width: 860px) {
    /* Jedna kolumna, dwa wiersze -- aside i main lądują jeden pod drugim
       przez zwykłe automatyczne rozmieszczenie gridu, bez jawnych wierszy.
       Sama kolumna nadpisuje grid-template-columns wprost: przy poziomym
       pasku ikon nie ma już znaczenia --_shell-sidebar-width z żadnego toru
       zwinięcia, więc selektor :has(.dat-sidebar--collapsed) tu niepotrzebny. */
    .dat-shell { grid-template-columns: minmax(0, 1fr); }

    .dat-sidebar {
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        border-right: 0;
        border-bottom: var(--border-width) solid var(--color-border);
        padding: 0 var(--space-2);
        --_sidebar-label-display: none;
        --_sidebar-item-justify: center;
        --_sidebar-item-width: var(--touch-target);
        --_sidebar-item-height: var(--touch-target);
        --_sidebar-item-padding: 0;
    }

    .dat-sidebar__brand,
    .dat-sidebar__group-label { display: none; }

    .dat-sidebar__nav,
    .dat-sidebar__group,
    .dat-sidebar__item { flex: none; }

    .dat-sidebar__nav,
    .dat-sidebar__group { flex-direction: row; }

    /* margin-left: auto samo w sobie nie wystarcza -- przy realnej szerokości
       telefonu (360-375px) sześć pozycji nawigacji po --touch-target już nie
       mieści się obok stopki, więc "auto" zeruje się i stopka ucieka poza
       widoczny fragment paska. position: sticky przykleja ją do prawej
       krawędzi widocznego obszaru .dat-sidebar niezależnie od przewinięcia --
       przełącznik motywu zostaje zawsze osiągalny bez przewijania paska. */
    .dat-sidebar__foot {
        margin-top: 0;
        margin-left: auto;
        padding: 0;
        border-top: 0;
        position: sticky;
        right: 0;
        background: var(--color-surface);
        border-left: var(--border-width) solid var(--color-border);
    }

    /* Stopka to jedyny inny klikalny element paska poza pozycjami nawigacji
       -- w torze mobilnym też musi spełniać próg dotyku, inaczej pozycje
       obok rosną do --touch-target, a przełącznik motywu zostaje mniejszy. */
    .dat-sidebar__theme-btn {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
    }

    .dat-page__inner { padding: var(--space-4) var(--space-4) var(--space-8); }

    /* Naglowek strony przestaje byc rzedem: akcja obok tytulu sciskala opis
       do czterech waskich linii. W kolumnie tekst dostaje pelna szerokosc,
       a przycisk laduje pod nim, nie obok. */
    .dat-page__head { flex-direction: column; align-items: stretch; }
    .dat-page__head-actions { margin-left: 0; }
    .dat-grid--3, .dat-grid--4 { grid-template-columns: minmax(0, 1fr); }
}