/* ===== FONTY =====
   Soubory nahrajte do public/fonts/ pod těmito názvy (stačí jeden formát):
   AllerDisplay.woff2 | .woff | .ttf | .otf   – běžný text
   Shaerme.woff2      | .woff | .ttf | .otf   – nadpisy
   Pokud soubor chybí, použije se záložní písmo. */
@font-face {
  font-family: "AllerDisplay";
  src: local("AllerDisplay"), local("Aller Display"),
       url("/fonts/AllerDisplay.woff2") format("woff2"),
       url("/fonts/AllerDisplay.woff") format("woff"),
       url("/fonts/AllerDisplay.ttf") format("truetype"),
       url("/fonts/AllerDisplay.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Shaerme";
  src: local("Shaerme"),
       url("/fonts/Shaerme.woff2") format("woff2"),
       url("/fonts/Shaerme.woff") format("woff"),
       url("/fonts/Shaerme.ttf") format("truetype"),
       url("/fonts/Shaerme.otf") format("opentype");
  font-display: swap;
}

/* ===== TÉMA =====
   Barvy jsou ODHAD (tmavý eventový styl), ne převzaté z shameless.cz.
   Stačí změnit hodnoty v :root – celý vzhled se přepne. */
:root {
  --bg: #0d0d0d;
  --card: #181818;
  --text: #f5f5f5;
  --muted: #9a9a9a;
  --accent: #e2101c;     /* červená z loga Shameless */
  --accent-text: #ffffff;
  --ok: #34d399;
  --line: #2b2b2b;
  --radius: 4px;
  --font-body: "AllerDisplay", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Shaerme", "Oswald", "Arial Narrow", Impact, sans-serif;
  color-scheme: dark;
}

body { background: var(--bg); color: var(--text); font-family: var(--font-body); }

h1, h2, h3 {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: .04em;
}
h1 { font-size: 1.7rem; }

/* karty */
.card, .slot, .msg { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.thumb, .grid img, .grid .empty { border-radius: var(--radius); background: #222; color: var(--muted); }
.grid .empty { background: #141414; color: #555; }

/* tlačítka */
button, .btn {
  background: var(--accent); color: var(--accent-text);
  border-radius: var(--radius);
  font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 400;
}
button.secondary, button.sec, .btn.secondary { background: transparent; color: var(--text); border: 1px solid #444; }
button:disabled { opacity: .35; }

/* formuláře */
input { font-family: var(--font-body); background: #101010; color: var(--text); border: 1px solid #3a3a3a; border-radius: var(--radius); }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
label { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }

/* stavy */
.progress { background: #262626; border-radius: 0; }
.progress div { background: var(--accent); }
.err { color: #f87171; }
.badge { border-radius: var(--radius); text-transform: uppercase; letter-spacing: .06em; }
.b-pickup { background: #3a2a06; color: #fbbf24; }
.b-return { background: #10263f; color: #60a5fa; }
.b-done   { background: #0d3324; color: var(--ok); }
.slot.done .t span { color: var(--ok); }
.link input { color: var(--muted); }

/* záložky Aktivní / Archiv */
.tabs button { color: #000; }
.tabs button.on { color: var(--accent-text); }

/* poznámky */
textarea { font-family: var(--font-body); background: #101010; color: var(--text); border: 1px solid #3a3a3a; border-radius: var(--radius); }
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.note { background: #141414; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); }
.b-arch { background: #262626; color: #c4c4c4; }
.notelabel { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }

/* select, složky, nastavení */
select { font-family: var(--font-body); background: #101010; color: var(--text); border: 1px solid #3a3a3a; border-radius: var(--radius); }
select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
details.folder > summary { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; font-weight: 400; }
details.folder > summary span { color: var(--muted); font-family: var(--font-body); }
.vrow { border-bottom-color: var(--line); }
.sub { letter-spacing: .1em; }
button.danger { background: #3b1114; color: #fca5a5; }