/* ═══════════════════════════════════════════════════════════════════════════
   D&D Energy ERP — mobilná vrstva
   ───────────────────────────────────────────────────────────────────────────
   Načítava sa ZA `styles.css`, takže pri rovnakej špecificite vyhráva.
   Desktopu sa nedotýka — všetko je v `@media (max-width: …)`.

   Breakpointy (jediné tri, ktoré sa tu používajú):
     ≤ 1024 px  tablet — sidebar je pás ikon (rieši už styles.css)
     ≤  720 px  telefón — spodná lišta, tabuľky ako karty, dotykové ciele
     ≤  380 px  úzky telefón — dolaďovanie

   ⚠️ Veľa layoutu v ERP je zapísaného inline v JSX (`style={{gridTemplateColumns}}`).
      Inline štýl prebije čokoľvek okrem `!important`, takže pravidlá, ktoré
      musia takýto layout preložiť do jedného stĺpca, `!important` naozaj
      potrebujú — nie je to lenivosť.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --dd-tap: 44px;              /* najmenší pohodlný dotykový cieľ */
  --dd-lista-v: 56px;          /* výška spodnej navigačnej lišty */
  --dd-safe-b: env(safe-area-inset-bottom, 0px);
  --dd-safe-l: env(safe-area-inset-left, 0px);
  --dd-safe-r: env(safe-area-inset-right, 0px);
}

/* ═══ 1. Nič netečie do strán ═══════════════════════════════════════════════
   Najčastejšia príčina orezaných kariet: grid/flex dieťa má predvolene
   `min-width:auto`, takže sa NEZMRŠTÍ pod šírku svojho obsahu a vytlačí
   rodiča mimo obrazovku. Meranie na 393 px našlo dlaždicu so 407 px
   v stĺpci širokom 369 px presne z tohto dôvodu.

   `min-width: 0` platí až po 1024 px — na tablete pretekal dvojstĺpcový
   layout Nastavení z tej istej príčiny. Nič nerozbíja, len dovolí zmrštenie. */
@media (max-width: 1024px) {
  .content .vstack, .content .hstack,
  .content .card, .content .card-body, .content .card-head,
  .dash-grid > *, .split > *, .kpi-grid > *,
  .content [class*="grid"] > * { min-width: 0; }
}

