/* MedConsult — application stylesheet. Tokens come from styles.css (the Practice system) and the
   customer's identity from assets/brand.css. This file adapts the system to the customer's brief
   (dark navy & charcoal, corporate trust) and defines the component layer. No raw hex, no raw px
   outside the token scale. */
@import url("assets/brand.css");
@import url("styles.css");

/* ── Dark theme: re-point the semantic surface/text tokens onto the slate ramp ── */
:root{
  color-scheme:dark;
  --font-core:var(--brand-font-body);
  --font-heading:var(--brand-font-heading);

  --surface-page:var(--teal-950);
  --surface-page-alt:var(--teal-900);
  --surface-card:var(--teal-900);
  --surface-sunken:var(--teal-950);
  --surface-soft:var(--teal-800);
  --surface-brand:var(--brand-accent);
  --surface-brand-hover:var(--glow-500);
  --surface-hover:var(--teal-800);
  --surface-selected:var(--teal-800);
  --surface-disabled:var(--teal-800);
  --surface-highlight:var(--brand-accent);

  --text-heading:var(--df-white);
  --text-body:var(--teal-100);
  --text-muted:var(--teal-200);
  --text-subtle:var(--teal-300);
  --text-disabled:var(--teal-400);
  --text-on-brand:var(--teal-950);
  --text-link:var(--brand-accent);
  --text-link-hover:var(--df-white);
  --text-success:var(--glow-300);
  --text-warning:var(--amber-200);
  --text-danger:var(--rust-200);

  --border-subtle:var(--teal-800);
  --border-default:var(--teal-700);
  --border-strong:var(--teal-400);
  --border-focus:var(--brand-accent);

  --success-bg:var(--glow-900);
  --success-border:var(--glow-700);
  --success-fg:var(--glow-200);
  --warning-bg:var(--amber-700);
  --warning-border:var(--amber-400);
  --warning-fg:var(--amber-50);
  --danger-bg:var(--rust-700);
  --danger-border:var(--rust-400);
  --danger-fg:var(--rust-50);
  --info-bg:var(--teal-800);
  --info-border:var(--teal-600);
  --info-fg:var(--teal-100);

  --chart-1:var(--brand-accent);
  --chart-2:var(--glow-400);
  --chart-3:var(--teal-300);
  --chart-grid:var(--teal-800);
  --ring-focus:0 0 0 3px var(--brand-accent);
}

html{background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--surface-page);color:var(--text-body);font-family:var(--font-core)}
h1,h2,h3,h4{color:var(--text-heading);margin:0 0 var(--space-12);font-family:var(--font-heading);letter-spacing:var(--tracking-tight)}
h1{font:var(--type-h1);font-family:var(--font-heading)}
h2{font:var(--type-h2);font-family:var(--font-heading)}
h3{font:var(--type-h3);font-family:var(--font-core)}
h4{font:var(--type-h4);font-family:var(--font-core)}
p{margin:0 0 var(--space-12)}
a{color:var(--text-link)}
a:hover{color:var(--text-link-hover)}
img{max-width:100%;display:block}
*,*::before,*::after{box-sizing:border-box;min-width:0}
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-control)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.icon.sm{width:16px;height:16px}
.icon.lg{width:28px;height:28px}

/* ── Layout ── */
.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-16)}
@media (min-width:768px){.container{padding:0 var(--space-32)}}
.stack{display:grid;gap:var(--stack)}
.stack-loose{display:grid;gap:var(--stack-loose)}
.row{display:flex;flex-wrap:wrap;gap:var(--inline-gap);align-items:center}
.between{justify-content:space-between}
.grid{display:grid;gap:var(--grid-gap)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.section{padding:var(--section-y-compact) 0}
@media (min-width:768px){.section{padding:var(--section-y) 0}}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--brand-accent);margin-bottom:var(--space-8)}
.muted{color:var(--text-muted)}
.subtle{color:var(--text-subtle);font:var(--type-body-sm)}
.small{font:var(--type-body-sm)}
.price{white-space:nowrap;font-variant-numeric:var(--numeric-tabular);font-weight:var(--weight-semibold);color:var(--text-heading)}
.num{font-variant-numeric:var(--numeric-tabular)}
.nowrap{white-space:nowrap}
.hidden{display:none !important}

