/* ============================================================
   Mezura CNI Client Portal — Design System Foundation
   MEZ-MEZCP-0000030

   The shared, institutional-grade design language that every
   subsequent page redesign inherits from. Self-contained: it
   carries its OWN token set (--ds-*) and component classes
   (.ds-*), so it does not depend on the legacy dark/light token
   flip in theme.css. Loaded AFTER theme.css (see layout.ts) so
   the sidebar elevation and shared shell rules win.

   Brand stays white / navy / green — elevated from flat &
   saturated to premium & institutional. Display face: Space
   Grotesk. Body/UI face: Inter.

   TS helpers that emit markup for these classes live in
   src/views/client/ds.ts. The living component gallery is at
   /client/design-system.
   ============================================================ */

:root {
  /* ---- Palette: Navy (structure / sidebar / ink) ---- */
  --ds-navy-950: #0b1220;   /* sidebar, deepest structural fills */
  --ds-navy-900: #131d33;   /* raised dark surfaces, hero accents */
  --ds-navy-700: #27324f;   /* dark hairlines, muted-on-dark text */

  /* ---- Palette: Slate (neutral text + hairlines) ---- */
  --ds-slate-500: #64748b;  /* captions, section labels, muted text */
  --ds-slate-200: #e2e8f0;  /* borders / hairline rules on light */

  /* ---- Surfaces ---- */
  --ds-canvas: #f6f8fb;     /* page canvas behind cards */
  --ds-surface: #ffffff;    /* card / panel surface */

  /* ---- Accent: Emerald (brand green, institutional) ---- */
  --ds-emerald-600: #059669;
  --ds-emerald-50: #ecfdf5;

  /* ---- Status: Amber (warning) ---- */
  --ds-amber-600: #d97706;
  --ds-amber-50: #fffbeb;

  /* ---- Status: Red (error / critical) ---- */
  --ds-red-600: #dc2626;
  --ds-red-50: #fef2f2;

  /* ---- Status: Sky (informational / trend) ---- */
  --ds-sky-600: #0284c7;
  --ds-sky-50: #f0f9ff;

  /* ---- Ink (text) ---- */
  --ds-ink: #0f172a;        /* primary text (navy-950 tinted slate) */
  --ds-ink-soft: #334155;   /* secondary text */
  --ds-ink-muted: var(--ds-slate-500);

  /* ---- Typography ---- */
  --ds-font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --ds-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Type scale (spec): Display L 26 / Heading 20 / Subhead 16 / Body 14 / Caption 12 */
  --ds-fs-display: 26px;
  --ds-fs-heading: 20px;
  --ds-fs-subhead: 16px;
  --ds-fs-body: 14px;
  --ds-fs-caption: 12px;

  --ds-fw-regular: 400;
  --ds-fw-medium: 500;
  --ds-fw-semibold: 600;

  /* ---- Radii ---- */
  --ds-radius: 14px;
  --ds-radius-sm: 10px;
  --ds-radius-xs: 8px;
  --ds-radius-pill: 999px;

  /* ---- Elevation (institutional: low-spread, soft, never neon) ---- */
  --ds-shadow-flat: none;
  --ds-shadow-raised: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 20px rgba(15, 23, 42, 0.06);
  --ds-shadow-hover: 0 2px 6px rgba(15, 23, 42, 0.08), 0 16px 40px rgba(15, 23, 42, 0.10);
  --ds-shadow-hero: 0 4px 10px rgba(15, 23, 42, 0.07), 0 24px 56px rgba(15, 23, 42, 0.12);

  /* ---- Motion ---- */
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-dur: 0.2s;
}

/* ============================================================
   Typography helpers
   ============================================================ */
