/* =====================================================================
   SIMTU WWW Client — layout.css
   ---------------------------------------------------------------------
   WLASCICIEL: agent "rama". Tu mieszka WYLACZNIE powloka aplikacji:
   lewy rail, pasek zakladek, lewy panel kontekstowy i obszar ekranu.
   Komponentow wielokrotnego uzytku NIE dopisujemy — te sa w components.css.

   ZRODLO UKLADU — Figma 5EhOBm4rUvbayzFZkwnQpT, strona 232:159:
       2134:6011  Sidebar Hide FINAL  — rail rozwiniety 182x696
       2134:6015  Sidebar Hide FINAL  — rail zwiniety    44x696
       2317:5469  Tabbbar             — 1098x40
       677:5372   App Left Submenu    — 236x648
       430:591    App Background      — 1280x720, radius 9, blur 50
       2134:5532  SIMTU App           — pelna kompozycja 1280x720
       2126:4562  SIMTU App Text 6    — stany etykiety railu

   GEOMETRIA POWLOKI odczytana z 2134:5532 (i zgodna z wymiarami wezlow):
       y   0..24   pasek okna systemowego (w przegladarce go nie ma)
       y  24..64   TABBAR (40px) — od prawej krawedzi railu do krawedzi okna
       y  68..716  lewy panel (236x648) + obszar ekranu, odstep 4px
       x   0..44   rail zwiniety   |   x 0..182 rail rozwiniety
   Rail ma wlasny pas 44px na gorze (logotyp), ktory laduje sie w pionie
   z pasem tabbara. To NIE jest titlebar (Figma go nie ma) — powloka trzyma
   ten wymiar we wlasnej zmiennej --brand-h, zeby nie podszywac sie pod
   token --titlebar-h z theme.css, ktory znaczy co innego.

   PALETA: wylacznie var(--token) z theme.css. Szarosci z Figmy skladamy
   z istniejacych tokenow (decyzja: paleta zostaje z SIMTU-Qt6):
       Figma #5b5b5c (etykieta nieaktywna) -> var(--text-tertiary)
       Figma #1b1b1b (hover pozycji)       -> var(--overlay-active)
       Figma #383838 (pozycja wybrana)     -> var(--bg-elevated)
                                              + var(--overlay-strong)
       Figma #00adee (dropdown projektu)   -> var(--status-info)
       Figma #e5058e (aktywny projekt)     -> var(--accent-primary)
       Figma #000008 (tlo okna, rail)      -> var(--bg-void)

   IKONY: ui.js icon() zwraca inline SVG z rozmiarem w stylu inline
   (width:var(--ic-w,32px)). Styl inline wygrywa z arkuszem, wiec rozmiar
   ustawiamy PUNKTOWO przez --ic-w/--ic-h na konkretnym kontekscie,
   a nie jedna globalna regula na `svg`.
   ===================================================================== */


/* =====================================================================
   01. POWLOKA
   ---------------------------------------------------------------------
   <div class="app-shell">
     <nav class="sidebar">…rail…</nav>
     <div class="app-body">
       <div class="tabbar">…</div>
       <div class="main">
         <aside class="side-panel project-panel-slot panel">…</aside>
         <div class="content"><main class="page" id="view"></main></div>
       </div>
     </div>
   </div>
   ===================================================================== */

.app-shell {
    /* Pas logotypu w railu == pas tabbara (Figma: 24..64 przy railu od 24). */
    --brand-h: 44px;

    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--bg-void);
}

/* Kolumna na prawo od railu: tabbar + reszta. */
.app-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Pas roboczy pod tabbarem — panel i ekran plywaja na tle okna,
   odstep 4px (--module-gap) zgodnie z Figma. */
.main {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: var(--module-gap);
    padding: var(--module-gap);
    overflow: hidden;
}

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

/* Okno tresci. Figma 432:894 mierzy 988x604 — dokladnie tyle, ile wychodzi
   z .main (rail 44 + 4 + panel 236 + 4 + 988 + 4 = 1280). Odstep 4px od
   panelu i od krawedzi okna wnosi juz padding/gap na .main, wiec .page NIE
   dokłada wlasnego insetu: wewnetrzne 12px (--panel-pad) nalezy do ekranu,
   tak jak zawsze zakladal wariant .flush. Bez tego padding sie sumowal
   (ekrany z wlasnym 12px konczyly na 16px, a te bez niego na 4px). */
.page {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    padding: 0;
    background: transparent;
}

