/* ============================================================
   Debi — clinical theme
   Teal/navy palette, sidebar app shell, soft cards & tables
   (look & feel adapted from the PatientMgmt house style)

   Every colour is a token on :root so the dark palette below is a
   pure token swap. Add new colours as tokens, not literals, and give
   each one a dark counterpart in the [data-bs-theme="dark"] block.
   ============================================================ */

:root {
  /* brand */
  --omh-teal: #0f766e;          /* solid fills (buttons) */
  --omh-teal-dark: #115e59;
  --omh-teal-darker: #134e4a;
  --omh-accent: #0f766e;        /* links, icons, accent text */
  --omh-accent-hover: #115e59;
  --omh-teal-soft: #ccfbf1;
  --omh-teal-soft-fg: #0f766e;
  --omh-navy: #0f2e3d;          /* headings */

  /* surfaces & text */
  --omh-ink: #15293b;
  --omh-muted: #64748b;
  --omh-label: #46627a;         /* form labels, table headers, dt */
  --omh-bg: #f2f6f9;
  --omh-card: #ffffff;
  --omh-surface-2: #f7fafc;     /* card headers, <pre>, slots */
  --omh-surface-3: #f0f5f9;     /* table headers */
  --omh-topbar-bg: rgba(255, 255, 255, .85);
  /* under 992px the topbar goes solid brand teal — see the responsive block */
  --omh-topbar-mobile-bg: linear-gradient(90deg, #0f766e, #115e59);
  --omh-line: #e3eaf1;
  --omh-line-soft: #eef3f8;     /* table row dividers */
  --omh-row-hover: #f3fbfa;
  --omh-radius: 0.9rem;
  --omh-shadow: 0 1px 2px rgba(15, 46, 61, .05), 0 8px 24px -12px rgba(15, 46, 61, .18);
  --omh-sidebar-w: 252px;
  --omh-bottom-nav-h: 3.75rem;

  /* sidebar — dark in both themes, deeper when the page is dark */
  --omh-sidebar-grad: linear-gradient(180deg, #0f2e3d 0%, #123a4c 60%, #14424f 100%);
  --omh-sidebar-fg: #d6e4ec;
  --omh-sidebar-item: #c2d7e1;
  --omh-sidebar-dim: #7da6b6;
  --omh-sidebar-brand-sub: #9fc1cf;

  /* controls */
  --omh-input-border: #d4dfe9;
  --omh-focus-border: #2dd4bf;
  --omh-focus-ring: rgba(45, 212, 191, .22);
  --omh-code: #0e7490;
  --omh-danger: #b91c1c;
  --omh-danger-soft: #fef2f2;
  --omh-drop-target: #eef9f7;
  --omh-alerting-border: #fecaca;
  --omh-table-color: var(--bs-emphasis-color);

  /* outline buttons keep their own tinted borders, distinct from input borders */
  --omh-outline-primary-border: #b9dedb;
  --omh-outline-danger-border: #f1c6c6;
  --omh-outline-secondary-fg: #5b7287;
  --omh-outline-secondary-border: #cfdae4;
  --omh-outline-secondary-hover-bg: #eef3f8;
  --omh-outline-secondary-hover-fg: #33495e;

  /* soft tints — icon chips */
  --tint-teal-bg: #ccfbf1;    --tint-teal-fg: #0f766e;
  --tint-blue-bg: #e0f2fe;    --tint-blue-fg: #0369a1;
  --tint-red-bg: #fee2e2;     --tint-red-fg: #b91c1c;
  --tint-amber-bg: #fef3c7;   --tint-amber-fg: #b45309;
  --tint-indigo-bg: #e0e7ff;  --tint-indigo-fg: #4338ca;
  --tint-slate-bg: #e2e8f0;   --tint-slate-fg: #475569;
  --tint-green-bg: #d1fae5;   --tint-green-fg: #047857;

  /* badges (soft pills) */
  --badge-secondary-bg: #e8eef4;  --badge-secondary-fg: #475569;
  --badge-success-bg: #d1fae5;    --badge-success-fg: #047857;
  --badge-danger-bg: #fee2e2;     --badge-danger-fg: #b91c1c;
  --badge-warning-bg: #fef3c7;    --badge-warning-fg: #92400e;
  --badge-primary-bg: #cffafe;    --badge-primary-fg: #0e7490;
  --badge-info-bg: #e0f2fe;       --badge-info-fg: #0369a1;
  --badge-dark-bg: #cbd5e1;       --badge-dark-fg: #1e293b;

  /* alerts */
  --alert-success-bg: #ecfdf5;  --alert-success-fg: #065f46;
  --alert-danger-bg: #fef2f2;   --alert-danger-fg: #991b1b;
  --alert-info-bg: #eff8ff;     --alert-info-fg: #075985;
  --alert-warning-bg: #fffbeb;  --alert-warning-fg: #92400e;

  /* table row states */
  --row-danger-bg: #fff1f2;
  --row-warning-bg: #fffbeb;
}

[data-bs-theme="dark"] {
  /* solid brand fills stay as-is: a lighter teal would drop white button text
     below 4.5:1. Only the accent used for text/icons is lightened. */
  --omh-accent: #5eead4;
  --omh-accent-hover: #99f6e4;
  --omh-teal-soft: rgba(45, 212, 191, .16);
  --omh-teal-soft-fg: #5eead4;
  --omh-navy: #e6f1f7;

  --omh-ink: #dbe6ee;
  --omh-muted: #93a7b8;
  --omh-label: #a8bccb;
  --omh-bg: #0b1620;
  --omh-card: #12212c;
  --omh-surface-2: #172935;
  --omh-surface-3: #1a2e3b;
  --omh-topbar-bg: rgba(18, 33, 44, .85);
  --omh-topbar-mobile-bg: linear-gradient(90deg, #115e59, #134e4a);
  --omh-line: #263b4a;
  --omh-line-soft: #1f313e;
  --omh-row-hover: #1a2d38;
  --omh-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .7);

  /* Map Bootstrap's own theme tokens onto the palette above, so every Bootstrap
     component (cards, dropdowns, inputs, modals, list groups) picks up this
     navy-tinted surface set instead of Bootstrap's default neutral greys.

     --bs-body-bg is deliberately the *card* colour, not the page colour: every
     raised Bootstrap component derives its background from it
     (--bs-card-bg, --bs-dropdown-bg, --bs-modal-bg, … all default to it), and
     body's own background is set from --omh-bg further down. That mirrors light
     mode, where --bs-body-bg is white while the page itself is grey. */
  --bs-body-bg: var(--omh-card);
  --bs-body-color: var(--omh-ink);
  --bs-body-color-rgb: 219, 230, 238;   /* keep in step with --omh-ink */
  --bs-emphasis-color: var(--omh-navy);
  --bs-border-color: var(--omh-line);
  --bs-secondary-bg: var(--omh-surface-2);
  --bs-tertiary-bg: var(--omh-surface-3);

  --omh-sidebar-grad: linear-gradient(180deg, #08121a 0%, #0c1c26 60%, #0e242e 100%);
  --omh-sidebar-fg: #c7d8e3;
  --omh-sidebar-item: #a9c1cf;
  --omh-sidebar-dim: #6b8b9c;
  --omh-sidebar-brand-sub: #86adbd;

  --omh-input-border: #2f4757;
  --omh-focus-border: #2dd4bf;
  --omh-focus-ring: rgba(45, 212, 191, .28);
  --omh-code: #67e8f9;
  --omh-danger: #fca5a5;
  --omh-danger-soft: rgba(239, 68, 68, .16);
  --omh-drop-target: rgba(45, 212, 191, .14);
  --omh-alerting-border: rgba(248, 113, 113, .38);
  --omh-table-color: var(--omh-ink);

  --omh-outline-primary-border: rgba(45, 212, 191, .32);
  --omh-outline-danger-border: rgba(248, 113, 113, .35);
  --omh-outline-secondary-fg: #a8bccb;
  --omh-outline-secondary-border: #2f4757;
  --omh-outline-secondary-hover-bg: #1f313e;
  --omh-outline-secondary-hover-fg: #dbe6ee;

  --tint-teal-bg: rgba(45, 212, 191, .16);     --tint-teal-fg: #5eead4;
  --tint-blue-bg: rgba(56, 189, 248, .16);     --tint-blue-fg: #7dd3fc;
  --tint-red-bg: rgba(248, 113, 113, .16);     --tint-red-fg: #fca5a5;
  --tint-amber-bg: rgba(251, 191, 36, .16);    --tint-amber-fg: #fcd34d;
  --tint-indigo-bg: rgba(129, 140, 248, .18);  --tint-indigo-fg: #a5b4fc;
  --tint-slate-bg: rgba(148, 163, 184, .18);   --tint-slate-fg: #cbd5e1;
  --tint-green-bg: rgba(52, 211, 153, .16);    --tint-green-fg: #6ee7b7;

  --badge-secondary-bg: rgba(148, 163, 184, .20);  --badge-secondary-fg: #cbd5e1;
  --badge-success-bg: rgba(52, 211, 153, .18);     --badge-success-fg: #6ee7b7;
  --badge-danger-bg: rgba(248, 113, 113, .18);     --badge-danger-fg: #fca5a5;
  --badge-warning-bg: rgba(251, 191, 36, .18);     --badge-warning-fg: #fcd34d;
  --badge-primary-bg: rgba(34, 211, 238, .18);     --badge-primary-fg: #67e8f9;
  --badge-info-bg: rgba(56, 189, 248, .18);        --badge-info-fg: #7dd3fc;
  --badge-dark-bg: rgba(203, 213, 225, .22);       --badge-dark-fg: #e2e8f0;

  --alert-success-bg: rgba(16, 185, 129, .13);  --alert-success-fg: #6ee7b7;
  --alert-danger-bg: rgba(239, 68, 68, .13);    --alert-danger-fg: #fca5a5;
  --alert-info-bg: rgba(56, 189, 248, .13);     --alert-info-fg: #7dd3fc;
  --alert-warning-bg: rgba(245, 158, 11, .13);  --alert-warning-fg: #fcd34d;

  --row-danger-bg: rgba(239, 68, 68, .12);
  --row-warning-bg: rgba(245, 158, 11, .12);
}

html { font-size: 15px; height: 100%; }

body {
  background: var(--omh-bg);
  color: var(--omh-ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

a { color: var(--omh-accent); }
a:hover { color: var(--omh-accent-hover); }

h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; color: var(--omh-navy); }
h5 { font-weight: 650; color: var(--omh-navy); }

/* ---------------- app shell ---------------- */

.omh-shell { display: flex; min-height: 100vh; }

.omh-sidebar {
  width: var(--omh-sidebar-w);
  flex-shrink: 0;
  background: var(--omh-sidebar-grad);
  color: var(--omh-sidebar-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.1rem .9rem;
  /* Not overflow-y:auto — the account dropup at the bottom has to escape the
     sidebar box. Scrolling lives on .omh-nav instead. */
}

.omh-brand {
  display: flex; align-items: center; gap: .6rem;
  color: #fff; text-decoration: none;
  font-weight: 800; font-size: 1.06rem; letter-spacing: -.01em;
  padding: .35rem .55rem 1.1rem;
}
.omh-brand:hover { color: #fff; }
.omh-brand .omh-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #14b8a6, #0ea5e9);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15rem;
  box-shadow: 0 6px 16px -6px rgba(20, 184, 166, .65);
}
.omh-brand small { display: block; font-size: .62rem; font-weight: 500; color: var(--omh-sidebar-brand-sub); letter-spacing: .08em; text-transform: uppercase; }

.omh-nav { display: flex; flex-direction: column; gap: .15rem; flex-grow: 1; min-height: 0; overflow-y: auto; }
.omh-nav .nav-section {
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--omh-sidebar-dim); padding: .9rem .6rem .35rem; font-weight: 600;
}
.omh-nav a {
  display: flex; align-items: center; gap: .65rem;
  color: var(--omh-sidebar-item); text-decoration: none;
  padding: .52rem .65rem; border-radius: .6rem;
  font-size: .92rem; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.omh-nav a i { font-size: 1.02rem; width: 1.25rem; text-align: center; opacity: .85; }
.omh-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.omh-nav a.active {
  background: linear-gradient(90deg, rgba(20, 184, 166, .28), rgba(20, 184, 166, .10));
  color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 #2dd4bf;
}

.omh-sidebar-footer { font-size: .7rem; color: var(--omh-sidebar-dim); padding: .75rem .6rem 0; border-top: 1px solid rgba(255,255,255,.08); }

/* ---------------- sidebar account (bottom-left) ---------------- */

.omh-account { margin-top: .8rem; flex-shrink: 0; }
.omh-account-toggle {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .45rem .55rem; border-radius: .7rem; text-align: left;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .05);
  color: var(--omh-sidebar-fg);
  transition: background .15s ease, border-color .15s ease;
}
.omh-account-toggle:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); }
.omh-account-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 .22rem var(--omh-focus-ring); }
.omh-account-toggle .bi-chevron-expand { margin-left: auto; font-size: .78rem; color: var(--omh-sidebar-dim); }
.omh-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #14b8a6);
  color: #fff; font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.omh-account-id { min-width: 0; }
.omh-account-id .name, .omh-account-id .role {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.omh-account-id .name { font-size: .82rem; font-weight: 600; color: #fff; line-height: 1.15; }
.omh-account-id .role { font-size: .68rem; color: var(--omh-sidebar-dim); }

/* data-bs-display="static" keeps Popper out of it, so the menu stays anchored to
   the toggle while the nav scrolls. Bootstrap's own .dropup rules are gated on the
   [data-bs-popper] attribute Popper would have added, so open upwards by hand. */
.omh-account-menu {
  --bs-dropdown-min-width: 100%;
  font-size: .88rem;
  top: auto; bottom: 100%;
  margin-top: 0; margin-bottom: .45rem;
}
.omh-account-menu-head { padding: .35rem 1rem .45rem; }
.omh-account-menu-head .name { display: block; font-weight: 650; color: var(--omh-navy); }
.omh-account-menu-head .role { display: block; font-size: .75rem; color: var(--omh-muted); }
.omh-account-menu .dropdown-item { display: flex; align-items: center; gap: .55rem; }
.omh-account-menu .dropdown-item .bi-check2 { margin-left: auto; opacity: 0; }
.omh-account-menu .dropdown-item[aria-checked="true"] { color: var(--omh-accent); font-weight: 600; }
.omh-account-menu .dropdown-item[aria-checked="true"] .bi-check2 { opacity: 1; }
.omh-account-menu form { margin: 0; }
.omh-account-signout:hover { color: var(--omh-danger); background: var(--omh-danger-soft); }

/* build stamp, directly under the account button */
.omh-build {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .45rem .6rem 0; flex-shrink: 0;
  font-size: .68rem; color: var(--omh-sidebar-dim);
}
.omh-build-version { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.omh-build-env {
  padding: .05rem .35rem; border-radius: .35rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent;
}
.omh-build-env.is-prod { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); }
.omh-build-env.is-nonprod { background: rgba(251, 191, 36, .16); border-color: rgba(251, 191, 36, .35); color: #fcd34d; }

/* ---------------- topbar + content ---------------- */

.omh-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

.omh-topbar {
  background: var(--omh-topbar-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--omh-line);
  padding: .65rem 1.6rem;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 1020;
}
.omh-topbar .omh-env {
  font-size: .72rem; font-weight: 600; color: var(--omh-teal-soft-fg);
  background: var(--omh-teal-soft); border-radius: 99px; padding: .25rem .7rem;
}
/* the office switcher reuses the pill, as a button */
.omh-topbar .omh-location-toggle { border: 0; font-size: .78rem; padding: .3rem .8rem; }
.omh-topbar .omh-location-toggle:hover { filter: brightness(.96); }
.omh-content { padding: 1.6rem 1.6rem 2.2rem; max-width: 1320px; width: 100%; }

.omh-footer { margin-top: auto; padding: .9rem 1.6rem; font-size: .76rem; color: var(--omh-muted); border-top: 1px solid var(--omh-line); }

/* ---------------- appearance switcher ---------------- */

.omh-theme-toggle {
  border: 1px solid var(--omh-line);
  background: var(--omh-card);
  color: var(--omh-muted);
  border-radius: .6rem;
  padding: .3rem .55rem;
  font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center;
}
.omh-theme-toggle:hover { color: var(--omh-accent); border-color: var(--omh-focus-border); }
.omh-theme-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 .22rem var(--omh-focus-ring); }
.omh-theme-menu { --bs-dropdown-min-width: 10.5rem; font-size: .88rem; }
.omh-theme-menu .dropdown-item { display: flex; align-items: center; gap: .55rem; }
.omh-theme-menu .dropdown-item .bi-check2 { margin-left: auto; opacity: 0; }
.omh-theme-menu .dropdown-item[aria-checked="true"] { color: var(--omh-accent); font-weight: 600; }
.omh-theme-menu .dropdown-item[aria-checked="true"] .bi-check2 { opacity: 1; }
/* the auth shell has no topbar — float the switcher in the corner instead */
.omh-auth .omh-theme-switch { position: fixed; top: 1rem; right: 1rem; z-index: 1030; }

/* ---------------- auth (login) shell ---------------- */

.omh-auth {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(20, 184, 166, .18), transparent 60%),
    radial-gradient(700px 460px at -10% 110%, rgba(14, 165, 233, .15), transparent 60%),
    var(--omh-bg);
  padding: 2rem 1rem;
}
.omh-auth-card {
  width: 100%; max-width: 880px;
  background: var(--omh-card); border-radius: 1.25rem;
  box-shadow: var(--omh-shadow); padding: 2.2rem 2.4rem;
}
.omh-auth-card h1 { font-size: 1.3rem; }
.omh-auth-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem; }
.omh-auth-logo {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #14b8a6, #0ea5e9);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3rem;
}
.omh-auth-title { font-weight: 800; font-size: 1.1rem; color: var(--omh-navy); }
.omh-auth-sub { font-size: .7rem; color: var(--omh-muted); letter-spacing: .08em; text-transform: uppercase; }
.omh-auth-sub b { color: var(--omh-accent); font-weight: 800; }

/* ---------------- cards & stat tiles ---------------- */

.card {
  border: 1px solid var(--omh-line);
  border-radius: var(--omh-radius);
  box-shadow: var(--omh-shadow);
}
.card-header { background: var(--omh-surface-2); border-bottom: 1px solid var(--omh-line); font-weight: 650; color: var(--omh-navy); }

.omh-stat {
  background: var(--omh-card);
  border: 1px solid var(--omh-line);
  border-radius: var(--omh-radius);
  box-shadow: var(--omh-shadow);
  padding: 1rem 1.1rem;
  display: flex; align-items: center; gap: .9rem;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.omh-stat:hover { transform: translateY(-2px); }
.omh-stat .icon {
  width: 44px; height: 44px; border-radius: .8rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.omh-stat .value { font-size: 1.55rem; font-weight: 750; line-height: 1; color: var(--omh-navy); }
.omh-stat .label { font-size: .78rem; color: var(--omh-muted); text-decoration: none; display: block; margin-top: .2rem; }
.omh-stat .label:hover { color: var(--omh-accent); }
.omh-stat.alerting { border-color: var(--omh-alerting-border); }
.omh-stat.alerting .value { color: var(--omh-danger); }

.tint-teal   { background: var(--tint-teal-bg);   color: var(--tint-teal-fg); }
.tint-blue   { background: var(--tint-blue-bg);   color: var(--tint-blue-fg); }
.tint-red    { background: var(--tint-red-bg);    color: var(--tint-red-fg); }
.tint-amber  { background: var(--tint-amber-bg);  color: var(--tint-amber-fg); }
.tint-indigo { background: var(--tint-indigo-bg); color: var(--tint-indigo-fg); }
.tint-slate  { background: var(--tint-slate-bg);  color: var(--tint-slate-fg); }
.tint-green  { background: var(--tint-green-bg);  color: var(--tint-green-fg); }

/* ---------------- tables ---------------- */

.table {
  background: var(--omh-card);
  border-collapse: separate; border-spacing: 0;
  border-radius: var(--omh-radius);
  box-shadow: var(--omh-shadow);
  overflow: hidden;
  font-size: .9rem;
  --bs-table-bg: var(--omh-card);
  --bs-table-color: var(--omh-table-color);
  --bs-table-striped-bg: var(--omh-surface-2);
  --bs-table-striped-color: var(--omh-table-color);
}
.table thead th {
  background: var(--omh-surface-3);
  color: var(--omh-label);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 650;
  border-bottom: 1px solid var(--omh-line);
  padding: .7rem .85rem;
  white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: var(--omh-radius); }
.table thead th:last-child { border-top-right-radius: var(--omh-radius); }
.table tbody td { padding: .62rem .85rem; border-bottom: 1px solid var(--omh-line-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--omh-row-hover); }
/* Bootstrap's row variants force a near-black text colour, which is unreadable
   on the translucent dark tints — pin both to the themed table colour. */
.table .table-danger td { background: var(--row-danger-bg); color: var(--omh-table-color); }
.table .table-warning td { background: var(--row-warning-bg); color: var(--omh-table-color); }

code { color: var(--omh-code); font-size: .82em; }

/* ---------------- badges (soft pills) ---------------- */

.badge {
  border-radius: 99px;
  font-weight: 600;
  padding: .38em .8em;
  font-size: .72em;
  letter-spacing: .02em;
}
.badge.bg-secondary { background: var(--badge-secondary-bg) !important; color: var(--badge-secondary-fg); }
.badge.bg-success   { background: var(--badge-success-bg) !important;   color: var(--badge-success-fg); }
.badge.bg-danger    { background: var(--badge-danger-bg) !important;    color: var(--badge-danger-fg); }
.badge.bg-warning   { background: var(--badge-warning-bg) !important;   color: var(--badge-warning-fg); }
.badge.bg-primary   { background: var(--badge-primary-bg) !important;   color: var(--badge-primary-fg); }
.badge.bg-info      { background: var(--badge-info-bg) !important;      color: var(--badge-info-fg); }
.badge.bg-dark      { background: var(--badge-dark-bg) !important;      color: var(--badge-dark-fg); }

/* ---------------- buttons & forms ---------------- */

.btn { border-radius: .65rem; font-weight: 600; font-size: .9rem; padding: .46rem 1rem; }

.btn-primary {
  --bs-btn-bg: var(--omh-teal); --bs-btn-border-color: var(--omh-teal);
  --bs-btn-hover-bg: var(--omh-teal-dark); --bs-btn-hover-border-color: var(--omh-teal-dark);
  --bs-btn-active-bg: var(--omh-teal-darker); --bs-btn-active-border-color: var(--omh-teal-darker);
  --bs-btn-disabled-bg: #99b8b5; --bs-btn-disabled-border-color: #99b8b5;
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
  box-shadow: 0 6px 14px -6px rgba(15, 118, 110, .55);
}
.btn-outline-primary {
  --bs-btn-color: var(--omh-accent); --bs-btn-border-color: var(--omh-outline-primary-border);
  --bs-btn-hover-bg: var(--omh-teal); --bs-btn-hover-border-color: var(--omh-teal);
  --bs-btn-active-bg: var(--omh-teal-dark); --bs-btn-active-border-color: var(--omh-teal-dark);
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
}
.btn-success {
  --bs-btn-bg: #059669; --bs-btn-border-color: #059669;
  --bs-btn-hover-bg: #047857; --bs-btn-hover-border-color: #047857;
  box-shadow: 0 6px 14px -6px rgba(5, 150, 105, .5);
}
.btn-danger {
  --bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626;
  --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c;
}
.btn-outline-secondary { --bs-btn-color: var(--omh-outline-secondary-fg); --bs-btn-border-color: var(--omh-outline-secondary-border); --bs-btn-hover-bg: var(--omh-outline-secondary-hover-bg); --bs-btn-hover-color: var(--omh-outline-secondary-hover-fg); --bs-btn-hover-border-color: var(--omh-outline-secondary-border); }
.btn-outline-danger { --bs-btn-color: var(--omh-danger); --bs-btn-border-color: var(--omh-outline-danger-border); --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; }
.btn-sm { padding: .3rem .65rem; font-size: .8rem; }

.form-control, .form-select {
  border-radius: .65rem;
  border-color: var(--omh-input-border);
  padding: .5rem .8rem;
  font-size: .92rem;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--omh-focus-border);
  box-shadow: 0 0 0 .22rem var(--omh-focus-ring);
}
.form-check-input:checked { background-color: var(--omh-teal); border-color: var(--omh-teal); }
.form-label { font-size: .8rem; font-weight: 600; color: var(--omh-label); margin-bottom: .3rem; }
.text-danger { color: var(--omh-danger) !important; }
.text-teal { color: var(--omh-accent) !important; }

/* ---------------- alerts ---------------- */

.alert { border: 0; border-radius: var(--omh-radius); box-shadow: var(--omh-shadow); font-size: .92rem; }
.alert-success { background: var(--alert-success-bg); color: var(--alert-success-fg); box-shadow: inset 4px 0 0 #10b981, var(--omh-shadow); }
.alert-danger  { background: var(--alert-danger-bg);  color: var(--alert-danger-fg);  box-shadow: inset 4px 0 0 #ef4444, var(--omh-shadow); }
.alert-info    { background: var(--alert-info-bg);    color: var(--alert-info-fg);    box-shadow: inset 4px 0 0 #38bdf8, var(--omh-shadow); }
.alert-warning { background: var(--alert-warning-bg); color: var(--alert-warning-fg); box-shadow: inset 4px 0 0 #f59e0b, var(--omh-shadow); }

pre { border-radius: .75rem; }
/* JSON / free-text dumps — surface tint that follows the theme */
.omh-pre { background: var(--omh-surface-2); color: var(--omh-ink); }

dl.row dt { font-size: .78rem; font-weight: 650; color: var(--omh-label); text-transform: uppercase; letter-spacing: .04em; }
dl.row dd { font-size: .92rem; }

/* ---------------- section heading ---------------- */
.omh-page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.3rem; }
.omh-page-head .subtitle { font-size: .85rem; color: var(--omh-muted); }

/* ---------------- patient flags ---------------- */
.omh-flag { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:99px; }

/* ---------------- schedule board ---------------- */
.omh-slot { border-left: 3px solid var(--omh-teal); background: var(--omh-surface-2); border-radius:.5rem; padding:.5rem .7rem; margin-bottom:.4rem; }
.omh-slot.status-Cancelled { border-left-color: var(--omh-danger); opacity:.6; }
.omh-slot.status-NoShow { border-left-color: var(--omh-danger); }
.omh-slot.status-Completed { border-left-color:#047857; }
.omh-slot.status-Arrived, .omh-slot.status-InProgress { border-left-color:#0369a1; }
.omh-daycol.omh-drop-active { background: var(--omh-drop-target); }

/* ---------------- timeline (audit / addendums) ---------------- */
.omh-timeline { list-style:none; padding-left:0; margin:0; }
.omh-timeline li { padding:.5rem 0 .5rem 1.2rem; border-left:2px solid var(--omh-line); position:relative; }
.omh-timeline li::before { content:''; position:absolute; left:-6px; top:.9rem; width:10px; height:10px; border-radius:50%; background:var(--omh-accent); }

/* ---------------- responsive ---------------- */

.omh-menu-toggle { border: 1px solid var(--omh-line); background: var(--omh-card); border-radius: .6rem; padding: .3rem .6rem; color: var(--omh-navy); }

/* ---------------- mobile bottom nav ---------------- */
/* Desktop keeps the sidebar as the only nav; the bar, its scrim and the hamburger are
   mobile-only. "Mobile" is phones and any touch tablet up to 1366px wide, so an iPad in
   either orientation (12.9" Pro included) gets the bottom bar rather than the desktop
   sidebar. Keep the query in step with the mobile one in site.js. */
.omh-bottom-nav, .omh-scrim, .omh-menu-toggle { display: none; }

@media (max-width: 991.98px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  .omh-menu-toggle { display: inline-block; }
  .omh-sidebar { position: fixed; z-index: 1045; left: calc(-1 * var(--omh-sidebar-w) - 10px); transition: left .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .omh-sidebar.open { left: 0; }
  .omh-content { padding: 1rem; }

  /* Solid brand teal instead of the translucent surface, so the header reads as
     a mobile app bar. Everything sitting on it is forced to white below. */
  .omh-topbar {
    background: var(--omh-topbar-mobile-bg);
    border-bottom-color: transparent;
    color: #fff;
    backdrop-filter: none;
  }
  .omh-topbar .omh-env { background: rgba(255, 255, 255, .18); color: #fff; }
  .omh-menu-toggle, .omh-topbar .omh-theme-toggle {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .30);
    color: #fff;
  }
  .omh-menu-toggle:hover, .omh-topbar .omh-theme-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .55); }
  /* Signed-out topbar actions: outline buttons invert, the primary one goes white-on-teal. */
  .omh-topbar .btn-outline-primary, .omh-topbar .btn-outline-secondary {
    --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .45);
    --bs-btn-hover-bg: rgba(255, 255, 255, .16); --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: rgba(255, 255, 255, .65);
  }
  .omh-topbar .btn-primary {
    --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: var(--omh-teal-dark);
    --bs-btn-hover-bg: #e6fffb; --bs-btn-hover-border-color: #e6fffb; --bs-btn-hover-color: var(--omh-teal-darker);
    box-shadow: none;
  }

  /* Keep the last of the page (and the account dropup's own footer) clear of the bar. */
  .omh-has-bottom-nav .omh-footer { padding-bottom: calc(var(--omh-bottom-nav-h) + env(safe-area-inset-bottom) + .9rem); }

  .omh-bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: var(--omh-card);
    border-top: 1px solid var(--omh-line);
    box-shadow: 0 -6px 20px -14px rgba(15, 46, 61, .45);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .omh-bottom-item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    height: var(--omh-bottom-nav-h);
    border: 0; background: none;
    color: var(--omh-muted); text-decoration: none;
    font-size: .66rem; font-weight: 600; letter-spacing: .01em;
  }
  .omh-bottom-item i { font-size: 1.15rem; line-height: 1; }
  .omh-bottom-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .omh-bottom-item:hover { color: var(--omh-accent); }
  .omh-bottom-item:focus-visible { outline: 0; box-shadow: inset 0 0 0 .16rem var(--omh-focus-ring); }
  .omh-bottom-item.active { color: var(--omh-accent); box-shadow: inset 0 2px 0 var(--omh-accent); }
  /* the "Menu" button lights up the same way while its drawer is open */
  .omh-bottom-item[aria-expanded="true"] { color: var(--omh-accent); }

  /* no scrolling the page behind the open drawer */
  body.omh-drawer-open { overflow: hidden; }

  /* Backdrop behind the open drawer — unhidden by the drawer script in site.js. */
  .omh-scrim { display: block; position: fixed; inset: 0; z-index: 1044; background: rgba(9, 24, 33, .5); }
  .omh-scrim[hidden] { display: none; }
}

/* ---------------- body chart viewer ---------------- */
/* Full-screen layer over the page, bottom nav, help button and drawer (1040–1045);
   Bootstrap modals (1055) still sit on top of it. */
.omh-bodychart {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; flex-direction: column;
  background: var(--omh-surface-2);
}
.omh-bodychart[hidden] { display: none; }
body.omh-bodychart-open { overflow: hidden; }
.omh-bodychart-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;
  padding: .55rem 1rem; padding-top: max(.55rem, env(safe-area-inset-top));
  background: var(--omh-card); border-bottom: 1px solid var(--omh-line);
}
.omh-bodychart-title { display: flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--omh-navy); }
.omh-bodychart-title i { color: var(--omh-accent); font-size: 1.15rem; }
.omh-bodychart-toc { width: auto; max-width: min(22rem, 100%); flex: 0 1 22rem; }
.omh-bodychart-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.omh-bodychart-page { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .82rem; color: var(--omh-muted); white-space: nowrap; }
.omh-bodychart-page input { width: 3.6rem; text-align: center; padding: .25rem .4rem; }
/* comfortable touch targets on the iPad */
.omh-bodychart-tools .btn { min-width: 2.4rem; min-height: 2.2rem; }

.omh-bodychart-stage { position: relative; flex: 1 1 auto; min-height: 0; }
/* PDF.js needs an absolutely positioned scroll container */
.omh-bodychart-scroll {
  position: absolute; inset: 0; overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
}
.omh-bodychart-scroll:focus { outline: 0; }
.omh-bodychart-scroll .pdfViewer .page { margin: 0 auto .75rem; box-shadow: var(--omh-shadow); overflow: hidden; }
.omh-bodychart-status {
  position: absolute; top: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 1;
  max-width: calc(100% - 2rem); padding: .6rem 1rem; border-radius: .65rem;
  background: var(--omh-card); color: var(--omh-ink); box-shadow: var(--omh-shadow);
  font-size: .9rem; text-align: center;
}
.omh-bodychart-status[hidden] { display: none; }

/* ---------------- print ---------------- */
/* statements, receipts and the daily schedule always print on white paper */
@media print {
  html { color-scheme: light; }
  body, .omh-content, .card, .table, .omh-pre { background: #fff !important; color: #15293b !important; }
  .omh-sidebar, .omh-topbar, .omh-footer, .omh-theme-switch, .omh-bottom-nav, .omh-scrim, .omh-help, .omh-bodychart { display: none !important; }
}

/* ---------------- action board ---------------- */
/* one lane per staff member; a shared item appears in every assignee's lane (ACTION-BOARD-REQ-005) */
.omh-lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; align-items: start; }
.omh-lane .card-header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.omh-lane .card-header .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omh-lane-team { border-style: dashed; }
.omh-action {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--omh-line); border-left: 4px solid transparent; border-radius: .6rem;
  padding: .55rem .7rem; margin-bottom: .5rem; background: var(--omh-card);
}
.omh-action:last-child { margin-bottom: 0; }
.omh-action:hover { border-color: var(--omh-accent); color: inherit; }
.omh-action .kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--omh-muted); }
.omh-action .desc { font-size: .88rem; line-height: 1.3; }
.omh-action .meta { font-size: .74rem; color: var(--omh-muted); margin-top: .3rem; display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; }
/* aging: none under 2 days, amber at 2 days, red at 3+ days (ACTION-BOARD-REQ-015) */
.omh-age-warn   { border-left-color: var(--tint-amber-fg); background: var(--tint-amber-bg); }
.omh-age-danger { border-left-color: var(--tint-red-fg);   background: var(--tint-red-bg); }
tr.omh-age-warn > td   { background: var(--tint-amber-bg); }
tr.omh-age-danger > td { background: var(--tint-red-bg); }
.omh-age-key { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; border-left-width: 4px; border-left-style: solid; vertical-align: -.1rem; }
.omh-urgent { font-weight: 700; color: var(--tint-red-fg); }
.omh-comment { border-left: 3px solid var(--omh-line); padding: .1rem 0 .1rem .75rem; margin-bottom: .9rem; }
.omh-comment .by { font-size: .76rem; color: var(--omh-muted); }
.omh-comment .body { white-space: pre-wrap; }

