/* Desktop — od 768 px výš. */

#transaction {width: 600px;height:400px;}

div.loginForm {max-width: 500px;margin: 2em 0 2em 0;}

table.display td{
    text-align: left;
}

#clientTerms {width:45% !important;}
#clientPayments {width:45% !important;}
table.anchor tbody tr:hover{cursor:pointer;text-decoration: underline;}

table.insert{ width:45%;}
table.insert input[type=text] {width: 200px}
table.insert input[name=note] {width: 90%}
table.insert input[type=datetime-local] {font-size: 1.3em}
table.insert input[type=date] {font-size: 1.3em}
table.insert input[type=submit] {padding: 0.2em;margin: 0.2em;font-size: 1em}
table.insert textarea{ width:500px;font-size: 1.2em;}
table.insert td{ text-align: left;}
table.insert td:first-child{ width: 17%;}

table.thinTable {
    max-width:600px;
}


/* Značky, které patří jen na kartu na telefonu (např. „bez průvodce"
   u praktikujícího). Na desktopu tutéž věc říká prázdný sloupec. */
.onlyCard { display: none; }

/* ── menu ───────────────────────────────────────────────────────────
   Vedle ikony se ukazuje i název položky: sama ikona je zkratka, kterou
   se člověk musí naučit, s názvem se lišta přečte napoprvé.

   Až od 980 px. Položek je sedm a na přehledu praktikujících a poukazů
   přibývá osmá („nový"); s názvy zaberou 928 px i s logem a na užší
   obrazovce by poslední vyjela z lišty ven. Lišta je `fixed`, takže by
   se k ní nedalo ani dorolovat — položka by prostě zmizela. Mezi 768
   a 980 px proto zůstávají samé ikony, stejně jako na telefonu.
   Hranici je potřeba přeměřit pokaždé, když v liště přibude položka. */
@media (min-width: 980px) {
    .menu a span { display: inline; }
}

/* Na myš stačí klidnější zvýraznění než na dotyk. */
.menu a:hover {
    background-color: transparent;
    color: var(--grey);
}

/* Na položce, kde člověk je, hover nesmí zvýraznění smazat — jinak
   zmizí zrovna ve chvíli, kdy na ni najede myší. */
.menu a.active:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: white;
}

#ajaxCalendar { position:absolute;right:30px;top:100px;max-width:800px;}
.ajaxCalendarYear { position:relative;max-width:800px;margin:5px;float:left;display: inline}

#content h2 {padding-top: 1em;padding-left: 0.3em; padding-bottom: 0.3em;}

/* ── geometrie tabulek ──────────────────────────────────────────────
   Rozměry mřížky patří sem, ne do společného style.css: na mobilu se
   tabulka na mřížku nekreslí vůbec — řádky se překlápějí pod sebe.
   Kdyby to stálo ve společném souboru, musel by to mobile.css jen
   pracně přebíjet. Barvy, proužkování a ovládací prvky společné
   zůstávají, ty platí v obou režimech.

   Hodnoty jsou z jquery.dataTables.css 1.12.1 — vzhled, na který je
   is2 zvyklé. */
table.display {
    border-collapse: separate;
    border-spacing: 0;
    clear: both;
    border-bottom: 1px solid white;
    /* Sloupce se rozdělují podle obsahu. Globální `table-layout: fixed`
       by je dal rovným dílem a e-mailům by zbyla dvanáctina šířky.
       Kde jsou šířky napsané ručně (přehled), zapne se `fixed` zpátky. */
    table-layout: auto;
}
table.display.fixed { table-layout: fixed; }

/* DataTables počítaly šířku sloupce bez paddingu. Šířky v hlavičce
   přehledu jsou na to zvyklé, takže content-box zůstává. */
table.display th,
table.display td { box-sizing: content-box; }

table.display thead th {
    padding: 10px;
    font-weight: bold;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
table.display tbody td {
    padding: 8px 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}
table.display tbody tr:first-child td { border-top: none; }

table.display.compact thead th { padding: 4px 17px; }
table.display.compact tbody td  { padding: 4px; }