/* LIA Governance theme — the palette of lia-governance.com, applied to the app.
 *
 * Loaded last so it overrides variables.css without editing it: removing the
 * one <link> in index.html restores the original light theme exactly.
 *
 * It also declares --card, --muted, --ink, --line and --line-strong. Those are
 * used in 50-odd places across the pages but were never declared anywhere, so
 * every rule that referenced them was silently invalid and the element fell
 * back to whatever it inherited. Declaring them here makes those rules work for
 * the first time, which is why some panels change more than a recolour.
 */

:root {
  /* -- the institutional palette, verbatim from the public site -- */
  --bg: #0a1426;
  --paper: #101f3a;
  --slate: #c4d0e4;
  --slate-soft: #9aa9c6;
  --slate-faint: #67799c;
  /* --navy is a TEXT colour in ten places (.sec-title and friends) and a
     background in three. Text wins, so it is light here and the three
     backgrounds are pinned to the dark navy further down. */
  --navy: #cfe0f7;
  --navy-deep: #16284a;
  --navy-2: #2a4c85;
  --line: #223451;
  --line-strong: #33486e;
  --ink: #e9f0fb;
  --acc: #8fb4e8;

  /* -- the app's own names, mapped onto it -- */
  --white: #101f3a;          /* "white" here means the card surface */
  --card: #101f3a;
  --surf: #16284a;
  --tx: #e9f0fb;
  --tx2: #c4d0e4;
  --tx3: #9aa9c6;
  --tx4: #7f90b0;
  --muted: #9aa9c6;
  --bd: #223451;
  --bd2: #33486e;

  --blue: #8fb4e8;
  --blue2: #a8c6f0;
  --blue3: #1e3a68;
  --blue-lt: #16284a;
  --blue-dk: #cfe0f7;

  /* status colours lifted for a dark ground: the light-theme values go muddy */
  --green: #8cbe5a;
  --green-p: rgba(140, 190, 90, .14);
  --red: #e2795e;
  --red-p: rgba(226, 121, 94, .15);
  --amber: #e0a94a;
  --amber-p: rgba(224, 169, 74, .15);
  --orange: #e8893f;
  --orange-p: rgba(232, 137, 63, .15);
  --teal: #5bc8b0;
  --teal2: #45b39c;
  --teal-p: rgba(91, 200, 176, .14);
  --purple: #b48ae8;
  --purple-p: rgba(180, 138, 232, .15);

  --ai: #9d7ce8;
  --ai2: #8257e0;
  --ai-p: rgba(157, 124, 232, .16);
  --ai-lt: rgba(157, 124, 232, .08);
  --ai-glow: rgba(157, 124, 232, .32);
  --ai-border: rgba(157, 124, 232, .3);

  --sh: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
  --sh2: 0 6px 20px rgba(0, 0, 0, .45);
  --sh-ai: 0 4px 20px rgba(157, 124, 232, .25);
}

/* the three places that wanted navy as a ground, pinned back to the dark value */
.sb, .sb-footer { background: var(--navy-deep); }
.btn-navy { background: var(--navy-deep); color: var(--ink); }

/* the page ground, matching the site's radial wash */
body {
  background: radial-gradient(1100px 620px at 25% -8%, #142547 0%, var(--bg) 55%) fixed, var(--bg);
  color: var(--slate);
  font-family: 'Outfit', 'Sarabun', 'Segoe UI', sans-serif;
}

/* the main column sits on the ground, not on a light sheet */
.main, .content, .page-wrap { background: transparent; }

/* panels and cards take the paper colour and the site's hairline */
.section, .card, .panel, .kpi, .tbl-wrap, .modal, .ovl-card, .pcard {
  background: var(--card);
  border-color: var(--line);
}
.sec-hd, .tbl thead th, thead th { background: var(--surf); border-color: var(--line); }
table td, table th, .tbl td, .tbl th { border-color: var(--line); }
tbody tr:hover { background: rgba(143, 180, 232, .06); }

/* inputs: a dark field with a legible edge, not a white box on navy */
input, select, textarea, .fi {
  background: #0d1b33;
  color: var(--ink);
  border-color: var(--line-strong);
}
input::placeholder, textarea::placeholder { color: var(--slate-faint); }
input:focus, select:focus, textarea:focus, .fi:focus {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

/* the top bar and search sit on the ground */
.topbar, .tb, .searchbar { background: transparent; border-color: var(--line); }
.topbar .tb-title, .tb-title { color: var(--ink); }
.tb-sub { color: var(--slate-soft); }

/* buttons keep their meaning but read on a dark ground */
.btn { border-color: var(--line-strong); color: var(--ink); background: var(--surf); }
.btn:hover { border-color: var(--acc); }
.btn-blue { background: var(--navy-deep); border-color: var(--navy-2); color: var(--ink); }
.btn-blue:hover { background: var(--navy-2); }

/* charts are drawn as inline SVG with the light theme's axis colours baked in */
.section svg text, .sec-body svg text, .chart svg text { fill: var(--slate-soft); }
.section svg line, .sec-body svg line, .chart svg line { stroke: var(--line); }

/* a handful of pages paint a literal white ground; keep them on the paper */
[style*="background:#fff"], [style*="background: #fff"],
[style*="background:#FFF"], [style*="background: #FFF"],
[style*="background:white"], [style*="background: white"] {
  background: var(--card) !important;
}