/* ---------------- floating context help ---------------- */
/* sits above page content and the phone bottom nav, but under the mobile drawer (1044+) and modals */
.omh-help {
  --omh-help-gap: 1.25rem;
  position: fixed; right: var(--omh-help-gap); bottom: var(--omh-help-gap); z-index: 1042;
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
  pointer-events: none;
}
.omh-help > * { pointer-events: auto; }
.omh-help-fab {
  width: 3rem; height: 3rem; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--omh-teal); color: #fff; font-size: 1.35rem;
  box-shadow: 0 6px 18px -6px rgba(15, 46, 61, .55);
  transition: background-color .15s ease, transform .15s ease;
}
.omh-help-fab:hover { background: var(--omh-teal-dark); transform: translateY(-1px); }
.omh-help-fab:focus-visible { outline: 0; box-shadow: 0 0 0 .25rem var(--omh-focus-ring), 0 6px 18px -6px rgba(15, 46, 61, .55); }
.omh-help-fab[aria-expanded="true"] { background: var(--omh-teal-darker); }

.omh-help-panel {
  width: min(24rem, calc(100vw - 2 * var(--omh-help-gap)));
  max-height: min(70vh, 36rem);
  display: flex; flex-direction: column;
  border: 1px solid var(--omh-line); border-radius: var(--omh-radius);
  background: var(--omh-card); color: var(--omh-ink);
  box-shadow: var(--omh-shadow), 0 18px 48px -18px rgba(15, 46, 61, .45);
}
.omh-help-panel[hidden] { display: none; }
.omh-help-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem;
  padding: .9rem 1rem .7rem; border-bottom: 1px solid var(--omh-line);
}
.omh-help-kicker { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--omh-accent); }
.omh-help-title { font-size: 1.05rem; font-weight: 700; color: var(--omh-navy); margin: .15rem 0 0; }
.omh-help-body { overflow-y: auto; padding: .85rem 1rem 1rem; font-size: .88rem; }
.omh-help-summary { margin-bottom: .9rem; }
.omh-help-section { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--omh-label); margin: 0 0 .45rem; }
.omh-help-tips { padding-left: 1.1rem; margin-bottom: 1rem; }
.omh-help-tips li { margin-bottom: .3rem; }
.omh-help-terms { margin: 0; }
.omh-help-term { padding: .45rem 0; border-top: 1px solid var(--omh-line-soft); }
.omh-help-term:first-child { border-top: 0; padding-top: 0; }
.omh-help-term dt { font-weight: 600; color: var(--omh-navy); }
.omh-help-term dd { margin: .1rem 0 0; color: var(--omh-ink); }

