/* ============================================================
   SLIM CLINIC — Material Design 3 Theme
   Healthcare-calibrated: Clinical Clean, Trust, Progress, Calm
   ============================================================ */

:root {
  /* ── PRIMARY: Medical Blue (Trust, Clinical Accuracy) ── */
  --md-sys-color-primary:            #005A9C;
  --md-sys-color-on-primary:         #FFFFFF;
  --md-sys-color-primary-container:  #D1E4FF;
  --md-sys-color-on-primary-container: #001D36;

  /* ── SECONDARY: Healthcare Green (Health, Progress) ── */
  --md-sys-color-secondary:          #006C51;
  --md-sys-color-on-secondary:       #FFFFFF;
  --md-sys-color-secondary-container: #89F8D0;
  --md-sys-color-on-secondary-container: #002117;

  /* ── TERTIARY: Calm Violet (AI, Intelligence) ── */
  --md-sys-color-tertiary:           #5B4A88;
  --md-sys-color-on-tertiary:        #FFFFFF;
  --md-sys-color-tertiary-container: #E8DEFF;
  --md-sys-color-on-tertiary-container: #180041;

  /* ── ERROR: Medical Red (Critical Alerts) ── */
  --md-sys-color-error:              #BA1A1A;
  --md-sys-color-on-error:           #FFFFFF;
  --md-sys-color-error-container:    #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  /* ── SURFACE (Light Theme — Clinical Clean) ── */
  --md-sys-color-background:         #FAFCFF;
  --md-sys-color-on-background:      #001F2A;
  --md-sys-color-surface:            #FAFCFF;
  --md-sys-color-on-surface:         #001F2A;
  --md-sys-color-surface-variant:    #E0E7EE;
  --md-sys-color-on-surface-variant: #3E4D57;
  --md-sys-color-surface-container-lowest:  #FFFFFF;
  --md-sys-color-surface-container-low:     #F3F7FB;
  --md-sys-color-surface-container:         #EDF1F6;
  --md-sys-color-surface-container-high:    #E7EBF0;
  --md-sys-color-surface-container-highest: #E1E6EB;

  /* ── OUTLINE ── */
  --md-sys-color-outline:            #6E7E88;
  --md-sys-color-outline-variant:    #BDC8D0;

  /* ── WARNING (Amber) ── */
  --md-sys-color-warning:            #7C5800;
  --md-sys-color-warning-container:  #FFDEA3;

  /* ── ELEVATION OVERLAYS ── */
  --md-sys-elevation-level1: 0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,90,156,0.04);
  --md-sys-elevation-level2: 0 1px 2px rgba(0,0,0,0.08), 0 4px 8px rgba(0,90,156,0.06);
  --md-sys-elevation-level3: 0 4px 8px rgba(0,0,0,0.10), 0 8px 16px rgba(0,90,156,0.08);

  /* ── SHAPE (MD3 Corner Radius) ── */
  --md-sys-shape-corner-extra-small:  4px;
  --md-sys-shape-corner-small:        8px;
  --md-sys-shape-corner-medium:       12px;
  --md-sys-shape-corner-large:        16px;
  --md-sys-shape-corner-extra-large:  28px;
  --md-sys-shape-corner-full:         9999px;
}

/* ── DARK MODE OVERRIDE (for data-theme="dark") ── */
[data-theme="dark"] {
  --md-sys-color-primary:            #9ECAFF;
  --md-sys-color-on-primary:         #003258;
  --md-sys-color-primary-container:  #004879;
  --md-sys-color-on-primary-container: #D1E4FF;
  --md-sys-color-background:         #191C1E;
  --md-sys-color-surface:            #191C1E;
  --md-sys-color-on-surface:         #E1E3E5;
  --md-sys-color-surface-container:  #2A2C2E;
  --md-sys-color-surface-container-high: #343638;
}

/* ── TYPOGRAPHY BASICS ── */
body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, .md3-display-large, .md3-display-medium, .md3-display-small, 
.md3-headline-large, .md3-headline-medium, .md3-headline-small,
.md3-title-large, .md3-title-medium, .md3-title-small {
  font-family: 'Google Sans', 'Roboto', sans-serif;
  font-weight: 500;
  margin: 0;
}

