/* ══════════════════════════════════════════════════════════════════════════
   mobil.css — dashboard na telefóne
   ──────────────────────────────────────────────────────────────────────────
   PREČO SAMOSTATNÝ SÚBOR: pl.css má vyše milióna znakov a 141 medií. Ďalších
   sto riadkov v ňom by už nikto nenašiel. Tu je mobil na jednom mieste,
   po sekciách, a v layout.php sa načítava ako posledný — pri rovnako silných
   pravidlách teda vyhrá on a netreba nikde !important.

   ČO SA TU RIEŠI (zistené meraním na iPhone 390 × 844):
     • tabuľky so 6–9 stĺpcami, ktoré sa dali čítať len rolovaním do strany
     • lišty s nástrojmi, ktorým vypadli tlačidlá za pravý okraj
     • ikonky menšie než 30 px — prstom sa netrafia
     • popisky pod 11 px — na telefóne sa nedajú prečítať

   HRANICA: 767 px, tá istá, na ktorej sa v pl.css zapína spodná lišta.
   ══════════════════════════════════════════════════════════════════════════ */

/* Tlačidlo zásuvky patrí len na telefón. Stojí NAD médiom zámerne — keby
   bolo pod ním, prebilo by pravidlo vnútri a tlačidlo by nebolo nikde. */
.ag-mob-menu, .mem-mob-menu { display: none; }

@media (max-width: 767px) {

/* ── 1. Terče a písmo ─────────────────────────────────────────────────────
   Ikonky mali 26–28 px. Prst potrebuje aspoň 40, inak sa človek trafí vedľa
   a otvorí niečo iné. Zväčšujeme dotykovú plochu, nie samotnú ikonku —
   preto len min-width/min-height, kresba vnútri ostáva rovnaká. */
.tbl-btn, .conn-info-btn, .mem-view-btn, .fl-card-menu-btn, .ml-comp-hbtn,
.ml-search-filter, .ml-comp-fmt, .ml-comp-cc, .ca-cats-manage, .cx-panel-x,
.cbt-side-toggle, .cbt-tab-add, .omni-channel-btn, .dh-wx-chip-nav,
.wb-card-act, .ag-card-act, .sk-card-act, .btn-icon, .icon-btn {
  min-width: 38px; min-height: 38px;
}
/* Prepínače a drobné odkazy v texte nechávame, len im dáme viac priestoru
   na klik zvislo — inak by sa rozhodil riadok. */
.pr-stav-a, .obj-tr { padding-top: 8px; padding-bottom: 8px; }

/* Popisky typu „SEKCIA" a značky mali 8,5–10 px. Na telefóne je to za
   hranicou čitateľnosti; 11 px je minimum, ktoré ešte drží ten istý vzhľad. */
.side-section, .ml-side-section, .ca-side-section, .ag-side-section,
.sk-side-section, .mem-side-section, .fl-side-section, .wb-side-section,
.nw-side-section, .in-side-section, .us-side-section, .al-side-section,
.pr-side-section, .cbt-side-label,
.ml-side-eyebrow, .ca-side-eyebrow, .ag-side-eyebrow, .sk-side-eyebrow,
.mem-side-eyebrow, .wb-side-eyebrow, .nw-side-eyebrow, .in-side-eyebrow,
.us-side-eyebrow, .al-side-eyebrow,
.badge, .cbt-tag, .rel-znacka, .dh-web__sl, .web-stat-lbl, .mem-chip-c,
.cs-st-draft, .cs-st-fail, .dt { font-size: 11px; }

/* ── 2. Tabuľky → karty ───────────────────────────────────────────────────
   Deväť stĺpcov sa na 390 px nezmestí nijako. Doteraz sa tabuľka dala len
   ťahať do strany, takže polovica údajov bola mimo obrazovky a človek
   netušil, že tam vôbec je. Riadok preto na telefóne prestáva byť riadkom
   a stáva sa kartou: dôležité hore a veľké, zvyšok pod tým namodro.

   Robí sa to čisto v CSS cez poradie stĺpcov (`nth-child`) — bez zásahu do
   JavaScriptu, ktorý tie riadky skladá. Keď sa v tabuľke zmení poradie
   stĺpcov, treba prekresliť aj mapovanie tu. */
.obj-tabulka:not(.obj-tabulka--polozky) thead, .us-table thead, .cb-lead-table thead, .inv-table thead {
  display: none;
}
.obj-tabulka:not(.obj-tabulka--polozky), .obj-tabulka:not(.obj-tabulka--polozky) tbody,
.us-table, .us-table tbody,
.cb-lead-table, .cb-lead-table tbody,
.inv-table, .inv-table tbody { display: block; width: 100%; }

.obj-tabulka:not(.obj-tabulka--polozky) tbody tr, .us-table tbody tr,
.cb-lead-table tbody tr, .inv-table tbody tr {
  display: grid; gap: 3px 10px; align-items: center;
  padding: 12px 12px; margin: 0 0 8px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-1);
}
.obj-tabulka:not(.obj-tabulka--polozky) tbody td, .us-table tbody td,
.cb-lead-table tbody td, .inv-table tbody td {
  display: block; border: 0 !important; padding: 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
/* Prázdny alebo načítavací riadok má colspan — ten sa na mriežku nedá. */
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr.je-prazdny, .us-table tbody tr:has(td[colspan]),
.cb-lead-table tbody tr:has(td[colspan]), .inv-table tbody tr:has(td[colspan]),
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr:has(td[colspan]) {
  display: block; text-align: center;
}

/* Objednávky (zoznam, nie položky v detaile): # · zákazník · e-shop · položiek · suma · stav · platba · dátum · šípka */
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "zak zak chev" "cis shop dat" "suma suma stav";
}
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr > td:nth-child(1) { display: block; grid-area: cis; font-size: 12px; color: var(--fg-3); }
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr > td:nth-child(2) { display: block; grid-area: zak; }
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr > td:nth-child(3) { display: block; grid-area: shop; font-size: 12px; color: var(--fg-3); }
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr > td:nth-child(4) { display: none; }   /* položiek — do detailu */
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr > td:nth-child(5) { display: block; grid-area: suma; text-align: left; font-size: 15px; }
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr > td:nth-child(6) { display: block; grid-area: stav; text-align: right; overflow: visible; }
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr > td:nth-child(7) { display: none; }   /* platba — do detailu */
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr > td:nth-child(8) { display: block; grid-area: dat; font-size: 12px; color: var(--fg-3); text-align: right; }
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr > td:nth-child(9) { display: block; grid-area: chev; }
.obj-tabulka:not(.obj-tabulka--polozky) tbody tr > td:nth-child(5) .obj-suma { font-size: 15px; }

