:root {
  --surface-1:      #fcfcfb;
  --page:           #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);

  --series-1: #2a78d6; /* blue    - Krabice #1 */
  --series-2: #1baf7a; /* aqua    - Krabice #2 */
  --series-3: #eda100; /* yellow  - Krabice #3 */
  --series-4: #008300; /* green   - Krabice #4 */
  --series-5: #4a3aa7; /* violet  - Krabice #5 */

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-1:      #1a1a19;
    --page:           #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255,255,255,0.10);

    --series-1: #3987e5;
    --series-2: #199e70;
    --series-3: #c98500;
    --series-4: #008300;
    --series-5: #9085e9;

    --good: #0ca30c;
    --warning: #fab219;
    --critical: #d03b3b;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
}

img { max-width: 100%; display: block; }

/* ---------- Topbar ---------- */
/* Hlavička je schválně na jeden řádek: hamburger, název a dvě čísla.
   Všechno ostatní (odkazy, zbylé statistiky, filtry) je v nabídce. */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.topbar h1 {
  margin: 0; font-size: 1.05rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.menu-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--page); color: var(--text-primary);
  font-size: 1.1rem; cursor: pointer;
}
.menu-btn:hover { border-color: var(--series-1); color: var(--series-1); }
.menu-btn.aktivni { background: var(--series-1); border-color: var(--series-1); color: #fff; }

/* Hledání pod lupou — vysune se přes celou šířku pod hlavičkou. */
.search-panel {
  padding: 10px 16px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.search-panel[hidden] { display: none; }
.search-form { display: flex; gap: 8px; max-width: 720px; }
.search-form .search-input {
  flex: 1; min-width: 0;
  font-size: 16px;   /* pod 16 px iOS při zaostření zvětší stránku */
}
.search-submit {
  flex: 0 0 auto; cursor: pointer;
  padding: 8px 16px;
  border: 1px solid var(--series-1); border-radius: 8px;
  background: var(--series-1); color: #fff;
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
}

/* Ovládací prvky mají jednotný tvar: stejný rádius, rámeček i výška —
   dřív měl každý (pole, výběr, přepínač zobrazení) svůj. */
.search-input, .select-input, .text-input, .range-inputs input {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--page);
  color: var(--text-primary);
  font-family: inherit;
  padding: 8px 10px;
}
.search-input:focus, .select-input:focus, .text-input:focus, .range-inputs input:focus {
  outline: 2px solid var(--series-1); outline-offset: -1px;
}
.view-toggle { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.view-btn { border: 0; padding: 8px 12px; cursor: pointer; background: var(--page); color: var(--text-primary); }
.view-btn.active { background: var(--series-1); color: #fff; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px 0; }

.stats { display: flex; gap: 18px; flex: 0 0 auto; margin-left: auto; }
.stats .stat-value { font-size: 1.05rem; }
.stats .stat-label { font-size: 0.68rem; }

/* Statistiky v nabídce — tam je místo na všechna čísla. */
.stats-menu {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
  margin: 2px 0 10px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.stats-menu .stat-tile { text-align: left; }
.stats-menu .stat-value { font-size: 1rem; }
.stats-menu .stat-label { font-size: 0.66rem; line-height: 1.25; }
.stat-tile { text-align: right; }
.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-label { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- Krabice breakdown bar ---------- */


/* ---------- Layout ---------- */
.layout { display: flex; flex-direction: row-reverse; align-items: flex-start; }

/* Nabídka je výsuvný panel na všech šířkách — otevírá ji hamburger
   v hlavičce. Dřív byla napevno vlevo a na telefonu se k ní muselo přes
   druhé tlačítko v liště; teď je to jedno místo pro filtry i odkazy. */
/* Nabídka je vpravo — na téže straně jako hamburger, který ji otevírá.
   Na velké obrazovce stojí trvale u pravého okraje, na úzké se z ní stane
   výsuvný panel — viz media dole. */
.sidebar {
  flex: 0 0 280px;
  width: 280px;
  padding: 16px;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

.menu-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.35);
}
.menu-overlay[hidden] { display: none; }
body.menu-otevrene { overflow: hidden; }

.sidebar-header-akce { display: flex; align-items: center; gap: 10px; }
.menu-zavrit {
  border: 0; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; padding: 2px 4px;
}
.menu-zavrit:hover { color: var(--critical); }

.menu-odkazy {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
}
.menu-odkazy a { color: var(--text-primary); text-decoration: none; }
.menu-odkazy a:hover { color: var(--series-1); }
.menu-odkazy .odhlasit-odkaz { color: var(--text-muted); font-size: 0.82rem; }
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.sidebar-header h2 { font-size: 1rem; margin: 0; }

/* Rozbalovací skupina filtrů: zavřená zabírá jeden řádek. */
.filter-group { margin: 0; border-bottom: 1px solid var(--border); }
.filter-group > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 2px;
  cursor: pointer;
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-secondary);
  list-style: none;
}
.filter-group > summary::-webkit-details-marker { display: none; }
/* Vlastní šipka, ať vypadá stejně ve všech prohlížečích. */
.filter-group > summary::before {
  content: "▸"; color: var(--text-muted); font-size: 0.7rem;
  transition: transform .15s ease;
}
.filter-group[open] > summary::before { content: "▾"; }
.filter-group > summary:hover { color: var(--series-1); }
.filter-group.aktivni > summary { color: var(--series-1); }
.filter-group > *:not(summary) { margin-bottom: 12px; }

.filter-znacka {
  margin-left: auto;
  min-width: 18px; padding: 1px 6px;
  border-radius: 999px;
  background: var(--series-1); color: #fff;
  font-size: 0.68rem; font-weight: 700; text-align: center;
  letter-spacing: 0;
}
.filter-znacka[hidden] { display: none; }

.filter-group.prepinace { padding: 12px 0; }
.filter-group.prepinace .switch-row:last-child { margin-bottom: 0; }

.checkbox-list { display: flex; flex-direction: column; gap: 6px; }
.checkbox-list.scrollable { max-height: 220px; overflow-y: auto; padding-right: 4px; }
.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  cursor: pointer;
}
.checkbox-list .count { margin-left: auto; color: var(--text-muted); font-size: 0.8rem; }

.range-inputs { display: flex; align-items: center; gap: 8px; }
.range-inputs input { width: 100%; }

input, select {
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text-primary);
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}