@media (max-width: 720px) {

  /* Dlhé nezalomiteľné reťazce (SKU, e-maily, URL, tokeny) rozťahujú kartu. */
  .content, .content p, .content td, .content .small, .content .muted,
  .content .chip, .content code { overflow-wrap: anywhere; }
  .content a { overflow-wrap: anywhere; }

  .content img, .content svg, .content video, .content canvas { max-width: 100%; height: auto; }

  /* Vodorovné riadky ovládania sa musia dať zalomiť. `.hstack` je
     `display:flex` bez `flex-wrap`, takže dva prvky po 222 px vytlačia
     druhý mimo obrazovku namiesto toho, aby spadol na ďalší riadok. */
  .content .hstack, .content .card-head { flex-wrap: wrap; }

  /* 🔥 `styles.css` prepína `.filters` na mobile na `flex-direction: column`.
     Má to dva dôsledky, ktoré spolu vyrobili 220 px vysokú dieru nad filtrami
     objednávok:
       1. päť filtrov pod sebou je pás cez pol obrazovky,
       2. v stĺpcovom smere je `flex-basis` VÝŠKA — `.ofsearch-wrap` má
          `flex: 1 1 220px`, takže z neho vyšlo pole vysoké 220 px.
     Riadok so zalomením rieši oboje a filtre ostanú kompaktné.

     ⚠️ `styles.css` má pravidlá pre `.filters` na DVOCH miestach (r. 896 a 3371)
     a to druhé je `flex-direction: column !important` — bez `!important` sa
     prebiť nedá. */
  .content .filters {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  /* `styles.css` dáva `.filters > * { width: 100% }` — v riadku by z každého
     filtra spravilo vlastný riadok. */
  .content .filters > * { width: auto; flex-basis: auto; }
  /* Hľadanie si vezme celý riadok, ostatné sa poskladajú vedľa seba. */
  .content .filters > [class*="search"] { flex: 1 1 100%; width: 100%; max-width: none; }

  /* Pole formulára ide na mobile vždy cez celú šírku.
     ⚠️ `!important` je nutné — šírka (typicky 222 px) býva zapísaná inline
        v JSX a inline štýl sa inak prebiť nedá. */
  .content .field {
    flex: 1 1 100% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .content .input, .content .select, .content .textarea,
  .content input, .content select, .content textarea { max-width: 100%; }

  /* ⚠️ Veľká časť rozloženia je v tomto kóde zapísaná inline v JSX
     (`style={{display:'flex'}}`, `style={{gridTemplateColumns:'200px 1fr'}}`)
     a triedu nemá — bežným selektorom sa nedá chytiť. Atribútový selektor
     na `style` je jediná cesta, ako to preložiť do jedného stĺpca bez toho,
     aby sa prepisovalo 25 obrazoviek.

     Riadky sa smú zalomiť; stĺpcové flexy sa vynechávajú (`wrap` by v nich
     nič neriešil a pri pevnej výške by rozsypal obsah do stĺpcov). */
  .content [style*="flex"]:not([style*="column"]) { flex-wrap: wrap; }

  /* Mriežky s pevnou šírkou stĺpca do jedného stĺpca. `auto-fit`/`auto-fill`
     sa vynechávajú — tie sa zalomia samy a prepis by im vzal zmysel. */
  .content [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }

  /* Mriežky s pevným počtom stĺpcov → jeden stĺpec. */
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .dash-grid, .split { grid-template-columns: 1fr !important; }
  /* `repeat(auto-fill, minmax(240–330px, 1fr))` je na 393 px stále jeden stĺpec,
     ale s minimom, ktoré po odrátaní odsadenia nevyjde — preto výslovne. */
  .content [class*="grid"] { grid-template-columns: 1fr !important; }
  /* Výnimka: mriežky, ktoré dva stĺpce uniesť majú (dlaždice s číslom). */
  .content .kpi-grid, .content .launcher-grid,
  .content .ai-stats-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 380px) {
  .kpi-grid, .content .kpi-grid,
  .content .launcher-grid { grid-template-columns: 1fr !important; }
}

/* ═══ 2. Tabuľky ako karty ══════════════════════════════════════════════════
   Na 393 px sa nezmestí ani jedna z 60+ tabuliek ERP. Namiesto posúvania
   do strán sa každý riadok prekreslí na kartu a hodnoty idú pod seba so
   štítkom stĺpca.

   Štítky dopĺňa `oznacTabulky()` v `shared.jsx` — číta ich zo záhlavia
   tej istej tabuľky a zapisuje do `data-st`. Vďaka tomu platí tento vzhľad
   naraz pre všetky tabuľky vrátane tých, ktoré ešte len pribudnú.

   Opt-out: `<table class="tbl bez-kariet">` nechá tabuľku tabuľkou
   (vodorovné posúvanie v `.tbl-posuv`). */
@media (max-width: 720px) {
  table.tbl:not(.bez-kariet),
  table.tbl:not(.bez-kariet) tbody,
  table.tbl:not(.bez-kariet) tr,
  table.tbl:not(.bez-kariet) td {
    display: block;
    width: auto;
    max-width: 100%;
  }

  /* Záhlavie sa neruší — len sa odsunie z obrazovky, aby ho čítačky
     a vyhľadávanie v stránke stále našli. `display:none` by ho zahodilo. */
  table.tbl:not(.bez-kariet) thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  table.tbl:not(.bez-kariet) tr {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  table.tbl:not(.bez-kariet) tr:hover td,
  table.tbl:not(.bez-kariet) tr:last-child td { background: transparent; }
  table.tbl:not(.bez-kariet) tr.sel {
    background: #fff8e4;
    border-color: var(--amber-500);
  }
  table.tbl:not(.bez-kariet) tr.sel td { background: transparent; }

  table.tbl:not(.bez-kariet) td {
    border: none;
    padding: 5px 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
    text-align: right;
    min-width: 0;
  }
  /* ⚠️ Hodnota v bunke býva `<a>` alebo `<span>` — teda flex položka
     s `min-width:auto`, ktorá sa nezmrští pod šírku svojho obsahu. Dlhý
     e-mail alebo SKU tak vytečie z karty. `overflow-wrap:anywhere` (nie
     `break-word`) zmenší aj min-content, takže sa zalomí aj vo flexe. */
  table.tbl:not(.bez-kariet) td > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  table.tbl:not(.bez-kariet) td::before {
    content: attr(data-st);
    flex: 0 0 38%;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  /* Bunka bez štítku (checkbox, ikona, akcie) štítkovú stĺpec nedostane. */
  table.tbl:not(.bez-kariet) td[data-st=""]::before,
  table.tbl:not(.bez-kariet) td:not([data-st])::before { content: none; }

  /* Hlavná bunka = nadpis karty: cez celú šírku, bez štítku, väčšia. */
  table.tbl:not(.bez-kariet) td[data-hlavny] {
    display: block;
    text-align: left;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-900);
    padding: 0 0 6px;
    margin-bottom: 6px;
    border-bottom: 1px dashed var(--border);
  }
  table.tbl:not(.bez-kariet) td[data-hlavny]::before { content: none; }

  /* Bunka s ovládaním (tlačidlá, prepínače) — pod sebou, zarovnané doprava. */
  table.tbl:not(.bez-kariet) td[data-akcie] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px dashed var(--border);
  }
  table.tbl:not(.bez-kariet) td[data-akcie]::before { content: none; }
  table.tbl:not(.bez-kariet) td[data-akcie] .btn,
  table.tbl:not(.bez-kariet) td[data-akcie] .btn-sm,
  table.tbl:not(.bez-kariet) td[data-akcie] .btn-xs {
    height: 36px;
    padding: 0 12px;
    font-size: 12.5px;
  }

  /* Zaškrtávacie políčko riadka patrí k nadpisu, nie na vlastný riadok. */
  table.tbl:not(.bez-kariet) td[data-vyber] {
    display: inline-flex;
    padding: 0 0 6px;
  }

  /* Riadok cez celú šírku (prázdny stav, „Načítavam…", medzisúčet) ostáva
     jedným pruhom — rozkúskovať ho na štítky by nedávalo zmysel. */
  table.tbl:not(.bez-kariet) tr[data-siroky] { text-align: center; }
  table.tbl:not(.bez-kariet) tr[data-siroky] td {
    display: block;
    text-align: center;
    padding: 6px 0;
  }
  table.tbl:not(.bez-kariet) tr[data-siroky] td::before { content: none; }

  /* Tabuľka, ktorá si kartový vzhľad neželá, sa aspoň dá posúvať. */
  .tbl-posuv, .table-wrap, .ai-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.tbl.bez-kariet { min-width: 520px; font-size: 12px; }
}

/* Tablet (721–1024 px): karty by tu boli plytvanie miestom, tabuľka sa však
   stále nezmestí — zoznam zákazníkov má osem stĺpcov a potrebuje ~900 px.
   Tabuľka sa preto stane vlastným vodorovným posuvníkom.
   ⚠️ `display:block` na `<table>` je zámerné: bez neho `overflow-x` na tabuľke
      neúčinkuje. Vnútorné `display: table-row`/`table-cell` ostávajú, takže
      stĺpce sa naďalej zarovnávajú. */
@media (min-width: 721px) and (max-width: 1024px) {
  .content .card > table.tbl,
  .content table.tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .content table.tbl > thead,
  .content table.tbl > tbody { display: table; width: 100%; min-width: 760px; }
}

/* ═══ 3. Dotykové ciele ═════════════════════════════════════════════════════
   Meranie našlo 385 cieľov pod 38 px — najmä položky menu (34 px).
   Odporúčanie WCAG 2.2 aj iOS HIG je 44 px.

   Platí na každom dotykovom zariadení do 1024 px, teda aj na tablete: prst
   je rovnako veľký na iPade ako na iPhone. `pointer: coarse` drží notebook
   so zmenšeným oknom pri pôvodných, kompaktnejších rozmeroch. */
@media (max-width: 1024px) and (pointer: coarse) {
  .content .btn,
  .content .btn-sm,
  .content button:not(.btn-xs):not(.c-check),
  .content select.input,
  .content input.input:not([type="checkbox"]):not([type="radio"]),
  .topbar-menu-btn,
  .launcher-btn {
    min-height: var(--dd-tap);
  }
  .content .btn, .content .btn-sm { padding-inline: 14px; }

  /* `btn-xs` je na desktope zámerne drobné (husté zoznamy), na dotyk sa
     ale musí dať trafiť — v kartách je naň miesta dosť. */
  .content .btn-xs { min-height: 38px; padding-inline: 12px; }

  /* Ovládanie mimo `.content`: hlavička a bočná zásuvka. */
  .topbar-btn, .topbar .btn, .notif-btn { min-width: 40px; min-height: 40px; }
  .sidebar .sb-logout { min-height: var(--dd-tap); }

  /* Polia a rozbaľovačky aj tam, kde nemajú triedu `.input`. */
  .content select, .content input:not([type="checkbox"]):not([type="radio"]),
  .content textarea, .content .select { min-height: var(--dd-tap); }

  /* Zaškrtávacie políčka a prepínače — 24 px je minimum podľa WCAG 2.2
     (SC 2.5.8 Target Size). Väčšie sa spraviť nedajú bez zásahu do JSX:
     plocha nahradeného prvku sa paddingom ani pseudo-prvkom nerozšíri,
     rozšíril by ju až `<label>` okolo neho. */
  .content input[type="checkbox"],
  .content input[type="radio"] { width: 24px; height: 24px; }

  /* Položky bočného menu — v zásuvke sú hlavným ovládaním.
     `.sb-nav` používa aj bočné menu Nastavení, ktoré je v obsahu, nie v zásuvke. */
  .sidebar .sb-nav a, .content .sb-nav a { min-height: var(--dd-tap); }
  .sidebar .sb-subitem { min-height: 40px; }
  .subnav a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ═══ 4. Polia bez priblíženia (iOS) ════════════════════════════════════════
   Safari na iOS pri zaostrení do poľa s písmom < 16 px priblíži celú
   stránku a používateľ z nej potom „vypadne". Jediná obrana je 16 px.

   Platí až po 1024 px, lebo rovnako sa správa aj iPad — ale iba na dotykových
   zariadeniach (`pointer: coarse`). Notebook so zmenšeným oknom si tak
   ponechá pôvodnú, drobnejšiu sadzbu polí. */
@media (max-width: 1024px) and (pointer: coarse) {
  .content input, .content select, .content textarea,
  .modal input, .modal select, .modal textarea,
  .input, select.input, textarea.input { font-size: 16px !important; }
  /* Vizuálne to nemá pôsobiť väčšie než predtým — vyrovná sa odsadením. */
  .content .input, .modal .input { padding-block: 8px; }
}

/* ═══ 5. Modálne okná na celú obrazovku ═════════════════════════════════════
   Okno 480–1120 px na 393 px obrazovke je useknuté. Na telefóne je
   správanie natívnych aplikácií list zdola cez celú plochu. */
@media (max-width: 720px) {
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
  }
  .modal-head {
    position: sticky; top: 0; z-index: 3;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
  .modal-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
  /* Potvrdzovacie tlačidlá musia ostať na dosah aj pri dlhom formulári. */
  .modal-foot {
    position: sticky; bottom: 0; z-index: 3;
    background: #fff;
    border-top: 1px solid var(--border);
    padding-bottom: calc(10px + var(--dd-safe-b));
  }
  .modal-foot .btn { flex: 1; justify-content: center; min-height: var(--dd-tap); }
}

/* ═══ 6. Spodná navigačná lišta ═════════════════════════════════════════════
   Štyri najpoužívanejšie skupiny na dosah palca + „Viac", ktoré otvorí
   úplný zoznam v bočnej zásuvke. Kreslí ju `MobilnaLista` v `shared.jsx`.
   Nad 720 px sa nevykresľuje vôbec. */
.mob-lista { display: none; }

@media (max-width: 720px) {
  .mob-lista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1040;              /* nad obsahom, pod zásuvkou (1100) a jej tienidlom (1050) */
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 14px rgba(2, 57, 111, 0.08);
    padding-bottom: var(--dd-safe-b);
    padding-left: var(--dd-safe-l);
    padding-right: var(--dd-safe-r);
  }
  .mob-lista a, .mob-lista button {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--dd-lista-v);
    padding: 6px 2px;
    color: var(--ink-500);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    /* dlhý názov skupiny nesmie rozhodiť mriežku */
    overflow: hidden;
  }
  .mob-lista span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mob-lista svg { width: 21px; height: 21px; flex-shrink: 0; }
  .mob-lista .je-aktivna { color: var(--navy-700); }
  .mob-lista .je-aktivna svg { color: var(--navy-700); }
  /* Prúžok nad aktívnou položkou — na malej ikone je farba sama o sebe slabý signál. */
  .mob-lista .je-aktivna::before {
    content: '';
    position: absolute;
    top: 0;
    width: 26px; height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--amber-500);
  }
  .mob-lista a, .mob-lista button { position: relative; }

  /* Obsah nesmie končiť pod lištou. */
  .content {
    padding-bottom: calc(var(--dd-lista-v) + var(--dd-safe-b) + 14px) !important;
  }
  /* Plávajúce AI tlačidlo sedelo presne tam, kde je teraz lišta. */
  .ai-fab { bottom: calc(var(--dd-lista-v) + var(--dd-safe-b) + 14px) !important; }
}

