/* ════════════════════════════════════════════════════════════════════
   ForUs Contrast Theme — DSG HR Intranet (single canonical theme)
   ────────────────────────────────────────────────────────────────────
   Owner directive 2026-04-29 R7 — ONE theme across the entire portal.
   Replaces light/dark/hc multi-theme + the FIX-1..FIX-7 patch layers.
   No dark mode. No data-theme variants. No duplicate token sources.
   Defensive `html body` / `!important` rules where the theme must beat
   inline page <style> hardcodes — applied centrally so individual
   pages do NOT need to be patched one-by-one.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --forus-navy:        #142B49;
  --forus-gold:        #D6B45A;

  /* Surfaces */
  --bg-page:           #F7F9FC;
  --bg-card:           #FFFFFF;
  --bg-soft:           #F1F5F9;

  /* Text */
  --text-primary:      #0F172A;
  --text-secondary:    #334155;
  --text-muted:        #64748B;
  --text-on-dark:      #FFFFFF;

  /* Lines */
  --border:            #D9E2EC;

  /* Status */
  --success:           #1F7A4D;
  --warning:           #92400E;
  --error:             #B42318;

  /* Shape */
  --radius-card:       16px;
  --radius-button:     12px;
  --radius:            var(--radius-card);
  --radius-sm:         10px;
  --radius-xs:         8px;

  /* ── Legacy aliases ───────────────────────────────────────────────────
     Existing pages reference --bg / --surface / --text / --primary /
     --navy / --gold / --teal / --gray-N and many more under various
     names. Point ALL of them at the canonical ForUs tokens so each
     page renders correctly without per-page edits. */
  --bg:                var(--bg-page);
  --surface:           var(--bg-card);
  --surface-2:         var(--bg-soft);
  --surface-3:         var(--bg-soft);
  --surface2:          var(--bg-soft);
  --card:              var(--bg-card);
  --text:              var(--text-primary);
  --text-2:            var(--text-secondary);
  --text-3:            var(--text-secondary);
  --text-light:        var(--text-muted);
  --label:             var(--text-secondary);
  --primary:           var(--forus-navy);
  --primary-hover:     #1E3A5F;
  --primary-2:         #1E3A5F;
  --primary-fg:        var(--text-on-dark);
  --navy:              var(--forus-navy);
  --navy-deep:         var(--forus-navy);
  --navy-dark:         var(--forus-navy);
  --navy-light:        #1E3A5F;
  --navy2:             #1E3A5F;
  --gold:              var(--forus-gold);
  --gold-2:            #B7991F;
  --gold-dark:         #B7991F;
  --gold-light:        #E5C787;
  --gold-shade:        #B7991F;
  --gold-fg:           var(--text-on-dark);
  --accent:            var(--forus-gold);
  --accent-hover:      #B7991F;
  --accent-soft:       rgba(214,180,90,.18);
  --muted:             var(--text-muted);
  --ink:               var(--text-primary);
  --ink-muted:         var(--text-secondary);
  --ink-ghost:         var(--text-muted);
  --border-2:          var(--border);
  --border-strong:     var(--border);
  --border-light:      var(--border);
  --gray-100:          #F8FAFC;
  --gray-200:          #F1F5F9;
  --gray-300:          var(--border);
  --gray-500:          var(--text-muted);
  --gray-700:          var(--text-secondary);
  --gray-900:          var(--text-primary);
  --teal:              var(--forus-gold);
  --teal-dark:         #B7991F;
  --teal-light:        rgba(214,180,90,.18);
  --teal-lt:           #E5C787;

  /* Status legacy aliases */
  --success-bg:        #E6F4EC;
  --success-border:    #BFE3CF;
  --warn:              var(--warning);
  --warn-bg:           #FEF3D6;
  --warn-border:       #F6D27A;
  --danger:            var(--error);
  --danger-bg:         #FCE8E6;
  --danger-border:     #F5BCB6;
  --info:              var(--forus-navy);
  --info-bg:           #E2EAF6;
  --info-border:       #B6C5DE;

  /* Pastel washes (cards, alerts, status chips) */
  --wash-mint:         #ECFDF5;  --wash-mint-line:    #A7F3D0;  --wash-mint-ink:    var(--success);
  --wash-sky:          #EFF6FF;  --wash-sky-line:     #BFDBFE;  --wash-sky-ink:     var(--forus-navy);
  --wash-amber:        #FEF3C7;  --wash-amber-line:   #FDE68A;  --wash-amber-ink:   var(--warning);
  --wash-rose:         #FEF2F2;  --wash-rose-line:    #FECACA;  --wash-rose-ink:    var(--error);
  --wash-lavender:     #F5F3FF;  --wash-lavender-line:#DDD6FE;  --wash-lavender-ink:#6D28D9;
  --wash-peach:        #FFF7ED;  --wash-peach-line:   #FED7AA;  --wash-peach-ink:   #C2410C;

  /* Tints */
  --tint-mint-bg:      #ECFDF5;  --tint-mint-text:    var(--success);
  --tint-sky-bg:       #DBEAFE;  --tint-sky-text:     var(--forus-navy);
  --tint-peach-bg:     #FFEDD5;  --tint-peach-text:   #C2410C;
  --tint-gold-bg:      #FEF3C7;  --tint-gold-text:    var(--warning);
  --tint-lav-bg:       #EDE9FE;  --tint-lav-text:     #6D28D9;
  --tint-rose-bg:      #FFE4E6;  --tint-rose-text:    var(--error);

  /* Shadows */
  --shadow-sm:         0 1px 4px rgba(20,43,73,.04);
  --shadow:            0 2px 12px rgba(20,43,73,.06);
  --shadow-md:         0 6px 18px rgba(20,43,73,.10);
  --shadow-lg:         0 22px 60px rgba(20,43,73,.18);
  --shadow-soft:       0 1px 2px rgba(20,43,73,.04), 0 4px 14px rgba(20,43,73,.06);

  /* Misc */
  --focus-ring:        var(--forus-gold);
  --selection:         rgba(214,180,90,.30);
  --scrim:             rgba(20,43,73,.55);

  color-scheme: light;
}

