/* ============================================================================
   Datadex, powered by amiaOS — medical showroom design system.
   Light, ultra-professional. Stripe/Linear/Vercel restraint applied to clinical
   software (Elation/Jane/SimplePractice). Hairline borders over shadows, one
   accent + semantic colors, ≤6 type sizes, tabular numerals. NOT dark mode.
   Source: operations/medical/design-brief.md (MEDICAL-001).
   ============================================================================ */

:root {
  /* Neutrals — cool, slightly blue-gray (clinical, not warm CRM beige) */
  --bg-app:        #F6F8FA;
  --surface:       #FFFFFF;
  --surface-sunken:#F1F4F7;
  --border:        #E3E8EE;
  --border-strong: #CBD2D9;

  /* Text */
  --text-primary:  #0F172A;
  --text-secondary:#5B6B7B;
  --text-muted:    #8A97A6;

  /* Accent — calm medical blue */
  --accent:        #2563EB;
  --accent-hover:  #1D4ED8;
  --accent-soft:   #EAF1FE;
  --accent-ring:   rgba(37,99,235,0.35);

  /* Secondary — teal */
  --teal:          #0E9384;
  --teal-soft:     #E6F6F4;

  /* Semantic status */
  --success:#15803D; --success-soft:#E7F6EC;
  --warning:#B45309; --warning-soft:#FBF1E3;
  --danger: #DC2626; --danger-soft:#FCEBEB;
  --info:   #2563EB; --info-soft:#EAF1FE;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-full:9999px;

  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv01","cv03","ss03";
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1,h2,h3,h4 { margin: 0; letter-spacing: -0.01em; }

/* ── type scale ── */
.t-display { font: 600 28px/1.2 var(--font-sans); letter-spacing:-0.02em; }
.t-h2      { font: 600 20px/1.3 var(--font-sans); letter-spacing:-0.01em; }
.t-h3      { font: 600 16px/1.4 var(--font-sans); letter-spacing:-0.01em; }
.t-body    { font: 400 14px/1.5 var(--font-sans); }
.t-label   { font: 500 13px/1.4 var(--font-sans); color: var(--text-secondary); }
.t-meta    { font: 500 12px/1.4 var(--font-sans); color: var(--text-muted); }
.num       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted     { color: var(--text-muted); }
.secondary { color: var(--text-secondary); }

/* ── card — the workhorse. border-first elevation ── */
.card { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-xs); padding:20px; }
.card__title { font:600 16px/1.4 var(--font-sans); letter-spacing:-0.01em; margin-bottom:12px; }

/* stat / KPI card */
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:16px 18px; box-shadow:var(--shadow-xs); }
.stat__label { font:500 12px/1 var(--font-sans); color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; }
.stat__value { font:600 26px/1.1 var(--font-sans); letter-spacing:-0.02em; margin-top:8px; font-variant-numeric:tabular-nums; }

/* ── buttons ── */
.btn { height:40px; padding:0 16px; border-radius:var(--r-md); font:500 14px/1 var(--font-sans);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:all .12s ease; cursor:pointer; border:1px solid transparent; }
.btn--primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--primary:hover { background:var(--accent-hover); color:#fff; }
.btn--secondary { background:var(--surface); color:var(--text-primary); border-color:var(--border-strong); }
.btn--secondary:hover { background:var(--surface-sunken); }
.btn--ghost { background:transparent; color:var(--text-secondary); }
.btn--ghost:hover { background:var(--surface-sunken); color:var(--text-primary); }
.btn--danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn--lg { height:48px; padding:0 22px; font-size:15px; }
.btn--block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
:focus-visible { outline:none; box-shadow:0 0 0 3px var(--accent-ring); }

/* ── status pill ── */
.pill { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px;
  border-radius:var(--r-full); font:500 12px/1 var(--font-sans); white-space:nowrap; }
.pill__dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill--success { background:var(--success-soft); color:var(--success); }
.pill--warning { background:var(--warning-soft); color:var(--warning); }
.pill--danger  { background:var(--danger-soft);  color:var(--danger);  }
.pill--info    { background:var(--accent-soft);  color:var(--accent);  }
.pill--teal    { background:var(--teal-soft);    color:var(--teal);    }
.pill--neutral { background:var(--surface-sunken);color:var(--text-secondary); }

/* ── table — clinical density ── */
.table { width:100%; border-collapse:separate; border-spacing:0; font:14px/1.5 var(--font-sans); }
.table thead th { background:var(--surface-sunken); color:var(--text-secondary);
  font:500 12px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.04em;
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); position:sticky; top:0; }
.table tbody td { padding:11px 12px; border-bottom:1px solid var(--border); }
.table tbody tr:hover { background:var(--surface-sunken); cursor:pointer; }
.table .num { text-align:right; }