/* Ekrany pelnowysokosciowe (listy, board, messages) same zarzadzaja
   przestrzenia. Klase nadaje WYLACZNIE route() w app.js. */
.page.flush {
    padding: 0;
    overflow: hidden;
}


/* =====================================================================
   02. LEWY RAIL
   ---------------------------------------------------------------------
   Figma 2134:6011 / 2134:6015. Dwa stany, przelaczane pozycja
   "Hide Left Menu" (klasa .rail-collapsed na .app-shell, stan w localStorage):

       rozwiniety  182px : pozycja 170x32, ikona 32 + gap 3 + etykieta 13/18
       zwiniety     44px : sama ikona 32x32 w kwadracie 32x32

   Rytm pionowy: pozycja 32px + 8px odstepu = 40px skoku (Figma: 44, 84,
   124, 164, 204, 244 od gory; 4, 44, 84, 124 od dolu).
   ===================================================================== */

.sidebar {
    display: flex;
    flex-direction: column;
    width: var(--rail-w-expanded);
    flex-shrink: 0;
    /* Figma: pozycja zaczyna sie 8px od lewej i ma 170px szerokosci przy
       railu 182px oraz 32px przy railu 44px — te same 8/4 dzialaja w obu
       stanach, wiec padding nie wymaga nadpisania przy zwijaniu. */
    padding: 0 var(--module-gap) var(--module-gap) var(--space-2);
    background: var(--bg-void);
    user-select: none;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width var(--t-base) var(--ease);
}

/* --- Pas logotypu (Figma: logotyp 75.7x24 na pozycji 17,8) ---------- */

.rail-brand {
    display: flex;
    align-items: flex-start;
    height: var(--brand-h);
    padding: var(--space-2) 9px 0;
    flex-shrink: 0;
}

.rail-brand-link {
    display: inline-flex;
    align-items: center;
    height: 24px;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: opacity var(--t-fast);
}
.rail-brand-link:hover { opacity: 0.85; }

/* Wordmark i sygnet niosa wlasne, zaprojektowane wymiary — nie skalujemy
   ich wspolna regula (wordmark 76x24, sygnet 14x24). */
.rail-brand-wordmark { --ic-w: 76px; --ic-h: 24px; }
.rail-brand-mark     { --ic-w: 14px; --ic-h: 24px; display: none; }

/* --- Grupy pozycji -------------------------------------------------- */

.rail-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
}

.rail-spacer {
    flex: 1;
    min-height: var(--space-4);
}

.rail-sep {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-2) 0;
    flex-shrink: 0;
}

/* --- Pozycja railu -------------------------------------------------- */

.rail-item {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;
    height: var(--ic-rail);
    padding: 0 9px 0 0;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
    text-align: left;
    flex-shrink: 0;
    position: relative;
    transition: background-color var(--t-base), color var(--t-base);
}

/* Ikona railu 32x32 (Figma) — rozmiar punktowy, nie globalna regula. */
.rail-ico {
    --ic-w: var(--ic-rail);
    --ic-h: var(--ic-rail);
    width: var(--ic-rail);
    height: var(--ic-rail);
    flex-shrink: 0;
}

.rail-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-item:hover {
    background-color: var(--overlay-active);   /* Figma #1b1b1b */
    color: var(--text-primary);
}

/* Figma #383838: jasniejszy prostokat pod pozycja. Skladamy z tokenow —
   tlo "elevated" + nakladka, zeby nie wpisywac hexa poza theme.css. */
.rail-item.active {
    background-color: var(--bg-elevated);
    background-image: linear-gradient(var(--overlay-strong), var(--overlay-strong));
    color: var(--text-primary);
}

/* Pozycja bedaca akcja, nie nawigacja ("Hide Left Menu"). */
.rail-item.is-action { color: var(--text-tertiary); }

/* Licznik powiadomien przy pozycji railu. */
.rail-badge {
    margin-left: auto;
    min-width: 13px;
    height: 13px;
    padding: 0 2px;
    border-radius: var(--radius-sm);
    background: var(--status-info);
    color: var(--text-on-accent);
    font: var(--fw-regular) var(--fs-badge) / 13px var(--font);
    text-align: center;
    flex-shrink: 0;
}

/* --- Stan zwiniety (Figma 2134:6015, 44px) -------------------------- */