.text-input { width: 100%; margin-bottom: 8px; }

.switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  margin-bottom: 8px;
  cursor: pointer;
}

.link-btn {
  background: none;
  border: none;
  color: var(--series-1);
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0;
}

/* ---------- Odkazy v hlavičce ---------- */
/* Rozcestník a odhlášení. V hlavičce schválně: v postranním panelu by byly
   až pod seznamem žánrů, kam se musí scrollovat. */
.topbar-odkazy {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rozcestnik-odkaz {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--page);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.rozcestnik-odkaz:hover { border-color: var(--series-1); color: var(--series-1); }
.odhlasit-odkaz {
  color: var(--text-muted);
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
}
.odhlasit-odkaz:hover { color: var(--critical); text-decoration: underline; }

/* Na úzkém displeji ať odkazy nezabírají celý řádek pod statistikami. */
@media (max-width: 720px) {
  .topbar { gap: 10px; }
  .topbar-odkazy { width: 100%; justify-content: space-between; }
}

/* ---------- Content ---------- */
.content { flex: 1; min-width: 0; padding: 18px 24px; }

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.search-input { flex: 1; min-width: 200px; }
.select-input { min-width: 160px; }

.view-toggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.view-btn {
  background: var(--surface-1);
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-secondary);
}
.view-btn.active { background: var(--series-1); color: white; }