.mono, code, .clinical-value {
  font-family: 'Roboto Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* ── TYPOGRAPHY CLASSES ── */
.md3-display-large { font-size: 57px; line-height: 64px; letter-spacing: -0.25px; }
.md3-display-medium { font-size: 45px; line-height: 52px; letter-spacing: 0px; }
.md3-display-small { font-size: 36px; line-height: 44px; letter-spacing: 0px; }
.md3-headline-large { font-size: 32px; line-height: 40px; letter-spacing: 0px; }
.md3-headline-medium { font-size: 28px; line-height: 36px; letter-spacing: 0px; }
.md3-headline-small { font-size: 24px; line-height: 32px; letter-spacing: 0px; }
.md3-title-large { font-size: 22px; line-height: 28px; letter-spacing: 0px; }
.md3-title-medium { font-size: 16px; line-height: 24px; letter-spacing: 0.15px; }
.md3-title-small { font-size: 14px; line-height: 20px; letter-spacing: 0.1px; }
.md3-body-large { font-size: 16px; line-height: 24px; letter-spacing: 0.5px; }
.md3-body-medium { font-size: 14px; line-height: 20px; letter-spacing: 0.25px; }
.md3-body-small { font-size: 12px; line-height: 16px; letter-spacing: 0.4px; }
.md3-label-large { font-size: 14px; line-height: 20px; letter-spacing: 0.1px; font-weight: 500; }
.md3-label-medium { font-size: 12px; line-height: 16px; letter-spacing: 0.5px; font-weight: 500; }
.md3-label-small { font-size: 11px; line-height: 16px; letter-spacing: 0.5px; font-weight: 500; }

/* ── MD3 CARD COMPONENT ── */
.md3-card {
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 200ms ease, transform 150ms ease, background-color 200ms;
}
.md3-card--filled {
  background: var(--md-sys-color-surface-container-high);
  border: none;
}
.md3-card--elevated {
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-level1);
  border: none;
}
.md3-card--outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.md3-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--md-sys-elevation-level2);
}

/* ── MD3 BUTTONS ── */
.md3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  border: none;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  transition: background-color 200ms, box-shadow 200ms, transform 100ms;
  position: relative;
  overflow: hidden;
}
.md3-btn--filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.md3-btn--filled:hover {
  box-shadow: var(--md-sys-elevation-level1);
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 92%, black);
}
.md3-btn--tonal {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.md3-btn--tonal:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-secondary-container) 92%, black);
}
.md3-btn--outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}
.md3-btn--outlined:hover {
  background-color: rgba(0, 90, 156, 0.08);
}
.md3-btn--text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 10px 16px;
}
.md3-btn--text:hover {
  background-color: rgba(0, 90, 156, 0.08);
}
.md3-btn:active {
  transform: scale(0.97);
}

.md3-fab {
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-level2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 200ms, transform 200ms;
}
.md3-fab:hover {
  box-shadow: var(--md-sys-elevation-level3);
  transform: scale(1.05);
}

/* ── MD3 TEXT FIELDS ── */
.md3-text-field {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.md3-text-field input, .md3-text-field textarea {
  width: 100%;
  padding: 16px 12px;
  border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  font-size: 16px;
  outline: none;
  transition: border-color 200ms, box-shadow 200ms;
}
.md3-text-field input:focus, .md3-text-field textarea:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

/* ── MD3 CHIPS ── */
.md3-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.md3-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-small);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}
.md3-chip.selected, .md3-chip--active {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.md3-chip:hover {
  background-color: rgba(0, 31, 42, 0.08);
}

/* ── MD3 DIALOG ── */
.md3-dialog {
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  padding: 24px;
  max-width: 560px;
  width: 90%;
  box-shadow: var(--md-sys-elevation-level3);
}
.md3-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}
.md3-dialog__headline {
  font-size: 24px;
  font-family: 'Google Sans', sans-serif;
  margin-bottom: 16px;
}
.md3-dialog__content {
  font-size: 14px;
  line-height: 20px;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 24px;
}
.md3-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── MD3 DATA TABLE ── */
.md3-data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
  box-shadow: var(--md-sys-elevation-level1);
}
.md3-data-table th {
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.md3-data-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.md3-data-table tr:hover td {
  background: var(--md-sys-color-surface-container-low);
}

/* ── MD3 TOAST / SNACKBAR ── */
.md3-snackbar-region {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.md3-snackbar {
  background: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
  padding: 14px 20px;
  border-radius: var(--md-sys-shape-corner-small);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 320px;
  max-width: 480px;
  box-shadow: var(--md-sys-elevation-level3);
}
.md3-snackbar.success { border-left: 4px solid var(--md-sys-color-secondary); }
.md3-snackbar.error { border-left: 4px solid var(--md-sys-color-error); }
.md3-snackbar.warning { border-left: 4px solid var(--md-sys-color-warning); }

/* ── PROGRESS INDICATORS ── */
.md3-progress-linear {
  height: 4px;
  width: 100%;
  background-color: var(--md-sys-color-outline-variant);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.md3-progress-linear__indicator {
  height: 100%;
  background-color: var(--md-sys-color-primary);
  transition: width 200ms;
}

.md3-progress-circular {
  position: relative;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.md3-progress-circular svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.md3-progress-circular circle {
  fill: none;
  stroke-width: 4;
}
.md3-progress-circular circle.track {
  stroke: var(--md-sys-color-outline-variant);
}
.md3-progress-circular circle.indicator {
  stroke: var(--md-sys-color-primary);
  stroke-dasharray: 125.6; /* 2 * pi * 20 */
  stroke-dashoffset: calc(125.6 - (125.6 * var(--progress)) / 100);
  transition: stroke-dashoffset 300ms ease;
}
.md3-progress-circular span {
  position: absolute;
  font-size: 12px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}