@media (max-width: 991.98px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  /* clear the bottom nav on phones and tablets */
  .omh-has-bottom-nav ~ .omh-help { bottom: calc(var(--omh-bottom-nav-h) + env(safe-area-inset-bottom) + .75rem); }
  .omh-help { --omh-help-gap: 1rem; }
  .omh-help-fab { width: 2.75rem; height: 2.75rem; font-size: 1.2rem; }
  .omh-help-panel { max-height: 65vh; }
}

/* ---------------- Ask Debi (assistant tab of the help panel) ---------------- */
.omh-help-panel.is-asking { width: min(27rem, calc(100vw - 2 * var(--omh-help-gap))); height: min(78vh, 42rem); max-height: none; }
.omh-help-tabs { display: flex; gap: .25rem; padding: 0 1rem; border-bottom: 1px solid var(--omh-line); }
.omh-help-tabs [role="tab"] {
  border: 0; background: none; color: var(--omh-muted); font-size: .82rem; font-weight: 600;
  padding: .55rem .5rem .5rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.omh-help-tabs [role="tab"]:hover { color: var(--omh-ink); }
.omh-help-tabs [role="tab"][aria-selected="true"] { color: var(--omh-accent); border-bottom-color: var(--omh-accent); }
.omh-help-tabs [role="tab"]:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem var(--omh-focus-ring); border-radius: .3rem; }

