/* ═══════════════════════════════════════════
   NBCRFLI Portal — Hybrid Palette
   Brand Gold + Carbon · Navy · Slate · Flax
   Bootstrap 5 override layer
   ═══════════════════════════════════════════ */

:root {
  /* ── Brand gold (primary, kept from your CI) ── */
  --clr-brand-gold:        #FFC107;
  --clr-brand-gold-hover:  #FFD54F;
  --clr-brand-gold-press:  #E0A800;
  --clr-brand-gold-soft:   rgba(255, 193, 7, 0.14);

  /* ── Vecteezy "Elegant Gold" companion palette ── */
  --clr-carbon:            #141414;   /* outermost surface */
  --clr-navy:              #232A3B;   /* card surface */
  --clr-navy-inner:        #2D3548;   /* nested card */
  --clr-navy-raised:       #3A4358;   /* tooltips, dropdowns */
  --clr-slate:             #4F5872;   /* secondary accent */
  --clr-slate-hover:       #6371A0;
  --clr-slate-soft:        rgba(79, 88, 114, 0.22);
  --clr-slate-on-dark:     #9DB3D8;   /* slate text legible on navy */
  --clr-antique-gold:      #B8924B;   /* decorative gold */
  --clr-golden-flax:       #E8C97A;   /* soft gold for warm accents */

  /* ── NBCRFLI logo red (kept for destructive emphasis) ── */
  --clr-brand-red:         #C8102E;
  --clr-brand-red-hover:   #DC2840;
  --clr-brand-red-soft:    rgba(200, 16, 46, 0.14);

  /* ── Aliases (backwards compatibility) ─────── */
  --clr-accent:            var(--clr-brand-gold);
  --clr-accent-h:          var(--clr-brand-gold-hover);

  /* ── Surfaces (dark is default) ─────────────── */
  --clr-bg:                var(--clr-carbon);
  --clr-sidebar:           var(--clr-navy);
  --clr-card:              var(--clr-navy);
  --clr-card-inner:        var(--clr-navy-inner);
  --clr-card-raised:       var(--clr-navy-raised);
  --clr-topbar:            #1A2030;
  --clr-topbar-accent:     var(--clr-brand-gold);
  --clr-overlay:           rgba(10, 10, 14, 0.65);

  /* ── Borders (gold-tinted for warmth) ───────── */
  --clr-border:            rgba(232, 201, 122, 0.10);
  --clr-border-strong:     rgba(232, 201, 122, 0.18);
  --clr-border-focus:      var(--clr-brand-gold);

  /* ── Text (warm off-white instead of harsh white) ── */
  --clr-text:              #ECE6D5;   /* warm off-white, derived from flax */
  --clr-text-secondary:    #B8B2A0;
  --clr-muted:             #8089A0;   /* slate-tinted muted */
  --clr-text-disabled:     #5A6275;
  --clr-text-on-gold:      #141414;
  --clr-text-on-red:       #FFFFFF;
  --clr-text-on-slate:     #FFFFFF;

  /* ── Tables ─────────────────────────────────── */
  --clr-thead:             #FFC107;
  --clr-thead-text:        #141414;
  --clr-row-hover:         rgba(255, 193, 7, 0.06);
  --clr-row-stripe:        rgba(232, 201, 122, 0.03);

  /* ── Semantic (info now uses slate) ─────────── */
  --clr-success:           #22C55E;
  --clr-success-soft:      rgba(34, 197, 94, 0.16);
  --clr-warning:           #F59E0B;
  --clr-warning-soft:      rgba(245, 158, 11, 0.16);
  --clr-danger:            #EF4444;
  --clr-danger-soft:       rgba(239, 68, 68, 0.16);
  --clr-info:              var(--clr-slate-on-dark);
  --clr-info-soft:         var(--clr-slate-soft);

  /* ── Layout ─────────────────────────────────── */
  --sidebar-w:             240px;
  --topbar-h:              65px;
  --radius-sm:             6px;
  --radius-md:             10px;
  --radius-lg:             14px;
  --shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:             0 6px 20px rgba(0, 0, 0, 0.45);

  /* ── Neutral ramp (kept from your file) ─────── */
  --color-slate-400: oklch(70.4% .04 256.788);
  --color-slate-800: oklch(27.9% .041 260.031);
  --color-slate-900: oklch(20.8% .042 265.755);
  --color-gray-50:   oklch(98.5% .002 247.839);
  --color-gray-100:  oklch(96.7% .003 264.542);
  --color-gray-200:  oklch(92.8% .006 264.531);
  --color-gray-300:  oklch(87.2% .010 258.338);
  --color-gray-400:  oklch(70.7% .022 261.325);
  --color-gray-500:  oklch(55.1% .027 264.364);
  --color-gray-600:  oklch(44.6% .030 256.802);
  --color-gray-700:  oklch(37.3% .034 259.733);
  --color-gray-800:  oklch(27.8% .033 256.848);
  --color-gray-900:  oklch(21.0% .034 264.665);
}