/* ── Site header (customer) ── */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--overlay-glass-inverse);backdrop-filter:var(--blur-glass);border-bottom:var(--border-width-hairline) solid var(--border-inverse)}
.site-header .container{display:flex;align-items:center;gap:var(--space-16);min-height:var(--site-header-h)}
.brand{display:flex;align-items:center;gap:var(--space-12);color:var(--text-heading);text-decoration:none;font-weight:var(--weight-bold);font-size:var(--text-lg)}
.brand img{height:36px;width:36px;background:var(--df-white);border-radius:var(--radius-md);padding:var(--space-6)}
.nav{display:none;gap:var(--space-4);margin-left:auto}
.nav a{color:var(--text-body);text-decoration:none;padding:var(--space-12) var(--space-16);border-radius:var(--radius-control);font:var(--type-label);min-height:var(--tap-target-min);display:inline-flex;align-items:center;transition:var(--transition-control)}
.nav a:hover,.nav a.active{background:var(--surface-hover);color:var(--text-heading)}
.nav-toggle{margin-left:auto;display:inline-flex}
@media (min-width:900px){.nav{display:flex}.nav-toggle{display:none}}
.nav.open{display:flex;position:absolute;left:0;right:0;top:var(--site-header-h);flex-direction:column;background:var(--surface-card);padding:var(--space-16);border-bottom:var(--border-card);box-shadow:var(--shadow-lg)}

/* ── Hero ── */
.hero{position:relative;isolation:isolate;min-height:min(78vh,720px);display:flex;align-items:center;background:url("/assets/stock-1.jpg") center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,31,33,.94) 0%,rgba(18,31,33,.86) 45%,rgba(18,31,33,.55) 100%)}
.hero .container{padding-top:var(--space-64);padding-bottom:var(--space-64)}
.hero h1{font-size:clamp(3rem,6vw,var(--text-6xl));line-height:var(--leading-tight);max-width:18ch;margin-bottom:var(--space-24)}
.hero p.lead{font:var(--type-body-lg);color:var(--text-body);max-width:var(--measure-narrow);margin-bottom:var(--space-32)}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-16);margin-top:var(--space-48);max-width:720px}
.hero-stat{border-left:var(--keyline-highlight);padding-left:var(--space-12)}
.hero-stat b{display:block;font-size:var(--text-2xl);color:var(--text-heading);font-variant-numeric:var(--numeric-tabular)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--tap-target-min);padding:0 var(--control-pad-x-lg);border-radius:var(--radius-control);border:var(--border-width-hairline) solid transparent;font:var(--type-button);font-size:var(--text-md);cursor:pointer;text-decoration:none;transition:var(--transition-control);white-space:nowrap}
.btn:disabled,.btn[aria-busy="true"]{opacity:.85;cursor:progress;filter:saturate(.7)}
.btn-primary{background:var(--brand-accent);color:var(--teal-950);border-color:var(--brand-accent)}
.btn-primary:hover{background:var(--df-white);border-color:var(--df-white);color:var(--teal-950);transform:var(--lift-hover)}
.btn-secondary{background:transparent;color:var(--text-heading);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--surface-hover);border-color:var(--df-white)}
.btn-ghost{background:transparent;color:var(--text-body);border-color:transparent}
.btn-ghost:hover{background:var(--surface-hover);color:var(--text-heading)}
.btn-danger{background:transparent;color:var(--rust-200);border-color:var(--rust-400)}
.btn-danger:hover{background:var(--rust-700);color:var(--df-white)}
.btn-sm{min-height:var(--control-h-md);padding:0 var(--control-pad-x-md);font-size:var(--text-sm)}
.btn-block{width:100%}
.btn-icon{min-width:var(--tap-target-min);padding:0}

/* ── Cards ── */
.card{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-panel);padding:var(--gutter-card);box-shadow:var(--shadow-sm)}
.card.compact{padding:var(--gutter-card-compact)}
.card h3{margin-bottom:var(--space-8)}
.card-media{border-radius:var(--radius-media);aspect-ratio:16/10;object-fit:cover;width:100%;margin-bottom:var(--space-16)}
.card-grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:stretch}
.card-grid>.card{display:flex;flex-direction:column}
.card-grid>.card .card-foot{margin-top:auto;padding-top:var(--space-16);display:flex;justify-content:space-between;align-items:center;gap:var(--space-12)}
.kpi{display:flex;flex-direction:column;gap:var(--space-4)}
.kpi b{font-size:var(--text-3xl);color:var(--text-heading);font-variant-numeric:var(--numeric-tabular);line-height:1}
.kpi span{color:var(--text-muted);font:var(--type-body-sm)}

