/* =====================================================================
   NEXUS · §4.9 Reporting Compliance
   ===================================================================== */

body.nx-compliance { background: linear-gradient(180deg, var(--nx-ink-950), var(--nx-ink-900)); color: #FFF; min-height: 100vh; margin: 0; }
.cmp-shell { max-width: 1440px; margin: 0 auto; padding: 20px; }

.cmp-hero {
  padding: 22px 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--nx-teal-950), var(--nx-ink-900));
  border: 1px solid rgba(6, 182, 212, 0.25);
  margin-bottom: 16px;
}
.cmp-hero .kicker { font-family: var(--font-mono); font-size: 11px; color: var(--nx-teal-300); letter-spacing: 0.14em; font-weight: var(--fw-black); }
.cmp-hero h1 { font-size: 28px; font-weight: var(--fw-black); letter-spacing: -0.02em; margin: 4px 0 4px; }
.cmp-hero .lead { color: rgba(255,255,255,0.75); font-size: 14px; max-width: 780px; }

/* KPIs */
.cmp-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
@media (max-width: 900px) { .cmp-kpis { grid-template-columns: repeat(2, 1fr); } }
.cmp-kpi {
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  border-top: 3px solid var(--nx-teal-500);
}
.cmp-kpi.ok    { border-top-color: #10B981; }
.cmp-kpi.warn  { border-top-color: var(--nx-amber-500); }
.cmp-kpi.alert { border-top-color: #EF4444; }
.cmp-kpi .lbl { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.55); letter-spacing: 0.12em; font-weight: var(--fw-black); text-transform: uppercase; }
.cmp-kpi .val { font-family: var(--font-mono); font-size: 22px; font-weight: var(--fw-black); margin-top: 4px; }
.cmp-kpi .d { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 3px; }

.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .cmp-grid { grid-template-columns: 1fr; } }

.cmp-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px 20px;
}
.cmp-card h3 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.6); font-weight: var(--fw-black);
  text-transform: uppercase; margin: 0 0 12px;
}

/* Region compliance table */
.rgn-row {
  display: grid;
  grid-template-columns: 130px 1fr 60px 80px;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  margin-bottom: 6px;
  border-left: 3px solid transparent;
}
.rgn-row.hi { border-left-color: #10B981; }
.rgn-row.md { border-left-color: var(--nx-amber-500); }
.rgn-row.lo { border-left-color: #EF4444; }
.rgn-row .n { font-size: 13px; color: #FFF; font-weight: var(--fw-bold); }
.rgn-row .bar-wrap { }
.rgn-row .bar { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.rgn-row .bar .fill { height: 100%; border-radius: 4px; }
.rgn-row.hi .bar .fill { background: linear-gradient(90deg, #10B981, #6EE7B7); }
.rgn-row.md .bar .fill { background: linear-gradient(90deg, var(--nx-amber-500), var(--nx-amber-400)); }
.rgn-row.lo .bar .fill { background: linear-gradient(90deg, #EF4444, #FCA5A5); }
.rgn-row .pct { font-family: var(--font-mono); font-size: 14px; color: #FFF; font-weight: var(--fw-black); text-align: right; }
.rgn-row .drill {
  padding: 4px 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-black);
  letter-spacing: 0.05em;
  cursor: pointer;
}
.rgn-row .drill:hover { background: rgba(255,255,255,0.14); color: #FFF; }

/* Officer table */
.off-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.off-tbl th {
  padding: 8px 10px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.off-tbl td {
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
}
.off-tbl tr:hover td { background: rgba(255,255,255,0.03); }
.off-tbl .who .name { font-weight: var(--fw-bold); color: #FFF; }
.off-tbl .who .role { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.5); }
.off-tbl .num { text-align: right; font-family: var(--font-mono); font-weight: var(--fw-bold); }
.off-tbl .rate .pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-black);
  letter-spacing: 0.05em;
}
.off-tbl .rate .pill.hi { background: rgba(16, 185, 129, 0.16); color: #6EE7B7; }
.off-tbl .rate .pill.md { background: rgba(251, 191, 36, 0.16); color: var(--nx-amber-400); }
.off-tbl .rate .pill.lo { background: rgba(239, 68, 68, 0.18); color: #FCA5A5; }

/* Late / missing feed */
.late-list { display: flex; flex-direction: column; gap: 8px; }
.late-item {
  padding: 12px 14px;
  background: rgba(239, 68, 68, 0.05);
  border-left: 3px solid #EF4444;
  border-radius: 8px;
}
.late-item.miss { background: rgba(148, 163, 184, 0.05); border-left-color: #64748B; }
.late-item .head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.late-item .code { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; font-weight: var(--fw-black); }
.late-item .stat {
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
}
.late-item.miss .stat { background: rgba(148, 163, 184, 0.14); color: rgba(255,255,255,0.7); }
.late-item:not(.miss) .stat { background: rgba(239, 68, 68, 0.18); color: #FCA5A5; }
.late-item .who { font-size: 13px; color: #FFF; font-weight: var(--fw-bold); margin-top: 4px; }
.late-item .m { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 4px; }