/* ═══════════════════════════════════════════
   LIGHT MODE — warm cream + navy
   ═══════════════════════════════════════════ */
[data-theme="light"] {
  --clr-bg:                #F4F2EB;   /* warm cream */
  --clr-sidebar:           #FFFFFF;
  --clr-card:              #FFFFFF;
  --clr-card-inner:        #FAF8F2;
  --clr-card-raised:       #ECE7D8;
  --clr-topbar:            #FFFFFF;
  --clr-topbar-accent:     var(--clr-brand-gold);
  --clr-overlay:           rgba(20, 20, 20, 0.45);

  --clr-border:            rgba(31, 41, 51, 0.08);
  --clr-border-strong:     rgba(31, 41, 51, 0.16);

  --clr-text:              #141414;
  --clr-text-secondary:    #4F5872;
  --clr-muted:             #7A8290;
  --clr-text-disabled:     #A8AEBA;
  --clr-text-on-gold:      #141414;
  --clr-text-on-slate:     #FFFFFF;

  --clr-thead:             #232A3B;
  --clr-thead-text:        #FFC107;
  --clr-row-hover:         rgba(255, 193, 7, 0.10);
  --clr-row-stripe:        rgba(31, 41, 51, 0.025);

  --clr-success:           #16A34A;
  --clr-success-soft:      #DCFCE7;
  --clr-warning:           #D97706;
  --clr-warning-soft:      #FEF3C7;
  --clr-danger:            #DC2626;
  --clr-danger-soft:       #FEE2E2;
  --clr-info:              #475569;
  --clr-info-soft:         #E2E8F0;

  --clr-slate:             #475569;
  --clr-slate-hover:       #334155;
  --clr-slate-soft:        #E2E8F0;
  --clr-slate-on-dark:     #475569;

  --clr-brand-gold-soft:   #FFF8E1;
  --clr-brand-red-soft:    #FEE4E8;

  --shadow-sm:             0 1px 2px rgba(31, 41, 51, 0.06);
  --shadow-md:             0 6px 16px rgba(31, 41, 51, 0.10);
}

/* ── Light-mode component touch-ups ─────────── */
[data-theme="light"] ::-webkit-scrollbar-thumb       { background: #C5BFAF; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #9D9685; }
[data-theme="light"] .sidebar                        { box-shadow: 2px 0 12px rgba(31, 41, 51, 0.06); }
[data-theme="light"] .sidebar .btn-close             { filter: none; }
[data-theme="light"] .select2-search--dropdown .select2-search__field {
  background: var(--clr-card-inner);
  color: var(--clr-text);
}

.text-gold { color: #FFC107; }

/* ═══════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--clr-bg);
  color: var(--clr-text);
}

/* ── Scrollbar (dark default) ───────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: var(--clr-bg); }
::-webkit-scrollbar-thumb    { background: #3A4358; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4F5872; }


/* ═══════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--clr-sidebar);
  display: flex;
  flex-direction: column;
}

/* On desktop: fixed sidebar. On mobile Bootstrap offcanvas handles positioning. */
@media (min-width: 992px) {
  .sidebar {
    border-right: 1px solid var(--clr-border);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
  }
}

@media (max-width: 991.98px) {
  .sidebar { --bs-offcanvas-bg: var(--clr-sidebar); }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--clr-border);
  text-decoration: none;
  color: var(--clr-text);
}
.sidebar-brand:hover { color: var(--clr-text); }

.sidebar-brand-icon {
  width: 34px; height: 34px;
  background: var(--clr-accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-text-on-gold);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.sidebar-brand-text {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--clr-text);
}

.sidebar-nav { padding: 12px 10px; }

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--clr-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  margin-bottom: 2px;
}
.sidebar-nav-item i { font-size: 1rem; flex-shrink: 0; }
.sidebar-nav-item:hover {
  background: var(--clr-brand-gold-soft);
  color: var(--clr-text);
}
.sidebar-nav-item.active {
  background: var(--clr-accent);
  color: var(--clr-text-on-gold);
  font-weight: 600;
}
.sidebar-nav-item.active i { color: var(--clr-text-on-gold); }

