/* ══════════════════════════════════════════════════════════════════
   MATERIAL DESIGN 3 TOKENS — aligned to patient.stitch references
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* M3 Material Symbols base rules */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.material-symbols-fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── M3 Color Tokens (from reference tailwind.config) ──────────── */
:root {
  /* Surface hierarchy */
  --m3-surface: #e8ffef;
  --m3-surface-dim: #c9dfd0;
  --m3-surface-bright: #e8ffef;
  --m3-surface-container-lowest: #ffffff;
  --m3-surface-container-low: #e3f9ea;
  --m3-surface-container: #ddf3e4;
  --m3-surface-container-high: #d7eede;
  --m3-surface-container-highest: #d2e8d9;
  --m3-surface-variant: #d2e8d9;
  --m3-background: #e8ffef;

  /* Primary */
  --m3-primary: #005234;
  --m3-primary-container: #0a6c47;
  --m3-on-primary: #ffffff;
  --m3-on-primary-container: #95eabb;
  --m3-primary-fixed: #9ff4c5;
  --m3-primary-fixed-dim: #83d8aa;
  --m3-on-primary-fixed: #002112;
  --m3-on-primary-fixed-variant: #005234;
  --m3-inverse-primary: #83d8aa;

  /* Secondary */
  --m3-secondary: #006c47;
  --m3-secondary-container: #85f5bd;
  --m3-on-secondary: #ffffff;
  --m3-on-secondary-container: #00714b;
  --m3-secondary-fixed: #88f8c0;
  --m3-secondary-fixed-dim: #6bdba5;
  --m3-on-secondary-fixed: #002113;
  --m3-on-secondary-fixed-variant: #005235;

  /* Tertiary */
  --m3-tertiary: #3e4944;
  --m3-tertiary-container: #55615b;
  --m3-on-tertiary: #ffffff;
  --m3-on-tertiary-container: #cfdbd4;
  --m3-tertiary-fixed: #d9e6de;
  --m3-tertiary-fixed-dim: #bdcac2;
  --m3-on-tertiary-fixed: #131e19;
  --m3-on-tertiary-fixed-variant: #3e4944;

  /* Error */
  --m3-error: #ba1a1a;
  --m3-error-container: #ffdad6;
  --m3-on-error: #ffffff;
  --m3-on-error-container: #93000a;

  /* Outline */
  --m3-outline: #6f7a72;
  --m3-outline-variant: #bec9c0;

  /* Text */
  --m3-on-surface: #0c1f16;
  --m3-on-surface-variant: #3f4942;
  --m3-on-background: #0c1f16;

  /* Inverse */
  --m3-inverse-surface: #22342a;
  --m3-inverse-on-surface: #e0f6e7;

  /* Surface tint */
  --m3-surface-tint: #0a6c47;

  /* ─── M3 Typography Scale ──────────────────────────────────────── */
  --m3-font-headline: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --m3-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --m3-font-label: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ─── M3 Spacing / Layout ──────────────────────────────────────── */
  --m3-sidebar-width: 260px;
  --m3-header-height: 72px;
  --m3-content-max-width: 1400px;
}

/* ─── M3 Component Styles ───────────────────────────────────────── */

/* M3 Card — surface-container-lowest with subtle shadow */
.m3-card {
  background: var(--m3-surface-container-lowest);
  border: 1px solid rgba(190, 201, 192, 0.35);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(10, 108, 71, 0.04), 0 4px 12px rgba(20, 38, 28, 0.03);
  transition: box-shadow 0.15s ease;
}

.m3-card:hover {
  box-shadow: 0 1px 3px rgba(10, 108, 71, 0.04), 0 8px 24px rgba(20, 38, 28, 0.06);
}

/* M3 Badge — status indicator */
.m3-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--m3-font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.m3-badge-primary {
  background: var(--m3-surface-container);
  color: var(--m3-secondary);
}

