:root {
  --bg: #f4f5f7;
  --text: #1b1f23;
  --karta: #ffffff;
  --okraj: #c9ced6;
  --tlumeny: #566070;
  --akcent: #1f5fbf;
  --akcent-text: #ffffff;
  --cervena: #b3261e;
  --cervena-bg: #fbe9e7;
  --oranzova: #8a4b00;
  --oranzova-bg: #fff1dc;
  --zelena: #1e6b3a;
  --zelena-bg: #e4f4ea;
  --spz-bg: #ffffff;
  --spz-text: #111111;
  --spz-eu: #003399;
  --lista-1: #3b82f6;
  --lista-2: #d97706;
  --lista-3: #16a34a;
  --lista-4: #9333ea;
  --lista-5: #0d9488;
  --lista-6: #64748b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --text: #e8eaed;
    --karta: #1e2226;
    --okraj: #3a4148;
    --tlumeny: #a0a8b3;
    --akcent: #6ea2ff;
    --akcent-text: #0b1220;
    --cervena: #ff8a80;
    --cervena-bg: #3b1d1b;
    --oranzova: #ffb74d;
    --oranzova-bg: #3a2a10;
    --zelena: #7fd9a0;
    --zelena-bg: #17301f;
  }
}

* { box-sizing: border-box; }

/* Own dark theme below: tells the browser not to auto-darken the colours again. */
html { overflow-x: hidden; color-scheme: light dark; }

body {
  margin: 0;
  padding: 0 0 104px;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
}

main { max-width: 640px; margin: 0 auto; padding: 16px; }

h1 { font-size: 1.5rem; margin: 8px 0 12px; }
h2 { font-size: 1.125rem; margin: 20px 0 8px; }
h3 { font-size: 1rem; margin: 0 0 4px; }
p { margin: 4px 0; }
a { color: var(--akcent); }

header {
  padding: 12px 16px 12px 27px;
  background: var(--karta);
  border: 1px solid var(--okraj);
  border-radius: 12px;
  margin-bottom: 16px;
}
header h1 { margin-top: 0; }

.detail-fotka {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}

/* Sections are divided by a line and a heading with an accent bar. */
section { margin: 20px 0 8px; border-top: 2px solid var(--okraj); }
section > h2, summary.nadpis-sekce { margin-top: 10px; padding-left: 10px; border-left: 4px solid var(--akcent); }

.zprava {
  padding: 12px;
  border: 1px solid var(--okraj);
  border-left: 6px solid var(--akcent);
  background: var(--karta);
  border-radius: 8px;
}

label { display: block; margin: 8px 0 2px; font-weight: 600; }
label.volba { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 400; }
label.volba input { width: 24px; height: 24px; min-height: 0; flex: none; }

input, select, button, summary, .tlacitko, .odkaz {
  min-height: 44px;
  font: inherit;
}

input[type="text"], input[type="password"], input[type="date"], select {
  width: 100%;
  padding: 8px 12px;
  color: var(--text);
  background: var(--karta);
  border: 1px solid var(--okraj);
  border-radius: 8px;
}

button, .tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 6px 16px;
  color: var(--akcent-text);
  background: var(--akcent);
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

label.nahrat { display: flex; width: 100%; margin: 12px 0 0; }
label.vedlejsi { color: var(--text); background: transparent; border: 1px solid var(--okraj); }