/* Obrazovka AI má vlastný celoplošný layout s vlastným vstupným poľom dole —
   lišta by mu sedela na písacom poli. */
@media (max-width: 720px) {
  body.ai-screen .mob-lista { display: none; }
  body.ai-screen .content { padding-bottom: 12px !important; }
}

/* ═══ 7. Hlavička a lišta podzáložiek ═══════════════════════════════════════ */
@media (max-width: 720px) {
  .topbar {
    position: sticky; top: 0; z-index: 30;
    padding-top: env(safe-area-inset-top, 0px);
    height: auto;
    min-height: 52px;
  }
  /* Omrvinky sa na úzkej obrazovke skrátia na poslednú položku — cesta
     „Domov / Objednávky / Detail" zaberie celý riadok a vytlačí zvonček. */
  .crumbs span, .crumbs .sep { display: none; }
  .crumbs b { font-size: 14px; }
  .crumbs { min-width: 0; overflow: hidden; }
  .crumbs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .subnav {
    position: sticky;
    top: calc(52px + env(safe-area-inset-top, 0px));
    z-index: 25;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { white-space: nowrap; flex-shrink: 0; }
}

/* ═══ 8. Hlavička obrazovky a filtre ════════════════════════════════════════ */
@media (max-width: 720px) {
  .page-head h1 { font-size: 18px; }
  .page-head-actions { gap: 6px; }
  .page-head-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Lišty s filtrami a chipmi sa posúvajú do strán namiesto lámania
     na päť riadkov, ktoré by vytlačili obsah pod ohyb. */
  .filters-scroll, .chips-row, .tabs-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    scrollbar-width: none;
  }
  .filters-scroll::-webkit-scrollbar,
  .chips-row::-webkit-scrollbar,
  .tabs-row::-webkit-scrollbar { display: none; }
  .filters-scroll > *, .chips-row > *, .tabs-row > * { flex-shrink: 0; }
}

/* ═══ 9. Zásuvka bočného menu ═══════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Zásuvka musí byť nad spodnou lištou, inak sa jej spodné položky nedajú stlačiť. */
  .sidebar { z-index: 1100; }
  .sidebar .sb-nav { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* Šírka podľa obrazovky — 260 px na 320 px displeji zaberie celú plochu. */
  .sidebar { width: min(280px, 82vw) !important; }
}

/* ═══ 10. Prihlasovacia obrazovka ═══════════════════════════════════════════ */
@media (max-width: 720px) {
  .auth-wrap { min-height: 100dvh; }
  .auth-right { padding-bottom: calc(24px + var(--dd-safe-b)); }
}