/* ============================================================================
   Medical AI Scribe — design system
   Teal-forward, modern clinical UI. Plain CSS (works in dev CDN + prod build),
   layered on top of Tailwind utilities. Component classes are reused across
   templates so the look stays cohesive.
   ========================================================================== */

:root {
  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;
  --ink:      #0f2e2b;       /* deep teal-tinted near-black for nav/text */
  --ink-soft: #334155;
  --surface:  #ffffff;
  --ring: 0 0 0 3px rgba(20, 184, 166, .25);
  --shadow-sm: 0 1px 2px rgba(15, 46, 43, .06), 0 1px 3px rgba(15, 46, 43, .05);
  --shadow:    0 4px 14px -4px rgba(15, 46, 43, .12), 0 2px 6px -2px rgba(15, 46, 43, .07);
  --shadow-lg: 0 18px 40px -12px rgba(13, 148, 136, .25);
}

/* ----- base ------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--teal-200); color: var(--teal-900); }

/* App background: near-flat, a whisper of teal at the top. Minimal + calm. */
.app-bg {
  background-color: #f7faf9;
  background-image: radial-gradient(60rem 26rem at 50% -16rem, rgba(13, 148, 136, .06), transparent 70%);
  background-attachment: fixed;
}

/* ----- scrollbar -------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--teal-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--teal-300); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--teal-400); background-clip: content-box; }

/* ----- nav (flat, minimal) ---------------------------------------------- */
.nav-shell {
  background: #0c3a36;          /* solid deep teal, no gradient */
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.brand-badge {
  display: grid; place-items: center;
  height: 2rem; width: 2rem; border-radius: .7rem;
  background: rgba(255, 255, 255, .12); font-size: 1rem;
}
/* Pill-style nav links: subtle hover bg, no underline — calmer than the old gradient. */
.nav-link {
  padding: .45rem .7rem; border-radius: .6rem; font-size: .875rem; font-weight: 500;
  color: rgba(236, 253, 245, .72); transition: color .15s ease, background .15s ease;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-link.is-active { color: #fff; background: rgba(255, 255, 255, .12); }

/* Dropdown menu items (user menu). */
.menu-item {
  display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem;
  border-radius: .55rem; font-size: .875rem; color: #334155; text-decoration: none;
  transition: background .12s ease;
}
.menu-item:hover { background: var(--teal-50); }

/* ----- buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border-radius: .7rem; padding: .55rem 1rem; font-size: .875rem; font-weight: 600;
  line-height: 1; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .15s ease;
  white-space: nowrap; text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-sm { padding: .38rem .7rem; font-size: .8rem; border-radius: .6rem; }
.btn-primary {
  color: #fff; background: var(--teal-600);   /* flat solid */
}
.btn-primary:hover { background: var(--teal-700); }
.btn-ghost {
  color: var(--teal-800); background: #fff; border-color: #d6e4e2;
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--teal-300); background: var(--teal-50); color: var(--teal-900); }
.btn-danger { color: #fff; background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 10px 22px -12px rgba(225,29,72,.7); }
.btn-danger:hover { transform: translateY(-1px); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ----- cards ------------------------------------------------------------ */
.card {
  background: var(--surface); border: 1px solid #e8edec; border-radius: 1rem;
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 1.4rem; }
.card-hover { transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--teal-200); }

/* Stat card — soft color tint + sparkline (retina style). */
.stat-card {
  --accent: var(--teal-500);
  position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid #e8edec; border-radius: 1rem; padding: 1.2rem 1.35rem;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .25s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
/* Fixed-height wrappers so responsive Chart.js canvases can't grow unbounded. */
.stat-spark { position: relative; height: 42px; margin-top: .7rem; }
.stat-spark canvas { position: absolute; inset: 0; }
.chart-wrap { position: relative; height: 230px; }
.chart-wrap canvas { position: absolute; inset: 0; }
.stat-icon {
  display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: .75rem;
  background: var(--teal-50); color: var(--teal-600);
}

/* Soft color tints (stat + nav cards) — set --accent for sparklines/links. */
.tint-teal   { --accent: #0d9488; background: linear-gradient(160deg, #fff 58%, rgba(13,148,136,.08)); }
.tint-sky    { --accent: #2563eb; background: linear-gradient(160deg, #fff 58%, rgba(59,130,246,.08)); }
.tint-violet { --accent: #7c3aed; background: linear-gradient(160deg, #fff 58%, rgba(139,92,246,.09)); }
.tint-amber  { --accent: #d97706; background: linear-gradient(160deg, #fff 58%, rgba(245,158,11,.10)); }
.tint-emerald{ --accent: #059669; background: linear-gradient(160deg, #fff 58%, rgba(16,185,129,.08)); }

/* Gradient icon tiles (nav cards). */
.icon-tile {
  display: grid; place-items: center; height: 2.9rem; width: 2.9rem; border-radius: .85rem;
  color: #fff; box-shadow: 0 8px 18px -8px rgba(15,46,43,.35);
}
.icon-tile .material-symbols-rounded { font-size: 24px; }
.grad-teal   { background: linear-gradient(140deg, #2dd4bf, #0d9488); }
.grad-sky    { background: linear-gradient(140deg, #38bdf8, #2563eb); }
.grad-violet { background: linear-gradient(140deg, #a78bfa, #7c3aed); }
.grad-amber  { background: linear-gradient(140deg, #fbbf24, #f97316); }
.grad-emerald{ background: linear-gradient(140deg, #34d399, #059669); }
.grad-slate  { background: linear-gradient(140deg, #64748b, #334155); }

.open-link {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .9rem;
  font-size: .85rem; font-weight: 600; color: var(--accent); text-decoration: none;
}
.open-link:hover { gap: .45rem; }

.delta {
  display: inline-flex; align-items: center; gap: .15rem; padding: .1rem .45rem;
  border-radius: 9999px; font-size: .7rem; font-weight: 700;
}
.delta-up   { background: #d1fae5; color: #047857; }
.delta-down { background: #ffe4e6; color: #be123c; }

/* ----- page header / section (gradient hero, retina style) -------------- */
.page-head {
  position: relative; overflow: hidden; border-radius: 1.1rem; padding: 1.5rem 1.7rem;
  color: #ecfeff;
  background: linear-gradient(105deg, #0f9d8f 0%, #0e6e72 48%, #134e63 100%);
  box-shadow: 0 16px 34px -18px rgba(13, 78, 99, .55);
}
.page-head::after {
  content: ""; position: absolute; right: -2rem; top: -4rem; height: 14rem; width: 14rem;
  border-radius: 50%; background: radial-gradient(circle, rgba(94,234,212,.22), transparent 65%);
  pointer-events: none;  /* decorative only — must never intercept clicks on hero buttons */
}
.section-title { font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-600); }

/* ----- badges / chips --------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem;
  border-radius: 9999px; font-size: .72rem; font-weight: 600; line-height: 1.2;
}
.badge .dot { height: .45rem; width: .45rem; border-radius: 50%; background: currentColor; }
.badge-ok    { background: #d1fae5; color: #047857; }
.badge-busy  { background: #cffafe; color: #0e7490; }
.badge-wait  { background: #f1f5f9; color: #475569; }
.badge-fail  { background: #ffe4e6; color: #be123c; }
.badge-teal  { background: var(--teal-100); color: var(--teal-700); }
.badge-busy .dot { animation: pulse-dot 1.4s ease-in-out infinite; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem;
  border-radius: 9999px; font-size: .75rem; font-weight: 600;
  background: rgba(255,255,255,.16); color: #ecfeff; border: 1px solid rgba(255,255,255,.25);
}

/* ----- forms ------------------------------------------------------------ */
.input, .app-bg input[type="text"], .app-bg input[type="search"],
.app-bg input[type="password"], .app-bg input[type="date"],
.app-bg input[type="email"], .app-bg input[type="number"], .app-bg select, .app-bg textarea {
  width: 100%; border-radius: .7rem; border: 1px solid #cdd9d7; background: #fff;
  padding: .6rem .8rem; font-size: .9rem; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .app-bg input:focus, .app-bg select:focus, .app-bg textarea:focus {
  outline: none; border-color: var(--teal-500); box-shadow: var(--ring);
}
.label { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 600; color: var(--ink-soft); }

/* ----- tables ----------------------------------------------------------- */
.table-modern { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.table-modern thead th {
  text-align: left; padding: .7rem 1rem; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--teal-700);
  background: var(--teal-50); border-bottom: 1px solid var(--teal-100);
}
.table-modern tbody td { padding: .75rem 1rem; border-bottom: 1px solid #eef3f2; color: var(--ink-soft); }
.table-modern tbody tr { transition: background .12s ease; }
.table-modern tbody tr:hover { background: var(--teal-50); }
.table-modern tbody tr:last-child td { border-bottom: 0; }

/* ----- misc ------------------------------------------------------------- */
.link-teal { color: var(--teal-600); font-weight: 600; text-decoration: none; }
.link-teal:hover { color: var(--teal-800); text-decoration: underline; }
.empty-state {
  border: 1.5px dashed #c8d8d5; border-radius: 1rem; background: rgba(240,253,250,.5);
  padding: 2.5rem 1rem; text-align: center; color: #64748b;
}
.toast {
  border-radius: .9rem; padding: .8rem 1rem; font-size: .875rem; font-weight: 500;
  display: flex; align-items: center; gap: .6rem; box-shadow: var(--shadow-sm);
  border: 1px solid var(--teal-200); background: var(--teal-50); color: var(--teal-800);
}

/* ----- animations ------------------------------------------------------- */
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.animate-in { animation: fade-up .4s cubic-bezier(.2,.7,.3,1) both; }
.delay-1 { animation-delay: .05s; } .delay-2 { animation-delay: .1s; }
.delay-3 { animation-delay: .15s; } .delay-4 { animation-delay: .2s; }

/* ----- rendered markdown (AI chat replies) ------------------------------ */
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }
.md p { margin: .4rem 0; }
.md h1, .md h2, .md h3, .md h4 { font-weight: 700; color: var(--ink); line-height: 1.3; margin: .8rem 0 .35rem; }
.md h1 { font-size: 1.15rem; } .md h2 { font-size: 1.05rem; } .md h3 { font-size: .95rem; }
.md ul, .md ol { margin: .4rem 0; padding-left: 1.25rem; }
.md ul { list-style: disc; } .md ol { list-style: decimal; }
.md li { margin: .15rem 0; }
.md li::marker { color: var(--teal-500); }
.md strong { font-weight: 700; color: var(--ink); }
.md a { color: var(--teal-700); text-decoration: underline; }
.md code { background: var(--teal-50); color: var(--teal-800); padding: .05rem .3rem; border-radius: .3rem; font-size: .85em; }
.md pre { background: #0f2e2b; color: #d1faf3; padding: .7rem .9rem; border-radius: .6rem; overflow-x: auto; margin: .5rem 0; }
.md pre code { background: transparent; color: inherit; padding: 0; }
.md blockquote { border-left: 3px solid var(--teal-300); padding-left: .7rem; color: #475569; margin: .5rem 0; }
.md table { border-collapse: collapse; margin: .5rem 0; font-size: .9em; }
.md th, .md td { border: 1px solid #e2e8f0; padding: .3rem .55rem; text-align: left; }
.md hr { border: 0; border-top: 1px solid #e2e8f0; margin: .7rem 0; }

.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}