/* Visually hidden but focusable; the label is the button. */
input.skryty[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

button.mala { margin-top: 4px; padding: 8px 14px; color: var(--text); background: transparent; border: 1px solid var(--okraj); font-weight: 400; }
button.nebezpeci { background: var(--cervena); color: var(--bg); }

.odkaz { display: inline-flex; align-items: center; }

summary { display: flex; align-items: center; cursor: pointer; font-weight: 600; }
summary::before { content: "▸"; margin-right: 8px; color: var(--tlumeny); }
details[open] > summary::before { content: "▾"; }
summary.nadpis-sekce { font-size: 1.125rem; margin: 20px 0 8px; min-height: 48px; }
details { margin: 0; }

fieldset { border: 1px solid var(--okraj); border-radius: 8px; margin: 16px 0 0; }
.napoveda { color: var(--tlumeny); font-size: 0.875rem; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0; }
dt { color: var(--tlumeny); }
dd { margin: 0; overflow-wrap: anywhere; }

.seznam { list-style: none; margin: 0; padding: 0; }

.radek {
  margin: 4px 0;
  padding: 6px 10px;
  background: var(--karta);
  border: 1px solid var(--okraj);
  border-left: 6px solid var(--okraj);
  border-radius: 8px;
}
.radek > a { display: block; min-height: 44px; color: inherit; text-decoration: none; }
.radek.prosly { border-left-color: var(--cervena); background: var(--cervena-bg); }
.radek.brzy { border-left-color: var(--oranzova); background: var(--oranzova-bg); }
.radek.pozdeji, .box { border-left-color: var(--zelena); }
.box { background: var(--zelena-bg); color: var(--zelena); font-weight: 600; }

.radek-kompakt {
  padding: 0 12px;
}
.radek-kompakt > a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.radek-kompakt .stitek {
  flex: none;
  margin-right: 0;
}
.radek-kompakt .kompakt-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.radek-kompakt .stav {
  flex: none;
  margin-left: auto;
  white-space: nowrap;
}

.stav { display: block; color: var(--tlumeny); }
small { display: block; font-size: 0.875rem; color: var(--tlumeny); }
.verze { margin: 24px 0 0; text-align: center; font-size: 0.75rem; color: var(--tlumeny); }
.radek-hlava { display: flex; justify-content: space-between; gap: 8px; }
.prosly .stav, p.prosly { color: var(--cervena); }
.brzy .stav, p.brzy { color: var(--oranzova); }
p.pozdeji { color: var(--zelena); }

.stitek {
  display: inline-block;
  margin-right: 6px;
  padding: 0 8px;
  font-size: 0.875rem;
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.prosly .stitek { color: var(--cervena); }
.brzy .stitek { color: var(--oranzova); }
.pozdeji .stitek { color: var(--zelena); }

.karta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 8px 0;
  padding: 12px 16px 12px 27px;
  color: inherit;
  text-decoration: none;
  background: var(--karta);
  border: 1px solid var(--okraj);
  border-radius: 12px;
}

/* The stripe is a border, not a background: forced dark mode (Samsung Internet) darkens
   backgrounds but leaves border colours alone. */
header, .karta { border-left: 10px solid var(--barva, var(--okraj)); padding-left: 16px; }

.karta-fotka {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}

.karta-telo {
  flex: 1 1 0;
  min-width: 0;
}

.identita { color: var(--tlumeny); }
/* A Czech number plate: white with a blue EU band, in both themes. */
.spz { display: inline-flex; align-items: stretch; margin-right: 8px; padding-right: 8px; overflow: hidden;
       vertical-align: middle; white-space: nowrap; color: var(--spz-text); background: var(--spz-bg);
       border: 2px solid var(--spz-text); border-radius: 8px; font-weight: 700; letter-spacing: .06em; line-height: 1.4; }
.spz::before { content: "CZ"; display: flex; align-items: flex-end; margin-right: 8px; padding: 0 3px;
               color: var(--spz-bg); background: var(--spz-eu); font-size: 0.75rem; letter-spacing: 0; }
/* Brand mark in the card corner; grey, so it never reads as a status. */
.karta { position: relative; }
.karta h3 { padding-right: 40px; }
/* Inline vector logos: brand colours are in the files, black parts follow the text colour. */
.logo { position: absolute; top: 8px; right: 12px; width: 64px; height: 32px; fill: currentColor; }

.prihlaseni { max-width: 360px; margin: 12vh auto 0; padding: 24px; text-align: center;
  background: var(--karta); border: 1px solid var(--okraj); border-radius: 12px; }
.prihlaseni > svg { width: 64px; height: 64px; padding: 12px; fill: var(--akcent-text);
  background: var(--akcent); border-radius: 12px; }
.prihlaseni h1 { margin: 12px 0 4px; }
.prihlaseni > p { margin: 0 0 20px; color: var(--tlumeny); font-size: 0.875rem; }
.prihlaseni form { text-align: left; }
.prihlaseni button { width: 100%; }
.karta-stav { flex: 1 1 100%; min-width: 0; }
.sloty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.slot { padding: 4px 2px; overflow: hidden; text-align: center; white-space: nowrap; font-size: 0.875rem;
        font-weight: 600; border-radius: 8px; color: var(--tlumeny); border: 1px dashed var(--okraj); }
.slot small { font-size: 0.75rem; font-weight: 400; color: inherit; }
.slot.pozdeji { color: var(--zelena); background: var(--zelena-bg); border: 1px solid transparent; }
.slot.brzy { color: var(--oranzova); background: var(--oranzova-bg); border: 1px solid transparent; }
.slot.prosly { color: var(--cervena); background: var(--cervena-bg); border: 1px solid transparent; }
.cipy { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cip { padding: 0 8px; font-size: 0.875rem; font-weight: 600; border-radius: 999px;
       color: var(--tlumeny); background: var(--karta); border: 1px dashed var(--okraj); }
.cip.pozdeji { color: var(--zelena); background: var(--zelena-bg); border: 1px solid transparent; }
.cip.brzy { color: var(--oranzova); background: var(--oranzova-bg); border: 1px solid transparent; }
.cip.prosly { color: var(--cervena); background: var(--cervena-bg); border: 1px solid transparent; }

.souhrn { width: 100%; border-collapse: collapse; background: var(--karta); border: 1px solid var(--okraj); }
.souhrn th, .souhrn td { padding: 10px 4px; text-align: center; font-size: 0.875rem; font-weight: 400; border-top: 1px solid var(--okraj); }
.souhrn tr:first-child th { border-top: 0; color: var(--tlumeny); }
.souhrn th:first-child { text-align: left; padding-left: 12px; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.souhrn a { color: inherit; text-decoration: none; }
.souhrn.siroky th:first-child { max-width: none; white-space: normal; }
/* The dot says the status with a sign as well as a colour. */
.tecka { display: inline-block; width: 20px; height: 20px; line-height: 16px; border-radius: 50%; border: 2px solid var(--okraj);
         font-size: 0.75rem; font-weight: 700; color: var(--karta); }
.tecka.pozdeji::after { content: "✓"; }
.tecka.brzy::after { content: "!"; }
.tecka.prosly::after { content: "✕"; }
.tecka.pozdeji { background: var(--zelena); border-color: var(--zelena); }
.tecka.brzy { background: var(--oranzova); border-color: var(--oranzova); }
.tecka.prosly { background: var(--cervena); border-color: var(--cervena); }

/* Deadline rows on the car page: one line, the actions fold under a "⋯" in the corner. */
.radek-termin { position: relative; }
.radek-termin > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-height: 32px; padding-right: 40px; }
.radek-termin > div .stitek { margin-right: 0; }
.radek-termin > details > summary { position: absolute; top: 0; right: 0; width: 44px; justify-content: center; font-size: 1.5rem; color: var(--tlumeny); }
.radek-termin > details > summary::before { content: none; }

.prazdno { text-align: center; padding: 24px 0; }

.lista {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--karta);
  border-top: 1px solid var(--okraj);
}
.lista a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  color: var(--tlumeny);
  text-decoration: none;
  font-size: 0.75rem;
}
.lista svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lista a:nth-child(1) svg { stroke: var(--lista-1); }
.lista a:nth-child(2) svg { stroke: var(--lista-2); }
.lista a:nth-child(3) svg { stroke: var(--lista-3); }
.lista a:nth-child(4) svg { stroke: var(--lista-4); }
.lista a:nth-child(5) svg { stroke: var(--lista-5); }
.lista a:nth-child(6) svg { stroke: var(--lista-6); }
.lista a[aria-current="page"] { color: var(--akcent); border-top: 3px solid var(--akcent); font-weight: 600; }

