/* =============================================================
   Panel klienta na telefonie i tablecie (2026-09-14)

   Powód: arkusz główny ma trzy zapytania medialne, wszystkie przy 1439–1499 px
   — panel nigdy nie był układany pod mały ekran. Pomiar na 393 px przed tym
   plikiem: dokument 666 px na pulpicie i 760 px na zamówieniach przy oknie
   393 px, czyli cała strona jechała w bok.

   Źródła rozjazdu (zmierzone, nie zgadywane):
     .bleyo-app-shell   grid `200px sidebar + 1fr` — treść dostawała ~150 px
     .bleyo-filters-row grid `1fr 160px 160px 100px` = ponad 520 px na sztywno
     .bleyo-page-header-actions  flex bez zawijania (302 px)
     .bleyo-table-*     grid 10 kolumn, ~1000 px minimum
     .ds-cards          kafle minmax(210px, 1fr)

   Druga iteracja (audyt 55 ekranów, 2026-09-14): sidebar nad treścią to był
   statyczny blok 393×1433 px — każdy ekran zaczynał się od półtora ekranu
   menu. Teraz: sidebar = szuflada wysuwana z lewej (hamburger w pasku
   .bleyo-mobile-bar z _sidebar.html), a .bleyo-app-header jest schowany —
   pasek mobilny niesie markę, slug workspace i hamburger; WYLOGUJ jest na
   dole szuflady. Stan „otwarte" = klasa `bleyo-menu-open` na <html> i <body>
   (inline skrypt w _sidebar.html).

   ⛔ Ten plik TYLKO dokłada reguły w zapytaniu medialnym. Jedyny wyjątek
      poza nim: bleyo.css ukrywa elementy mobilne na pulpicie (display:none),
      żeby desktop nie zależał od wczytania tego arkusza.
      Ładowany jako OSTATNI, więc przy równej wadze wygrywa.

   ⛔⛔ Waga selektorów: klasy wielu ekranów siedzą w <style> WEWNĄTRZ
      szablonów (settings_users_*.html, settings_stores_list.html,
      dashboard_stats.html), czyli ładują się PO tym arkuszu. Zapytanie
      medialne NIE podnosi wagi — przy równej decyduje kolejność, więc reguły
      dla tych klas dostają rodzica `.bleyo-app-main` (0,2,0 zamiast 0,1,0),
      a tam, gdzie szablon sam ma (0,2,0), rodzic daje (0,3,0).
   ============================================================= */

