/* =============================================================
   MENU PANELU (2026-09-15) — szkielet aplikacji: pasek boczny, panel
   statusów, górna belka, paleta Ctrl K. Projekt: kanwa „Menu panelu BLEYO"
   (decyzja Adiego 15.09: wariant B z rozwijanym paskiem).

   Jedno miejsce na cały szkielet. Ładowany PO bleyo.css (nadpisuje
   --sidebar-width i czcionki), PRZED pakiety.css (jego reguły dla pozycji
   spoza pakietu mają wygrywać) i PRZED mobile.css (telefon ma ostatnie słowo).

   Język wizualny = ekran logowania panelu rejestracji: tło #0B0C0E,
   powierzchnie #131316, linie 1 px #26262A, ciepła biel #F2F0EA, promienie
   10 / 14 px, pomarańcz #EA580C tylko na aktywnych, alarmach i CTA.
   Kontrasty na ciemnym: #C9C6BE 11,6:1 · #8E8C86 5,9:1 · #FF8A45 7,4:1.

   Stany paska (klasa na <body>, sidebar.js):
     (brak)              rozwinięty 264 px — grupy z ikonami, podkategorie
     .sidebar-collapsed  zwinięty 76 px  — szyna: ikona + podpis grupy
   Panel statusów (.bleyo-panel, 236 px) pojawia się tylko na /orders*
   (_app_layout.html) — to „Lista zamówień" rozwinięta obok paska.
   ============================================================= */

:root {
    --font-sans: "Geist", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "Geist Mono", "JetBrains Mono", Consolas, monospace;

    --sidebar-width: 264px;
    --sidebar-width-collapsed: 76px;
    --panel-width: 236px;
    --header-height: 60px;

    /* pasek (ciemny) */
    --menu-bg: #0B0C0E;
    --menu-s: #131316;
    --menu-s2: #1B1B1F;
    --menu-line: #26262A;
    --menu-line2: #303035;
    --menu-t: #F2F0EA;
    --menu-item: #C9C6BE;
    --menu-m: #8E8C86;
    --menu-m2: #6B6963;
    --menu-orange: #EA580C;
    --menu-orange-soft: #FF8A45;
    --menu-orange-hi: #FF6A1F;

    /* panel statusów i belka (jasne, ciepłe) */
    --panel-bg: #F7F5F0;
    --panel-line: #E4E1D8;
    --panel-t: #0A0A0A;
    --panel-m: #6B6963;
    --panel-m2: #8E8C86;
    --panel-s3: #EDEAE2;

    /* zgodność wstecz: czerwień alarmowa z dawnego menu statusów */
    --bleyo-red-alert: #F87171;
}

body.sidebar-collapsed {
    --sidebar-width: var(--sidebar-width-collapsed);
}

/* ── Szkielet ─────────────────────────────────────────────────────────── */
.bleyo-app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns 200ms ease-out;
}
.bleyo-app-shell--panel {
    grid-template-columns: var(--sidebar-width) var(--panel-width) minmax(0, 1fr);
}
.bleyo-app-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Górna belka (nad treścią, nie nad paskiem) ──────────────────────── */
.bleyo-app-header {
    height: var(--header-height);
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    background: var(--bleyo-white);
    border-bottom: 1px solid var(--panel-line);
    position: sticky;
    top: 0;
    z-index: 100;
}
.bleyo-app-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.bleyo-app-header-separator {
    color: var(--panel-m2);
    display: flex;
}
.bleyo-app-header-workspace {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--panel-m);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bleyo-app-header-workspace strong {
    color: var(--panel-t);
    font-weight: 500;
}
.bleyo-app-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bleyo-app-header-user {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 12px 0 5px;
    border-radius: 999px;
    border: 1px solid var(--panel-line);
    background: var(--panel-bg);
    font-size: 13px;
    color: var(--panel-t);
    max-width: 320px;
}
.bleyo-app-header-user-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bleyo-app-header-avatar {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 999px;
    background: var(--menu-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.bleyo-logout-form { margin: 0; }
.bleyo-app-header .bleyo-btn-secondary {
    height: 38px;
    border-radius: 10px;
    border-color: var(--panel-line);
    letter-spacing: .4px;
    text-transform: none;
    font-size: 13px;
    padding: 0 12px;
    gap: 8px;
}
.bleyo-app-header .bleyo-btn-secondary:hover { background: var(--panel-bg); }

/* ── Pasek boczny ─────────────────────────────────────────────────────── */
.bleyo-sidebar {
    background: var(--menu-bg);
    color: var(--menu-t);
    border-right: 1px solid var(--menu-line);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: 14px 12px 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--menu-line2) transparent;
    transition: padding 200ms ease-out;
}

/* znak marki — jak na bleyo.ai: BLEYO + pomarańczowa płytka + „AI" mono */
.bleyo-brand {
    display: inline-flex;
    align-items: flex-end;
    line-height: 1;
    text-decoration: none;
    color: var(--menu-t);
    min-width: 0;
}
.bleyo-brand-text {
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.03em;
    color: inherit;
}
.bleyo-brand-tile {
    width: 9px;
    height: 9px;
    margin: 0 0 1px 3px;
    flex: none;
    display: block;
}
.bleyo-brand-ai {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--menu-m);
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--menu-line2);
    align-self: center;
}
.bleyo-brand:hover .bleyo-brand-tile rect { fill: var(--menu-orange-soft); }

