/* ============================================================
   LLK Enterprise — Navy & Gold design tokens + base elements.
   Source of truth: design/mockups/compliance-officer-dashboard-
   mockup-B-topnav.html (owner-approved). The :root block below is
   copied verbatim from that mockup; the element/utility classes
   are the mockup's card/table/pill/button styles extracted into
   reusable form so every converted page shares one stylesheet.
   Pairs with shell.css (masthead + top-nav) and js/shell.js.
   ============================================================ */
:root{
  --ink:#0A0F1E; --panel:#111827; --panel-2:#0d1424;
  --line:#1e293b; --line-soft:#172033;
  --gold:#D4A94E; --gold-soft:rgba(212,169,78,0.12); --gold-line:rgba(212,169,78,0.32);
  /* The darker stop of the gold CTA gradient. It was already the literal
     #b8903a in .btn.primary below and in the login page's .btn-auth; naming
     it keeps the auth pages from re-inventing a second value. */
  --gold-hover:#b8903a;
  /* --faint is the quietest text tone. It was #64748b, which measured
     3.73:1 on --panel and 3.41:1 on the login brand panel — below the
     4.5:1 AA floor for the 11.5–13px body text that uses it (.stage-sub,
     .kpi .foot, .crumbs, .card-head .sub, .menu .mt span, table headers).
     #7f8ea5 measures 5.33:1 on --panel and 4.88:1 on the lightest
     background in the system (#132039), while staying a clear step below
     --muted (6.92:1) so the three-tone hierarchy survives. */
  --txt:#e5e7eb; --txt-2:#cbd5e1; --muted:#94a3b8; --faint:#7f8ea5;
  --green:#34d399; --green-bg:rgba(52,211,153,0.12); --green-line:rgba(52,211,153,0.30);
  --amber:#fbbf24; --amber-bg:rgba(251,191,36,0.12); --amber-line:rgba(251,191,36,0.30);
  --red:#f87171; --red-bg:rgba(248,113,113,0.12); --red-line:rgba(248,113,113,0.30);
  --navy:#14213d;
  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6);
}

/* ---------- Accessibility (common.js injects these elements on every
   page; pages on the new shell don't load styles.css, so the rules
   live here too) ---------- */
.skip-nav{position:absolute;top:-100px;left:16px;background:var(--gold);color:#0A0F1E;padding:10px 20px;font-weight:700;font-size:14px;border-radius:0 0 8px 8px;z-index:10000;transition:top .2s}
.skip-nav:focus{top:0;outline:3px solid #fff;outline-offset:2px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Focus rings use SOLID --gold, never --gold-line: the 0.32-alpha line
   composites to ~1.85:1 against the masthead, failing WCAG 2.2 SC 1.4.11
   (non-text contrast, 3:1). Solid #D4A94E measures 8.10:1 on --panel,
   8.59:1 on the masthead and 8.71:1 on --ink. */
.llk-app button:focus-visible,.llk-app a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.llk-app input:focus-visible,.llk-app select:focus-visible,.llk-app textarea:focus-visible{outline:2px solid var(--gold);outline-offset:0}

/* The UA sheet's [hidden]{display:none} loses to any author `display`
   rule (e.g. .icon-btn .badge-num{display:grid}), which painted empty
   badge dots permanently. Restore the attribute as authoritative. */
[hidden]{display:none!important}

/* ---------- Base ---------- */
.llk-app *{box-sizing:border-box}
body.llk-app{
  margin:0;padding:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--ink);color:var(--txt);font-size:15px;line-height:1.55;
  /* overflow-x:hidden is a SAFETY NET for stray wide content, never a fix.
     It used to mask a real 461px masthead overflow (no scrollbar, and
     window.scrollTo could not reach the off-screen account menu), so the
     shell's responsive rules must hold with this line removed — the
     tests/shell-masthead.spec.js probes lift it before measuring. */
  -webkit-font-smoothing:antialiased;letter-spacing:-0.006em;overflow-x:hidden;
}
.llk-app .num{font-variant-numeric:tabular-nums}
.llk-app a{color:inherit}

/* ---------- Content column ---------- */
.llk-app .content{padding:28px 32px 56px;max-width:1400px;margin:0 auto}
.llk-app .page-head{margin-bottom:26px}
.llk-app .page-head .crumbs{font-size:12px;color:var(--faint);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.llk-app .page-head .crumbs svg{width:12px;height:12px}
.llk-app .page-head h1{margin:0;font-size:27px;font-weight:700;letter-spacing:-0.02em;color:#fff}

/* ---------- KPI stat cards ---------- */
.llk-app .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.llk-app .kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.llk-app .kpi .lbl{font-size:11px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;color:var(--muted)}
.llk-app .kpi .val{font-size:34px;font-weight:800;line-height:1;margin-top:12px;color:#fff;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.llk-app .kpi .foot{margin-top:11px;font-size:12px;color:var(--faint);display:flex;align-items:center;gap:6px}
.llk-app .kpi.accent .val{color:var(--gold)}
.llk-app .kpi.accent::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
/* live-state tints toggled by data-loading JS (classList.add('warn'|'ok')) */
.llk-app .kpi.warn::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber)}
.llk-app .kpi.ok::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)}
.llk-app .kpi a{display:inline-block;margin-top:10px;color:var(--gold);text-decoration:none;font-size:12px;font-weight:600}
.llk-app .kpi a:hover{text-decoration:underline}