/* Užívatelia: meno · e-mail · rola · stav · posledné prihlásenie · akcie */
.us-table tbody tr {
  grid-template-columns: 1fr auto;
  grid-template-areas: "meno akcie" "mail mail" "rola stav" "prih prih";
}
.us-table tbody tr > td:nth-child(1) { display: block; grid-area: meno; }
.us-table tbody tr > td:nth-child(2) { display: block; grid-area: mail; font-size: 12.5px; }
.us-table tbody tr > td:nth-child(3) { display: block; grid-area: rola; }
.us-table tbody tr > td:nth-child(4) { display: block; grid-area: stav; text-align: right; }
.us-table tbody tr > td:nth-child(5) { display: block; grid-area: prih; font-size: 12px; color: var(--fg-3); }
.us-table tbody tr > td:nth-child(6) { display: block; grid-area: akcie; }
.us-table tbody tr > td:nth-child(6) .tbl-act { justify-content: flex-end; gap: 4px; }

/* Chatbot — kontakty zo stránky: kontakt · stav · poznámka · chatbot · dátum · … */
.cb-lead-table tbody tr {
  grid-template-columns: 1fr auto;
  grid-template-areas: "kont stav" "pozn pozn" "bot dat" "akc akc";
}
.cb-lead-table tbody tr > td:nth-child(1) { display: block; grid-area: kont; }
.cb-lead-table tbody tr > td:nth-child(2) { display: block; grid-area: stav; text-align: right; }
.cb-lead-table tbody tr > td:nth-child(3) { display: block; grid-area: pozn; font-size: 12.5px; color: var(--fg-3); white-space: normal; }
.cb-lead-table tbody tr > td:nth-child(4) { display: block; grid-area: bot; font-size: 12px; color: var(--fg-3); }
.cb-lead-table tbody tr > td:nth-child(5) { display: block; grid-area: dat; font-size: 12px; color: var(--fg-3); text-align: right; }
.cb-lead-table tbody tr > td:nth-child(6) { display: block; grid-area: akc; }

/* Faktúry: stav · číslo · dátum · zákazník · krajina · suma · POHODA · … */
.inv-table tbody tr {
  grid-template-columns: 1fr auto;
  grid-template-areas: "zak stav" "cislo suma" "dat poh" "akc akc";
}
.inv-table tbody tr > td:nth-child(1) { display: block; grid-area: stav; text-align: right; }
.inv-table tbody tr > td:nth-child(2) { display: block; grid-area: cislo; font-size: 12.5px; color: var(--fg-3); }
.inv-table tbody tr > td:nth-child(3) { display: block; grid-area: dat; font-size: 12px; color: var(--fg-3); }
.inv-table tbody tr > td:nth-child(4) { display: block; grid-area: zak; font-weight: 600; }
.inv-table tbody tr > td:nth-child(5) { display: none; }      /* krajina — do detailu */
.inv-table tbody tr > td:nth-child(6) { display: block; grid-area: suma; text-align: right; font-size: 15px; }
.inv-table tbody tr > td:nth-child(7) { display: block; grid-area: poh; text-align: right; font-size: 12px; }
.inv-table tbody tr > td:nth-child(8) { display: block; grid-area: akc; }

/* Obal už nemusí rolovať do strany — obsah sa doň konečne zmestí. */
.obj-tabulka-obal, .us-tablewrap, .cb-lead-wrap, .inv-tablewrap {
  overflow-x: visible;
}


/* Kedy sa naposledy prihlásil — samotný dátum v karte nič nehovorí. */
.us-table tbody tr > td:nth-child(5)::before { content: 'Naposledy '; color: var(--fg-4); }

/* ── 3. Lišty s nástrojmi ─────────────────────────────────────────────────
   Všade rovnaký prípad: lišta stavaná na monitor, na telefóne jej posledné
   tlačidlo (spravidla to najpoužívanejšie — „Dnes", „Nová položka") vypadlo
   za pravý okraj. Namiesto rolovania do strany radšej vyhodíme to, čo je na
   telefóne aj tak zbytočné: nadpis, ktorý je len zopakovaním sekcie. */