/* ── Badges & status ── */
.badge{display:inline-flex;align-items:center;gap:var(--space-6);padding:var(--space-2) var(--space-8);border-radius:var(--radius-badge);font:var(--type-caption);font-weight:var(--weight-semibold);border:var(--border-width-hairline) solid var(--border-default);color:var(--text-body);background:var(--surface-soft);white-space:nowrap}
.badge-success{background:var(--success-bg);border-color:var(--success-border);color:var(--success-fg)}
.badge-warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-fg)}
.badge-danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-fg)}
.badge-info{background:var(--info-bg);border-color:var(--info-border);color:var(--info-fg)}
.badge-accent{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--teal-950)}
.notice{border:var(--border-width-hairline) solid var(--info-border);background:var(--info-bg);color:var(--info-fg);border-radius:var(--radius-card);padding:var(--space-12) var(--space-16);display:flex;gap:var(--space-12);align-items:flex-start}
.notice-warning{border-color:var(--warning-border);background:var(--warning-bg);color:var(--warning-fg)}
.notice-danger{border-color:var(--danger-border);background:var(--danger-bg);color:var(--danger-fg)}
.notice-success{border-color:var(--success-border);background:var(--success-bg);color:var(--success-fg)}

/* ── Stage tracker ── */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);counter-reset:stage}
.stage{padding:var(--space-12);border-radius:var(--radius-card);border:var(--border-width-hairline) solid var(--border-default);background:var(--surface-sunken);font:var(--type-body-sm);color:var(--text-muted);position:relative}
.stage::before{counter-increment:stage;content:counter(stage);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-pill);border:var(--border-width-hairline) solid var(--border-strong);margin-bottom:var(--space-8);font-weight:var(--weight-bold)}
.stage.done{border-color:var(--glow-700);color:var(--glow-200)}
.stage.done::before{background:var(--glow-400);color:var(--teal-950);border-color:var(--glow-400)}
.stage.active{border-color:var(--brand-accent);color:var(--df-white);background:var(--surface-card)}
.stage.active::before{background:var(--brand-accent);color:var(--teal-950);border-color:var(--brand-accent)}
.stage.locked{opacity:.9}
@media (max-width:640px){.stages{grid-template-columns:1fr 1fr}}

