/*
 * Diagnostics Ops Console — design tokens (UI Design Book v1)
 * Light is the default; Filament toggles `.dark` on <html>; standalone
 * portals use [data-theme="dark"]. Brand colour overrides are injected
 * after this file from Settings → Branding.
 */
:root {
  --surface-000:#f5f7f6; --surface-100:#ffffff; --surface-200:#edf1ef;
  --border:#dce2df; --border-control:#8a9792;
  --ink:#14201d; --ink-muted:#52615c;
  --primary:#0b6b63; --primary-hover:#08574f; --on-primary:#ffffff;
  --primary-soft:#e1f1ee; --on-primary-soft:#08574f;
  --accent:#d98a1c;
  --status-info-fg:#1c4f8f; --status-info-bg:#e4edf8;
  --status-warning-fg:#8a4a00; --status-warning-bg:#fbeed8;
  --status-danger-fg:#a3201b; --status-danger-bg:#fbe5e3;
  --danger:#b42318; --on-danger:#ffffff;
  --status-success-fg:#1a6536; --status-success-bg:#e2f2e6;
  --status-neutral-fg:#4a5752; --status-neutral-bg:#e8ecea;
  --focus-ring:#0b6b63;
  --shadow-raised:0 1px 2px rgba(20,32,29,.06);
  --shadow-overlay:0 12px 32px rgba(20,32,29,.16);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px;
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-full:999px;
  --sidebar-width:248px; --topbar-height:56px; --control-height:36px; --touch-target:48px; --content-max:1440px;
  --font-sans:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}

:root.dark, [data-theme="dark"] {
  --surface-000:#0d1311; --surface-100:#141c1a; --surface-200:#1b2522;
  --border:#26322f; --border-control:#6c7c76;
  --ink:#e6eeeb; --ink-muted:#9aa9a3;
  --primary:#3ec2b2; --primary-hover:#62d3c5; --on-primary:#04211d;
  --primary-soft:#0f2f2b; --on-primary-soft:#8fded3;
  --accent:#e9a23b;
  --status-info-fg:#9fc3f1; --status-info-bg:#14243a;
  --status-warning-fg:#f2c27d; --status-warning-bg:#30220d;
  --status-danger-fg:#f5a59e; --status-danger-bg:#381715;
  --danger:#f0766b; --on-danger:#1e0806;
  --status-success-fg:#94d8a8; --status-success-bg:#13291a;
  --status-neutral-fg:#b3c0bb; --status-neutral-bg:#222d2a;
  --focus-ring:#5fd3c4;
  --shadow-raised:none;
  --shadow-overlay:0 12px 32px rgba(0,0,0,.5);
}

/* ---------- Filament alignment with the design book ---------- */
.fi-body { background-color: var(--surface-000); color: var(--ink); font-variant-numeric: tabular-nums; }
.fi-sidebar, .fi-topbar > nav, .fi-topbar { background-color: var(--surface-100); }
:where(.fi-ta-table) :where(th) { background-color: var(--surface-200); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.ops-footer {
  padding: var(--space-4) var(--space-8);
  font-size: 12px; line-height: 16px; color: var(--ink-muted);
  border-top: 1px solid var(--border); text-align: left;
}
.ops-footer--simple { border-top: 0; padding: var(--space-6) 0 0; text-align: center; }

/* ---------- Components (resources/views/components/ops) ---------- */
.ops-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
}
.ops-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ops-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-full);
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ops-tone-neutral { color: var(--status-neutral-fg); background: var(--status-neutral-bg); }
.ops-tone-info    { color: var(--status-info-fg);    background: var(--status-info-bg); }
.ops-tone-warning { color: var(--status-warning-fg); background: var(--status-warning-bg); }
.ops-tone-danger  { color: var(--status-danger-fg);  background: var(--status-danger-bg); }
.ops-tone-success { color: var(--status-success-fg); background: var(--status-success-bg); }

.ops-id {
  font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500;
  color: var(--ink); background: transparent; border: 0; padding: 0; cursor: copy;
}
.ops-id:hover { text-decoration: underline; text-decoration-color: var(--border-control); }
.ops-id[data-copied="true"]::after { content: " Copied"; font-family: var(--font-sans); font-size: 12px; color: var(--status-success-fg); }