.bleyo-side-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 32px;
    padding: 0 6px 0 10px;
    flex: none;
}

/* przełącznik zwijania — mały kwadrat obok logo (nie pływający przycisk) */
.bleyo-sidebar-toggle {
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    border: 1px solid var(--menu-line);
    border-radius: 8px;
    background: var(--menu-s);
    color: var(--menu-m);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}
.bleyo-sidebar-toggle:hover { color: var(--menu-t); background: var(--menu-s2); }
.bleyo-sidebar-toggle:focus-visible { outline: 2px solid var(--menu-orange); outline-offset: 2px; }
.bleyo-sidebar-toggle-icon { display: block; }

/* pole „Szukaj lub wpisz polecenie" = otwiera paletę Ctrl K */
.bleyo-side-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    margin: 14px 0 0;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--menu-s);
    border: 1px solid var(--menu-line);
    color: var(--menu-m);
    font-family: var(--font-sans);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    width: 100%;
    flex: none;
    transition: border-color .15s, color .15s;
}
.bleyo-side-search:hover { border-color: var(--menu-line2); color: var(--menu-item); }
.bleyo-side-search:focus-visible { outline: 2px solid var(--menu-orange); outline-offset: 2px; }
.bleyo-side-search-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bleyo-kbd {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--menu-m2);
    border: 1px solid var(--menu-line2);
    border-radius: 6px;
    padding: 2px 6px;
    line-height: 1.2;
    white-space: nowrap;
}

/* nawigacja */
.bleyo-side-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
    flex: 1 0 auto;
}

.bleyo-nav-group {
    border: 0;
    position: relative;
}
.bleyo-nav-group > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.bleyo-nav-group > summary::-webkit-details-marker { display: none; }
.bleyo-nav-group > summary:focus-visible { outline: none; }
.bleyo-nav-group > summary:focus-visible .bleyo-nav-group-header {
    outline: 2px solid var(--menu-orange);
    outline-offset: -2px;
}

.bleyo-nav-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--menu-t);
    font-size: 14px;
    font-weight: 500;
    transition: background .12s;
}
.bleyo-nav-group-header:hover { background: var(--menu-s); }
.bleyo-nav-group[open] > summary > .bleyo-nav-group-header { background: var(--menu-s); }

.bleyo-nav-group-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.bleyo-nav-group-icon {
    width: 19px;
    height: 19px;
    flex: none;
    color: var(--menu-m);
    transition: color .15s;
}
.bleyo-nav-group[open] > summary .bleyo-nav-group-icon,
.bleyo-nav-group.is-current > summary .bleyo-nav-group-icon { color: var(--menu-orange-soft); }
.bleyo-nav-group-text {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bleyo-nav-group-chevron {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--menu-m2);
    transition: transform .18s ease-out;
}
.bleyo-nav-group[open] > summary .bleyo-nav-group-chevron { transform: rotate(180deg); }