/* ── Forms ── */
.field{display:grid;gap:var(--space-6);margin-bottom:var(--space-16)}
.field label,.legend{font:var(--type-label);color:var(--text-heading)}
.field .hint{color:var(--text-subtle);font:var(--type-caption)}
.field .error{color:var(--rust-200);font:var(--type-caption)}
input,select,textarea{width:100%;min-height:var(--tap-target-min);padding:var(--space-8) var(--space-12);border-radius:var(--radius-input);border:var(--border-width-hairline) solid var(--border-default);background:var(--surface-sunken);color:var(--text-heading);font:var(--type-body);font-family:var(--font-core);transition:var(--transition-control)}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--brand-accent);outline:none;box-shadow:var(--ring-focus)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--rust-400)}
input[type="checkbox"],input[type="radio"]{width:20px;height:20px;min-height:0;accent-color:var(--brand-accent)}
.check{display:flex;gap:var(--space-12);align-items:flex-start;min-height:var(--tap-target-min);color:var(--text-body)}
.check input{margin-top:var(--space-2)}
.form-grid{display:grid;gap:0 var(--space-16);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.form-summary{border:var(--border-width-hairline) solid var(--danger-border);background:var(--danger-bg);color:var(--danger-fg);border-radius:var(--radius-card);padding:var(--space-12) var(--space-16);margin-bottom:var(--space-16)}
.form-summary ul{margin:var(--space-8) 0 0;padding-left:var(--space-20)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.chip{display:inline-flex;align-items:center;min-height:var(--tap-target-min);padding:0 var(--space-16);border-radius:var(--radius-pill);border:var(--border-width-hairline) solid var(--border-default);background:var(--surface-sunken);color:var(--text-body);cursor:pointer;font:var(--type-label);transition:var(--transition-control)}
.chip:hover{border-color:var(--border-strong)}
.chip.on,.chip[aria-pressed="true"]{background:var(--brand-accent);color:var(--teal-950);border-color:var(--brand-accent)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--space-8)}
.slot{min-height:var(--tap-target-min);border-radius:var(--radius-control);border:var(--border-width-hairline) solid var(--border-default);background:var(--surface-sunken);color:var(--text-heading);font:var(--type-data);font-variant-numeric:var(--numeric-tabular);cursor:pointer;transition:var(--transition-control)}
.slot:hover{border-color:var(--brand-accent)}
.slot.on{background:var(--brand-accent);color:var(--teal-950);border-color:var(--brand-accent)}

/* ── Tables ── */
.table-wrap{overflow-x:auto;border:var(--border-card);border-radius:var(--radius-panel);background:var(--surface-card)}
.table-tools{display:flex;flex-wrap:wrap;gap:var(--space-12);align-items:center;justify-content:space-between;padding:var(--space-12) var(--space-16);border-bottom:var(--border-card)}
.table-tools input{max-width:320px}
table{width:100%;border-collapse:collapse;font:var(--type-body-sm)}
thead th{position:sticky;top:0;background:var(--surface-soft);color:var(--text-heading);text-align:left;padding:var(--space-12) var(--space-16);font:var(--type-label);white-space:nowrap;cursor:pointer;user-select:none;border-bottom:var(--border-width-hairline) solid var(--border-default)}
thead th[aria-sort="ascending"]::after{content:" \2191"}
thead th[aria-sort="descending"]::after{content:" \2193"}
tbody td{padding:var(--space-12) var(--space-16);border-bottom:var(--border-width-hairline) solid var(--border-subtle);vertical-align:top;color:var(--text-body)}
tbody tr:hover{background:var(--surface-hover)}
tbody tr.clickable{cursor:pointer}
td.num,th.num{text-align:right;font-variant-numeric:var(--numeric-tabular)}
.pager{display:flex;gap:var(--space-8);align-items:center;justify-content:flex-end;padding:var(--space-12) var(--space-16);color:var(--text-muted);font:var(--type-body-sm)}

/* ── Lists ── */
.list{display:grid;gap:var(--space-12)}
.list-item{display:flex;gap:var(--space-16);align-items:flex-start;padding:var(--space-16);border:var(--border-card);border-radius:var(--radius-card);background:var(--surface-card)}
.list-item .grow{flex:1}
.timeline{display:grid;gap:var(--space-12);border-left:var(--border-width-thick) solid var(--border-default);padding-left:var(--space-16);margin-left:var(--space-8)}
.time{font-variant-numeric:var(--numeric-tabular);font-weight:var(--weight-semibold);color:var(--text-heading);white-space:nowrap}
.dl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:var(--space-8) var(--space-16);font:var(--type-body-sm)}
.dl dt{color:var(--text-muted)}
.dl dd{margin:0;color:var(--text-heading)}

