/* ==========================================================================
   Jethur v3 — Design Tokens
   Source: "Design System — Charts & Data Visualization" (September 2026)
   Pages: Color Palette · Typography · Spacing & Padding
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  /* ---------- Primary ---------- */
  --brand:            #165D31;   /* Brand Colour */
  --white:            #FFFFFF;

  /* ---------- Text ---------- */
  --text-primary:     #1A1A1A;
  --text-secondary:   #525967;
  --text-link:        #B6630A;

  /* ---------- Background ---------- */
  --stroke-1:         #EAEDF2;
  --stroke-2:         #C9D0DA;
  --bg:               #FCFCFC;
  --nav-bar:          #202527;
  --light-blue:       #F9FBFC;
  --frame:            #FCFCFC;
  --content-bg:       #F5F6F8;   /* body / content area grey (dashboard reference) */

  /* ---------- Success ---------- */
  --success-1:        #0E7B61;
  --success-2:        #AFD6CC;
  --success-3:        #E5F4F0;

  /* ---------- Warning ---------- */
  --warning-1:        #B6630A;
  --warning-2:        #EDD7BF;
  --warning-3:        #FBF4EC;

  /* ---------- Danger ---------- */
  --danger-1:         #DB0015;
  --danger-2:         #EEC2C5;
  --danger-3:         #F4E5E6;

  /* ---------- Pending ---------- */
  --pending-1:        #997710;
  --pending-2:        #E7D8AA;
  --pending-3:        #F1EAD5;

  /* ---------- Inactive ---------- */
  --inactive-1:       #676D7B;
  --inactive-2:       #E5E6EC;
  --inactive-3:       #F6F6F6;

  /* ---------- Deceased ---------- */
  --deceased-1:       #363636;
  --deceased-2:       #CBCBCB;
  --deceased-3:       #DEDEDE;

  /* ---------- Retired ---------- */
  --retired-1:        #1D60E2;
  --retired-2:        #BBCCEC;
  --retired-3:        #E6EBF5;

  /* ---------- Newbie ---------- */
  --newbie-1:         #611EBA;
  --newbie-2:         #C7B7F0;
  --newbie-3:         #F1EAFB;

  /* ---------- AI ---------- */
  --ai-bg:            #FFFDF5;
  --ai-accent:        #82BF4D;   /* "Jethur AI" nav text tone (sampled) */
  --ai-border:        #E3D660;   /* AI button outline tone */
  --ai-hover:         #EEECCC;   /* AI nav hover fill (sampled) */

  /* ---------- Supporting ---------- */
  --cards:            #FFC55A;
  --nav-icon:         #BBBBBB;

  /* ---------- Navigation (derived, sampled from Navbar spec) ---------- */
  --nav-active:       #2B3F33;   /* active nav cell */
  --nav-hover:        #293236;   /* hover nav cell */
  --nav-text:         #BABABA;
  --nav-text-active:  #F4F4F4;
  --nav-section:      #AEB0B1;
  --nav-sub-bar:      #363636;
  --nav-sub-active:   #B8D9D1;
  --nav-search-bg:    #24292B;
  --nav-search-border:#3A4143;
  --nav-divider:      #2E3436;

  /* ---------- Heatmap scale (sampled from Risk Heatmap) ---------- */
  --heat-1:           #1D8A5B;   /* 01–03 deep green */
  --heat-2:           #8FCC60;   /* 04–06 light green */
  --heat-3:           #FFC55A;   /* 08–12 amber */
  --heat-4:           #F0705A;   /* 15–20 coral */
  --heat-5:           #D14040;   /* 20–25 red */
  --heat-3b:          #F7E080;   /* 05-ish pale amber */

  /* ---------- Chart series (from Chart Legend) ---------- */
  --chart-1:          #0E7B61;
  --chart-2:          #997710;
  --chart-3:          #B6630A;
  --chart-4:          #DB0015;
  --chart-5:          #1D60E2;
  --chart-6:          #611EBA;

  /* ---------- Typography — Lexend Deca ---------- */
  --font:             'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-spec:        'Lexend Deca', system-ui, sans-serif;   /* original PDF spec face, kept for reference */
  --h1-size: 32px; --h1-weight: 600;
  --h2-size: 28px; --h2-weight: 500;
  --h3-size: 24px; --h3-weight: 500;
  --h4-size: 20px; --h4-weight: 500;
  --h5-size: 18px; --h5-weight: 500;
  --h6-size: 16px; --h6-weight: 500;
  --body1-size: 13px; --body1-weight: 500;
  --body2-size: 13px; --body2-weight: 400;
  --body3-size: 13px; --body3-weight: 300;
  --body4-size: 11px; --body4-weight: 300;
  --body5-size: 11px; --body5-weight: 400;
  --link-size: 13px;  --link-weight: 500;
  --btn-size: 12px;   --btn-weight: 400;

  /* ---------- Spacing ---------- */
  --p-0: 0px; --p-2: 2px; --p-4: 4px; --p-6: 6px; --p-8: 8px; --p-12: 12px;
  --p-16: 16px; --p-20: 20px; --p-24: 24px; --p-32: 32px; --p-40: 40px;
  --p-48: 48px; --p-56: 56px; --p-64: 64px;

  /* ---------- Radii / shadows (measured from mockups) ---------- */
  --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-10: 10px; --r-12: 12px; --r-16: 16px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26,26,26,.04), 0 1px 3px rgba(26,26,26,.06);
  --shadow-md: 0 4px 12px rgba(26,26,26,.08);
  --shadow-lg: 0 12px 32px rgba(26,26,26,.14);
  --shadow-popover: 0 8px 24px rgba(26,26,26,.12), 0 0 0 1px var(--stroke-1);

  /* ---------- Layout ---------- */
  --sidebar-w: 260px;
  --sidebar-rail-w: 64px;
  --header-h: 64px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: var(--body2-size);
  font-weight: var(--body2-weight);
  color: var(--text-primary);
  background: var(--content-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}