/* 8 (lewy) + 32 (ikona) + 4 (prawy) = 44 */
.app-shell.rail-collapsed .sidebar { width: var(--rail-w-collapsed); }
.app-shell.rail-collapsed .rail-item {
    width: var(--ic-rail);
    padding: 0;
    justify-content: center;
}
.app-shell.rail-collapsed .rail-label { display: none; }
.app-shell.rail-collapsed .rail-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    margin: 0;
}
.app-shell.rail-collapsed .rail-brand {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}
.app-shell.rail-collapsed .rail-brand-wordmark { display: none; }
.app-shell.rail-collapsed .rail-brand-mark     { display: inline-flex; }


/* =====================================================================
   03. TABBAR
   ---------------------------------------------------------------------
   Figma 2317:5469 (1098x40):
       [wstecz 32] 8 [dalej 32] 8 [szukaj 32]  — od lewej 4px
       zakladki od 124px: h32, padding 0 9px, radius 6, Inter 13/18
       po prawej (right 13px): dropdown wyboru aktywnego projektu
   ===================================================================== */

.tabbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--tabbar-h);
    flex-shrink: 0;
    padding: 0 var(--panel-pad) 0 var(--module-gap);
    background: var(--bg-void);
    user-select: none;
}

.tabbar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.tabnav-btn {
    --ic-w: var(--ic-rail);
    --ic-h: var(--ic-rail);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ic-rail);
    height: var(--ic-rail);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: background-color var(--t-fast), color var(--t-fast);
}
.tabnav-btn:hover:not(:disabled) {
    background-color: var(--overlay-active);
    color: var(--text-primary);
}
.tabnav-btn:disabled {
    color: var(--text-tertiary);
    opacity: 0.45;
}

/* Szukaj ma w Figmie stale tlo #1b1b1b (jest zawsze "podniesiony"). */
.tabnav-btn.tabnav-search {
    background-color: var(--overlay-active);
    color: var(--text-secondary);
}
.tabnav-btn.tabnav-search:hover { color: var(--text-primary); }

/* --- Zakladki ------------------------------------------------------- */

.tabs {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { height: 0; }

.tab {
    display: flex;
    align-items: center;
    height: var(--ic-rail);
    padding: 0 9px;
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color var(--t-base), color var(--t-base);
}
.tab:hover {
    background-color: var(--overlay-active);
    color: var(--text-primary);
}
.tab.active {
    background-color: var(--bg-elevated);
    background-image: linear-gradient(var(--overlay-strong), var(--overlay-strong));
    color: var(--text-primary);
}

/* --- Prawa strona tabbara ------------------------------------------- */

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


/* =====================================================================
   04. WYBOR AKTYWNEGO PROJEKTU (prawa strona tabbara)
   ---------------------------------------------------------------------
   Figma 2317:5418 "Select active project": h32, radius 6, tlo SIMTU
   accent 3 (#00adee -> --status-info), tekst 13/18 bialy, karetka po prawej.
   Stan trzyma state.js (selectedProjectId) — TO NIE jest osobne zrodlo prawdy.
   ===================================================================== */

.project-select {
    position: relative;
    flex-shrink: 0;
    min-width: 0;
}

.project-select-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--ic-rail);
    max-width: 220px;
    padding: 0 9px;
    border-radius: var(--radius-md);
    background-color: var(--status-info);
    color: var(--text-on-accent);
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
    transition: background-image var(--t-fast);
}
.project-select-btn:hover {
    background-image: linear-gradient(var(--overlay-active), var(--overlay-active));
}
.project-select-btn:disabled { opacity: 0.5; }

.project-select-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-select-caret {
    --ic-w: var(--ic-chevron);
    --ic-h: var(--ic-chevron);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.project-select-menu {
    position: absolute;
    top: calc(100% + var(--module-gap));
    right: 0;
    min-width: 220px;
    max-height: 60vh;
    overflow-y: auto;
}
.project-select-menu[hidden] { display: none; }

.project-select-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}


/* =====================================================================
   05. PRZELACZNIK WORKSPACE + UZYTKOWNIK (prawa strona tabbara)
   ---------------------------------------------------------------------
   Figma nie projektuje tych kontrolek, wiec przejmuja jezyk tabbara:
   h32, radius 6, tlo #1b1b1b (--overlay-active), tekst 13/18.
   ===================================================================== */

.ws-switcher {
    position: relative;
    min-width: 0;
    flex-shrink: 1;
}

.ws-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--ic-rail);
    max-width: 100%;
    padding: 0 9px;
    border-radius: var(--radius-md);
    background-color: var(--overlay-active);
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
    transition: background-color var(--t-fast);
}
.ws-switcher-btn:hover { background-color: var(--overlay-strong); }
.ws-switcher-btn:disabled { opacity: 0.5; }

