/* ═══════════════════════════════════════════════════════════
   ТЕМНА ТЕМА — БАЗОВИЙ ШАР НА ВЕСЬ САЙТ.

   Навіщо. Темні стилі мали лише 56 в'юх із 230: на решті
   перемикач працював, але сторінка лишалась сліпучо-білою.
   Тут — мінімум, який робить БУДЬ-ЯКУ сторінку придатною для
   читання вночі, навіть якщо вона про темну тему нічого не знає.

   ПРИНЦИП: низька специфічність. Усі правила тут — це
   `:where(:root.dark-mode) <тег>` або один клас, тож будь-яке власне
   правило сторінки (`body.dark .container{…}`, `#panel{…}`)
   перебиває базу без !important. Сторінки з готовою темною
   темою нічого не помічають; сторінки без неї отримують
   притомний фон, текст і поля.

   Файл підключає views/templates/header.php ПЕРШИМ, ще до
   стилів сторінки — щоб її правила завжди були зверху.

   Класи ставить assets/common/theme.js: одразу обидва —
   .dark і .dark-mode (у проєкті історично дві конвенції).
   ═══════════════════════════════════════════════════════════ */

:root.dark-mode{
  --d-bg:#0f0f11;
  --d-surface:#17171b;
  --d-surface-2:#1e1e24;
  --d-line:#2a2a33;
  --d-ink:#e8e6ef;
  --d-ink-2:#a8a4b8;
  --d-muted:#7c7890;
  --d-accent:#9b90f5;
}

/* ── Полотно ─────────────────────────────────────────────── */
:where(:root.dark-mode) body{
  background-color:#0f0f11;
  color:#e8e6ef;
}

/* Заголовки й типовий текст — щоб не лишались чорними на чорному.
   `inherit` замість конкретного кольору: текст просто бере колір
   свого контейнера, тож картки з власним фоном не ламаються. */
:where(:root.dark-mode) h1,
:where(:root.dark-mode) h2,
:where(:root.dark-mode) h3,
:where(:root.dark-mode) h4,
:where(:root.dark-mode) h5,
:where(:root.dark-mode) h6,
:where(:root.dark-mode) p,
:where(:root.dark-mode) li,
:where(:root.dark-mode) dt,
:where(:root.dark-mode) dd,
:where(:root.dark-mode) label,
:where(:root.dark-mode) span,
:where(:root.dark-mode) td,
:where(:root.dark-mode) th,
:where(:root.dark-mode) figcaption,
:where(:root.dark-mode) summary{
  color:inherit;
}
:where(:root.dark-mode) small{ color:#a8a4b8 }

:where(:root.dark-mode) a{ color:#a99ef7 }
:where(:root.dark-mode) a:hover{ color:#c3bafa }

:where(:root.dark-mode) hr{ border-color:#2a2a33 }

/* ── Поля вводу ──────────────────────────────────────────── */
:where(:root.dark-mode) input,
:where(:root.dark-mode) textarea,
:where(:root.dark-mode) select{
  background-color:#1b1a22;
  color:#e8e6ef;
  border-color:#322f3e;
}
:where(:root.dark-mode) input::placeholder,
:where(:root.dark-mode) textarea::placeholder{ color:#6f6b82 }

/* ── Таблиці ─────────────────────────────────────────────── */
:where(:root.dark-mode) table{ border-color:#2a2a33 }
:where(:root.dark-mode) th,
:where(:root.dark-mode) td{ border-color:#2a2a33 }
:where(:root.dark-mode) thead th{ background-color:#1b1a22 }
:where(:root.dark-mode) tbody tr:nth-child(even){ background-color:rgba(255,255,255,.02) }

/* ── Код і цитати ────────────────────────────────────────── */
:where(:root.dark-mode) pre,
:where(:root.dark-mode) code,
:where(:root.dark-mode) kbd{
  background-color:#1b1a22;
  color:#dcd9e8;
  border-color:#2a2a33;
}
:where(:root.dark-mode) blockquote{ border-color:#322f3e; color:#a8a4b8 }

/* ── Картинки ────────────────────────────────────────────── */
/* Логотипи й іконки-лінійки бувають чорні на прозорому — вночі
   вони зникають. Інвертуємо ЛИШЕ ті, що самі про це попросили. */
:where(:root.dark-mode) img[data-dark="invert"]{ filter:invert(1) hue-rotate(180deg) }
/* Знімки препаратів і схеми навпаки — трохи гасимо, щоб не сліпили. */
:where(:root.dark-mode) img[data-dark="dim"]{ filter:brightness(.86) }

/* ── Скрол ───────────────────────────────────────────────── */
:where(:root.dark-mode) ::-webkit-scrollbar{ width:11px; height:11px }
:where(:root.dark-mode) ::-webkit-scrollbar-track{ background:#141418 }
:where(:root.dark-mode) ::-webkit-scrollbar-thumb{ background:#33313d; border-radius:99px }
:where(:root.dark-mode) ::-webkit-scrollbar-thumb:hover{ background:#413e4d }

/* ── Виділення ───────────────────────────────────────────── */
:where(:root.dark-mode) ::selection{ background:rgba(155,144,245,.32); color:#fff }

/* ═══════════════════════════════════════════════════════════
   ПЕРЕМИКАЧ ТЕМИ — ЗАПАСНИЙ ВИГЛЯД.

   Основний вигляд кнопки #hdrThemeBtn задає
   assets/common/header-sidebar.css. Там, де є хедер, він
   вантажиться ПІСЛЯ цього файлу й перекриває правила нижче —
   тобто на 119 сторінках із хедером усе як було.

   Але 63 сторінки (адмінки, редактори, English) хедера не
   мають: там кнопку створює сам theme.js, і взяти вигляд їй
   нізвідки. Тому базове оформлення лежить тут — щоб кнопка
   виглядала однаково скрізь, а не тільки де є хедер.
   ═══════════════════════════════════════════════════════════ */
#hdrThemeBtn{
  position:fixed; top:16px; right:16px; z-index:9000;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; padding:0;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.94);
  color:#4b5563;
  box-shadow:0 2px 10px rgba(15,23,42,.12);
  transition:color .15s ease, transform .15s ease;
}
#hdrThemeBtn:hover{ transform:translateY(-1px); color:#111827 }
#hdrThemeBtn svg{ width:19px; height:19px; display:block }

:where(:root.dark-mode) #hdrThemeBtn{
  background:rgba(27,26,34,.94);
  border-color:#322f3e;
  color:#c9c5d8;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}

@media (max-width:600px){
  #hdrThemeBtn{ top:10px; right:10px; width:36px; height:36px }
  #hdrThemeBtn svg{ width:17px; height:17px }
}

/* Старі посторінкові перемикачі — приховані: кнопка на сторінці
   має бути одна, і вона в хедері. Кожна з них лишає свій обробник
   у власній в'юсі й той самий ключ 'dark-mode', тож якщо десь
   доведеться повернути кнопку — вона одразу робоча. */
#dark-mode-toggle,
#dark-toggle,
#theme-toggle,
.dark-mode-toggle,
.dark-toggle,
.dark-btn{ display:none !important }

/* Виняток: сторінка 404 має власний макет без хедера, тож її
   кнопка — єдина на сторінці й має лишатись видимою. */
#themeBtn{ display:grid !important }