/* ─── Body baseline — beats inline page <style> body rules ───────────── */
html, body {
  background: var(--bg-page) !important;
  background-color: var(--bg-page) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

body, button, input, select, textarea {
  font-family: 'Inter', Arial, sans-serif;
}

::selection { background: var(--selection); color: var(--text-primary); }

/* ─── Page content surfaces ──────────────────────────────────────────── */
html body .main, html body .page, html body .content,
html body .container, html body .wrap, html body main,
html body .table, html body .form {
  color: var(--text-primary);
}

html body p, html body span, html body label, html body div,
html body td, html body th, html body li {
  color: inherit;
}

/* Class-based color utilities */
.text-secondary { color: var(--text-secondary) !important; }
.text-muted, .muted, .small { color: var(--text-muted) !important; }
.success { color: var(--success); }
.warning, .warn { color: var(--warning); }
.error, .danger { color: var(--error); }

/* ─── Cards / panels / modals ────────────────────────────────────────── */
html body .card, html body .panel, html body .modal, html body .modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
  color: var(--text-primary);
}
html body .card *, html body .panel *, html body .modal * {
  color: inherit;
}

/* ─── Forms ──────────────────────────────────────────────────────────── */
html body input[type="text"], html body input[type="email"], html body input[type="tel"],
html body input[type="number"], html body input[type="date"], html body input[type="search"],
html body input[type="password"], html body input:not([type]),
html body select, html body textarea {
  background: #FFFFFF;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
}
html body input::placeholder, html body textarea::placeholder { color: var(--text-muted); }
html body input:focus, html body select:focus, html body textarea:focus {
  outline: 2px solid var(--forus-gold);
  outline-offset: 0;
  border-color: var(--forus-gold);
}

/* ─── Buttons ────────────────────────────────────────────────────────── */
html body button.btn-primary, html body .btn.primary,
html body .btn:not(.ghost):not(.secondary):not(.danger) {
  background: var(--forus-navy);
  color: var(--text-on-dark);
  border: 1px solid var(--forus-navy);
  border-radius: var(--radius-button);
  cursor: pointer;
}
html body button.btn-primary:hover, html body .btn.primary:hover,
html body .btn:not(.ghost):not(.secondary):not(.danger):hover {
  background: #1E3A5F;
  border-color: #1E3A5F;
}
html body button.btn-secondary, html body .btn-secondary,
html body button.secondary, html body .btn.ghost, html body .btn.secondary {
  background: var(--bg-card);
  color: var(--forus-navy);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
}
html body button.btn-secondary:hover, html body .btn-secondary:hover,
html body .btn.ghost:hover, html body .btn.secondary:hover {
  background: var(--bg-soft);
  border-color: var(--forus-gold);
  color: var(--forus-navy);
}
html body .btn.danger {
  background: var(--bg-card);
  color: var(--error);
  border: 1px solid var(--danger-border);
}
html body .btn.danger:hover { background: var(--danger-bg); }

/* ─── Links ──────────────────────────────────────────────────────────── */
html body a:not(.btn):not(.nav-btn):not(.av-menu-item) { color: var(--forus-navy); }
html body a:not(.btn):not(.nav-btn):not(.av-menu-item):hover { color: var(--forus-gold); }

