/* Mobil — do 767 px včetně.
   Tady se rozhoduje, jak vypadá práce v terénu: telefon v jedné ruce,
   tabulka o dvanácti sloupcích na obrazovce širokou jako dlaň. */

/* ── velikost písma ──────────────────────────────────────────────
   Dřív tu stálo `* { font-size: 1.2em }`. `em` se ale počítá z rodiče,
   takže se zvětšení násobilo s každou úrovní zanoření: buňka tabulky
   (body › div › table › tbody › tr › td) skončila skoro na 40 px a na
   obrazovku se vešly dva sloupce. Zvětšení patří na jedno místo. */
body { font-size: 1rem; }

h1 { font-size: 1.5rem; padding: 0.4em 0.3em; }
h1.termTitle { font-size: 1.05rem; }

/* Nadpis přehledu. Na telefonu je to řádek navíc mezi hlavičkou a daty,
   který neříká nic, co by člověk nevěděl — právě na tu ikonu kliknul.
   Značka je na konkrétním nadpisu, ne na všech h1: na detailu nese
   nadpis jméno a číslo termínu, a to informace je. Že se hledá v
   termínech, řekne popisek v poli hledání. */
h1.pageTitle { display: none; }
h2 { font-size: 1.25rem; padding: 0.8em 0.3em 0.3em; }

/* ── hlavička ────────────────────────────────────────────────────
   Bez názvů zbydou samé ikony a ty se rozprostřou po celé šířce:
   palec trefí položku kdekoli ve svém sloupci. Hamburger padl s
   nimi — šest ikon se do lišty vejde i na 360 px, takže není co
   schovávat pod tlačítko a rozbalovat. */
.nav  { flex: 1; }
.menu li { flex: 1; }
.menu a  { width: 100%; padding: 0 4px; }

/* ── tabulky pod sebe ────────────────────────────────────────────
   Sloupce se na úzké obrazovce překlopí do řádků: z jednoho řádku
   tabulky je karta, z každého sloupce v ní jeden řádek — popisek
   vlevo, hodnota vpravo. Popisek si buňka nese v `data-label`,
   hlavička tabulky se schová; opakovat ji u každé karty nemá smysl.

   Platí to na všechny tabulky. Vodorovné rolování je na telefonu
   to nejhorší, co se dá udělat, a tabulka o dvanácti sloupcích ho
   jinak vynutí vždycky. */
table,
table thead,
table tbody,
table tr,
table th,
table td { display: block; }

table thead { display: none; }

table {
    width: auto;
    border: 0;
    border-collapse: collapse;
}

table tr {
    border: 1px solid #444;
    margin: 0 0 0.6em 0;
    padding: 0.15em 0;
}

table td {
    box-sizing: border-box;
    width: auto;
    border: 0;
    padding: 0.3em 0.6em;
    font-size: 0.95rem;
    text-align: right;
    overflow-wrap: anywhere;
}

table td::before {
    content: attr(data-label);
    float: left;
    padding-right: 1em;
    font-weight: bold;
    text-align: left;
    color: var(--grey);
}

/* Prázdná buňka by na kartě zbyla jako osiřelý popisek bez hodnoty. */
table td:empty { display: none; }

/* ── karta člověka ───────────────────────────────────────────────
   Seznam praktikujících se na telefonu nečte po sloupcích, ale po
   lidech: kdo to je a jak se mu ozvat. Jméno je proto nadpis karty
   a kontakty pod ním nesou místo popisku ikonu — slova „E-mail"
   a „Telefon" u adresy a čísla nic nepřidávají a berou půl řádku.
   Oslovení a průvodce na kartě nejsou vůbec; v přehledu je nikdo
   nečte a na desktopu zůstávají.

   Zbytek tabulek se chová dál jako karta „popisek — hodnota", tohle
   platí jen na tabulky se třídou `cards`. */
table.cards td.cellTitle {
    padding: 0.25em 0.6em 0.4em;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: left;
}
table.cards td.cellTitle::before { content: none; }

table.cards td.cellAside { display: none; }

/* Datum vzniku: na řádku se jménem vpravo nahoře, malým písmem. Karta
   je `position: relative`. Napsat/Volat zabírají pravý okraj přes celou
   výšku karty, datum je proto hned vlevo od nich a jméno mu uhýbá. */
