/* RiskKit — shared styles. Safety-orange accent on near-black/white. */

:root {
  --bg:#0d0f12; --surface:#16191e; --surface2:#1d2127; --border:#2a2f37;
  --text:#e9ecef; --muted:#8a93a0; --accent:#e85d04; --accent-soft:rgba(232,93,4,.14);
  --risk-low:#2da44e; --risk-med:#c9a30a; --risk-high:#e8842c; --risk-crit:#d63a31;
  --ok:#2da44e; --warn:#c9a30a; --danger:#d63a31; --info:#3b82d6;
  --radius:10px;
}
/* Light palette. Dark (:root above) is the base. Applied when the user picks
   Light, OR in Auto/default (no explicit choice) when the device prefers light.
   data-theme is set by nav.js from localStorage('rk_theme'): auto | light | dark. */
:root[data-theme="light"] {
  --bg:#f4f5f7; --surface:#ffffff; --surface2:#eceef1; --border:#d9dde3;
  --text:#181b20; --muted:#5d6673; --accent:#cf5302; --accent-soft:rgba(207,83,2,.1);
  --risk-low:#1a7f37; --risk-med:#9a7b00; --risk-high:#bf5b13; --risk-crit:#c52f27;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg:#f4f5f7; --surface:#ffffff; --surface2:#eceef1; --border:#d9dde3;
    --text:#181b20; --muted:#5d6673; --accent:#cf5302; --accent-soft:rgba(207,83,2,.1);
    --risk-low:#1a7f37; --risk-med:#9a7b00; --risk-high:#bf5b13; --risk-crit:#c52f27;
  }
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); }
main { max-width:1180px; margin:0 auto; padding:24px 20px 64px; }
h1 { font-size:21px; font-weight:700; letter-spacing:-0.3px; }
h2 { font-size:16px; font-weight:650; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:20px; flex-wrap:wrap; }
.page-head .sub { color:var(--muted); font-size:13px; margin-top:2px; }

/* Cards */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; }
.card + .card { margin-top:16px; }
.card h2 { margin-bottom:12px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px;
  font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; border:1px solid var(--border);
  background:var(--surface); color:var(--text); text-decoration:none; transition:all .15s; }
.btn:hover { border-color:var(--muted); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.08); border-color:var(--accent); }
.btn-danger { color:var(--danger); }
.btn-danger:hover { border-color:var(--danger); }
.btn-ghost { border-color:transparent; background:transparent; color:var(--muted); }
.btn-ghost:hover { color:var(--text); background:var(--surface2); }
.btn-sm { padding:5px 10px; font-size:12px; }

/* Forms */
label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin:0 0 5px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number],
select, textarea {
  width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:9px 12px; font-size:14px; font-family:inherit; outline:none;
  transition:border .15s;
}
input:focus, select:focus, textarea:focus { border-color:var(--accent); }
textarea { resize:vertical; min-height:64px; }
.field { margin-bottom:14px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }

/* Chips (persons at risk, filters) */
.chip { display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); font-size:12.5px; cursor:pointer;
  user-select:none; transition:all .15s; color:var(--muted); }
.chip.on { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600; }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; }

/* Status badges */
.status-badge { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; padding:3px 9px; border-radius:5px; border:1px solid; }
.st-draft    { color:var(--muted);  border-color:var(--border); background:var(--surface2); }
.st-review   { color:var(--info);   border-color:var(--info);   background:rgba(59,130,214,.1); }
.st-approved { color:var(--ok);     border-color:var(--ok);     background:rgba(45,164,78,.1); }
.st-issued   { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.st-archived { color:var(--muted);  border-color:var(--border); background:transparent; opacity:.7; }

/* Risk score chips + matrix cells */
.score-chip { display:inline-grid; place-items:center; min-width:34px; height:26px; padding:0 8px;
  border-radius:6px; font-weight:800; font-size:13px; color:#fff; }
.risk-none { background:var(--surface2); color:var(--muted); font-weight:600; }
.risk-low  { background:var(--risk-low); }
.risk-med  { background:var(--risk-med); }
.risk-high { background:var(--risk-high); }
.risk-crit { background:var(--risk-crit); }
.ai-flag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.4px; padding:2px 7px;
  border-radius:4px; background:rgba(59,130,214,.12); color:var(--info); border:1px solid var(--info);
  text-transform:uppercase; }

/* Tables */
table.rk { width:100%; border-collapse:collapse; font-size:13.5px; }
table.rk th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.rk td { padding:10px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.rk tr:last-child td { border-bottom:none; }
table.rk tbody tr { cursor:pointer; }
table.rk tbody tr:hover { background:var(--surface2); }
table.rk tbody tr.no-link { cursor:default; }
table.rk tbody tr.no-link:hover { background:transparent; }

/* Stat tiles (dashboard) */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px;
  margin-bottom:18px; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; cursor:pointer; transition:border .15s; text-decoration:none; color:var(--text);
  display:block; }
.stat:hover { border-color:var(--muted); }
.stat .n { font-size:28px; font-weight:800; letter-spacing:-1px; line-height:1.15; }
.stat .l { font-size:12px; color:var(--muted); font-weight:600; }
.stat.amber .n { color:var(--risk-high); }
.stat.red .n { color:var(--risk-crit); }

/* Filter bar */
.filter-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:16px; }
.filter-bar .field { margin:0; min-width:140px; flex:0 1 auto; }
.filter-bar .grow { flex:1 1 180px; }

/* Modal */
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:400; display:none;
  align-items:flex-start; justify-content:center; padding:5vh 16px; overflow-y:auto; }
.modal-back.open { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:14px;
  width:100%; max-width:680px; padding:22px; }
.modal h2 { margin-bottom:14px; }
.modal .modal-close { float:right; }

/* Toasts */
#rk-toasts { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:600;
  display:flex; flex-direction:column; gap:8px; align-items:center; }
.rk-toast { background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:8px; padding:10px 18px; font-size:13.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:1; transition:opacity .3s; max-width:90vw; }
.rk-toast-error { border-left-color:var(--danger); }
.rk-toast-ok { border-left-color:var(--ok); }
.rk-toast.out { opacity:0; }

/* Empty state */
.empty { text-align:center; color:var(--muted); padding:42px 16px; font-size:13.5px; }

/* AI disclaimer strip */
.ai-note { font-size:12px; color:var(--muted); background:var(--surface2);
  border-radius:7px; padding:8px 12px; margin-top:10px; }

@media (max-width: 700px) {
  main { padding:16px 12px 56px; }
  .page-head { flex-direction:column; align-items:flex-start; }
}