/* Docházka DDM — střídmé, husté rozhraní pro PC; přizpůsobení jen pro úzké displeje (06 kap. 1a) */
:root {
  --pismo: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --text: #1c2430; --tlumeny: #5b6675; --pozadi: #ffffff; --plocha: #f4f6f9; --linka: #d5dbe3;
  --akcent: #1f4e79; --akcent-text: #ffffff; --vikend: #eef1f5; --svatek: #fff4d6;
  --chyba: #b3261e; --chyba-pozadi: #fde8e6; --ok: #1e6b3a; --ok-pozadi: #e3f4e8;
  --varovani: #7a5300; --varovani-pozadi: #fff3cd; --info-pozadi: #e7f0fa; --radek-hover: #e3edf8;
  --radek: 28px;
  --varovne: #b45309; --varovne-text: #ffffff;
  --lista: #1f4e79; --lista-text: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #e3e8ef; --tlumeny: #9aa6b5; --pozadi: #151a21; --plocha: #1d242d; --linka: #333d4a;
    --akcent: #6aa6dc; --akcent-text: #0d1117; --vikend: #1b222b; --svatek: #2f2a17;
    --chyba: #ff8a80; --chyba-pozadi: #3a1d1b; --ok: #7fd49a; --ok-pozadi: #183323;
    --varovani: #ffd27a; --varovani-pozadi: #332a12; --info-pozadi: #182a3d; --radek-hover: #22364d;
    --lista: #17324f; --lista-text: #f1f5fa;
    --varovne: #d97706; --varovne-text: #111111;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 var(--pismo); color: var(--text); background: var(--plocha); }
a { color: var(--akcent); }
h1 { font-size: 1.35rem; margin: .2rem 0 .8rem; }
h2 { font-size: 1.1rem; margin: 1.2rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.inline { display: inline; }
.odkaz { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.tlumeny { color: var(--tlumeny); }
.vpravo { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---- lišta ---- */
.lista { display: flex; align-items: center; gap: 1rem; background: var(--lista); color: var(--lista-text);
  padding: .4rem 1rem; position: sticky; top: 0; z-index: 10; }
.lista a, .lista .odkaz { color: var(--lista-text); text-decoration: none; }
.znacka { font-weight: 700; white-space: nowrap; }
.znacka span { font-weight: 400; opacity: .8; }
.lista-vpravo { margin-left: auto; }
.menu { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; flex: 1; }
.menu a { padding: .3rem .6rem; border-radius: 4px; }
.menu a:hover, .menu a[aria-current] { background: rgba(255,255,255,.18); }
.menu .uzivatel { margin-left: auto; opacity: .85; padding: 0 .5rem; }
.menu-tlacitko { display: none; }
.menu-skupina { position: relative; }
.menu-skupina > summary { list-style: none; cursor: pointer; padding: .3rem .6rem; border-radius: 4px; white-space: nowrap; }
.menu-skupina > summary::-webkit-details-marker { display: none; }
.menu-skupina > summary::after { content: " ▾"; font-size: .8em; opacity: .8; }
.menu-skupina > summary:hover, .menu-skupina[open] > summary, .menu-skupina.aktivni > summary { background: rgba(255,255,255,.18); }
.menu-rozbal { position: absolute; top: calc(100% + .3rem); left: 0; z-index: 20; min-width: 14rem; display: flex; flex-direction: column;
  background: var(--lista); padding: .3rem; border-radius: 0 0 6px 6px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.menu-rozbal a { white-space: nowrap; }

.obsah { max-width: 1500px; margin: 0 auto; padding: 1rem; }
.paticka { max-width: 1500px; margin: 0 auto; padding: 1rem; display: flex; gap: 1.5rem; color: var(--tlumeny); font-size: .85rem; }

/* ---- karty, formuláře ---- */
.karta { background: var(--pozadi); border: 1px solid var(--linka); border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.uzka { max-width: 460px; margin: 3rem auto; }
.mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
label { display: block; font-weight: 600; margin: .5rem 0 .2rem; }
input, select, textarea { font: inherit; color: var(--text); background: var(--pozadi); border: 1px solid var(--linka);
  border-radius: 4px; padding: .3rem .45rem; max-width: 100%; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }
.formular p { margin: .4rem 0; }
.formular input:not([type=checkbox]), .formular select, .formular textarea { width: 100%; }
.helptext { color: var(--tlumeny); font-size: .85rem; display: block; }
.errorlist { color: var(--chyba); margin: .2rem 0; padding-left: 1rem; }
button, .tlacitko { font: inherit; display: inline-block; padding: .38rem .9rem; border-radius: 4px; border: 1px solid var(--akcent);
  background: var(--akcent); color: var(--akcent-text); cursor: pointer; text-decoration: none; }
button.druhotne, .tlacitko.druhotne { background: var(--pozadi); color: var(--akcent); }
button.nebezpecne { background: var(--chyba); border-color: var(--chyba); color: #fff; }
.tlacitka { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.velke { font-size: 1.15rem; padding: .7rem 1.4rem; }

/* ---- zprávy ---- */
.zprava { padding: .5rem .8rem; border-radius: 4px; margin: .3rem 0; background: var(--info-pozadi); }
.zprava.success { background: var(--ok-pozadi); color: var(--ok); }
.zprava.error { background: var(--chyba-pozadi); color: var(--chyba); }
.zprava.warning { background: var(--varovani-pozadi); color: var(--varovani); }
.seznam-chyb { color: var(--chyba); }
.seznam-varovani { color: var(--varovani); }

/* ---- štítky stavů ---- */
.stav { display: inline-block; padding: .05rem .5rem; border-radius: 10px; font-size: .82rem; border: 1px solid currentColor; white-space: nowrap; }
.stav-rozpracovany { color: var(--tlumeny); }
.stav-odeslany { color: var(--akcent); }
.stav-vraceny { color: var(--chyba); }
.stav-schvaleny { color: var(--ok); }
.stav-chybi { color: var(--tlumeny); border-style: dashed; }
.stav-bez_uctu, .stav-vyprsela { color: var(--tlumeny); border-style: dashed; }
.stav-pozvan { color: var(--varovani); }
.stav-lokalni, .stav-m365 { color: var(--ok); }
h2 .stav { font-size: .72rem; font-weight: 400; vertical-align: middle; }

/* ---- tabulky ---- */
.tabulka-obal { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; background: var(--pozadi); }
table.data th, table.data td { border-bottom: 1px solid var(--linka); padding: .25rem .45rem; text-align: left; vertical-align: top; }
table.data th { background: var(--plocha); font-weight: 600; position: sticky; top: 0; }
table.data td.cislo, table.data th.cislo { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr.neaktivni td { color: var(--tlumeny); }
table.data tbody tr:hover > td,
table.vykaz tbody tr:hover > td,
table.kalendar tbody tr:hover > th,
table.kalendar tbody tr:hover > td:not([class*="kn-"]) { background: var(--radek-hover); }
table.data .skryty { display: none; }
/* přehledové tabulky (static/js/tabulky.js): ⚙ sloupce, řazení, rychlý filtr, stránkování */
table.data th.raditelny { cursor: pointer; user-select: none; white-space: nowrap; }
table.data th.raditelny:hover { color: var(--akcent); }
table.data th .sipka { font-size: .75em; color: var(--akcent); }
table.data .tab-sloupec-nastaveni { width: 2rem; padding: 0 .2rem; text-align: center; }
.tab-nastaveni { position: relative; display: inline-block; }
.tab-ozubene { background: transparent; border: 0; color: var(--tlumeny); font-size: 1.05rem; line-height: 1;
  padding: .15rem .3rem; cursor: pointer; border-radius: 4px; }
.tab-ozubene:hover, .tab-ozubene[aria-expanded="true"] { color: var(--akcent); background: var(--radek-hover); }
.tab-panel { position: fixed; z-index: 30; background: var(--pozadi); color: var(--text);
  border: 1px solid var(--linka); border-radius: 6px; padding: .5rem .8rem; box-shadow: 0 8px 22px rgba(0,0,0,.25);
  display: flex; flex-direction: column; gap: .2rem; min-width: 13rem; overflow-y: auto; text-align: left; }
.tab-panel[hidden] { display: none; }
.tab-panel-nadpis { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tlumeny); margin-bottom: .2rem; }
.tab-panel label { white-space: nowrap; font-weight: 400; cursor: pointer; }
.tab-lista { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin: .2rem 0 .4rem; }
.tab-info { color: var(--tlumeny); font-size: .88rem; }
input.tab-hledat { width: 15rem; max-width: 60%; padding: .25rem .55rem; font-size: .9rem; }
.tab-pata { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem 1.2rem;
  margin: .4rem 0 .8rem; font-size: .88rem; color: var(--tlumeny); }
.tab-pata:empty { display: none; }
.tab-strany { display: inline-flex; gap: .2rem; align-items: center; }
.tab-strana { min-width: 2rem; padding: .15rem .45rem; font-size: .88rem; background: transparent; color: var(--text);
  border: 1px solid var(--linka); border-radius: 4px; cursor: pointer; }
.tab-strana.aktivni { background: var(--akcent); color: var(--akcent-text); border-color: var(--akcent); }
.tab-strana:disabled { opacity: .4; cursor: default; }
.tab-velikost { font-weight: 400; }
.tab-velikost select { width: auto; padding: .15rem .3rem; font-size: .88rem; }
table.data tr.tab-nic td { color: var(--tlumeny); font-style: italic; }
.upozorneni { color: var(--varovani); font-size: .85rem; }

/* ---- výkaz ---- */
.vykaz-rozlozeni { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.vykaz-hlavicka { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; align-items: baseline; }
.vykaz-hlavicka .udaj { color: var(--tlumeny); }
table.vykaz { border-collapse: collapse; width: 100%; background: var(--pozadi); font-size: 13px; }
table.vykaz th, table.vykaz td { border-bottom: 1px solid var(--linka); padding: 2px 4px; height: var(--radek); vertical-align: middle; }
table.vykaz th { background: var(--plocha); text-align: left; font-weight: 600; }
table.vykaz caption { caption-side: bottom; text-align: left; padding: .3rem 0; font-size: 12px; }
table.vykaz tr.vikend td { background: var(--vikend); }
table.vykaz tr.svatek td { background: var(--svatek); }
table.vykaz tr.ma-chybu td:first-child { box-shadow: inset 3px 0 0 var(--chyba); }
table.vykaz select.kat { width: 11.5rem; }
table.vykaz input.cas { width: 4.1rem; text-align: center; }
table.vykaz input.h { width: 3.3rem; text-align: right; }
table.vykaz input.pozn { width: 100%; min-width: 7rem; }
/* úseky dne: každý úsek má stejné pevné sloupce (od – do | druh | podtyp/upřesnění), místo pro
   doplňkové pole je vyhrazené vždy → úseky všech dnů lícují a „+“ je vždy na stejném místě */
.useky { display: grid; grid-template-columns: max-content max-content; gap: 3px 8px; align-items: center; justify-content: start; }
.useky > .usek { grid-column: 1; }
.useky > .pridat-usek { grid-column: 2; grid-row: 1; }
.usek { display: grid; grid-template-columns: auto auto auto 5.6rem 6.8rem; gap: 2px; align-items: center;
  border: 1px solid var(--linka); border-radius: 4px; padding: 1px 3px; }
.usek select { width: 5.6rem; font-size: 12px; padding: 1px; }
.usek select.pt, .usek input.up { grid-column: 5; grid-row: 1; width: 6.8rem; font-size: 12px; }
[hidden] { display: none !important; }  /* atribut hidden vždy vyhraje nad display: grid/flex */
.pridat-usek { padding: 0 .45rem; line-height: 1.4; }
.den-chyba { color: var(--chyba); font-size: 12px; }
.mobil-odkaz { display: none; }
.datum-bunka { white-space: nowrap; }
.znacka-dne { font-size: 11px; color: var(--tlumeny); }

.panel { background: var(--pozadi); border: 1px solid var(--linka); border-radius: 6px; padding: .6rem .8rem; position: sticky; top: 52px; }
.panel h2 { margin-top: .2rem; }
.panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.panel td { padding: 2px 0; border-bottom: 1px dotted var(--linka); }
.panel td.cislo { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel a.rozpad { text-decoration: none; border-bottom: 1px dashed var(--akcent); }
.panel .zaporne, .zaporne { color: var(--chyba); font-weight: 600; }
.neulozeno { font-size: .82rem; color: var(--varovani); }
.rozpad-okno { margin-top: .8rem; }
.krok { margin: .15rem 0 .15rem .2rem; }
.krok > summary { cursor: pointer; }
.krok .param { color: var(--tlumeny); font-size: .82rem; }
.krok ul { margin: .2rem 0 .2rem 1rem; padding: 0; list-style: none; }

/* ---- dotyk: větší cíle jen pro hrubý ukazatel ---- */
@media (pointer: coarse) {
  button, .tlacitko, select, input { min-height: 40px; }
  table.vykaz input.cas { width: 5.2rem; }
}

/* ---- tablet ---- */
@media (max-width: 1199px) {
  .vykaz-rozlozeni { grid-template-columns: 1fr; }
  .panel { position: static; }
}

/* ---- mobil: tabulka výkazu → seznam řádků (žádné karty ani dlaždice) ---- */
@media (max-width: 759px) {
  .obsah { padding: .6rem; }
  .menu-tlacitko { display: inline-block; margin-left: auto; background: transparent; border-color: rgba(255,255,255,.5); }
  .menu { display: none; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--lista); padding: .5rem; }
  .menu.otevreno { display: flex; }
  .menu .uzivatel { margin: .3rem 0; }
  .menu-rozbal { position: static; box-shadow: none; padding: 0 0 0 1rem; min-width: 0; }
  table.vykaz thead { display: none; }
  table.vykaz, table.vykaz tbody, table.vykaz tr, table.vykaz td { display: block; width: 100%; }
  table.vykaz tr { border-bottom: 2px solid var(--linka); padding: .3rem 0; }
  table.vykaz td { border: 0; height: auto; padding: 2px 4px; }
  table.vykaz caption { display: none; }
  table.vykaz td[data-popis]::before { content: attr(data-popis) ": "; color: var(--tlumeny); font-size: 12px; }
  table.vykaz td.datum-bunka, table.vykaz td.kompakt { display: inline-block; width: auto; margin-right: .8rem; }
  table.vykaz td[data-popis="Kategorie"]::before, table.vykaz td[data-popis="Úseky"]::before { content: none; }
  .mobil-odkaz { display: inline-block !important; }
  table.vykaz select.kat { width: 100%; }
  table.vykaz input.pozn { width: 100%; }
  .datum-bunka { font-weight: 700; }
  table.data.prehled thead { display: none; }
  table.data.prehled tr { display: block; border-bottom: 2px solid var(--linka); }
  table.data.prehled td { display: block; border: 0; }
}

@media print {
  .lista, .paticka, .tlacitka, .panel .rozpad-okno { display: none; }
  body { background: #fff; }
}

/* ---- formuláře se skupinami polí (karta zaměstnance) ---- */
.omezena { max-width: 1100px; }
.dva-sloupce { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 1rem; align-items: start; }
.skupina { border: 1px solid var(--linka); border-radius: 6px; padding: .4rem .9rem .7rem; margin: 0 0 .8rem; }
.skupina legend { font-weight: 700; padding: 0 .3rem; color: var(--tlumeny); }
/* Mřížka polí: každé pole = 4 sdílené řádky (popisek / políčko / nápověda / chyba). Popisky v jedné
   řadě mají stejnou výšku a jsou zarovnané dolů → políčka jsou vždy v jedné linii, ať je popisek
   jedno- nebo víceřádkový a ať má sousední pole nápovědu, nebo ne. */
.pole-mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); column-gap: 1rem; }
.pole-radek, .radek-poli { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 14rem)); column-gap: 1.2rem; }
.pole-mrizka > .pole, .pole-radek > .pole, .radek-poli > .pole {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.pole-mrizka > .pole > label, .pole-radek > .pole > label, .radek-poli > .pole > label { align-self: end; }
.pole-mrizka > .pole > :is(input, select, textarea, button), .pole-radek > .pole > :is(input, select, textarea, button),
.radek-poli > .pole > :is(input, select, textarea, button) { grid-row: 2; align-self: center; }
.pole-mrizka > .pole > button, .pole-radek > .pole > button, .radek-poli > .pole > button { justify-self: start; }
.pole-mrizka > .pole > .helptext, .pole-radek > .pole > .helptext, .radek-poli > .pole > .helptext { grid-row: 3; }
.pole-mrizka > .pole > .errorlist, .pole-radek > .pole > .errorlist, .radek-poli > .pole > .errorlist { grid-row: 4; }
.pole-mrizka > .pole-siroke, .pole-radek > .pole-siroke, .radek-poli > .pole-siroke { grid-column: 1 / -1; }
.pole label { margin-top: .4rem; }
.pole-zaskrt label { display: flex; gap: .4rem; align-items: center; font-weight: 600; margin-top: .9rem; }
/* zaškrtávátko v mřížce: v řádce políček (ne popisků), aby lícovalo se sousedními vstupy */
.pole-mrizka > .pole-zaskrt > label, .pole-radek > .pole-zaskrt > label, .radek-poli > .pole-zaskrt > label {
  grid-row: 2; align-self: center; margin-top: 0; min-height: 2.1rem; }
.pole-zaskrt .helptext { margin-left: 1.6rem; }
.formular .pole-radek input[type=date], .formular .radek-poli input[type=date] { width: 100%; }
.formular .radek-poli input[type=number], .formular .radek-poli input[type=text] { width: 100%; }
.pole-siroke { flex: 1 1 18rem; }
.formular .pole-siroke input, .formular .pole-siroke textarea { width: 100%; }
.rozvrh-radek { display: grid; grid-template-columns: 11rem repeat(7, minmax(3.6rem, 4.6rem)) auto; gap: .4rem; align-items: end; }
.formular .rozvrh-radek input { width: 100%; }
.radek-formulare { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin: .5rem 0; }
.radek-formulare label { margin: 0; font-weight: 600; }
.radek-formulare select { width: auto; }
input.h4 { width: 5rem; } input.h2 { width: 3.5rem; }
table.data.kompaktni { width: auto; min-width: 50%; }
@media (max-width: 1099px) { .dva-sloupce { grid-template-columns: 1fr; } }
@media (max-width: 759px) {
  .rozvrh-radek { grid-template-columns: repeat(4, 1fr); }
  .rozvrh-radek .pole:first-child { grid-column: 1 / -1; }
}
.formular .radek-poli .pole-siroke input { width: 100%; min-width: 14rem; }
input.h { width: 6rem; }
textarea.pozn-vykaz { width: 100%; max-width: 60rem; }

/* ---- výstražná tlačítka a potvrzovací dialog ---- */
button.varovne, .tlacitko.varovne { background: var(--varovne); border-color: var(--varovne); color: var(--varovne-text); }
button.nebezpecne, .tlacitko.nebezpecne { background: var(--chyba); border-color: var(--chyba); color: #fff; }
button.male, .tlacitko.male { padding: .1rem .5rem; font-size: .85rem; }
.dialog { border: 1px solid var(--linka); border-radius: 8px; background: var(--pozadi); color: var(--text); padding: 1.2rem 1.4rem; max-width: 440px; }
.dialog::backdrop { background: rgba(0, 0, 0, .55); }
.dialog-text { font-weight: 600; margin: 0 0 .8rem; }
.zpet { display: inline-block; margin: 0 0 .4rem; text-decoration: none; }
.zpet:hover { text-decoration: underline; }

/* ---- seznam přes celou šířku + „Nová položka“ v dialogu ---- */
:root { --nove: #15803d; --nove-text: #ffffff; }
.hlavicka-stranky { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.hlavicka-stranky h1, .hlavicka-stranky h2 { margin: 0; }
button.tlacitko-nove, .tlacitko.tlacitko-nove { background: var(--nove); border-color: var(--nove); color: var(--nove-text); font-weight: 600; }
.formular-dialog { width: min(680px, 95vw); max-height: 90vh; overflow: auto; padding: 1rem 1.4rem; }
.formular-dialog h2 { margin-top: 0; }
.formular-dialog .formular input:not([type=checkbox]), .formular-dialog .formular select, .formular-dialog .formular textarea { width: 100%; }
.rozvrh-dialog { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 759px) { .rozvrh-dialog { grid-template-columns: repeat(4, 1fr); } .rozvrh-dialog .pole:first-child { grid-column: auto; } }
.formular-dialog { max-width: 95vw; }

/* ---- žádosti, kalendář nepřítomností, plán dovolených ---- */
.stav-ke_schvaleni { color: var(--akcent); }
.stav-schvaleno { color: var(--ok); }
.stav-zamitnuto { color: var(--chyba); }
.stav-zruseno { color: var(--tlumeny); }
.stav-plan { color: var(--varovani); border-style: dashed; }
.prognoza { border-top: 1px solid var(--linka); margin-top: .6rem; padding-top: .3rem; font-size: .92rem; }
.prognoza ul { margin: .2rem 0 .2rem 1rem; padding: 0; }
.legenda { font-size: .85rem; color: var(--tlumeny); }
.kalendar-obal { padding: 0; }
table.kalendar { border-collapse: separate; border-spacing: 0; font-size: 12px; background: var(--pozadi); }
table.kalendar th, table.kalendar td { border-right: 1px solid var(--linka); border-bottom: 1px solid var(--linka);
  min-width: 28px; height: 26px; padding: 0 2px; text-align: center; white-space: nowrap; }
table.kalendar thead th { background: var(--plocha); font-weight: 600; position: sticky; top: 0; z-index: 2; }
table.kalendar thead th .den { display: block; font-weight: 400; color: var(--tlumeny); font-size: 11px; }
table.kalendar .jmeno { position: sticky; left: 0; z-index: 1; background: var(--pozadi); text-align: left;
  min-width: 11rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; padding: 0 .45rem; font-weight: 600; }
table.kalendar thead .jmeno { z-index: 3; background: var(--plocha); }
table.kalendar tfoot th, table.kalendar tfoot td { background: var(--plocha); font-weight: 600; }
table.kalendar .vikend { background: var(--vikend); }
table.kalendar .svatek { background: var(--svatek); }
table.kalendar th.dnes { box-shadow: inset 0 -3px 0 var(--akcent); }
table.kalendar tr.vlastni .jmeno { color: var(--akcent); }
.kn { display: inline-block; min-width: 1.6em; line-height: 1.5; text-align: center; vertical-align: middle; border-radius: 3px; border: 1px solid var(--linka); }
.kn-schvaleno, td.kn-schvaleno { background: var(--info-pozadi); color: var(--akcent); font-weight: 600; }
.kn-skutecnost, td.kn-skutecnost { background: var(--akcent); color: var(--akcent-text); font-weight: 600; }
.kn-ceka, td.kn-ceka { color: var(--akcent);
  background: repeating-linear-gradient(135deg, var(--pozadi) 0 3px, var(--info-pozadi) 3px 6px); }
td.kn { display: table-cell; border-radius: 0; border-width: 0 1px 1px 0; }
.terminy { display: flex; flex-wrap: wrap; gap: 3px 6px; }
.termin { border: 1px solid var(--linka); border-radius: 4px; padding: 0 .4rem; text-decoration: none; white-space: nowrap; font-size: .88rem; }
.termin-schvaleno { background: var(--ok-pozadi); color: var(--ok); }
.termin-ke_schvaleni { border-style: dashed; }
.termin-prekryv { border-color: var(--varovne); box-shadow: inset 0 0 0 1px var(--varovne); }
.termin-den { font-weight: 600; }
.termin-po { border-color: var(--varovne); color: var(--varovne); }
table.data tr.vlastni td:first-child { box-shadow: inset 3px 0 0 var(--akcent); }
@media (max-width: 759px) {
  table.kalendar .jmeno { min-width: 7.5rem; max-width: 8.5rem; font-size: 11px; }
  table.kalendar .jmeno .tlumeny { display: none; }
  table.kalendar th, table.kalendar td { min-width: 32px; height: 32px; }
}
/* dohody: obsah v mřížce výkazu se nesmí roztáhnout přes šířku displeje */
.vykaz-rozlozeni > * { min-width: 0; }

/* výkaz na mobilu: úsek od–do | druh | +, doplňkové pole (podtyp / upřesnění) na vlastním řádku */
@media (max-width: 759px) {
  .useky { grid-template-columns: minmax(0, 1fr) max-content; }
  .usek { grid-template-columns: auto auto auto minmax(0, 1fr); }
  .usek select.druh { width: 100%; }
  .usek select.pt, .usek input.up { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  table.vykaz tr.vikend { background: var(--vikend); }  /* celý blok dne, ne jen některé buňky */
  table.vykaz tr.svatek { background: var(--svatek); }
}

/* přihlášení / ověření: passkey a další metody */
.passkey-blok { margin-top: .6rem; }
.oddelovac { display: flex; align-items: center; gap: .6rem; color: var(--tlumeny); font-size: .85rem; margin: .8rem 0 .5rem; }
.oddelovac::before, .oddelovac::after { content: ""; flex: 1; border-top: 1px solid var(--linka); }
button.siroke { width: 100%; }
.jine-overeni { margin: .8rem 0; }
.jine-overeni > summary { cursor: pointer; color: var(--akcent); }
.metoda-overeni { border: 1px solid var(--linka); border-radius: 6px; padding: .4rem .9rem .8rem; margin: .8rem 0; }
.metoda-overeni.doporucena { border-color: var(--akcent); }
.metoda-overeni h2 { font-size: 1.05rem; margin: .4rem 0; }

/* volba metody druhého faktoru */
.volba-metod { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0 1rem; }
.volba-metod form { margin: 0; }
.metoda { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; width: 100%; text-align: left;
  padding: .7rem .9rem; border: 1px solid var(--linka); border-radius: 8px; background: var(--pozadi); color: var(--text);
  text-decoration: none; cursor: pointer; font: inherit; }
.metoda:hover, .metoda:focus-visible { border-color: var(--akcent); background: var(--radek-hover); }
.metoda strong { font-size: 1.02rem; }
.metoda .popis { flex-basis: 100%; color: var(--tlumeny); font-size: .88rem; }

/* náhled správce („přihlásit se jako“) — výrazný pruh nad lištou */
.nahled-pruh { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem 1rem; padding: .45rem 1rem; background: #b45309; color: #fff; font-size: .92rem; }
.nahled-pruh button { background: #fff; color: #7c2d12; border: 0; font-weight: 600; padding: .2rem .8rem; border-radius: 4px; cursor: pointer; }
.nahled-pruh ~ .lista { top: 2.4rem; }