/* WBX Sandbox – společné barvy portálu i administrace (světlý a tmavý režim).
   Režim: <html data-theme="auto|light|dark"> (cookie wbx_theme, přepínač světlý ⇄ tmavý v hlavičce).
   „auto“ řídí nastavení systému. Postranní panel je tmavý v obou režimech.
   Aplikace používají jen tyhle proměnné – žádné pevné barvy pro plochy, text a linky. */
:root {
  color-scheme: light;
  /* plochy */
  --paper: #f1f4f8;          /* pozadí stránky */
  --surface: #ffffff;        /* panely, tabulky, formuláře */
  --surface-2: #f8fafc;      /* hlavička tabulky, jemné podbarvení */
  --hover: #f4f7fb;          /* řádek pod myší */
  /* text */
  --ink: #13213a;            /* nadpisy, hlavní text */
  --ink-2: #1d2f4f;
  --text: #1b2433;
  --text-2: #3a4659;         /* doplňkový text */
  --muted: #5b6b82;          /* popisky */
  /* linky */
  --line: #dde3ea;
  --line-2: #eef1f5;
  --line-strong: #c8d0da;    /* rámečky polí a vedlejších tlačítek */
  /* akce */
  --blue: #2952cc;
  --blue-ink: #ffffff;
  --blue-soft: #e6edff;
  --blue-line: #c9d6ff;
  /* stavy */
  --led: #e8a317; --led-soft: #fdf3dc; --led-ink: #8a5a00;
  --ok: #1a7f55; --ok-soft: #e4f4ec; --ok-line: #a9dcc3; --ok-ink: #0f5a3b;
  --bad: #c4320a; --bad-soft: #fdebe5; --bad-line: #f1b9a8; --bad-ink: #8a2408;
  --warn: #9a5b00; --warn-soft: #fdf0db; --warn-line: #f1d29a; --warn-ink: #6a4000;
  /* tmavé prvky (postranní panel, kód, klíče) – v obou režimech */
  --side: #13213a; --side-2: #1a2b48; --side-active: #22375c; --side-line: #22355a;
  --side-ink: #c5cfdf; --side-muted: #8e9cb5;
  --code-bg: #13213a; --code-ink: #dbe3ef; --code-muted: #8796ad; --code-accent: #f4d78a;
  /* grafy */
  --chart: #9db5f0; --chart-soft: #e8eefc; --chart-grid: #e9edf3;
  --heat-0: #eef1f6; --heat-1: #d3defb; --heat-2: #9db5f0; --heat-3: #5b82e0; --heat-4: #2952cc;
  --series-0: #2952cc; --series-1: #e8a317; --series-2: #1a7f55; --series-3: #8a5cd1; --series-4: #d1495b; --series-5: #8796ad;
  --shadow: 0 1px 2px rgba(19, 33, 58, .05);
  --tip-bg: #13213a; --tip-ink: #ffffff;
}