.ca-toolbar, .nw-toolbar, .wb-toolbar, .sk-toolbar, .al-toolbar, .us-toolbar {
  gap: 8px; padding-left: 12px; padding-right: 12px;
}
/* Nadpis v lište len opakuje názov sekcie, ktorý je aj v hornej lište.
   Na monitore je to milé, na telefóne kvôli nemu vypadne hľadanie
   a hromadné akcie za okraj — v Odberateľoch sa dokonca prekryli. */
.ca-toolbar-title, .nw-toolbar-title, .wb-toolbar-title,
.sk-toolbar-title, .al-toolbar-title, .us-toolbar-title { display: none; }
.nw-search, .ag-search, .mem-search, .rp-search, .dc-search { min-width: 0; flex: 1 1 auto; }
.ca-tb-btn, .ca-nav-btn { min-width: 38px; min-height: 38px; }

/* Pošta: štyri záložky s ikonkou aj slovom sa nezmestili. Ikonka je tu
   ozdoba, slovo nesie význam — tak ostáva slovo. */
.ml-tabs { padding: 0 8px; }
.ml-tab { padding: 12px 10px; font-size: 12.5px; gap: 4px; }
.ml-tab > i { display: none; }

/* Obsah: dve záložky s pevnou šírkou 190 px sa vedľa seba nezmestili.
   Nech si šírku rozdelia — nie je čo rolovať, sú len dve. */
.cs-tabs { gap: 6px; }
.cs-tab { min-width: 0; flex: 1 1 0; padding: 10px 12px; }
.cs-tab > span { font-size: 12.5px; }
.cs-tab > small { font-size: 11px; }

/* Ostrý chat: žiara pod guľou je 600 px široká ozdoba. Na monitore sa
   schová za okraj, na telefóne z nej robil pruh na rolovanie do prázdna. */
.cx-hero { overflow-x: hidden; }


/* Zaškrtávacie políčko malo 13 px. To je terč pre myš, nie pre prst. */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

/* Prepínače období v prehľade („7 dní / 30 dní") boli 27 px vysoké. */
.dh-seg { min-height: 34px; padding-left: 12px; padding-right: 12px; }

/* Posledné drobčeky pod 11 px. */
.ca-legend-title, .cal-agenda-task-col, .cx-hero small,
.cx-aiviz-hint span, .adm-nav-sep { font-size: 11px; }


/* ── 4. Zvyšné drobnosti ──────────────────────────────────────────────────
   Písmo pod 11 px, ktoré sedí buď v inline štýle, alebo za ID selektorom
   priamo v sekcii. Bežné pravidlo sa naň nedostane, preto tá sila navyše —
   nie je to lenivosť, ale jediná cesta bez prepisovania desiatok šablón. */
/* Sekcie API kľúče aj Marketing bývajú v jednom obale #sec-integrations —
   podľa vlastného mena sa na ne teda zacieliť nedá. A štýly, ktoré si sekcie
   nesú v <style> priamo v tele stránky, sú v poradí za týmto súborom, takže
   pri rovnakej sile vyhrávajú ony. Odtiaľ tá sila navyše. */
.dc-row .sz, .dc-row .dt { font-size: 11px !important; }
.ag-role-chip, .ag-card-stat span { font-size: 11px !important; }
.api-prov-name .badge, [id$="-shared-badge"], [id$="_oauth_badge"],
.flbl span, .ts-add-lbl small, #sec-memory label small { font-size: 11px !important; }
/* Jednotka pri veľkom čísle (12 h) je zámerne menšia — tú nechávame tak. */

/* Odkazy vnútri textu („kde vziať kľúč") mali 14 px na výšku. Nech majú
   aspoň riadok navyše na klik, bez toho, aby rozhodili odstavec. */
.conn-card a, .in-card a, .api-card a,
.mh-card-body small a, .conn-card small a,
.obj-detail-p a, .obj-bok-h a, .obj-nadhlavie a { display: inline-block; padding: 6px 0; }

/* Tlačidlo na odpojenie sa scvrklo na 20 px šírky — ikonka v ňom sa
   nezmestila a človek ho videl ako červený prúžok. */
.btn-danger, .btn-icon, .conn-unlink { min-width: 40px; min-height: 34px; }

/* Výber agenta a modelu v AI Chate BETA: 23 px na výšku je málo. */
.cbt-pick { min-height: 34px; }
.prep { min-height: 34px; }


/* ── 5. Bočné panely sekcií ───────────────────────────────────────────────
   Väčšina sekcií si bočný panel na telefóne zasunie a otvára ho ikonkou
   s tromi čiarkami. Agenti a Pamäť to nemali: ich panel ostal navrchu ako
   plná obrazovka filtrov a k samotnému zoznamu sa človek dostal až po dlhom
   rolovaní. (V pl.css sa ich schovať pokúša, lenže to pravidlo stojí NAD
   základným `.ag-side { display: flex }`, takže nikdy nič nespravilo.)
   Tu dostávajú tú istú zásuvku ako zvyšok. */