/* ── Skeleton / empty / error states ── */
.skeleton{display:grid;gap:var(--space-12)}
.skeleton span{display:block;height:44px;border-radius:var(--radius-card);background:linear-gradient(90deg,var(--teal-800),var(--teal-700),var(--teal-800));background-size:200% 100%;animation:shimmer 1.2s var(--ease-standard) infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.empty{text-align:center;padding:var(--space-48) var(--space-24);border:var(--border-width-hairline) dashed var(--border-default);border-radius:var(--radius-panel);color:var(--text-muted)}
.empty p{margin-bottom:var(--space-16)}
.error-state{padding:var(--space-24);border:var(--border-width-hairline) solid var(--danger-border);background:var(--danger-bg);color:var(--danger-fg);border-radius:var(--radius-panel);display:grid;gap:var(--space-12);justify-items:start}

/* ── Toast & dialog ── */
.toasts{position:fixed;left:var(--space-16);right:var(--space-16);bottom:var(--space-16);z-index:var(--z-toast);display:grid;gap:var(--space-8);pointer-events:none}
@media (min-width:640px){.toasts{left:auto;width:380px}}
.toast{pointer-events:auto;background:var(--surface-card);color:var(--text-heading);border:var(--border-width-hairline) solid var(--border-default);border-left:var(--border-width-accent) solid var(--brand-accent);border-radius:var(--radius-card);padding:var(--space-12) var(--space-16);box-shadow:var(--shadow-lg);display:flex;gap:var(--space-12);align-items:flex-start;font:var(--type-body-sm)}
.toast.success{border-left-color:var(--glow-400)}
.toast.error{border-left-color:var(--rust-400)}
.toast button{margin-left:auto}
dialog.dlg{background:var(--surface-card);color:var(--text-body);border:var(--border-card);border-radius:var(--radius-dialog);padding:var(--space-24);width:min(92vw,560px);box-shadow:var(--shadow-xl)}
dialog.dlg::backdrop{background:var(--overlay-scrim);backdrop-filter:var(--blur-scrim)}
.dlg-actions{display:flex;gap:var(--space-12);justify-content:flex-end;margin-top:var(--space-24);flex-wrap:wrap}

/* ── Footer ── */
.site-footer{margin-top:auto;border-top:var(--border-width-hairline) solid var(--border-inverse);background:var(--surface-page-alt);padding:var(--space-48) 0 var(--space-32);color:var(--text-muted);font:var(--type-body-sm)}
.site-footer h4{color:var(--text-heading);margin-bottom:var(--space-12)}
.site-footer a{color:var(--text-body)}
.trust{display:flex;flex-wrap:wrap;gap:var(--space-12)}

/* ── Admin shell ── */
.admin{display:grid;min-height:100vh;grid-template-columns:1fr;grid-template-rows:var(--app-topbar-h) 1fr}
.admin-side{display:none;background:var(--teal-950);border-right:var(--border-width-hairline) solid var(--border-subtle);padding:var(--space-16);flex-direction:column;gap:var(--space-4)}
.admin-side .brand{padding:var(--space-8) var(--space-12) var(--space-24)}
.admin-side a{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12);border-radius:var(--radius-control);color:var(--text-body);text-decoration:none;font:var(--type-label);min-height:var(--tap-target-min);transition:var(--transition-control)}
.admin-side a:hover{background:var(--surface-hover);color:var(--text-heading)}
.admin-side a.active{background:var(--surface-soft);color:var(--df-white);box-shadow:inset var(--border-width-accent) 0 0 var(--brand-accent)}
.admin-side .group{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-subtle);padding:var(--space-16) var(--space-12) var(--space-4)}
.admin-top{grid-column:1/-1;display:flex;align-items:center;gap:var(--space-12);padding:0 var(--space-16);background:var(--surface-card);border-bottom:var(--border-card);position:sticky;top:0;z-index:var(--z-header)}
.admin-main{padding:var(--space-24) var(--space-16) var(--space-48);display:grid;gap:var(--space-24);align-content:start}
@media (min-width:960px){
  .admin{grid-template-columns:var(--app-sidebar-w) 1fr;grid-template-rows:var(--app-topbar-h) 1fr}
  .admin-side{display:flex;grid-row:1/3;position:sticky;top:0;height:100vh;overflow-y:auto}
  .admin-top{grid-column:2}
  .admin-main{grid-column:2;padding:var(--space-32)}
}
.admin-side.open{display:flex;position:fixed;inset:var(--app-topbar-h) 0 0 0;z-index:var(--z-dialog);width:min(88vw,var(--app-sidebar-w))}
.page-head{display:flex;flex-wrap:wrap;gap:var(--space-16);align-items:flex-end;justify-content:space-between}
.page-head h1{font-size:var(--text-3xl);margin-bottom:var(--space-4)}
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--text-muted);font-size:var(--text-xs);font-family:var(--font-core)}

/* ── Consultation room layout ── */
.room{display:grid;gap:var(--space-24);grid-template-columns:1fr}
@media (min-width:1024px){.room{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.join{background:linear-gradient(135deg,var(--teal-800),var(--teal-900));border:var(--border-width-hairline) solid var(--border-default);border-radius:var(--radius-panel);padding:var(--space-24);display:flex;flex-wrap:wrap;gap:var(--space-16);align-items:center;justify-content:space-between}
.gate-locked{border:var(--border-width-hairline) solid var(--warning-border);background:var(--warning-bg);color:var(--warning-fg);border-radius:var(--radius-card);padding:var(--space-12) var(--space-16)}
pre.report{white-space:pre-wrap;font-family:var(--font-mono);font-size:var(--text-xs);background:var(--surface-sunken);border:var(--border-card);border-radius:var(--radius-card);padding:var(--space-12);max-height:320px;overflow:auto;color:var(--text-body)}
.portal-tabs{display:flex;gap:var(--space-4);flex-wrap:wrap;border-bottom:var(--border-card);margin-bottom:var(--space-24)}
.portal-tabs a{padding:var(--space-12) var(--space-16);color:var(--text-body);text-decoration:none;min-height:var(--tap-target-min);display:inline-flex;align-items:center;border-bottom:var(--border-width-thick) solid transparent;font:var(--type-label)}
.portal-tabs a.active{color:var(--df-white);border-bottom-color:var(--brand-accent)}