/* plakietka alarmowa na nagłówku grupy (eskalacje Customer AI, statusy „wymaga uwagi") */
.bleyo-nav-badge-alert {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    background: var(--menu-orange);
    color: #fff;
    border-radius: 999px;
    padding: 2px 7px;
    line-height: 1.3;
    flex: none;
}

.bleyo-nav-group-items {
    list-style: none;
    margin: 0;
    padding: 4px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bleyo-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 10px 0 13px;
    margin-left: 19px;
    border-radius: 9px;
    color: var(--menu-item);
    font-size: 13.5px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.bleyo-nav-item:hover {
    background: var(--menu-s);
    color: var(--menu-t);
}
.bleyo-nav-item:focus-visible {
    outline: 2px solid var(--menu-orange);
    outline-offset: 2px;
}
.bleyo-nav-item.is-active {
    background: rgba(234, 88, 12, .14);
    color: var(--menu-t);
    font-weight: 600;
}
.bleyo-nav-mark {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 999px;
}
.bleyo-nav-item.is-active .bleyo-nav-mark {
    background: var(--menu-orange);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .25);
}
.bleyo-nav-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bleyo-nav-item-arrow {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--menu-orange-soft);
    display: none;
}
.bleyo-nav-item.is-active .bleyo-nav-item-arrow { display: block; }

/* pozycje zapowiedziane (BaseLinker), jeszcze bez ekranu */
.bleyo-nav-item--wkrotce {
    color: var(--menu-m2);
    cursor: default;
}
.bleyo-nav-item--wkrotce:hover { background: transparent; color: var(--menu-m2); }
.bleyo-nav-wkrotce {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--menu-m2);
    border: 1px solid var(--menu-line2);
    border-radius: 6px;
    padding: 1px 5px;
    flex: none;
}

/* liczniki: mono, stała szerokość — nie skaczą przy 1 vs 198 */
.bleyo-nav-counter {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 500;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--menu-s2);
    color: var(--menu-m);
    flex: none;
    text-align: center;
}
.bleyo-nav-item.is-active .bleyo-nav-counter { background: rgba(255, 255, 255, .08); color: var(--menu-t); }
.bleyo-nav-counter--orange { background: rgba(234, 88, 12, .16); color: var(--menu-orange-soft); }
.bleyo-nav-counter--alert { background: var(--menu-orange); color: #fff; font-weight: 600; }
.bleyo-nav-counter--zero { background: transparent; color: var(--menu-m2); }

/* stopka paska: Twój pakiet, Pomoc i regulamin */
.bleyo-side-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    flex: none;
}
.bleyo-side-foot-link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--menu-item);
    font-size: 13.5px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.bleyo-side-foot-link:hover { background: var(--menu-s); color: var(--menu-t); }
.bleyo-side-foot-link.is-active { background: rgba(234, 88, 12, .14); color: var(--menu-t); font-weight: 600; }
.bleyo-side-foot-link:focus-visible { outline: 2px solid var(--menu-orange); outline-offset: 2px; }
.bleyo-side-foot-icon { width: 18px; height: 18px; flex: none; color: var(--menu-m); }
.bleyo-side-foot-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bleyo-side-foot-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--menu-orange-soft);
    text-transform: uppercase;
    flex: none;
}