.ws-switcher-icon {
    --ic-w: var(--ic-md);
    --ic-h: var(--ic-md);
    display: inline-flex;
    align-items: center;
    color: var(--accent-primary);
    flex-shrink: 0;
}
.ws-switcher-name {
    min-width: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-switcher-caret {
    --ic-w: var(--ic-chevron);
    --ic-h: var(--ic-chevron);
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.ws-switcher-menu {
    position: absolute;
    top: calc(100% + var(--module-gap));
    right: 0;
    min-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
}
.ws-switcher-menu[hidden] { display: none; }

.ws-switcher-item-icon {
    --ic-w: var(--ic-md);
    --ic-h: var(--ic-md);
    display: inline-flex;
    align-items: center;
    color: var(--accent-primary);
    flex-shrink: 0;
}
.ws-switcher-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-switcher-empty {
    padding: var(--space-3);
    color: var(--text-tertiary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    text-align: center;
}

/* --- Uzytkownik i wylogowanie --------------------------------------- */

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--ic-rail);
    max-width: 200px;
    padding: 0 9px 0 var(--module-gap);
    border-radius: var(--radius-md);
    background-color: var(--overlay-active);
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
    flex-shrink: 0;
    transition: background-color var(--t-fast);
}
.user-chip:hover { background-color: var(--overlay-strong); }
.user-chip .avatar {
    width: 24px;
    height: 24px;
    border: none;
    font: var(--fw-medium) var(--fs-list) / var(--lh-list) var(--font);
}
.user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.titlebar-icon-btn {
    --ic-w: var(--ic-md);
    --ic-h: var(--ic-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ic-rail);
    height: var(--ic-rail);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: background-color var(--t-fast), color var(--t-fast);
}
.titlebar-icon-btn:hover {
    background-color: var(--overlay-active);
    color: var(--text-primary);
}


/* =====================================================================
   06. LEWY PANEL KONTEKSTOWY
   ---------------------------------------------------------------------
   Figma 677:5372 "App Left Submenu Dashboard" (236x648):
       karta glazed, radius 8, blur 50, cien 0 15px 26px
       naglowek  : tytul Inter Medium 10/14 (12,13), "+" 8x8 (right 12, top 16)
       search    : 212x22, radius 6, glazed, tekst 13/18, padding 0 9px
       All Projects : 212x22, radius 6, tlo akcentu, tekst bialy
       lista     : wiersze 22px, odstep 4px, hover = glazed
   Element nosi tez klase .panel z components.css (efekt glazed + blur),
   tutaj dokladamy tylko wymiar, cien i uklad wewnetrzny.
   ===================================================================== */

.project-panel-slot {
    display: flex;
    flex-direction: column;
    width: var(--panel-w);
    flex-shrink: 0;
    overflow: hidden;
    /* Figma 677:5372: rozmycie 50px (a nie domyslne 20px klasy .panel)
       oraz cien 0 15px 26px. */
    -webkit-backdrop-filter: blur(var(--glaze-blur-window));
            backdrop-filter: blur(var(--glaze-blur-window));
    box-shadow: var(--shadow-window);
}

/* Sekcje bez panelu (Workspaces): app.js ustawia [hidden]; regula UA
   przegrywa z display:flex, wiec powtarzamy ja tutaj. */
.project-panel-slot[hidden],
.project-panel-slot.empty { display: none; }
.app-shell.panel-collapsed .project-panel-slot { display: none; }

.proj-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* --- Naglowek panelu ------------------------------------------------ */

.proj-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--submenu-h);
    padding: 0 var(--panel-pad);
    flex-shrink: 0;
}

.proj-panel-title {
    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;
}

/* Figma: sam znak "+" 8x8, bez tla. */
.proj-panel-add {
    --ic-w: var(--ic-md);
    --ic-h: var(--ic-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ic-md);
    height: var(--ic-md);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: color var(--t-fast);
}
.proj-panel-add:hover { color: var(--text-primary); }

/* --- Wyszukiwarka panelu -------------------------------------------- */

.proj-panel-search {
    padding: 0 var(--panel-pad);
    flex-shrink: 0;
}
/* Panel ma wlasny wariant pola: 212x22, tekst listy 13/18
   (komponent bazowy z components.css jest 212x16, Inter 10/14). */
.proj-panel-search .search-bar {
    width: 100%;
    height: 22px;
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
}

/* --- Pozycja stala ("All Projects") --------------------------------- */

.proj-panel-static {
    padding: var(--space-4) var(--panel-pad) 0;
    flex-shrink: 0;
}

/* --- Lista projektow / kategorii ------------------------------------ */

