/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --bg: #FAF9F7;
  --white: #ffffff;
  --border: #E3E0DB;
  --border-dark: #C5BFB8;
  --text: #2B2926;
  --muted: #7D766F;
  --muted-light: #A09890;

  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-l: #eff6ff;
  --blue-m: #dbeafe;

  --green: #16a34a;
  --green-dark: #15803d;
  --green-l: #f0fdf4;
  --green-m: #dcfce7;

  --amber: #d97706;
  --amber-dark: #b45309;
  --amber-l: #fffbeb;
  --amber-m: #fef3c7;

  --red: #dc2626;
  --red-dark: #b91c1c;
  --red-l: #fef2f2;
  --red-m: #fee2e2;

  --purple: #6b21a8;
  --purple-dark: #581c87;
  --purple-l: #f3e8ff;
  --purple-m: #e9d5ff;

  --sidebar-w: 248px;
  --header-h: 64px;
  --radius: 14px;
  --radius-lg: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(45,41,38,.04), 0 1px 3px rgba(45,41,38,.05);
  --shadow: 0 4px 16px -4px rgba(45,41,38,.10), 0 2px 6px -2px rgba(45,41,38,.06);
  --shadow-lg: 0 12px 32px rgba(17,24,39,.12);

  /* Clinical Clarity palette */
  --color-primary: #9C6E32;
  --color-secondary: #8C7356;
  --color-tertiary: #407496;
  --color-neutral: #7D766F;
  --color-primary-hover: #835B27;
  --color-tertiary-hover: #335E79;
  --color-bg: #FAF9F7;
  --color-border: #E3E0DB;
  --color-text: #2B2926;

  /* Redesign additions */
  --surface: #ffffff;
  --border-strong: #DAD4CC;
  --muted-soft: #A39B92;
  --green-soft: #eef6f0;
  --red-soft: #fbeeec;
  --amber-soft: #fdf3e7;
  --steel-soft: #eef3f6;
}

/* ============================================================
   DARK MODE
   ============================================================ */
body.dark-mode {
  /* Base surface tokens — everything using these goes dark automatically */
  --bg:           #0f0f0e;
  --bg-alt:       #1a1a18;
  --white:        #1a1a18;
  --surface:      #1a1a18;
  --text:         #f0ede8;
  --muted:        #888580;
  --muted-light:  #666360;
  --muted-soft:   #666360;
  --border:       #2e2e2b;
  --border-dark:  #3a3a37;
  --border-strong:#3a3a37;
  /* Tone down light pastels so chips/badges don't glow */
  --green-soft:  rgba(22,163,74,.14);
  --red-soft:    rgba(220,38,38,.14);
  --amber-soft:  rgba(217,119,6,.14);
  --steel-soft:  rgba(64,116,150,.14);
  --blue-l:      rgba(37,99,235,.12);
  --blue-m:      rgba(37,99,235,.2);
  --green-l:     rgba(22,163,74,.1);
  --green-m:     rgba(22,163,74,.2);
  --amber-l:     rgba(217,119,6,.1);
  --amber-m:     rgba(217,119,6,.2);
  --red-l:       rgba(220,38,38,.1);
  --red-m:       rgba(220,38,38,.2);
  --purple-l:    rgba(107,33,168,.1);
  --purple-m:    rgba(107,33,168,.2);
}

/* Explicit overrides for elements that don't use the CSS variables */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea {
  background: #1a1a18 !important;
  color: #f0ede8 !important;
  border-color: #2e2e2b !important;
}

body.dark-mode table thead tr th {
  background: #111110;
  color: #888580;
}

body.dark-mode table tbody tr:hover td {
  background: #1e1e1c;
}

body.dark-mode #sidebar {
  background: #0a0a09;
  border-right-color: #2e2e2b;
}

body.dark-mode .nav-group-label {
  color: #555552;
}

body.dark-mode .nav-link {
  color: #b0aca6;
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
  background: rgba(240,237,232,.07);
  color: #f0ede8;
}

body.dark-mode #header {
  background: rgba(15,15,14,.92);
  border-bottom-color: #2e2e2b;
}

body.dark-mode .page-header {
  background: #111110;
  border-color: #2e2e2b;
}

body.dark-mode .res-bar {
  background: #111110;
  border-color: #2e2e2b;
}

body.dark-mode .modal-box,
body.dark-mode .modal-header,
body.dark-mode .modal-footer,
body.dark-mode .modal-body {
  background: #1a1a18;
  border-color: #2e2e2b;
}