/* ── Stan ZWINIĘTY: szyna 76 px (tylko pulpit; telefon ma szufladę) ────── */
@media (min-width: 901px) {
    body.sidebar-collapsed .bleyo-sidebar { padding: 14px 6px; }
    body.sidebar-collapsed .bleyo-side-top {
        flex-direction: column;
        height: auto;
        gap: 10px;
        padding: 0;
        align-items: center;
    }
    body.sidebar-collapsed .bleyo-brand-text,
    body.sidebar-collapsed .bleyo-brand-ai,
    body.sidebar-collapsed .bleyo-side-search-text,
    body.sidebar-collapsed .bleyo-side-search .bleyo-kbd,
    body.sidebar-collapsed .bleyo-nav-group-chevron,
    body.sidebar-collapsed .bleyo-nav-group-items,
    body.sidebar-collapsed .bleyo-side-foot-text,
    body.sidebar-collapsed .bleyo-side-foot-meta { display: none; }

    body.sidebar-collapsed .bleyo-brand-tile { width: 30px; height: 30px; margin: 0; }
    body.sidebar-collapsed .bleyo-sidebar-toggle-icon { transform: rotate(180deg); }

    body.sidebar-collapsed .bleyo-side-search {
        width: 42px;
        height: 42px;
        margin: 6px auto 0;
        padding: 0;
        justify-content: center;
        border-radius: 12px;
    }

    body.sidebar-collapsed .bleyo-side-nav { margin-top: 8px; gap: 2px; }
    body.sidebar-collapsed .bleyo-nav-group-header {
        flex-direction: column;
        gap: 5px;
        height: auto;
        padding: 6px 0;
        border-radius: 0;
        background: transparent;
    }
    body.sidebar-collapsed .bleyo-nav-group-header:hover,
    body.sidebar-collapsed .bleyo-nav-group[open] > summary > .bleyo-nav-group-header { background: transparent; }
    body.sidebar-collapsed .bleyo-nav-group-left {
        flex: none;
        flex-direction: column;
        gap: 5px;
        align-items: center;
        width: 64px;
    }
    /* ikona w kaflu 42×42; aktywna grupa = pomarańczowy kafel */
    body.sidebar-collapsed .bleyo-nav-group-icon {
        width: 42px;
        height: 42px;
        padding: 11px;
        border-radius: 12px;
        color: var(--menu-m);
        box-sizing: border-box;
        transition: background .15s, color .15s;
    }
    body.sidebar-collapsed .bleyo-nav-group-header:hover .bleyo-nav-group-icon {
        background: var(--menu-s);
        color: var(--menu-t);
    }
    body.sidebar-collapsed .bleyo-nav-group.is-current > summary .bleyo-nav-group-icon,
    body.sidebar-collapsed .bleyo-nav-group.is-current > summary > .bleyo-nav-group-header:hover .bleyo-nav-group-icon {
        background: var(--menu-orange);
        color: #fff;
        box-shadow: 0 8px 20px rgba(234, 88, 12, .35);
    }
    body.sidebar-collapsed .bleyo-nav-group-text {
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: .01em;
        color: var(--menu-m);
        text-align: center;
        white-space: normal;
        max-width: 68px;
        padding: 0 2px;
    }
    body.sidebar-collapsed .bleyo-nav-group.is-current > summary .bleyo-nav-group-text { color: var(--menu-t); }
    /* plakietka alarmowa siada na rogu kafla */
    body.sidebar-collapsed .bleyo-nav-group-left { position: relative; }
    body.sidebar-collapsed .bleyo-nav-badge-alert {
        position: absolute;
        top: 0;
        right: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
        line-height: 14px;
        border: 2px solid var(--menu-bg);
        box-sizing: content-box;
    }
    body.sidebar-collapsed .bleyo-nav-group-header > .bleyo-nav-badge-alert { display: none; }

    body.sidebar-collapsed .bleyo-side-foot-link {
        justify-content: center;
        padding: 0;
        width: 42px;
        height: 42px;
        margin: 0 auto;
        border-radius: 12px;
    }
}

