/* DRB V18.1 Theme Add-on (2026-10-25)
   Explicitly scoped color-only additions. Does not alter React component geometry,
   clinical form width, metric definitions, table content or API interactions.
   Design baseline: user's navy/teal DRB screenshot. */
:root { --drb-radius: 15px; --drb-shadow-dark: 0 10px 30px rgba(0,6,18,.20); }
html { scroll-behavior: auto; }
html[data-drb-theme="dark"] { color-scheme: dark; }
html[data-drb-theme="light"] { color-scheme: light;
  --background: #f3f7fc; --foreground: #152238;
  --card: #ffffff; --card-foreground: #17253b;
  --popover: #fff; --popover-foreground: #17253b;
  --muted: #eaf0f8; --muted-foreground: #60738e;
  --secondary: #e9f0fa; --secondary-foreground: #233650;
  --accent: #e6effc; --accent-foreground: #123456;
  --border: #d9e4f2; --input: #d1deed;
  --sidebar: #eef4fb; --sidebar-foreground: #233650;
  --sidebar-accent: #dbe9f8; --sidebar-accent-foreground: #193656;
  --sidebar-border: #d1dfed;
}
/* Dark — visual consistency across all actual routes; never replace dashboard JS. */
html[data-drb-theme="dark"] body { background: radial-gradient(1000px 620px at 57% -290px, rgba(41,104,165,.20), transparent 82%), #090d14; }
html[data-drb-theme="dark"] aside:has([data-testid^="nav-"]) {background: linear-gradient(175deg,#0a1a2b,#0b1424 80%) !important;border-right-color:#20304a!important;}
html[data-drb-theme="dark"] [data-slot="card"] {background:linear-gradient(155deg,#142136,#111b2d 82%)!important;border-color:#24334c!important;border-radius:var(--drb-radius);box-shadow:var(--drb-shadow-dark);}
html[data-drb-theme="dark"] [data-slot="card-title"] {color:#eff6ff;}
html[data-drb-theme="dark"] [data-testid^="nav-"][aria-current="page"] {background:#254c88!important;color:white!important;}
html[data-drb-theme="dark"] table thead {background:#142338;}
html[data-drb-theme="dark"] table tbody tr:hover {background:rgba(55,99,158,.14);}
html[data-drb-theme="dark"] :is(input,textarea,select):focus-visible {outline:2px solid #4e94ff;outline-offset:1px;}
/* Light — not a visual filter: true white cards and correct light palette.
   Handle Tailwind's hard-coded dark backgrounds without changing width/spacing. */
html[data-drb-theme="light"] body {background: radial-gradient(850px 400px at 55% -120px,#e5f1ff 0,transparent 90%),#f3f7fc!important;color:#17253b;}
html[data-drb-theme="light"] :is(main, #root) {color:#17253b;}
html[data-drb-theme="light"] aside:has([data-testid^="nav-"]) {background:linear-gradient(165deg,#f5f9ff,#eaf2fc)!important;border-right:1px solid #d5e3f2!important;}
html[data-drb-theme="light"] [class*="bg-[#090D14"],
html[data-drb-theme="light"] [class*="bg-[#0D131F"],
html[data-drb-theme="light"] [class*="bg-[#0F172A"],
html[data-drb-theme="light"] [class*="bg-[#172033"] {background:#f0f5fc!important;}
html[data-drb-theme="light"] [class*="bg-[#111827"] {background:#ffffff!important;}
html[data-drb-theme="light"] [class*="bg-[#1E293B"] {background:#eaf1fa!important;}
html[data-drb-theme="light"] [data-slot="card"] {background:#fff!important;border:1px solid #dbe6f3!important;box-shadow:0 10px 25px #1f43670c;}
html[data-drb-theme="light"] [data-slot="card-header"] {border-color:#dbe6f3!important;}
html[data-drb-theme="light"] :is([data-slot="card-title"], main h1, main h2, main h3, main h4, [role="dialog"] h2, [role="dialog"] h3) {color:#182945!important;}
html[data-drb-theme="light"] [class*="border-[#1E293B"],
html[data-drb-theme="light"] [class*="border-[#253247"],
html[data-drb-theme="light"] [class*="border-[#334155"] {border-color:#dbe5f1!important;}
html[data-drb-theme="light"] [data-slot="input"],
html[data-drb-theme="light"] [data-slot="select-trigger"],
html[data-drb-theme="light"] :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) {background:#fff!important;color:#1f314a!important;border-color:#ccdaeb!important;}
html[data-drb-theme="light"] :is(input,textarea)::placeholder {color:#7b8ba3;}
html[data-drb-theme="light"] [role="dialog"],
html[data-drb-theme="light"] [data-slot="dialog-content"],
html[data-drb-theme="light"] [role="menu"],
html[data-drb-theme="light"] [data-slot="popover-content"] {background:#fff!important;color:#233650!important;border-color:#d6e3f3!important;}
html[data-drb-theme="light"] [data-slot="tabs-list"] {background:#eaf1fa!important;border-color:#d6e3f3!important;}
html[data-drb-theme="light"] [data-slot="tabs-trigger"][data-state="active"] {background:#386ac4!important;color:#fff!important;}
html[data-drb-theme="light"] table thead {background:#f0f5fb!important;}
html[data-drb-theme="light"] table th {color:#415772!important;border-color:#d8e4f1!important;}
html[data-drb-theme="light"] table td {color:#283c58!important;border-color:#e2ebf5!important;}
html[data-drb-theme="light"] table tbody tr:hover {background:rgba(79,137,208,.08)!important;}
html[data-drb-theme="light"] :is(main,aside,[role="dialog"]) :is(.text-white,.text-slate-100,.text-slate-200,.text-slate-300) {color:#233650!important;}
html[data-drb-theme="light"] :is(main,aside,[role="dialog"]) :is(.text-slate-400,.text-slate-500,.text-slate-600) {color:#65788f!important;}
html[data-drb-theme="light"] :is(button,a,[role="button"]):is(.text-white,.bg-primary,.bg-blue-600,.bg-indigo-600) {color:#fff!important;}
html[data-drb-theme="light"] :is(button,a,[role="button"]) :is(.text-white) {color:inherit!important;}
html[data-drb-theme="light"] [data-testid^="nav-"] {color:#334a68!important;}
html[data-drb-theme="light"] [data-testid^="nav-"]:hover {background:#e0ebfa!important;}
html[data-drb-theme="light"] [data-testid^="nav-"][aria-current="page"] {background:#2f63c7!important;color:white!important;}
html[data-drb-theme="light"] :is(input,textarea,select,button,a):focus-visible {outline:2px solid #387bd5;outline-offset:2px;}
/* Keep the V18.1 1060px clinic dialog exactly as-is. Never set width/max-width here. */
/* Explicit mode control, outside the React root so route changes do not duplicate it. */
#drb-mode-control {all:initial;position:fixed;z-index:44;right:20px;bottom:18px;display:flex;gap:3px;
  font:600 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;padding:5px;
  border-radius:15px;box-shadow:0 12px 34px rgba(9,25,46,.22);border:1px solid var(--drb-mode-edge);background:var(--drb-mode-back);
  --drb-mode-back:#101f34;--drb-mode-edge:#344760;--drb-mode-ink:#bad1ed;--drb-mode-active:#315eb6;--drb-mode-on:#fff;}
html[data-drb-theme="light"] #drb-mode-control {--drb-mode-back:#fff;--drb-mode-edge:#cddced;--drb-mode-ink:#365476;--drb-mode-active:#315eb6;--drb-mode-on:#fff;}
#drb-mode-control button {all:unset;box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;gap:6px;border-radius:10px;
  min-width:77px;padding:9px 11px;color:var(--drb-mode-ink);cursor:pointer;transition:background-color .16s ease;}
#drb-mode-control button[aria-pressed="true"] {background:var(--drb-mode-active);color:var(--drb-mode-on);}
#drb-mode-control button:focus-visible {outline:2px solid #66b2ff;outline-offset:2px;}
#drb-mode-control svg {width:15px;height:15px;display:block;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:650px) {#drb-mode-control {bottom:12px;right:12px;} #drb-mode-control button {min-width:60px;padding:8px;} }
@media (prefers-reduced-motion:reduce) {#drb-mode-control button {transition:none;} }