/* ─── Topbar — solid navy, white text, gold "ForUs" lockup ──────────── */
html body header.topbar, html body header.dsg-topbar,
html body .topbar, html body .dsg-topbar,
html body .topbar-dark, html body .nav-dark {
  background: var(--forus-navy) !important;
  background-color: var(--forus-navy) !important;
  background-image: none !important;
  color: var(--text-on-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  min-height: 90px;
  height: 90px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  position: relative;
  /* 2026-05-03 — fixes Portals dropdown stacking-context bug. The topbar
     was position:relative with no explicit z-index, so a positioned <main>
     (or any sibling that creates a stacking context) could overlay the
     dropdown panel and swallow clicks on every item except the first.
     Forcing z-index ≥ 30 here pins the topbar's stacking context above
     page content; the dropdown panel itself uses z-index 9999. */
  z-index: 30 !important;
}
@media (max-width: 720px) {
  html body header.topbar, html body header.dsg-topbar,
  html body .topbar, html body .dsg-topbar {
    height: 72px;
    min-height: 72px;
    padding: 0 16px;
  }
}
html body .topbar *, html body .dsg-topbar *,
html body header.topbar *, html body header.dsg-topbar *,
html body .topbar-dark *, html body .nav-dark * {
  color: var(--text-on-dark) !important;
}
/* "ForUs" gold name */
html body .topbar .brand .name, html body .topbar .dsg-forus-name,
html body .dsg-topbar .dsg-forus-name, html body header.topbar .name,
html body header.dsg-topbar .dsg-forus-name {
  color: var(--forus-gold) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
}
/* Nav inside topbar */
html body .topbar nav a, html body .dsg-topbar nav a {
  color: rgba(255,255,255,.78) !important;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
}
html body .topbar nav a.active, html body .topbar nav a:hover,
html body .dsg-topbar nav a.active, html body .dsg-topbar nav a:hover {
  color: var(--text-on-dark) !important;
  background: rgba(255,255,255,.10);
}

/* Approved ForUs Contracting HD lockup. The image is intentionally used as
   one complete mark, not rebuilt from cropped icon/text fragments. */
html body .forus-brand-logo {
  display: block;
  width: auto;
  height: 58px;
  max-width: 260px;
  object-fit: contain;
  flex-shrink: 0;
}
html body .topbar .forus-brand-logo,
html body .dsg-topbar .forus-brand-logo,
html body header.topbar .forus-brand-logo,
html body header.dsg-topbar .forus-brand-logo {
  height: 58px;
  max-width: min(300px, 44vw);
}
html body .admin-shell .admin-brand .forus-brand-logo,
html body .employee-shell .employee-brand .forus-brand-logo,
html body .employee-shell .me-brand .forus-brand-logo {
  width: min(220px, 100%);
  height: auto;
  max-height: 78px;
}
@media (max-width: 720px) {
  html body .forus-brand-logo {
    height: 42px;
    max-width: min(220px, 58vw);
  }
  html body .admin-shell .admin-brand .forus-brand-logo,
  html body .employee-shell .employee-brand .forus-brand-logo,
  html body .employee-shell .me-brand .forus-brand-logo {
    width: min(190px, 72vw);
    max-height: 60px;
  }
}
/* Avatar dropdown — readable navy text on white */
html body .topbar .av-menu, html body .dsg-topbar .av-menu,
html body .topbar .av-menu *, html body .dsg-topbar .av-menu * {
  color: var(--forus-navy) !important;
  background-color: var(--bg-card) !important;
}

/* ─── Sidebar — navy with white text, gold active accent ─────────────── */
html body aside.sidebar, html body .sidebar {
  background: var(--forus-navy) !important;
  color: var(--text-on-dark) !important;
}
html body aside.sidebar *, html body .sidebar * {
  color: var(--text-on-dark);
}
html body aside.sidebar a, html body aside.sidebar .nav-btn,
html body aside.sidebar button,
html body .sidebar a, html body .sidebar .nav-btn, html body .sidebar button {
  color: rgba(255,255,255,.78);
}
html body aside.sidebar a:hover, html body aside.sidebar .nav-btn:hover,
html body aside.sidebar button:hover,
html body .sidebar a:hover, html body .sidebar .nav-btn:hover, html body .sidebar button:hover,
html body aside.sidebar .nav-item:hover, html body .sidebar .nav-item:hover {
  color: var(--text-on-dark);
  background: rgba(255,255,255,.08);
}
html body aside.sidebar a.active, html body aside.sidebar .nav-btn.active,
html body aside.sidebar .nav-item.active,
html body .sidebar a.active, html body .sidebar .nav-btn.active,
html body .sidebar .nav-item.active {
  background: rgba(214,180,90,.18);
  color: var(--text-on-dark);
  border-left: 4px solid var(--forus-gold);
}
html body aside.sidebar .section-label, html body aside.sidebar .group-label,
html body .sidebar .section-label, html body .sidebar .group-label {
  color: var(--forus-gold);
}
html body aside.sidebar input, html body .sidebar input {
  background: rgba(255,255,255,.06);
  color: var(--text-on-dark);
  border-color: rgba(255,255,255,.12);
}
html body aside.sidebar input::placeholder, html body .sidebar input::placeholder {
  color: rgba(255,255,255,.55);
}

/* ─── Hero card (dark navy bg) — keep light text for contrast ────────── */
html body main .hero, html body .hero {
  background: var(--forus-navy);
  color: var(--text-on-dark);
}
html body main .hero h1, html body main .hero h2, html body main .hero h3,
html body .hero h1, html body .hero h2, html body .hero h3 {
  color: var(--text-on-dark);
}
html body main .hero p, html body main .hero .sub, html body main .hero .narr,
html body .hero p, html body .hero .sub, html body .hero .narr {
  color: rgba(255,255,255,.88);
}
html body main .hero .eyebrow, html body .hero .eyebrow,
html body main .hero .label, html body .hero .label {
  color: var(--forus-gold);
}

/* ─── Page-level headings — navy on light page ───────────────────────── */
html body main h1:not(:where(.card *, .panel *, .modal *, .alert *, .toast *, .stat *, .stub *, .hero *, .feed-item *, .topbar *, .sidebar *)),
html body main h2:not(:where(.card *, .panel *, .modal *, .alert *, .toast *, .stat *, .stub *, .hero *, .feed-item *, .topbar *, .sidebar *)),
html body main .pg-title, html body main .page-hd h1, html body main .dash-title,
html body main .ph h1, html body main .pg-hd h1,
html body .container > h1, html body .container > h2,
html body .wrap > h1, html body .wrap > h2 {
  color: var(--forus-navy) !important;
}
html body main .pg-sub, html body main .page-hd .sub, html body main .dash-sub,
html body main .ph p, html body main .pg-hd .sub, html body main .pg-hd p:first-of-type,
html body .container > .subtle, html body .wrap > .subtle, html body main > .subtle {
  color: var(--text-secondary) !important;
}

/* ─── Breadcrumbs ────────────────────────────────────────────────────── */
html body .crumb, html body a.crumb {
  color: var(--text-secondary);
  text-decoration: none;
}
html body .crumb:hover, html body a.crumb:hover { color: var(--forus-navy); }
html body .crumb svg { color: var(--forus-gold); }

/* ─── Tables ─────────────────────────────────────────────────────────── */
html body table { color: var(--text-primary); }
html body table th {
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--bg-soft);
}
html body table td { color: var(--text-primary); border-bottom: 1px solid var(--border); }
html body table tbody tr:hover td { background: var(--bg-soft); }