/* ── Panel statusów („Lista zamówień" rozwinięta obok paska) ─────────── */
.bleyo-panel {
    background: var(--panel-bg);
    border-right: 1px solid var(--panel-line);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 16px 10px 12px;
    color: var(--panel-t);
    scrollbar-width: thin;
}
.bleyo-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 6px 0 12px;
    min-height: 32px;
    flex: none;
}
.bleyo-panel-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--panel-m2);
}
.bleyo-panel-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 1px 0 0;
    color: var(--panel-t);
}
.bleyo-panel-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 0 auto;
}
.bleyo-panel-section {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    margin-top: 10px;
    padding: 0 12px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--panel-m);
    list-style: none;
}
.bleyo-panel-section-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    background: var(--menu-orange);
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    letter-spacing: 0;
}
.bleyo-panel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 10px 0 12px;
    border-radius: 10px;
    color: var(--panel-t);
    font-size: 13.5px;
    text-decoration: none;
    transition: background .12s;
}
.bleyo-panel-item:hover { background: var(--panel-s3); }
.bleyo-panel-item:focus-visible { outline: 2px solid var(--menu-orange); outline-offset: 2px; }
.bleyo-panel-item.is-active {
    background: var(--panel-t);
    color: #fff;
    font-weight: 600;
}
.bleyo-panel-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bleyo-panel-counter {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 500;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-s3);
    color: var(--panel-m);
    flex: none;
}
.bleyo-panel-item.is-active .bleyo-panel-counter { background: transparent; color: rgba(255, 255, 255, .75); }
.bleyo-panel-counter--orange { background: rgba(234, 88, 12, .14); color: #C2410C; }
.bleyo-panel-counter--alert { background: var(--menu-orange); color: #fff; font-weight: 600; }
.bleyo-panel-counter--zero { background: transparent; color: var(--panel-m2); }
/* 21.09: panel funkcji w sekcjach — linia między sekcjami i cichy podpis pod pozycją („2 generuje się”, „1 wstrzymane — brak środków”) */
.bleyo-panel-linia { height: 1px; margin: 10px 8px 0; background: var(--panel-line); list-style: none; }
.bleyo-panel-pod { display: block; font-size: 10.5px; font-weight: 400; line-height: 1.2; color: var(--panel-m2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bleyo-panel-item.is-active .bleyo-panel-pod { color: rgba(255, 255, 255, .65); }

/* ── Paleta poleceń (Ctrl K): skok do dowolnej pozycji menu ─────────── */
.bleyo-paleta {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
}
.bleyo-paleta[hidden] { display: none; }
.bleyo-paleta-tlo {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, .55);
    backdrop-filter: blur(2px);
}
.bleyo-paleta-okno {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--menu-bg);
    color: var(--menu-t);
    border: 1px solid var(--menu-line2);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}
.bleyo-paleta-pole {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 56px;
    border-bottom: 1px solid var(--menu-line);
    color: var(--menu-m);
    flex: none;
}
.bleyo-paleta-pole input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--menu-t);
    font-family: var(--font-sans);
    font-size: 16px;
}
.bleyo-paleta-pole input::placeholder { color: var(--menu-m2); }
.bleyo-paleta-lista {
    list-style: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bleyo-paleta-poz {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--menu-item);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.bleyo-paleta-poz:hover,
.bleyo-paleta-poz.is-selected {
    background: rgba(234, 88, 12, .14);
    color: var(--menu-t);
}
.bleyo-paleta-poz-grupa {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--menu-m2);
    flex: none;
}
.bleyo-paleta-pusto {
    padding: 18px 12px;
    color: var(--menu-m);
    font-size: 13.5px;
}
.bleyo-paleta-stopka {
    display: flex;
    gap: 14px;
    padding: 10px 16px;
    border-top: 1px solid var(--menu-line);
    color: var(--menu-m2);
    font-size: 12px;
    flex: none;
}
.bleyo-paleta-stopka .bleyo-kbd { margin-right: 4px; }
body.bleyo-paleta-open { overflow: hidden; }

/* =============================================================
   GÓRNA BELKA W UKŁADZIE BASE.COM (2026-09-15)
   docs/BASE_UKLAD_PANELU_RECON.md — u nich pasek niesie zwijanie menu,
   „Szybki dostęp”, globalną wyszukiwarkę i konto. Bierzemy ICH UKŁAD,
   zostawiamy NASZĄ kolorystykę (pomarańcz #EA580C, ciepłe szarości).
   ============================================================= */

/* Belka jest trójdzielna: lewa grupa | wyszukiwarka | prawa grupa.
   Wyszukiwarka dostaje `margin: auto`, więc siedzi pośrodku belki,
   a nie pośrodku wolnego miejsca — inaczej skakałaby przy dłuższym mailu. */