.ag-shell, .mem-shell { grid-template-columns: 1fr; }
.ag-side, .mem-side {
  display: flex; position: absolute; inset: 0 auto 0 0;
  width: min(86vw, 300px); z-index: 50;
  transform: translateX(-100%);
  transition: transform var(--d-3, .24s) var(--e-out, ease);
  box-shadow: 8px 0 28px rgba(0,0,0,.35);
}
.ag-shell.side-open .ag-side, .mem-shell.side-open .mem-side { transform: translateX(0); }
.ag-mob-menu, .mem-mob-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-right: 4px; flex: none;
  border: 0; border-radius: 10px;
  background: var(--bg-2); color: var(--fg-2); cursor: pointer;
}
.ag-main-head, .mem-main-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ag-main-head .ag-main-title, .mem-main-head .mem-main-title-wrap { flex: 1 1 auto; min-width: 0; }


/* ── 6. Prázdne polovice obrazovky ────────────────────────────────────────
   Sekcie stavané na dva stĺpce (zoznam + náhľad) sa na telefóne poskladajú
   pod seba. Kým nie je nič vybrané, druhý stĺpec je prázdna škatuľa cez celú
   obrazovku — človek roluje cez nič. Nech sa ukáže až vtedy, keď má čo. */
.dc-preview:has(> .dc-empty) { display: none; }
.dc-list { max-height: none; }
.cs-main:has(> .cs-empty) { display: none; }
/* „Klikni na položku vľavo" na telefóne neplatí — zoznam je nad tým. */
.cs-empty p:first-of-type { display: none; }


/* ── 7. Detail objednávky ─────────────────────────────────────────────────
   Časová os stavu (prijatá → zaplatená → spracúva sa → vybavená) je stavaná
   do šírky: štyri kroky po 108 px. Na 320 px z nej ostal pruh na rolovanie
   a posledné dva kroky nebolo vidieť. Otočíme ju pod seba — spojnica medzi
   bodkami sa otočí tiež, takže postup ostáva čitateľný na prvý pohľad. */
.obj-osa { flex-direction: column; align-items: stretch; overflow-x: visible; }
.obj-krok {
  display: grid; grid-template-columns: 27px 1fr;
  column-gap: 12px; text-align: left; padding-bottom: 16px; min-width: 0;
}
.obj-krok-bod { grid-row: span 2; margin: 0; }
.obj-krok::before {          /* zo spojnice vľavo sa stáva spojnica nadol */
  display: block; top: 30px; left: 13px; width: 2px;
  height: calc(100% - 30px);
}
.obj-krok:last-child { padding-bottom: 0; }
.obj-krok:last-child::before { display: none; }
.obj-krok.je-hotovy::before { background: var(--acc); }

.obj-detail-mriezka { grid-template-columns: 1fr; }


/* ── 8. Tlačidlá stlačené na pár pixelov ──────────────────────────────────
   Tie isté prípady po celom dashboarde: ikonka v pružnej lište bez `flex`,
   ktorú susedia stlačili na 12 px šírky. Vyzerá to ako čiarka a nedá sa
   trafiť — pritom je to hlavné menu, návrat späť alebo synchronizácia. */
.top__menu, .wdx-back, .wdx-sync, .ca-mob-menu, .ml-mob-menu, .us-mob-menu,
.wb-mob-menu, .in-mob-menu, .al-mob-menu, .nw-mob-menu, .sk-mob-menu,
.fl-mob-menu, .pr-mob-menu, .tm-mob-menu { flex: 0 0 auto; }
.side__pin { min-width: 34px; min-height: 34px; }
.wdx-chip { min-height: 32px; }
/* Detail webu: hlavička s prepínačmi sa nezmestila. */
.wdx-main { overflow-x: hidden; }
.wdx-head { flex-wrap: wrap; row-gap: 8px; }


/* ── 9. Horná lišta ───────────────────────────────────────────────────────
   Šesť ikoniek vpravo, hamburger vľavo a logo medzi nimi — logo je jediné,
   čo sa smie zmršťovať, tak sa zmrštilo na 17 px a bola z neho šmuha.
   Logo aj hamburger dostávajú pevnú šírku a miesto si vezmú z medzier
   medzi ikonkami; tie sú na dotyk aj tak zbytočne veľké. */
.top__logo, .top__logo-img { flex: 0 0 auto; }
.top__logo { padding: 0; }
/* Logo je 142 × 30. Pružná lišta ho stláčala na šírku a výšku mu nechala —
   z nápisu bola zvislá šmuha. Tu dostane strop na šírku a výška sa dopočíta,
   takže ostane v pomere, len menšie. 64 px je presne to, čo v lište zvýši. */
.top__logo-img { max-width: 64px; height: auto; object-fit: contain; }
.top__right { gap: 4px; }
.top { gap: 6px; }


/* ── 10. AI Chat BETA ─────────────────────────────────────────────────────
   Najhoršie miesto z celého dashboardu na telefóne. Pri zasunutí sa bočné
   menu odsúvalo o -110 % vlastnej šírky, lenže stálo 58 px od ľavého okraja,
   takže z neho ostal vždy visieť 35 px široký pruh s odseknutými písmenami.
   Chatu potom zvýšilo 298 px z 390.

   Zasúvame ho na samý okraj a keď je otvorené, kľudne nech prekryje aj lištu
   s priestormi — tá je 58 px, čo je na telefóne šestina obrazovky, takže si
   berie 44 a chat dostane zvyšok. */