/* ─── Badges / pills ─────────────────────────────────────────────────── */
html body .badge, html body .status-pill, html body .pill {
  color: var(--text-primary);
  background: var(--bg-soft);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body .pill.success, html body .badge-active, html body .badge-approved, html body .badge-complete,
html body .pill.completed {
  color: var(--text-on-dark) !important;
  background: var(--success);
}
html body .pill.warn, html body .pill.warning, html body .pill.in-progress {
  color: var(--text-on-dark) !important;
  background: var(--warning);
}
html body .pill.danger, html body .pill.error, html body .pill.overdue,
html body .badge-inactive, html body .badge-denied, html body .badge-terminated {
  color: var(--text-on-dark) !important;
  background: var(--error);
}
html body .pill.assigned {
  color: var(--text-primary);
  background: var(--bg-soft);
}

/* ─── Toast / alert ──────────────────────────────────────────────────── */
html body .toast {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--forus-gold);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-lg);
}
html body .toast.success, html body .toast.ok { border-left-color: var(--success); }
html body .toast.error, html body .toast.danger { border-left-color: var(--error); }
html body .toast.warn, html body .toast.warning { border-left-color: var(--warning); }

html body .alert, html body .alert-info {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
}
html body .alert.warn, html body .alert.warning {
  border-left: 4px solid var(--warning) !important;
}
html body .alert.ok, html body .alert.success {
  border-left: 4px solid var(--success) !important;
}

/* ─── Modal overlay / mask ───────────────────────────────────────────── */
html body .modal-overlay, html body .modal-bg, html body .mask {
  background: var(--scrim) !important;
  backdrop-filter: blur(4px);
}

/* ════════════════════════════════════════════════════════════════════
   EMPLOYEE ROW — canonical structure for assign-training, employee
   pickers, and any [checkbox][Name][Email][Department] list.
   ════════════════════════════════════════════════════════════════════ */