.bleyo-topbar-szukaj {
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    width: min(420px, 38vw);
    padding: 0 10px 0 12px;
    border: 1px solid var(--panel-line);
    border-radius: 10px;
    background: var(--panel-bg);
    color: var(--panel-m);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 120ms ease-out, background 120ms ease-out;
}
.bleyo-topbar-szukaj:hover {
    border-color: var(--panel-m2);
    background: var(--panel-s3);
}
.bleyo-topbar-szukaj:focus-visible {
    outline: 2px solid var(--menu-orange);
    outline-offset: 1px;
}
.bleyo-topbar-szukaj-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bleyo-topbar-szukaj .bleyo-kbd { flex: none; }

/* Ikony belki (zwijanie menu, pomoc, motyw) — kwadratowe, bez tła do najazdu. */
.bleyo-topbar-ikona {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--panel-m);
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
.bleyo-topbar-ikona:hover {
    background: var(--panel-bg);
    border-color: var(--panel-line);
    color: var(--panel-t);
}
.bleyo-topbar-ikona:focus-visible {
    outline: 2px solid var(--menu-orange);
    outline-offset: 1px;
}

.bleyo-topbar-przycisk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--panel-t);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}
.bleyo-topbar-przycisk:hover {
    background: var(--panel-bg);
    border-color: var(--panel-line);
}
.bleyo-topbar-przycisk:focus-visible {
    outline: 2px solid var(--menu-orange);
    outline-offset: 1px;
}

/* ── Menu rozwijane belki (Szybki dostęp, konto) ─────────────────────── */
.bleyo-rozwijane { position: relative; }
.bleyo-rozwijane-chevron {
    flex: none;
    color: var(--panel-m2);
    transition: transform 140ms ease-out;
}
.bleyo-rozwijane.is-open .bleyo-rozwijane-chevron { transform: rotate(180deg); }

.bleyo-rozwijane-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    min-width: 232px;
    padding: 6px;
    border: 1px solid var(--panel-line);
    border-radius: 12px;
    background: var(--bleyo-white);
    box-shadow: 0 12px 34px rgba(10, 10, 10, .14);
}
/* Menu konta wisi przy prawej krawędzi — inaczej wyjeżdża poza ekran. */
.bleyo-rozwijane--prawy .bleyo-rozwijane-menu { left: auto; right: 0; }

.bleyo-rozwijane-poz {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--panel-t);
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.bleyo-rozwijane-poz:hover { background: var(--panel-bg); }
.bleyo-rozwijane-poz:focus-visible {
    outline: 2px solid var(--menu-orange);
    outline-offset: -2px;
}
.bleyo-rozwijane-poz--akcja { color: var(--menu-orange); }

.bleyo-rozwijane-linia {
    height: 1px;
    margin: 5px 7px;
    background: var(--panel-line);
}
.bleyo-rozwijane-naglowek {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px 7px;
}
.bleyo-rozwijane-naglowek-mail {
    font-size: 13px;
    color: var(--panel-t);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}
.bleyo-rozwijane-naglowek-firma {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--panel-m);
}
.bleyo-rozwijane-naglowek-firma strong {
    color: var(--panel-t);
    font-weight: 500;
}

/* Przycisk konta jest teraz klikalny — <span> zamieniony na <button>. */
.bleyo-app-header-user {
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
}
.bleyo-app-header-user:hover { background: var(--panel-s3); }
.bleyo-app-header-user:focus-visible {
    outline: 2px solid var(--menu-orange);
    outline-offset: 1px;
}
/* Wylogowanie siedzi w menu konta — formularz nie może rozpychać pozycji. */
.bleyo-rozwijane-menu .bleyo-logout-form { display: block; }

/* Ikona motywu: widoczna ta, którą można WŁĄCZYĆ (na jasnym — księżyc). */
.bleyo-ikona-ciemny { display: none; }
:root[data-theme="dark"] .bleyo-ikona-jasny { display: none; }
:root[data-theme="dark"] .bleyo-ikona-ciemny { display: block; }

/* =============================================================
   MOTYWY NAZWANE (2026-09-15)
   U nich: <html data-theme="theme-dark"> + nazwany wariant na <body>.
   U nas tak samo — `data-theme` na <html>, a motyw przestawia WYŁĄCZNIE
   tokeny. ⛔ Żadna reguła nie może mieć koloru zaszytego na sztywno,
   bo wtedy wypadnie z motywu; nowe kolory dokładaj tutaj, nie w regule.
   Wartości ciemne = te same, na których stoi pasek boczny (spójność).
   ============================================================= */
