/**
 * Qvora Clinic — dark theme (screen only; printing always stays light).
 * Overrides the design tokens of qvora-tokens.css, so every component that already uses
 * var(--surface), var(--text) ... follows. Load AFTER qvora-tokens.css / qvora-components.css.
 * Text contrast: body text on surface and muted text on surface are both >= 4.5:1 (WCAG 2.1 AA).
 */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1220;
    --surface: #121a2e;
    --surface-sunken: #0e1527;
    --surface-hover: #1a2440;
    --surface-inverse: #060b18;
    --surface-inverse-hover: #16224a;
    --border: #2a3556;
    --border-strong: #8a95b4;
    --text: #e8ecf8;
    --text-muted: #a9b4d0;
    --text-inverse: #ffffff;
    --text-inverse-muted: #b8c2e0;
    --primary: #6f8cff;
    --primary-hover: #8aa1ff;
    --on-primary: #0b1220;
    --primary-soft: #1b2750;
    --primary-text: #9fb4ff;
    --pulse-soft: #0f2f3a;
    --pulse-text: #5fd3ee;
    --success: #4cc38a;
    --success-soft: #12301f;
    --warning: #f0b050;
    --warning-soft: #3a2a0c;
    --danger: #ff7b8a;
    --on-danger: #0b1220;
    --danger-soft: #3b1620;
    --neutral-soft: #1c2540;
    --scrim: rgba(0, 0, 0, 0.68);
    --focus-ring-color: #8aa1ff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --tblr-body-color-rgb: 232, 236, 248;
    --tblr-secondary-rgb: 169, 180, 208;
  }
  html[data-theme="dark"] body { background: var(--bg); color: var(--text); }

  /* Fields, cards and tables that the legacy sheets paint with their own light colours */
  html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  html[data-theme="dark"] select,
  html[data-theme="dark"] textarea,
  html[data-theme="dark"] .form-control,
  html[data-theme="dark"] .form-select {
    background-color: var(--surface-sunken); color: var(--text); border-color: var(--border);
  }
  html[data-theme="dark"] ::placeholder { color: var(--text-muted); opacity: 1; }
  html[data-theme="dark"] .card, html[data-theme="dark"] .dashboard-card, html[data-theme="dark"] .stat-card,
  html[data-theme="dark"] .modal, html[data-theme="dark"] .table-wrap, html[data-theme="dark"] .main-topbar {
    background: var(--surface); color: var(--text); border-color: var(--border);
  }
  html[data-theme="dark"] .data-table th { background: var(--surface-sunken); color: var(--text-muted); }
  html[data-theme="dark"] .data-table td { color: var(--text); }
  html[data-theme="dark"] .hint, html[data-theme="dark"] .text-secondary, html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
  html[data-theme="dark"] .btn-outline, html[data-theme="dark"] .btn-ghost { color: var(--text); border-color: var(--border); }
  html[data-theme="dark"] .btn-outline:hover, html[data-theme="dark"] .btn-ghost:hover { background: var(--surface-hover); }
  html[data-theme="dark"] a { color: var(--primary-text); }
  html[data-theme="dark"] img.brand-logo-img { background: transparent; }

  .qv-theme-toggle { min-width: 34px; }
}