/* ═══════════════════════════════════════════════════════════
   Zen Zahrada — světlá písková řada pro administraci i veřejný web
   (D8c, 16. 10. 2026). Barvy a komponenty přesunuté beze změny z admin.css
   (D0, 13. 10.: Berry vybral variantu B „Písek“): teplé pískové pozadí,
   skoro černý text ≥ 10 : 1, zlato jen jako tmavá zlatohnědá na tlačítkách
   a čarách. Načítá se po tokens.css a styles.css v obou rozloženích; tokeny
   na :root přepisují tmavou řadu z tokens.css. Co je jen administrace, je
   v admin.css, co je jen veřejný web, ve web.css.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* povrchy */
  --surface-base:   #d3c6aa;   /* stránka */
  --surface-raised: #e0d5bd;   /* karta */
  --surface-float:  #fcf8ef;   /* rozbalené menu, nabídka selectu */
  --surface-side:   #fbf7ee;   /* pole se zaměřením */
  --field-bg:       #f2ebdc;
  --field-border:   rgba(70,50,20,.42);

  /* čáry */
  --border-s: rgba(70,50,20,.16);
  --border-d: rgba(70,50,20,.28);
  --border-a: rgba(70,50,20,.50);

  /* text — kontrast na pozadí stránky / na kartě */
  --text:   #15100a;   /* 11,2 / 13,0 : 1 */
  --text2:  #1e170e;   /* 10,5 / 12,2 : 1 — věty, popisky */
  --muted:  #45382a;   /*  6,7 /  7,8 : 1 — jen záhlaví tabulek, čas, počet */
  --akcent: #251a04;   /* 10,1 / 11,7 : 1 — krátké zvýraznění (nadtitulek, odkaz v menu) */
  --linka:  #8a6420;   /* zlatohnědá čára: podtržení odkazu, aktivní položka, okraj */
  --on-gold: #fffaf0;

  /* „zlato“ v komponentách veřejného webu → tmavá zlatohnědá */
  --gold-700: #4a3409;
  --gold-500: #5f430e;
  --gold-400: #251a04;
  --gold-200: #251a04;

  /* stavy: text je vždy skoro černý, stav nese podklad a hrana */
  --ok-bg:   #c4e0c9;  --ok-hrana:   #3f7a52;
  --warn-bg: #efdb9f;  --warn-hrana: #9a7414;
  --err-bg:  #efc4b4;  --err-hrana:  #9a3a1e;
  --info-bg: #e9e0cc;
  --chyba-text: #4f1003;  /* 10,2 : 1 na kartě — text chyby u pole */
  --jade: #3f7a52;
  --err:  #4f1003;
  --ok:   #15100a;
  --warn: #15100a;
  --danger: #4f1003;

  --shadow-card: 0 1px 2px rgba(60,40,10,.10), 0 2px 10px rgba(60,40,10,.06);
  --shadow-card-hover: var(--shadow-card);
  --shadow-float: 0 12px 32px rgba(30,20,5,.25);

  /* lišta */
  --lista-bg: #2a231b;
  --lista-text: #fcf5e6;      /* 14,3 : 1 */
  --lista-tichy: #e3d3b2;     /* 10,5 : 1 */
  --lista-logo: #f5d98a;      /* pravidlo loga: na tmavém zlatá */
}

/* ═══ Karty, mřížky ═══ */
.card { background: var(--surface-raised); border-color: var(--border-d); padding: 20px 22px; }
.card:hover { transform: none; border-color: var(--border-d); }
.card--tight { padding: 14px 18px; }
.tile-row .card { flex: 1 1 200px; max-width: 280px; }
.tile-cislo, .qr-panel__castka, .dlazdice__cena { color: var(--text); }
.dash-grid { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

/* ═══ Tlačítka ═══ */
.btn { font-size: .95rem; min-height: 44px; }
.btn-sm { font-size: .88rem; min-height: 36px; padding: 6px 12px; }
.btn-primary { background: var(--gold-500); color: var(--on-gold); box-shadow: none; }
.btn-primary:hover { background: var(--gold-700); color: var(--on-gold); box-shadow: none; transform: none; }
.btn-ghost { color: var(--akcent); border-color: var(--border-a); background: rgba(255,250,240,.35); }
.btn-ghost:hover { color: var(--text); border-color: var(--gold-500); background: rgba(255,250,240,.7); }
.btn-danger { color: var(--chyba-text); border-color: rgba(154,58,30,.55); background: rgba(239,196,180,.45); }
.btn-danger:hover { color: var(--chyba-text); border-color: var(--err-hrana); background: rgba(239,196,180,.6); }  /* plný --err-bg dával 9,4 : 1 (oponent D8c) */
.btn:focus-visible { box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--gold-500); }