:root[data-theme="dark"] {
    /* powierzchnie i linie */
    --bleyo-white: #0B0C0E;      /* tło strony */
    --bleyo-black: #F2F0EA;      /* tekst podstawowy */
    --bleyo-gray-100: #17171A;
    --bleyo-gray-300: #303035;
    --bleyo-gray-400: #6B6963;
    --bleyo-gray-500: #8E8C86;
    --bleyo-gray-700: #C9C6BE;
    --bleyo-gray-900: #F2F0EA;

    /* belka, karty i panel statusów */
    --panel-bg: #17171A;
    --panel-line: #26262A;
    --panel-t: #F2F0EA;
    --panel-m: #8E8C86;
    --panel-m2: #6B6963;
    --panel-s3: #1B1B1F;

    /* pomarańcz na ciemnym musi być jaśniejszy — 7,4:1 zamiast 3,1:1 */
    --bleyo-orange: #FF8A45;

    /* ⛔⛔ Tokeny `--w-*` należą do widoki.css (treść panelu: tło, karty,
       tabele, pola). Bez nich motyw ciemny robił JASNE tło treści z JASNYM
       tekstem — zmierzone 1,02:1, czyli nagłówek strony znikał całkowicie.
       Trzymamy je TUTAJ, żeby cały motyw był w jednym miejscu; `:root[data-theme]`
       ma wyższą wagę niż `:root` w widoki.css, więc kolejność plików nie gra roli. */
    --w-bg: #0F0F12;             /* tło treści — zlewa się z belką */
    --w-card: #17171A;
    --w-line: #26262A;
    --w-line2: #303035;
    --w-row: #1B1B1F;
    --w-hover: #1B1B1F;
    --w-s3: #1B1B1F;
    --w-t: #F2F0EA;              /* 15,4:1 na karcie */
    --w-m: #C9C6BE;              /* 11,0:1 — tekst pomocniczy zostaje czytelny */
    --w-m2: #8E8C86;
    --w-orange: #FF6A1F;
    --w-orange-text: #FF8A45;    /* pomarańcz JAKO TEKST — na ciemnym 7,4:1 */
    --w-orange-hi: #FF8A45;
    --w-ok-bg: rgba(15, 110, 86, .20);
    --w-ok: #6EE7C0;
    --w-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .34);
    /* pasek zaznaczenia (E0 nawigatora 24.09): ciemna wyspa jak w jasnym, jasne przyciski z ciemnym tekstem */
    --pasek-bg: #232329;
    --pasek-t: #FFFFFF;
    --pasek-btn: #F2F0EA;
    --pasek-btn-t: #0B0C0E;
    /* zaznaczony wiersz (D13): odcień atramentu + jasny pasek 3 px (atrament na ciemnym tle nie byłby widoczny); tekst 14,1 : 1 */
    --zaz-wiersz: #232329;
    --zaz-wiersz-pas: #F2F0EA;
    /* NAWIGATOR — dok stref (24.09): te same kolory na `--w-card`, przyciemnione jak `--w-ok-bg`; strefa ZAZNACZONE zostaje
       atramentową wyspą; kolor mocny ciemniejszy, żeby biały tekst przycisku głównego miał ≥ 4,5 : 1 */
    --nav-bg: #17171A;
    --nav-line: #303035;
    --nav-cien: 0 1px 2px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .55);
    --nav-zaz-bg: #0A0A0A;
    --nav-zaz-t: #FFFFFF;
    --nav-zaz-m: #8E8C86;
    --nav-zaz-m2: #C9C6BE;
    --nav-zaz-linia: #303035;
    --nav-sklep-bg: #12302A;
    --nav-sklep-line: #1F4A40;
    --nav-sklep-t: #6EE7C0;
    --nav-sklep-deep: #17765D;
    --nav-rekl-bg: #3A2213;
    --nav-rekl-line: #5A3219;
    --nav-rekl-t: #FF8A45;
    --nav-rekl-deep: #B8470D;
    --nav-gen-bg: #231D45;
    --nav-gen-line: #3A3170;
    --nav-gen-t: #C4B8FA;
    --nav-gen-deep: #5B47C9;
    --nav-kat-bg: #222226;
    --nav-kat-line: #303035;
    --nav-kat-t: #C9C6BE;
    --nav-kat-deep: #57544E;
    --nav-btn-bg: #17171A;
    --nav-btn-t: #F2F0EA;
    --nav-btn-hover: #1F1F23;
    --nav-gl-t: #FFFFFF;
    --nav-n-akt: #6EE7C0;
    --nav-n-ukr: #F0C27A;
    --nav-n-usu: #A8A59C;
    --nav-n-hot: #FF8A45;
    --nav-n-gen: #B3A6F5;
    --nav-n-kat: #C9C6BE;
    --nav-n-t: #0B0C0E;
    --nav-sk-akt: #2FB58A;
    --nav-sk-ukr: #E0A443;
    --nav-sk-usu: #8E8C86;
    --nav-sk-nie: #6B6963;
    --nav-sk-gen: #9C8CF0;
    --nav-sk-hot: #FB8A4C;
    --nav-sk-zle: #F05252;
    --nav-warn-bg: #3A2A10;
    --nav-warn-t: #F0C27A;
    --nav-zle: #B42318;
    --nav-zle-t: #F87171;
    --nav-duch-bg: #1B1B1F;
}
:root[data-theme="dark"] .bleyo-rozwijane-menu {
    background: var(--panel-s3);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}
