/*
 * Dark theme (the sun/moon switch in the navbar, partials/navbar.html).
 *
 * The templates are written with light Tailwind colours (bg-white, text-neutral-900…). Instead of
 * a dark: twin on every element, this file remaps those utilities while <html> has the "dark"
 * class. `html.dark .x` outranks Tailwind's `.x`, so nothing else needs to change. When a template
 * uses a new light colour class, add its dark value here.
 *
 * Left alone on purpose: sections that are already dark (bg-artec-dark, bg-neutral-900, photos with
 * overlays), white text, the red brand colour, and white "wells" behind product photos (their
 * images have white backgrounds — see the last block).
 */
html.dark {
  color-scheme: dark;            /* native form controls, scrollbars, date pickers */
  --d-page: #12171a;
  --d-surface: #1a2125;
  --d-raised: #222a2f;
  --d-hover: #2b343a;
  --d-line: rgba(255, 255, 255, .09);
  --d-line-strong: rgba(255, 255, 255, .16);
  --d-text: #eceff1;
  --d-text-2: #c9d0d4;
  --d-text-3: #a3adb3;
  --d-text-4: #828c92;
}

html.dark body { background-color: var(--d-page); color: var(--d-text); }

/* ----- surfaces ----- */
html.dark .bg-white { background-color: var(--d-surface); }
html.dark .bg-white\/95, html.dark .bg-white\/90 { background-color: rgba(18, 23, 26, .94); }
html.dark .bg-neutral-50, html.dark .bg-artec-gray { background-color: var(--d-page); }
html.dark .bg-neutral-100 { background-color: var(--d-raised); }
html.dark .bg-neutral-200 { background-color: var(--d-hover); }
html.dark .bg-neutral-300 { background-color: #3a444b; }

/* tinted notes and badges */
html.dark .bg-red-50 { background-color: rgba(207, 46, 46, .14); }
html.dark .bg-orange-50, html.dark .from-orange-50 { background-color: rgba(249, 115, 22, .14); }
html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, .13); }
html.dark .bg-green-50, html.dark .bg-green-50\/60 { background-color: rgba(34, 197, 94, .12); }
html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, .14); }
html.dark .text-orange-700 { color: #fdba74; }
html.dark .text-blue-700 { color: #93c5fd; }
html.dark .text-green-700, html.dark .text-green-800 { color: #86efac; }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d; }
html.dark .text-red-700, html.dark .text-red-800 { color: #fca5a5; }
html.dark .border-red-200 { border-color: rgba(207, 46, 46, .4); }
html.dark .border-green-200 { border-color: rgba(34, 197, 94, .35); }
html.dark .bg-green-100 { background-color: rgba(34, 197, 94, .2); }
html.dark .text-amber-900 { color: #fde68a; }
html.dark .text-red-600 { color: #f87171; }
html.dark .peer:checked ~ .peer-checked\:bg-red-50 { background-color: rgba(207, 46, 46, .18); }
html.dark .peer:checked ~ .peer-checked\:text-red-800 { color: #fca5a5; }

/* ----- text ----- */
html.dark .text-neutral-900, html.dark .text-neutral-800, html.dark .text-black { color: var(--d-text); }
html.dark .text-neutral-700 { color: var(--d-text-2); }
html.dark .text-neutral-600 { color: var(--d-text-3); }
html.dark .text-neutral-500 { color: var(--d-text-4); }
html.dark .text-neutral-400 { color: #6f7a80; }
html.dark .placeholder\:text-neutral-400::placeholder { color: #6f7a80; }
html.dark ::placeholder { color: #6f7a80; }

/* ----- lines ----- */
html.dark .border-neutral-100, html.dark .border-neutral-200, html.dark .border-neutral-200\/60,
html.dark .divide-neutral-100 > * + *, html.dark .divide-neutral-200 > * + * { border-color: var(--d-line); }
html.dark .border-neutral-300 { border-color: var(--d-line-strong); }
html.dark .ring-white, html.dark .ring-neutral-50 { --tw-ring-color: var(--d-page); }

/* ----- hovers ----- */
html.dark .hover\:bg-neutral-50:hover, html.dark .hover\:bg-neutral-100:hover { background-color: var(--d-hover); }
html.dark .hover\:bg-neutral-200:hover { background-color: #3a444b; }
html.dark .hover\:bg-white:hover { background-color: var(--d-raised); }
html.dark .hover\:bg-red-50:hover { background-color: rgba(207, 46, 46, .2); }
html.dark .hover\:text-neutral-900:hover, html.dark .hover\:text-neutral-700:hover { color: #fff; }
html.dark .hover\:border-neutral-300:hover, html.dark .hover\:border-neutral-400:hover { border-color: rgba(255, 255, 255, .3); }
html.dark .hover\:border-neutral-900:hover { border-color: var(--d-text); }

/* Dark buttons and selected options (bg-neutral-900, usually with white text) would vanish on a
   dark page: a lighter dark grey keeps them visible and keeps their white text readable. */
html.dark .bg-neutral-900:not(section):not(header):not(footer) { background-color: #3b464d; }
html.dark .hover\:bg-neutral-900:hover { background-color: #4a565e; }
html.dark .border-neutral-900, html.dark .border-neutral-800 { border-color: #8a959b; }

/* Plain form fields without their own background class */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
html.dark select, html.dark textarea { background-color: var(--d-surface); color: var(--d-text); }

/* ----- shadows: lighter lines instead of black shadows ----- */
html.dark .shadow-sm, html.dark .shadow { box-shadow: 0 0 0 1px var(--d-line); }

/* ----- pop-ups with their own styles ----- */
/* configurator dialogs (products.html <style>): details, wizard, compare, system builder, quote, glossary */
html.dark .catalog-dialog-box { background: var(--d-surface); box-shadow: 0 0 0 1px var(--d-line), 0 20px 60px rgba(0, 0, 0, .6); }
html.dark .catalog-dialog-head { border-bottom-color: var(--d-line); color: var(--d-text); }
html.dark .catalog-dialog-head button { background: var(--d-raised); color: var(--d-text); }
html.dark .catalog-dialog-foot { background: var(--d-page); border-top-color: var(--d-line); }
html.dark .catalog-dialog { background: rgba(0, 0, 0, .7); }

/* search results: highlighted words (light yellow in light mode) */
html.dark mark { background-color: rgba(250, 204, 21, .22) !important; color: #fff !important; }

/* ----- the navbar logo has dark lettering: the footer's light version in dark mode ----- */
.logo-for-dark { display: none; }
html.dark .logo-for-light { display: none; }
html.dark .logo-for-dark { display: block; }

/* ----- article / page bodies written in the admin (ck-content.css) ----- */
html.dark .ck-content figcaption { color: var(--d-text-4); }
html.dark .ck-content table th { background: var(--d-raised); color: var(--d-text); }
html.dark .ck-content table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
html.dark .ck-content table td, html.dark .ck-content table th { border-color: var(--d-line); }
html.dark .ck-content details { background: var(--d-surface); border-color: var(--d-line); }
html.dark .ck-content details summary { color: var(--d-text); }
html.dark .ck-content blockquote { color: var(--d-text-2); }

/* ----- product photos have white backgrounds: their wells stay light, but dimmed ----- */
/* The well is a soft grey and the photo is dimmed by the same amount, so a photo's own white
   background turns the same grey and blends in instead of showing as a white box. */
html.dark .bg-white:not(.task-btn):has(> img.object-contain),
html.dark .img-well { background-color: #d6d8da; }
html.dark .bg-white:not(.task-btn):has(> img.object-contain) > img.object-contain,
html.dark .img-well > img { filter: brightness(.84); }
html.dark img.object-contain.bg-white { background-color: #fff; filter: brightness(.84); }  /* photos with their own white panel */
html.dark .bg-white:not(.task-btn):has(> img.object-contain) > span > span { background-color: #eef0f1; color: #262626; }

/* The configurator's application tiles: black line icons, turned light on the dark tile */
html.dark .task-btn > img { filter: invert(1) brightness(.85); }

/* The switch itself */
.theme-switch .theme-knob { transition: transform .25s ease, background-color .25s ease; }
html.dark .theme-switch .theme-knob { transform: translateX(20px); }
.theme-switch .icon-moon, html.dark .theme-switch .icon-sun { display: none; }
html.dark .theme-switch .icon-moon { display: block; }