/* ═══ Formuláře ═══ */
label.field { font-size: .85rem; color: var(--text2); letter-spacing: .06em; }
label.field input, label.field select, label.field textarea { font-size: 1rem; }
.form-help { font-size: .9rem; color: var(--text2); }
.pole-chyba { color: var(--chyba-text); font-size: .9rem; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"],
input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"], input[type="week"], select, textarea {
  font-size: 1rem; color-scheme: light; color: var(--text);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px rgba(95,67,14,.45);
}
input:required:invalid:not(:placeholder-shown) { border-color: var(--err-hrana); }
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%235f430e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
select option { background: var(--surface-float); color: var(--text); }
select option:checked, select option:hover { background: #e6d9bc; color: var(--text); }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { filter: none; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; border-color: var(--gold-500); background-color: var(--field-bg); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--gold-500); border-color: var(--gold-500); }
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2 6l3 3 5-6' stroke='%23fffaf0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline-color: var(--gold-500); }

/* ═══ Tabulky ═══ */
.zz-table { font-size: .95rem; }
.zz-table th { font-size: .82rem; color: var(--muted); letter-spacing: .08em; border-bottom: 2px solid var(--border-d); }
.zz-table td { border-bottom-color: var(--border-s); }
.zz-table tbody tr:hover { background: rgba(255,250,240,.35); }
.zz-table--sm { font-size: .9rem; }

/* ═══ Štítky stavů: text skoro černý, stav nese podklad a rámeček ═══ */
.zz-badge { font-size: .82rem; color: var(--text); background: var(--info-bg); border-color: var(--border-d); letter-spacing: .03em; }
.zz-badge--ok    { color: var(--text); background: var(--ok-bg);   border-color: var(--ok-hrana); }
.zz-badge--warn  { color: var(--text); background: var(--warn-bg); border-color: var(--warn-hrana); }
.zz-badge--err   { color: var(--text); background: var(--err-bg);  border-color: var(--err-hrana); }
.zz-badge--muted { color: var(--text2); background: transparent; }

/* ═══ Hlášky: text skoro černý, stav nese levá hrana a podklad ═══ */
.alert { color: var(--text); background: var(--info-bg); border: 1px solid var(--border-d); border-left: 5px solid var(--linka); font-size: 1rem; }
.alert strong { color: var(--text); }
.alert a { color: var(--text); }
.alert-error   { background: var(--err-bg);  border-color: var(--err-hrana);  border-left: 5px solid var(--err-hrana); }
.alert-success { background: var(--ok-bg);   border-color: var(--ok-hrana);   border-left: 5px solid var(--ok-hrana); }
.alert-warning { background: var(--warn-bg); border-color: var(--warn-hrana); border-left: 5px solid var(--warn-hrana); }
.alert-error strong, .alert-success strong { color: var(--text); }

/* ═══ Komponenty pultu, poukazů a dokladů — tmavé barvy natvrdo převedené do písku ═══ */
.dlazdice__btn { background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-d); }
.dlazdice__btn:hover { border-color: var(--gold-500); background: var(--surface-float); }
.dlazdice__popis, .platba-puntik, .doklad-pata { color: var(--text2); }
.puntik--cerny { border-color: rgba(0,0,0,.35); }
.radek--chyba td { background: rgba(239,196,180,.55); }
.doklad-poukazy { border-color: var(--linka); }
.galerie-item:hover { border-color: var(--gold-500); }
.galerie-titul { color: var(--text); }
.lightbox-obsah figcaption { background: var(--surface-float); color: var(--text); }