.m3-badge-surface {
  background: var(--m3-surface-container-high);
  color: var(--m3-on-surface-variant);
  border: 1px solid rgba(190, 201, 192, 0.4);
}

/* M3 Filter Tab */
.m3-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--m3-on-surface-variant);
  font-family: var(--m3-font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.m3-filter-tab:hover {
  background: var(--m3-surface-container-low);
}

.m3-filter-tab.active {
  background: var(--m3-surface-container);
  color: var(--m3-primary);
}

/* M3 Empty State Icon Badge */
.m3-empty-emblem {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 50%;
  background: var(--m3-surface-container);
  color: var(--m3-primary);
  box-shadow: 0 0 0 8px var(--m3-surface-container-low);
  margin-bottom: 1.5rem;
}

.m3-empty-emblem .material-symbols-outlined {
  font-size: 32px;
}

/* M3 Button — Primary */
.m3-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 24px;
  border: none;
  border-radius: 0.5rem;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary);
  font-family: var(--m3-font-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: all 0.15s ease;
}

.m3-btn-primary:hover {
  background: var(--m3-primary);
}

.m3-btn-primary:active {
  transform: scale(0.98);
}

/* M3 Button — Secondary (outlined) */
.m3-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 24px;
  border: 1px solid var(--m3-outline-variant);
  border-radius: 0.5rem;
  background: var(--m3-surface-container-lowest);
  color: var(--m3-on-surface);
  font-family: var(--m3-font-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.m3-btn-secondary:hover {
  background: var(--m3-surface-container-low);
  border-color: var(--m3-primary);
  color: var(--m3-primary);
}

/* M3 Divider */
.m3-divider {
  height: 1px;
  background: var(--m3-outline-variant);
  opacity: 0.3;
  border: none;
  margin: 0;
}

/* M3 Headline styles */
.m3-headline-lg {
  font-family: var(--m3-font-headline);
  font-size: clamp(1.5rem, 2.2vw + 0.8rem, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--m3-on-surface);
}

.m3-headline-md {
  font-family: var(--m3-font-headline);
  font-size: clamp(1.15rem, 1.5vw + 0.6rem, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--m3-on-surface);
}

.m3-headline-sm {
  font-family: var(--m3-font-headline);
  font-size: clamp(1rem, 1.2vw + 0.5rem, 1.125rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--m3-on-surface);
}

/* M3 Body styles */
.m3-body-lg {
  font-family: var(--m3-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--m3-on-surface-variant);
}

.m3-body-md {
  font-family: var(--m3-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--m3-on-surface-variant);
}

.m3-body-sm {
  font-family: var(--m3-font-body);
  font-size: 12px;
  line-height: 18px;
  color: var(--m3-on-surface-variant);
}

/* M3 Label styles */
.m3-label-lg {
  font-family: var(--m3-font-label);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.01em;
  font-weight: 600;
}

.m3-label-md {
  font-family: var(--m3-font-label);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.m3-label-sm {
  font-family: var(--m3-font-label);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.03em;
  font-weight: 600;
}

/* M3 Icon in rounded container */
.m3-icon-container {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  background: var(--m3-surface-container);
  color: var(--m3-primary);
  flex-shrink: 0;
}

.m3-icon-circle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--m3-surface-container);
  color: var(--m3-primary);
  flex-shrink: 0;
}

/* Pulse animation for live indicators */
@keyframes m3-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.m3-pulse {
  animation: m3-pulse 2s ease-in-out infinite;
}

/* Live indicator dot */
.m3-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--m3-secondary);
  animation: m3-pulse 2s ease-in-out infinite;
}

/* M3 Info banner */
.m3-info-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 0.75rem;
  background: var(--m3-surface-container-low);
  border: 1px solid rgba(190, 201, 192, 0.3);
  color: var(--m3-on-surface-variant);
  font-size: 14px;
}

.m3-info-banner .material-symbols-outlined {
  color: var(--m3-primary);
}