.ds-display {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-fw-semibold);
  font-size: var(--ds-fs-display);
  line-height: 1.14;
  letter-spacing: -0.4px;
  color: var(--ds-ink);
  margin: 0;
}
.ds-heading {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-fw-semibold);
  font-size: var(--ds-fs-heading);
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--ds-ink);
  margin: 0;
}
.ds-subhead {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-fw-medium);
  font-size: var(--ds-fs-subhead);
  line-height: 1.3;
  color: var(--ds-ink);
  margin: 0;
}
.ds-body {
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-regular);
  font-size: var(--ds-fs-body);
  line-height: 1.55;
  color: var(--ds-ink-soft);
  margin: 0;
}
.ds-caption {
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-medium);
  font-size: var(--ds-fs-caption);
  line-height: 1.4;
  color: var(--ds-ink-muted);
  margin: 0;
}
/* Tabular numerals for any metric / figure. */
.ds-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============================================================
   Icon — consistent stroke glyph sizing.
   Consumers pass a 24x24 lucide-style path set; .ds-icon frames it.
   ============================================================ */
.ds-icon {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 20px;
  color: currentColor;
}
.ds-icon svg { width: 100%; height: 100%; display: block; }
.ds-icon--sm { width: 16px; height: 16px; }
.ds-icon--lg { width: 24px; height: 24px; }
.ds-icon--xl { width: 30px; height: 30px; }

/* ============================================================
   Card — three elevation tiers
     .ds-card--flat    border only, inline stats
     .ds-card--raised  subtle shadow, interactive/clickable
     .ds-card--hero    stronger shadow + accent top-border, centrepiece
   ============================================================ */
.ds-card {
  --ds-card-pad: 22px;
  position: relative;
  background: var(--ds-surface);
  border: 1px solid var(--ds-slate-200);
  border-radius: var(--ds-radius);
  padding: var(--ds-card-pad);
  color: var(--ds-ink);
}

.ds-card--flat {
  box-shadow: var(--ds-shadow-flat);
}

.ds-card--raised {
  box-shadow: var(--ds-shadow-raised);
  transition: box-shadow var(--ds-dur) var(--ds-ease),
              transform var(--ds-dur) var(--ds-ease);
}
/* Only lift when the card is actually interactive (link/button/[tabindex]). */
a.ds-card--raised:hover,
button.ds-card--raised:hover,
.ds-card--raised[role='button']:hover,
.ds-card--raised.is-interactive:hover {
  box-shadow: var(--ds-shadow-hover);
  transform: translateY(-2px);
}

.ds-card--hero {
  box-shadow: var(--ds-shadow-hero);
  border-color: transparent;
  padding-top: calc(var(--ds-card-pad) + 3px);
  overflow: hidden;
}
/* Accent top-border rule for the hero centrepiece. */
.ds-card--hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ds-emerald-600), #34d399);
}

/* Card internals (optional, shared). */
.ds-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* ============================================================
   Section Header — all-caps 12px slate-500 label,
   bottom hairline rule + integrated icon.
   ============================================================ */
.ds-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 9px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--ds-slate-200);
}
.ds-section-header__icon {
  display: inline-flex;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--ds-radius-xs);
  background: var(--ds-emerald-50);
  color: var(--ds-emerald-600);
  flex: none;
}
.ds-section-header__icon svg { width: 15px; height: 15px; }
.ds-section-header__label {
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-semibold);
  font-size: var(--ds-fs-caption);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ds-slate-500);
}
.ds-section-header__meta {
  margin-left: auto;
  font-size: var(--ds-fs-caption);
  color: var(--ds-slate-500);
}

