/* =====================================================================
   RESKIN — převléká STARÉ stránky do nové černobílé identity.
   ---------------------------------------------------------------------
   Proč vrstva a ne přepis: razítka, směny a rezervační systém na hlavní
   stránce jsou funkční aplikace. Přepsat je znovu = riskovat provoz.
   Všechny tři ale barvy i písmo řídí přes CSS proměnné, takže stačí
   přebít proměnné a doplnit hrstku strukturálních pravidel — logika
   zůstane nedotčená a uživatel kavárny, razítek ani směn už nikde
   nenarazí na starý barevný vzhled.

   Vkládá se JAKO POSLEDNÍ stylesheet na stránce.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) PALETA — všechny staré proměnné míří na černou, bílou nebo
      průhlednost inkoustu. Nic jiného na webu nezbyde.
   --------------------------------------------------------------------- */
:root {
  /* --- sdílené (index.html, nakavu, nakavu-smeny) --- */
  --paper: #ffffff;
  --paper-cream: #ffffff;
  --sketch: #f4f4f4;
  --ink: #000000;
  --ink-soft: rgba(0, 0, 0, .72);
  --ink-faint: rgba(0, 0, 0, .46);
  --rule: rgba(0, 0, 0, .16);

  /* akcenty (byly vínová a khaki) — nově čistě černé */
  --blood: #000000;
  --blood-bright: #000000;
  --blood-dark: #000000;
  --military: #000000;
  --military-dark: #000000;
  --military-light: rgba(0, 0, 0, .58);
  --military-faded: rgba(0, 0, 0, .3);
  --green-soft: rgba(0, 0, 0, .08);
  --red-soft: rgba(0, 0, 0, .08);
  --amber: #000000;

  /* --- razítka a Smyslárium (--color-*) --- */
  --color-cream: #ffffff;
  --color-milk: #ffffff;
  --color-coffee: #000000;
  --color-espresso: #000000;
  --color-charcoal: #000000;
  --color-latte: rgba(0, 0, 0, .46);
  --color-warm-gray: rgba(0, 0, 0, .58);
  --color-accent: #000000;
  --color-green: #000000;
  --color-gold: #000000;
  --color-coral: #000000;
  --color-mint: rgba(0, 0, 0, .08);
  --color-peach: rgba(0, 0, 0, .08);
  --color-sage: rgba(0, 0, 0, .46);

  /* --- písmo: jediný řez pro všechno --- */
  --font-display: 'Garet', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Garet', 'Segoe UI', system-ui, sans-serif;
  --font-hand: 'Garet', 'Segoe UI', system-ui, sans-serif;
  --ff: 'Garet', 'Segoe UI', system-ui, sans-serif;
  --fh: 'Garet', 'Segoe UI', system-ui, sans-serif;

  --rsk-ease: cubic-bezier(.16, 1, .3, 1);
  --rsk-snap: cubic-bezier(.2, .9, .25, 1);
}

/* ---------------------------------------------------------------------
   2) ZÁKLAD — bílý papír, černý inkoust, žádné dekorativní pozadí.
   --------------------------------------------------------------------- */
html, body {
  background: #fff !important;
  color: #000;
}

/* Papírové textury, vzorky a barevné gradienty v pozadí sekcí. Necháváme
   jen ty, které nesou obsah (obrázky v <img>), ne dekoraci v CSS. */
body::before, body::after { filter: grayscale(1) contrast(1.1); opacity: .05 !important; }

section, header, footer, main, aside, article, div, nav {
  background-image: none;
}
/* výjimka: prvky, které vědomě nesou fotku jako pozadí */
[style*="background-image"], [class*="hero"][style], .card-img, .photo, .img {
  background-image: revert;
}
[style*="background-image"] { filter: grayscale(1) contrast(1.06); }

/* Barevné výplně, které nešly přes proměnné, sjednotíme na inkoust. */
[style*="background:#"], [style*="background-color:#"],
[style*="background: #"], [style*="background-color: #"] {
  filter: grayscale(1);
}

/* ---------------------------------------------------------------------
   3) TVAROSLOVÍ — plochý papír. Bez stínů, bez zaoblení, bez skla.
   --------------------------------------------------------------------- */
