:root {
  --color-bg-dark: #0F172A;
  --color-bg-light: #F8FAFC;
  --color-primary: #2563EB;
  --color-success: #0D9488;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-text-dark: #0F172A;
  --color-text-light: #E2E8F0;
  --color-card-bg: #FFFFFF;
  --color-border: #E2E8F0;
  /* Secondary/label text on light backgrounds - #64748B (previously used
     here) is only ~3.2:1 against white, below the 4.5:1 needed for text
     this small. #475569 is ~7.3:1. */
  --color-text-muted: #475569;
  --sidebar-width: 250px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
  font-variant-numeric: tabular-nums;
}

a { color: var(--color-primary); }

/* Bootstrap's default .text-muted (#6c757d, ~4.5:1 on white) is right at
   the AA floor and reads faint in practice. Used throughout for empty-state
   messages, counts, etc. - override with the same darker muted tone as
   stat labels/table headers so it's consistently legible. */
.text-muted {
  color: var(--color-text-muted) !important;
}

/* ---------- Layout shell ---------- */

.portal-sidebar {
  width: var(--sidebar-width);
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

.portal-sidebar .portal-brand {
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.12);
}

.portal-sidebar .nav-link {
  color: #FFFFFF;
  font-weight: 500;
  border-radius: 0.375rem;
  padding: 0.55rem 0.9rem;
  margin: 0.1rem 0.6rem;
  font-size: 0.925rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.portal-sidebar .nav-link:hover {
  background-color: rgba(37, 99, 235, 0.25);
  color: #fff;
}

.portal-sidebar .nav-link.active {
  background-color: var(--color-primary);
  color: #fff;
}

.portal-sidebar .nav-link.disabled {
  color: rgba(226, 232, 240, 0.4);
  cursor: default;
}

.portal-topbar {
  background-color: var(--color-card-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 1.5rem;
}

.portal-main {
  background-color: var(--color-bg-light);
  min-height: 100vh;
}

@media (min-width: 992px) {
  /* Bootstrap's offcanvas-lg only resets to position:static at this
     breakpoint (it's meant for show/hide behavior, not a persistent
     layout) - without this override the sidebar and main content just
     stack vertically in normal flow instead of sitting side-by-side. */
  .portal-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    /* ROOT CAUSE of the "sidebar barely visible" bug: bootstrap.min.css
       has, verbatim, ".offcanvas-lg{...background-color:transparent
       !important}" inside this same >=992px breakpoint. That !important
       silently beat this rule's plain background-color regardless of
       source order, so the sidebar container rendered fully transparent
       at desktop widths, showing the light page background through it.
       Inactive nav links (plain text, no background of their own) then
       sat as near-white text on that light background - nearly
       invisible. Only "active" stayed visible because .nav-link.active
       paints its own opaque blue box on top. Matching !important is
       required to win against Bootstrap's. */
    background-color: var(--color-bg-dark) !important;
  }

  .portal-main {
    margin-left: var(--sidebar-width);
  }
}

/* ---------- Cards ---------- */

.card {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.stat-card .stat-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
}

/* ---------- Buttons / focus ---------- */

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #1D4ED8;
  border-color: #1D4ED8;
}
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-control:focus, .form-select:focus, .btn:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

/* ---------- Status badges (shared partial: templates/partials/status_badge.html) ---------- */

.portal-badge {
  display: inline-block;
  padding: 0.3em 0.65em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  color: #fff;
  text-transform: capitalize;
}

.badge-success { background-color: var(--color-success); }
.badge-warning { background-color: var(--color-warning); }
.badge-danger { background-color: var(--color-danger); }
.badge-neutral { background-color: var(--color-text-muted); }

/* ---------- Tables ---------- */

.table-portal thead th {
  background-color: #F1F5F9;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
}

.table-portal td, .table-portal th {
  vertical-align: middle;
}