.omh-chat { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.omh-chat[hidden] { display: none; }
.omh-chat-log { flex: 1 1 auto; overflow-y: auto; padding: .85rem 1rem; font-size: .88rem; display: flex; flex-direction: column; gap: .6rem; }
.omh-chat-hello { color: var(--omh-ink); }
.omh-chat-suggest { display: flex; flex-wrap: wrap; gap: .4rem; }
.omh-chat-suggest .btn { font-size: .78rem; text-align: left; }

.omh-chat-msg { display: flex; flex-direction: column; gap: .45rem; max-width: 92%; }
.omh-chat-msg.is-user { align-self: flex-end; align-items: flex-end; }
.omh-chat-msg.is-bot, .omh-chat-msg.is-error { align-self: flex-start; }
.omh-chat-bubble { padding: .5rem .75rem; border-radius: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.omh-chat-bubble p { margin: 0 0 .4rem; }
.omh-chat-bubble p:last-child, .omh-chat-bubble ul:last-child, .omh-chat-bubble ol:last-child { margin-bottom: 0; }
.omh-chat-bubble ul, .omh-chat-bubble ol { padding-left: 1.1rem; margin: 0 0 .4rem; }
.is-user .omh-chat-bubble { background: var(--omh-teal); color: #fff; border-bottom-right-radius: .25rem; white-space: pre-wrap; }
.is-bot .omh-chat-bubble { background: var(--omh-line-soft); color: var(--omh-ink); border-bottom-left-radius: .25rem; }
.is-error .omh-chat-bubble { background: var(--omh-danger-soft); color: var(--omh-danger); border-bottom-left-radius: .25rem; }

.omh-chat-typing { display: inline-flex; gap: .25rem; align-items: center; min-height: 1.9rem; }
.omh-chat-typing span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--omh-muted); animation: omh-typing 1.2s infinite ease-in-out; }
.omh-chat-typing span:nth-child(2) { animation-delay: .15s; }
.omh-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes omh-typing { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

.omh-chat-form { display: flex; gap: .5rem; align-items: flex-end; padding: .65rem 1rem .4rem; border-top: 1px solid var(--omh-line); }
.omh-chat-form textarea { resize: none; min-height: 2.1rem; max-height: 7.5rem; }
.omh-chat-form .btn { flex: 0 0 auto; height: 2.1rem; width: 2.4rem; }
.omh-chat-mic.is-listening { color: #fff; background: #d63c3c; border-color: #d63c3c; animation: omh-mic-pulse 1.4s ease-out infinite; }
@keyframes omh-mic-pulse {
  0% { box-shadow: 0 0 0 0 rgba(214, 60, 60, .45); }
  100% { box-shadow: 0 0 0 .55rem rgba(214, 60, 60, 0); }
}
@media (prefers-reduced-motion: reduce) { .omh-chat-mic.is-listening { animation: none; } }
.omh-chat-foot { display: flex; justify-content: space-between; gap: .5rem; padding: 0 1rem .6rem; font-size: .7rem; color: var(--omh-muted); }
.omh-chat-foot .btn-link { font-size: .7rem; color: var(--omh-muted); }

/* walk-through card */
.omh-guide, .omh-action-card {
  border: 1px solid var(--omh-line); border-radius: .7rem; background: var(--omh-card);
  padding: .6rem .75rem; font-size: .84rem; width: 100%;
}
.omh-guide { border-left: 3px solid var(--omh-accent); }
.omh-guide-title, .omh-action-card-title { font-weight: 700; color: var(--omh-navy); margin-bottom: .35rem; }
.omh-guide-steps { padding-left: 1.2rem; margin: 0 0 .5rem; }
.omh-guide-steps li { margin-bottom: .2rem; color: var(--omh-muted); }
.omh-guide-steps li.is-current { color: var(--omh-ink); font-weight: 600; }
.omh-guide-actions, .omh-action-card-buttons { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* the control a walk-through step points at */
.omh-guide-target {
  outline: 3px solid var(--omh-focus-border) !important; outline-offset: 3px;
  border-radius: .35rem; animation: omh-guide-pulse 1.6s ease-in-out infinite;
  position: relative; z-index: 1;
}
@keyframes omh-guide-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--omh-focus-ring); } 50% { box-shadow: 0 0 0 .5rem var(--omh-focus-ring); } }

/* change card: nothing runs until Confirm */
.omh-action-card { border-left: 3px solid var(--tint-amber-fg); }
.omh-action-card ul { list-style: none; padding: 0; margin: 0 0 .5rem; }
.omh-action-card li { padding: .05rem 0; color: var(--omh-ink); }
.omh-action-card li:first-child { font-weight: 600; }
.omh-action-card.is-done { border-left-color: var(--omh-accent); }
.omh-action-card.is-done .omh-action-card-msg { color: var(--omh-accent); font-weight: 600; }
.omh-action-card.is-cancelled { opacity: .7; border-left-color: var(--omh-line); }
.omh-action-card-msg { font-size: .8rem; margin-bottom: .35rem; }

@media (prefers-reduced-motion: reduce) {
  .omh-guide-target, .omh-chat-typing span { animation: none; }
}
@media (max-width: 991.98px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  .omh-help-panel.is-asking { height: min(70vh, 40rem); }
}

/* ---------------- launch splash (once per session) ----------------
   Timeline: the ECG trace sweeps in (0–1.1s); its spike "starts" the logo
   (.5s), the wordmark rises (.8s), the D·E·B·I acronym spells out (1.25s),
   then site.js lifts the whole thing away (~2.9s). Dark in both themes,
   like the sidebar. Hidden unless the <head> script sets .debi-splash-on. */

:root {
  --debi-splash-bg: radial-gradient(120% 90% at 50% 40%, #134e5e 0%, #0f2e3d 45%, #08161f 100%);
  --debi-splash-fg: #ffffff;
  --debi-splash-sub: #9fc1cf;
  --debi-splash-glow-a: #2dd4bf;
  --debi-splash-glow-b: #38bdf8;
  --debi-splash-logo-grad: linear-gradient(135deg, #14b8a6, #0ea5e9);
  --debi-splash-logo-shadow: 0 18px 50px -12px rgba(20, 184, 166, .75), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  --debi-splash-aurora-a: rgba(20, 184, 166, .45);
  --debi-splash-aurora-b: rgba(14, 165, 233, .35);
  --debi-splash-aurora-c: rgba(99, 102, 241, .22);
  --debi-splash-grid-line: rgba(255, 255, 255, .045);
  --debi-splash-track: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] {
  --debi-splash-bg: radial-gradient(120% 90% at 50% 40%, #0e3440 0%, #0a1d27 45%, #050d13 100%);
}

.debi-splash { display: none; }
html.debi-splash-on { overflow: hidden; }
html.debi-splash-on .debi-splash {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: var(--debi-splash-bg); color: var(--debi-splash-fg);
  overflow: hidden; cursor: pointer;
  transition: opacity .6s ease, transform .7s cubic-bezier(.65, 0, .35, 1), filter .6s ease;
}
html.debi-splash-on .debi-splash.is-leaving {
  opacity: 0; transform: scale(1.06); filter: blur(6px); pointer-events: none;
}

/* drifting light behind everything */
.debi-splash-aurora span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .9;
  animation: debi-drift 9s ease-in-out infinite alternate;
}
.debi-splash-aurora span:nth-child(1) { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: var(--debi-splash-aurora-a); }
.debi-splash-aurora span:nth-child(2) { width: 40vmax; height: 40vmax; right: -14vmax; bottom: -16vmax; background: var(--debi-splash-aurora-b); animation-delay: -3s; }
.debi-splash-aurora span:nth-child(3) { width: 28vmax; height: 28vmax; left: 55%; top: 8%; background: var(--debi-splash-aurora-c); animation-delay: -6s; }

.debi-splash-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--debi-splash-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--debi-splash-grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 100%);
  mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 100%);
}