.cbt-shell, .cbt-shell.cbt-no-side, .cbt-shell.cbt-docs-off,
.cbt-shell.cbt-no-side.cbt-docs-off { grid-template-columns: 44px minmax(0, 1fr); }
.cbt-rail { width: 44px; padding-left: 3px; padding-right: 3px; }
.cbt-rail-btn, .cbt-rail-add, .cbt-rail-me { width: 36px; height: 36px; }
.cbt-side {
  /* Panel je absolútne umiestnené dieťa mriežky, takže `left: 0` neznamená
     ľavý okraj obrazovky, ale ľavý okraj jeho bunky — a tá začína až za
     lištou. Preto z neho po zasunutí ostával viditeľný pruh. Roztiahnutím
     cez všetky stĺpce sa bunka začne na nule a zasunie sa celý. */
  grid-column: 1 / -1;
  left: 0; width: min(84vw, 280px); z-index: 60;
  transform: translateX(-100%);
  box-shadow: 8px 0 28px rgba(0,0,0,.45);
}
.cbt-side.is-open { transform: none; }
.cbt-docs { width: min(92vw, 340px); z-index: 60; }
/* Hlavička chatu: štyri ikonky a názov sa museli tlačiť do 298 px. */
.cbt-topbar { padding-left: 6px; padding-right: 6px; gap: 4px; }


/* ── 11. Prihlásenie ──────────────────────────────────────────────────────
   Po pozadí plávajú bublinky „Premýšľam…", „Učím sa" a podobne. Sú
   umiestnené v percentách a vycentrované na svoj bod, takže tá pri ľavom
   okraji sa na telefóne polovicou odsekne. Na malej obrazovke sú aj tak len
   šum okolo prihlasovacieho poľa — nech sa neukazujú. */
.login__ai-msgs { display: none; }

}  /* koniec max-width: 767px */

/* ── Telefón na šírku a menšie tablety (768–900 px) ───────────────────────
   Sem už karty nesiahajú (tie sú do 767 px) a tabuľka objednávok si pýta
   918 px. Telefón otočený na šírku má 844 — a práve tak ho má človek
   v aute v držiaku. Dva najmenej dôležité stĺpce preto zmiznú a zvyšok
   sa zmestí bez ťahania do strany; oba údaje sú aj tak v detaile. */
@media (min-width: 768px) and (max-width: 900px) {
  .obj-tabulka:not(.obj-tabulka--polozky) thead th:nth-child(4),
  .obj-tabulka:not(.obj-tabulka--polozky) tbody td:nth-child(4),
  .obj-tabulka:not(.obj-tabulka--polozky) thead th:nth-child(7),
  .obj-tabulka:not(.obj-tabulka--polozky) tbody td:nth-child(7) { display: none; }
}

/* ══ Súbory na telefóne ═══════════════════════════════════════════════════
   Pred úpravou začínal obsah až v polovici obrazovky (hľadanie, drobčeky,
   dve tlačidlá, filter, zoradenie, dátumy, ikonky), 13 priečinkov zabralo
   tri obrazovky a v zozname chýbali mená súborov — pevné stĺpce 28+120+100+40
   px nenechali pre meno nič. Tlačidlá „Nový priečinok / Nahrať" sa na
   telefóne presúvajú do „+" vpravo dole, zoradenie a dátumy pod „Zoradiť". */
#sec-media .fl-fab, #sec-media .fl-mob-filtre { display: none; }