/* ============================================================
   Buttons
     .ds-btn--primary    emerald-filled
     .ds-btn--secondary  navy-outline
     .ds-btn--ghost      link-style
   Hover micro-animation: scale 1.02 + shadow lift. No neon glow.
   ============================================================ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-semibold);
  font-size: var(--ds-fs-body);
  line-height: 1;
  padding: 11px 18px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s var(--ds-ease),
              box-shadow 0.15s var(--ds-ease),
              background 0.15s ease,
              border-color 0.15s ease,
              color 0.15s ease;
}
.ds-btn:hover { transform: scale(1.02); }
.ds-btn:active { transform: scale(0.99); }
.ds-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.28);
}
.ds-btn .ds-icon { width: 17px; height: 17px; }

.ds-btn--primary {
  background: var(--ds-emerald-600);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.24);
}
.ds-btn--primary:hover {
  background: #047d57;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.28);
}

.ds-btn--secondary {
  background: var(--ds-surface);
  color: var(--ds-navy-900);
  border-color: var(--ds-slate-200);
}
.ds-btn--secondary:hover {
  border-color: var(--ds-navy-700);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.ds-btn--ghost {
  background: transparent;
  color: var(--ds-emerald-600);
  padding-left: 8px;
  padding-right: 8px;
}
.ds-btn--ghost:hover {
  color: #047d57;
  background: var(--ds-emerald-50);
  transform: scale(1.0);
}

.ds-btn--sm { padding: 8px 13px; font-size: 13px; }
.ds-btn--block { width: 100%; }
.ds-btn:disabled,
.ds-btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}

/* ============================================================
   Badge — soft (default), bordered, outline variants.
   Colour modifiers: emerald / amber / red / sky / slate.
   ============================================================ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-semibold);
  font-size: 11.5px;
  letter-spacing: 0.2px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.ds-badge .ds-icon { width: 13px; height: 13px; }

/* Tone tokens resolved per colour, consumed by the variant rules. */
.ds-badge--emerald { --bt: var(--ds-emerald-600); --bb: var(--ds-emerald-50); --bl: #a7f3d0; }
.ds-badge--amber   { --bt: var(--ds-amber-600);   --bb: var(--ds-amber-50);   --bl: #fde68a; }
.ds-badge--red     { --bt: var(--ds-red-600);     --bb: var(--ds-red-50);     --bl: #fecaca; }
.ds-badge--sky     { --bt: var(--ds-sky-600);     --bb: var(--ds-sky-50);     --bl: #bae6fd; }
.ds-badge--slate   { --bt: var(--ds-slate-500);   --bb: #f1f5f9;              --bl: var(--ds-slate-200); }

/* soft: tinted fill, no border (default look) */
.ds-badge--soft { background: var(--bb); color: var(--bt); }
/* bordered: tinted fill + matching hairline */
.ds-badge--bordered { background: var(--bb); color: var(--bt); border-color: var(--bl); }
/* outline: transparent fill, coloured hairline + text */
.ds-badge--outline { background: transparent; color: var(--bt); border-color: var(--bl); }

/* Default (no variant class) = soft slate. */
.ds-badge:not([class*='--soft']):not([class*='--bordered']):not([class*='--outline']) {
  background: #f1f5f9;
  color: var(--ds-slate-500);
}

/* ============================================================
   Status Dot — solid indicator with optional pulse.
   ============================================================ */
.ds-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ds-slate-500);
  flex: none;
}
.ds-dot--emerald { background: var(--ds-emerald-600); }
.ds-dot--amber   { background: var(--ds-amber-600); }
.ds-dot--red     { background: var(--ds-red-600); }
.ds-dot--sky     { background: var(--ds-sky-600); }
.ds-dot--slate   { background: var(--ds-slate-500); }
.ds-dot--pulse {
  position: relative;
  box-shadow: 0 0 0 0 currentColor;
}
.ds-dot--pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.35;
  animation: ds-pulse 1.8s var(--ds-ease) infinite;
}
@keyframes ds-pulse {
  0% { transform: scale(0.7); opacity: 0.45; }
  70% { transform: scale(1.8); opacity: 0; }
  100% { opacity: 0; }
}
/* status label row: dot + text */
.ds-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-medium);
  font-size: 13px;
  color: var(--ds-ink-soft);
}

/* ============================================================
   Metric tile — label / big figure / sub or trend.
   ============================================================ */
.ds-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-slate-200);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-raised);
  padding: 16px 18px;
}
.ds-metric__label {
  font-family: var(--ds-font-body);
  font-size: 11px;
  font-weight: var(--ds-fw-semibold);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ds-slate-500);
}
.ds-metric__value {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-fw-semibold);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
}
.ds-metric__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ds-fs-caption);
  color: var(--ds-slate-500);
}
/* Accent left rail (optional). */
.ds-metric--accent { position: relative; overflow: hidden; }
.ds-metric--accent::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ds-emerald-600);
}

