/* ══════════════════════════════════════════════════════════════════════════
   Fleeto — veľkosť ovládacích prvkov
   ══════════════════════════════════════════════════════════════════════════

   Jediné miesto v aplikácii, kde sa určuje, aké veľké sú tlačidlá, polia
   a klikacie riadky. Načítava sa AŽ ZA `biga.css`.

   ROZHODUJE VSTUPNÉ ZARIADENIE, NIE ŠÍRKA OKNA

   Fleeto vzniklo pre tablet, kde technik klepe prstom v rukavici, a tomu
   zodpovedali ciele 44/56/76 px. Na počítači s myšou z toho vznikol nepomer,
   ktorý bolo vidno na prvý pohľad: text v tlačidle mal 20 px — presne toľko
   ako NADPIS STRÁNKY a o 43 % viac než text v obsahu (14 px). Tri veľké
   pilulky vedľa seba potom pôsobili ako celá obrazovka.

   Rozlišovať podľa `min-width` by nepomohlo: tablet v albume má tiež širokú
   obrazovku a prst sa nezmenší. `(hover: none), (pointer: coarse)` sa pýta na
   to, čo naozaj rozhoduje — či sa do prvku mieri prstom, alebo kurzorom. Obe
   podmienky sú tam zámerne: iPad s pripojenou myšou hlási `pointer: fine`,
   ale používa sa aj prstom, takže ho musí chytiť tá prvá.

   Základ je hustý (myš) a dotyk ho zväčšuje.

   PREČO SÚ TU AJ NÁZVY TRIED Z JEDNOTLIVÝCH OBRAZOVIEK

   Tieto rozmery boli pôvodne roztrúsené v desiatich šablónach v `@push`
   blokoch — a tie sa vkladajú až za stylesheety, takže prebíjali všetko
   ostatné. Zmena veľkosti na jednom mieste sa tak neprejavila a vyzeralo to,
   že pravidlo neplatí. Sú preto zhromaždené sem, aj za cenu toho, že tento
   súbor pozná mená z konkrétnych obrazoviek.
   ══════════════════════════════════════════════════════════════════════════ */

/* Ikona nesmie určovať výšku tlačidla.
   Tlačidlo s ikonou vychádzalo o 3 px vyššie než tlačidlo bez nej a vedľa
   seba v riadku to vyzerá ako nezarovnanie. Príčinou je riadkový box: písmo
   Tabler Icons doň prispieva vlastnou výškou. Prvý pokus (`line-height: 1`
   plus `vertical-align`) to zhoršil — posun ikony nadol riadkový box ešte
   zväčšil. Rieši to až to, že sa obsah tlačidla neukladá do riadkového boxu,
   ale do flexu; potom o výške rozhoduje výplň a nič iné. */
.btn { display: inline-flex; align-items: center; justify-content: center; }
.btn > .ti, .btn > i[class*="ti-"] { line-height: 1; }

/* ── Myš (základ) ─────────────────────────────────────────────────────── */

.btn    { min-height: 36px; font-size: .875rem;  padding: .4375rem 1rem;  line-height: 1.4; }
.btn-sm { min-height: 30px; font-size: .8125rem; padding: .25rem .75rem;  line-height: 1.4; }
.btn-lg { min-height: 42px; font-size: .9375rem; padding: .5rem 1.25rem;  line-height: 1.4; }

.form-control, .form-select { min-height: 36px; font-size: .875rem; }
/* Výplň aj riadkovanie sa nastavujú výslovne, nie len `min-height`. Pole
   hľadania a tlačidlo „Hľadať" stoja vedľa seba ako súrodenci, nie v jednej
   skupine — Bootstrap im teda výšku nezrovná a rozdiel 6 px medzi nimi je
   na prvý pohľad vidieť ako nedorobok. */
.form-control-lg, .form-select-lg,
.input-group-lg > .form-control, .input-group-lg > .form-select,
.input-group-lg > .input-group-text {
    min-height: 42px; font-size: .9375rem; padding: .5rem 1rem; line-height: 1.4;
}

/* Jediná primárna akcia na detaile výpožičky. Aj v hustom režime zostáva
   zjavne najväčším prvkom na obrazovke — to je celý zmysel tej karty. */
.primarna-akcia .btn { min-height: 56px; font-size: 1.0625rem; }

.akcie-stavu .btn        { min-height: 40px; }
.wiz-lista .btn          { min-height: 42px; }
.wiz-krok                { min-height: 40px; }
.pole-terminu            { min-height: 40px; font-size: 1rem; }
.nav-tabs .nav-link      { min-height: 38px; display: flex; align-items: center; }
#zoznam-vozidiel .list-group-item { min-height: 44px; }

/* ── Dotyk ────────────────────────────────────────────────────────────── */

@media (hover: none), (pointer: coarse) {

    /* Ruka v rukavici sa do 36 px netrafí. Tieto čísla sú z pôvodného
       návrhu pre dielňu a overili sa na tablete. */
    .btn    { min-height: 44px; font-size: 1rem;    padding: .5rem 1.25rem;    line-height: 1.5; }
    .btn-sm { min-height: 38px; font-size: .875rem; padding: .375rem 1rem;     line-height: 1.5; }
    .btn-lg { min-height: 56px; font-size: 1.25rem; padding: .6875rem 1.5rem;  line-height: 1.5; }

    .form-control, .form-select { min-height: 44px; font-size: 1rem; }
    .form-control-lg, .form-select-lg,
    .input-group-lg > .form-control, .input-group-lg > .form-select,
    .input-group-lg > .input-group-text {
        min-height: 56px; font-size: 1.25rem; padding: .6875rem 1.25rem; line-height: 1.5;
    }

    /* Filtre nad zoznamami sú pri dotyku o kúsok väčšie než bežné ovládanie —
       klepe sa do nich často a naslepo. Varianty `-lg` sú z toho VYŇATÉ:
       `.filtre .btn` má vyššiu špecifickosť než `.btn-lg`, takže bez tejto
       výnimky zmenší tlačidlo „Hľadať" pod pole, vedľa ktorého stojí, a
       dvojica prestane lícovať. */
    .filtre .btn:not(.btn-lg),
    .filtre .form-select:not(.form-select-lg),
    .filtre .form-control:not(.form-control-lg) { min-height: 48px; }

    .primarna-akcia .btn { min-height: 76px; font-size: 1.375rem; }

    .akcie-stavu .btn        { min-height: 56px; }
    .wiz-lista .btn          { min-height: 56px; }
    .wiz-krok                { min-height: 48px; }
    .pole-terminu            { min-height: 56px; font-size: 1.125rem; }
    .nav-tabs .nav-link      { min-height: 48px; }
    #zoznam-vozidiel .list-group-item { min-height: 56px; }

    .navbar-vertical .nav-link { min-height: 48px; }
    table.table td .btn-sm     { min-height: 38px; }
}