/* =====================================================================
   TGILP MIS — styles.css
   Design tokens, font faces, base typography and the application shell.
   Every other stylesheet consumes the tokens defined here.
   ===================================================================== */

/* ---------- Fonts (bundled locally, works offline) ---------- */
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/public-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/public-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../assets/fonts/public-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/public-sans-latin-700-normal.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  /* Brand palette (fixed by brief) */
  --c-navy: #17365D;
  --c-navy-900: #102849;
  --c-navy-700: #1E4573;
  --c-blue: #245B8F;
  --c-teal: #0F766E;
  --c-gold: #D4A72C;
  --c-success: #218739;
  --c-warning: #D97706;
  --c-critical: #C0392B;

  /* Surfaces & text */
  --c-bg: #F4F7FB;
  --c-surface: #FFFFFF;
  --c-surface-2: #F8FAFD;
  --c-text: #1F2937;
  --c-text-2: #64748B;
  --c-text-3: #94A3B8;
  --c-border: #E2E8F0;
  --c-border-strong: #CBD5E1;
  --c-ink: #17365D;            /* headings and emphasised text */
  --c-hover: #FAFCFF;          /* row and tile hover */
  /* Panels */
  --c-panel-bg: #FBFCFE; --c-panel-head: #EAF0F8; --c-panel-border: #C4D1E1;
  /* Report tables */
  --c-th-bg: #1E3F66;  --c-th-hover: #275083;  --c-th-text: #FFFFFF;
  --c-band: #F2F6FB;   --c-row-hover: #E3EEF9; --c-row-line: #E4EAF2; --c-tfoot: #E7EEF7;
  --c-sidebar: #17365D;        /* sidebar surface */
  --c-on-tint-gold: #7A5A0B;
  --c-on-tint-warning: #B45F06;

  /* Chart palette (categorical, brand family) */
  --chart-1: #17365D; --chart-2: #0F766E; --chart-3: #D4A72C; --chart-4: #245B8F;
  --chart-5: #5FB3A8; --chart-6: #8A6E2F; --chart-7: #94A3B8;
  --chart-grid: #EDF1F6;
  --chart-tooltip: #102849;

  /* Tints */
  --t-navy: #E8EEF6;
  --t-blue: #E6EFF8;
  --t-teal: #E3F3F1;
  --t-gold: #FBF4E0;
  --t-success: #E5F3E8;
  --t-warning: #FDF0E1;
  --t-critical: #F9E6E4;

  /* Heat scale (teal) used in matrices */
  --heat-1: #F1F8F7;
  --heat-2: #D3ECE8;
  --heat-3: #A6D7D0;
  --heat-4: #5FB3A8;
  --heat-5: #0F766E;

  /* Type */
  --font-sans: 'Public Sans', Inter, Aptos, 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-display: 1.625rem;   /* 26px page title */
  --fs-h2: 1.0625rem;       /* 17px panel title */
  --fs-h3: 0.9375rem;       /* 15px sub-section */
  --fs-body: 0.875rem;      /* 14px */
  --fs-small: 0.8125rem;    /* 13px */
  --fs-xs: 0.75rem;         /* 12px */
  --fs-kpi: 1.625rem;       /* 26px KPI value */

  /* Space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;

  /* Shape & depth: radius is hierarchical, not uniform */
  --r-panel: 10px;
  --r-control: 7px;
  --r-chip: 5px;
  --r-pill: 999px;
  --shadow-panel: 0 1px 2px rgba(16, 40, 73, 0.06), 0 1px 1px rgba(16, 40, 73, 0.03);
  --shadow-raised: 0 10px 30px rgba(16, 40, 73, 0.14);
  --focus-ring: 0 0 0 3px rgba(36, 91, 143, 0.35);

  /* Shell */
  --sidebar-w: 272px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 56px;

  /* Bootstrap bridge */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--c-text);
  --bs-body-bg: var(--c-bg);
  --bs-border-color: var(--c-border);
  --bs-primary: var(--c-navy);
  --bs-primary-rgb: 23, 54, 93;
  --bs-link-color: var(--c-blue);
  --bs-link-color-rgb: 36, 91, 143;
  --bs-link-hover-color: var(--c-navy);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
h1, h2, h3, h4 { color: var(--c-ink); margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-display); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; }
p { margin: 0; }
a { color: var(--c-blue); text-decoration: none; }
a:hover { color: var(--c-ink); text-decoration: underline; }
button { font-family: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-control); }
[data-lucide], svg.lucide { width: 18px; height: 18px; stroke-width: 1.9; flex-shrink: 0; }

.num { font-variant-numeric: tabular-nums; }
.text-2 { color: var(--c-text-2); }
.text-3 { color: var(--c-text-3); }
.text-critical { color: var(--c-critical); }
.text-warning-strong { color: var(--c-warning); }
.text-success-strong { color: var(--c-success); }
.visually-hidden-focusable:focus { position: fixed; top: 8px; left: 8px; z-index: 2000; background: var(--c-surface); padding: 8px 12px; }

/* ---------- Application shell ---------- */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  transition: grid-template-columns 0.2s ease;
}
.app.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }

.app-sidebar {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--c-sidebar);
  color: #DCE6F2;
  z-index: 1040;
}
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-content {
  flex: 1;
  padding: var(--s-3) var(--s-5) var(--s-8);
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
}
.kpi-section { margin-top: var(--s-3); }
.section { margin-top: var(--s-5); scroll-margin-top: calc(var(--topbar-h) + 16px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.section:first-child { margin-top: 0; }
.grid-gap { --bs-gutter-x: var(--s-5); --bs-gutter-y: var(--s-5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}