/* ── inputs ── */
.input, .select, .textarea { width:100%; min-height:42px; padding:10px 12px; border:1px solid var(--border-strong);
  border-radius:var(--r-sm); background:var(--surface); font:14px var(--font-sans); color:var(--text-primary); }
.textarea { min-height:84px; resize:vertical; }
.input:focus, .select:focus, .textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); outline:none; }
.label { font:500 13px/1.4 var(--font-sans); color:var(--text-secondary); margin-bottom:6px; display:block; }
.field { margin-bottom:16px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* yes/no toggle chips */
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { height:38px; padding:0 16px; border:1px solid var(--border-strong); border-radius:var(--r-full);
  background:var(--surface); font:500 14px var(--font-sans); color:var(--text-secondary); cursor:pointer; transition:all .12s; }
.chip[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

/* ── side-nav ── */
.nav__item { display:flex; align-items:center; gap:10px; height:38px; padding:0 12px;
  border-radius:var(--r-sm); color:var(--text-secondary); font:500 14px var(--font-sans); cursor:pointer; }
.nav__item:hover { background:var(--surface-sunken); color:var(--text-primary); }
.nav__item--active { background:var(--accent-soft); color:var(--accent); box-shadow:inset 2px 0 0 var(--accent); }

/* ── segmented control ── */
.segment { display:inline-flex; background:var(--surface-sunken); border-radius:var(--r-sm); padding:3px; }
.segment button { height:30px; padding:0 14px; border:0; background:transparent; border-radius:4px;
  font:500 13px var(--font-sans); color:var(--text-secondary); cursor:pointer; }
.segment button[aria-selected="true"] { background:var(--surface); color:var(--text-primary); box-shadow:var(--shadow-xs); }

/* ── brand lockup ── */
.brand { display:inline-flex; align-items:baseline; gap:8px; font:600 16px var(--font-sans); letter-spacing:-0.01em; color:var(--text-primary); }
.brand__mark { width:22px; height:22px; border-radius:6px; }
.brand__sub { font:500 11px var(--font-sans); color:var(--text-muted); letter-spacing:.02em; }

/* ── time-slot pill grid (patient booking) ── */
.slotgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.slot { height:46px; border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--surface);
  font:500 14px var(--font-sans); color:var(--text-primary); cursor:pointer; font-variant-numeric:tabular-nums; transition:all .12s; }
.slot:hover { border-color:var(--accent); color:var(--accent); }
.slot[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── date strip ── */
.datestrip { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.datechip { flex:0 0 auto; min-width:58px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); text-align:center; cursor:pointer; }
.datechip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
.datechip__dow { font:500 11px var(--font-sans); text-transform:uppercase; letter-spacing:.04em; opacity:.8; }
.datechip__day { font:600 17px var(--font-sans); font-variant-numeric:tabular-nums; }

/* ── progress bar ── */
.progress { height:3px; background:var(--surface-sunken); border-radius:var(--r-full); overflow:hidden; }
.progress__fill { height:100%; background:var(--accent); transition:width .3s ease; }

/* ── layout helpers ── */
.container { max-width:1180px; margin:0 auto; padding:0 24px; }
.row { display:flex; align-items:center; gap:12px; }
.between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stack { display:flex; flex-direction:column; gap:16px; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.divider { height:1px; background:var(--border); margin:16px 0; }
@media (max-width:760px){
  .field-row,.grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .container { padding:0 16px; }
  .slotgrid { grid-template-columns:repeat(2,1fr); }
}