/**
 * ============================================================
 * INGENIOUS POWER ENGINEERING — DESIGN SYSTEM
 * Version 1.0  |  March 2026
 * ============================================================
 *
 * USAGE
 * -----
 * Import this file once at the root of any web application:
 *   <link rel="stylesheet" href="ingenious-design-system.css">
 *   or: @import './ingenious-design-system.css';
 *
 * For Word documents (DOCX via docx.js / shared.js):
 *   - Body/paragraph font:  Calibri, size 22 (11pt)
 *   - Heading 1:            Calibri Bold, size 32 (16pt), colour #000000
 *   - Heading 2:            Calibri Bold, size 28 (14pt), colour #1B3A5C, teal underline
 *   - Heading 3:            Calibri Bold, size 24 (12pt), colour #2E5984
 *   - Heading 4:            Calibri Bold, size 22 (11pt), colour #2E74B5
 *   - Footer / caption:     Calibri, size 18 (9pt), colour #666666
 *
 * For SVG / process maps (fontFamily string):
 *   fontFamily: "Calibri, Segoe UI, sans-serif"
 *
 * LOGO RULES (apply everywhere without exception)
 * -----------------------------------------------
 *   Cover / first page:     horizontal logo, max-height 60px, dark on light
 *   Subsequent pages:       stacked logo,    max-height 40px, dark on light
 *   Dark background:        white variant OR filter: brightness(0) invert(1)
 *   Never use stacked logo on a cover page.
 *   Never exceed the max-height sizes above.
 *
 * FILES
 *   horizontal__black.png  — cover pages, light backgrounds
 *   horizontal__white.png  — cover pages, dark backgrounds
 *   stacked_small__black.png — headers, light backgrounds
 *   stacked_small__white.png — headers, dark backgrounds
 * ============================================================
 */

/* ── 1. DESIGN TOKENS ──────────────────────────────────────── */
:root {

  /* Brand palette */
  --ing-navy:        #1B3A5C;   /* Primary brand — page titles, nav bg, heading H2 */
  --ing-mid-navy:    #2E5984;   /* Secondary brand — H3, sidebar items active */
  --ing-blue:        #2E74B5;   /* Accent blue — H4, links, interactive elements */
  --ing-teal:        #1CB3C2;   /* Highlight — horizontal rules, badges, progress bars,
                                   active states, borders on focused inputs */
  --ing-grey:        #666666;   /* Body text secondary, captions, footer text */
  --ing-light-grey:  #F4F6F8;   /* Page background, table row zebra */
  --ing-table-hdr:   #D9D9D9;   /* Table header fill */
  --ing-white:       #FFFFFF;

  /* Semantic status colours */
  --ing-green:       #27AE60;   /* RAG green / success / complete */
  --ing-amber:       #F39C12;   /* RAG amber / warning / in-progress */
  --ing-red:         #E74C3C;   /* RAG red / error / overdue */
  --ing-purple:      #8E44AD;   /* Peer review / secondary status */

  /* Background tints (status + surface) */
  --ing-green-tint:  #EAF7EF;
  --ing-amber-tint:  #FEF9EC;
  --ing-red-tint:    #FDEDEB;
  --ing-blue-tint:   #EAF2FB;
  --ing-teal-tint:   #E8F8FA;
  --ing-purple-tint: #F5EEF8;

  /* Dark surface (login page, banners, demo overlay) */
  --ing-dark-bg:     #0F1B2D;
  --ing-card-bg:     #FAFBFC;

  /* Border */
  --ing-border:      #E2E8F0;
  --ing-border-mid:  #CBD5E0;

  /* Typography */
  --ing-font:        'Calibri', 'Segoe UI', Arial, sans-serif;

  /* Font sizes (rem, base 16px) */
  --ing-text-xs:     0.75rem;   /* 12px — captions, footnotes */
  --ing-text-sm:     0.8125rem; /* 13px — labels, badges */
  --ing-text-base:   0.875rem;  /* 14px — body / table cells */
  --ing-text-md:     1rem;      /* 16px — sub-headings */
  --ing-text-lg:     1.125rem;  /* 18px — section headings */
  --ing-text-xl:     1.25rem;   /* 20px — page headings */
  --ing-text-2xl:    1.5rem;    /* 24px — dashboard KPI numbers */
  --ing-text-3xl:    1.875rem;  /* 30px — hero / cover titles */

  /* Spacing scale */
  --ing-space-1:     4px;
  --ing-space-2:     8px;
  --ing-space-3:     12px;
  --ing-space-4:     16px;
  --ing-space-5:     20px;
  --ing-space-6:     24px;
  --ing-space-8:     32px;
  --ing-space-10:    40px;
  --ing-space-12:    48px;

  /* Radii */
  --ing-radius-sm:   4px;
  --ing-radius-md:   6px;
  --ing-radius-lg:   10px;
  --ing-radius-xl:   16px;
  --ing-radius-full: 9999px;

  /* Shadows */
  --ing-shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --ing-shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --ing-shadow-lg:   0 10px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);

  /* Transitions */
  --ing-transition:  all 0.18s ease;
}