@media (max-width: 900px) {

    /* ── Szkielet: jedna kolumna; sidebar wyjeżdża z lewej jako szuflada ── */
    .bleyo-app-shell {
        /* minmax(0, 1fr), nie 1fr: `1fr` = minmax(auto, 1fr), a `auto` pozwala
           szerokiej treści rozepchnąć kolumnę ponad szerokość ekranu. */
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    /* Nagłówek pulpitowy (marka / slug / e-mail / WYLOGUJ) zastępuje pasek
       mobilny z _sidebar.html — jeden pasek u góry, nie dwa. */
    .bleyo-app-header { display: none; }

    /* przycisk zwijania do ikon dotyczy układu dwukolumnowego */
    .bleyo-sidebar-toggle { display: none; }

    /* ── Pasek mobilny: hamburger + marka + slug ─────────────────────── */
    .bleyo-mobile-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        height: 52px;
        padding: 0 12px;
        background: var(--bleyo-white);
        border-bottom: 1px solid var(--bleyo-gray-300);
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .bleyo-mobile-menu-btn {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--bleyo-black);
        border-radius: 0;
        background: transparent;
        color: var(--bleyo-black);
        cursor: pointer;
    }
    .bleyo-mobile-menu-btn:active { background: var(--bleyo-gray-100); }
    .bleyo-mobile-menu-btn:focus-visible {
        outline: 2px solid var(--bleyo-orange);
        outline-offset: 2px;
    }
    .bleyo-mobile-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    .bleyo-mobile-workspace {
        font-family: var(--font-mono);
        font-size: 12px;
        color: var(--bleyo-gray-700);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    /* ── Szuflada: sidebar poza ekranem, wjeżdża po kliknięciu ───────── */
    .bleyo-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: auto;
        width: 88vw;
        max-width: 320px;
        padding: 0 0 24px;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 1200;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
        transform: translateX(-100%);
        /* visibility z opóźnieniem: po zjechaniu szuflada znika też dla
           Tab/czytnika ekranu, ale animacja wyjazdu jest widoczna. */
        visibility: hidden;
        transition: transform 220ms ease-out, visibility 0s linear 220ms;
    }
    body.bleyo-menu-open .bleyo-sidebar {
        transform: translateX(0);
        visibility: visible;
        transition: transform 220ms ease-out, visibility 0s linear 0s;
    }

    /* Nagłówek szuflady: „Menu" + X, przyklejony przy przewijaniu długiego menu */
    .bleyo-mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 8px 8px 16px;
        border-bottom: 0.5px solid var(--bleyo-gray-900);
        background: var(--bleyo-black);
        position: sticky;
        top: 0;
        z-index: 2;
    }
    .bleyo-mobile-drawer-title {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--bleyo-gray-500);
        font-weight: 500;
    }
    .bleyo-mobile-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--bleyo-white);
        cursor: pointer;
    }
    .bleyo-mobile-drawer-close:active { background: var(--bleyo-gray-900); }
    .bleyo-mobile-drawer-close:focus-visible {
        outline: 2px solid var(--bleyo-orange);
        outline-offset: -2px;
    }

    /* WYLOGUJ na dole szuflady (nagłówek pulpitowy z tym przyciskiem jest schowany) */
    .bleyo-mobile-logout {
        display: block;
        padding: 16px 16px 8px;
        border-top: 0.5px solid var(--bleyo-gray-900);
        margin-top: 8px;
    }
    .bleyo-mobile-logout .bleyo-btn-secondary {
        width: 100%;
        color: var(--bleyo-white);
        border-color: var(--bleyo-gray-500);
    }
    .bleyo-mobile-logout .bleyo-btn-secondary:hover,
    .bleyo-mobile-logout .bleyo-btn-secondary:active {
        background: var(--bleyo-gray-900);
        color: var(--bleyo-white);
    }

    /* Tło pod szufladą: klik zamyka; touch-action:none + touchmove w skrypcie
       blokują przewijanie palcem na iOS. */
    .bleyo-mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(10, 10, 10, 0.55);
        z-index: 1100;
        touch-action: none;
    }
    body.bleyo-menu-open .bleyo-mobile-backdrop { display: block; }

    /* Blokada przewijania tła przy otwartym menu (html + body — Safari
       honoruje dopiero oba). */
    html.bleyo-menu-open,
    body.bleyo-menu-open { overflow: hidden; }

    /* Stan „zwinięte do ikon" (sessionStorage z pulpitu): reguły zwinięcia
       w menu.css są pod @media (min-width: 901px), więc w szufladzie nie działają
       i niczego nie trzeba odwracać. */

    /* ── Szuflada: elementy nowego paska (menu.css, 2026-09-15) ──────── */
    /* znak + przełącznik zwijania siedzą w nagłówku szuflady → zbędne */
    .bleyo-side-top { display: none; }
    /* sidebar w szufladzie ma padding 0 (nagłówek szuflady na całą szerokość),
       więc wnętrze dostaje własne marginesy */
    .bleyo-sidebar > .bleyo-side-search,
    .bleyo-sidebar > .bleyo-side-nav,
    .bleyo-sidebar > .bleyo-side-foot { margin-left: 12px; margin-right: 12px; }
    .bleyo-sidebar > .bleyo-side-search { margin-top: 12px; }
    /* znak marki na białym pasku mobilnym (w pasku bocznym jest na czerni) */
    .bleyo-mobile-bar .bleyo-brand { color: var(--bleyo-black); }
    .bleyo-mobile-bar .bleyo-brand-ai { color: var(--bleyo-gray-700); border-color: var(--bleyo-gray-300); }

    /* ── Panel statusów (/orders*): nad treścią, statusy jako pigułki ── */
    .bleyo-app-shell--panel { grid-template-columns: minmax(0, 1fr); }
    .bleyo-panel {
        position: static;
        height: auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--panel-line);
        padding: 12px 12px 10px;
    }
    .bleyo-panel-head { padding: 0 2px; min-height: 0; }
    /* jeden przewijany poziomo pasek pigułek — panel nie może zjadać ekranu
       nad listą zamówień (przy zawijaniu miał ~850 px wysokości na 375 px) */
    .bleyo-panel-list {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        padding-bottom: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .bleyo-panel-list > li { flex: none; }
    .bleyo-panel-section {
        width: auto;
        height: 34px;
        margin: 0 2px 0 6px;
        padding: 0;
        white-space: nowrap;
    }
    .bleyo-panel-item {
        height: 34px;
        padding: 0 10px;
        gap: 8px;
        border-radius: 999px;
        border: 1px solid var(--panel-line);
        background: var(--bleyo-white);
        white-space: nowrap;
    }
    .bleyo-panel-item.is-active { border-color: var(--panel-t); }

    /* ── Treść ──────────────────────────────────────────────────────── */
    .bleyo-app-main {
        padding: 16px 14px;
        /* Ostatnia bramka rozjazdu poziomego: <main> był overflow-x: visible,
           więc każdy szerszy element ciągnął cały dokument. `clip` (nie
           `hidden`) nie robi z <main> kontenera przewijania, więc sticky
           i overflow-y działają jak dotąd; `hidden` zostaje jako fallback
           dla starszych przeglądarek. */
        overflow-x: hidden;
        overflow-x: clip;
        /* długie ciągi (e-maile, URL-e, numery) łamią się zamiast wystawać */
        overflow-wrap: anywhere;
    }

    .bleyo-page-header {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }
    .bleyo-page-header-title { font-size: 20px; }
    .bleyo-page-header-actions { flex-wrap: wrap; width: 100%; gap: 6px; }
    .bleyo-page-header-actions > * { flex: 1 1 auto; justify-content: center; }

    /* ── Filtry: cztery sztywne kolumny to 520 px, czyli więcej niż ekran ── */
    .bleyo-filters-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* ── Tabele: przewija się TABELA, nie strona ────────────────────── */
    .bleyo-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* bez min-width grid zgniata kolumny do nieczytelnych 20 px */
    /* 2026-09-15: 1000 px, nie 900 — przy 900 kolumna PRODUKTY (1fr) dostawała
       0 px (800 px kolumn stałych + 72 px odstępów + 36 px paddingu) i litery
       układały się pionowo; teraz ma ~90 px i tabela przewija się poziomo. */
    .bleyo-table-header,
    .bleyo-table-row { min-width: 1000px; }

    /* Zwykłe <table> w treści (etykiety przesyłek, historia ruchów, baza
       wiedzy, reklamy…): jako blok z własnym przewijaniem — szersza od ekranu
       tabela przewija się u siebie, a nie ciągnie strony. Koszt: tabela
       węższa od ekranu nie rozciąga się już do 100 % (border-y kończą się na
       treści) — na telefonie akceptowalne, dane zostają dostępne. */
    .bleyo-app-main table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .bleyo-app-main pre {
        max-width: 100%;
        overflow-x: auto;
    }

    /* ── Pulpit ─────────────────────────────────────────────────────── */
    .bleyo-app-main .ds-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bleyo-app-main .ds-card { padding: 11px 12px; }
    .bleyo-app-main .ds-card-value { font-size: 21px; }
    .bleyo-app-main .ds-filters { gap: 8px; margin: 10px 0; }
    .bleyo-app-main .ds-seg { flex-wrap: wrap; }
    .bleyo-app-main .ds-chart-box { padding: 12px; overflow-x: auto; }

    /* Tabela statystyk pod wykresem: siatka `140px 70px 56px 56px 63px…`
       ma ~385 px, czyli wiecej niz kontener (367 px) — przewija sie u siebie. */
    .bleyo-app-main .st-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .bleyo-app-main .st-grid { min-width: 420px; }

    /* ── Statusy: siatka `200px 1fr 100px` wypychala przycisk poza ekran ── */
    .bleyo-status-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .bleyo-status-row-right { justify-content: flex-start; }

    /* Sklepy: siatka `repeat(auto-fill, minmax(360px, 1fr))` trzyma sciezke
       360 px nawet w kontenerze 336 px, wiec to ONA rozpychala strone, a nie
       kafel w srodku. `minmax(0, 1fr)` pozwala sciezce zejsc ponizej 360 px. */
    .bleyo-app-main .stores-grid { grid-template-columns: minmax(0, 1fr); }
    .bleyo-app-main .stores-empty { box-sizing: border-box; padding: 16px 12px; }
    .bleyo-app-main .stores-empty .bleyo-btn { white-space: normal; max-width: 100%; text-align: center; }

    /* ── Użytkownicy: lista (/settings/users) ──────────────────────── */
    /* Szablon ma własne ≤980 px na .users-table-row (1fr), ale jego
       `.users-table--pending .users-table-row` (0,2,0) wygrywa z tym i tabela
       zaproszeń zostaje w 5 kolumnach (2fr 100px 1fr 1fr 160px). Rodzic
       .bleyo-app-main daje (0,3,0) i obie tabele idą w jedną kolumnę. */
    .bleyo-app-main .users-table-head { display: none; }
    .bleyo-app-main .users-table-row,
    .bleyo-app-main .users-table--pending .users-table-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 14px 12px;
    }
    .bleyo-app-main .users-table-row > * { min-width: 0; }
    /* akcje wiersza: flex bez zawijania — przyciski wychodziły poza ekran */
    .bleyo-app-main .users-cell-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 6px;
    }
    .bleyo-app-main .users-cell-actions .bleyo-btn,
    .bleyo-app-main .users-cell-actions .bleyo-btn-secondary { max-width: 100%; }
    .bleyo-app-main .users-card { padding: 16px 14px; }
    .bleyo-app-main .users-roles-legend { padding: 14px 12px; overflow-x: auto; }
    .bleyo-app-main .users-form-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .bleyo-app-main .users-store-picker { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .bleyo-app-main .users-form-actions { flex-wrap: wrap; }
    .bleyo-app-main .users-invite-url code { min-width: 0; }

    /* ── Użytkownicy: edycja (/settings/users/{id}/edit) ───────────── */
    /* .bleyo-form-grid `1fr 1fr`: <select> roli ma stałą szerokość najdłuższej
       opcji („Partner (rozliczenia, bez konfiguracji)"), więc druga kolumna
       nie schodzi poniżej ~340 px i wypycha formularz poza ekran. Jedna
       kolumna + select na 100 % kontenera. */
    .bleyo-app-main .bleyo-form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .bleyo-app-main .bleyo-form-grid > * { min-width: 0; }
    .bleyo-app-main .bleyo-form-grid .bleyo-select { width: 100%; }
    .bleyo-app-main .bleyo-store-picker { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .bleyo-app-main .bleyo-form-actions { flex-wrap: wrap; }
    .bleyo-app-main .bleyo-card { padding: 16px 14px; }

    /* ── Formularze i pola ──────────────────────────────────────────── */
    .bleyo-select,
    .bleyo-input,
    .ds-select { max-width: 100%; }

    /* Ostatnia bramka: cokolwiek w treści okaże się szersze od ekranu,
       ma się zawinąć albo przewinąć u siebie, a nie ciągnąć całą stronę. */
    .bleyo-app-main img { max-width: 100%; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .bleyo-sidebar,
    body.bleyo-menu-open .bleyo-sidebar { transition: none; }
}

@media (max-width: 560px) {
    .bleyo-app-main .ds-cards { grid-template-columns: minmax(0, 1fr); }
    .bleyo-app-main { padding: 14px 12px; }
    .bleyo-page-header-title { font-size: 18px; }
    .bleyo-mobile-bar { padding: 0 10px; gap: 10px; }
}