@media (max-width: 767px) {
  #sec-media { --fl-bnav: calc(70px + var(--safe-b, 0px)); }

  /* Hlavička: menu · hľadanie · mriežka/zoznam */
  #sec-media .fl-toolbar { padding: 8px 10px; gap: 6px; }
  #sec-media .fl-toolbar-left, #sec-media .fl-toolbar-right { gap: 2px; }
  #sec-media .fl-toolbar-search { min-width: 0; height: 40px; margin: 0; padding: 0 2px 0 12px; }
  #sec-media .fl-toolbar-search input { font-size: 16px; }          /* pod 16 px iOS pri písaní priblíži stránku */
  #sec-media .fl-tb-btn { width: 40px; height: 40px; font-size: 15px; }
  #sec-media .fl-view-toggle { padding: 2px; }
  #sec-media .fl-view-btn { width: 36px; height: 36px; font-size: 14px; }
  #sec-media .fl-search-clear { width: 36px; height: 36px; }

  /* Drobčeky v jednom riadku, posúvajú sa do strany; tlačidlá idú do „+" */
  #sec-media .fl-bread-row { padding: 4px 8px; flex-wrap: nowrap; border-bottom: 0; }
  #sec-media .fl-crumbs { flex: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #sec-media .fl-crumbs::-webkit-scrollbar { display: none; }
  #sec-media .fl-crumb { flex-shrink: 0; min-height: 38px; padding: 0 10px; font-size: 14px; white-space: nowrap; }
  #sec-media .fl-crumb.is-current { max-width: 70vw; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 38px; }
  #sec-media .fl-page-actions { display: none; }

  /* Filter: Všetko / Priečinky / Súbory + „Zoradiť"; zvyšok po rozbalení */
  #sec-media .pf-bar { padding: 4px 10px 8px; gap: 8px; border-bottom: 1px solid var(--line-soft); }
  #sec-media .pf-seg-group { flex: 1; min-width: 0; justify-content: space-between; }
  #sec-media .pf-chip { flex: 1; height: 34px; padding: 0 8px; font-size: 13.5px; }
  #sec-media .fl-mob-filtre {
    display: inline-flex; align-items: center; gap: 7px; position: relative; flex-shrink: 0;
    height: 40px; padding: 0 13px; border-radius: 999px; cursor: pointer;
    background: var(--bg-2); border: 1px solid var(--line); color: var(--fg-2);
    font-family: inherit; font-size: 13.5px; font-weight: 600;
  }
  #sec-media .fl-mob-filtre[aria-expanded="true"] { color: var(--acc); border-color: var(--line-acc); }
  #sec-media .fl-mob-filtre.ma-filter::after {
    content: ''; position: absolute; top: 5px; right: 7px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--acc);
  }
  #sec-media .pf-bar .pf-bar-sort, #sec-media .pf-bar .pf-bar-dates, #sec-media .pf-bar .pf-bar-act { display: none; }
  #sec-media .pf-bar.fl-filtre-open .pf-bar-sort { display: flex; width: 100%; gap: 6px; }
  #sec-media .pf-bar.fl-filtre-open .pf-sortb {
    flex: 1; min-height: 40px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg-2); font-size: 12px; letter-spacing: .04em;
  }
  #sec-media .pf-bar.fl-filtre-open .pf-sortb.is-on { border-color: var(--line-acc); background: var(--acc-soft); }
  #sec-media .pf-bar.fl-filtre-open .pf-bar-dates { display: flex; width: 100%; height: 44px; margin: 0; border-radius: 12px; }
  #sec-media .pf-bar-dates input { flex: 1; min-width: 0; height: 40px; font-size: 16px; }
  #sec-media .pf-bar.fl-filtre-open .pf-bar-act { display: flex; width: 100%; justify-content: flex-end; }
  #sec-media .pf-ibtn { width: 40px; height: 40px; font-size: 14px; }

  /* Obsah: miesto dole pre „+" a spodnú lištu */
  #sec-media .fl-content { padding: 10px 10px calc(var(--fl-bnav) + 84px); }
  #sec-media .fl-section-h { margin: 6px 2px 8px; font-size: 11.5px; }
  #sec-media .fl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
  /* Priečinky pod sebou: v dvoch stĺpcoch sa mená lámali uprostred slova („02_Pletiva.s / k"). */
  #sec-media .fl-grid.fl-folders { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 18px; }
  #sec-media .fl-card:hover { transform: none; box-shadow: none; }      /* na dotyku by karta ostala „zdvihnutá" */

  /* Priečinky: nízke riadky, meno v jednom riadku, ⋮ vždy viditeľné */
  #sec-media .fl-card.is-folder { padding: 8px 2px 8px 10px; gap: 12px; min-height: 58px; }
  #sec-media .fl-card-folder-ico { width: 38px; height: 38px; border-radius: 10px; font-size: 16px; }
  #sec-media .fl-card-folder-name {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    overflow-wrap: normal; word-break: normal; min-height: 0; font-size: 15px; margin-bottom: 1px;
  }
  #sec-media .fl-card-folder-meta { font-size: 12px; }
  #sec-media .fl-card.is-folder .fl-share-stack { display: none; }
  #sec-media .fl-card.is-folder .fl-card-menu-btn {
    opacity: 1; position: static; flex-shrink: 0; width: 34px; height: 40px;
    background: transparent; color: var(--fg-3); backdrop-filter: none; font-size: 15px;
  }

  /* Súbory: dve karty vedľa seba, ⋮ vždy viditeľné */
  #sec-media .fl-card-thumb { height: 116px; }
  #sec-media .fl-card-body { padding: 8px 10px 10px; }
  #sec-media .fl-card-name { font-size: 13px; min-height: 0; line-height: 1.3; }
  #sec-media .fl-card-meta { font-size: 11.5px; flex-wrap: wrap; row-gap: 0; }
  #sec-media .fl-card-menu-btn { opacity: 1; top: 6px; right: 6px; width: 36px; height: 36px; border-radius: 10px; font-size: 14px; }
  #sec-media .fl-card-check { width: 28px; height: 28px; top: 8px; left: 8px; border-radius: 8px; font-size: 13px; }

  /* Zoznam: meno cez celú šírku, veľkosť a dátum pod ním */
  #sec-media .fl-list { margin-bottom: 18px; }
  #sec-media .fl-list-head { display: flex; gap: 18px; padding: 6px 12px; }
  #sec-media .fl-list-head > div:empty { display: none; }
  #sec-media .fl-list-head .fl-lh-sort { min-height: 34px; font-size: 11.5px; }
  #sec-media .fl-list-row {
    grid-template-columns: 26px minmax(0, 1fr) 40px; grid-template-rows: auto auto;
    column-gap: 10px; row-gap: 1px; padding: 8px 4px 8px 12px; min-height: 60px;
  }
  #sec-media .fl-list-row > .fl-card-check { grid-column: 1; grid-row: 1 / 3; width: 26px; height: 26px; }
  #sec-media .fl-list-row > .fl-list-row-name { grid-column: 2; grid-row: 1; font-size: 14px; }
  #sec-media .fl-list-row > .fl-list-row-meta:nth-child(3) { grid-column: 2; grid-row: 2; justify-self: start; padding-left: 38px; }
  #sec-media .fl-list-row > .fl-list-row-meta:nth-child(4) { grid-column: 2; grid-row: 2; justify-self: end; }
  #sec-media .fl-list-row > .fl-list-row-act { grid-column: 3; grid-row: 1 / 3; width: 40px; height: 44px; font-size: 15px; }
  #sec-media .fl-list-row-meta { font-size: 12px; }
  #sec-media .fl-list-row .fl-share-stack { display: none; }

  /* „+" vpravo dole (nahrať, odfotiť, nový priečinok) */
  #sec-media .fl-fab {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; bottom: calc(var(--fl-bnav) + 16px); z-index: 80;
    width: 58px; height: 58px; border: 0; border-radius: 18px; cursor: pointer;
    background: linear-gradient(135deg, #4a764a, #3a5e3a); color: #fff; font-size: 22px;
    box-shadow: 0 10px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.2);
    transition: transform var(--d-1);
  }
  #sec-media .fl-fab:active { transform: scale(.94); }
  #sec-media .fl-shell.side-open .fl-fab,
  #sec-media .fl-shell.has-preview .fl-fab,
  #sec-media .fl-main:has(#flBulk[style*="flex"]) .fl-fab { display: none; }

  /* Hromadné akcie: lišta dole pri palci, nie schovaná v hlavičke */
  #sec-media .fl-bulk {
    position: fixed; left: 8px; right: 8px; bottom: calc(var(--fl-bnav) + 8px); z-index: 95;
    padding: 8px 8px 8px 12px; gap: 8px; border-radius: 18px;
    background: var(--bg-elev, var(--bg-1)); backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--line-acc); box-shadow: 0 12px 32px rgba(0,0,0,.45);
  }
  #sec-media .fl-bulk-info { font-size: 13.5px; }
  #sec-media .fl-bulk-count { font-size: 13px; padding: 3px 10px; }
  #sec-media .fl-bulk-actions { flex-wrap: nowrap; justify-content: flex-end; gap: 4px; }
  #sec-media .fl-bulk-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; font-size: 16px; }
  #sec-media .fl-bulk-cancel { margin-left: 2px; }

  /* Bočné menu a detail súboru */
  #sec-media .fl-side { width: min(84vw, 300px); }
  #sec-media .fl-scope, #sec-media .fl-filter { min-height: 44px; font-size: 14.5px; }
  #sec-media .fl-filter-count { font-size: 12px; }
  #sec-media .fl-foot-stats { font-size: 12px; }
  #sec-media .fl-preview { max-width: none; }
  #sec-media .fl-prev-perms-add { min-height: 36px; padding: 0 12px; font-size: 13px; }

  /* Priebeh nahrávania nad spodnou lištou */
  #sec-media .fl-uploads { right: 8px; left: 8px; width: auto; bottom: calc(var(--fl-bnav) + 8px); }

  /* Menu položky ako panel zdola (⋮ aj „+") */
  .fl-menu {
    left: 8px !important; right: 8px !important; top: auto !important;
    bottom: calc(8px + var(--safe-b, 0px)) !important;
    min-width: 0; padding: 8px; border-radius: 20px; z-index: 300;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.5), 0 -8px 30px rgba(0,0,0,.4);
    animation: flZdola .22s var(--e-out);
  }
  .fl-menu-item { min-height: 50px; padding: 0 14px; gap: 14px; font-size: 15.5px; border-radius: 12px; }
  .fl-menu-item i { width: 20px; font-size: 16px; }
  .fl-menu-h { font-size: 13.5px; padding: 8px 14px 6px; text-transform: none; letter-spacing: 0; color: var(--fg-2); max-width: none; }
}
@keyframes flZdola { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ── AI STUDIO: písacie pole (a hlasový panel počas hovoru) nad spodnou lištou ──
   Sekcia ide na celú výšku, ale spodná navigácia (.bnav, ~70 px) pláva nad
   ňou — písacie pole bolo na telefóne celé pod ňou a nedalo sa doň ťuknúť. */
@media (max-width: 767px) {
  #sec-chat-beta .cbt-composer { padding-bottom: calc(80px + var(--safe-b, env(safe-area-inset-bottom, 0px))); }
}

/* ═══ Prechod telefónom 22. 9. 2026 ═══════════════════════════════════════ */
@media (max-width: 820px) {
  /* Predaj (Objednávky, Faktúry, Sklad, POHODA): pravidlo `.adm-shell.predaj-shell`
     má dve triedy a prebilo mobilné zloženie admin rámu — bočné menu ostalo
     stĺpcom cez pol obrazovky a čísla, nadpisy aj tabuľky boli orezané. */
  .adm-shell.predaj-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .adm-shell.predaj-shell > .adm-content { min-width: 0; }
}
@media (max-width: 767px) {
  /* Číslo verzie sedelo na nápise „Menu" v spodnej lište */
  /* Číslo verzie: na iPhone s domovskou čiarou celkom dole v prázdnom páse pod
     lištou; na telefóne bez nej nad lištou (inak by sedelo na „Domov"). */
  #appVersionBadge { bottom: max(2px, calc(80px - 3 * env(safe-area-inset-bottom, 0px))) !important; right: auto !important; left: 8px !important; opacity: .45 !important; }

  /* Plávajúce tlačidlá (nový email, konverzácie v Správach…) nad spodnou lištou */
  .ml-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 16px; }
  .dc-mob-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 16px; width: 54px; height: 54px; }

  /* Chatbot: dve tlačidlá sa tlačili do nadpisu — idú pod neho */
  #sec-chatbot > div:first-child { flex-wrap: wrap; gap: 10px; }
  #sec-chatbot > div:first-child > div { width: 100%; }
  #sec-chatbot > div:first-child .btn-add { flex: 1; justify-content: center; }

  /* Email: filter dátumov („mm/dd/yyyy") a jeho tlačidlá zaberali pol obrazovky —
     na telefóne ostanú len rýchle filtre. Zoznam nekončí pod lištou a tlačidlom. */
  #sec-mail .pf-bar-dates, #sec-mail .pf-bar-act { display: none; }
  #sec-mail .pf-seg-group { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  #sec-mail .ml-list, #sec-mail #mlList { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
  #sec-mail .ml-reader-body { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
  /* ikonky pri čítaní boli 16 px — na prst sa nedali trafiť */
  #sec-mail .ml-reader-toolbar { gap: 2px; padding-left: 4px; padding-right: 4px; }
  #sec-mail .ml-reader-toolbar .ml-tb-btn { min-width: 40px; height: 40px; font-size: 16px; }
  /* horná lišta zoznamu bola širšia než displej — hľadanie odseknuté, šípky mimo */
  #sec-mail .ml-shell { width: 100%; max-width: 100vw; }
  #sec-mail .ml-toolbar { gap: 4px; padding-left: 6px; padding-right: 6px; min-width: 0; }
  #sec-mail .ml-toolbar-search { flex: 1 1 auto; min-width: 0; }
  #sec-mail .ml-toolbar-search input { min-width: 0; width: 100%; font-size: 16px; }
  #sec-mail .ml-toolbar-right { flex: none; }
  #sec-mail .ml-toolbar .ml-tb-btn { min-width: 34px; height: 38px; }
  #sec-mail .ml-toolbar .ml-row-check, #sec-mail .ml-toolbar input[type="checkbox"] { display: none; }
  #sec-mail .ml-tb-sep { margin: 0 2px; }

  /* AI STUDIO: pás priestorov (MP, BA, +) zaberal šírku natrvalo — priestor
     sa prepína v menu (☰ → „Môj priestor"), chat dostane celú šírku. */
  .cbt-shell, .cbt-shell.cbt-no-side, .cbt-shell.cbt-docs-off,
  .cbt-shell.cbt-no-side.cbt-docs-off { grid-template-columns: 0 0 minmax(0, 1fr) 0; }
  .cbt-rail { display: none; }
  #cbInput, #cbHeroInput { font-size: 16px; }   /* iPhone pri písaní nezväčšuje stránku */
}
@media (max-width: 767px) {
  /* Tímové správy: zoznam a prázdne „Vyberte konverzáciu" boli pod sebou každé
     na pol obrazovky (`.dc-list{display:flex}` v pl.css stojí POD mobilným
     pravidlom, ktoré ho malo skryť). Teraz ako aplikácia na správy: najprv
     zoznam na celú obrazovku, otvorená konverzácia tiež na celú. */
  #tmShell.dc-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  #tmShell:not(.conv-open) .dc-list { display: flex !important; position: static; width: auto; box-shadow: none; border-right: 0; }
  #tmShell:not(.conv-open) .dc-main { display: none !important; }
  #tmShell.conv-open .dc-list { display: none !important; }
  #tmShell ~ .dc-mob-fab, #sec-inbox .dc-mob-fab { display: none !important; }
  #tmShell .dc-items { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  #tmShell .dc-list input { font-size: 16px; }
  #tmShell .dc-search { flex: 0 0 auto; }          /* rástlo na tretinu obrazovky */
  #tmShell .dc-items { flex: 1 1 0; min-height: 0; overflow-y: auto; }
}
@media (max-width: 767px) {
  /* Rýchle filtre v pošte mali 22–26 px — na prst malé */
  #sec-mail .pf-chip { height: 34px; padding-left: 12px; padding-right: 12px; }
  #sec-mail .mb-acct, #sec-mail .mb-prehlad { height: 32px; }
  #sec-mail #mbChips button { height: 32px; padding-left: 11px; padding-right: 11px; }
  #sec-chat-beta .cbt-ws { height: 38px; }
}
@media (max-width: 767px) {
  /* Spodná lišta v aplikácii na ploche iPhonu: pod popiskami bolo ~50 bodov
     prázdna (8 px okraj lišty + 8 px okraj tlačidla + celá domovská zóna).
     Popisky idú tesne nad domovskú čiaru, ako v bežných aplikáciách. */
  .bnav { padding-top: 6px; padding-bottom: max(6px, calc(var(--safe-b, env(safe-area-inset-bottom, 0px)) - 24px)); }
  .bnav__btn { padding-top: 6px; padding-bottom: 4px; }
}

/* ── Aplikácia na ploche iPhonu (celá obrazovka) ─────────────────────────────
   Horná lišta je o pás pod hodinami vyššia (var(--safe-t), ~47 bodov), ale
   riadok mriežky pre ňu mal pevných 56 px — lišta prečnievala cez obsah a jeho
   vrch sa nedal doscrollovať. Riadok sa teraz riadi skutočnou výškou lišty. */
.app { grid-template-rows: auto minmax(0, 1fr); }
@media (max-width: 767px) {
  .tm-mob-fab, .in-mob-fab, .pr-mob-fab, .ix-mob-fab { top: calc(var(--top-h) + 12px + var(--safe-t, 0px)); }
}