/* ── 2. RESET & BASE ───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ing-font);
  font-size: var(--ing-text-base);
  color: #1A202C;
  background: var(--ing-light-grey);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ing-blue);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: var(--ing-navy);
}


/* ── 3. TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ing-font);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ing-navy);
}

h1 { font-size: var(--ing-text-3xl); color: #000000; }
h2 {
  font-size: var(--ing-text-xl);
  color: var(--ing-navy);
  padding-bottom: var(--ing-space-2);
  border-bottom: 2px solid var(--ing-teal);
  margin-bottom: var(--ing-space-4);
}
h3 { font-size: var(--ing-text-lg); color: var(--ing-mid-navy); }
h4 { font-size: var(--ing-text-md); color: var(--ing-blue); }
h5 { font-size: var(--ing-text-base); color: var(--ing-grey); text-transform: uppercase; letter-spacing: 0.06em; }
h6 { font-size: var(--ing-text-sm); color: var(--ing-grey); }

p { margin-bottom: var(--ing-space-4); }
p:last-child { margin-bottom: 0; }

small, .ing-caption {
  font-size: var(--ing-text-xs);
  color: var(--ing-grey);
}


/* ── 4. LAYOUT ─────────────────────────────────────────────── */

/* Page wrapper — use as outermost container */
.ing-page {
  display: flex;
  min-height: 100vh;
  background: var(--ing-light-grey);
}

/* Sidebar */
.ing-sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--ing-navy);
  color: var(--ing-white);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: var(--ing-space-6) 0;
}

.ing-sidebar-logo {
  padding: 0 var(--ing-space-6) var(--ing-space-6);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: var(--ing-space-4);
}

/* Use horizontal__white.png here — dark sidebar background */
.ing-sidebar-logo img {
  max-height: 40px;
  width: auto;
  display: block;
}

.ing-sidebar-nav {
  flex: 1;
  padding: 0 var(--ing-space-3);
}

.ing-sidebar-nav a,
.ing-sidebar-nav button {
  display: flex;
  align-items: center;
  gap: var(--ing-space-3);
  width: 100%;
  padding: var(--ing-space-2) var(--ing-space-3);
  border-radius: var(--ing-radius-md);
  color: rgba(255,255,255,0.7);
  font-size: var(--ing-text-sm);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: var(--ing-transition);
  text-decoration: none;
}
.ing-sidebar-nav a:hover,
.ing-sidebar-nav button:hover {
  color: var(--ing-white);
  background: rgba(255,255,255,0.08);
}
.ing-sidebar-nav a.active,
.ing-sidebar-nav button.active {
  color: var(--ing-white);
  background: var(--ing-teal);
  font-weight: 600;
}