.debi-splash-stage {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 0 16px; text-align: center;
}

/* ECG trace with the logo sitting on its spike */
.debi-splash-pulse { position: relative; width: min(600px, 92vw); height: 120px; }
.debi-splash-ecg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.debi-splash-ecg path {
  fill: none; stroke: url(#debiEcgGrad); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 6px var(--debi-splash-glow-a));
  animation: debi-trace 1.1s cubic-bezier(.45, 0, .2, 1) .1s forwards;
}

.debi-splash-logo {
  position: absolute; left: 50%; top: 50%;
  width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--debi-splash-logo-grad); box-shadow: var(--debi-splash-logo-shadow);
  font-size: 2.6rem; color: var(--debi-splash-fg);
  opacity: 0; transform: scale(.3) rotate(-12deg);
  animation: debi-pop .75s cubic-bezier(.34, 1.56, .64, 1) .5s forwards;
}
.debi-splash-logo i { position: relative; animation: debi-beat 1.1s ease-in-out 1.3s infinite; }
.debi-splash-ring {
  position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--debi-splash-glow-a); opacity: 0;
  animation: debi-ripple 1.4s ease-out .55s 2;
}
.debi-splash-ring:nth-child(2) { border-color: var(--debi-splash-glow-b); animation-delay: .8s; }