/* ---------- Section labels ---------- */
.llk-app .section-label{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.llk-app .section-label h2{margin:0;font-size:13px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:var(--txt-2)}
.llk-app .section-label .tick{width:3px;height:15px;background:var(--gold);border-radius:2px}
.llk-app .section-label .pill{margin-left:auto;font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line);padding:3px 10px;border-radius:99px}

/* ---------- Cards ---------- */
.llk-app .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.llk-app .card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.llk-app .card-head h3{margin:0;font-size:15px;font-weight:650;color:var(--txt)}
.llk-app .card-head .sub{font-size:12px;color:var(--faint)}
.llk-app .card-head .right{margin-left:auto;display:flex;gap:8px}

/* ---------- Tables ---------- */
.llk-app .table-wrap{overflow-x:auto}
.llk-app .table-wrap table{width:100%;border-collapse:collapse;min-width:760px}
.llk-app .table-wrap thead th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:var(--faint);padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel-2)}
.llk-app .table-wrap tbody td{padding:14px 16px;border-bottom:1px solid var(--line-soft);font-size:13.5px;vertical-align:middle}
.llk-app .table-wrap tbody tr:last-child td{border-bottom:none}
.llk-app .table-wrap tbody tr:hover{background:#0f1728}
.llk-app .amt{font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}

/* ---------- Status pills ---------- */
.llk-app .pill-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;white-space:nowrap}
.llk-app .ps-pending{background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.llk-app .ps-exec{background:var(--green-bg);color:var(--green);border:1px solid var(--green-line)}
.llk-app .ps-review{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-line)}
.llk-app .ps-alert{background:var(--red-bg);color:var(--red);border:1px solid var(--red-line)}
.llk-app .pill-status .dot{width:6px;height:6px;border-radius:50%;display:inline-block}

/* ---------- Buttons ---------- */
.llk-app .btn{font-family:inherit;font-size:12.5px;font-weight:600;border-radius:9px;padding:7px 14px;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--txt-2);white-space:nowrap;transition:.13s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.llk-app .btn:hover{border-color:#2c3a55;color:#fff}
.llk-app .btn.primary{background:linear-gradient(135deg,var(--gold),var(--gold-hover));color:#0A0F1E;border-color:transparent;box-shadow:0 4px 12px -5px rgba(212,169,78,0.6)}
.llk-app .btn.sm{padding:6px 11px;font-size:12px}

/* ---------- Right rail ---------- */
.llk-app .work{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
/* Grid items default to min-width:auto, so a wide child (a .table-wrap table
   carrying min-width:760px) refuses to shrink and pushes the PAGE into
   horizontal scroll on a phone — invisible behind body{overflow-x:hidden},
   which is why it reads as "the layout is fine". Every dashboard with a table
   hits this; fix it once here rather than page by page. */
.llk-app .work > *{min-width:0}
.llk-app .rail{display:flex;flex-direction:column;gap:22px}
.llk-app .rail-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.llk-app .rail-card h3{margin:0 0 4px;font-size:14px;font-weight:650}

/* ---------- Notices ---------- */
.llk-app .notice{border-radius:12px;padding:14px 16px;border:1px solid;display:flex;gap:12px;align-items:flex-start}
.llk-app .notice.warn{background:var(--amber-bg);border-color:var(--amber-line)}
.llk-app .notice.warn .ic{color:var(--amber)}
.llk-app .notice.alert{background:var(--red-bg);border-color:var(--red-line)}
.llk-app .notice.alert .ic{color:var(--red)}
.llk-app .notice.gold{background:var(--gold-soft);border-color:var(--gold-line)}
.llk-app .notice.gold .ic{color:var(--gold)}
.llk-app .notice .ic{flex-shrink:0;margin-top:1px}
.llk-app .notice .ic svg{width:18px;height:18px}
.llk-app .notice b{display:block;font-size:13.5px;font-weight:650;color:var(--txt)}
.llk-app .notice p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .llk-app .work{grid-template-columns:1fr}
  .llk-app .kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .llk-app .content{padding:20px 16px 48px}
  .llk-app .kpis{grid-template-columns:1fr}
}