/* ====== Společný styl pro všechny stránky ====== */

:root {
  --radius: 12px;
  --pad: 16px;
  --shadow: 0 4px 20px rgba(0,0,0,.06);
  --heading-color: #2f3031; /* tmavé nadpisy ve dne */
}

/* Theme variables (default = day) */
:root{
  --bg-app: #f7f8fa;
  --text: #111;
  --card-bg: #ffffff;
  --muted: #6b7280;
  --accent: #3b82f6;
  --border: #e6e9ef;
  --panel-edge: #0f1114;
}

/* Day explicit class (optional; keeps current default) */
body.day {
  --bg-app: #f7f8fa;
  --text: #111;
  --card-bg: #ffffff;
  --muted: #6b7280;
  --accent: #3b82f6;
  --border: #e6e9ef;
  --panel-edge: #0f1114;
}

/* Night overrides */
body.night {
  --bg-app: #0b0d10;
  --text: #e6eef8;
  --card-bg: #0f1318;
  --muted: #98a0b0;
  --accent: #ef4444;
  --border: #111419;
  --panel-edge: #050607;
}

/* Night: make explain/chapters more readable (lighter than page bg) */
body.night {
  --explain-bg: #0b2030;    /* pozadí panelu vysvětlení (o něco světlejší) */
  --explain-border: #223543;/* ohraničení panelu */
  --toc-bg: rgba(255,255,255,0.03);
  --code-pre-bg: #0b1620;   /* pozadí pro pre/code v night */
  --code-border: #17303c;
}

/* Night overrides */
body.night {
  /* světlé nadpisy v noci */
  --heading-color: #d5dadf;
}

/* Aplikovat na všechny nadpisy */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
}

/* apply variables */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg-app);
  color: var(--text);
  margin: 0;
  padding: 24px;
}

button {
  background: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Base form field styling (do not force width globally) */
input, textarea, select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 14px;
  background: #fafafa;
}

/* Utility: apply full width where intended */
.form-control {
  width: 100%;
}

/* Utility for inline grouped controls (keeps children inline and lets .form-control be auto-width)
   Usage: <div class="form-inline"> <input class="form-control"> <button>…</button> </div>
*/
.form-inline {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.form-inline > * { margin: 0; }
.form-inline .form-control { width: auto; min-width: 80px; }

/* Kontejner stránky */
.app {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  box-sizing: border-box;
}

/* ===== Karty a panelové plochy =========================================== */

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  border: 1px solid var(--border);
}

.card {
  overflow: hidden;
}

.card h1, .card h2, .card h3 { margin-top: 0; }

/* malé infotexty */
.muted { color: var(--muted); }
.lead  { color: var(--muted); font-size: 1.05rem; }

/* ===== Toolbar / chips ==================================================== */
.toolbar { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.chip {
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .9rem;
  cursor: pointer;
  user-select: none;
}
.chip[aria-pressed="true"] { outline: 2px solid var(--primary); }

/* ===== Tlačítka =========================================================== */
button, .btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items:center; justify-content:center;
  gap: .4rem;
  padding: .5rem .8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--fg);
  cursor: pointer;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
button:hover, .btn:hover { background: color-mix(in oklab, var(--panel-2), white 6%); }
button:active, .btn:active { transform: translateY(1px); }

.btn.primary {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: color-mix(in oklab, var(--primary), black 10%);
}
.btn.pill { border-radius: 999px; }


/* Dva sloupce: vlevo formulář, vpravo náhled */
.row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}

/* Svislé řazení prvků ve formulářové sekci */
.controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* When a controls container is intended to be inline (e.g. buttons side-by-side),
   use both classes: class="controls form-inline" — this rule makes sure
   the inline intent overrides the default vertical stacking. */
.controls.form-inline {
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Mřížka pro více karet (responsivní) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem
}

/* Mřížka pro dvojice vstupů (responsivní) */
.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

/* Náhled QR – střed, ať je canvas responsivní */
.preview {
  display: grid;
  place-items: center;
  min-height: 320px;
  overflow: hidden;
}
.preview canvas,
.preview img {
  max-width: 100%;
  height: auto;
}

/* Mobilní rozpad na 1 sloupec */
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; }
}

/* (Volitelné) Globálně lepší model boxů */
*, *::before, *::after { box-sizing: border-box; }


/* ===== Markdown panel (explain) ========================================== */
.explain { margin-top: 16px }
.explain-bar { display:flex; gap:16px; align-items:baseline; justify-content:space-between }
#toc { font-size:13px; color: var(--muted); display:flex; gap:8px; flex-wrap:wrap }
#toc a { text-decoration:none; border:1px solid var(--border); padding:4px 8px; border-radius:999px }
#toc a:hover { background: #0f2238 }

/* TOC spacing and wrapping (used by site-doc .toc and legacy #toc) */
.toc, #toc { margin-top: 0.5rem; }
.toc a, #toc a { display: inline-block; margin: 0 0.75rem 0.5rem 0; padding: 0.15rem 0.6rem; }

.md { line-height:1.65 }
.md h1, .md h2, .md h3 { margin: 1em 0 .4em }
.md p, .md ul, .md ol, .md pre, .md blockquote { margin: .5em 0 }
.md code { background: #0c141c; padding: 2px 6px; border-radius: 6px; }
.md pre code { display:block; padding:12px; border-radius:12px }
.md img { max-width:100%; height:auto; border-radius:10px; border:1px solid var(--border) }

/* small helper for theme controls placement */
.theme-toggle { display:flex; gap:8px; align-items:center; font-size:14px; }
.theme-toggle label { cursor:pointer; user-select:none; display:inline-flex; gap:6px; align-items:center; }

/* Code block / inline code colors (theme-aware) */
:root {
  --code-bg: #f5f7fa;       /* inline code background (day) */
  --code-text: #0b1220;     /* inline code text (day) */
  --code-pre-bg: #f3f4f6;   /* pre/code block bg (day) */
  --code-border: #e6e9ef;
}

/* night overrides */
body.night {
  --code-bg: #0c141c;
  --code-text: #e6eef8;
  --code-pre-bg: #6b6b6b;   /* pozadí pro pre/code v night */
  --code-border: #17303c;
}

/* inline code */
.md code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--code-border);
}

/* code blocks / hljs */
.md pre code,
.md pre .hljs,
.hljs {
  background: var(--code-pre-bg) !important;
  color: var(--code-text) !important;
  border-radius: 12px;
  padding: 12px !important;
  border: 1px solid var(--code-border);
}

/* ensure code blocks inside .md keep readability even if external hljs theme is dark */
.md pre .hljs * {
  /* don't force all tokens to same color; only ensure base text is readable */
  color: inherit !important;
}

/* Admonitions / callouts used in documentation markdown (e.g. > [!warning]) */
.admonition {
    border-radius: 8px;
    padding: 12px 14px;
    margin: 14px 0;
    display: block;
}
.admonition .admonition-title { font-weight: 600; margin-bottom: 6px; }
.admonition p { margin: 0; }
.admonition-info { border-left: 4px solid #2563eb; background: #eff6ff; }
.admonition-note { border-left: 4px solid #0ea5a4; background: #ecfeff; }
.admonition-tip { border-left: 4px solid #16a34a; background: #ecfdf5; }
.admonition-warning { border-left: 4px solid #f59e0b; background: #fff7ed; }
.admonition-danger { border-left: 4px solid #dc2626; background: #fff1f2; }
.admonition-caution { border-left: 4px solid #d97706; background: #fffbeb; }
.admonition-question { border-left: 4px solid #6006ba; background: #ccabea; }