/* Main content area */
.ing-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Top bar */
.ing-topbar {
  height: 56px;
  background: var(--ing-white);
  border-bottom: 1px solid var(--ing-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ing-space-8);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.ing-topbar-title {
  font-size: var(--ing-text-md);
  font-weight: 700;
  color: var(--ing-navy);
}

/* Content padding */
.ing-content {
  padding: var(--ing-space-8);
  flex: 1;
}

/* Page header block */
.ing-page-header {
  margin-bottom: var(--ing-space-8);
}
.ing-page-header h1 {
  font-size: var(--ing-text-xl);
  color: var(--ing-navy);
  margin-bottom: var(--ing-space-1);
}
.ing-page-header p {
  color: var(--ing-grey);
  font-size: var(--ing-text-sm);
  margin: 0;
}


/* ── 5. CARDS & PANELS ─────────────────────────────────────── */
.ing-card {
  background: var(--ing-white);
  border-radius: var(--ing-radius-lg);
  border: 1px solid var(--ing-border);
  box-shadow: var(--ing-shadow-sm);
  padding: var(--ing-space-6);
}

.ing-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ing-space-5);
  padding-bottom: var(--ing-space-4);
  border-bottom: 1px solid var(--ing-border);
}

.ing-card-title {
  font-size: var(--ing-text-md);
  font-weight: 700;
  color: var(--ing-navy);
}

/* KPI / stat card */
.ing-kpi-card {
  background: var(--ing-white);
  border-radius: var(--ing-radius-lg);
  border: 1px solid var(--ing-border);
  box-shadow: var(--ing-shadow-sm);
  padding: var(--ing-space-5) var(--ing-space-6);
  border-top: 3px solid var(--ing-teal);
}
.ing-kpi-card .ing-kpi-label {
  font-size: var(--ing-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ing-grey);
  margin-bottom: var(--ing-space-2);
}
.ing-kpi-card .ing-kpi-value {
  font-size: var(--ing-text-2xl);
  font-weight: 700;
  color: var(--ing-navy);
  line-height: 1;
}
.ing-kpi-card .ing-kpi-sub {
  font-size: var(--ing-text-xs);
  color: var(--ing-grey);
  margin-top: var(--ing-space-1);
}

/* Grid helpers */
.ing-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ing-space-6); }
.ing-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ing-space-6); }
.ing-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ing-space-5); }

@media (max-width: 1100px) { .ing-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px)  { .ing-grid-3, .ing-grid-4 { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .ing-grid-2 { grid-template-columns: 1fr; } }


/* ── 6. TABLES ─────────────────────────────────────────────── */
.ing-table-wrapper {
  overflow-x: auto;
  border-radius: var(--ing-radius-lg);
  border: 1px solid var(--ing-border);
}

.ing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ing-text-sm);
  background: var(--ing-white);
}

.ing-table thead th {
  background: var(--ing-table-hdr);
  color: var(--ing-navy);
  font-weight: 700;
  font-size: var(--ing-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--ing-space-3) var(--ing-space-4);
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid var(--ing-border-mid);
}

.ing-table tbody td {
  padding: var(--ing-space-3) var(--ing-space-4);
  border-bottom: 1px solid var(--ing-border);
  color: #2D3748;
  vertical-align: middle;
}

.ing-table tbody tr:last-child td { border-bottom: none; }
.ing-table tbody tr:hover td { background: var(--ing-teal-tint); }
.ing-table tbody tr:nth-child(even) td { background: var(--ing-light-grey); }
.ing-table tbody tr:nth-child(even):hover td { background: var(--ing-teal-tint); }


/* ── 7. BUTTONS ────────────────────────────────────────────── */
.ing-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ing-space-2);
  padding: var(--ing-space-2) var(--ing-space-5);
  border-radius: var(--ing-radius-md);
  font-family: var(--ing-font);
  font-size: var(--ing-text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--ing-transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.5;
}
.ing-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Primary */
.ing-btn-primary {
  background: var(--ing-teal);
  color: var(--ing-white);
  border-color: var(--ing-teal);
}
.ing-btn-primary:hover:not(:disabled) {
  background: #17a0af;
  border-color: #17a0af;
}