/* tmavý režim – hodnoty jednou, použité pro data-theme="dark" i pro "auto" s tmavým systémem */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d1218; --surface: #141b25; --surface-2: #19212d; --hover: #1b2431;
  --ink: #e9eef6; --ink-2: #d5deea; --text: #d3dbe6; --text-2: #b3bfcf; --muted: #8b99ad;
  --line: #273243; --line-2: #1e2836; --line-strong: #364357;
  --blue: #7095ff; --blue-ink: #0d1218; --blue-soft: #1b2948; --blue-line: #2f4677;
  --led: #f0b232; --led-soft: #3a2c0c; --led-ink: #f3c25a;
  --ok: #3cc78a; --ok-soft: #10301f; --ok-line: #1d5a3c; --ok-ink: #7fe0b2;
  --bad: #ff7f5e; --bad-soft: #3a1911; --bad-line: #6b2a1a; --bad-ink: #ffb19c;
  --warn: #f0b232; --warn-soft: #33270d; --warn-line: #5c4615; --warn-ink: #f6cf7d;
  --side: #0a0f15; --side-2: #121a25; --side-active: #1a2638; --side-line: #1a2432;
  --side-ink: #b4c0d2; --side-muted: #7d8ba1;
  --code-bg: #0a0f15; --code-ink: #dbe3ef; --code-muted: #7d8ba1; --code-accent: #f4d78a;
  --chart: #4a6cc0; --chart-soft: #1b2948; --chart-grid: #222c3b;
  --heat-0: #1a2230; --heat-1: #22345f; --heat-2: #34528f; --heat-3: #4f75cf; --heat-4: #7d9dff;
  --series-0: #7095ff; --series-1: #f0b232; --series-2: #3cc78a; --series-3: #b28af0; --series-4: #ff7a8a; --series-5: #8b99ad;
  --shadow: none;
  --tip-bg: #e9eef6; --tip-ink: #0d1218;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --paper: #0d1218; --surface: #141b25; --surface-2: #19212d; --hover: #1b2431;
    --ink: #e9eef6; --ink-2: #d5deea; --text: #d3dbe6; --text-2: #b3bfcf; --muted: #8b99ad;
    --line: #273243; --line-2: #1e2836; --line-strong: #364357;
    --blue: #7095ff; --blue-ink: #0d1218; --blue-soft: #1b2948; --blue-line: #2f4677;
    --led: #f0b232; --led-soft: #3a2c0c; --led-ink: #f3c25a;
    --ok: #3cc78a; --ok-soft: #10301f; --ok-line: #1d5a3c; --ok-ink: #7fe0b2;
    --bad: #ff7f5e; --bad-soft: #3a1911; --bad-line: #6b2a1a; --bad-ink: #ffb19c;
    --warn: #f0b232; --warn-soft: #33270d; --warn-line: #5c4615; --warn-ink: #f6cf7d;
    --side: #0a0f15; --side-2: #121a25; --side-active: #1a2638; --side-line: #1a2432;
    --side-ink: #b4c0d2; --side-muted: #7d8ba1;
    --code-bg: #0a0f15; --code-ink: #dbe3ef; --code-muted: #7d8ba1; --code-accent: #f4d78a;
    --chart: #4a6cc0; --chart-soft: #1b2948; --chart-grid: #222c3b;
    --heat-0: #1a2230; --heat-1: #22345f; --heat-2: #34528f; --heat-3: #4f75cf; --heat-4: #7d9dff;
    --series-0: #7095ff; --series-1: #f0b232; --series-2: #3cc78a; --series-3: #b28af0; --series-4: #ff7a8a; --series-5: #8b99ad;
    --shadow: none;
    --tip-bg: #e9eef6; --tip-ink: #0d1218;
  }
}

/* přepínač režimu (tlačítko v hlavičce obou aplikací) */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 9px;
  border: 1px solid var(--side-line); border-radius: 4px; background: transparent; color: var(--side-ink); cursor: pointer;
  font: inherit; font-size: 12.5px; }
.theme-toggle:hover { background: var(--side-2); color: #fff; }
.theme-toggle svg { flex: none; }
.theme-toggle .tt-light, .theme-toggle .tt-dark, .theme-toggle .tt-auto { display: none; }
/* ikona ukazuje režim, který je právě vidět (u „auto“ podle systému) */
:root[data-theme="light"] .theme-toggle .tt-light,
:root[data-theme="dark"] .theme-toggle .tt-dark,
:root[data-theme="auto"] .theme-toggle .tt-light { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .theme-toggle .tt-light { display: none; }
  :root[data-theme="auto"] .theme-toggle .tt-dark { display: inline-flex; }
}
.theme-toggle.on-light { border-color: var(--line-strong); color: var(--text-2); }
.theme-toggle.on-light:hover { background: var(--hover); color: var(--ink); }

/* chyba formuláře u pole (umisťuje wbx.js podle klíče validace) */
.field-err { margin-top: 5px; font-size: 12.5px; line-height: 1.4; color: var(--bad-ink); }
.has-err > label:first-child { color: var(--bad-ink); }
/* řádky polí jsou zarovnané dolů – s chybovou hláškou pod polem by se popisky rozjely */
.row:has(> .field.has-err) { align-items: flex-start; }
input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]), select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--bad) !important; box-shadow: 0 0 0 1px var(--bad); }
.pb > .flash:first-child { margin-top: 0; }