.employee-row, .emp-row {
  display: grid;
  grid-template-columns: 44px 1.4fr 1.4fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
}
.employee-row:hover, .emp-row:hover { background: var(--bg-soft); }
.employee-row * , .emp-row * { color: var(--text-primary); }
.employee-row .name, .emp-row .name,
.employee-row .emp-name, .emp-row .emp-name {
  font-weight: 600;
  color: var(--text-primary);
}
.employee-row .email, .emp-row .email,
.employee-row .department, .emp-row .department,
.employee-row .emp-email, .emp-row .emp-email,
.employee-row .emp-dept, .emp-row .emp-dept {
  color: var(--text-secondary);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-row input[type="checkbox"], .emp-row input[type="checkbox"] {
  justify-self: center;
  margin: 0;
  accent-color: var(--forus-gold);
  cursor: pointer;
  width: 18px;
  height: 18px;
}
@media (max-width: 720px) {
  .employee-row, .emp-row {
    grid-template-columns: 36px 1fr;
    gap: 6px 10px;
    padding: 10px 12px;
  }
  .employee-row .email, .emp-row .email,
  .employee-row .department, .emp-row .department,
  .employee-row .emp-email, .emp-row .emp-email,
  .employee-row .emp-dept, .emp-row .emp-dept {
    grid-column: 2 / -1;
    font-size: 11.5px;
  }
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
html body .dsg-footer { color: var(--text-muted); }
html body .dsg-footer a { color: var(--text-muted); }
html body .dsg-footer a:hover { color: var(--forus-gold); }

/* ─── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(20,43,73,.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(20,43,73,.30); }

/* ─── Avatar ─────────────────────────────────────────────────────────── */
html body .avatar, html body .sidebar-avatar, html body .user-avatar {
  background: linear-gradient(135deg, var(--bg-soft), #E5C787);
  color: var(--forus-navy);
  border: 2px solid var(--forus-gold);
}

/* ════════════════════════════════════════════════════════════════════
   END ForUs Contrast Theme
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   TOPBAR RIGHT-CLUSTER LOCK (2026-04-29 R7.1)
   ────────────────────────────────────────────────────────────────────
   Owner directive: avatar must sit on the OPPOSITE side of the brand
   lockup, across every page. The SPA + several admin pages wrap the
   avatar in .actions / .topbar-actions / .nav-right / .av-wrap / .me /
   .av directly under the topbar but with no rule pushing it to the
   right edge — so it currently packs left next to .brand.

   Force every known right-cluster to flex out to the right edge.
   Direct-child selectors (>) keep this safe inside cards / panels that
   may also use these class names.
   ════════════════════════════════════════════════════════════════════ */
html body header.topbar > .actions,            html body .topbar > .actions,
html body header.dsg-topbar > .actions,        html body .dsg-topbar > .actions,
html body header.topbar > .topbar-actions,     html body .topbar > .topbar-actions,
html body header.dsg-topbar > .topbar-actions, html body .dsg-topbar > .topbar-actions,
html body header.topbar > .nav-right,          html body .topbar > .nav-right,
html body header.dsg-topbar > .nav-right,      html body .dsg-topbar > .nav-right,
html body header.topbar > .me,                 html body .topbar > .me,
html body header.dsg-topbar > .me,             html body .dsg-topbar > .me,
html body header.topbar > .av-wrap,            html body .topbar > .av-wrap,
html body header.dsg-topbar > .av-wrap,        html body .dsg-topbar > .av-wrap,
html body header.topbar > .av,                 html body .topbar > .av,
html body header.dsg-topbar > .av,             html body .dsg-topbar > .av,
html body header.site-header > .actions,       html body .site-header > .actions,
html body header.site-header > .topbar-actions,html body .site-header > .topbar-actions,
html body header.site-header > .nav-right,     html body .site-header > .nav-right,
html body header.site-header > .av-wrap,       html body .site-header > .av-wrap,
html body header.site-header > .av,            html body .site-header > .av {
  margin-left: auto !important;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* When the avatar lives directly inside .brand (rare SPA shape), pull it
   out of the brand cluster and pin to the topbar's right edge. */
html body header.topbar .brand > .av-wrap,
html body header.topbar .brand > .av,
html body header.dsg-topbar .brand > .av-wrap,
html body header.dsg-topbar .brand > .av,
html body header.site-header .brand > .av-wrap,
html body header.site-header .brand > .av {
  position: absolute !important;
  right: 32px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
}
@media (max-width: 720px) {
  html body header.topbar .brand > .av-wrap,
  html body header.topbar .brand > .av,
  html body header.dsg-topbar .brand > .av-wrap,
  html body header.dsg-topbar .brand > .av,
  html body header.site-header .brand > .av-wrap,
  html body header.site-header .brand > .av {
    right: 16px !important;
  }
}
/* ════════════════════════════════════════════════════════════════════
   ADMIN SHELL — single shared layout for /admin/* pages (R7.2)
   ────────────────────────────────────────────────────────────────────
   Owner directive 2026-04-29: every admin sub-page must render inside
   the same .admin-shell. The dsg-admin-shell.js injector wraps existing
   page markup at load; these styles do the rest. Skip-link is hidden
   unless keyboard-focused; legacy "Back / Dashboard" sub-bars + the
   in-page topbar are hidden once the shell is active.
   ════════════════════════════════════════════════════════════════════ */

/* ── Skip-link — only visible on keyboard focus ─────────────────────── */
.skip-link, a[href="#main"], a.skip-to-main {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.skip-link:focus, a[href="#main"]:focus, a.skip-to-main:focus {
  left: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: auto !important;
  z-index: 9999 !important;
  background: #FFFFFF !important;
  color: var(--forus-navy) !important;
  padding: 10px 14px !important;
  border: 2px solid var(--forus-gold) !important;
  border-radius: 8px !important;
  overflow: visible !important;
}

/* ── Once admin-shell is mounted, hide legacy chrome on the page ────── */
html body.admin-has-shell > header.topbar,
html body.admin-has-shell > header.dsg-topbar,
html body.admin-has-shell > header.site-header,
html body .admin-shell .admin-content > header.topbar,
html body .admin-shell .admin-content > header.dsg-topbar,
html body .admin-shell .admin-content > header.site-header {
  display: none !important;
}
html body.admin-has-shell > .nav-strip,
html body.admin-has-shell > .dsg-back-strip,
html body .admin-shell .nav-strip,
html body .admin-shell .dsg-back-strip,
html body .admin-shell [data-dsg-page-nav-strip] {
  display: none !important;
}

/* ── Shell grid ─────────────────────────────────────────────────────── */
html body .admin-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
html body .admin-shell .admin-sidebar {
  background: var(--forus-navy) !important;
  color: var(--text-on-dark) !important;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
}
html body .admin-shell .admin-sidebar * { color: var(--text-on-dark); }

html body .admin-shell .admin-sidebar-logo {
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
html body .admin-shell .admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-on-dark);
}
html body .admin-shell .admin-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}
html body .admin-shell .admin-brand-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--forus-gold) !important;
  letter-spacing: 0.5px;
}
html body .admin-shell .admin-brand-tag {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9px;
  color: var(--text-on-dark) !important;
  letter-spacing: 1.5px;
}
html body .admin-shell .admin-shell-badge {
  background: rgba(214,180,90,.15);
  color: var(--forus-gold) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  align-self: flex-start;
  border: 1px solid rgba(214,180,90,.30);
}

html body .admin-shell .admin-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
}
html body .admin-shell .admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255,255,255,.78) !important;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: background .12s, color .12s;
}
html body .admin-shell .admin-nav-item svg {
  width: 18px; height: 18px; flex-shrink: 0; color: currentColor;
}
html body .admin-shell .admin-nav-item:hover {
  color: var(--text-on-dark) !important;
  background: rgba(255,255,255,.06);
}
html body .admin-shell .admin-nav-item.active {
  color: var(--text-on-dark) !important;
  background: rgba(214,180,90,.18);
  border-left-color: var(--forus-gold);
}