/* Belka na ciemnym zlewa się z paskiem bocznym — jak w ich panelu. */
:root[data-theme="dark"] .bleyo-app-header { background: #0F0F12; }

/* =============================================================
   STAŁE ELEMENTY PASKA NIE MOGĄ SIĘ KURCZYĆ (2026-09-15)
   Pasek to kolumna flex o wysokości 100vh z `overflow-y: auto`. Dziecko bez
   `flex: none` dostaje domyślne `flex-shrink: 1`, więc przy długim menu
   flexbox ŚCISKA je, zamiast pozwolić paskowi się przewinąć — a `overflow:
   hidden` na tych elementach przycina resztę treści.
   Objaw zgłoszony z żywego panelu: hero Kostki na ekranie konfiguracji
   startowej. Zmierzone: przepełnienie paska 1140 px → hero 22 px przy
   awatarze 46 px. `.bleyo-side-top` i `.bleyo-side-foot` miały `flex: none`
   od początku i dlatego wyglądały dobrze.
   ============================================================= */
.bleyo-side-search {
    flex: none;
}

/* =============================================================
   TABELA ZAMÓWIEŃ OBOK PANELU STATUSÓW (2026-09-15)
   Kolumny w bleyo.css są policzone pod pełną szerokość treści. Gdy obok
   paska stoi panel statusów (236 px), suma kolumn stałych (~1000 px)
   zjada całe miejsce i `1fr` (PRODUKTY) kurczy się do kilkudziesięciu px.
   Objaw widoczny na żywo: etykieta „PRODUKTY” wylewała się na „KLIENT”
   i oba napisy nachodziły na siebie.
   ============================================================= */

/* Bezpiecznik: etykieta nagłówka NIGDY nie wychodzi poza swoją kolumnę,
   niezależnie od tego, jak ciasno zrobi się w gridzie. */
.bleyo-table-header > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Właściwa naprawa: obok panelu statusów kolumny stałe są węższe, żeby
   PRODUKTY dostały realne ~200 px zamiast ~40 px. */
.bleyo-app-shell--panel .bleyo-table-header,
.bleyo-app-shell--panel .bleyo-table-row {
    grid-template-columns: 30px 84px 92px 1fr 130px 92px 98px 86px 84px 84px;
    gap: 8px;
}

/* Zanim JS ustawi motyw, nic nie może mrugnąć — skrypt w <head> (base.html)
   stawia data-theme przed pierwszym malowaniem. Ten blok jest tylko dla
   przeglądarek z wyłączonym JS: wtedy oddajemy motyw systemowy. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .bleyo-app-header { background: #0F0F12; }
}