a { color: var(--text-link); text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
img, svg { display: inline-block; vertical-align: middle; }

/* Typography classes */
.h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: 1.25; }
.h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: 1.25; }
.h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: 1.25; }
.h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: 1.3; }
.h5 { font-size: var(--h5-size); font-weight: var(--h5-weight); line-height: 1.3; }
.h6 { font-size: var(--h6-size); font-weight: var(--h6-weight); line-height: 1.3; }
.body1 { font-size: var(--body1-size); font-weight: var(--body1-weight); }
.body2 { font-size: var(--body2-size); font-weight: var(--body2-weight); }
.body3 { font-size: var(--body3-size); font-weight: var(--body3-weight); }
.body4 { font-size: var(--body4-size); font-weight: var(--body4-weight); }
.body5 { font-size: var(--body5-size); font-weight: var(--body5-weight); }
.link-text { font-size: var(--link-size); font-weight: var(--link-weight); color: var(--text-link); text-decoration: underline; cursor: pointer; }
.btn-text { font-size: var(--btn-size); font-weight: var(--btn-weight); }
.text-secondary { color: var(--text-secondary); }
.text-primary   { color: var(--text-primary); }
.text-brand     { color: var(--brand); }
.text-success   { color: var(--success-1); }
.text-warning   { color: var(--warning-1); }
.text-danger    { color: var(--danger-1); }
.text-link      { color: var(--text-link); }
.text-muted     { color: var(--inactive-1); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Spacing utilities */
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}
.flex-1{flex:1 1 auto}.wrap{flex-wrap:wrap}.w-full{width:100%}.grid{display:grid}
.relative{position:relative}.hidden{display:none!important}
[hidden]{display:none!important}

/* --------------------------------------------------------------------------
   Global type theme — DM Sans with heavier headings (applied to every page).
   The .font-dm class is kept as an alias for backwards compatibility.
   -------------------------------------------------------------------------- */
body { font-size: 13px; letter-spacing: -0.005em; }
body .pt-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
body .pt-sub { font-size: 13px; }
body .section-title, body .collapse-head .section-title { font-size: 16px; font-weight: 700; }
body .card-head .card-title { font-size: 16px; font-weight: 700; }
body .card-head .card-sub { font-size: 13px; }
body .kpi-card .kpi-title { font-size: 14px; font-weight: 600; }
body .kpi-card .kpi-num { font-size: 26px; font-weight: 700; }
body .kpi-card .kpi-sub { font-size: 13px; font-weight: 500; }
body .ai-banner { padding: 14px 18px; }
body .ai-banner .ab-title { font-size: 16px; font-weight: 700; }
body .ai-banner .ab-sub { font-size: 13px; }
body .ai-banner .btn, body .toolbar .btn, body .page-title-row .btn { height: 34px; font-size: 13px; }
body .btn { font-weight: 600; }
body .filter-tab { font-weight: 600; }
body .filter-tab.lg { height: 34px; padding: 0 14px; font-size: 13px; }
body .toolbar .control.search { height: 34px; width: 300px; }
body .toolbar .control.search, body .toolbar .control.search input { font-size: 13px; }
body .badge { font-weight: 600; }
body .table.lg th { font-size: 13px; font-weight: 700; padding: 12px 16px; }
body .table.lg td { font-size: 13px; padding: 12px 16px; }
body .table.lg .badge { height: 26px; font-size: 12px; }
body .table.lg .btn { height: 34px; font-size: 13px; }
body .table.lg .user .avatar { width: 26px; height: 26px; font-size: 10px; }
body .table.lg .user .user-name { font-size: 13px; font-weight: 500; }
body .doc-cell .doc-ic { width: 24px; height: 24px; margin-top: 4px; }
body .doc-cell .dc-t { font-size: 14px; font-weight: 600; }
body .doc-cell .dc-d { font-size: 12px; }
body .link-more { font-size: 12px; font-weight: 600; }
body .empty-title { font-size: 16px; font-weight: 700; }
body .empty-sub { font-size: 13px; }
body .ai-run .ai-step { font-size: 13px; }
body .pagination { font-size: 12px; }
body .topbar .u-name { font-weight: 600; }