/* ==========================================================================
   Telemed Clinical Console — Base
   Design system: Calm cyan + health green, accessible & ethical (WCAG AA+)
   Audience: Doctors, Nurses. Clinical OPD telemedicine.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color · Brand ---------- */
  --c-primary-50:  #ECFEFF;
  --c-primary-100: #CFFAFE;
  --c-primary-200: #A5F3FC;
  --c-primary-300: #67E8F9;
  --c-primary-400: #22D3EE;
  --c-primary-500: #06B6D4;
  --c-primary-600: #0891B2;
  --c-primary-700: #0E7490;
  --c-primary-800: #155E75;
  --c-primary-900: #164E63;

  --c-accent-500:  #10B981;
  --c-accent-600:  #059669;
  --c-accent-700:  #047857;

  /* ---------- Color · Neutral (slate) ---------- */
  --c-slate-50:  #F8FAFC;
  --c-slate-100: #F1F5F9;
  --c-slate-200: #E2E8F0;
  --c-slate-300: #CBD5E1;
  --c-slate-400: #94A3B8;
  --c-slate-500: #64748B;
  --c-slate-600: #475569;
  --c-slate-700: #334155;
  --c-slate-800: #1E293B;
  --c-slate-900: #0F172A;

  /* ---------- Color · Semantic ---------- */
  --c-danger-50:    #FEF2F2;
  --c-danger-100:   #FEE2E2;
  --c-danger-500:   #EF4444;
  --c-danger-600:   #DC2626;
  --c-danger-700:   #B91C1C;

  --c-warn-50:      #FFFBEB;
  --c-warn-100:     #FEF3C7;
  --c-warn-500:     #F59E0B;
  --c-warn-600:     #D97706;
  --c-warn-700:     #B45309;

  --c-success-50:   #ECFDF5;
  --c-success-100:  #D1FAE5;
  --c-success-500:  #10B981;
  --c-success-600:  #059669;
  --c-success-700:  #047857;

  --c-info-50:      #EFF6FF;
  --c-info-100:     #DBEAFE;
  --c-info-600:     #2563EB;

  /* ---------- Tokens · Surface ---------- */
  --bg-app:       var(--c-slate-50);
  --bg-surface:   #FFFFFF;
  --bg-elevated:  #FFFFFF;
  --bg-muted:     var(--c-slate-100);
  --bg-inset:     #F4F8FB;

  /* ---------- Tokens · Text ---------- */
  --text:         var(--c-slate-900);
  --text-strong:  var(--c-slate-900);
  --text-muted:   var(--c-slate-600);
  --text-subtle:  var(--c-slate-500);
  --text-on-primary:#FFFFFF;
  --text-on-danger: #FFFFFF;

  /* ---------- Tokens · Border ---------- */
  --border:        var(--c-slate-200);
  --border-strong: var(--c-slate-300);
  --border-focus:  var(--c-primary-600);

  /* ---------- Tokens · Brand role ---------- */
  --primary:       var(--c-primary-600);
  --primary-hover: var(--c-primary-700);
  --primary-soft:  var(--c-primary-50);
  --primary-soft-border: var(--c-primary-200);

  --accent:        var(--c-accent-600);
  --accent-hover:  var(--c-accent-700);

  --danger:        var(--c-danger-600);
  --danger-hover:  var(--c-danger-700);
  --danger-soft:   var(--c-danger-50);
  --danger-border: #FCA5A5;

  --warn:          var(--c-warn-600);
  --warn-soft:     var(--c-warn-50);
  --warn-border:   #FCD34D;

  --ok:            var(--c-success-600);
  --ok-soft:       var(--c-success-50);
  --ok-border:     #6EE7B7;

  --ring:          rgba(8, 145, 178, 0.35);

  /* ---------- Typography ---------- */
  --font-display: 'Figtree', 'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Figtree', 'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:   0.75rem;   /* 12px — labels only */
  --fs-sm:   0.875rem;  /* 14px — secondary */
  --fs-base: 1rem;      /* 16px — body */
  --fs-md:   1.0625rem; /* 17px */
  --fs-lg:   1.125rem;  /* 18px — h3 */
  --fs-xl:   1.25rem;   /* 20px — h2 */
  --fs-2xl:  1.5rem;    /* 24px — h1 */
  --fs-3xl:  1.875rem;  /* 30px */

  --lh-tight:  1.25;
  --lh-snug:   1.4;
  --lh-normal: 1.55;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ---------- Spacing (4pt scale) ---------- */
  --sp-1:  0.25rem;  /* 4 */
  --sp-2:  0.5rem;   /* 8 */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.25rem;  /* 20 */
  --sp-6:  1.5rem;   /* 24 */
  --sp-8:  2rem;     /* 32 */
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --sh-md: 0 4px 6px -2px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --sh-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  --sh-focus: 0 0 0 3px var(--ring);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --t-fast:   120ms;
  --t-base:   180ms;
  --t-slow:   240ms;

  /* ---------- Layout ---------- */
  --sidebar-w:   260px;
  --header-h:    64px;
  --content-max: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  text-rendering: optimizeLegibility;
}

body {
  font-variant-numeric: tabular-nums;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
h4 { font-size: var(--fs-base); font-weight: var(--fw-semi); }

p { line-height: var(--lh-normal); }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

/* ---------- Form base ---------- */
input, select, textarea, button {
  font: inherit;
  color: inherit;
}

input[type="text"], input[type="search"], input:not([type]),
select, textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  min-height: 40px;
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
textarea {
  resize: vertical;
  min-height: 80px;
  line-height: var(--lh-normal);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--sh-focus);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }

select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  cursor: pointer;
}

/* ---------- Focus rings (always visible for keyboard) ---------- */
:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-sm);
}

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  height: 100vh;
  min-height: 100dvh;
  background: var(--bg-app);
}

.app > header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  z-index: 5;
}

.app > aside {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.app > main {
  padding: var(--sp-6);
  overflow-y: auto;
  background: var(--bg-app);
}

/* ---------- Brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-size: var(--fs-md);
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-primary-500), var(--c-primary-700));
  color: #fff;
  box-shadow: var(--sh-sm);
}
.brand-mark .icon { width: 18px; height: 18px; }
.brand-name small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Icons ---------- */
.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 2;
}
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }

/* Mobile responsive rules live in components.css so they override
   component-specific display/padding values that load after this file. */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Utilities ---------- */
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row.space { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); font-size: var(--fs-sm); }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 720px) {
  .grid2 { grid-template-columns: 1fr; }
}

/* page screen wrapper */
.screen {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  animation: screen-in var(--t-slow) var(--ease-out);
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}