/* Secondary */
.ing-btn-secondary {
  background: var(--ing-white);
  color: var(--ing-navy);
  border-color: var(--ing-border-mid);
}
.ing-btn-secondary:hover:not(:disabled) {
  background: var(--ing-light-grey);
  border-color: var(--ing-teal);
}

/* Danger */
.ing-btn-danger {
  background: var(--ing-red);
  color: var(--ing-white);
  border-color: var(--ing-red);
}
.ing-btn-danger:hover:not(:disabled) { background: #c0392b; }

/* Ghost */
.ing-btn-ghost {
  background: transparent;
  color: var(--ing-blue);
  border-color: transparent;
}
.ing-btn-ghost:hover:not(:disabled) {
  background: var(--ing-blue-tint);
  text-decoration: none;
}

/* Sizes */
.ing-btn-sm { padding: 4px var(--ing-space-3); font-size: var(--ing-text-xs); }
.ing-btn-lg { padding: var(--ing-space-3) var(--ing-space-8); font-size: var(--ing-text-md); }


/* ── 8. FORM ELEMENTS ──────────────────────────────────────── */
.ing-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--ing-space-1);
  margin-bottom: var(--ing-space-4);
}

.ing-label {
  font-size: var(--ing-text-sm);
  font-weight: 600;
  color: var(--ing-navy);
}
.ing-label-required::after {
  content: ' *';
  color: var(--ing-red);
}