table.cards td.cellCreated {
    position: absolute;
    top: 0.55em;
    right: calc(6.6em + 15px);
    width: auto;
    padding: 0;
    font-size: 0.75rem;
    color: var(--grey);
}
table.cards td.cellCreated::before { content: none; }
table.cards td.cellCreated:empty { display: none; }

/* Stav na kartě popisek nepotřebuje — „Stav: vyzváno" říká totéž dvakrát
   a na telefonu to stojí půl řádku. Barva slova stačí, stejně jako
   v tabulce termínů. */
table.cards td.cellState {
    padding: 0 0.6em 0.3em;
    text-align: left;
}
table.cards td.cellState::before { content: none; }

/* Poznámka na kartě popisek nepotřebuje: volný text pod kontakty se
   pozná sám a slovo „Poznámka" před varováním „bez průvodce" by
   tvrdilo něco, co není. */
table.cards td.cellNote {
    padding-left: 0.6em;
    text-align: left;
}
table.cards td.cellNote::before { content: none; }

/* Napsat a zavolat. Drží se u pravého kraje karty a přes všechny její
   řádky — je to akce na celého člověka, ne na jeden údaj. Text karty
   proto vpravo uhýbá, ať mu tlačítka nelezou do e-mailu.

   Kdo nemá e-mail ani telefon, nemá ani tlačítka: buňka zůstane prázdná
   a `td:empty` ji schová. */
table.cards tbody tr {
    position: relative;
    /* Tlačítka jsou mimo tok, takže výšku karty samy nezvětší. Kdyby byla
       karta nižší než ona, přetekla by do sousední — tohle je jejich
       výška plus mezera. */
    min-height: 5.8em;
}
table.cards td.cellTitle { padding-right: 11em; }
table.cards td.cellEmail,
table.cards td.cellPhone,
table.cards td.cellNote { padding-right: 6.4em; }

table.cards td.cellActions {
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
    width: auto;
    padding: 0;
}
table.cards td.cellActions::before { content: none; }

/* Palec potřebuje kolem 44 px. Dvě tlačítka nad sebou se do karty ještě
   vejdou, vedle sebe by ubrala e-mailu tolik místa, že by se zalamoval. */
.cardAction {
    display: block;
    min-width: 5em;
    padding: 0.75em 0.7em;
    margin-bottom: 0.3em;
    color: var(--white);
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}
.cardAction:last-child { margin-bottom: 0; }

table.cards td.cellEmail,
table.cards td.cellPhone {
    padding-left: 1.8em;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Ikona místo popisku. Kreslí se pozadím, stejně jako lupa u hledání —
   kvůli dvěma značkám se nezavádí sada ani font. */
table.cards td.cellEmail::before,
table.cards td.cellPhone::before {
    content: "";
    float: left;
    width: 1.1em;
    height: 1.1em;
    margin-left: -1.7em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
table.cards td.cellEmail::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2385888C' stroke-width='1.4' stroke-linejoin='round'%3E%3Crect x='1.5' y='3.5' width='13' height='9' rx='1.2'/%3E%3Cpath d='m2 4.6 6 4.4 6-4.4'/%3E%3C/svg%3E");
}
table.cards td.cellPhone::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2385888C' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M4.3 2.2h2.2l1 2.9-1.6 1.1a8.5 8.5 0 0 0 3.9 3.9l1.1-1.6 2.9 1v2.2a1.1 1.1 0 0 1-1.2 1.1A11.4 11.4 0 0 1 3.2 3.4a1.1 1.1 0 0 1 1.1-1.2z'/%3E%3C/svg%3E");
}


/* ── karta termínu ───────────────────────────────────────────────
   Termín má dvanáct údajů a pod sebou zabíraly dvě obrazovky na tři
   karty. Řadí se proto do dvojic, které k sobě patří: kontakt pod sebou, svatyně
   a stav, nástup a odjezd, cena a zaplaceno. Nadpis je „Jméno – číslo".
   Poptávka a poznámka jsou pod tím na celou šířku a když chybí, buňka
   je prázdná a `td:empty` ji schová. */