.sidebar-nav-sub { padding-left: 2.4rem; }
.sidebar-nav-sub.active {
  background: var(--clr-accent-h);
}
.sidebar-chevron { transition: transform 0.2s ease; }
[aria-expanded="true"] .sidebar-chevron { transform: rotate(-180deg); }

.sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--clr-border);
  font-size: 0.72rem;
  color: var(--clr-muted);
}


/* ═══════════════════════════════════════════
   MAIN WRAPPER
   ═══════════════════════════════════════════ */
.main-wrapper {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--clr-bg);
}

@media (max-width: 991.98px) {
  .main-wrapper { margin-left: 0; }
}


/* ═══════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════ */
.topbar {
  height: var(--topbar-h);
  background: var(--clr-topbar);
  border-bottom: 2px solid var(--clr-topbar-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  position: sticky;
  top: 0;
  z-index: 100;
}

[data-theme="light"] .topbar {
  box-shadow: 0 2px 8px rgba(31, 41, 51, 0.06);
}

/* Force readable text inside the topbar in light mode.
   Templates use Bootstrap's .text-light which has !important,
   so we must match it to override. Scoped to light theme only. */
[data-theme="light"] .topbar,
[data-theme="light"] .topbar a,
[data-theme="light"] .topbar span,
[data-theme="light"] .topbar button,
[data-theme="light"] .topbar .text-light,
[data-theme="light"] .topbar .topbar-logout,
[data-theme="light"] .topbar-toggle,
[data-theme="light"] .topbar-theme-toggle {
  color: var(--clr-text) !important;
}
[data-theme="light"] .topbar .topbar-logout:hover,
[data-theme="light"] .topbar-theme-toggle:hover,
[data-theme="light"] .topbar-toggle:hover {
  color: var(--clr-brand-gold-press) !important;
}

.topbar-toggle       { color: var(--clr-text); padding: 4px 8px; }
.topbar-toggle:hover { color: var(--clr-accent); }

.topbar-logout {
  color: var(--clr-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color .15s;
}
.topbar-logout:hover { color: var(--clr-accent); }

.auth-theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding: 7px 9px;
  border-radius: 8px;
  line-height: 1;
  transition: color .15s, background .15s, border-color .15s;
  z-index: 999;
}
.auth-theme-toggle:hover {
  color: var(--clr-accent);
  border-color: var(--clr-accent);
  background: var(--clr-brand-gold-soft);
}

.topbar-theme-toggle {
  background: none;
  border: none;
  color: var(--clr-text-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 6px;
  line-height: 1;
  transition: color .15s, background .15s;
}
.topbar-theme-toggle:hover {
  color: var(--clr-accent);
  background: var(--clr-brand-gold-soft);
}


/* ═══════════════════════════════════════════
   PAGE CONTENT
   ═══════════════════════════════════════════ */
.page-content {
  padding: 28px 24px;
  flex: 1;
}

.page-title {
  color: var(--clr-text);
  font-size: 1.3rem;
  font-weight: 600;
}


/* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */
.card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  color: var(--clr-text);
  box-shadow: var(--shadow-md);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--clr-border);
  padding: 16px 20px;
  font-weight: 600;
  color: var(--clr-text);
}
.card-body   { padding: 20px; }
.card-title  { color: var(--clr-text); font-weight: 600; }
.card-text   { color: var(--clr-text-secondary); }
.card-footer {
  background: transparent;
  border-top: 1px solid var(--clr-border);
  color: var(--clr-text-secondary);
}


/* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */
.form-control, .form-select {
  background-color: var(--clr-card-inner);
  border: 1px solid var(--clr-border-strong);
  color: var(--clr-text);
  border-radius: 8px;
}
.form-control:focus, .form-select:focus {
  background-color: var(--clr-card-inner);
  border-color: var(--clr-accent);
  color: var(--clr-text);
  box-shadow: 0 0 0 0.2rem var(--clr-brand-gold-soft);
}
.form-control::placeholder { color: var(--clr-muted); }
.form-label                { color: var(--clr-text-secondary); font-size: 0.875rem; margin-bottom: 6px; }

