/* =============================================================
   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)

   ⛔ Ten plik TYLKO dokłada reguły w zapytaniu medialnym. Nie zmienia niczego
      w `bleyo.css` ani w `pakiety.css`, żeby łatki Adiego dało się nakładać
      dalej bez konfliktów. Ładowany jako OSTATNI, więc przy równej wadze wygrywa.
   ============================================================= */

@media (max-width: 900px) {

    /* ── Szkielet: sidebar nad treścią, nie obok ────────────────────── */
    .bleyo-app-shell {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* sticky + 100vh ma sens tylko w kolumnie obok treści; nad treścią
       przykleiłby menu do całego ekranu i zjadł widok */
    .bleyo-sidebar {
        position: static;
        height: auto;
        top: auto;
        overflow-y: visible;
        padding: 10px 12px 12px;
    }

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

    /* ── Górny pasek ────────────────────────────────────────────────── */
    .bleyo-app-header {
        height: auto;
        min-height: 52px;
        padding: 8px 14px;
        flex-wrap: wrap;
        gap: 6px 12px;
    }
    .bleyo-app-header-left,
    .bleyo-app-header-right { min-width: 0; gap: 10px; }
    /* adres e-mail rozpychał pasek na własny rząd; jest w Ustawieniach */
    .bleyo-app-header-user { display: none; }

    /* ── Treść ──────────────────────────────────────────────────────── */
    .bleyo-app-main { padding: 16px 14px; }

    .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 */
    .bleyo-table-header,
    .bleyo-table-row { min-width: 900px; }

    /* ── 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. */
    /* ⛔⛔ Waga, nie samo zapytanie medialne: te klasy siedza w <style> WEWNATRZ
       szablonow (settings_stores_list.html, dashboard_stats.html), czyli PO tym
       arkuszu. Zapytanie medialne NIE podnosi wagi — przy rownej decyduje
       kolejnosc, wiec dokladamy rodzica (0,2,0 zamiast 0,1,0). */
    .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; }

    /* ── 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,
    .bleyo-app-main table { max-width: 100%; }
}

@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-app-header { padding: 7px 12px; }
}