table.termCards tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.8em;
    align-items: baseline;
    min-height: 0;
}
table.termCards td { padding-top: 0.2em; padding-bottom: 0.2em; }
table.termCards td.cellTitle,
table.termCards td.cellEmail,
table.termCards td.cellPhone,
table.termCards td.cellNote { padding-right: 0.6em; }

/* Číslo termínu je v nadpisu tišším písmem, ať jméno zůstane hlavní. */
table.termCards .termNo { font-weight: normal; color: var(--grey); }

/* Řádky jsou očíslované napevno: podle pořadí sloupců v tabulce (stav
   je před svatyní) by se dvojice svatyně a stav rozpadla na dva řádky. */
table.termCards td.cellTitle  { grid-column: 1 / -1; grid-row: 1; }
table.termCards td.cellEmail  { grid-column: 1 / -1; grid-row: 2; }
table.termCards td.cellPhone  { grid-column: 1 / -1; grid-row: 3; }

table.termCards td.cellShrine { grid-column: 1; grid-row: 4; text-align: left; }
table.termCards td.cellState  { grid-column: 2; grid-row: 4; padding: 0.2em 0.6em; text-align: right; }

/* Nástup a odjezd jsou jen data — „Nástup" a „Odjezd" je z kontextu jasné
   a s popiskem se datum s hodinou zalamovalo. */
table.termCards td.cellStart  { grid-column: 1; grid-row: 5; text-align: left; white-space: nowrap; }
table.termCards td.cellEnd    { grid-column: 2; grid-row: 5; white-space: nowrap; }
table.termCards td.cellStart::before,
table.termCards td.cellEnd::before { content: none; }

table.termCards td.cellAmount { grid-column: 1; grid-row: 6; text-align: left !important; }
table.termCards td.cellPaid   { grid-column: 2; grid-row: 6; }

table.termCards td.cellAsked  { grid-column: 1 / -1; grid-row: 7; text-align: left; }
table.termCards td.cellNote   { grid-column: 1 / -1; grid-row: 8; text-align: left; }

/* Popisek u dvojice stojí hned před hodnotou, ne u okraje: „Cena 7 000"
   a „Zaplaceno 0" se čtou jako věta, ne jako tabulka. */
table.termCards td.cellAmount::before,
table.termCards td.cellPaid::before,
table.termCards td.cellAsked::before {
    float: none;
    padding-right: 0.4em;
    font-weight: normal;
}

/* Na podbarvené kartě (svatyně na přehledu) je text černý — popisek se
   musí přizpůsobit, šedá na žluté není vidět. */
table tr.shrineBack td::before { color: inherit; }

/* Karta vydrží podbarvení svatyně i zvýraznění otevřeného termínu —
   barva je na řádku, ne na buňkách. */
table.display > tbody > tr:nth-child(odd) { background-color: rgba(255, 255, 255, 0.04); }
table.display > tbody > tr:nth-child(odd) > * { box-shadow: none; }

/* ── ovládání seznamu ────────────────────────────────────────────
   Hledání na celou šířku. Na telefonu se seznam prochází hledáním
   a rolováním, nic jiného tu nad tabulkou nemá co dělat. */
.tableTop { padding: 0.5em 0; }
.tableFilter { float: none; display: flex; align-items: center; }
/* `flex` přebije pevnou šířku z desktopu — pole zabere celý řádek.

   Vysoké je schválně. Na telefonu se seznam prochází hledáním, ne očima
   po sloupcích, takže je to hlavní ovládací prvek stránky a musí se dát
   trefit palcem: vychází na 55 px, dřív mělo 30. Písmo jde z výchozích
   13 px prohlížeče na 16 — pod šestnáct iOS při klepnutí do pole zvětší
   celou stránku a člověk pak hledá, kam se poděl zbytek seznamu. */
.tableFilter input {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    padding: 1.1em 0.6em 1.1em 2.2em;
    background-size: 18px 18px;
    background-position: 10px center;
    /* Tmavší než stránka, ať je i tohle na první pohled pole, ne tlačítko. */
    background-color: #25262b;
    border-color: #4a4d55;
    border-radius: 4px;
}

/* Hledání zabírá 80 % řádku, zbytek je plus v kroužku (nový záznam).
   Pole se smršťuje jen tam, kde tlačítko je. */