/* Disabled & readonly inputs — Bootstrap's default uses --bs-secondary-bg
   (light gray) which is invisible on dark text. Themed version below. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly],
textarea.form-control:disabled,
textarea.form-control[readonly] {
  background-color: var(--clr-bg) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text-secondary) !important;
  cursor: not-allowed;
  opacity: 0.85;
}

/* Select2 single select disabled state */
.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--clr-bg) !important;
  border-color: var(--clr-border) !important;
  color: var(--clr-text-secondary) !important;
  cursor: not-allowed;
  opacity: 0.85;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
  color: var(--clr-text-secondary) !important;
}

/* Disabled checkboxes/radios */
.form-check-input:disabled {
  background-color: var(--clr-bg);
  border-color: var(--clr-border);
  opacity: 0.55;
}
.form-check-input:disabled + .form-check-label,
.form-check-input[disabled] + .form-check-label {
  color: var(--clr-muted);
  opacity: 0.7;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--clr-danger);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--clr-danger);
  box-shadow: 0 0 0 0.2rem var(--clr-danger-soft);
}
.invalid-feedback {
  color: var(--clr-danger);
  font-size: 0.8rem;
}
.form-group.is-invalid .invalid-feedback {
  display: block;
}
textarea.form-control { resize: vertical; }

.input-group-text {
  background: var(--clr-card-inner);
  border-color: var(--clr-border-strong);
  color: var(--clr-text-secondary);
}

.form-check-input {
  background-color: var(--clr-card-inner);
  border-color: var(--clr-border-strong);
}
.form-check-input:checked {
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
}
.form-check-label { color: var(--clr-text-secondary); }


/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn-primary {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-text-on-gold);
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--clr-accent-h);
  border-color: var(--clr-accent-h);
  color: var(--clr-text-on-gold);
}
.btn-primary:active {
  background: var(--clr-brand-gold-press);
  border-color: var(--clr-brand-gold-press);
  color: var(--clr-text-on-gold);
}

/* Slate secondary — new */
.btn-secondary,
.btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--clr-slate);
  color: var(--clr-slate-on-dark);
  font-weight: 500;
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: var(--clr-slate-soft);
  border-color: var(--clr-slate-hover);
  color: var(--clr-text);
}

