/*!
 * Tmavý režim (dark mode) pro praktik-uh.cz
 *
 * Aktivuje se třídou "dark" na <html> (nastavuje assets/js/theme.js
 * podle systému / ruční volby). Web je postavený na Tailwind CDN, který
 * generuje utility třídy za běhu, proto zde jednotlivé použité třídy
 * přemapováváme na barevné proměnné. Selektory mají prefix "html.dark",
 * aby vyhrály nad utilitami Tailwindu bez nutnosti !important.
 *
 * Obsahuje i úpravy pro obsah z CMS (.rte-content), DataTables,
 * karusel aktualit a vložené stránky (Tejpování apod.).
 */

/* světlé barvy pro zvýraznění dnešního dne v ordinačních hodinách (nastavuje JS v index.asp) */
:root {
  --today-row-bg: #fef2f2;
  --today-row-fg: #b91c1c;
}

@media screen {

/* ============================================================
   1) Proměnné a základ
   ============================================================ */
html.dark {
  color-scheme: dark;

  --dm-bg:            #0e1420;  /* pozadí stránky */
  --dm-bg-alt:        #121a2a;  /* pruhované sekce (dřív #f9f9f9) */
  --dm-surface:       #171f2f;  /* karty, formuláře (dřív bílá) */
  --dm-surface-2:     #1c2638;  /* zebra, gray-50/100 */
  --dm-border:        #2a3650;
  --dm-border-strong: #3a4966;
  --dm-text:          #e8edf5;
  --dm-text-2:        #c3ccda;
  --dm-muted:         #94a0b4;
  --dm-link:          #8db8ff;  /* světlá varianta firemní modré #0C2C66 pro text */
  --dm-link-hover:    #b8d3ff;
  --dm-brand:         #1f50a8;  /* firemní modrá pro tlačítka a hlavičky */
  --dm-brand-hover:   #2f66c8;
  --dm-brand-deep:    #0a1a3d;  /* patička, cookie lišta */

  --today-row-bg: #3a1a22;
  --today-row-fg: #fca5a5;

  /* aktuality (proměnné z index.asp) */
  --nc-bg:      var(--dm-bg-alt);
  --nc-card-bg: var(--dm-surface);
  --nc-border:  var(--dm-border);
  --nc-accent:  #3f74d6;
  --nc-text:    var(--dm-text);
  --nc-muted:   var(--dm-muted);
  --nc-allert:  #c62828;

  background-color: var(--dm-bg);
}

html.dark body,
html.dark body.bg-white {
  background-color: var(--dm-bg);
  color: var(--dm-text);
}

/* okraj pro ring-offset a výchozí barva ohraničení z Tailwind preflightu */
html.dark *, html.dark ::before, html.dark ::after {
  --tw-ring-offset-color: var(--dm-bg);
}

/* nadpisy z CMS (rubriky.css nastavuje h1 tmavě modře); h1 s třídou (např. hero s text-white) se nemění.
   rubriky.css se u některých rubrik načítá až v <body>, proto vyšší specificita místo pořadí. */
html.dark h1:not([class]) { color: #cfe0ff; }

html.dark ::placeholder { color: #8391a8; opacity: 1; }
html.dark ::selection   { background: #2f66c8; color: #fff; }

/* ============================================================
   2) Pozadí (Tailwind utility)
   ============================================================ */
html.dark .bg-white,
html.dark .bg-\[\#ffffff\]           { background-color: var(--dm-surface); }
html.dark .bg-white\/80              { background-color: rgba(14, 20, 32, .82); }
html.dark .bg-white\/95              { background-color: rgba(14, 20, 32, .96); }
html.dark .bg-gray-50,
html.dark .bg-slate-50               { background-color: var(--dm-surface-2); }
html.dark .bg-gray-100               { background-color: var(--dm-surface-2); }
html.dark .bg-\[\#f9f9f9\]           { background-color: var(--dm-bg-alt); }
html.dark .bg-\[\#0C2C66\]           { background-color: var(--dm-brand); }
html.dark .hover\:bg-blue-50:hover   { background-color: rgba(96, 165, 250, .14); }

/* hover stavy tlačítek (světlá varianta hoveru je černá / šedá) */
html.dark .hover\:bg-black:hover,
html.dark .hover\:bg-\[\#000000\]:hover,
html.dark .hover\:bg-gray-600:hover,
html.dark .hover\:bg-\[\#0C2C66\]:hover,
html.dark .hover\:bg-\[\#0a2352\]:hover { background-color: var(--dm-brand-hover); }

/* patička a cookie lišta zůstanou hluboce modré, aby se odlišily od stránky */
html.dark footer.bg-\[\#0C2C66\],
html.dark #cookie-banner             { background-color: var(--dm-brand-deep); }

/* ============================================================
   3) Text (Tailwind utility)
   ============================================================ */
html.dark .text-black,
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-slate-900            { color: var(--dm-text); }
html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .text-slate-700,
html.dark .text-slate-600            { color: var(--dm-text-2); }
html.dark .text-gray-500,
html.dark .text-slate-500            { color: var(--dm-muted); }
html.dark .text-red-700              { color: #f87171; }

html.dark .text-\[\#0C2C66\],
html.dark .text-\[\#1a3a6e\]         { color: var(--dm-link); }
html.dark .hover\:text-\[\#0C2C66\]:hover { color: var(--dm-link-hover); }
html.dark .hover\:text-black:hover   { color: #fff; }

/* prvky, které mají při hoveru tmavé pozadí, musí mít světlý text (musí být po pravidlech výše) */
html.dark .hover\:text-\[\#FFFFFF\]:hover,
html.dark .hover\:text-\[\#ffffff\]:hover { color: #fff; }

/* ============================================================
   4) Ohraničení
   ============================================================ */
html.dark .border,
html.dark .border-t,
html.dark .border-b,
html.dark .border-l,
html.dark .border-r,
html.dark .border-y,
html.dark .border-x                  { border-color: var(--dm-border); }
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-slate-200,
html.dark .border-\[\#e2e8f4\]       { border-color: var(--dm-border); }
html.dark .border-gray-300,
html.dark .border-slate-300          { border-color: var(--dm-border-strong); }
html.dark .border-\[\#0C2C66\]       { border-color: #5b8def; }
html.dark .hover\:border-\[\#000000\]:hover { border-color: var(--dm-brand-hover); }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border); }
html.dark .ring-black\/10            { --tw-ring-color: rgba(255, 255, 255, .12); }
html.dark .ring-\[\#D1D1D1\]         { --tw-ring-color: var(--dm-border-strong); }
html.dark .ring-\[\#1a3a6e\]         { --tw-ring-color: #5b8def; }

/* responzivní varianty použité u vyjíždějícího banneru */
@media (min-width: 768px) {
  html.dark .md\:bg-gray-100         { background-color: var(--dm-surface-2); }
  html.dark .md\:text-black          { color: var(--dm-text); }
  html.dark .md\:border-\[\#0C2C66\] { border-color: #5b8def; }
}

/* ============================================================
   5) Formuláře (Tailwind forms plugin nastavuje bílé pozadí)
   ============================================================ */
html.dark :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), textarea, select) {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border-strong);
  color: var(--dm-text);
}
html.dark :where(input[type="checkbox"]:not(:checked), input[type="radio"]:not(:checked)) {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border-strong);
}
html.dark :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
  border-color: var(--dm-link);
  --tw-ring-color: var(--dm-link);
}
html.dark #my-form-status.ok  { color: #81c784; }
html.dark #my-form-status.err { color: #ef9a9a; }

/* ============================================================
   6) Vlastní styly z index.asp
   ============================================================ */
html.dark .section-title    { color: var(--dm-text); }
html.dark .section-subtitle { color: var(--dm-text-2); }
html.dark .btn-primary      { background-color: var(--dm-brand); }
html.dark .btn-primary:hover { background-color: var(--dm-brand-hover); }
html.dark .btn-secondary    { background-color: var(--dm-surface-2); }

/* navigace */
html.dark .nav-link         { color: var(--dm-text-2); }
html.dark .nav-link:hover,
html.dark .nav-link--cta,
html.dark .nav-link--cta:hover { color: var(--dm-link); }
html.dark .nav-link::after,
html.dark .mob-link::before { background: linear-gradient(90deg, #5b8def, #93c5fd); }
html.dark .nav-link--cta    { background: linear-gradient(135deg, rgba(91,141,239,.12), rgba(96,165,250,.16)); }
html.dark .mob-link         { color: var(--dm-text-2); border-bottom-color: var(--dm-border); }
html.dark .mob-link:hover,
html.dark .mob-link--cta    { color: var(--dm-link); }
html.dark .logo-wrap:focus-visible { outline-color: var(--dm-link); }

/* logo je tmavě modré na průhledném pozadí – v tmavém režimu ho zesvětlíme */
html.dark .logo-img {
  filter: brightness(1.7) saturate(.9) drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}
html.dark .logo-wrap:hover .logo-img {
  filter: brightness(1.85) saturate(.9) drop-shadow(0 6px 18px rgba(0, 0, 0, .45))
          drop-shadow(0 0 14px rgba(96, 165, 250, .38));
}

/* velké logo v kontaktu (SVG, tmavě modré) */
html.dark #kontakt img[src$="logo/logo.svg"] { filter: brightness(1.7) saturate(.9); }

/* reCAPTCHA: iframe je světlý dokument na stránce s color-scheme: dark, proto mu prohlížeč
   podloží bílé pozadí a kolem tmavého widgetu vznikne bílý pruh (vlevo a dole, kde je stín).
   Když se color-scheme iframu shoduje s dokumentem uvnitř, zůstane průhledný. */
html.dark iframe[src*="google.com/recaptcha"] { color-scheme: light; }

/* logo Medevio ve vyjíždějícím banneru je tmavě modré → v tmavém režimu bílé */
html.dark #slideBanner img[src$="medevio.svg"] { filter: brightness(0) invert(1); }

/* ikony služeb: tmavší odstíny zesvětlit, aby na tmavém pozadí nebyly slabé */
html.dark .text-blue-600   { color: #60a5fa; }
html.dark .text-purple-600 { color: #a78bfa; }
html.dark .text-green-600  { color: #4ade80; }
html.dark .text-yellow-600 { color: #facc15; }

/* hero: fotky mírně ztlumit, ať tolik nesvítí */
html.dark #hero-slides img  { filter: brightness(.8); }

/* zvýraznění dnešního dne v ordinačních hodinách nastavuje JS přes var(--today-*) */

/* aktuality */
html.dark .news-carousel    { box-shadow: none; }
html.dark .nc-arrow         { background: var(--dm-surface-2); border-color: var(--nc-accent); color: var(--dm-link); }
html.dark .nc-arrow:hover   { background: var(--nc-accent); color: #fff; }
html.dark .nc-text a        { color: var(--dm-link); }
html.dark .aktuality-content { background: var(--dm-surface); box-shadow: none; }
html.dark .aktuality-wrapper { border-color: var(--dm-border); }
html.dark .aktuality-wrapper:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, .4); }
html.dark #activeItem .ai-badge { background: var(--dm-brand); }
html.dark #activeItem .ai-date  { color: var(--dm-link); }
html.dark #activeItem .ai-text  { color: var(--dm-text); }

/* dialog aktuality (native <dialog>) */
html.dark dialog            { background-color: var(--dm-surface); color: var(--dm-text); }

/* tejpování – vlna pod hero sekcí měla natvrdo bílou */
html.dark .tejp-hero-wave::after { background: var(--dm-bg); }

/* pojišťovny: loga jsou JPG s bílým pozadím, proto zůstávají na světlých dlaždicích */
html.dark #reference li.bg-gray-50 { background-color: #e9edf4; }

/* mapy Google – ztmavit, ať nesvítí jako bílá plocha
   (street view v sekci Ordinace a reCAPTCHA iframe se nemění) */
html.dark #kontakt iframe[src*="google.com/maps"],
html.dark #addressModal iframe[src*="google.com/maps"] { filter: invert(92%) hue-rotate(180deg) contrast(.9); }

/* ============================================================
   7) DataTables (dokumenty ke stažení) – doplňky k html.dark z DataTables 2
   ============================================================ */
html.dark table.dataTable.table-zebra > tbody > tr:nth-child(odd)  { background: var(--dm-surface) !important; }
html.dark table.dataTable.table-zebra > tbody > tr:nth-child(even) { background: var(--dm-surface-2) !important; }
html.dark table.dataTable.table-zebra.hover > tbody > tr:hover     { background: #22304a !important; }
html.dark .dt-container .dt-search label,
html.dark .dt-container .dt-length label,
html.dark .dataTables_filter label { color: var(--dm-link); }
html.dark .dt-container .dt-search input[type="search"],
html.dark .dt-container .dt-length select,
html.dark .dataTables_filter input {
  background-color: var(--dm-surface-2);
  border-color: var(--dm-border-strong);
  color: var(--dm-text);
}
html.dark .dt-container .dt-search input[type="search"]:focus {
  border-color: var(--dm-link);
  box-shadow: 0 0 0 3px rgba(141, 184, 255, .25);
}
html.dark .dt-container .dt-length::after { color: var(--dm-muted); }
html.dark table.dataTable > tbody > tr > * { color: var(--dm-text); }
html.dark table.dataTable a               { color: var(--dm-link); }

/* ============================================================
   8) Obsah z CMS (.rte-content) – inline styly z editoru
   ============================================================ */
html.dark .rte-content { color: var(--dm-text); }
html.dark .rte-content a:not([class]) { color: var(--dm-link); }

/* bílé a světle modré plochy */
html.dark .rte-content [style*="background:#fff" i],
html.dark .rte-content [style*="background: #fff" i],
html.dark .rte-content [style*="background-color:#fff" i],
html.dark .rte-content [style*="background-color: #fff" i],
html.dark .rte-content [style*="background:rgb(255,255,255)" i],
html.dark .rte-content [style*="background-color: rgb(255, 255, 255)" i] {
  background: var(--dm-surface) !important;
}
html.dark .rte-content [style*="background:#e8f0fb" i],
html.dark .rte-content [style*="background: #e8f0fb" i] {
  background: #1d2b47 !important;
}

/* tmavé texty – nejdřív šedé/černé, poté modré (musí být za sebou) */
html.dark .rte-content [style*="color:#1a2540" i],
html.dark .rte-content [style*="color: #1a2540" i],
html.dark .rte-content [style*="color:#1f2937" i],
html.dark .rte-content [style*="color: #1f2937" i],
html.dark .rte-content [style*="color:#111827" i],
html.dark .rte-content [style*="color: #111827" i],
html.dark .rte-content [style*="color:#222" i],
html.dark .rte-content [style*="color:#333" i],
html.dark .rte-content [style*="color:#000" i],
html.dark .rte-content [style*="color:black" i] {
  color: var(--dm-text) !important;
}
html.dark .rte-content [style*="color:#374151" i],
html.dark .rte-content [style*="color: #374151" i],
html.dark .rte-content [style*="color:#4a5568" i],
html.dark .rte-content [style*="color: #4a5568" i],
html.dark .rte-content [style*="color:#4b5563" i],
html.dark .rte-content [style*="color: #4b5563" i] {
  color: var(--dm-text-2) !important;
}
html.dark .rte-content [style*="color:#0C2C66" i],
html.dark .rte-content [style*="color: #0C2C66" i],
html.dark .rte-content [style*="color:#1a3a6e" i],
html.dark .rte-content [style*="color: #1a3a6e" i],
html.dark .rte-content [style*="color:#2457a4" i],
html.dark .rte-content [style*="color: #2457a4" i] {
  color: var(--dm-link) !important;
}

/* tabulky z editoru */
html.dark .rte-content table { border-color: var(--dm-border); }
html.dark .rte-content th,
html.dark .rte-content td    { border-color: var(--dm-border); }

/* ============================================================
   8b) Podrubrika Tejpování (?cont=139) – vlastní třídy .tejp-* z CMS.
   Obsah má v sobě <style> s pevnými světlými barvami; selektory tady
   jsou o třídu specifičtější, takže ho přebijí. Hero a sekce „Proč tejpování
   u nás“ jsou tmavě modré už ve světlém režimu, a proto se nemění.
   ============================================================ */
html.dark .tejp-wrap                   { color: var(--dm-text); }
html.dark .tejp-text                   { color: var(--dm-text-2); }
html.dark .tejp-section-heading h2,
html.dark .tejp-step h3,
html.dark .tejp-cta h2                 { color: var(--dm-link); }
html.dark .tejp-benefits .tejp-section-heading h2 { color: #fff; }
html.dark .tejp-wrap .tejp-hero h1     { color: #fff; }   /* přebíjí h1:not([class]) výše */

/* „Na co je tejpování vhodné?“ */
html.dark .tejp-indications            { background: var(--dm-bg-alt); border-color: var(--dm-border); }
html.dark .tejp-list li                { background: var(--dm-surface); color: var(--dm-text-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

/* „Jak probíhá aplikace tejpu?“ */
html.dark .tejp-step                   { background: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
html.dark .tejp-step:hover             { box-shadow: 0 6px 28px rgba(0, 0, 0, .5); }
html.dark .tejp-step p                 { color: var(--dm-muted); }

/* „Objednejte se na tejpování!“ */
html.dark .tejp-cta                    { background: var(--dm-bg-alt); border-color: var(--dm-border); }
html.dark .tejp-cta p                  { color: var(--dm-muted); }
html.dark .tejp-cta-note,
html.dark .tejp-cta-note svg,
html.dark .tejp-required-note          { color: var(--dm-muted); }

/* fotky: stín pro světlé pozadí nahradit neutrálním, obrázky mírně ztlumit */
html.dark .tejp-photos figure          { box-shadow: 0 4px 24px rgba(0, 0, 0, .45); }
html.dark .tejp-photos figure img      { filter: brightness(.9); }

/* inline styly ve formuláři (pole mají background:#fff;color:#1a2540 – řeší sekce 8) + šedý popisek */
html.dark .rte-content [style*="color:#6b7280" i],
html.dark .rte-content [style*="color: #6b7280" i],
html.dark .rte-content [style*="color:#9ca3af" i] { color: var(--dm-muted) !important; }

/* ============================================================
   9) Modální okna vložená z lib.asp (newsletter) – mají inline styly
   ============================================================ */
html.dark #nl-modal-ok > div,
html.dark #nl-modal-rm > div  { background: var(--dm-surface) !important; }
html.dark #nl-modal-ok p,
html.dark #nl-modal-rm p      { color: var(--dm-text) !important; }
html.dark #nl-modal-rm p ~ p  { color: var(--dm-muted) !important; }

/* ============================================================
   10) Přepínač režimu (sluníčko / měsíc, Bootstrap Icons)
   ============================================================ */
} /* /@media screen */

/* Přepínač je viditelný vždy – jeho vzhled nesmí záviset na tmavém režimu */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: .5rem;
  border: 0;
  background: transparent;
  color: #4b5563;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.theme-toggle:hover {
  color: #0C2C66;
  background-color: rgba(96, 165, 250, .14);
}
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible {
  outline: 2px solid #0C2C66;
  outline-offset: 2px;
}
/* ve světlém režimu se ukazuje měsíc (= přepnout na tmavý), v tmavém sluníčko */
.theme-toggle .theme-icon-sun  { display: none; }
.theme-toggle .theme-icon-moon { display: inline-block; }
html.dark .theme-toggle .theme-icon-sun  { display: inline-block; }
html.dark .theme-toggle .theme-icon-moon { display: none; }
html.dark .theme-toggle       { color: var(--dm-text-2); }
html.dark .theme-toggle:hover { color: var(--dm-link-hover); background-color: rgba(141, 184, 255, .14); }
html.dark .theme-toggle:focus-visible { outline-color: var(--dm-link); }

@media print { .theme-toggle { display: none; } }