:root {
  --portal-navy: #0b1f3a;
  --portal-blue: #176bce;
  --portal-blue-soft: #eaf3ff;
  --portal-slate: #5d6b7e;
  --portal-border: #dfe6ee;
  --portal-bg: #f4f7fb;
  --portal-success: #0f7b55;
  --portal-warning: #9a5b00;
  --portal-danger: #b42318;
}

body.portal-body { background: var(--portal-bg); color: #172033; }
.portal-topbar { background: var(--portal-navy); box-shadow: 0 8px 26px rgba(11,31,58,.14); }
.portal-topbar .navbar-brand { color: #fff; font-weight: 700; letter-spacing: -.02em; }
.portal-topbar .navbar-brand:hover,
.portal-topbar .navbar-brand:focus { color: #fff; }
.portal-topbar .navbar-toggler { border-color: rgba(255,255,255,.35); color: #fff; }
.portal-nav { gap: .1rem; }
.portal-nav .nav-link { color: rgba(255,255,255,.78); border-radius: .45rem; padding: .55rem .7rem; font-size: .9rem; font-weight: 600; }
.portal-nav .nav-link:hover,
.portal-nav .nav-link:focus,
.portal-nav .nav-link.active { color: #fff; background: rgba(255,255,255,.12); }
.portal-user { color: rgba(255,255,255,.82); font-size: .82rem; line-height: 1.25; }
.portal-heading { padding: 2rem 0 1.35rem; border-bottom: 1px solid var(--portal-border); background: #fff; }
.portal-heading h1 { margin: 0; font-size: clamp(1.6rem,3vw,2.25rem); color: var(--portal-navy); }
.portal-heading p { margin: .35rem 0 0; color: var(--portal-slate); }
.portal-main { min-height: 60vh; }
.portal-panel { background: #fff; border: 1px solid var(--portal-border); border-radius: .8rem; box-shadow: 0 8px 24px rgba(11,31,58,.045); }
.portal-panel-header { padding: 1rem 1.2rem; border-bottom: 1px solid var(--portal-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.portal-panel-header h2,
.portal-panel-header h3 { margin: 0; font-size: 1.05rem; color: var(--portal-navy); }
.portal-panel-body { padding: 1.2rem; }
.metric-strip { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); background: #fff; border: 1px solid var(--portal-border); border-radius: .8rem; overflow: hidden; }
.metric { padding: 1.2rem; border-right: 1px solid var(--portal-border); }
.metric:last-child { border-right: 0; }
.metric-value { font-size: 1.7rem; line-height: 1; color: var(--portal-navy); font-weight: 700; }
.metric-label { color: var(--portal-slate); font-size: .84rem; margin-top: .45rem; }
.status-badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .28rem .58rem; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.status-badge::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.status-success { color: var(--portal-success); background: #e9f8f2; }
.status-warning { color: var(--portal-warning); background: #fff5df; }
.status-danger { color: var(--portal-danger); background: #fff0ee; }
.status-info { color: #155eef; background: var(--portal-blue-soft); }
.status-neutral { color: #4c5b6f; background: #eef2f6; }
.portal-table { margin: 0; }
.portal-table thead th { color: #526175; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--portal-border); background: #fafbfd; }
.portal-table td { vertical-align: middle; border-color: #edf1f5; }
.quick-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.empty-state { padding: 2.8rem 1.2rem; text-align: center; color: var(--portal-slate); }
.empty-state i { display: block; font-size: 2rem; color: #9eacbd; margin-bottom: .75rem; }
.resource-title { color: var(--portal-navy); font-weight: 700; }
.resource-meta { color: var(--portal-slate); font-size: .85rem; }
.critical-action { border-left: 4px solid var(--portal-danger); }
.portal-footer { background: var(--portal-navy); color: rgba(255,255,255,.78); }
.portal-footer a { color: #fff; }
.form-label { font-weight: 600; color: #344054; }
.form-control:focus,
.form-select:focus,
.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible { outline: 3px solid rgba(23,107,206,.28); outline-offset: 2px; box-shadow: none; }

@media (max-width: 991.98px) {
  .portal-nav { padding: 1rem 0; max-height: 65vh; overflow-y: auto; }
  .portal-user { margin: .5rem 0 1rem; }
}

@media (max-width: 575.98px) {
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric { border-bottom: 1px solid var(--portal-border); }
  .portal-panel-header { align-items: flex-start; flex-direction: column; }
  .table-responsive { border: 1px solid var(--portal-border); border-radius: .65rem; }
}