body.dark-mode .btn {
  background: #222220;
  border-color: #3a3a37;
  color: #d0cdc8;
}

body.dark-mode .btn:hover:not(:disabled) {
  background: #2a2a28;
  border-color: #4a4a46;
}

body.dark-mode .metric,
body.dark-mode .metric-card,
body.dark-mode .panel,
body.dark-mode .card {
  background: #1a1a18;
  border-color: #2e2e2b;
}

body.dark-mode .rrow:hover {
  background: #222220;
}

body.dark-mode .tag-gray {
  background: #2a2a28;
  color: #888580;
}

/* Table row zebra stripe — hardcoded in base CSS */
body.dark-mode tbody tr:nth-child(even) {
  background: #161614;
}

/* Search / filter inputs — no base background set, browser defaults to white */
body.dark-mode .search-input {
  background: #1a1a18;
  color: #f0ede8;
  border-color: #2e2e2b;
}

/* MAR medication card header — hardcoded #fafaf8 */
body.dark-mode .mar-med-header {
  background: #111110;
}

/* MAR cells — hardcoded light values */
body.dark-mode .mar-cell.future {
  background: #1e1e1c;
  color: #555552;
}

body.dark-mode .mar-cell.empty {
  background: #222220;
}

/* Tab buttons on resident page — no background reset, browser shows ButtonFace */
body.dark-mode .tab {
  background: transparent;
}

/* Progress bar track — hardcoded #e5e7eb */
body.dark-mode .scan-progress-bar {
  background: #2e2e2b;
}

/* Inline style="background:#f2f0ec" rows on form pages */
body.dark-mode [style*="background:#f2f0ec"] {
  background: #1e1e1c !important;
}

/* Clinical Clarity token set — separate from --bg/--border/--text, used by
   Admin Reports, form pages, and JS-generated HTML */
body.dark-mode {
  --color-bg:           #0f0f0e;
  --color-border:       #2e2e2b;
  --color-text:         #f0ede8;
  --color-neutral:      #888580;
  --color-secondary:    #a09890;
}

/* Dropdown nav toggle — no base background */
body.dark-mode .nav-dropdown-toggle {
  color: #b0aca6;
}

/* res-bar selects */
body.dark-mode .res-bar-select {
  background: #1a1a18;
  color: #f0ede8;
  border-color: #2e2e2b;
}

/* Form page document blocks — hardcoded inline backgrounds */
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: white"] {
  background: #1a1a18 !important;
  color: #f0ede8 !important;
}

body.dark-mode .sig-modal {
  background: #1a1a18;
}

body.dark-mode [style*="background:#f8f7f5"],
body.dark-mode [style*="background: #f8f7f5"] {
  background: #111110 !important;
}

body.dark-mode [style*="background:#f2f0ec"],
body.dark-mode [style*="background: #f2f0ec"] {
  background: #1e1e1c !important;
}

/* AI-fill input highlight (#f0f7ff) — turn into a subtle dark-blue tint */
body.dark-mode [style*="background:#f0f7ff"] {
  background: #0d1a2e !important;
}

/* Admin Reports — JS-generated card backgrounds */
body.dark-mode [style*="background:#f0fdf4"] {
  background: rgba(22,163,74,.12) !important;
  border-color: rgba(22,163,74,.3) !important;
}

/* Checklist rows — checked/done state in dark mode */
body.dark-mode .scl-row.done {
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.3);
}

body.dark-mode [style*="background:#fef2f2"] {
  background: rgba(220,38,38,.12) !important;
  border-color: rgba(220,38,38,.3) !important;
}

body.dark-mode [style*="background:#eff6ff"] {
  background: rgba(37,99,235,.15) !important;
  color: #93c5fd !important;
  border-color: rgba(37,99,235,.3) !important;
}

body, input, select, textarea,
#sidebar, #header, .modal-box, .modal-header, .modal-footer,
.modal-inner, .card, .metric, .metric-card, .panel, .btn,
.page-header, .res-bar, table, th, td, .nav-link {
  transition: background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(64,116,150,.05), transparent 60%),
    radial-gradient(900px 500px at -5% 0%, rgba(156,110,50,.05), transparent 55%),
    var(--bg);
  color: var(--text);
  line-height: 1.5;
  letter-spacing: -.01em;
  min-height: 100vh;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: inherit;
}

ul {
  list-style: none;
}