.mobile-only { display: none; }
.icon-btn {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

.result-count { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 8px; }

/* ---------- Table view ---------- */
.table-view { overflow-x: auto; background: var(--surface-1); border-radius: 8px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
thead th {
  position: sticky;
  top: 0;
  background: var(--surface-1);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gridline);
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
thead th:hover { color: var(--text-primary); }
tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--gridline);
  vertical-align: middle;
}
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--page); }
.thumb-cell img {
  width: 36px; height: 36px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--border);
}
.thumb-cell .no-photo { width:36px; height:36px; display:flex; align-items:center; justify-content:center; color: var(--text-muted); }
.num-cell { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
}
.badge-ponechat { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.badge-prodat { background: color-mix(in srgb, var(--warning) 22%, transparent); color: #8a5c00; }
.badge-vyradit { background: color-mix(in srgb, var(--critical) 16%, transparent); color: var(--critical); }
.badge-neurceno { background: var(--gridline); color: var(--text-muted); }

/* ---------- Grid view ---------- */
.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.card:hover { border-color: var(--series-1); }
.card-thumb {
  aspect-ratio: 3/4;
  background: var(--page);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.6rem;
  position: relative;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-star { position: absolute; top: 6px; right: 6px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.card-body { padding: 8px 10px; }
.card-autor { font-size: 0.78rem; color: var(--text-secondary); }
.card-nazev { font-size: 0.88rem; font-weight: 600; margin: 2px 0 4px; line-height: 1.25; }
.card-meta { font-size: 0.76rem; color: var(--text-muted); }

.hidden { display: none !important; }

.empty-state { text-align: center; color: var(--text-muted); padding: 60px 0; }

/* ---------- Modal ---------- */
/* Detail knihy: chová se jako další stránka, ne jako vyskakovací okno.
   Zabírá plochu POD hlavičkou, aby zůstal po ruce název (tlačítko domů),
   lupa i nabídka — stejně jako v Receptáři. Zavírá se tlačítkem „Zpět"
   nebo systémovým zpět, protože má vlastní záznam v historii. */
.detail-knihy {
  /* Ne fixed přes celou obrazovku: detail je normální obsah stránky, takže
     hlavička s názvem, lupou a nabídkou zůstane nad ním tak jako na seznamu.
     Seznam se pod ním neschovává, ale rovnou vystřídá — je to jiná stránka. */
  background: var(--page);
  min-height: 60vh;
}
.detail-knihy.hidden { display: none; }
.detail-lista {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 16px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.detail-zpet {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--page); color: var(--text-primary);
  padding: 8px 14px; cursor: pointer;
  font-family: inherit; font-size: 0.88rem;
}
.detail-zpet:hover { border-color: var(--series-1); color: var(--series-1); }
.detail-obsah { max-width: 720px; margin: 0 auto; padding: 22px 16px 48px; }
.detail-obsah h2 { margin: 0 0 4px; }
.modal-autor { color: var(--text-secondary); margin: 0 0 16px; }
.modal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 16px; font-size: 0.9rem; }
.modal-field-label { color: var(--text-muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: .03em; }
.modal-poznamka {
  background: var(--page);
  border-left: 3px solid var(--series-3);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.trhknih-stav {
  background: var(--page);
  border-left: 3px solid var(--series-2);
  padding: 8px 12px; border-radius: 0 6px 6px 0;
  font-size: 0.86rem; margin-bottom: 14px;
}
.trhknih-stav.chybi { border-left-color: var(--border); color: var(--text-secondary); }
.trhknih-kdy { color: var(--text-muted); font-size: 0.78rem; }

.modal-links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.modal-links a {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--series-1);
}
.modal-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.modal-photos img { width: 110px; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; }
.modal-photos-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .stats { gap: 14px; }
  .modal-fields { grid-template-columns: 1fr; }

  /* Vyjíždí zprava, od hamburgeru, který ji ovládá. */
  .sidebar {
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: min(300px, 85vw);
    z-index: 50;
    max-height: none;
    transform: translateX(100%);
    transition: transform .2s ease;
    box-shadow: -3px 0 24px rgba(0,0,0,.2);
  }
  .sidebar.open { transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
}

/* Na velké obrazovce je nabídka pořád vidět, takže hamburger ani křížek
   nedávají smysl. */
@media (min-width: 861px) {
  #menuToggle, .menu-zavrit, .menu-overlay { display: none !important; }
}

/* Na úzkém displeji zabírají čísla v hlavičce místo názvu — stačí, že jsou
   v nabídce. */
@media (max-width: 560px) {
  .topbar .stats { display: none; }
}

/* ---------- Galerie fotek ---------- */
/* Náhled v detailu knihy otevře fotku přímo tady, ne v prázdné nové kartě. */
.galerie {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 24px;
  /* Dole se vyhradí místo pro ovládání. Dřív leželo přes fotku a na světlé
     vazbě splynulo do nečitelna — bílý text na bílém plátně. */
  padding-bottom: var(--galerie-dno, 132px);
  background: rgba(0,0,0,.9);
}
.galerie.hidden { display: none; }
.galerie img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.galerie-zavrit {
  position: absolute; top: 12px; right: 16px;
  border: 0; background: none; cursor: pointer;
  color: #fff; font-size: 1.6rem; line-height: 1;
  padding: 4px 8px;
}
.galerie-sip {
  border: 0; background: rgba(255,255,255,.12); cursor: pointer;
  color: #fff; font-size: 2rem; line-height: 1;
  border-radius: 999px; width: 48px; height: 48px;
  flex: 0 0 auto;
}
.galerie-sip:hover { background: rgba(255,255,255,.25); }
.galerie-sip[hidden] { display: none; }
.galerie-dno {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 16px 14px;
  /* Vlastní podklad, ať je ovládání čitelné bez ohledu na to, co je nad ním. */
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(6px);
}
.galerie-detail {
  border: 1px solid rgba(255,255,255,.45); border-radius: 8px;
  background: rgba(255,255,255,.16); color: #fff;
  padding: 8px 16px; cursor: pointer;
  font-family: inherit; font-size: .84rem;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.galerie-detail:hover { background: rgba(255,255,255,.25); }
.galerie-detail[hidden] { display: none; }
.galerie-pocet { color: #fff; font-size: .82rem; opacity: .8; }

/* ---------- Stav knihy k přepnutí ---------- */
.stav-select {
  font: inherit; font-size: .82rem;
  padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary);
  cursor: pointer;
}
.stav-hlaska { margin-left: 8px; font-size: .76rem; color: var(--text-muted); }
.stav-hlaska.chyba { color: var(--critical); }


/* ---------- Karta „Galerie" ---------- */
.galerie-view.hidden { display: none; }
.galerie-skupina { margin-bottom: 28px; }
.galerie-skupina h2 {
  font-size: 0.9rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.galerie-skupina h2 .count {
  color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0;
}
.galerie-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.galerie-dlazdice { margin: 0; }
.galerie-dlazdice img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; background: var(--surface-1);
}
.galerie-dlazdice img:hover { border-color: var(--series-1); }
.galerie-dlazdice figcaption {
  margin-top: 5px;
  font-size: 0.76rem; line-height: 1.3;
  color: var(--text-secondary);
  /* Dlouhé názvy nesmí roztáhnout dlaždici — dva řádky a dost. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.galerie-dlazdice figcaption.na-knihu { cursor: pointer; }
.galerie-dlazdice figcaption.na-knihu:hover { color: var(--series-1); }
.galerie-dlazdice .bez-knihy { color: var(--text-muted); font-style: italic; }

/* Zápatí nabídky s verzí — decentní, ať nepřebíjí filtry. Prázdné se schová
   samo, aby po sobě nenechalo mezeru, když se verze.json nenačte. */
.paticka {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.72rem; letter-spacing: 0.02em;
}
.paticka:empty { display: none; }

/* ---------- Zájem o knihu ---------- */
/* Odznak v seznamu i na dlaždici: kdo si o knihu řekl. Vlastní zájem je
   barevný, cizí šedý — ať se dá jedním pohledem poznat, co je ještě volné. */
.zajem-znacka {
  display: inline-block;
  font-size: 0.74rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--page);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}
.zajem-znacka.moje { border-color: var(--series-2); color: var(--series-2); }
.card .zajem-znacka { margin-top: 5px; }
.zajem-cell { white-space: nowrap; }

.zajem-stav {
  background: var(--page);
  border-left: 3px solid var(--border);
  padding: 8px 12px; border-radius: 0 6px 6px 0;
  font-size: 0.86rem; margin-bottom: 14px;
}
.zajem-stav.moje { border-left-color: var(--series-2); }
.zajem-btn {
  font: inherit; font-size: 0.82rem;
  padding: 6px 12px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary);
  cursor: pointer;
}
.zajem-stav .zajem-btn { margin: 0 0 0 6px; padding: 3px 9px; font-size: 0.78rem; }
.zajem-btn:hover { border-color: var(--series-2); color: var(--series-2); }

/* Kdo je přihlášený. Role u jména je hlavně kvůli tomu, aby bylo jasné,
   proč něco nejde uložit — a nehledalo se to jako chyba. */
.ucet-bar {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.84rem;
}
.ucet-bar:empty { display: none; }
.ucet-stav { color: var(--text-secondary); }

/* ---------- Účty Knihovny ---------- */
.ucty-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: flex-start; justify-content: center;
  background: rgba(0,0,0,.5);
  padding: 24px 16px;
  overflow-y: auto;
}
.ucty-modal.hidden { display: none; }
.ucty-box {
  position: relative;
  background: var(--surface-1);
  border-radius: 10px;
  width: 100%; max-width: 620px;
  padding: 24px;
}
.ucty-box h2 { margin: 0 0 12px; padding-right: 40px; }
.ucty-box h3 {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin: 18px 0 6px;
}
.ucty-info { font-size: 0.84rem; color: var(--text-secondary); margin: 0 0 14px; }

.pozvat-radek { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pozvat-radek .text-input { flex: 1 1 8rem; min-width: 0; }
.pozvat-radek .select-input { flex: 1 1 12rem; min-width: 0; }
.pozvanka-vysledek[hidden] { display: none; }

.ucty-hlaska {
  font-size: 0.84rem; margin: 10px 0;
  padding: 8px 12px; border-radius: 6px;
  background: var(--page); border-left: 3px solid var(--good);
}
.ucty-hlaska.chyba { border-left-color: var(--critical); }
.ucty-hlaska[hidden] { display: none; }

.ucty-radek {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.ucty-jmeno { font-weight: 600; }
.ucty-jmeno em { font-weight: 400; color: var(--text-muted); }
.ucty-role { font: inherit; font-size: 0.8rem; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--page); color: var(--text-primary); }
/* Poslední přihlášení doprava: „ještě se nepřihlásil" je to, co člověk
   hledá, když se ptá, jestli pozvánka dorazila. */
.ucty-kdy { color: var(--text-muted); font-size: 0.78rem; margin-left: auto; }
.ucty-btn {
  font: inherit; font-size: 0.78rem; padding: 4px 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--page); color: var(--text-primary);
}
.ucty-btn:hover { border-color: var(--series-1); color: var(--series-1); }

/* Vlastní třída, ne .search-submit: tlačítka v účtech nemají s hledáním nic
   společného a sdílená třída dělala ze selektoru „to tlačítko hledání"
   nejednoznačný. */
.ucty-hlavni {
  flex: 0 0 auto; cursor: pointer;
  padding: 8px 16px;
  border: 1px solid var(--series-1); border-radius: 8px;
  background: var(--series-1); color: #fff;
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
}
.pozvanka-radek { display: flex; gap: 8px; }
.pozvanka-radek .text-input { flex: 1; min-width: 0; }

#hesloForm { display: flex; flex-direction: column; gap: 10px; }
#hesloForm[hidden] { display: none; }

/* ---------- Správcovské nástroje u fotky ----------
   Ukazují se jen správci (atribut hidden nastavuje app.js), proto stačí
   [hidden] hlídat výslovně — .galerie-sprava je flex a display by ho jinak
   přebil, stejně jako se to kdysi stalo u tlačítka Uživatelé. */
.galerie-sprava {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px; margin-top: 4px;
}
.galerie-sprava[hidden] { display: none; }
.galerie-nastroj {
  border: 1px solid rgba(255,255,255,.3); border-radius: 8px;
  background: rgba(255,255,255,.1); color: #fff;
  padding: 6px 10px; cursor: pointer; font-family: inherit; font-size: .78rem;
}
.galerie-nastroj:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.galerie-nastroj:disabled { opacity: .45; cursor: default; }
.galerie-nastroj[hidden] { display: none; }
/* Mazání vypadá jinak než ostatní: je nevratné. */
.nastroj-kriticky { border-color: rgba(255,120,110,.6); color: #ffb3ac; }
.galerie-hlaska { color: #fff; font-size: .76rem; opacity: .85; min-width: 0; }
.galerie-hlaska.ok { color: #a8e6a3; }
.galerie-hlaska.chyba { color: #ffb3ac; }

/* Výběr knihy k fotce. Leží nad galerií, tedy nad z-indexem 110. */
.vyber-knihy {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.vyber-knihy.hidden { display: none; }
.vyber-box {
  background: var(--panel, #fff); color: var(--text, #222);
  border-radius: 12px; padding: 16px; width: min(520px, 100%);
  max-height: 80vh; display: flex; flex-direction: column; gap: 10px;
}
.vyber-box h3 { margin: 0; font-size: 1rem; }
.vyber-box input[type="search"] {
  width: 100%; padding: 10px; font-size: 16px;   /* 16 px, ať iOS nezoomuje */
  border: 1px solid var(--border-color, #ccc); border-radius: 8px;
  font-family: inherit; box-sizing: border-box;
}
.vyber-seznam { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.vyber-polozka {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--border-color, #eee);
  padding: 8px 4px; font-family: inherit; color: inherit;
}
.vyber-polozka:hover { background: rgba(127,127,127,.12); }
.vyber-polozka strong { display: block; font-size: .88rem; }
.vyber-polozka span { font-size: .76rem; opacity: .7; }
.vyber-prazdno { padding: 12px 4px; opacity: .7; font-size: .84rem; }

/* Smazání knihy v detailu — oddělené od zbytku, ať se do něj neklikne omylem. */
.modal-sprava {
  margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--border-color, #e0e0e0);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.modal-sprava button {
  background: none; border: 1px solid rgba(200,60,50,.5); color: #c0392b;
  border-radius: 8px; padding: 7px 12px; cursor: pointer;
  font-family: inherit; font-size: .8rem;
}
.modal-sprava button:hover:not(:disabled) { background: rgba(200,60,50,.1); }
.modal-sprava button:disabled { opacity: .5; cursor: default; }

/* Otáčení nanečisto: fotka se otočí hned v appce, do repozitáře se zapíše
   až na potvrzení. Po otočení o 90° se prohodí šířka s výškou, takže se
   musí prohodit i meze — jinak by fotka na výšku vyčnívala z okna. */
.galerie img { transition: transform .18s ease; }
/* Otočená fotka má prohozené meze. Počítá se s vyhrazeným místem dole,
   jinak by po otočení vjela pod ovládání. */
.galerie img.na-sirku {
  max-width: calc(100vh - var(--galerie-dno, 132px) - 48px);
  max-height: calc(100vw - 48px);
}
/* Uložení je hlavní akce, ať je poznat od otáčení. */
.nastroj-hlavni { border-color: rgba(150,220,150,.6); color: #b6e8b0; font-weight: 600; }

/* Označení k novému rozpoznání. Značka se veze v mapping.json, takže je
   v gitu vidět, co si kdo vytipoval — a dá se z toho udělat seznam. */
.nastroj-oznaceno { border-color: rgba(255,190,90,.7); color: #ffd08a; }
.galerie-dlazdice { position: relative; }
.dlazdice-vlajka {
  position: absolute; top: 4px; right: 4px;
  font-size: .85rem; line-height: 1;
  background: rgba(0,0,0,.55); border-radius: 5px; padding: 2px 4px;
  pointer-events: none;
}
/* Označená dlaždice má být poznat i letmým pohledem přes celou mřížku. */
.galerie-dlazdice.oznacena img { outline: 2px solid rgba(255,190,90,.85); outline-offset: -2px; }