.btn-success { background: var(--clr-success); border-color: var(--clr-success); color: #fff; }
.btn-danger  { background: var(--clr-danger);  border-color: var(--clr-danger);  color: #fff; }
.btn-warning { background: var(--clr-warning); border-color: var(--clr-warning); color: var(--clr-text-on-gold); }
.btn-info    { background: var(--clr-slate);   border-color: var(--clr-slate);   color: #fff; }

.btn-brand-red {
  background: var(--clr-brand-red);
  border-color: var(--clr-brand-red);
  color: var(--clr-text-on-red);
  font-weight: 600;
}
.btn-brand-red:hover {
  background: var(--clr-brand-red-hover);
  border-color: var(--clr-brand-red-hover);
  color: var(--clr-text-on-red);
}


/* ═══════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════ */
.badge-draft      { background: var(--clr-brand-gold-soft); color: var(--clr-brand-gold); }
.badge-submitted  { background: var(--clr-slate-soft);      color: var(--clr-slate-on-dark); }
.badge-approved   { background: var(--clr-success-soft);    color: var(--clr-success); }
.badge-rejected   { background: var(--clr-danger-soft);     color: var(--clr-danger); }


/* ═══════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════ */
/* Remap Bootstrap's table CSS variables to our theme so striping
   and hover use themed tones instead of falling back to white. */
.table {
  --bs-table-bg:            transparent;
  --bs-table-color:         var(--clr-text);
  --bs-table-border-color:  var(--clr-border);
  --bs-table-striped-bg:    var(--clr-row-stripe);
  --bs-table-striped-color: var(--clr-text);
  --bs-table-hover-bg:      var(--clr-row-hover);
  --bs-table-hover-color:   var(--clr-text);
  --bs-table-active-bg:     var(--clr-row-hover);
  --bs-table-active-color:  var(--clr-text);

  color: var(--clr-text);
  border-color: var(--clr-border);
}
.table thead th {
  background: var(--clr-thead) !important;
  color: var(--clr-thead-text);
  border-bottom: 1px solid var(--clr-border);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table tbody td { border-color: var(--clr-border); }

/* Defensive: enforce themed striping even when other rules try to
   override --bs-table-bg directly on cells. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--clr-row-stripe);
  color: var(--clr-text);
}
.table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: transparent;
  color: var(--clr-text);
}
.table-hover > tbody > tr:hover > * {
  background-color: var(--clr-row-hover);
  color: var(--clr-text);
}


/* ═══════════════════════════════════════════
   DATATABLES
   ═══════════════════════════════════════════ */
div.dt-container .dt-search input,
div.dt-container .dt-length select {
  background: var(--clr-card-inner);
  border: 1px solid var(--clr-border-strong);
  color: var(--clr-text);
  border-radius: 6px;
  padding: 4px 8px;
}
div.dt-container .dt-paging .page-link {
  background: var(--clr-card-inner);
  border-color: var(--clr-border);
  color: var(--clr-text-secondary);
}
div.dt-container .dt-paging .page-item.active .page-link {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-text-on-gold);
}
div.dt-container .dt-info { color: var(--clr-muted); font-size: 0.8rem; }

@media (max-width: 575px) {
  .dataTables_wrapper .dataTables_paginate .page-link {
    padding: 0.25rem 0.4rem;
    font-size: 0.78rem;
  }
  div.dt-container .dt-paging .page-link {
    padding: 0.25rem 0.4rem;
    font-size: 0.78rem;
  }
}


/* ═══════════════════════════════════════════
   SELECT2
   ═══════════════════════════════════════════ */
.select2-container--default .select2-selection--single {
  background: var(--clr-card-inner);
  border: 1px solid var(--clr-border-strong);
  border-radius: 8px;
  height: 38px;
  color: var(--clr-text);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--clr-text);
  line-height: 36px;
  padding-left: 12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}
.select2-dropdown {
  background: var(--clr-card-inner);
  border: 1px solid var(--clr-border-strong);
  color: var(--clr-text);
}
.select2-container--default .select2-results__option { color: var(--clr-text); }
.select2-container--default .select2-results__option--highlighted {
  background: var(--clr-accent);
  color: var(--clr-text-on-gold);
}
.select2-search--dropdown .select2-search__field {
  background: var(--clr-card-inner);
  border-color: var(--clr-border-strong);
  color: var(--clr-text);
}
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--clr-accent);
}


/* ═══════════════════════════════════════════
   SWEETALERT2
   ═══════════════════════════════════════════ */
.swal2-popup {
  background: var(--clr-card) !important;
  color: var(--clr-text) !important;
  border: 1px solid var(--clr-border);
  border-radius: 14px !important;
}
.swal2-title, .swal2-html-container { color: var(--clr-text) !important; }
.swal2-confirm {
  background: var(--clr-accent) !important;
  color: var(--clr-text-on-gold) !important;
}


/* ═══════════════════════════════════════════
   WIZARD STEPS
   ═══════════════════════════════════════════ */
.wizard-steps { display: flex; margin-bottom: 24px; }
.wizard-step  { flex: 1; text-align: center; position: relative; }

.wizard-step-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  font-weight: 700;
  font-size: 0.85rem;
  border: 2px solid var(--clr-border);
  background: var(--clr-card-inner);
  color: var(--clr-muted);
  position: relative;
  z-index: 1;
}
.wizard-step-circle.done    { background: var(--clr-success); border-color: var(--clr-success); color: #fff; }
.wizard-step-circle.current { background: var(--clr-accent);  border-color: var(--clr-accent);  color: var(--clr-text-on-gold); }

.wizard-step-label {
  font-size: 0.7rem;
  margin-top: 6px;
  color: var(--clr-muted);
}
.wizard-step-label.current { color: var(--clr-accent); font-weight: 600; }

.wizard-step-line {
  position: absolute;
  top: 18px; left: 50%; width: 100%;
  height: 2px;
  background: var(--clr-border);
  z-index: 0;
}
.wizard-step-line.done { background: var(--clr-success); }


/* ═══════════════════════════════════════════
   AUTH PAGE
   ═══════════════════════════════════════════ */
.auth-page { background: var(--clr-bg); }

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: 0 16px;
}