*, *::before, *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
* {
  border-radius: 0 !important;
}
/* jediné výjimky: kruhové prvky, které kruhové být musí */
[class*="avatar"], [class*="circle"], [class*="dot"], [class*="badge-round"],
[class*="qr"] > canvas, [class*="qr"] > img, input[type="radio"] {
  border-radius: revert !important;
}
[class*="avatar"], [class*="circle"], [class*="dot"] { border-radius: 50% !important; }

img, svg, video, canvas, picture, figure {
  filter: grayscale(1) contrast(1.04);
}
/* QR musí zůstat ostrý a čistě černobílý, žádné dodatečné filtry */
[class*="qr"] canvas, [class*="qr"] img, [id*="Qr"] canvas, [id*="Qr"] img {
  filter: none !important;
  image-rendering: pixelated;
}

/* ---------------------------------------------------------------------
   4) TYPOGRAFIE — Garet všude, displeje tučné obtahem (Garet Bold není).
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Garet', 'Segoe UI', system-ui, sans-serif !important;
  letter-spacing: -.025em;
  -webkit-text-stroke: .018em currentColor;
  paint-order: stroke fill;
  text-transform: uppercase;
}
h1 { line-height: .9; }
/* popisky a mikrotexty naopak zůstávají tenké a prostrkané */
small, .label, .badge, .tag, .kicker, .eyebrow, [class*="label"], [class*="kicker"] {
  letter-spacing: .16em;
  text-transform: uppercase;
  -webkit-text-stroke: 0 currentColor;
}

/* ---------------------------------------------------------------------
   5) OVLÁDACÍ PRVKY — stejná fyzika stisku jako v nové verzi:
      posazení o 2 px a inverze. Platí pro tlačítka i odkazy tvářící se
      jako tlačítko.
   --------------------------------------------------------------------- */
button, .btn, [class*="btn"], [class*="button"], [role="button"], input[type="submit"] {
  font-family: 'Garet', 'Segoe UI', system-ui, sans-serif !important;
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  transition: background .2s var(--rsk-ease), color .2s var(--rsk-ease), transform .12s var(--rsk-snap) !important;
}
button:hover, .btn:hover, [class*="btn"]:hover, [class*="button"]:hover,
[role="button"]:hover, input[type="submit"]:hover {
  background: #000 !important;
  color: #fff !important;
}
button:active, .btn:active, [class*="btn"]:active, [class*="button"]:active,
[role="button"]:active, input[type="submit"]:active {
  transform: translateY(2px) !important;
}
/* primární akce je od začátku černá a na hover se vybílí */
[class*="primary"], [class*="cta"], [class*="submit"], [class*="solid"] {
  background: #000 !important;
  color: #fff !important;
}
[class*="primary"]:hover, [class*="cta"]:hover, [class*="submit"]:hover, [class*="solid"]:hover {
  background: #fff !important;
  color: #000 !important;
}
/* aktivní / vybraný stav je vždy inverze, ne barva */
.active, .selected, .on, [aria-selected="true"], [aria-pressed="true"] {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}
/* zavírací křížky a ikonová tlačítka nechceme přebít na bloky */
[class*="close"], [class*="modal-x"], [class*="-x"] {
  background: transparent !important;
  border: 0 !important;
  color: #000 !important;
  letter-spacing: 0 !important;
}
button[disabled], .btn[disabled], [class*="btn"][disabled] {
  opacity: .3 !important;
  background: #fff !important;
  color: #000 !important;
}

/* formulářové prvky — jen spodní linka */
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
textarea, select {
  font-family: 'Garet', 'Segoe UI', system-ui, sans-serif !important;
  background: transparent !important;
  color: #000 !important;
  border: 0 !important;
  border-bottom: 2px solid #000 !important;
}
input::placeholder, textarea::placeholder { color: rgba(0, 0, 0, .3) !important; }

/* ---------------------------------------------------------------------
   6) LINKY A RÁMY — jednotná černá vlasová linka.
   --------------------------------------------------------------------- */