/* ============================================================
   Progress bar — track + fill, tone-aware, optional label row.
   ============================================================ */
.ds-progress {
  --ds-progress-tone: var(--ds-emerald-600);
  display: block;
  height: 8px;
  border-radius: var(--ds-radius-pill);
  background: #eef2f7;
  overflow: hidden;
}
.ds-progress__fill {
  display: block;
  height: 100%;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-progress-tone);
  transition: width 0.6s var(--ds-ease);
}
.ds-progress--amber { --ds-progress-tone: var(--ds-amber-600); }
.ds-progress--red   { --ds-progress-tone: var(--ds-red-600); }
.ds-progress--sky   { --ds-progress-tone: var(--ds-sky-600); }
.ds-progress--lg { height: 14px; }
.ds-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: var(--ds-fs-caption);
  color: var(--ds-slate-500);
}
.ds-progress-row b { color: var(--ds-ink); font-variant-numeric: tabular-nums; }

/* ============================================================
   Trend arrow — up (positive) / down (negative) / flat.
   ============================================================ */
.ds-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-semibold);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ds-trend svg { width: 14px; height: 14px; }
.ds-trend--up { color: var(--ds-emerald-600); }
.ds-trend--down { color: var(--ds-red-600); }
.ds-trend--flat { color: var(--ds-slate-500); }

/* ============================================================
   Sparkline + chart line — inline SVG; classes just theme strokes.
   ============================================================ */
.ds-sparkline { display: block; width: 100%; height: auto; overflow: visible; }
.ds-sparkline__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-sparkline__area { stroke: none; }
.ds-sparkline__dot { stroke: var(--ds-surface); stroke-width: 2; }

.ds-chart { width: 100%; }
.ds-chart__svg { display: block; width: 100%; height: auto; }
.ds-chart__grid { stroke: var(--ds-slate-200); stroke-width: 1; }
.ds-chart__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ds-chart__area { stroke: none; }
.ds-chart__lbl { fill: var(--ds-slate-500); font-family: var(--ds-font-body); font-size: 10.5px; }

/* ============================================================
   Empty state — centred glyph + title + copy + optional action.
   ============================================================ */
.ds-empty {
  text-align: center;
  padding: 48px 28px;
  border: 1px dashed var(--ds-slate-200);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
}
.ds-empty__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--ds-emerald-50);
  color: var(--ds-emerald-600);
}
.ds-empty__mark svg { width: 26px; height: 26px; }
.ds-empty__title {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-fw-semibold);
  font-size: var(--ds-fs-subhead);
  color: var(--ds-ink);
  margin: 0 0 6px;
}
.ds-empty__copy {
  font-family: var(--ds-font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ds-slate-500);
  max-width: 420px;
  margin: 0 auto 16px;
}
.ds-empty__copy:last-child { margin-bottom: 0; }

/* ============================================================
   Sidebar shell elevation — consumed by every page.
   Deepens the shared sidebar (src/views/layout.ts) to Navy 950
   and refines the nav item states. Loaded after theme.css so
   these win over the base .sidebar / .nav-item rules.
   ============================================================ */
.sidebar {
  background: var(--ds-navy-950);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar .nav-item {
  color: #9aa6be;
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-medium);
  border-radius: var(--ds-radius-xs);
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}
.sidebar .nav-item.active {
  background: rgba(5, 150, 105, 0.16);
  color: #ffffff;
}
.sidebar .nav-item.active::before { background: var(--ds-emerald-600); }
.sidebar .nav-item.active svg { color: #34d399; }

/* ============================================================
   Layout helpers used by the gallery + future pages.
   ============================================================ */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.ds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ds-stack { display: flex; flex-direction: column; gap: 12px; }
.ds-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .ds-dot--pulse::after,
  .ds-progress__fill { animation: none; transition: none; }
  .ds-btn:hover,
  .ds-card--raised:hover { transform: none; }
}