input[type="file"] { width: 100%; padding: 8px 0; font: inherit; }

.varovani {
  padding: 12px;
  color: var(--oranzova);
  background: var(--oranzova-bg);
  border: 1px solid var(--okraj);
  border-left: 6px solid var(--oranzova);
  border-radius: 8px;
}

.nahledy { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.nahled img { display: block; max-height: 140px; max-width: 100%; border: 1px solid var(--okraj); border-radius: 8px; }

.hlavni-datum { margin: 12px 0; }
.hlavni-datum strong { font-size: 2rem; line-height: 1.2; }

.puvod.nejiste { color: var(--oranzova); font-weight: 600; }
.puvod { display: block; margin-top: 2px; color: var(--tlumeny); font-size: 0.875rem; }

input.nenalezeno, select.nenalezeno { border-color: var(--oranzova); border-width: 2px; background: var(--oranzova-bg); }

.akce { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.radek ul { margin: 4px 0; padding-left: 20px; }
.radek h2 { margin-top: 0; }

.ukony-tabulka { width: 100%; border-collapse: collapse; margin: 8px 0; }
.ukony-tabulka td { padding: 4px 6px; vertical-align: middle; }
.ukony-tabulka td:first-child { width: 50%; }
.ukony-tabulka th { padding: 0 6px; text-align: left; font-size: 0.875rem; font-weight: 400; color: var(--tlumeny); }
.ukony-tabulka input.jine { border: 2px solid var(--akcent); }
.vyr { font-size: 0.75rem; text-align: center; }
.vyr.jine { color: var(--akcent); font-weight: 700; }
.ukony-tabulka td label { margin: 0 0 2px; font-weight: normal; font-size: 0.875rem; }
.ukony-tabulka input[type="text"] { width: 100%; min-height: 44px; padding: 4px 8px; }