.ops-money { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ops-money--negative { color: var(--status-danger-fg); }

.ops-kpi {
  background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1); min-width: 0;
}
.ops-kpi__label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.ops-kpi__value { font-family: var(--font-mono); font-size: 26px; line-height: 32px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ops-kpi__trend { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.ops-kpi__trend--good { color: var(--status-success-fg); }
.ops-kpi__trend--bad { color: var(--status-danger-fg); }
a.ops-kpi { text-decoration: none; }
a.ops-kpi:hover { border-color: var(--border-control); }

.ops-grid { display: grid; gap: var(--space-4); }
.ops-grid--kpi { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ops-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ops-muted { color: var(--ink-muted); }
.ops-caption { font-size: 12px; line-height: 16px; }
.ops-swatch { width: 100%; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.ops-table-plain { width: 100%; border-collapse: collapse; font-size: 14px; }
.ops-table-plain th { text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-muted); padding: 8px 12px; background: var(--surface-200); }
.ops-table-plain td { padding: 8px 12px; border-top: 1px solid var(--border); vertical-align: middle; }
.ops-icon { width: 14px; height: 14px; flex: none; }

/* Branch switcher (top bar) */
.ops-branch-switcher { display: inline-flex; align-items: center; gap: var(--space-2); margin-inline-start: var(--space-2);
  height: 32px; padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-md);
  background: var(--surface-100); color: var(--ink); max-width: 320px; }
.ops-branch-switcher select { border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; padding: 0 var(--space-6) 0 0; min-width: 0; text-overflow: ellipsis; }
.ops-branch-switcher select:focus { outline: none; box-shadow: none; }
.ops-branch-switcher:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ops-branch-switcher select:disabled { opacity: 1; cursor: default; }
@media (max-width: 640px) { .ops-branch-switcher { max-width: 160px; } }

/* Appointment progress stepper */
.ops-steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; }
.ops-step { display: flex; flex-direction: column; gap: 2px; min-width: 110px; position: relative; padding-left: 18px; }
.ops-step__dot { position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-control); background: var(--surface-100); }
.ops-step__label { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ops-step--done .ops-step__dot { background: var(--status-success-fg); border-color: var(--status-success-fg); }
.ops-step--done .ops-step__label { color: var(--ink); }
.ops-step--current .ops-step__dot { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ops-step--current .ops-step__label { color: var(--ink); font-weight: 600; }

/* Technician app: bottom tabs, big touch targets */
.ops-tech-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--surface-100); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.ops-tech-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 10px; font-size: 12px; color: var(--ink-muted); text-decoration: none; min-height: 56px; justify-content: center; }
.ops-tech-tab.is-active { color: var(--primary); font-weight: 600; }
.ops-tech-tab__icon { width: 22px; height: 22px; }
body:has(.ops-tech-tabs) .fi-main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.ops-tech-card { border: 1px solid var(--border); transition: border-color .15s; }
.ops-tech-card:active { border-color: var(--primary); }
.ops-tech-option { padding: 10px 0; border-top: 1px solid var(--border); min-height: 48px; }
.ops-tech-option:first-child { border-top: 0; }
.ops-tech-input { width: 100%; font-size: 16px; padding: 10px 12px; border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--surface-100); color: var(--ink); }

/* Patient portal (P2-U3) */
.ops-tech-tabs--5 { grid-template-columns: repeat(5, 1fr); }
.ops-patient-stars { color: var(--status-warning-fg); letter-spacing: 2px; font-size: 18px; }
.ops-patient-rate { gap: 4px; }
.ops-patient-rate button { font-size: 34px; line-height: 1; min-width: 44px; min-height: 44px; color: var(--border-control); background: none; border: 0; cursor: pointer; }
.ops-patient-rate button.is-on { color: var(--status-warning-fg); }
.ops-patient-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: step; }
.ops-patient-steps li { font-size: 12px; color: var(--ink-muted); border-top: 4px solid var(--border); padding-top: 6px; }
.ops-patient-steps li.is-done { color: var(--ink); border-top-color: var(--primary); }
.ops-patient-steps li[aria-current="step"] { font-weight: 600; }

/* Sidebar menu search (patch 14) */
.ops-nav-search { padding: 0 4px 8px; }
.ops-nav-search__box { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-100); }
.ops-nav-search__box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.ops-nav-search__icon { width: 16px; height: 16px; color: var(--ink-muted); flex-shrink: 0; }
.ops-nav-search__box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; padding: 2px 0; }
.ops-nav-search__box input::-webkit-search-cancel-button { cursor: pointer; }
.ops-nav-search__kbd { font: 12px var(--font-mono, monospace); color: var(--ink-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 5px; }
.ops-nav-search__results { list-style: none; margin: 6px 0 0; padding: 0; }
.ops-nav-search__results a { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: var(--radius-md); color: var(--ink); font-size: 14px; text-decoration: none; }
.ops-nav-search__results a.is-active { background: var(--primary-soft); color: var(--on-primary-soft); }
.ops-nav-search__group { color: var(--ink-muted); font-size: 12px; }
.ops-nav-search__results a.is-active .ops-nav-search__group { color: inherit; opacity: .8; }
.ops-nav-search__empty { padding: 7px 10px; color: var(--ink-muted); font-size: 13px; }
.ops-nav-search-hidden { display: none !important; }