/*
 * Mobilní úpravy dtb (jen displeje do 767 px; desktop a tablety zůstávají beze změny).
 *
 * Proč: dtb běží na Bootstrapu 2.3.1 bez responzivní části (default.css obsahuje jen @media print), kontejner má pevných
 * 940 px a mřížka span* je pevná. iOS Safari proto stránku zmenší na šířku obsahu (drobný text, useknuté menu).
 * Zdroj LESS v repozitáři není, proto je tohle doplňkový soubor načítaný za default.css (viz @layout-base.latte).
 */
@media (max-width: 767px) {

    /* ── Základ ─────────────────────────────────────────────────────────────── */
    html { overflow-x: hidden; }                                  /* pojistka proti zmenšení stránky; jen na html, aby body nebylo scroll kontejnerem */
    body { max-width: 100%; }
    body { -webkit-text-size-adjust: 100%; }
    img { max-width: 100%; }

    /* ── Mřížka: pevná šířka → pružná, sloupce pod sebe ─────────────────────── */
    .container, .container-fluid,
    .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
        width: auto !important; max-width: 100%; padding-left: 10px; padding-right: 10px; box-sizing: border-box;
    }
    .row, .row-fluid { margin-left: 0 !important; margin-right: 0 !important; }
    [class*="span"], .row-fluid [class*="span"] {
        float: none !important; display: block; width: auto !important; min-width: 0;
        margin-left: 0 !important; box-sizing: border-box;
    }
    [class*="offset"], .row-fluid [class*="offset"] { margin-left: 0 !important; }
    #content { padding: 14px 10px !important; }
    .box { margin-bottom: 12px; }

    /* ── Horní menu: jeden řádek, vodorovně posuvné ─────────────────────────── */
    .navbar-inner { padding-left: 0; padding-right: 0; }
    .navbar .container { padding-left: 0; padding-right: 0; }
    .header-nav { display: flex !important; align-items: stretch; width: 100%; border-left: 0; border-right: 0; }
    .header-nav > ul.main-menu {
        flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; float: none; margin: 0;
        overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .header-nav > ul.main-menu::-webkit-scrollbar { display: none; }
    .header-nav > ul.main-menu > li { float: none; flex: 0 0 auto; display: flex; align-items: stretch; }   /* položka + její podmenu v jedné řadě */
    .header-nav > ul.pull-right { flex: 0 0 auto; float: none; margin: 0; }      /* uživatelské menu zůstává mimo posuvnou část (rozbalovací nabídka se neořízne) */
    /* podmenu „Osoby" (hover, absolutní, 1190 px) → na dotyku inline za položkou v posuvném řádku, aby šlo dojít na všechny stránky */
    .header-nav > ul.main-menu > li > div.subnav {
        display: flex !important; position: static !important; width: auto !important; top: auto; left: auto;
        background: transparent !important; align-items: stretch;
    }
    .header-nav .subnav ul { display: flex; flex-wrap: nowrap; float: none !important; margin: 0; }
    .header-nav .subnav ul li { float: none; flex: 0 0 auto; }
    .header-nav .subnav ul li a { white-space: nowrap; padding: 12px 12px; }
    .header-nav .btn { padding: 12px 14px; white-space: nowrap; }

    /* ── Tabulky: posuvné v mezích stránky ──────────────────────────────────── */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .table-scroll > table { max-width: none; }

    /* Přehled dotazníku: tabulka v .table-scroll se posouvá vodorovně, barvy stavu řádků zůstávají */
    table.q-responses { font-size: 12px !important; }

    /* ── Formuláře a tlačítka (iOS při polích pod 16 px přibližuje stránku) ─── */
    input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date],
    input[type=password], input[type=search], input[type=url], select, textarea {
        font-size: 16px !important; max-width: 100%; box-sizing: border-box; min-height: 44px; height: auto; padding-top: 8px; padding-bottom: 8px;
    }
    input[class*="span"], select[class*="span"], textarea[class*="span"],
    .input-large, .input-xlarge, .input-xxlarge { width: 100% !important; }
    .btn:not(.btn-mini):not(.btn-small) { min-height: 44px; }

    /* Radio a checkboxy: větší klepací plocha a žádné odsazení druhé a dalších voleb.
       Bootstrap 2 dává `.radio.inline + .radio.inline { margin-left: 10px }`; po přepnutí na svislé řazení to rozhazovalo zarovnání. */
    label.radio, label.checkbox { padding-left: 34px !important; padding-top: 10px; padding-bottom: 6px; min-height: 44px; box-sizing: border-box; }
    .radio input[type="radio"], .checkbox input[type="checkbox"] { width: 22px; height: 22px; margin-left: -34px !important; margin-top: 1px; }
    .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline,
    label.radio.inline + label.radio.inline, label.checkbox.inline + label.checkbox.inline { margin-left: 0 !important; }

    /* ── Dialogy a překryvy ─────────────────────────────────────────────────── */
    .modal { width: auto !important; left: 8px !important; right: 8px !important; top: 8px !important; margin-left: 0 !important; }
    .modal-body { max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .photoSelection .photoSelectionIn { width: auto; left: 8px; right: 8px; margin-left: 0; height: 80%; top: 8%; overflow-y: auto; }

    /* ── Patička (inline margin-top: 1000px v layoutu) ──────────────────────── */
    footer { margin-top: 24px !important; padding: 10px !important; }
    footer .small { font-size: 11px; }

    /* ── Detail výběru: karty osob ve dvou sloupcích ────────────────────────── */
    #full-width, #shortlist { padding: 0 !important; justify-content: space-between; }
    #full-width .person, #shortlist .person {
        float: none; width: calc(50% - 6px); height: 270px; margin-left: 0; margin-top: 12px;
    }
    #full-width .person h2, #shortlist .person h2 { font-size: 12px; padding: 6px 4px; }
    /* akční tlačítka na kartě se na dotyku zobrazují jen po hoveru → na mobilu vždy viditelná */
    #full-width .person .person-image .person-actions a:not(.setkarta),
    #shortlist .person .person-image .person-actions a:not(.setkarta) { opacity: 1; padding: 11px 13px; }
    .shortlist-nav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .shortlist-nav .nav-pills { display: flex; flex-wrap: nowrap; }
    .shortlist-nav .nav-pills > li > a { font-size: 14px; line-height: 20px; padding: 7px 12px; }
    .shortlist-nav .nav-pills > li { flex: 0 0 auto; float: none; }
}