hr { border: 0 !important; border-top: 2px solid #000 !important; background: none !important; }
[class*="divider"], [class*="separator"] { background: #000 !important; }

/* karty a panely dostanou rám místo stínu */
[class*="card"], [class*="panel"], [class*="box"], [class*="tile"], [class*="modal"] {
  border-color: #000 !important;
}

/* ---------------------------------------------------------------------
   7) STAVY — úspěch, chyba a varování nesou informaci tvarem a textem,
      ne barvou. Zůstává rozlišení tlustou levou linkou.
   --------------------------------------------------------------------- */
[class*="success"], [class*="ok"], [class*="green"] {
  background: rgba(0, 0, 0, .06) !important;
  color: #000 !important;
  border-left: 4px solid #000 !important;
}
[class*="error"], [class*="danger"], [class*="red"], [class*="warn"] {
  background: #000 !important;
  color: #fff !important;
  border-left: 4px solid #000 !important;
}
[class*="error"] *, [class*="danger"] *, [class*="warn"] * { color: #fff !important; }

/* ---------------------------------------------------------------------
   8) ÚKLID — prvky, které do černobílé identity nepatří vůbec.
   --------------------------------------------------------------------- */
/* vlaječky jazyků: nahrazují se textovými zkratkami v samotné stránce,
   tady jen zrušíme jejich barevnost */
[class*="flag"] { filter: grayscale(1) contrast(1.2); }

/* dekorativní emoji, která nesou jen ozdobu (mají vlastní obal) */
[class*="emoji-decor"], [class*="decor-emoji"], [aria-hidden="true"][class*="emoji"] {
  display: none !important;
}

/* animace na barevných pozadích, které by po odbarvení blikaly */
[class*="gradient"], [class*="shimmer"]:not(.sk-bw) { background: rgba(0, 0, 0, .06) !important; }

/* ---------------------------------------------------------------------
   9) NÁVRAT DO NOVÉ VERZE — přepínač si drží vlastní vzhled, tahle
      vrstva ho nesmí přebít (má vlastní inline styl s ID selektorem).
   --------------------------------------------------------------------- */
#nadoVerSwitch {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
  filter: none !important;
}
#nadoVerSwitch:hover { background: #fff !important; color: #000 !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------
   10) SDÍLENÉ PŘIHLÁŠENÍ (shared-auth.js)
   Overlay si nese vlastní inline styly přímo v JS a ten JS používá i
   Divine Delivery, kde má vzhled zůstat nedotčený. Proto ho převlékáme
   až tady — tato vrstva se načítá výhradně na stránkách spolku.
   --------------------------------------------------------------------- */
.nado-auth-backdrop { background: rgba(0, 0, 0, .82) !important; }
.nado-auth-box {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}
.nado-auth-box h2, .nado-auth-box h3 { color: #000 !important; }
.nado-auth-label, .nado-auth-note, .nado-auth-change, .nado-auth-msg {
  color: rgba(0, 0, 0, .58) !important;
  border-color: rgba(0, 0, 0, .16) !important;
}
.nado-auth-tab, .nado-tab {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}
.nado-auth-tab.active, .nado-tab.active,
.nado-auth-primary, .nado-auth-button.nado-auth-primary {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}
.nado-auth-google {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}
.nado-auth-google img, .nado-auth-google svg { filter: grayscale(1) contrast(1.2) !important; }
.nado-auth-close { background: transparent !important; border: 0 !important; color: #000 !important; }
.nado-auth-float, .nado-auth-trigger {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
}
.nado-auth-float:hover, .nado-auth-trigger:hover { background: #fff !important; color: #000 !important; }
.nado-auth-form input, .nado-auth-form select {
  border-bottom: 2px solid #000 !important;
  color: #000 !important;
}
/* prosté <p>/<span> uvnitř overlaye nesou barvu z inline stylů v JS */
.nado-auth-backdrop p, .nado-auth-backdrop span, .nado-auth-backdrop small,
.nado-auth-box p, .nado-auth-box span, .nado-auth-box small,
.nado-auth-form p, .nado-auth-form span, .nado-auth-form label {
  color: rgba(0, 0, 0, .58) !important;
  border-color: rgba(0, 0, 0, .16) !important;
  outline-color: rgba(0, 0, 0, .16) !important;
}