.proj-panel-list {
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    flex: 1;
    min-height: 0;
    padding: var(--module-gap) var(--panel-pad) var(--panel-pad);
    overflow-y: auto;
}

.proj-panel-empty {
    padding: var(--space-4) 9px;
    color: var(--text-tertiary);
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    text-align: center;
}

.proj-panel-item,
.cat-panel-item {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--t-fast), color var(--t-fast);
}

/* Figma: hover pozycji = ta sama powloka co panel (warstwa glazed). */
.proj-panel-item:hover,
.cat-panel-item:hover { background-color: var(--glaze-3); }

.proj-panel-item.active,
.cat-panel-item.active {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.proj-panel-item.dragging { opacity: 0.5; }

.proj-panel-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.proj-panel-name,
.cat-panel-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-panel-actions {
    display: none;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.proj-panel-item:hover .proj-panel-actions { display: inline-flex; }

/* Ikony akcji z Figmy sa 32x32 — w wierszu 22px schodza do 16px.
   Reguly punktowe, nie globalne (--ic-w/--ic-h, bo ui.js pisze rozmiar
   w stylu inline). */
.proj-panel-act {
    --ic-w: var(--ic-md);
    --ic-h: var(--ic-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ic-md);
    height: var(--ic-md);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font: var(--fw-regular) var(--fs-list) / 1 var(--font);
    transition: background-color var(--t-fast);
}
.proj-panel-act:hover { background-color: var(--overlay-strong); }

.proj-panel-count {
    font: var(--fw-regular) var(--fs-list) / var(--lh-list) var(--font);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.proj-panel-item.active .proj-panel-count { color: var(--text-on-accent); }

/* --- Panel kategorii (Products / Brands) ---------------------------- */

.cat-chevron {
    --ic-w: var(--ic-chevron);
    --ic-h: var(--ic-chevron);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ic-chevron);
    color: var(--text-secondary);
    font: var(--fw-bold) var(--fs-list) / 1 var(--font);
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}
.cat-chevron:hover { color: var(--text-primary); }
.cat-chevron.hidden { visibility: hidden; }

.cat-list .proj-panel-item,
.cat-list .cat-panel-item { gap: var(--module-gap); }

/* --- Menu sekcji (Profile/Company, Requests, Account) --------------- */

.side-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.side-menu-head {
    display: flex;
    align-items: center;
    height: var(--submenu-h);
    padding: 0 var(--panel-pad);
    flex-shrink: 0;
}
.side-menu-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;
}

.side-menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--module-gap);
    min-height: 0;
    padding: 0 var(--panel-pad) var(--panel-pad);
    overflow-y: auto;
}

.side-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--t-fast), color var(--t-fast);
}
.side-menu-item:hover { background-color: var(--glaze-3); color: var(--text-primary); }
.side-menu-item.active {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
}
/* Menu miesza ikony z Figmy (32px) i zapasowe (24px) — sprowadzamy
   je do 16px TYLKO w tym kontekscie. */
.side-menu-item .ic,
.side-menu-item .icon {
    --ic-w: var(--ic-md);
    --ic-h: var(--ic-md);
    flex-shrink: 0;
}

.side-menu-sep {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-2) var(--panel-pad);
    flex-shrink: 0;
}


/* =====================================================================
   07. RESPONSYWNOSC POWLOKI
   ---------------------------------------------------------------------
   Tylko rama. Reguly ekranow naleza do arkuszy screen-*.css.
   ===================================================================== */

@media (max-width: 1240px) {
    .ws-switcher-name { max-width: 110px; }
}

@media (max-width: 1100px) {
    /* Lewy panel schodzi z drogi — ekran dostaje pelna szerokosc. */
    .project-panel-slot { display: none; }
    .user-name { display: none; }
    .user-chip { padding: 0 var(--module-gap); }
}

@media (max-width: 780px) {
    /* Rail zwiniety niezaleznie od zapamietanego stanu. */
    .sidebar { width: var(--rail-w-collapsed); }
    .rail-item {
        width: var(--ic-rail);
        padding: 0;
        justify-content: center;
    }
    .rail-label { display: none; }
    .rail-brand {
        padding-left: 0;
        padding-right: 0;
        justify-content: center;
    }
    .rail-brand-wordmark { display: none; }
    .rail-brand-mark     { display: inline-flex; }

    .tabbar { padding: 0 var(--space-2) 0 var(--module-gap); gap: var(--module-gap); }
    .ws-switcher-name { display: none; }
    .project-select-btn { max-width: 140px; }
}