/* ═══════════════════════════════════════════════════════════════════
   MOBIL — společné opravy pro celý web
   Načítá se jako POSLEDNÍ, takže přebíjí starší stylopisy.

   Vzniklo ze skenu (26. 7. 2026): z 88 stránek s vlastním stylem jich
   31 nemělo jediné @media pravidlo a 12 mělo tabulku, která na telefonu
   přetekla ven ze stránky. Opravovat to po jedné stránce by znamenalo
   88 zásahů — tohle řeší systémové příčiny na jednom místě.

   Co tu NENÍ: barvy a vzhled konkrétních stránek. Tenhle soubor jen
   zajišťuje, že se web na telefonu dá používat.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Nic nesmí přetéct do strany ─────────────────────────────────
   Nejčastější důvod, proč jde stránka na telefonu posouvat doprava
   a text končí mimo obrazovku. */
@media (max-width: 780px) {
    html, body { overflow-x: hidden; max-width: 100%; }

    /* obrázky, videa a iframe se vejdou vždy */
    img, video, canvas, iframe, embed, object, svg {
        max-width: 100%;
        height: auto;
    }

    /* dlouhé odkazy a nezlomitelné řetězce nerozšíří stránku */
    p, li, td, th, dd, dt, blockquote, .info, code, pre {
        overflow-wrap: anywhere;
    }
    pre { white-space: pre-wrap; }
}

/* ── 2. Tlačítka ────────────────────────────────────────────────────
   `global.css` má pod 768 px `button { width: 100% }` s holým selektorem.
   Zasáhne to úplně každé tlačítko včetně těch ve flex řádcích, kde pak
   vytlačí vedlejší vstupní pole na nulovou šířku (přesně tohle rozbilo
   AI playground: obří tlačítko a žádné pole na psaní).

   Vracíme rozumné chování: roztažené jsou jen ty, pro které to pravidlo
   evidentně vzniklo. `body` navíc zvyšuje specificitu, takže to přebije
   původní pravidlo bez ohledu na pořadí souborů.                      */
@media (max-width: 768px) {
    body button { width: auto; }

    /* Na celou šířku jen hlavní akce — u těch to dává smysl a lépe se trefují. */
    body .btn,
    body .btn-primary,
    body .twitch-login-btn,
    body button[type="submit"].plna-sirka { width: 100%; }

    /* …ale NE malá tlačítka a NE ta, co stojí vedle sebe v řádku.
       Stránky s alerty (alerty, bits_alerts, charity_donate, gift_subs_alert,
       sound_alerty, donation_settings…) si `.btn` stylují samy a používají
       `.btn-sm` pro drobná tlačítka typu „Smazat" u položky v seznamu.
       Roztáhnout je přes celou šířku vypadá jako chyba. */
    body .btn-sm,
    body .btn-row .btn,
    body .btn-row button,
    body .tts-btn-sm,
    body .sh-btn-sm,
    body .md-btn-del,
    body .ob-btn-sm { width: auto; }
}

/* ── 3. Tabulky ─────────────────────────────────────────────────────
   Tabulka se na úzkém displeji nemá kam vejít. Místo mačkání sloupců
   ji necháme scrollovat vodorovně uvnitř vlastního rámečku — stránka
   jako celek se posouvat nezačne. */
@media (max-width: 780px) {
    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table thead, table tbody, table tfoot, table tr { width: max-content; min-width: 100%; }
    table td, table th { white-space: nowrap; }

    /* tabulky, které si scroll řeší samy, necháme být */
    .tabulka-obal table,
    .md-table-wrap table,
    .ob-table-wrap table { display: table; }
}

/* ── 4. Formulářové prvky ───────────────────────────────────────────
   16 px není estetika, ale nutnost: při menším písmu iOS Safari po
   kliknutí do pole automaticky přiblíží celou stránku a už se nevrátí. */
@media (max-width: 780px) {
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="date"], input[type="time"],
    select, textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* nativní ovladače se na dotyk hůř trefují */
    input[type="checkbox"], input[type="radio"] { min-width: 18px; min-height: 18px; }
    input[type="range"] { width: 100%; }
}

/* ── 5. Pevné šířky ze starších stylopisů ───────────────────────────
   Řada souborů (alerty.css, bodiky.css, prikazy.css, tts.css a další)
   má natvrdo `width: 800px`. Na telefonu to znamená vodorovné posouvání. */
@media (max-width: 780px) {
    [class*="container"], [class*="wrapper"], [class*="-wrap"],
    [class*="obal"], [class*="panel"], [class*="karta"], [class*="card"] {
        max-width: 100%;
    }
}

/* ── 5b. Dvou a třísloupcové mřížky na úzkém displeji ───────────────
   Stránky, které si vzhled řeší vlastním <style> a nemají @media.
   Jde o mřížky s pevným počtem sloupců (`1fr 1fr`, `1fr 1fr 1fr`) —
   ty se samy nezalomí a obsah se v nich na telefonu zmáčkne na proužky.

   Seznam vznikl vytažením konkrétních selektorů ze zdrojáků, ne odhadem.
   Kdyby se přidala další stránka se stejným vzorem, patří sem taky.      */
@media (max-width: 620px) {
    .as-two-col,                          /* alert_style */
    .g-two-col, .g-three-col, .g-colors-grid,   /* goals_settings */
    .ms-grid-2, .ms-grid-3,               /* media_share */
    .s-two-col, .s-three-col, .s-colors-grid,   /* subathon_settings */
    .obs-two-col, .obs-three-col,         /* tabulky_obs */
    .adc-body {                           /* ad_detect (bylo 340px 1fr) */
        grid-template-columns: 1fr !important;
    }
}

/* ── 6. Pohodlnější odsazení ────────────────────────────────────────
   `body { padding: 20px }` + `.hlavnibody { padding: 20px }` ubere
   na úzkém displeji 80 px šířky, což je u telefonu přes pětinu. */
@media (max-width: 560px) {
    body { padding: 10px !important; }
    .hlavnibody { padding: 12px !important; }
}

/* ── 7. Dotykové cíle ───────────────────────────────────────────────
   Odkazy a tlačítka pod ~40 px se špatně trefují prstem. */
@media (max-width: 780px) {
    button, .btn, a.btn, [role="button"] { min-height: 40px; }
}