/* wordmark */
.debi-splash-word {
  margin-top: 1.4rem; display: flex; gap: .02em;
  font-size: clamp(3.2rem, 11vw, 5.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
}
.debi-splash-word span {
  display: inline-block; opacity: 0; transform: translateY(.45em);
  background: linear-gradient(180deg, var(--debi-splash-fg) 30%, var(--debi-splash-sub));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: debi-rise .6s cubic-bezier(.2, .8, .2, 1) forwards;
}
.debi-splash-word span:nth-child(1) { animation-delay: .8s; }
.debi-splash-word span:nth-child(2) { animation-delay: .87s; }
.debi-splash-word span:nth-child(3) { animation-delay: .94s; }
.debi-splash-word span:nth-child(4) { animation-delay: 1.01s; }

/* Does Every Bit of It — word by word, initials lit */
.debi-splash-tag {
  margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .35rem .7rem; max-width: 92vw;
  font-size: clamp(.68rem, 2.6vw, .82rem); font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--debi-splash-sub);
}
.debi-splash-tag span { opacity: 0; transform: translateY(6px); animation: debi-rise .5s ease-out forwards; }
.debi-splash-tag b { color: var(--debi-splash-glow-a); font-weight: 800; }
.debi-splash-tag > :nth-child(1) { animation-delay: 1.25s; }
.debi-splash-tag > :nth-child(2) { animation-delay: 1.37s; }
.debi-splash-tag > :nth-child(3) { animation-delay: 1.49s; }
.debi-splash-tag > :nth-child(4) { animation-delay: 1.58s; }
.debi-splash-tag > :nth-child(5) { animation-delay: 1.67s; }

/* loading bar */
.debi-splash-progress {
  margin-top: clamp(1.5rem, 7vh, 3.5rem); width: min(220px, 60vw); height: 3px;
  border-radius: 3px; background: var(--debi-splash-track); overflow: hidden;
}
.debi-splash-progress span {
  display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--debi-splash-glow-a), var(--debi-splash-glow-b));
  animation: debi-load 2.7s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes debi-trace { to { stroke-dashoffset: 0; } }
@keyframes debi-pop { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes debi-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
@keyframes debi-ripple { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes debi-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes debi-load { to { transform: scaleX(1); } }
@keyframes debi-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(4vmax, 3vmax) scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .debi-splash * { animation: none !important; }
  .debi-splash-logo, .debi-splash-word span, .debi-splash-tag span { opacity: 1; transform: none; }
  .debi-splash-ecg path { stroke-dashoffset: 0; }
  .debi-splash-ring, .debi-splash-progress { display: none; }
  html.debi-splash-on .debi-splash.is-leaving { transform: none; filter: none; }
}