html body .admin-shell .admin-sidebar-foot {
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
html body .admin-shell .admin-signout {
  width: 100%;
  background: rgba(255,255,255,.06);
  color: var(--text-on-dark) !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
html body .admin-shell .admin-signout:hover {
  background: rgba(214,180,90,.20);
  border-color: var(--forus-gold);
}

/* ── Main column ────────────────────────────────────────────────────── */
html body .admin-shell .admin-main {
  min-width: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
}

/* ── Admin topbar (single source of truth, opposite-side avatar) ────── */
html body .admin-shell .admin-topbar {
  height: 88px;
  min-height: 88px;
  background: var(--forus-navy) !important;
  color: var(--text-on-dark) !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 32px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
html body .admin-shell .admin-topbar * { color: var(--text-on-dark) !important; }
html body .admin-shell .admin-topbar-spacer { flex: 1; }
html body .admin-shell .admin-topbar-actions { display: flex; align-items: center; gap: 14px; }
html body .admin-shell .admin-topbar-link {
  color: rgba(255,255,255,.85) !important;
  text-decoration: none;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
}
html body .admin-shell .admin-topbar-link:hover {
  background: rgba(255,255,255,.10);
  color: var(--text-on-dark) !important;
}
html body .admin-shell .admin-topbar-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(214,180,90,.40);
  background: rgba(255,255,255,.06);
  color: var(--forus-gold) !important;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body .admin-shell .admin-topbar-av:hover { background: rgba(214,180,90,.18); }

/* ── Content ────────────────────────────────────────────────────────── */
html body .admin-shell .admin-content {
  flex: 1;
  padding: 32px;
  min-width: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  overflow-x: hidden;
}
html body .admin-shell .admin-content { color: var(--text-primary); }
html body .admin-shell .admin-content .card,
html body .admin-shell .admin-content .panel,
html body .admin-shell .admin-content .table-wrap,
html body .admin-shell .admin-content .admin-card {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

/* Existing page wrappers nested inside .admin-content shouldn't add
   their own viewport margins (the shell already provides padding). */
html body .admin-shell .admin-content > .wrap,
html body .admin-shell .admin-content > .container,
html body .admin-shell .admin-content > .content-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ── Mobile (≤980px): sidebar collapses to a horizontal nav ─────────── */
@media (max-width: 980px) {
  html body .admin-shell { grid-template-columns: 1fr; }
  html body .admin-shell .admin-sidebar {
    position: static;
    height: auto;
    min-height: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  html body .admin-shell .admin-sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
  }
  html body .admin-shell .admin-nav-item {
    flex-shrink: 0;
    padding: 8px 12px;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }
  html body .admin-shell .admin-nav-item.active {
    border-left: 0;
    border-bottom-color: var(--forus-gold);
  }
  html body .admin-shell .admin-sidebar-foot { display: none; }
  html body .admin-shell .admin-content { padding: 18px; }
  html body .admin-shell .admin-topbar { height: 64px; min-height: 64px; padding: 0 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   END ADMIN SHELL
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   R7.3 — SOURCE-HTML SHELL (admin + employee), skip-link, deprecated
   layout cleanup. Owner directive 2026-04-29.
   ────────────────────────────────────────────────────────────────────
   The shell now lives in source HTML on every page. These rules style
   it. The .skip-link CSS uses transform off-screen until :focus and is
   scoped to the .skip-link class only — generic a[href="#main"]
   selectors are NOT used (they would catch innocuous in-page links).
   Legacy admin.html still uses .shell/.sidebar/.main; those are
   aliased to the same admin-* visual rules so admin.html renders
   identically without rewriting its 367KB of SPA markup.
   ════════════════════════════════════════════════════════════════════ */

/* ── Skip link — ONE class, hidden via transform until focused ──────── */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 99999;
  transform: translateY(-160%);
  background: #FFFFFF;
  color: var(--forus-navy, #142B49);
  border: 2px solid var(--forus-gold, #D6B45A);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .12s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 0;
}

/* Defensive: hide any legacy .dsg-skip-link element that older cached
   bundles of dsg-a11y.js may have already injected before the stub
   replaced it. */
.dsg-skip-link, a.dsg-skip-link {
  position: fixed !important;
  top: 12px;
  left: 12px;
  z-index: 99999;
  transform: translateY(-160%);
  background: #FFFFFF;
  color: var(--forus-navy, #142B49);
  border: 2px solid var(--forus-gold, #D6B45A);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
}
.dsg-skip-link:focus, a.dsg-skip-link:focus { transform: translateY(0); }

/* Defensive: hide any back/dashboard sub-bar that older cached
   bundles of dsg-page-nav.js may have already painted. */
[data-dsg-page-nav], [data-dsg-page-nav-strip], .dsg-back-strip,
.nav-strip:where([data-dsg-injected]) {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   ADMIN SHELL (source HTML on every /admin/*.html) +
   LEGACY ALIAS for admin.html which still uses .shell/.sidebar/.main
   ════════════════════════════════════════════════════════════════════ */

html body .admin-shell,
html body > div.shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
}

/* Sidebar (new + legacy aliases) */
html body .admin-shell .admin-sidebar,
html body > div.shell > aside.sidebar {
  background: var(--forus-navy) !important;
  color: var(--text-on-dark) !important;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}
html body .admin-shell .admin-sidebar *,
html body > div.shell > aside.sidebar * { color: var(--text-on-dark); }

/* Sidebar logo block (new) */
html body .admin-shell .admin-sidebar-logo {
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
html body .admin-shell .admin-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
html body .admin-shell .admin-brand-text {
  display: flex; flex-direction: column; line-height: 1; gap: 3px;
}
html body .admin-shell .admin-brand-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--forus-gold) !important;
  letter-spacing: 0.5px;
}
html body .admin-shell .admin-brand-tag {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9px;
  color: var(--text-on-dark) !important;
  letter-spacing: 1.5px;
}
html body .admin-shell .admin-shell-badge {
  background: rgba(214,180,90,.15);
  color: var(--forus-gold) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  align-self: flex-start;
  border: 1px solid rgba(214,180,90,.30);
}

/* Sidebar nav (new) */
html body .admin-shell .admin-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
}
html body .admin-shell .admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255,255,255,.78) !important;
  font-size: 13.5px;
  font-weight: 500;
  border-left: 4px solid transparent;
  transition: background .12s, color .12s;
}
html body .admin-shell .admin-nav-item svg {
  width: 18px; height: 18px; flex-shrink: 0; color: currentColor;
}
html body .admin-shell .admin-nav-item:hover {
  color: var(--text-on-dark) !important;
  background: rgba(255,255,255,.06);
}
html body .admin-shell .admin-nav-item.active {
  color: var(--text-on-dark) !important;
  background: rgba(214,180,90,.18);
  border-left-color: var(--forus-gold);
}

html body .admin-shell .admin-sidebar-foot {
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
html body .admin-shell .admin-signout {
  width: 100%;
  background: rgba(255,255,255,.06);
  color: var(--text-on-dark) !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
html body .admin-shell .admin-signout:hover {
  background: rgba(214,180,90,.20);
  border-color: var(--forus-gold);
}

/* Workspace + main column (new + legacy aliases) */
html body .admin-shell .admin-workspace,
html body > div.shell > .main {
  min-width: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
}

/* Admin topbar (new) + legacy admin.html .topbar inside .shell */
html body .admin-shell .admin-topbar,
html body > div.shell > .main > header.topbar,
html body > div.shell .main header.topbar {
  height: 88px;
  min-height: 88px;
  background: var(--forus-navy) !important;
  color: var(--text-on-dark) !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 32px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  flex-shrink: 0;
  position: relative !important;
}
html body .admin-shell .admin-topbar * { color: var(--text-on-dark) !important; }
html body .admin-shell .admin-topbar-spacer { flex: 1; }
html body .admin-shell .admin-topbar-actions { display: flex; align-items: center; gap: 14px; }
html body .admin-shell .admin-topbar-link {
  color: rgba(255,255,255,.85) !important;
  text-decoration: none;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
}
html body .admin-shell .admin-topbar-link:hover {
  background: rgba(255,255,255,.10);
  color: var(--text-on-dark) !important;
}
html body .admin-shell .admin-topbar-av {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(214,180,90,.40);
  background: rgba(255,255,255,.06);
  color: var(--forus-gold) !important;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html body .admin-shell .admin-topbar-av:hover { background: rgba(214,180,90,.18); }

/* Main content area (new) */
html body .admin-shell .admin-main {
  flex: 1;
  padding: 32px;
  min-width: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  overflow-x: hidden;
}
html body .admin-shell .admin-main .card,
html body .admin-shell .admin-main .panel,
html body .admin-shell .admin-main .table-wrap,
html body .admin-shell .admin-main .admin-card {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

/* Existing page wrappers nested inside .admin-main shouldn't add their
   own viewport margins (the shell already provides padding). */
html body .admin-shell .admin-main > .wrap,
html body .admin-shell .admin-main > .container,
html body .admin-shell .admin-main > .content-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Footer (new) */
html body .admin-shell .admin-footer,
html body .employee-shell .admin-footer {
  height: 56px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 32px;
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
html body .admin-shell .admin-footer a,
html body .employee-shell .admin-footer a {
  color: var(--text-secondary);
  text-decoration: none;
}
html body .admin-shell .admin-footer a:hover,
html body .employee-shell .admin-footer a:hover { color: var(--forus-navy); }
html body .admin-shell .admin-footer-spacer,
html body .employee-shell .admin-footer-spacer { flex: 1; }

/* ════════════════════════════════════════════════════════════════════
   EMPLOYEE SHELL (me.html, content centered, no sidebar)
   ════════════════════════════════════════════════════════════════════ */
html body .employee-shell {
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
}
html body .employee-shell > .admin-topbar.employee-topbar {
  background: var(--forus-navy) !important;
  color: var(--text-on-dark) !important;
  height: 88px;
  min-height: 88px;
  padding: 0 32px !important;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
html body .employee-shell .employee-topbar * { color: var(--text-on-dark) !important; }
html body .employee-shell .employee-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
html body .employee-shell .employee-brand .admin-brand-name {
  color: var(--forus-gold) !important;
}
html body .employee-shell .employee-main {
  flex: 1;
  background: var(--bg-page);
  color: var(--text-primary);
  padding: 32px;
}
html body .employee-shell .employee-main > .container,
html body .employee-shell .employee-main > .wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}

/* ════════════════════════════════════════════════════════════════════
   Mobile breakpoint (≤980px) — sidebar collapses to horizontal nav
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  html body .admin-shell { grid-template-columns: 1fr; }
  html body .admin-shell .admin-sidebar {
    position: static;
    height: auto;
    min-height: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
    overflow: visible;
  }
  html body .admin-shell .admin-sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
  }
  html body .admin-shell .admin-nav-item {
    flex-shrink: 0;
    padding: 8px 12px;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }
  html body .admin-shell .admin-nav-item.active {
    border-left: 0;
    border-bottom-color: var(--forus-gold);
  }
  html body .admin-shell .admin-sidebar-foot { display: none; }
  html body .admin-shell .admin-main { padding: 18px; }
  html body .admin-shell .admin-topbar { height: 64px; min-height: 64px; padding: 0 16px !important; }
  html body .employee-shell > .admin-topbar.employee-topbar { height: 64px; padding: 0 16px !important; }
  html body .employee-shell .employee-main { padding: 18px; }
  html body .admin-shell .admin-footer,
  html body .employee-shell .admin-footer { padding: 0 16px; height: auto; flex-wrap: wrap; padding: 12px 16px; }
}

/* ─── ForUs brand logo image — fills its parent wrapper, preserves aspect ─
   Class introduced 2026-05-02 by the brand standardization commit (5febd553)
   which replaced inline SVGs with <img class="forus-brand-logo" src=...>
   on ~50 admin/portal pages. The class was added to the markup but the
   matching CSS rule was missing — the <img> rendered at the PNG's natural
   size and overflowed its container, double-rendering against adjacent
   text. This rule constrains the image to fill (and only fill) its
   parent wrapper, which each page sizes appropriately.
   Per the trademarked-logo rule, only sizing/fit is set here — never
   color, filter, or any visual transform of the asset itself. */
.forus-brand-logo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ════════════════════════════════════════════════════════════════════
   END R7.3
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   360 CHROME FIX — 2026-06-19 (shared, every page)
   The universal 'header.topbar * / .admin-topbar * / .employee-topbar *
   { color: var(--text-on-dark) !important }' rules above force WHITE text onto
   the WHITE dropdown popovers that overlay the dark top bars (the avatar menu
   and the cross-portal menu) -> white-on-white -> the "empty white panel".
   Double-classed selectors outrank that universal rule and restore readable
   popovers on EVERY page. (See feedback_fixed_means_live_not_branch.)
   ════════════════════════════════════════════════════════════════════════ */
html body .av-menu.av-menu, html body .av-menu.av-menu * { color:#0F2A44 !important; }
html body .av-menu.av-menu [id$="Email"] { color:#1e293b !important; }
html body .av-menu.av-menu .av-menu-item svg { stroke:#0F2A44 !important; color:#0F2A44 !important; }
html body .av-menu.av-menu button[role="menuitem"] { color:#B91C1C !important; }
html body .av-menu.av-menu button[role="menuitem"] svg { stroke:#B91C1C !important; color:#B91C1C !important; }
/* Cross-portal dropdown is a white popover with its own dark items; un-break the text. */
html body .dsg-ps-menu.dsg-ps-menu .dsg-ps-item, html body .dsg-ps-menu.dsg-ps-menu .dsg-ps-item * { color:#0F2A44 !important; background:transparent !important; }
html body .dsg-ps-menu.dsg-ps-menu .dsg-ps-item:hover, html body .dsg-ps-menu.dsg-ps-menu .dsg-ps-item:focus { background:#F1F5F9 !important; color:#0A2540 !important; }
/* me.html: the centered 'My Profile' badge collided with the injected cross-portal NAME chip,
   which is redundant there (the email is already shown). Hide just the chip; keep the Portals button. */
html body .me-topbar .dsg-ps-name { display:none !important; }

/* ── PR4: Knowledge Center + Compliance badge + progress tokens ────────── */
:root {
  /* Badge tokens */
  --badge-risk-bg: #FEE2E2;
  --badge-risk-text: #B91C1C;
  --badge-warn-bg: #FEF3C7;
  --badge-warn-text: #92400E;
  --badge-ok-bg: #D1FAE5;
  --badge-ok-text: #065F46;
  --badge-info-bg: #DBEAFE;
  --badge-info-text: #1E40AF;

  /* Progress ring tokens */
  --progress-track: #E5EAF0;
  --progress-fill: var(--brand-navy, #042C53);
  --progress-text: var(--brand-navy, #042C53);
  --progress-size: 56px;
  --progress-stroke: 5px;

  /* Knowledge center category tokens */
  --knowledge-handbook-bg: #EFF6FF;
  --knowledge-handbook-border: #BFDBFE;
  --knowledge-policy-bg: #F0FDF4;
  --knowledge-policy-border: #BBF7D0;
  --knowledge-notice-bg: #FFFBEB;
  --knowledge-notice-border: #FDE68A;
  --knowledge-training-bg: #FAF5FF;
  --knowledge-training-border: #E9D5FF;
}