:root{
  --bg:#000;
  --card:#0b0b0b;
  --text:#fff;
  --muted:#b7b7b7;
  --line:#232323;
  --accent:#8b5cf6;
  --ok:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.wrap{max-width:920px;margin:0 auto;padding:14px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 14px}
.brand-title{font-size:20px;font-weight:800;letter-spacing:.3px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.field{display:block;margin:10px 0}
.field span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
input,textarea,select{
  width:100%;
  background:#0f0f0f;
  color:var(--text);
  border:1px solid #333;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
}
textarea{resize:vertical}
select{background-color:#111 !important;color:#fff !important}
select option{background-color:#111;color:#fff}
input:focus,textarea:focus,select:focus{outline:none;border-color:#666}
.grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.grid{grid-template-columns:1fr 1fr}}
.btn{
  appearance:none;border:none;cursor:pointer;
  background:var(--accent);color:#fff;
  padding:10px 12px;border-radius:12px;
  font-weight:700;font-size:13px;
}
.btn.ghost{background:transparent;border:1px solid #333;color:#fff}
.btn.ok{background:var(--ok)}
.btn.bad{background:var(--bad)}
.btn.warn{background:var(--warn);color:#111}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.status{color:var(--muted);font-size:12px}
.foot{color:#666;font-size:11px;text-align:center;margin:14px 0 6px}
.hidden{display:none !important}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.tab{
  background:#0f0f0f;border:1px solid #2a2a2a;color:#ddd;
  border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800;cursor:pointer
}
.tab.active{border-color:var(--accent);color:#fff}

.list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.item{
  border:1px solid #2a2a2a;border-radius:14px;padding:12px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.item-title{font-weight:800}
.item-sub{color:var(--muted);font-size:12px;margin-top:4px}
.pill{font-size:11px;color:#ddd;border:1px solid #3a3a3a;border-radius:999px;padding:3px 8px;white-space:nowrap}
.section-title{font-weight:900;margin-top:2px}
.detail{border:1px solid #2a2a2a;border-radius:14px;padding:12px;margin-top:10px}
.kv{margin:6px 0;color:#ddd}
.kv b{color:#fff}
.review-box{margin-top:12px;border-top:1px solid #222;padding-top:12px}
.hint{font-size:11px;color:#777;margin-top:6px}
.who{color:#bbb;font-size:12px;margin-bottom:8px}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center;
  padding:16px; z-index:50;
}
.modal{
  width:100%; max-width:520px;
  background:#0b0b0b; border:1px solid #2a2a2a; border-radius:16px;
  padding:14px;
}
.modal h2{margin:0 0 10px; font-size:16px}
.modal .actions{justify-content:flex-end}
.small{font-size:11px;color:#8d8d8d}

/* Scrollable modal content */
.modal{
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal form{
  overflow-y: auto;
  padding-right: 6px;
}

/* Portal landing */
.hero{
  border:1px solid #2a2a2a;
  border-radius:18px;
  padding:16px;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(100,120,255,.18), transparent 50%),
              radial-gradient(900px 450px at 90% 30%, rgba(150,70,255,.14), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.hero h1{ margin:0; font-size:18px; letter-spacing:.2px; }
.hero p{ margin:6px 0 0; color:#b7b7b7; font-size:13px; line-height:1.35; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid #2a2a2a; border-radius:999px;
  background: rgba(255,255,255,.03); color:#cfcfcf; font-size:11px;
}
.badge-dot{ width:8px; height:8px; border-radius:999px; background:#6ee7b7; box-shadow:0 0 0 3px rgba(110,231,183,.12); }
.top .row .btn{ white-space:nowrap; }
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid #2a2a2a;
  border-radius:14px;
}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid #1e1e1e;
  text-align:left;
  vertical-align:top;
  font-size:13px;
}
.table th{ color:#bdbdbd; font-size:12px; font-weight:600; background: rgba(255,255,255,.03); }
.table tr:last-child td{ border-bottom:none; }
.muted{ color:#9a9a9a; }

/* --- Blue theme override --- */
html, body {
  background: #000000;
}

:root {
  --accent: #3b82f6; /* blue-500 */
  --accent-soft: rgba(59,130,246,.18);
}

/* Hero background blue instead of purple */
.hero{
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(59,130,246,.22), transparent 50%),
    radial-gradient(900px 450px at 90% 30%, rgba(37,99,235,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}

/* Pills, badges, buttons */
.badge-dot{
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

.btn{
  border-color: rgba(59,130,246,.45);
}
.btn.ok{
  background: linear-gradient(180deg, #3b82f6, #2563eb);
}
.btn:hover{
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

.pill{
  background: rgba(59,130,246,.18);
  color: #dbeafe;
}

/* --- Role-based accent system --- */
:root {
  --accent: #3b82f6;           /* Officer blue */
  --accent-soft: rgba(59,130,246,.18);
}

/* DOJ slate / steel override */
body[data-role="doj"] {
  --accent: #64748b;           /* slate-500 */
  --accent-soft: rgba(100,116,139,.22);
}

/* Apply accents consistently */
.badge-dot{
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn.ok{
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 78%, black));
}

.pill{
  background: var(--accent-soft);
  color: #e5e7eb;
}

/* --- Officer/DOJ layout spacing tweaks --- */
.card{ padding: 18px; }
.who{ margin-bottom: 14px; }
.section-title{ margin-top: 18px; }
.actions{ margin-top: 10px; gap: 10px; flex-wrap: wrap; }

/* Section blocks to prevent "squished" feeling */
.section-block{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #1e1e1e;
}
.section-block:first-of-type{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Make primary action buttons breathe on mobile */
@media (max-width: 520px){
  .top{ gap: 10px; }
  .top .row{ width:100%; justify-content:flex-start; flex-wrap:wrap; gap:10px; }
  .top .row .btn{ width:100%; text-align:center; }
  .hero{ padding: 14px; }
}

/* Slightly reduce hero dominance */
.hero p{ max-width: 60ch; }

/* --- DOJ review spacing improvements --- */
body[data-role="doj"] .kv{
  margin-bottom: 14px;
}

body[data-role="doj"] .field{
  margin-bottom: 16px;
}

body[data-role="doj"] textarea,
body[data-role="doj"] input,
body[data-role="doj"] select{
  margin-top: 6px;
}

/* --- DOJ grouping blocks --- */
.group{
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  background: rgba(255,255,255,.02);
}
.group h3{
  margin: 0 0 10px 0;
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #bdbdbd;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.group .body{
  font-size: 13px;
  line-height: 1.4;
  color: #e5e7eb;
}
.group a{
  color: #e5e7eb;
  text-decoration: underline;
  text-decoration-color: rgba(229,231,235,.35);
  word-break: break-word;
}
.group a:hover{
  text-decoration-color: rgba(229,231,235,.75);
}

.btn.tiny{
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 12px;
}

/* --- DOJ review field boxes --- */
.group-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 780px){
  .group-grid{ grid-template-columns: 1fr; }
}
.group.compact .body{
  white-space: normal;
}
.group .body.small{
  font-size:12.5px;
  color:#e5e7eb;
}
.group .label{
  font-size:11px;
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.35px;
  margin-bottom:6px;
}
.group pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-family: inherit;
}