.ing-input,
.ing-select,
.ing-textarea {
  font-family: var(--ing-font);
  font-size: var(--ing-text-base);
  color: #1A202C;
  background: var(--ing-white);
  border: 1px solid var(--ing-border-mid);
  border-radius: var(--ing-radius-md);
  padding: var(--ing-space-2) var(--ing-space-3);
  width: 100%;
  transition: var(--ing-transition);
  outline: none;
}
.ing-input:focus,
.ing-select:focus,
.ing-textarea:focus {
  border-color: var(--ing-teal);
  box-shadow: 0 0 0 3px rgba(28,179,194,0.15);
}
.ing-input::placeholder { color: #A0AEC0; }
.ing-textarea { resize: vertical; min-height: 96px; }


/* ── 9. BADGES & STATUS INDICATORS ────────────────────────── */
.ing-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--ing-space-2);
  border-radius: var(--ing-radius-full);
  font-size: var(--ing-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ing-badge-green  { background: var(--ing-green-tint);  color: #1e7e48; }
.ing-badge-amber  { background: var(--ing-amber-tint);  color: #b07a08; }
.ing-badge-red    { background: var(--ing-red-tint);    color: #a93226; }
.ing-badge-blue   { background: var(--ing-blue-tint);   color: var(--ing-blue); }
.ing-badge-teal   { background: var(--ing-teal-tint);   color: #0e8a97; }
.ing-badge-purple { background: var(--ing-purple-tint); color: var(--ing-purple); }
.ing-badge-grey   { background: var(--ing-light-grey);  color: var(--ing-grey); }
.ing-badge-navy   { background: var(--ing-navy);        color: var(--ing-white); }

/* RAG dot */
.ing-rag-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ing-rag-dot-green  { background: var(--ing-green); }
.ing-rag-dot-amber  { background: var(--ing-amber); }
.ing-rag-dot-red    { background: var(--ing-red); }
.ing-rag-dot-grey   { background: var(--ing-grey); }


/* ── 10. ALERTS & BANNERS ──────────────────────────────────── */
.ing-alert {
  display: flex;
  gap: var(--ing-space-3);
  padding: var(--ing-space-4);
  border-radius: var(--ing-radius-md);
  font-size: var(--ing-text-sm);
  border-left: 4px solid transparent;
  margin-bottom: var(--ing-space-4);
}
.ing-alert-info    { background: var(--ing-blue-tint);  border-color: var(--ing-blue);  color: #1a4a7a; }
.ing-alert-success { background: var(--ing-green-tint); border-color: var(--ing-green); color: #1e5934; }
.ing-alert-warning { background: var(--ing-amber-tint); border-color: var(--ing-amber); color: #7a5308; }
.ing-alert-danger  { background: var(--ing-red-tint);   border-color: var(--ing-red);   color: #7b241c; }

/* Section banner (top of page) */
.ing-banner {
  background: var(--ing-navy);
  color: var(--ing-white);
  padding: var(--ing-space-4) var(--ing-space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ing-space-4);
}
.ing-banner-teal  { background: var(--ing-teal); }
.ing-banner-dark  { background: var(--ing-dark-bg); }
.ing-banner h2    { color: var(--ing-white); border: none; margin: 0; padding: 0; font-size: var(--ing-text-md); }
.ing-banner p     { margin: 0; opacity: 0.8; font-size: var(--ing-text-sm); }


/* ── 11. PIPELINE / STAGE STRIP ────────────────────────────── */
/* Horizontal pipeline bar used in package cards */
.ing-pipeline {
  display: flex;
  gap: 2px;
  height: 6px;
  border-radius: var(--ing-radius-full);
  overflow: hidden;
  background: var(--ing-border);
}
.ing-pipeline-segment {
  flex: 1;
  border-radius: 0;
  transition: var(--ing-transition);
}
.ing-pipeline-segment:first-child { border-radius: var(--ing-radius-full) 0 0 var(--ing-radius-full); }
.ing-pipeline-segment:last-child  { border-radius: 0 var(--ing-radius-full) var(--ing-radius-full) 0; }
.ing-pipeline-segment.complete    { background: var(--ing-green); }
.ing-pipeline-segment.active      { background: var(--ing-teal); }
.ing-pipeline-segment.pending     { background: var(--ing-border); }
.ing-pipeline-segment.overdue     { background: var(--ing-red); }


/* ── 12. MODAL ─────────────────────────────────────────────── */
.ing-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 45, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--ing-space-6);
}

.ing-modal {
  background: var(--ing-white);
  border-radius: var(--ing-radius-xl);
  box-shadow: var(--ing-shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ing-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ing-space-5) var(--ing-space-6);
  border-bottom: 1px solid var(--ing-border);
  flex-shrink: 0;
}
.ing-modal-title {
  font-size: var(--ing-text-md);
  font-weight: 700;
  color: var(--ing-navy);
}
.ing-modal-body {
  padding: var(--ing-space-6);
  overflow-y: auto;
  flex: 1;
}
.ing-modal-footer {
  padding: var(--ing-space-4) var(--ing-space-6);
  border-top: 1px solid var(--ing-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--ing-space-3);
  flex-shrink: 0;
}


/* ── 13. LOGIN PAGE ────────────────────────────────────────── */
/* Dark full-screen login — matches Design Tracker LoginPage */
.ing-login-page {
  min-height: 100vh;
  background: var(--ing-dark-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ing-space-6);
}

.ing-login-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--ing-radius-xl);
  padding: var(--ing-space-10) var(--ing-space-8);
  width: 100%;
  max-width: 420px;
  backdrop-filter: blur(12px);
}

.ing-login-logo {
  display: block;
  max-height: 60px;   /* horizontal logo, white variant */
  width: auto;
  margin: 0 auto var(--ing-space-8);
}

.ing-login-card .ing-input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: var(--ing-white);
}
.ing-login-card .ing-input:focus {
  border-color: var(--ing-teal);
  box-shadow: 0 0 0 3px rgba(28,179,194,0.20);
}
.ing-login-card .ing-label {
  color: rgba(255,255,255,0.75);
}


/* ── 14. HTML REPORT STYLES ────────────────────────────────── */
/* Use .ing-report as body class for Puppeteer-generated PDFs  */
.ing-report {
  font-family: var(--ing-font);
  font-size: 11pt;
  color: #1A202C;
  background: var(--ing-white);
  max-width: 210mm;
  margin: 0 auto;
  padding: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.ing-report-cover {
  min-height: 297mm;
  background: var(--ing-white);
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  page-break-after: always;
}

/* Cover: horizontal logo (dark, max 60px) */
.ing-report-cover-logo {
  max-height: 60px;
  width: auto;
  margin-bottom: 40px;
}

.ing-report-cover-title {
  font-size: 36pt;
  font-weight: 700;
  color: var(--ing-navy);
  margin-top: auto;
  line-height: 1.2;
}

.ing-report-cover-rule {
  height: 3px;
  background: var(--ing-teal);
  margin: 20px 0 16px;
}

.ing-report-cover-subtitle {
  font-size: 16pt;
  font-weight: 600;
  color: #2D3748;
}

.ing-report-cover-meta {
  font-size: 10pt;
  color: var(--ing-grey);
  margin-top: 8px;
}

.ing-report-cover-footer {
  margin-top: auto;
  font-size: 9pt;
  color: var(--ing-grey);
  font-style: italic;
  border-top: 1px solid var(--ing-border);
  padding-top: 12px;
}

/* Report pages */
.ing-report-page {
  padding: 30px 50px;
  page-break-after: always;
}

/* Subsequent pages: stacked logo (dark, max 40px) */
.ing-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ing-teal);
  margin-bottom: 24px;
}
.ing-report-header img {
  max-height: 40px;
  width: auto;
}
.ing-report-header-meta {
  font-size: 9pt;
  color: var(--ing-grey);
  text-align: right;
}

.ing-report footer,
.ing-report .ing-report-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 2px solid var(--ing-teal);
  font-size: 9pt;
  color: var(--ing-grey);
  margin-top: 24px;
}

/* Report tables */
.ing-report table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10pt;
  margin-bottom: 20px;
}
.ing-report table thead th {
  background: var(--ing-table-hdr);
  font-weight: 700;
  padding: 7px 10px;
  text-align: left;
  border: 1px solid #CCCCCC;
  color: var(--ing-navy);
}
.ing-report table tbody td {
  padding: 6px 10px;
  border: 1px solid #CCCCCC;
  vertical-align: top;
}
.ing-report table tbody tr:nth-child(even) td {
  background: var(--ing-light-grey);
}

@media print {
  .ing-report { max-width: 100%; }
  .ing-report-page { page-break-after: always; }
  .ing-report-cover { page-break-after: always; }
}


/* ── 15. UTILITY CLASSES ───────────────────────────────────── */

/* Text colours */
.ing-text-navy    { color: var(--ing-navy); }
.ing-text-teal    { color: var(--ing-teal); }
.ing-text-grey    { color: var(--ing-grey); }
.ing-text-green   { color: var(--ing-green); }
.ing-text-amber   { color: var(--ing-amber); }
.ing-text-red     { color: var(--ing-red); }
.ing-text-white   { color: var(--ing-white); }

/* Background colours */
.ing-bg-navy      { background: var(--ing-navy); }
.ing-bg-teal      { background: var(--ing-teal); }
.ing-bg-dark      { background: var(--ing-dark-bg); }
.ing-bg-light     { background: var(--ing-light-grey); }
.ing-bg-white     { background: var(--ing-white); }
.ing-bg-green     { background: var(--ing-green-tint); }
.ing-bg-amber     { background: var(--ing-amber-tint); }
.ing-bg-red       { background: var(--ing-red-tint); }

/* Teal rule / divider */
.ing-rule {
  border: none;
  border-top: 2px solid var(--ing-teal);
  margin: var(--ing-space-6) 0;
}

/* Flex helpers */
.ing-flex         { display: flex; }
.ing-flex-center  { display: flex; align-items: center; }
.ing-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ing-gap-2        { gap: var(--ing-space-2); }
.ing-gap-3        { gap: var(--ing-space-3); }
.ing-gap-4        { gap: var(--ing-space-4); }

/* Spacing */
.ing-mt-4  { margin-top: var(--ing-space-4); }
.ing-mb-4  { margin-bottom: var(--ing-space-4); }
.ing-mb-6  { margin-bottom: var(--ing-space-6); }
.ing-mb-8  { margin-bottom: var(--ing-space-8); }

/* Truncate */
.ing-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visually hidden (screen reader only) */
.ing-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}