.auth-card .card {
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .auth-card .card {
  box-shadow: 0 8px 40px rgba(31, 41, 51, 0.12);
}

.auth-card .card-body { padding: 32px; }


/* ═══════════════════════════════════════════
   TYPE-PICKER GRADIENT GLOW CARDS
   ═══════════════════════════════════════════ */
.type-card-glow {
  background: linear-gradient(145deg, var(--clr-card-inner), var(--clr-card));
  border: 1px solid var(--clr-border);
  border-radius: 16px;
  padding: 32px 20px 26px;
  text-align: center;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  color: var(--clr-text);
}
.type-card-glow::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--clr-brand-gold), var(--clr-golden-flax));
  opacity: 0;
  transition: opacity .2s;
}
.type-card-glow:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px var(--clr-brand-gold-soft);
  border-color: var(--clr-accent);
  color: var(--clr-text);
}
.type-card-glow:hover::before { opacity: 1; }

.type-card-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFC107, #B8924B);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  font-size: 1.6rem;
  color: var(--clr-text-on-gold);
  box-shadow: 0 4px 16px rgba(255, 193, 7, .35);
}
.type-card-glow h5 {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: var(--clr-text);
}
.type-card-glow p {
  font-size: 0.78rem;
  color: var(--clr-text-secondary);
  margin: 0;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════ */
.text-accent   { color: var(--clr-accent) !important; }
.text-slate    { color: var(--clr-slate-on-dark) !important; }
.text-flax     { color: var(--clr-golden-flax) !important; }
.text-muted    { color: var(--clr-muted) !important; }
.border-subtle { border-color: var(--clr-border) !important; }

.btn-gold        { background: var(--clr-brand-gold); color: var(--clr-text-on-gold); border: 0; }
.btn-gold:hover  { background: var(--clr-brand-gold-hover); }
.btn-gold:active { background: var(--clr-brand-gold-press); }

.btn-slate         { background: var(--clr-slate); color: var(--clr-text-on-slate); border: 0; }
.btn-slate:hover   { background: var(--clr-slate-hover); color: var(--clr-text-on-slate); }

.badge-success   { background: var(--clr-success-soft); color: var(--clr-success); }
.badge-warning   { background: var(--clr-warning-soft); color: var(--clr-warning); }
.badge-danger    { background: var(--clr-danger-soft);  color: var(--clr-danger); }
.badge-info      { background: var(--clr-slate-soft);   color: var(--clr-slate-on-dark); }


/* ═══════════════════════════════════════════
   BOOTSTRAP 5 UTILITY OVERRIDES
   Templates use BS5 utilities (text-bg-*, bg-*, bg-gradient,
   text-primary, text-light) which bypass the themed components.
   These rules realign them to the NBCRFLI palette in both modes.
   ═══════════════════════════════════════════ */

/* Neutralize Bootstrap's bg-gradient overlay — we use flat fills */
.btn.bg-gradient,
.badge.bg-gradient {
  background-image: none !important;
}

/* ── Badges (text-bg-* combo utilities) ────── */
.badge.text-bg-secondary {
  background-color: var(--clr-brand-gold-soft) !important;
  color: var(--clr-brand-gold) !important;
}
.badge.text-bg-warning {
  background-color: var(--clr-slate-soft) !important;
  color: var(--clr-slate-on-dark) !important;
}
.badge.text-bg-success {
  background-color: var(--clr-success-soft) !important;
  color: var(--clr-success) !important;
}
.badge.text-bg-danger {
  background-color: var(--clr-danger-soft) !important;
  color: var(--clr-danger) !important;
}
.badge.text-bg-info {
  background-color: var(--clr-slate-soft) !important;
  color: var(--clr-slate-on-dark) !important;
}
.badge.text-bg-primary {
  background-color: var(--clr-brand-gold-soft) !important;
  color: var(--clr-brand-gold) !important;
}

/* Same treatment when only .bg-* is used (no .text-bg-* combo) */
.badge.bg-secondary { background-color: var(--clr-brand-gold-soft) !important; color: var(--clr-brand-gold) !important; }
.badge.bg-warning   { background-color: var(--clr-slate-soft) !important;      color: var(--clr-slate-on-dark) !important; }
.badge.bg-success   { background-color: var(--clr-success-soft) !important;    color: var(--clr-success) !important; }
.badge.bg-danger    { background-color: var(--clr-danger-soft) !important;     color: var(--clr-danger) !important; }
.badge.bg-info      { background-color: var(--clr-slate-soft) !important;      color: var(--clr-slate-on-dark) !important; }
.badge.bg-primary   { background-color: var(--clr-brand-gold-soft) !important; color: var(--clr-brand-gold) !important; }

/* ── Buttons using .bg-* utilities ──────────── */
/* Save Draft, etc. — bright Bootstrap blue → slate.
   DARK MODE: solid slate fill with white text.
   LIGHT MODE: outline style (transparent + slate border + slate text)
   so it reads as restrained rather than a heavy dark slab on cream. */
.btn.bg-primary {
  background-color: var(--clr-slate) !important;
  border-color: var(--clr-slate) !important;
  color: #FFFFFF !important;
}
.btn.bg-primary:hover,
.btn.bg-primary:focus {
  background-color: var(--clr-slate-hover) !important;
  border-color: var(--clr-slate-hover) !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .btn.bg-primary {
  background-color: transparent !important;
  border-color: var(--clr-slate) !important;
  color: var(--clr-slate) !important;
}
[data-theme="light"] .btn.bg-primary:hover,
[data-theme="light"] .btn.bg-primary:focus {
  background-color: var(--clr-slate-soft) !important;
  border-color: var(--clr-slate-hover) !important;
  color: var(--clr-slate-hover) !important;
}

/* Upload buttons — keep gold but ensure correct text-on-gold colour */
.btn.bg-warning {
  background-color: var(--clr-brand-gold) !important;
  border-color: var(--clr-brand-gold) !important;
  color: var(--clr-text-on-gold) !important;
}
.btn.bg-warning:hover {
  background-color: var(--clr-brand-gold-hover) !important;
  border-color: var(--clr-brand-gold-hover) !important;
  color: var(--clr-text-on-gold) !important;
}

/* Keep btn-success themed and clean */
.btn.bg-success,
.btn.btn-success {
  background-color: var(--clr-success) !important;
  border-color: var(--clr-success) !important;
  color: #fff !important;
}
.btn.bg-danger,
.btn.btn-danger {
  background-color: var(--clr-danger) !important;
  border-color: var(--clr-danger) !important;
  color: #fff !important;
}

/* ── .text-primary remapped to slate ────────── */
/* Bootstrap's default text-primary is #0d6efd bright blue. Pencil
   icons and other action links use it. Slate-on-dark token is
   theme-aware: #9DB3D8 on dark navy, #475569 on light cream. */
a.text-primary,
button.text-primary,
.text-primary,
.text-primary > i,
a.text-primary > i {
  color: var(--clr-slate-on-dark) !important;
}
a.text-primary:hover,
button.text-primary:hover {
  color: var(--clr-brand-gold) !important;
}

/* .text-light is Bootstrap's near-white utility. The topbar fix above
   already handles the unreadable case. Avoid broader overrides here —
   buttons and other surfaces may legitimately want white text. */


/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .page-content   { padding: 16px; }
  .type-card-glow { padding: 24px 16px 20px; }
}


/* ═══════════════════════════════════════════
   OTP SEGMENTED INPUT (single input — autofill/paste safe)
   One real <input> styled as 6 underline slots. Alignment is exact
   because in a monospace font 1ch == one digit's advance width, so each
   digit (advancing 1ch + 1ch letter-spacing = 2ch) lands over its slot.
   ═══════════════════════════════════════════ */
.otp-input {
  display: block;
  margin: 0 auto;
  border: 0;
  background: none;
  font-family: ui-monospace, 'SFMono-Regular', 'Courier New', monospace;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  letter-spacing: 1ch;          /* gap between digits */
  width: 12ch;                  /* 6 slots × 2ch — full width incl. trailing
                                   letter-spacing so the field never scrolls
                                   (scrolling would shift digits off their slots) */
  padding: 14px 0;
  color: var(--clr-text, #212529);
  caret-color: var(--clr-brand-gold);
  background-image: repeating-linear-gradient(90deg,
      var(--clr-border-focus, #ced4da) 0 1ch,   /* underline under each digit */
      transparent                      0 2ch);   /* then the gap */
  background-position: 0 100%;
  background-size: 12ch 3px;
  background-repeat: no-repeat;
}
.otp-input:focus {
  outline: none;
  background-image: repeating-linear-gradient(90deg,
      var(--clr-brand-gold, #FFC107) 0 1ch,
      transparent                    0 2ch);
}
.otp-input::placeholder { color: transparent; }   /* placeholder would break slot alignment */