:root {
  --navy: #14213d;
  --navy-light: #1f2f52;
  --accent: #2563eb;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #d97706;
  --bg: #f4f6f9;
  --border: #e2e5eb;
  --text: #1a1d29;
  --muted: #6b7280;
}
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.layout { display:block; min-height:100vh; }
.sidebar {
  width:230px; background: var(--navy); color:#dbe2f0; flex-shrink:0;
  position:fixed; top:0; left:0; height:100vh; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; z-index:100;
}
.sidebar .brand { padding:20px 18px; font-weight:700; font-size:17px; border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0; }
.sidebar nav { flex:1 1 auto; padding:10px 0; overflow-y:auto; min-height:0; }
.sidebar a { display:block; padding:10px 18px; color:#c4cde3; font-size:14px; border-left:3px solid transparent; }
.sidebar a:hover { background: var(--navy-light); text-decoration:none; color:#fff; }
.sidebar a.active { background: var(--navy-light); color:#fff; border-left-color: var(--accent); font-weight:600; }
.sidebar .section-label { padding:14px 18px 4px; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:#7c88a8; }
.sidebar .userbox { padding:14px 18px; border-top:1px solid rgba(255,255,255,0.08); font-size:13px; flex-shrink:0; }
.sidebar .userbox .role { color:#8b96b5; }

.main { margin-left:230px; min-width:0; min-height:100vh; }
@media (max-width: 800px) {
  .sidebar { position:static; height:auto; width:100%; }
  .main { margin-left:0; }
}
.topbar { background:#fff; border-bottom:1px solid var(--border); padding:14px 24px; display:flex; justify-content:space-between; align-items:center; }
.topbar h1 { font-size:19px; margin:0; }
.content { padding:24px; }

.card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:18px; }
.grid { display:grid; gap:16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.stat { }
.stat .label { font-size:12px; color: var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
.stat .value { font-size:26px; font-weight:700; margin-top:4px; }
.stat .value.green { color: var(--green); }
.stat .value.red { color: var(--red); }
.stat .value.amber { color: var(--amber); }

table { width:100%; border-collapse: collapse; font-size:14px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
th { color: var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.03em; }
tr:hover td { background:#fafbfc; }

.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:600; }
.badge.high, .badge.red { background:#fde8e8; color:var(--red); }
.badge.medium, .badge.amber { background:#fef3e0; color:var(--amber); }
.badge.low, .badge.green { background:#e7f7ed; color:var(--green); }
.badge.gray { background:#eef0f3; color:var(--muted); }

.btn { display:inline-block; background: var(--accent); color:#fff; border:none; padding:8px 16px; border-radius:6px; font-size:14px; cursor:pointer; }
.btn:hover { background:#1d4ed8; text-decoration:none; }
.btn.secondary { background:#fff; color:var(--text); border:1px solid var(--border); }
.btn.danger { background: var(--red); }
.btn.small { padding:5px 10px; font-size:12px; }

.form-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group label { font-size:12px; color:var(--muted); }
input, select, textarea { padding:8px 10px; border:1px solid var(--border); border-radius:6px; font-size:14px; font-family:inherit; }

.section-title { font-size:15px; font-weight:700; margin:0 0 12px; }
.two-col { display:grid; grid-template-columns: 1.4fr 1fr; gap:20px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.alert-item { padding:10px 12px; border-radius:8px; margin-bottom:8px; font-size:13px; border-left:3px solid var(--border); }
.alert-item.high { background:#fef2f2; border-left-color: var(--red); }
.alert-item.medium { background:#fffbeb; border-left-color: var(--amber); }
.alert-item .type { font-weight:700; font-size:11px; text-transform:uppercase; color:var(--muted); }

.action-item { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px; }
.action-item:last-child { border-bottom:none; }
.action-item .tag { font-size:10px; padding:2px 7px; border-radius:4px; background:#eef0f3; color:var(--muted); font-weight:700; text-transform:uppercase; flex-shrink:0; }

.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--navy); }
.login-box { background:#fff; padding:36px; border-radius:12px; width:340px; }
.login-box h1 { font-size:20px; margin-top:0; }
.login-box .field { margin-bottom:14px; display:flex; flex-direction:column; gap:5px; }
.login-box input { width:100%; }
.error-msg { background:#fde8e8; color:var(--red); padding:9px 12px; border-radius:6px; font-size:13px; margin-bottom:14px; }
.success-msg { background:#e7f7ed; color:var(--green); padding:9px 12px; border-radius:6px; font-size:13px; margin-bottom:14px; }

.progress-bar { background:#eef0f3; border-radius:6px; height:8px; overflow:hidden; margin-top:6px; }
.progress-bar .fill { background: var(--accent); height:100%; }

.muted { color: var(--muted); }
.tabs { display:flex; gap:6px; margin-bottom:16px; }
.tabs a { padding:6px 14px; border-radius:6px; font-size:13px; border:1px solid var(--border); color:var(--text); }
.tabs a.active { background: var(--navy); color:#fff; border-color: var(--navy); }

/* Scrollable panels - risk alerts / action list / any long in-card list */
.scroll-panel { max-height:420px; overflow-y:auto; padding-right:4px; }
.scroll-panel::-webkit-scrollbar { width:7px; }
.scroll-panel::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:10px; }
.scroll-panel::-webkit-scrollbar-track { background:transparent; }

/* Clickable table rows / stat cards that open a detail modal */
tr.clickable-row { cursor:pointer; }
tr.clickable-row:hover td { background:#eef2ff; }
.stat.clickable { cursor:pointer; border-radius:8px; padding:6px; margin:-6px; transition:background 0.1s; }
.stat.clickable:hover { background:#f1f4f9; }

/* Pagination bar */
.pagination-bar { display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:13px; flex-wrap:wrap; gap:10px; }
.pagination-bar select { padding:5px 8px; font-size:13px; }
.pagination-bar .nav-links { display:flex; align-items:center; gap:10px; }
.pagination-bar a.disabled { pointer-events:none; opacity:0.4; }

/* Modal */
.modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(20,33,61,0.55);
  z-index:1000; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:#fff; border-radius:10px; max-width:520px; width:100%;
  max-height:80vh; overflow-y:auto; padding:0;
}
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-header h3 { margin:0; font-size:16px; }
.modal-close { cursor:pointer; background:none; border:none; font-size:20px; color:var(--muted); line-height:1; }
.modal-body { padding:16px 20px; }
.modal-body table { width:100%; }
.modal-body table td { padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; }
.modal-body table td.k { color:var(--muted); width:42%; }
.modal-body table td.v { font-weight:600; text-align:right; }