.isDeleted1 {color:darkred;}
.isActive0 {color:darkred;}

.shrine1 { color: #FFFF55;}
.shrine2 { color: #5555FF;}
.shrine3 { color: #55FF55;}
.shrine4 { color: #555555;}
.shrine5 { color: #F5F5F5;}
.shrine6 { color: #FF5555;}

.guide1 { color: #FF5555;}
.guide2 { color: #8888FF;}
.guide3 { color: #55FF55;}
.guide4 { color: #D4D479;}
.guide5 { color: #D1D1D1;}

.shrineBack1 { background-color: #FFFF55 !important;color:black !important;font-weight: bold;}
.shrineBack2 { background-color: #5555FF !important;color:black !important;font-weight: bold;}
.shrineBack3 { background-color: #55FF55 !important;color:black !important;font-weight: bold;}
.shrineBack4 { background-color: #555555 !important;color:black !important;font-weight: bold;}
.shrineBack5 { background-color: #F5F5F5 !important;color:black !important;font-weight: bold;}
.shrineBack6 { background-color: #FF5555 !important;color:black !important;font-weight: bold;}

.state1 { color: #FF5555;}
.state2 { color: #D4D479;}
.state3 { color: #cc8c00;}
.state4 { color: grey;}
.state5 { color: pink;}
.state6 { color: #55FF55;}
.state7 { color: red;}

.amount {text-align: right !important}

.googleLogin img {width:20%;}
.googleLogin img:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.flash {padding:2em;font-weight: bold}

span.pcts {font-size: 50%;vertical-align: top;min-width:2.6em;display: inline-block;}
span.red {color:red}
span.green {color:green}

table.insert td{ padding: 0.3em;}

h1 {padding:0.5em;}

table {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
}

table tr {
    /*background-color: #f8f8f8;*/
    border: 1px solid #ddd;
    padding: .35em;
}

table th,
table td {
    padding: .625em;
    text-align: center;
}

table th {
    font-size: .85em;
    letter-spacing: .1em;
}

:root{
    --white: #c9c9c9;
    --black: #36383F;
    --grey: #85888C;
    /* Oranžová ze značky. Je to `--barva-akcent` z lecba-tmou.cz
       (plugin lecbatmou-agent, tmarka.css), ať administrace svítí
       stejně jako web. */
    --orange: #da7c0c;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "Poppins", sans-serif;
    color: var(--white);
}

/* ── hlavička ───────────────────────────────────────────────────────────
   Vodorovná lišta u horního okraje: vlevo logo, za ním položky menu.
   Každá položka je ikona; na širší obrazovce k ní přibude i název —
   to řeší desktop.css, tady je společný, ikonový základ.

   Lišta je `fixed`, ne `sticky`: sticky se odlepí, jakmile má některý
   předek `overflow`, a menu musí být po ruce i uprostřed dlouhého
   seznamu. Za to se platí tím, že lišta vypadne z toku a nedrží pod
   sebou místo — vrací ho `padding-top` na body. Obojí se počítá
   z jedné hodnoty, aby se to nemohlo rozejít. */
:root { --header-h: 52px; }

body { padding-top: var(--header-h); }

/* Odkaz na kotvu jinak skončí pod lištou. */
html { scroll-padding-top: var(--header-h); }

/* Místo pro posuvník je vyhrazené vždy. Jinak se krátká stránka (záložka
   Platby) rozšíří o jeho šířku a pevné lišty nahoře i dole poskočí do
   strany, když se přepne na dlouhou (Praktikující). */
html { scrollbar-gutter: stable; }

.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: var(--header-h);
    background-color: var(--black);
    box-shadow: 1px 1px 5px 0 var(--grey);
}

.header ul { list-style: none; }
.header a  { text-decoration: none; }

/* Logo. Domeček odkazuje na rozcestník — vedle ikonového menu by název
   domény byl jen šum, ten je v titulku okna a v patičce. */
.logo {
    display: flex;
    flex: none;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    color: var(--white);
}
/* Značka je větší než ikony menu. Je to obrázek s přechody, ne kresba
   tahem — na velikosti ikony by z ní byla jen barevná skvrna. */
.logo .ico { width: 36px; height: 36px; }
.logo:hover { color: white; }

/* Menu. Položky vedle sebe, každá na celou výšku lišty, ať se dá
   trefit kdekoli ve sloupci nad ikonou. */
.nav { min-width: 0; height: 100%; }

.menu {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 0 12px;
    color: var(--white);
    white-space: nowrap;
}

.menu a:hover { background-color: var(--grey); }

/* Místo, kde člověk právě je. Světlá vrstva přes tmavou lištu a
   proužek pod položkou — táž průsvitná vrstva, jakou mají proužkované
   tabulky, jen sytější, aby vydržela i vedle položky pod myší. */
.menu a.active,
.logo.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 -3px 0 var(--grey);
}

/* Název položky se ukazuje až na desktopu (desktop.css). */
.menu a span { display: none; }

/* Ikony. Kreslí se tahem v barvě textu, takže zesvětlají i ztmavnou
   spolu s ním a nepotřebují vlastní barvu ani druhou sadu pro hover.
   Tvary jsou v <symbol> na začátku stránky, sem patří jen rozměr. */
.ico {
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

a:link, a:visited {
    color: inherit;
}

.calendarAjax {border-spacing: 0}
td.calendar-day	{ position:relative;text-align: left;min-height:80px; font-size:0.65em; vertical-align:top;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
td.calendar-day { padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }
td.calendar-day:hover	{ background:#eceff5; }
td.another {opacity: 50%}
td.calendar-day-head { font-weight:bold; text-align:center; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
td.calendar-day span {
    z-index:1;background:#999; padding:3px; color:#fff; font-weight:bold; float:right; margin:-3px -3px 0 0; width:15px; text-align:center;
    position:absolute;top:3px;right:4px;
}
td.calendar-day a {padding:1px;margin-top: 1px;color:black;text-decoration: none;display: inline-block;z-index:-1}
td.calendar-day a:hover {text-decoration: underline;}
td.today {background-color:#86841d;}

.calendarAjax a.shrine1 { background-color: #FFFF55;}
.calendarAjax a.shrine2 { background-color: #5555FF;}
.calendarAjax a.shrine3 { background-color: #55FF55;}
.calendarAjax a.shrine4 { background-color: #555555;}
.calendarAjax a.shrine5 { background-color: #F5F5F5;}
.calendarAjax a.shrine6 { background-color: #FF5555;}

.calendarAjax a.state5 {background-color: #ffdddd;color:blue;}
.calendarAjax a.state4 {background-color: silver;color:blue;}
.calendarAjax a.selected {font-weight: bold}

#short {border: 1px solid white;width: 40%;padding:5px 5px 10px 5px;}
#showTable {float:right;border:1px solid white;padding:2px 5px 2px 5px;cursor:pointer;margin-right: 1em;background-color: #666666;}
#showTable:hover {background-color: #888888;}
#hideTable {float:right;border:1px solid white;padding:2px 5px 2px 5px;cursor:pointer;margin-right: 1em;background-color: #666666;}
#hideTable:hover {background-color: #888888;}

tr.activeTerm {background-color:#225522 !important;}
tr.otherTerm {display:none;}
/* ── is (v3) ────────────────────────────────────────────────────────────
   Doplňky k původnímu stylu z is2. Drží se jeho palety: tmavé pozadí,
   světlý text (--white) a význam nesený BARVOU TEXTU, ne barvou plochy.
   Světlé plochy sem nepatří — světle šedý text #c9c9c9 na nich není vidět.
   Barvy jsou tytéž hodnoty jako .stateN / .shrineN / #86841d výše. */

.dim   { color: var(--grey); font-size: 0.9em; }
.warn  { color: #FF5555; font-weight: bold; }
.toggle { cursor: pointer; user-select: none; padding: 0 0.4em; }

/* Hlášky. Plochu řeší .flash výš, barvu nese text — jako všude v is2. */
.flash-success { color: #55FF55; }
.flash-error   { color: #FF5555; }

/* Stavy termínu. Kódy v3 na místě .state1..7 z is2, stejné hodnoty
   (TermState::legacyId určuje, který kód je které číslo). */
.state-ordered      { color: #FF5555; }
.state-asked        { color: #D4D479; }
.state-deposit_paid { color: #cc8c00; }
.state-canceled     { color: grey; }
.state-refund       { color: pink; }
.state-paid         { color: #55FF55; }
.state-installments { color: red; }

/* Stavy poukazu. Sdílejí barvy se stavy termínu tam, kde znamenají totéž
   (objednaný, vyzváno, zaplaceno, storno); vlastní jsou jen dva. */
.state-issued       { color: #85888C; }
.state-gratis       { color: #7FD4D4; }
.state-sent         { color: #FFFFFF; }

/* Štítek stavu u nadpisu. Barvu nese text, ne plocha — stejně jako
   v seznamech; podbarvený štítek by u H1 přebil samotný nadpis. */
.stateChip { font-size: 0.9rem; font-weight: bold; }

/* Řádek podbarvený svatyní. Pozadí je inline z databáze (`shrine.color`),
   tady se dorovná zbytek toho, co v is2 dělaly .shrineBackN — na světlé
   ploše musí být text černý a tučný, jinak splyne. */
tr.shrineBack { color: black !important; font-weight: bold; }

/* Kalendář: táž geometrie i barvy jako .calendarAjax v is2, jen s názvy
   tříd v3 (.calendar / .calendar-date / .calendar-term). */
.calendar { border-spacing: 0; }
.calendar .calendar-day {
    position: relative; padding: 5px; min-height: 80px; font-size: 0.65em;
    text-align: left; vertical-align: top;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border-bottom: 1px solid #999; border-right: 1px solid #999;
}
.calendar .calendar-day:hover { background: #eceff5; }
.calendar .calendar-day-head {
    font-weight: bold; text-align: center; padding: 5px;
    border-top: 1px solid #999; border-bottom: 1px solid #999;
    border-right: 1px solid #999;
}
.calendar .calendar-day.another { opacity: 50%; }
.calendar .calendar-day.today   { background-color: #86841d; }
/* Číslo dne: šedý štítek v pravém horním rohu, ne šedý text na šedé ploše. */
.calendar .calendar-date {
    position: absolute; top: 3px; right: 4px; z-index: 1;
    background: #999; color: #fff; font-weight: bold;
    padding: 3px; width: 15px; text-align: center;
}
.calendar .calendar-term {
    display: inline-block; padding: 1px; margin-top: 1px;
    color: black; text-decoration: none;
}
.calendar .calendar-term:hover   { text-decoration: underline; }
.calendar .calendar-term.selected { font-weight: bold; }
/* Zrušený a vracený termín přebijí barvu svatyně (v is2 .state4/.state5
   v kalendáři). Pozadí svatyně je inline, proto !important. */
.calendar .calendar-term.state-canceled { background-color: silver !important; color: blue; }
.calendar .calendar-term.state-refund   { background-color: #ffdddd !important; color: blue; }
.calendar-year .calendar-month { position: relative; display: inline; float: left; max-width: 800px; margin: 5px; }

/* ── kalendář: řádkový (public/js/calendar.js) ───────────────────
   Den = řádek, dny se dotahují oběma směry. Na stránce kalendáře se
   ukazuje jen na úzké obrazovce (přepíná mobile.css), v popupu
   „Ukázat kalendář" v detailu termínu na každé šířce — proto je jeho
   vzhled tady, ne v mobile.css.

   Barvy jsou z palety is2: význam nese barva textu a barva svatyně,
   plocha řádku zůstává tmavá. */

/* Písmo celého kalendáře se řídí odsud. Velikosti uvnitř jsou v `em`,
   takže na zvětšení stačí sáhnout na tohle jedno číslo — dny, jména,
   termíny i nadpisy měsíců povyrostou spolu a poměry mezi nimi zůstanou.
   Kalendář je větší než zbytek aplikace schválně: čte se z ruky a rychle,
   ne slovo po slovu. */
.calendar-days { display: none; font-size: 1.15rem; font-weight: bold; }

/* Když nad viditelnou částí přibudou dny, musí se o jejich výšku posunout
   rolování, jinak stránka pod rukama poskočí. Dorovnává si to skript sám
   (public/js/calendar.js) — Safari na iOS, což je tady hlavní prohlížeč,
   nic takového neumí. Chrome to ale umí a dělal by to zároveň se
   skriptem: posun by se sečetl dvakrát a seznam by pod prstem ujel. */
.calendar-days { overflow-anchor: none; }

/* Nadpis měsíce se lepí pod hlavičku, ať je pořád vidět, ve kterém
   měsíci se člověk zrovna nachází. */
.calendar-days-month {
    position: sticky;
    top: var(--header-h);
    z-index: 5;
    display: flex;
    justify-content: space-between;
    padding: 0.45em 0.6em;
    font-weight: bold;
    background-color: var(--black);
    border-bottom: 1px solid #555;
}

/* Obsazenost je údaj k měsíci, ne jeho jméno — drží se vpravo a tlumeně,
   ať nepřetahuje pozornost pokaždé, když nadpis projede kolem. */
.calendar-month-load { color: var(--grey); }

.calendar-day-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    padding: 0.35em 0.6em;
    border-bottom: 1px solid #333;
}

.calendar-day-row.weekend { background-color: rgba(255, 255, 255, 0.04); }

/* Dnešek. Olivová je táž barva, jakou má dnešek v mřížce (.today),
   ale jen jako proužek u kraje a prosvícený podklad — plná plocha by
   pod sebou pohřbila šedý text i barvy svatyní. */
.calendar-day-row.today {
    background-color: rgba(134, 132, 29, 0.35);
    border-left: 4px solid #86841d;
    padding-left: calc(0.6em - 4px);
}

/* Pobyt z formuláře termínu (popup v detailu): noci podbarvené výrazněji
   než víkend, ať je celý pobyt vidět na první pohled bez pamatování dat.
   Nástup a odjezd mají bílý proužek u kraje — vyhrává nad olivovým
   dneškem, proto stojí až za ním. Den odjezdu se nepodbarvuje: tu noc
   už tam praktikující není, stejně jako v mřížce. */
.calendar-day-row.range { background-color: rgba(255, 255, 255, 0.14); }
.calendar-day-row.range-start,
.calendar-day-row.range-end {
    border-left: 4px solid var(--white);
    padding-left: calc(0.6em - 4px);
}

.calendar-day-date {
    flex: none;
    width: 2.6em;
    text-align: center;
    line-height: 1.15;
}
.calendar-day-number { display: block; font-size: 1.15em; font-weight: bold; }
.calendar-day-name   { display: block; font-size: 0.8em; color: var(--grey); }
.calendar-day-today,
.calendar-day-mark   { display: block; font-size: 0.7em; font-weight: bold; color: #d6d37a; }
.calendar-day-mark   { color: var(--white); }
.calendar-day-row.today .calendar-day-name { color: var(--white); }

.calendar-day-terms { flex: 1; min-width: 0; }
.calendar-day-free  { color: var(--grey); font-size: 0.9em; }

/* Termín na noc. Plocha je barva svatyně (inline z databáze), proto
   je text černý — stejně jako v mřížce. */
.calendar-days .calendar-term {
    display: block;
    padding: 0.25em 0.5em;
    margin-bottom: 0.15em;
    color: black;
    text-decoration: none;
}
/* První a poslední noc pobytu. V mřížce je začátek i konec vidět z tvaru
   bloku, v řádcích vypadá každá noc stejně — proto tlustý tmavý pruh
   vlevo u první noci a vpravo u poslední. Kreslí se stínem dovnitř, ať
   se text neposouvá; všechny termíny mají odsazení na pruh připravené,
   aby jména v jednom dni zůstala pod sebou. Jednonocní pobyt má oba. */
.calendar-days .calendar-term { padding-left: 0.95em; padding-right: 0.95em; }
.calendar-days .calendar-term.starts { box-shadow: inset 8px 0 0 rgba(0, 0, 0, 0.75); }
.calendar-days .calendar-term.ends   { box-shadow: inset -8px 0 0 rgba(0, 0, 0, 0.75); }
.calendar-days .calendar-term.starts.ends { box-shadow: inset 8px 0 0 rgba(0, 0, 0, 0.75), inset -8px 0 0 rgba(0, 0, 0, 0.75); }
/* Zrušený a vracený termín přebijí barvu svatyně — táž dvojice, jakou
   má mřížka výš, jen pro řádky. */
.calendar-days .calendar-term.state-canceled { background-color: silver !important; color: black; }
.calendar-days .calendar-term.state-refund   { background-color: #ffdddd !important; color: blue; }
/* Termín, kvůli kterému se kalendář otevřel (?termId=) — jako .selected
   v mřížce, jen s rámečkem, tučné písmo by na barevné ploše zaniklo. */
.calendar-days .calendar-term.selected { outline: 2px solid var(--white); outline-offset: -2px; font-weight: bold; }

/* Okraje seznamu. Drží si výšku i prázdné — jsou to zároveň body,
   jejichž přiblížení spouští další dávku, a poskakující výška by
   dorovnávání rolování rozhodila. */
.calendar-days-edge {
    min-height: 2.5em;
    padding: 0.8em 0;
    text-align: center;
}
.calendar-days-edge button {
    padding: 0.7em 0.95em;
    color: var(--white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

/* Popup „Ukázat kalendář" v detailu termínu. Roluje tělo popupu, ne
   stránka — calendar.js dostane tělo jako `scroller`. Nadpis měsíce se
   proto lepí k hornímu okraji těla, ne pod lištu aplikace. */
.calendarDialog { width: min(30em, 96vw); max-height: 88vh; padding: 0; }
.calendarDialog[open] { display: flex; flex-direction: column; }
.calendarDialog .calendar-days { display: block; }
.calendarDialog .calendar-days-month { top: 0; }
.calendarDialogHead {
    display: flex; justify-content: space-between; align-items: center;
    flex: none;
    padding: 0.6em 1em;
    border-bottom: 1px solid #5a5f6b;
}
.calendarDialogHead h3 { margin: 0; }
.calendarDialogHead form { margin: 0; }
/* Křížek na zavření: větší než běžné kulaté tlačítko, ať se trefí prst.
   Selektor je silnější než `.roundAction` níž, jinak by rozměry prohrál. */
.calendarDialog .calendarDialogClose { width: 3rem; height: 3rem; font-size: 1.5rem; }
/* Termíny v popupu nejsou odkazy (calendar.js, links: false). */
.calendarDialog .calendar-term { cursor: default; }
.calendarDialogBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Události. Rámeček jako #showTable v is2, stav barvou textu. */
.badge { display: inline-block; padding: 2px 8px; margin-right: 4px; border: 1px solid #999; }
.badge-pending       { color: #D4D479; }
.badge-processing    { color: #cc8c00; }
.badge-succeeded     { color: #55FF55; }
.badge-failed,
.badge-dead_lettered { color: #FF5555; }
.job-failed td       { background-color: #552222; }

/* Chat spolujízdy. Tmavé plochy odvozené z --black a z tr.activeTerm. */
.chat { list-style: none; padding: 0; }
.chat-message { padding: 0.4em 0.6em; margin: 0.3em 0; background-color: #2b2d33; }
.chat-message.mine { background-color: #225522; }
.chat-author { font-weight: bold; margin-right: 0.6em; }
.chat-time   { color: var(--grey); font-size: 0.85em; margin-right: 0.6em; }
.chat-remove { float: right; font-size: 0.85em; }
.chat-form textarea { width: 100%; max-width: 40em; }

/* ── k řešení (úvodní stránka) ──────────────────────────────────────────
   Seznam vět, ne tabulka: každý řádek je jiného druhu a sloupce by mu
   nesedly. Význam nese barva textu jako všude: co je v pořádku, je
   obyčejné; co chce pozornost, je červené a tučné; tlačítko, které
   na cíli čeká, je vpravo v rámečku jako ostatní tlačítka v is. */
.agenda { list-style: none; padding: 0 0.3em; max-width: 60em; }
.agenda li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em 0.7em;
    padding: 0.45em 0.5em;
    border-bottom: 1px solid #444;
    cursor: pointer;
}
.agenda li:hover { background-color: rgba(255, 255, 255, 0.05); }
.agenda li > a { font-weight: bold; text-decoration: none; }
.agenda li > a:hover { text-decoration: underline; }
/* Barva věty říká, kolik s tím bude práce.

   Zelená: sedí variabilní symbol i částka, stačí odkliknout.
   Oranžová: vypadá to tak, ale rozhodnout musí člověk — dárkový poukaz
     variabilní symbol nemá a pozná se jen podle jména, a termín, na který
     přišla jiná částka, taky není hotová věc.
   Červená: nesedí symbol ani jméno, nebo chybí údaj, bez kterého to dál
     nejde. Dřív byla červená úplně všechno kromě nástupů, takže v tom
     shluku přestala být vidět.

   Pořadí selektorů má váhu: nástupy mají vlastní žlutou, odjezdy
   modrou, a stupeň jistoty ji přebíjí, když je jiný než „na vědomí". */
.agenda li.agenda-arrival > a { color: #d6d37a; }
.agenda li.agenda-departure > a { color: #9fc5e8; }
.agenda li.agenda-sure > a { color: #55FF55; }
.agenda li.agenda-maybe > a { color: var(--orange); }
.agenda li.agenda-alert > a { color: #FF5555; }
/* Datum na vlastním řádku, stejně velké jako věta, bíle — u platby je
   to první, co obsluha hledá. Doplněk taky bíle: šedá na tmavém
   podkladu byla na telefonu málo kontrastní. */
.agenda-when { flex: 1 1 100%; font-weight: bold; color: white; }
.agenda-detail { flex: 1 1 12em; color: white; }
.agenda-done { padding: 0.5em 0.8em; color: #55FF55; }
/* Chatka nástupu v barvě chatky — černě a tučně jako .shrineBack
   v tabulkách, jinak na světlé barvě splyne. Bez barvy v databázi
   zůstane šedý štítek. */
.agenda-shrine { padding: 0.1em 0.6em; border-radius: 0.3em; background: #d0d0d0; color: black; font-weight: bold; }
/* Pár a bez jídla: tmavý štítek, čitelný na tmavém podkladu přehledu
   i na barevném řádku tabulky nástupů. */
.termTag { display: inline-block; margin-left: 0.4em; padding: 0 0.5em; border-radius: 1em; background: #2b2d33; border: 1px solid #5a5f6b; color: white; font-weight: 600; font-size: 0.9em; white-space: nowrap; }
.agenda .termTag { margin-left: 0; }

/* Archiv pošty */
.emails .email-body { white-space: pre-wrap; max-height: 30em; overflow: auto;
                      background-color: #2b2d33; padding: 0.5em; }
.emails tr.from-me td { background-color: #225522; }

/* ── tabulky ────────────────────────────────────────────────────────────
   Barvy, proužkování a ovládací prvky. Rozměry mřížky (padding, linky,
   šířky sloupců) jsou v desktop.css — na mobilu se tabulka na mřížku
   nekreslí, řádky jdou pod sebe, takže tady by je mobile.css musel jen
   přebíjet. */


/* Proužkování a řádek pod myší. Kreslí se průsvitnou vrstvou přes buňky,
   ne vlastním pozadím — pod ní musí zůstat vidět barva svatyně, kterou
   si řádek na přehledu nese inline z databáze. */
table.display > tbody > tr:nth-child(odd) > * {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.023);
}
table.display.hover > tbody > tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}
table.display > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.35) !important;
}

/* Hlavička, podle které se dá řadit. Šipky jsou tytéž znaky i krytí,
   jaké kreslily DataTables. */
table.display thead th.sortable {
    position: relative;
    cursor: pointer;
    padding-right: 26px;
}
table.display thead th.sortable:before,
table.display thead th.sortable:after {
    position: absolute; display: block; right: 10px;
    line-height: 9px; font-size: 0.9em; opacity: 0.125;
}
table.display thead th.sortable:before { bottom: 50%; content: "▴"; }
table.display thead th.sortable:after  { top: 50%;    content: "▾"; }
table.display thead th.sortAsc:before,
table.display thead th.sortDesc:after  { opacity: 0.6; }

/* Ovládací prvky seznamu — nastupují po .dataTables_filter a spol.
   Řádky se dotahují při rolování, takže tu není stránkování ani volba
   počtu záznamů. Zbylo hledání a značka pod tabulkou, která hlásí, co
   se zrovna děje a kde seznam končí. Barvy z palety is2: světlý text,
   žádné světlé plochy, na kterých by #c9c9c9 nebylo vidět. */
.tableBox::after { content: ""; display: table; clear: both; }
.tableTop { overflow: hidden; padding: 0.5em 0; }
.tableFilter { float: right; }
/* Šířka je na nejdelší popisek, jaký seznamy mají („Termín číslo,
   jméno, e-mail, stav") — useknutý popisek je horší než širší pole.
   Na telefonu ji přebíjí mobile.css, tam pole zabere celý řádek. */
.tableTop input {
    width: 20em;
    padding: 4px 4px 4px 26px;
    color: var(--white);
    border: 1px solid #aaa;
    border-radius: 3px;
    /* Lupa místo popisku „Hledat:". Je to jediná ikona v aplikaci, takže
       si kvůli ní nezavádíme sadu ani font — nakreslená je rovnou tady.
       `currentColor` v pozadí nefunguje, proto stejná šedá jako rámeček. */
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 6px center;
    background-size: 14px 14px;
    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");
}
/* Nadpis bloku na detailu pohybu („Zařadit k termínu", „Nebo to sem
   nepatří"). Oranžová ze značky: bloků je pod sebou několik a každý má
   vlastní nabídku s odsazenými řádky — barva nadpisu je to, podle čeho
   se pozná, kde jeden končí a druhý začíná. */
.blockTitle { color: var(--orange); }

/* Křížek, kterým prohlížeč čistí `type=search`, je ve výchozím stavu
   tmavý — na tmavém poli by nebyl vidět. */
.tableTop input::-webkit-search-cancel-button {
    filter: invert(1);
    opacity: 0.5;
    cursor: pointer;
}

/* Záložky pohybů z banky. Na desktopu řádek nad tabulkou: odkazy vedle
   sebe, zapnutá tučně s proužkem jako položka v hlavní liště. Na telefonu
   z toho mobile.css udělá pevnou lištu pod hlavičkou. */
/* Lišta záložek nad seznamem. Používá ji banka i poukazy — je to obyčejný
   odkaz s parametrem `?tab=`, takže tlačítko zpět dělá to, co má, a číslo
   říká, kolik toho pod záložkou je. Na telefonu se z ní stane pevná lišta
   pod hlavičkou (mobile.css). */
.tabBar { display: flex; align-items: stretch; gap: 0.2em; padding: 0.4em 0.3em; }
.tabBarLink, .tabBarAction button {
    display: flex; align-items: center; gap: 0.4em;
    padding: 0.4em 0.8em;
    color: var(--grey);
    text-decoration: none;
    background: transparent; border: 0; cursor: pointer;
    font: inherit;
}
.tabBarLink:hover, .tabBarAction button:hover { color: var(--white); }
.tabBarLink.active { color: white; font-weight: bold; box-shadow: inset 0 -3px 0 var(--grey); }
.tabBarCount { font-size: 0.85em; opacity: 0.8; }
.tabBarIcon { display: none; }
.tabBarAction { margin-left: auto; }
/* Tlačítka v buňce (rozhodnutí o pohybu). Formulář kolem nich nesmí
   zabrat vlastní řádek, jinak by se buňka roztáhla na dvojnásobek. */
table.display td form { display: inline; }
table.display td button {
    padding: 0.3em 0.7em;
    margin-right: 0.3em;
    cursor: pointer;
    color: var(--white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}
table.display td button:hover { color: white; border-color: white; }
table.display td button.dim { color: var(--grey); }

/* Značka pod tabulkou. Drží si výšku i prázdná — je to zároveň bod,
   jehož přiblížení spouští další dávku. */
.tableMore {
    clear: both;
    min-height: 2.5em;
    padding: 0.8em 0;
    text-align: center;
}
.tableMore button {
    display: inline-block;
    padding: 0.5em 1em;
    cursor: pointer;
    color: var(--white);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}
.tableMore button:hover {
    color: white;
    border-color: #111;
    background: linear-gradient(to bottom, #585858 0%, #111 100%);
}

/* Tlačítko jednotného přihlášení. Rámeček a plocha jako #showTable v is2,
   ať vedle obrázkového tlačítka Googlu nepůsobí jako pouhý odkaz. */
.ssoButton {
    display: inline-block;
    padding: 0.6em 1.2em;
    color: var(--white);
    text-decoration: none;
    background-color: #666666;
    border: 1px solid white;
}
.ssoButton:hover { background-color: #888888; }

/* ── detail praktikujícího ───────────────────────────────────────────
   Záložky jsou tu pevná lišta na každé šířce, ne jen na telefonu:
   detail je dlouhý formulář a přepínač má být po ruce i pod jeho koncem.
   Lišta sedí těsně pod hlavičkou — dole ji obsluha přehlížela, na menu
   nahoře je zvyklá. Stránka i kotvy si nahoře nechávají místo pro obě
   lišty. Na telefonu dostane lišta výšku a sloupce z mobile.css. */
:root { --tabbar-h: 44px; }
.tabBarFixed {
    position: fixed;
    left: 0; right: 0; top: var(--header-h);
    z-index: 99;
    height: var(--tabbar-h);
    padding-block: 0;
    justify-content: center;
    background-color: var(--black);
    box-shadow: 0 1px 5px 0 var(--grey);
}
body:has(.tabBarFixed) { padding-top: calc(var(--header-h) + var(--tabbar-h)); }
html:has(.tabBarFixed) { scroll-padding-top: calc(var(--header-h) + var(--tabbar-h)); }

/* Formulář po dvou polích na řádek. Popisek je nad polem, takže dvojice
   (nástup a odjezd, stav a svatyně) se vejde vedle sebe i na telefonu. */
.liveForm#termForm { max-width: 46em; padding: 0 0.3em; }
.formRow { display: flex; gap: 0.6em; margin-bottom: 0.6em; }
.formRow[hidden] { display: none; }
.field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.2em; }
.field > span:first-child { color: var(--grey); font-size: 0.9em; }
.field input[type=text],
.field input[type=date],
.field select,
.field textarea { width: 100%; font-size: 1rem; padding: 0.35em 0.4em; }
.field textarea { min-height: 4em; }
.fieldValue { padding: 0.35em 0; }

.fieldNotes { margin: -0.3em 0 0.7em; }
.fieldNotes:empty { display: none; }
.fieldNote { font-size: 0.9em; line-height: 1.4; }
.fieldNote-dim  { color: var(--grey); }
#priceNote .fieldNote { font-size: 1.08em; } /* nabídka cen o 20 % větší */
.fieldNote-warn { color: #FF5555; font-weight: bold; }
.fieldNote-soft { color: #D4D479; }
.fieldNote a { color: inherit; }
.priceHint.current { color: #55FF55; font-weight: bold; text-decoration: none; }

/* Přepínač místo zaškrtávátka: čte se na první pohled a trefí se palcem. */
.fieldSwitch { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.6em; }
.fieldSwitch > span:first-child { font-size: 1em; color: var(--white); }
/* Přepínač v tabulkovém formuláři (archivace praktikujícího) nemá kolem
   sebe .field — popisek je za ním, ne na druhém konci řádku. */
.fieldSwitch:not(.field) { display: flex; justify-content: flex-start; }

/* Hodnota s ikonou kopírování za ní (telefon, e-maily praktikujícího).
   Telefon má pole jen na délku čísla — přes celou šířku by ikona
   odjela daleko od toho, co kopíruje. Po zkopírování se ikona na chvíli
   změní na fajfku (clientDetail.js). */
.copyField { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1em 0.4em; }
table.insert .copyField input#phone { width: 12em; max-width: 100%; }

/* Akce u položky jako emoji v kroužku (adresy praktikujícího: ⭐ hlavní,
   🗑️ odebrat). Terč 2.6em, ať se trefí i palcem; popis je v title. */
.roundAction {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
    width: 2.6em; height: 2.6em;
    font-size: 1rem; line-height: 1;
    text-decoration: none;
    background: #25262b;
    border: 1px solid #5a5f6b;
    border-radius: 50%;
}
.roundAction:hover { background: #464a55; border-color: #8a8f9b; }

/* Nadpis otevřeného termínu „Jméno - číslo": o 30 % menší než h1. */
h1.termTitle { font-size: 1.4em; }

/* Poptávka z webu (detail termínu). Nahoře u objednaného termínu je to
   první, co obsluha řeší, proto rámeček; v Dalších informacích tlumeně. */
.askedBox { margin: 0 0 0.9em; padding: 0.6em 0.7em; border: 1px solid #5a5f6b; border-left: 3px solid var(--orange); border-radius: 4px; }
#askedMore .askedBox { margin: 0.3em 0; border-color: #444; border-left-color: #444; }
.askedTitle { margin-bottom: 0.35em; font-size: 0.85em; color: var(--grey); }
.askedChips { display: flex; flex-wrap: wrap; gap: 0.35em; }
.askedChip { padding: 0.2em 0.6em; font-weight: 600; background: #2b2d33; border: 1px solid #5a5f6b; border-radius: 1em; }
.askedDate { margin-top: 0.45em; color: var(--white); overflow-wrap: anywhere; }

/* Vyplněná poznámka termínu jako text nad Dalšími informacemi. */
.noteView { margin: 0.6em 0; padding: 0.5em 0.7em; background: #25262b; border-left: 3px solid var(--grey); border-radius: 4px; }
.noteView[hidden] { display: none; }
.noteViewTitle { margin-bottom: 0.2em; font-size: 0.85em; color: var(--grey); }
.noteViewText { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Řádek Zaplaceno s tlačítkem Chce splátky vpravo. */
.paidRow { align-items: center; }
.paidRowAction { flex: none; margin-left: auto; }
.paidRowAction[hidden] { display: none; }
/* Tlačítko Ukázat kalendář vedle Nástupu a Odjezdu, zarovnané s poli. */
.dateRowAction { flex: none; align-self: flex-end; }
/* Pole s datem má width: 100 % a k tomu vnitřní odsazení; s výchozím
   content-box přetéká ze svého .field doprava a mezeru k sousedovi
   sežere — proto se tu měří i s odsazením. */
.dateRow input[type=date] { box-sizing: border-box; }
.pillAction {
    display: inline-flex; align-items: center; gap: 0.45em;
    min-height: 2.75rem;
    padding: 0.45em 1.1em;
    font: inherit; font-weight: 600;
    color: white;
    white-space: nowrap;
    background: #464a55;
    border: 1px solid #5a5f6b;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
}
.pillAction:hover { background: #585c68; border-color: #8a8f9b; }
.pillAction span { font-size: 1.2em; line-height: 1; }

/* Nadpis s akcí zarovnanou vpravo (Další termíny ➕). */
.headingWithAction { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.headingWithAction .roundAction { font-size: 1rem; font-weight: normal; }
.headingActions { display: flex; gap: 0.5em; }
button.roundAction { padding: 0; color: inherit; cursor: pointer; font-family: inherit; }

/* Uplatnění poukazu na záložce Platby: pole a tlačítko na palec —
   výška 2.75rem (44 px), písmo 16 px, ať iOS po ťuknutí nepřibližuje. */
.voucherApply { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.3em 0.3em 0.9em; }
.voucherApply input[type=text] {
    flex: 1 1 14em; min-width: 0;
    min-height: 2.75rem; box-sizing: border-box;
    padding: 0.5em 0.7em;
    font-size: 1rem;
    border-radius: 10px;
}
.voucherApply .pillAction { flex: 0 0 auto; }

/* Řádek mailu v Komunikaci se rozbaluje celý (clientDetail.js). */
.emails tbody tr { cursor: pointer; }
.emails .email-body { cursor: text; }

/* Našeptávač poukazů (is.suggest v app.js) v barvách aplikace,
   položky vysoké na palec. Seznam stojí hned za polem. */
.suggestList {
    position: absolute; z-index: 300;
    margin: 0.15em 0 0; padding: 0.2em 0; list-style: none;
    min-width: 18em; max-width: 90vw;
    max-height: 60vh; overflow-y: auto;
    color: var(--white);
    background: #25262b;
    border: 1px solid #5a5f6b;
    border-radius: 10px;
    font-family: inherit; font-size: 1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.suggestList li { cursor: pointer; }
.suggestList li.active, .suggestList li:hover { color: white; background: #464a55; }
.voucherSuggest { min-height: 2.75rem; box-sizing: border-box; padding: 0.45em 0.8em; }
.voucherSuggest .dim { font-size: 0.9em; }
.voucherSuggestMine { margin-left: 0.5em; padding: 0 0.45em; font-size: 0.8em; color: black; background: #55FF55; border-radius: 10px; }

/* Odkaz zpět nad nadpisem detailu (platba → praktikující a termín). */
.backLink { margin: 0.6em 0.5em 0; }
.backLink a { display: inline-block; padding: 0.4em 0; }

/* Termíny a platby praktikujícího: řádek se proklikne celý, bez podtržení
   — při najetí se podbarví. Svatyně jako štítek v barvě z `shrine.color`. */
#terms tbody tr[data-href], #payments tbody tr[data-href], #otherPayments tbody tr[data-href] { cursor: pointer; }
table.anchor#terms tbody tr:hover, table.anchor#payments tbody tr:hover, table.anchor#otherPayments tbody tr:hover { text-decoration: none; background-color: rgba(255, 255, 255, 0.07); }
.shrineTag { display: inline-block; padding: 0.05em 0.5em; color: black; border-radius: 10px; }

/* Řádek výpisu jako odkaz (rowlink.js): neviditelný <a> přes celý řádek.
   Ctrl + klik, kolečko i dlouhé podržení na telefonu tak otevřou novou
   záložku. Odkazy a tlačítka v řádku leží nad ním. Totéž pro položky
   K řešení: první odkaz položky se roztáhne přes celou položku. */
tr[data-href] { position: relative; cursor: pointer; }
a.rowLink { position: absolute; inset: 0; z-index: 0; }

/* Detail poukazu: popisek pod tlačítkem akce, červené Zrušit a spodní řádek
   se Stáhnout a Zrušit (záložky mají třídy detailu praktikujícího). */
.voucherHint { margin: 0.2em 0 0.9em; font-size: 0.9em; }
.clientDetail .bigAction-danger { color: #fff; background: #8f2d2d; border-color: #b34a4a; }
.clientDetail .bigAction-danger:hover { background: #a63838; }
.voucherForm { max-width: 46em; padding: 0 0.3em; }
/* Řádek přepínátek: popisek nad přepínátkem, aby se tři vešly vedle sebe. */
.voucherSwitches { flex-wrap: nowrap; }
.voucherSwitches .fieldSwitch { flex: 1 1 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.4em; }
/* Přidání položky jako plus v kroužku vpravo od nadpisu (platby za poukaz). */
.iconAction { display: inline-flex; flex: none; color: inherit; text-decoration: none; }
.iconAction .ico { width: 2rem; height: 2rem; }
/* Pole podle druhu poukazu; `.field` má display:flex, který by atribut hidden přebil. */
[data-kind][hidden] { display: none !important; }
.formRowWrap { flex-wrap: wrap; }
.field input[type=email] { width: 100%; font-size: 1rem; padding: 0.35em 0.4em; }
.field code { font-size: 1rem; }
.voucherBottomActions { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: flex-start; padding: 0.8em 0.3em 0; }
.voucherBottomActions .voucherAction { margin: 0; }
tr[data-href] td a:not(.rowLink),
tr[data-href] td button,
tr[data-href] td input,
tr[data-href] td select,
tr[data-href] td form { position: relative; z-index: 1; }
.agenda li { position: relative; }
.agenda li > a:first-child::after { content: ""; position: absolute; inset: 0; }
/* Tlačítka a formuláře v položce (banka: „Je to platba na …“) leží nad
   roztaženým odkazem, jinak klik na tlačítko otevře detail termínu. */
.agenda li > a:not(:first-child),
.agenda li button,
.agenda li input,
.agenda li select,
.agenda li form { position: relative; z-index: 1; }
table.anchor tbody tr[data-href]:hover { text-decoration: none; background-color: rgba(255, 255, 255, 0.07); }

/* Detail platby: komu a ke kterému termínu patří — jeden odkaz. */
.paymentOwner { display: inline-block; padding: 0.3em 0; font-size: 1.25rem; font-weight: 600; text-decoration: underline; }

/* Dvě krátká pole na jednom řádku (oslovení a jazyk). */
.inlinePair { display: flex; align-items: center; gap: 0.5em; }
table.insert .inlinePair input { flex: 0 0 50%; width: 50%; min-width: 0; }
table.insert .inlinePair select { flex: 1 1 auto; width: auto; min-width: 0; }
.inlinePair label { color: var(--grey); white-space: nowrap; }
table.insert button.copyButton {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; padding: 0.25em; margin: 0;
    color: var(--grey);
    background: transparent; border: 0; border-radius: 4px;
    cursor: pointer;
}
table.insert button.copyButton:hover { color: white; }
table.insert button.copyButton .ico { width: 18px; height: 18px; }
table.insert button.copyButton.copied { color: #55FF55; }

/* Hláška průběžného ukládání (clientDetail.js). Lišta přes celou šířku
   u dolního okraje, jen na chvíli — záložky jsou nahoře, takže dole nic
   natrvalo nepřekryje. Text vlevo, Vrátit vpravo. */
.saveToast {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    display: flex; align-items: center; justify-content: space-between; gap: 1em;
    box-sizing: border-box;
    min-height: 3.4em;
    padding: 0.5em 16px;
    font-weight: 600;
    color: white;
    background: #2b2d33;
    border-top: 1px solid #5a5f6b;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.7);
}
.saveToast[hidden] { display: none; }
/* Lišta s Vrátit zůstává — stránka si pod ní nechá místo. */
body.hasToast { padding-bottom: 4.5em; }
.saveToast.pop { animation: saveToastPop 0.25s ease-out; }
@keyframes saveToastPop {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(0); }
}
.saveToast-ok .saveToastText::before { content: "✓ "; color: #55FF55; }
.saveToast-error { color: #FF7777; border-top-color: #FF5555; }
.saveToastText { overflow-wrap: anywhere; }
.saveToastUndo {
    flex: none;
    padding: 0.55em 1.4em;
    font: inherit;
    color: white;
    background: #464a55;
    border: 1px solid #5a5f6b;
    border-radius: 4px;
    cursor: pointer;
}
.saveToastUndo:hover { background: #585c68; }
.saveToastUndo[hidden] { display: none; }
input.switch {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    position: relative;
    width: 3em; height: 1.7em;
    margin: 0;
    background: #25262b;
    border: 1px solid #5a5f6b;
    border-radius: 1em;
    cursor: pointer;
    transition: background-color 0.15s;
}
input.switch::after {
    content: "";
    position: absolute;
    top: 0.15em; left: 0.15em;
    width: 1.3em; height: 1.3em;
    background: var(--grey);
    border-radius: 50%;
    transition: transform 0.15s, background-color 0.15s;
}
input.switch:checked { background: #2d6a2d; border-color: #3f8a3f; }
input.switch:checked::after { transform: translateX(1.3em); background: white; }

.saveStatus { min-height: 1.4em; padding: 0.3em 0; font-size: 0.9em; color: var(--grey); }
.saveStatus-ok    { color: #55FF55; }
.saveStatus-error { color: #FF5555; font-weight: bold; }

.moreInfo { margin: 0.6em 0; padding: 0.5em 0.3em; border-top: 1px solid #444; }
.moreInfo summary { cursor: pointer; padding: 0.3em 0; }
.moreInfo .infoLine { padding: 0.3em 0; overflow-wrap: anywhere; }
.moreInfo h3 { padding: 0.8em 0 0.3em; }

/* Akce termínu a velká tlačítka v detailu. Na telefonu je .bigAction
   přes celou šířku (mobile.css); tady jsou vedle sebe. */
.termActions { display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0 0.3em 0.8em; }
.termActions:empty { display: none; }
.clientDetail .bigAction {
    display: inline-block;
    padding: 0.55em 1.1em;
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    background: #464a55;
    border: 1px solid #5a5f6b;
    border-radius: 4px;
    cursor: pointer;
}
.clientDetail .bigAction-quiet { color: var(--grey); font-weight: normal; background: #383b44; border-color: #474b56; }

.choiceDialog {
    margin: auto;
    width: min(26em, 92vw);
    padding: 1em;
    color: var(--white);
    background: var(--black);
    border: 1px solid #5a5f6b;
    border-radius: 6px;
}
.choiceDialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.choiceDialog h3 { margin-bottom: 0.6em; }
.choiceDialog .bigAction { display: block; width: 100%; margin: 0.4em 0; text-align: left; }

/* Potvrzení (public_html/js/confirm.js) — místo nativního confirm(). */
.confirmText { margin: 0.2em 0 1.2em; font-size: 1.05rem; line-height: 1.4; overflow-wrap: anywhere; }
.confirmButtons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6em; }
.confirmButtons button {
    min-height: 2.75rem;
    padding: 0.5em 1.2em;
    font: inherit;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
.confirmCancel { background: transparent; border: 1px solid #5a5f6b; color: var(--grey); }
.confirmCancel:hover { color: white; border-color: #8a8f9b; }
.confirmOk { font-weight: 600; background: #464a55; border: 1px solid #8a8f9b; }
.confirmOk:hover { background: #585c68; }

/* Šíř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; }

/* Formulář místo odkazu: stavové akce jdou POSTem (CSRF), ale mají vypadat
   jako dřív — tlačítko v řádku textu, případně jako odkaz. */
.inlineForm { display: inline; margin: 0; }
.termActionForm { display: contents; }
.eventActions { display: flex; gap: 0.5em; flex-wrap: wrap; }
.linkButton { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.linkButton:hover { text-decoration: none; }
button.iconAction { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }

/* Přeplatek na záložce Platby termínu: co s ním (vrátit, převést, nechat).
   Rámeček jen linkou — světlé plochy se k tmavému pozadí nehodí. */
.overpayBox { border-left: 4px solid var(--orange); padding: 0.2em 0 0.2em 0.8em; margin: 0.8em 0 1.2em; max-width: 60em; }
.overpayBox h3 { margin: 0.2em 0; }
.overpayBox .warnTitle { color: var(--orange); }
.overpayBox details { margin: 0.3em 0; }
.overpayBox summary { cursor: pointer; padding: 0.3em 0; font-weight: bold; }
.overpayBox form { margin: 0.4em 0; }
.overpayBox input[type="search"] { width: 100%; max-width: 30em; box-sizing: border-box; margin-top: 0.4em; }
.overpayBox .amountInput { width: 7em; }
.refundQr { display: block; width: 200px; max-width: 100%; height: auto; margin: 0.4em 0; background: #fff; }
/* Zaškrtávátko nad tlačítkem vratky (snížit cenu termínu). */
.checkLine { display: block; margin: 0.3em 0; }