.tableFilter:has(.tableAdd) { justify-content: space-between; }
.tableFilter:has(.tableAdd) input { flex: 0 0 80%; }
.tableAdd {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3em;
    color: var(--white);
}
.tableAdd .ico {
    width: 2.4rem;
    height: 2.4rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* Detail poukazu: Stáhnout (odkaz) vypadá jako tlačítko a Zrušit je červené.
   Spodní akce jdou pod sebe přes celou šířku. */
a.bigAction { text-align: center; text-decoration: none; }
.bigAction-danger { background: #8f2d2d; border-color: #b34a4a; }
.bigAction-danger:active { background: #742323; }
/* Třípolové řádky formuláře poukazu se na telefonu zalomí na dva sloupce. */
.formRowWrap .field { flex: 1 1 calc(50% - 0.3em); }
.formRowWrap .fieldSwitch { flex: 1 1 calc(50% - 0.3em); }
/* Dvě tlačítka vedle sebe (Uložit + Smazat, Stáhnout + Zrušit): každé bere
   polovinu řádku. Samotné tlačítko (poukaz, který nejde zrušit) má celý. */
.voucherBottomActions,
.voucherForm .termActions { flex-direction: row; gap: 0.5em; }
.voucherBottomActions > *,
.voucherForm .termActions > * { flex: 1 1 0; min-width: 0; }
.voucherBottomActions .voucherAction { margin: 0; }
.voucherBottomActions .bigAction,
.voucherForm .termActions .bigAction { width: 100%; margin: 0; }

/* ── tlačítka ─────────────────────────────────────────────────────
   Tlačítko má plochu, ne jen rámeček.

   Na desktopu stačil obtažený obdélník: myš má hover a kurzor se nad
   tlačítkem změní. Na telefonu nic z toho není, a protože i vstupní
   pole jsou obtažený obdélník, vypadalo hledání a „Je to platba na
   8113" úplně stejně — čtyři shodné rámečky pod sebou, ve kterých se
   dalo rozeznat jen podle textu, do kterého se píše a který se mačká.

   Pravidlo je proto jednoduché: co se mačká, má světlejší plochu než
   stránka; do čeho se píše, je tmavší než stránka a nese lupu.

   Záložky (.tabBarLink) plochu nemají schválně — nejsou to tlačítka,
   ale navigace, a filtr je vynechává. */
.bigAction,
.tableMore button,
.calendar-days-edge button,
table.display td button,
table.insert button,
table.insert input[type='submit'] {
    color: #fff;
    font-weight: 600;
    background: #464a55;
    border: 1px solid #5a5f6b;
    border-radius: 4px;
    cursor: pointer;
}
.bigAction:active,
.tableMore button:active,
.calendar-days-edge button:active,
table.display td button:active,
table.insert button:active {
    background: #383b44;
}

/* Palec potřebuje kolem 44 px; na myš stačilo míň. */
.tableMore button { padding: 0.7em 0.95em; margin: 0.15em; }

/* ── formuláře ───────────────────────────────────────────────────
   Popisek nad polem, pole na celou šířku. Dvousloupcové rozvržení
   „popisek | pole" se na 390 px zmáčkne na nečitelnou hromadu. */
table.insert tr { border: 0; margin-bottom: 0.8em; }
table.insert td { text-align: left; padding: 0; font-size: 1rem; }
table.insert td::before { content: none; }
table.insert input,
table.insert select,
table.insert textarea { width: 100%; max-width: 100%; font-size: 1rem; }
table.insert input[type='checkbox'] { width: 1.5em; height: 1.5em; }
/* Přepínač je taky checkbox, ale rozměr má vlastní — zmenšený na čtverec
   by kolečko vyjelo z dráhy přes text vedle. */
table.insert input.switch { width: 3em; height: 1.7em; }
/* Pole na palec: vyšší, s vnitřním okrajem, písmo 16 px — při menším
   Safari na iOS po ťuknutí přiblíží stránku. */
table.insert input:not([type='checkbox']):not([type='hidden']):not([type='submit']),
table.insert select,
.field input[type=text],
.field input[type=date],
.field select {
    min-height: 2.75rem;
    padding: 0.5em 0.6em;
    font-size: 1rem;
    box-sizing: border-box;
}
table.insert textarea,
.field textarea { padding: 0.5em 0.6em; font-size: 1rem; min-height: 5em; box-sizing: border-box; }
table.insert .inlinePair input { flex: 0 0 50%; width: 50%; }
table.insert .inlinePair select { flex: 1 1 auto; width: auto; }
/* Ikona kopírování není tlačítko s plochou, jen větší terč pro palec. */
table.insert .copyField input#phone { width: 12em; }
table.insert button.copyButton,
table.insert button.copyButton:active { width: auto; padding: 0.55em; background: transparent; border: 0; }
table.insert input[type='submit'],
table.insert button { width: auto; padding: 0.5em 1em; }

button.button {
    display: inline-block; width: 90%;
    padding: .5em; margin: .5em;
    font-size: 1.2rem; color: white;
    background-color: royalblue; border-radius: .5em;
}

/* ── kalendář: řádkový ───────────────────────────────────────────
   Na stránce kalendáře se mřížka nekreslí vůbec. Místo ní jde každý
   den na vlastní řádek a dny se dotahují oběma směry, jak se roluje
   (public/js/calendar.js). Mez 767 px je tady i ve skriptu — ten
   podle ní pozná, kterou z obou podob má vůbec načítat.

   Vzhled řádků je ve style.css: tentýž kalendář běží i v popupu
   v detailu termínu, a to na každé šířce. Tady se jen přepíná,
   která podoba stránky kalendáře je vidět. */
.calendar-months { display: none; }
.calendar-days   { display: block; }

/* Popup s kalendářem přes celou obrazovku — v úzkém okně by z něj
   s okraji zbyl proužek. */
.calendarDialog {
    width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    margin: 0; border: 0; border-radius: 0;
}

/* ── kalendář: mřížka ────────────────────────────────────────────
   Mřížka zůstává tam, kde je vložená do jiné stránky — na přehledu
   a v detailu klienta u termínu. I tam jdou dny pod sebe. Prázdné
   dny z okolních měsíců se vynechávají a číslo dne se vrací do
   textového toku — jako štítek v rohu by na plné šířce viselo
   v prázdnu. */
.calendar .calendar-day-head { display: none; }
.calendar .calendar-day.another { display: none; }
.calendar .calendar-day {
    min-height: 0;
    padding: 0.4em 0.6em;
    font-size: 0.95rem;
    white-space: normal;
    border: 0;
    border-bottom: 1px solid #999;
}
.calendar .calendar-date {
    position: static;
    float: left;
    width: auto;
    min-width: 2em;
    margin-right: 0.6em;
}
.calendar .calendar-term { display: block; margin-left: 3em; padding: 2px 4px; }
/* Buňky dne jsou v šabloně dorovnané na stejnou výšku řetízkem
   `&nbsp;<br>`, aby mřížka držela tvar. Pod sebou z toho jsou jen
   prázdné řádky — termíny už jsou blokové a zalomení nepotřebují. */
.calendar .calendar-day br { display: none; }

/* ── záložky jako pevná lišta pod hlavičkou ───────────────────────
   Přepínač stavů (banka, poukazy) i záložky detailu praktikujícího
   drží těsně pod hlavní lištou, i uprostřed dlouhého seznamu. Dřív
   byla u dolního okraje, ale obsluha si na menu dole nezvykla.
   Každá záložka je sloupec: popisek a pod ním počet; přepočet je jen
   ikona. Stránka i kotvy si nahoře nechávají místo pro obě lišty. */
:root { --tabbar-h: 58px; }
body:has(.tabBar) { padding-top: calc(var(--header-h) + var(--tabbar-h)); }
html:has(.tabBar) { scroll-padding-top: calc(var(--header-h) + var(--tabbar-h)); }
.tabBar {
    position: fixed;
    left: 0; right: 0; top: var(--header-h);
    z-index: 99;
    height: var(--tabbar-h);
    gap: 0;
    padding: 0;
    background-color: var(--black);
    box-shadow: 0 1px 5px 0 var(--grey);
}
.tabBarLink, .tabBarAction, .tabBarAction button {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 0.1em;
    height: 100%;
    padding: 0 0.2em;
    width: 100%;
}
.tabBarAction { flex: 0 0 3.2em; margin: 0; }
.tabBarLink.active { box-shadow: inset 0 -3px 0 var(--grey); background-color: rgba(255, 255, 255, 0.14); }
.tabBarLabel { font-size: 0.85rem; white-space: nowrap; }
.tabBarCount { font-size: 1.05rem; font-weight: bold; opacity: 1; }
.tabBarAction .tabBarLabel { display: none; }
.tabBarIcon { display: inline; font-size: 1.4rem; }

/* ── k řešení ────────────────────────────────────────────────────
   Na telefonu je řádek karta: věta, pod ní šedý doplněk, tlačítko
   vpravo dole. Výška na palec, stejně jako u ostatních tlačítek. */
.agenda { padding: 0; max-width: none; }
.agenda li { padding: 0.7em 0.6em; gap: 0.25em 0.6em; }
.agenda li > a { flex: 1 1 100%; font-size: 1.05rem; }
.agenda-when { font-size: 1.05rem; }
.agenda-detail { flex: 1 1 60%; font-size: 0.9rem; }
/* Nástupy, odjezdy a objednávky z webu o pětinu větší — to se na
   telefonu čte nejčastěji. Font na li zvětší i štítky chatky, páru
   a jídla (em). */
.agenda li.agenda-arrival,
.agenda li.agenda-departure,
.agenda li.agenda-order { font-size: 1.2em; }
.agenda li.agenda-arrival > a,
.agenda li.agenda-departure > a,
.agenda li.agenda-order > a { font-size: 1.26rem; }
.agenda li.agenda-arrival .agenda-detail,
.agenda li.agenda-departure .agenda-detail,
.agenda li.agenda-order .agenda-detail { font-size: 1.08rem; }

/* ── rozhodnutí o pohybu z banky ─────────────────────────────────
   Na telefonu má být na první pohled vidět, co se s platbou dá udělat.
   Kvůli tomu se na detail chodí, takže tlačítka zabírají celý řádek
   a jsou vysoká na palec — ne schovaná mezi textem jako na desktopu.

   Tlumené („Vyřízeno", „Vrátit") vypadá slabší schválně: nezakládá
   platbu, jen pohyb schová, a nemá si říkat o kliknutí. */
.bigAction {
    display: block;
    width: 100%;
    padding: 0.95em 0.8em;
    margin: 0.5em 0;
    font-size: 1.05rem;
}
/* Tlumené („Vyřízeno", „Vrátit") je pořád plocha, jen tmavší: taky se
   mačká, ale nemá si o to říkat. */
.bigAction-quiet {
    color: var(--grey);
    font-weight: normal;
    background: #383b44;
    border-color: #474b56;
}
.bigAction-quiet:active { background: #2e3138; }

/* Hledání termínu a poukazu. Na telefonu je to jediná cesta, jak platbu
   zařadit jinam, než co nabídl párovač — pole proto zabírá celou šířku
   a má šestnáctku, aby iOS při klepnutí stránku nepřiblížil.

   U poukazu je to dokonce hlavní cesta, ne záloha: bez variabilního
   symbolu se poukaz pozná jen podle jména, a to na výpisu patří plátci,
   ne obdarovanému. */
.termPicker input,
.voucherPicker input {
    width: 100%;
    padding: 0.9em 0.7em 0.9em 2.4em;
    font-size: 1rem;
    color: var(--white);
    /* Zapuštěné a s lupou — stejně jako hledání nad každým seznamem.
       Je to jediná ikona v aplikaci, tak se kreslí rovnou tady. */
    background-color: #25262b;
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23aaa' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6'/%3E%3Cpath d='M10.2 10.2 14 14'/%3E%3C/svg%3E");
    border: 1px solid #4a4d55;
    border-radius: 4px;
}
.termPicker .agenda,
.voucherPicker .agenda { margin-top: 0.5em; }

/* Nalezené řádky jsou odsazené doprava. Pod polem, do kterého se píše,
   tak vzniká viditelný blok „tohle jsem našel" — bez odsazení splývaly
   s nabídkou párovače nad nimi a nebylo poznat, co je návrh systému
   a co odpověď na to, co obsluha napsala. */
.pickerResults li {
    margin-left: 30px;
    /* Řádky naskakují postupně (delay dává JS po 100 ms), ať je vidět,
       že se dotahují, a ne že se stránka jednou zasekla a pak vysypala
       všechno najednou. */
    animation: pickerIn 220ms ease-out both;
}

/* Nadpis nalezeného řádku je o desetinu menší než v přehledu „K řešení".
   Nese dvě jména („Pro Jana Nováková od Petr Novák") a odsazení mu vzalo
   30 px — v původní velikosti se lámal na dva řádky. */
.pickerResults li > a { font-size: 0.945rem; }

@keyframes pickerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Kdo má v systému vypnuté animace, dostane řádky rovnou. */
@media (prefers-reduced-motion: reduce) {
    .pickerResults li { animation: none; }
}

/* `.agenda li` je flexbox; bez tohohle by si formulář vzal jen
   šířku textu a tlačítko by nebylo přes celý řádek. */
.agenda li form { flex: 1 1 100%; }

/* ── archiv pošty ────────────────────────────────────────────────
   Tělo zprávy je předformátovaný text, ten se zalomit musí. */
.emails td[data-label="Předmět"], .emails details, .emails summary { text-align: left; }
.emails .email-body { text-align: left;  font-size: 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.tableBox { max-width: 100%; }

/* ── poukaz: peníze ──────────────────────────────────────────────
   Kolik bylo objednáno, kolik dorazilo, kolik chybí. Na telefonu je to
   jediné, kvůli čemu se dárkový poukaz otevírá, takže to stojí hned pod
   nadpisem. Číslo je nad slovem: na 375 px se v úzkém sloupci přečte
   nejdřív ono. */
.voucherMoney {
    display: flex;
    gap: 0.5em;
    padding: 0.7em 0.3em;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
}
.voucherMoney span { flex: 1; font-size: 0.85rem; line-height: 1.3; }
.voucherMoney b { display: block; font-size: 1.15rem; }

/* Formulář kolem tlačítka akce je blokový sám o sobě, ale .bigAction
   potřebuje, aby mu rodič nezúžil šířku na text. */
.voucherAction { display: block; }

/* ── detail praktikujícího ───────────────────────────────────────────
   Lišta záložek dole bere výšku z banky (.tabBar výš). Velká tlačítka
   akcí jdou pod sebe přes celou šířku. */
.tabBarFixed .tabBarCount { font-size: 0.95rem; }
body:has(.tabBarFixed) { padding-bottom: calc(var(--tabbar-h) + 0.5em); }
.termActions { flex-direction: column; }
.clientDetail .termActions .bigAction { display: block; width: 100%; margin: 0; padding: 0.9em; text-align: center; }
.termActions .pillAction { justify-content: center; width: 100%; box-sizing: border-box; font-size: 1.05rem; }
.formRow .bigAction { width: 100%; }
/* Nástup, odjezd a kalendář na jednom řádku: z tlačítka zbývá jen ikona,
   text by pole zmáčkl. Mezery mezi trojicí jsou o 6 px širší než jinde,
   ať se pole a ikona na prst nelepí. */
.dateRow { gap: calc(0.6em + 6px); }
/* Safari na iOS drží u pole s datem vnitřní šířku nativního prvku a
   width: 100 % nerespektuje — pole pak přeteče ze svého .field doprava
   a mezeru k sousedovi zakryje. Bez nativního vzhledu šířku poslouchá,
   ale přijde i o rámeček, pozadí a barvu písma, takže se mu tu dá
   totéž, co mají textová pole: stejná výška, rámeček, písmo vlevo. */
.field input[type=date] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 2.75rem;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 1px solid #5a5f6b;
    border-radius: 6px;
}
.dateRowAction .dateRowLabel { display: none; }
.dateRowAction .pillAction { padding: 0.45em 0.7em; }

/* Šířky polí ve formuláři (detail platby): poznámka přes celou šířku. */
table.insert input.fullWidth { width: 100%; }

/* Dvě pole vedle sebe, každé s popiskem nad sebou, na půl řádku. */
.fieldPair { display: flex; gap: 0.75em; }
.fieldPair > div { flex: 1 1 0; min-width: 0; }
.fieldPair label { display: block; }
table.insert .fieldPair input { width: 100%; box-sizing: border-box; }

/* Patička (web · uživatelé · odhlásit) na telefonu nepřekáží — skrytá. */
#footer { display: none; }