/* ============================================================
 * NextGen MIS — Chrome (visual styling of the shell)
 * ------------------------------------------------------------
 * Geometry lives in _layout.css. This file styles the look of:
 *   - Top bar internals (toggle, brand lockup, context cue, user)
 *   - Sidebar nav (deep forest, spacing, icons, arrows, dividers)
 *   - Page title / portlet title
 *   - Footer text
 *   - Login touch-ups
 * ============================================================ */

/* ============================================================
 * TOP BAR INTERNALS
 * ============================================================ */

/* Collapse toggle */
.ng-topbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.ng-topbar__toggle:hover {
  background: var(--color-bg-sunken);
  color: var(--color-text-strong);
}
.ng-topbar__toggle i { font-size: var(--font-size-xl); }

/* Brand lockup (in the white top bar) */
.ng-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}
.ng-brand:hover { text-decoration: none; background: var(--color-bg-raised); }
/* The top header is mobile-only, so its brand IS the mobile branding — shown. */

/* Mobile account avatar — top-right of the mobile header */
.ng-mobile-account { margin-left: auto; flex: 0 0 auto; }
.ng-mobile-avatar {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1);
  text-decoration: none !important;
  cursor: pointer;
}
.ng-mobile-account .dropdown-menu { right: 0; left: auto; }
.ng-mobile-account .dropdown-menu > li > a {
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-3) !important;
  font-family: var(--font-family-ui) !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--color-text-default) !important;
}
.ng-mobile-account .dropdown-menu > li > a > i { width: 18px; text-align: center; color: var(--color-text-muted); }

/* Dropdown menus — vendor Bootstrap hardcodes #fff bg, #333 item text and #e5e5e5
   divider, all of which break dark mode. Token-drive every .dropdown-menu so it
   flips; the light values match the vendor look. */
.dropdown-menu {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-default);
}
.dropdown-menu > li > a {
  color: var(--color-text-default);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--color-bg-sunken);
  color: var(--color-text-strong);
}
.dropdown-menu .divider,
.dropdown-menu li.divider,
.ng-mobile-account .dropdown-menu .divider {
  background-color: var(--color-border-default) !important;   /* a more-specific Metronic header rule kept this white */
  border-color: var(--color-border-default) !important;
}

/* Modals — vendor Bootstrap hardcodes a #fff .modal-content panel and #e5e5e5
   header/footer rules, so a modal opening in dark mode flashes a white panel.
   Token-drive the panel + its dividers so it flips; body text inherits the
   themed body colour. The backdrop is already black, so it needs nothing. */
.modal-content {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-default);
}
.modal-header { border-bottom-color: var(--color-border-default); }
.modal-footer { border-top-color: var(--color-border-default); }

/* Alerts — match Feedback — alerts & badges (/design-system#feedback).
   Soft tinted fill + tone border + tone text. Semantic feedback tokens so
   both themes stay AA. Compound `.alert.alert-X` to out-specify Metronic. */
.alert.alert-info {
  background-color: var(--color-feedback-info-bg);
  border-color: var(--color-feedback-info);
  color: var(--color-feedback-info);
}
.alert.alert-success {
  background-color: var(--color-feedback-success-bg);
  border-color: var(--color-feedback-success);
  color: var(--color-feedback-success);
}
.alert.alert-warning {
  background-color: var(--color-feedback-warning-bg);
  border-color: var(--color-feedback-warning);
  color: var(--color-feedback-warning);
}
.alert.alert-danger {
  background-color: var(--color-feedback-danger-bg);
  border-color: var(--color-feedback-danger);
  color: var(--color-feedback-danger);
}

/* Toast stack — same Feedback alert anatomy (icon + body), floating.
   Driven by window.notify() in public/js/custom.js. */
#js-toast-container {
  position: fixed;
  top: calc(var(--topbar-height) + var(--space-3));
  right: var(--space-5);
  z-index: var(--z-toast);
  width: 360px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}
body.login #js-toast-container {
  top: var(--space-5);
}
#js-toast-container .js-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  padding-right: 36px;
  border-radius: var(--radius-md);
  border-width: 1px;
  border-style: solid;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}
#js-toast-container .js-toast__icon {
  margin-top: 2px;
  font-size: 16px;
  flex-shrink: 0;
}
#js-toast-container .js-toast__body {
  flex: 1;
  min-width: 0;
}
#js-toast-container .js-toast > .close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  color: inherit;
  opacity: 0.7;
  text-shadow: none;
}
#js-toast-container .js-toast > .close:hover,
#js-toast-container .js-toast > .close:focus {
  opacity: 1;
  color: inherit;
}
#js-toast-container .js-toast--clickable {
  cursor: pointer;
}
#js-toast-container .js-toast--clickable .close {
  cursor: pointer;
}

.ng-brand__mark { height: 36px; width: auto; display: block; flex: 0 0 auto; }
.ng-brand__lockup { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.ng-brand__name {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing-tight);
}
.ng-brand__byline {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-regular);
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Vertical divider between brand and the active-section cue — a pseudo-element
   so its height is explicit (taller than the text). */
.ng-context {
  position: relative;
  padding-left: var(--space-5);
  margin-left: var(--space-3);
}
.ng-context::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: var(--color-border-default);
}

/* Active-section orientation cue */
.ng-context {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 auto;
  min-width: 0;
}
.ng-context__divider {
  width: 1px;
  height: 28px;
  background: var(--color-border-default);
  margin: 0 var(--space-2);
  flex: 0 0 auto;
}
.ng-context__icon {
  font-size: 25px;                       /* the primary page identifier */
  color: var(--color-brand-secondary);
  flex: 0 0 auto;
}
.ng-context__title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);        /* 20px — clear page title in the top bar */
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right cluster (user menu) — neutralise Metronic's float/fixed-height layout
   (it gives .page-top height:68px + #BAC0B6 bg, floats .top-menu right, and
   makes the dropdown li 68px tall with 24px padding — which clipped the avatar). */
.ng-topbar .page-top.ng-topbar__right {
  position: static !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;     /* kill layout-app.css's 0 1px 10px shadow box around the account cluster */
  float: none !important;
  margin-left: auto !important;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
}
.ng-topbar__right .top-menu {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
}
.ng-topbar__right .top-menu .navbar-nav {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
}
.ng-topbar__right .top-menu .navbar-nav > li,
.ng-topbar__right .top-menu .navbar-nav > li.dropdown,
.ng-topbar__right .top-menu .navbar-nav > li.dropdown-user {
  float: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
}
.ng-topbar__right .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle.ng-user {
  height: auto !important;
  padding: var(--space-1) var(--space-2) !important;
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
}

.ng-user {
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) !important;
  border-radius: var(--radius-md);              /* match the brand-logo hover shape */
  background: transparent !important;
}
.ng-user:hover { background: var(--color-bg-raised) !important; }  /* match .ng-brand:hover */
/* Clean initials avatar — no yellow box, brand gradient circle */
.ng-user__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: #3E4576;   /* solid blue primary (was a sage→navy gradient) */
  color: #fff;
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  line-height: 1;
  border: none;
  box-shadow: none;
  user-select: none;
}

/* Never show a white/grey box behind the avatar toggle — even when the dropdown is open */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle.ng-user,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user.open > .dropdown-toggle.ng-user,
.page-header.navbar .top-menu .navbar-nav > li.dropdown.open > .dropdown-toggle.ng-user {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.ng-user:hover,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-toggle.ng-user:hover {
  background-color: var(--color-bg-raised) !important;   /* match .ng-brand:hover */
}
.ng-user__name {
  font-family: var(--font-family-ui) !important;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base) !important;
  color: var(--color-text-default) !important;
  text-shadow: none !important;
}
.ng-user__caret {
  color: var(--color-text-faint) !important;
  font-size: var(--font-size-sm) !important;
  text-shadow: none !important;
}

/* User dropdown menu */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-menu {
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  padding: var(--space-1) 0;
  margin-top: var(--space-2);
  min-width: 200px;
  /* anchor to the right edge of the toggle so it never overflows the viewport */
  right: var(--space-4) !important;
  left: auto !important;
}
/* Remove Metronic's dropdown pointer triangle (the "double dropdown" artefact),
   which mispositions once the menu is right-aligned. */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-menu:before,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-menu:after {
  display: none !important;
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-menu > li > a {
  font-family: var(--font-family-ui) !important;
  font-size: var(--font-size-base);
  color: var(--color-text-default);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-menu > li > a:hover {
  background: var(--color-bg-raised);
  color: var(--color-text-strong);
}
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user .dropdown-menu > li.divider {
  background: var(--color-border-subtle);
  margin: var(--space-1) 0;
}

/* ============================================================
 * SIDEBAR BRAND (top of full-height sidebar)
 * ============================================================ */
.ng-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--topbar-height);
  padding: var(--space-3) var(--space-3);
  text-decoration: none;
  flex: 0 0 auto;
}
.ng-sidebar-brand:hover { text-decoration: none; background: transparent; }
.ng-sidebar-brand__mark { height: 64px; width: auto; display: block; flex: 0 0 auto; } /* grown to fill the lockup vertical now that the byline is one line */
.ng-sidebar-brand__lockup { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ng-sidebar-brand__name {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);   /* was --font-size-md; +24% for prominence against the larger logo */
  color: var(--color-sidebar-text-strong);
  letter-spacing: var(--letter-spacing-tight);
}
.ng-sidebar-brand__byline {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-medium);   /* stronger for legibility */
  font-size: var(--font-size-base);   /* 13.5px — was 11px; +23% to sit comfortably below the bigger name */
  line-height: 1.3;
  color: var(--color-text-muted);            /* darker than faint → accessible contrast */
  /* Cap at two lines max — defensive against future longer bylines that
     would otherwise wrap to 3 lines in the tight sidebar width and eat
     into the nav region. Current "Beneficiary Management" fits on one. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* ============================================================
 * SIDEBAR NAV
 * ============================================================ */

.page-sidebar .page-sidebar-menu {
  padding: 3px var(--space-2) 3px var(--space-4);   /* tightened ~20% vertically for small laptops; collapsed rail resets to 0 */
  margin: 0;
  flex: 1 1 auto;          /* fills between the brand row and the account block */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sidebar top row: menu toggle + brand lockup. The toggle is icon-sized and
   left-padded so its glyph sits in the SAME vertical column as the nav icons
   below (menu pad 8 + link pad 12 → icon centre ~31px). */
.ng-sidebar-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-2) var(--space-1) 22px;   /* align the bars with the nav-icon column */
}
.ng-sidebar-top .ng-topbar__toggle {
  flex: 0 0 auto;
  width: 32px;          /* >=24px hit target (WCAG 2.5.8) */
  height: 32px;
  padding: 0;
  background: transparent !important;
  color: var(--color-sidebar-icon) !important;   /* match the nav icons */
}
.ng-sidebar-top .ng-topbar__toggle:hover { color: var(--color-sidebar-text-strong) !important; }
.ng-sidebar-top .ng-topbar__toggle i { font-size: var(--font-size-xl); }
.ng-sidebar-top .ng-sidebar-brand { flex: 1 1 auto; min-width: 0; min-height: 0; padding: var(--space-1); }

/* Account block — tethered to the bottom of the sidebar.
   Padding deliberately mirrors the menu padding (`3px var(--space-2) 3px
   var(--space-4)` → left 16 px) so the inner toggle below sits in the
   same inset as a top-level nav link. */
.ng-sidebar-account {
  flex: 0 0 auto;
  margin-top: auto;        /* belt-and-braces: push to the bottom */
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  /* Divider drawn by ::before so its horizontal inset matches the menu
     content area (left: var(--space-4), right: var(--space-2)) — same
     visual treatment as the in-menu section dividers, instead of spanning
     edge-to-edge like a plain border-top would. */
  position: relative;
}
.ng-sidebar-account::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-4);     /* matches menu padding-left (16 px) */
  right: var(--space-2);    /* matches menu padding-right (8 px) */
  height: 1px;
  background: var(--color-sidebar-divider);
}
.ng-account-toggle {
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  /* Padding mirrors a top-level nav link (`8px var(--space-3)` → 8 / 12).
     Combined with the account-block's left padding of 16 px, the avatar's
     left edge lands at 16 + 12 = 28 px — exactly where the nav-icon
     column above starts. Result: the avatar lines up by left edge with
     the icons above, no more "drifting left" of the column. */
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-default) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}
.ng-account-toggle:hover { background: var(--color-sidebar-bg-hover); }
.ng-account__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-semibold);   /* was too thin */
  font-size: var(--font-size-xs);              /* dropped a size */
  line-height: 1;                              /* removes the extra leading that threw off centring */
  color: var(--color-text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ng-account__caret { flex: 0 0 auto; color: var(--color-text-faint); font-size: var(--font-size-sm); }
/* Dropup menu opens upward, full width of the account block */
.ng-sidebar-account.dropup .dropdown-menu {
  bottom: 100%;
  top: auto;
  left: var(--space-2);
  right: var(--space-2);
  width: auto;
  margin-bottom: var(--space-1);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
}
/* Profile / Logout items — match the in-page nav option weight + size, icon
   aligned, vertically centred. */
.ng-sidebar-account .dropdown-menu { padding: var(--space-1) 0 !important; }
.ng-sidebar-account .dropdown-menu > li > a {
  display: flex !important;
  align-items: center !important;            /* centre icon + text in the row */
  gap: var(--space-2);
  min-height: 38px;                          /* even row height; centre via flex */
  padding: 0 var(--space-3) !important;      /* no vertical padding — min-height + centring handles it */
  font-family: var(--font-family-ui) !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-sm) !important;
  line-height: 1.2 !important;
  color: var(--color-text-default) !important;
}
.ng-sidebar-account .dropdown-menu > li > a:hover {
  background: var(--color-bg-raised) !important;
  color: var(--color-text-strong) !important;
}
.ng-sidebar-account .dropdown-menu > li > a > i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}
.ng-sidebar-account .dropdown-menu .divider { margin: var(--space-1) 0 !important; }

/* Top-level item spacing — tightened vertically */
.page-sidebar .page-sidebar-menu > li,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li {
  margin: 1px 0 !important;
}

/* Top-level link: flex with comfortable icon↔text gap */
.page-sidebar .page-sidebar-menu > li > a,
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.active.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a {
  display: flex !important;
  align-items: center;
  gap: var(--space-3);                 /* space between icon and text */
  padding: 8px var(--space-3) !important;   /* vertical rhythm — matches the collapsed link (8px) so expanded + collapsed share one rhythm */
  /* Explicit min-height so expanded + collapsed produce the same row height.
     Without this the expanded link picks up Metronic's compact-menu default
     (~45px) while the collapsed link is forced to min-height: 0 to defeat
     Metronic's hover-quirk on the active row — that 7-8px delta showed up as
     compressed vertical rhythm on the icon-only rail. */
  min-height: var(--target-size-min) !important;
  margin: 0;
  border-radius: var(--radius-md);
  color: var(--color-sidebar-text) !important;
  font-family: var(--font-family-display) !important;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  line-height: 1.3;
  /* No border-left reservation — the active rail is an inset box-shadow (below)
     so it adds NO width. Left + right padding stay equal (symmetric icon/label). */
  /* Subtle easing polish on hover / active / rail. */
  transition: background var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}

/* Main icon */
.page-sidebar .page-sidebar-menu > li > a > i,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i {
  color: var(--color-sidebar-icon);
  font-size: var(--font-size-xl);
  flex: 0 0 auto;
  margin: 0 !important;
  width: 22px;
  text-align: center;
  transition: color var(--motion-base) var(--ease-standard);
}

/* Title fills remaining space so arrow sits at the far right */
.page-sidebar .page-sidebar-menu > li > a > .title { flex: 1 1 auto; }

/* Keep the font size CONSTANT across every state (the .open state was falling
   back to Metronic's smaller 12px when a section was expanded). */
.page-sidebar .page-sidebar-menu > li > a,
.page-sidebar .page-sidebar-menu > li.open > a,
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.active.open > a,
.page-sidebar .page-sidebar-menu.page-sidebar-menu-compact > li.open > a,
.page-sidebar .page-sidebar-menu.page-sidebar-menu-compact > li.active > a {
  font-size: var(--font-size-base) !important;
  line-height: 1.3 !important;
}
.page-sidebar .page-sidebar-menu > li > a > .title {
  font-size: var(--font-size-base) !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.open > a {
  font-size: var(--font-size-sm) !important;
}

/* Hover */
.page-sidebar .page-sidebar-menu > li:not(.active):hover > a,
.page-sidebar .page-sidebar-menu > li.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:not(.active):hover > a {
  background: var(--color-sidebar-bg-hover) !important;
  color: var(--color-sidebar-text-strong) !important;
}
.page-sidebar .page-sidebar-menu > li:hover > a > i { color: var(--color-sidebar-text-strong); }

/* Active */
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.active.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a {
  background: var(--color-sidebar-bg-active) !important;
  color: var(--color-sidebar-active-fg) !important;   /* green active label */
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-inset-visible);   /* subtle depressed-in feel, replacing the older left-edge rust rail */
}
.page-sidebar .page-sidebar-menu > li.active > a > i,
.page-sidebar .page-sidebar-menu > li.active.open > a > i,
.page-sidebar .page-sidebar-menu > li.active:hover > a > i {
  color: var(--color-sidebar-active-fg) !important;   /* white icon on the rust pill — never the muted grey */
}

/* Collapsed rail: hovering an item must keep the icon DARK (same as the expanded
   view, and accessible) — the whole-sidebar `:hover` rule was reverting hovered
   icons to the muted resting colour, which read lighter/low-contrast. The active
   item's icon stays white on the rust pill. */
.page-sidebar-closed .page-sidebar .page-sidebar-menu > li:hover > a > i {
  color: var(--color-sidebar-text-strong) !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu > li.active > a > i,
.page-sidebar-closed .page-sidebar .page-sidebar-menu > li.active:hover > a > i {
  color: var(--color-sidebar-active-fg) !important;
}

/* Expand/collapse arrow — flipped to the intuitive direction:
   caret points RIGHT when closed, rotates DOWN when open. */
.page-sidebar .page-sidebar-menu > li > a > .arrow {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  position: relative;
}
.page-sidebar .page-sidebar-menu > li > a > .arrow::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  background-color: var(--color-sidebar-text-faint);
  -webkit-mask: url(/img/icons/phosphor/caret-right.svg) center / 0.9em no-repeat;
          mask: url(/img/icons/phosphor/caret-right.svg) center / 0.9em no-repeat;
  /* Smooth caret rotation + tint as a section expands/collapses. */
  transition: transform var(--motion-base) var(--ease-standard),
              background-color var(--motion-base) var(--ease-standard);
}
.page-sidebar .page-sidebar-menu > li.open > a > .arrow::before,
.page-sidebar .page-sidebar-menu > li > a > .arrow.open::before {
  transform: rotate(90deg);  /* points down when expanded */
}
.page-sidebar .page-sidebar-menu > li:not(.active):hover > a > .arrow::before {
  background-color: var(--color-sidebar-text-strong);
}
/* Selected (rust) item: the expand chevron is WHITE for strong contrast on the
   orange — it was the dark text colour, which was hard to read. */
.page-sidebar .page-sidebar-menu > li.active > a > .arrow::before,
.page-sidebar .page-sidebar-menu > li.active.open > a > .arrow::before,
.page-sidebar .page-sidebar-menu > li.active:hover > a > .arrow::before {
  background-color: var(--color-sidebar-active-fg) !important;
}
/* OPEN (expanded) but NOT the current page — sits on the white pill. The icon +
   chevron read as brand blue here (were the muted grey, too light to see). */
.page-sidebar .page-sidebar-menu > li.open:not(.active) > a > i {
  color: var(--color-brand-primary) !important;
}
.page-sidebar .page-sidebar-menu > li.open:not(.active) > a > .arrow::before {
  background-color: var(--color-brand-primary) !important;
}

/* ---------- SUBMENU ---------- */
.page-sidebar .page-sidebar-menu .sub-menu {
  margin: 0 !important;
  /* Spacing lives INSIDE the box (padding, not margin) so it collapses with the
     max-height animation instead of leaving a residual gap at the end. */
  padding: 2px 0 4px 0;
}
/* Smooth expand/collapse. refinements.js owns the toggle and animates an inline
   max-height; the clip + easing live here. box-sizing keeps the padding inside the
   collapsed 0-height. Scoped to the EXPANDED sidebar so the collapsed-rail hover
   fly-outs (shown via display, not max-height) are untouched. */
body:not(.page-sidebar-closed) .page-sidebar .page-sidebar-menu .sub-menu {
  box-sizing: border-box;
  overflow: hidden;
  transition: max-height var(--motion-base) var(--ease-standard);
}
/* An open section keeps its submenu shown. Metronic relied on its jQuery slide
   leaving inline display:block; our own toggle reverts inline display after the
   animation, so this CSS fallback must hold the open state (without it the menu
   snaps shut the instant the transition ends). Scoped to the expanded sidebar so
   the collapsed-rail hover fly-outs still govern when collapsed. */
body:not(.page-sidebar-closed) .page-sidebar .page-sidebar-menu > li.open > .sub-menu {
  display: block;
}
/* ...and the active section (the one holding the current page) collapses like any
   other. Metronic's `li.active > .sub-menu { display: block }` shows it regardless of
   `.open`, so once our toggle clears the inline display it sprang back open and could
   never be closed. Higher-specificity counter keeps a closed active section closed. */
body:not(.page-sidebar-closed) .page-sidebar .page-sidebar-menu > li.active:not(.open) > .sub-menu {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.page-sidebar-closed) .page-sidebar .page-sidebar-menu .sub-menu { transition: none; }
}
.page-sidebar .page-sidebar-menu .sub-menu li,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li {
  background: transparent !important;
  margin: 0 !important;
}
.page-sidebar .page-sidebar-menu .sub-menu li > a,
.page-sidebar .page-sidebar-menu .sub-menu li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li > a {
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) calc(22px + var(--space-3) + var(--space-3)) !important;
  margin: 1px var(--space-1);
  border-radius: var(--radius-md);
  color: var(--color-sidebar-text) !important;
  font-family: var(--font-family-display) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  transition: background var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard);
}
.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a {
  background: var(--color-sidebar-bg-hover) !important;
  color: var(--color-sidebar-text-strong) !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a {
  background: var(--color-sidebar-submenu-bg) !important;  /* subtly darker tint over the sidebar bg — recedes the active row */
  color: var(--color-text-default) !important;
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-inset-subtle);              /* subtle depressed-in feel, replacing the older left-edge rust rail */
}

/* No more bullet dots — cleaner, integrated. Hide the old fa-circle icon. */
.page-sidebar .page-sidebar-menu .sub-menu > li > a > i {
  display: none !important;
}

/* Faint vertical tree-guide running down the submenu, aligned under the
   parent item's icon centre. Submenu links indent off it. */
.page-sidebar .page-sidebar-menu > li > .sub-menu {
  position: relative;
  margin: var(--space-1) 0 var(--space-2) 0 !important;
  padding-left: calc(var(--space-3) + 11px) !important;  /* icon half-width + gap */
}
.page-sidebar .page-sidebar-menu > li > .sub-menu::before {
  content: "";
  position: absolute;
  left: calc(var(--space-3) + 11px);
  top: var(--space-1);
  bottom: var(--space-1);
  width: 1px;
  background: var(--color-sidebar-divider);
}

/* Submenu links: no bullet, clean indent off the guide line. Items get more
   vertical breathing room so the row isn't cramped — targets clear the WCAG
   2.5.5 base + give the eye an honest gap between options. */
.page-sidebar .page-sidebar-menu .sub-menu li > a,
.page-sidebar .page-sidebar-menu .sub-menu li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li > a {
  padding: var(--space-2) var(--space-3) !important;   /* was 4px var(--space-3) — taller, more accessible */
  margin: var(--space-1) 0 var(--space-1) var(--space-3) !important;  /* was 1px 0 — visible gap between rows */
  border-radius: var(--radius-md);
  position: relative;
}

/* Active submenu item: highlight + short amber inset rail */
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a {
  background: var(--color-sidebar-submenu-bg) !important;  /* subtly darker tint over the sidebar bg — recedes the active row */
  color: var(--color-text-default) !important;
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-inset-subtle);              /* subtle depressed-in feel, replacing the older left-edge rust rail */
  /* Reserve a touch of left padding for the active dot signifier below. */
  padding-left: calc(var(--space-3) + var(--space-2) + 5px) !important;
}

/* Subtle current-page signifier: a small sage dot at the leading edge of the
   active submenu row. Reads as "you are here" without the visual weight of
   the old left-edge rust rail. Positioned inside the reserved padding so the
   title stays aligned with inactive rows' visual rhythm. */
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-secondary);
}

/* Submenu section headers (Applicants / Beneficiaries / Payments in Reports).
   Left padding matches the sub-item link inset (link margin-left 12px + link
   padding-left 12px) so the headers align left with the items below them. */
.page-sidebar .page-sidebar-menu .sub-menu .nav-item.sub-menu-header {
  padding: var(--space-3) var(--space-4) var(--space-1) calc(var(--space-3) + var(--space-3)) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-semibold) !important;
  text-transform: uppercase !important;
  color: var(--color-text-default) !important;   /* darker than the items below → reads clearly as a section label */
  letter-spacing: var(--letter-spacing-uppercase) !important;
  background: transparent !important;
  font-family: var(--font-family-display) !important;
}

/* ---------- SECTION DIVIDERS ---------- */
/* The menu config emits empty <li style="margin-top: 40px"> spacers after
   "Beneficiary Registry" and before "Administration". Restyle those big
   awkward gaps into subtle hairline dividers. */
.page-sidebar .page-sidebar-menu > li[style*="margin-top: 40px"],
.page-sidebar .page-sidebar-menu > li[style*="margin-top:40px"] {
  margin: var(--space-2) 0 !important;   /* zero horizontal margin so the divider spans the same width as the active lozenge */
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  background: var(--color-sidebar-divider);
  border-radius: var(--radius-full);
}

/* ============================================================
 * COLLAPSED RAIL — RESTING ACTIVE ITEM
 * ------------------------------------------------------------
 * Live-inspected: in the resting rail the active item rendered 29px tall (4px
 * padding) while every other item was 45px (12px padding) — so the rust icon
 * sat noticeably higher/shorter, then jumped to 45px on hover (the hover lock
 * forces 12px), shoving every icon below it. Cause: the EXPANDED nav rule
 * `.page-sidebar .page-sidebar-menu > li.active > a { padding: 4px … }` (0,3,2,
 * !important) ties the _layout.css collapsed lock (0,3,2) but wins on source
 * order (_chrome loads last). Re-assert the collapsed 12px geometry for the
 * active item at (0,4,2) so it's a uniform 45px box in BOTH rest and hover.
 * ============================================================ */
.page-sidebar-closed .page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar-closed .page-sidebar .page-sidebar-menu > li.active.open > a {
  padding: 8px 0 !important;       /* match the expanded link (8px) — shared rhythm */
  min-height: var(--target-size-min) !important;   /* matches the expanded link rhythm — 44px */
  height: auto !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* ============================================================
 * COLLAPSED RAIL — HOVER LOCK
 * ------------------------------------------------------------
 * Metronic's "hover-expand" flyout re-applies EXPANDED geometry to the
 * collapsed rail on `.page-sidebar:hover` (see the `.page-sidebar:hover`
 * branches in the link rules above — e.g. line ~429 `padding: 6px
 * var(--space-3)`, specificity (0,5,2), which beats the collapsed lock in
 * _layout.css). The result: every icon jumps ~3px inward the moment the rail
 * is hovered ("all the icons contract"). We don't want any flyout — the rail
 * must be pixel-identical whether hovered or not. Re-assert the collapsed
 * geometry here, LAST in the cascade, matching _layout.css's resting values
 * exactly (width 72, centred, padding-left 6 / right 0, no rail). */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu {
  width: var(--sidebar-width-collapsed) !important;
  min-width: var(--sidebar-width-collapsed) !important;
  max-width: var(--sidebar-width-collapsed) !important;
}
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li {
  width: var(--sidebar-width-collapsed) !important;
  position: static !important;
}
/* Metronic's hover-expand rules are scoped to `.page-sidebar-menu-compact`
   (specificity 0,6,2 — see vendor layout.css ~line 844/854), which outranks a
   plain `.page-sidebar-menu` override. Include the compact class here so the
   lock WINS the cascade, not just the !important tie-break. */
/* Cover EVERY li state — plain / .active / .active.open / .open. Metronic's
   compact hover-expand has dedicated higher-specificity rules for the ACTIVE
   item (`.page-sidebar-menu-compact > li.active > a`, 0,3,2 → 0,6,2 under
   :hover) that a generic `> li > a` lock (0,6,2) can't reliably out-rank. The
   active rust item was therefore changing height on hover and shoving every
   icon BELOW it up ~20px (the grid icon above it stayed put — that's the tell).
   Listing the state variants here pushes us to 0,7,2 and pins the geometry. */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li.active.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a {
  width: var(--sidebar-width-collapsed) !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 0 !important;       /* MUST match the collapsed REST link (8px) → zero vertical shift on hover */
  /* Explicit HEIGHT (not just min-height) hard-locks the row so Metronic's
     hover transition can't contract anything vertically. min-height alone
     was insufficient — some hover rule was setting an explicit height that
     beat the min on the transition keyframes. */
  min-height: var(--target-size-min) !important;
  height: var(--target-size-min) !important;
  line-height: 1.3 !important;     /* constant box height regardless of label reveal */
  box-shadow: none !important;
  /* layout-app.css ~line 91 applies an asymmetric 15px/5px/15px/15px padding
     to .page-sidebar-menu-compact > li > a; that asymmetry was visible
     during the hover transition (icons appearing to slide horizontally).
     Explicitly zero margin here so the icons are pixel-stable across
     rest <-> hover. (transform stays unset — the parent .page-sidebar-menu
     carries the +4px visual-balance translateX, see _layout.css.) */
  margin: 0 !important;
}
/* Lock the brand-top + brand to their NATURAL collapsed height (not the
   topbar 60px — in collapsed mode .ng-sidebar-top is a flex column with
   the hamburger toggle (32px) + gap (8px) + the brand mark (64px) +
   padding (16px) ≈ 120px tall). Forcing it to 60px on hover was
   *causing* the contraction the user reported: the brand mark
   overflowed the shrunk container and clipped, looking like it moved
   up. Let height stay auto/content-based; only pin flex behaviour so
   the row doesn't grow/shrink. */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .ng-sidebar-top,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .ng-sidebar-brand {
  flex: 0 0 auto !important;
}
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .ng-sidebar-account {
  flex: 0 0 auto !important;
  margin-top: auto !important;   /* keeps it pinned to the bottom of the flex column */
}
/* Kill transitions ONLY on these structural elements (not on every
   descendant — that caused the earlier ghost-stack with labels). Without
   this, even with the geometry pinned, Metronic's transition runs through
   intermediate values that briefly contract the column. */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .ng-sidebar-top,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .ng-sidebar-brand,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .ng-sidebar-account {
  transition-property: none !important;
}

/* COMPREHENSIVE HOVER LOCK — defeat the "everything contracts vertically /
   ghost artifacts on hover" bug.

   Metronic's vendor hover-state rules try to do TWO things on the
   collapsed sidebar:
   (1) animate widths/paddings/margins on the children to expand the rail;
   (2) re-show the .title labels and .sub-menu flyouts that the resting
       collapsed state hid.

   We don't want either. Earlier attempt used `transition: none !important`
   on every descendant — too aggressive: it caused the title spans and
   submenu elements to snap visible (since the higher-specificity hover
   rules also win the display: block fight), producing ghost-stacked
   icons in the rail.

   New approach: pin geometry on menu/li/account containers (the previous
   link-level lock wasn't enough — its parents were contracting). And
   add explicit hover-state hide rules for .title / .arrow / .sub-menu
   with full :hover-state specificity so they stay invisible on hover. */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu {
  padding: 3px 0 !important;
  margin: 0 !important;
}
/* :not() excludes the section-divider LIs (`<li style="margin-top: 40px">`)
   which we style as 1px hairlines — without this exclusion they got blown
   up to 44px empty grey boxes on hover. */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:not([style*="margin-top: 40px"]):not([style*="margin-top:40px"]) {
  margin: 1px 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: var(--target-size-min) !important;
}
/* Re-assert the divider geometry in the hover state to defeat any vendor
   rule that might try to inflate them. */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li[style*="margin-top: 40px"],
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li[style*="margin-top:40px"] {
  margin: var(--space-2) 0 !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  background: var(--color-sidebar-divider);
}
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .ng-sidebar-account {
  margin: 0 !important;
  padding: var(--space-3) 0 !important;
}
/* Force-hide labels and submenus in BOTH collapsed rest and hover states.
   Without the :hover-prefixed variants Metronic's vendor rules win on
   specificity and re-show these elements. */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .title,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .arrow,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li .sub-menu,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li > a > .title,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li > a > .arrow,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .ng-section-label {
  display: none !important;
}
/* Collapsed-rail icon: pin ONE size + centre across BOTH resting and hover so it
   never resizes or nudges when the rail is hovered. The Phosphor icons are CSS
   masks sized at 1em, so their size IS the font-size — and Metronic's compact
   rules set 21px (resting 0,3,3 / hover 0,6,3). This rule is NOT :hover-scoped,
   so it governs both states identically; !important beats both Metronic rules.
   21px == the expanded nav icon, so collapse/expand doesn't resize them either.

   CRITICAL — margin: 0 in ALL states. Metronic's hover-expand compact rule
   (`.page-sidebar-menu-compact ... :hover ... > li > a > i`, specificity 0,6,3)
   re-applies a margin-right to the icon to reserve room for the title label it's
   about to reveal. Inside the `justify-content:center` link that right margin
   shoves the icon LEFT of centre — so on hover every collapsed icon nudges
   sideways ("weird differences on hover"). The bare-class rule in _layout.css
   (0,4,1) can't beat the compact hover rule, so we re-assert margin:0 here with
   the hover + compact selectors so the icon stays dead-centre, hovered or not. */
.page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a > i,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li > a > i,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i {
  font-size: 21px !important;
  text-align: center !important;
  /* Shrink the <i> to the icon's intrinsic 1em box (was 22px which left a
     0.5px asymmetric gap inside the link). Auto horizontal margin centres
     the flex child unambiguously regardless of any parent justify-content
     overrides Metronic might apply. */
  width: 1em !important;
  height: 1em !important;
  display: block !important;
  margin: 0 auto !important;
  /* Override the icons.css vertical-align: -0.125em — irrelevant on a flex
     child but contributes to subpixel vertical drift on some browsers. */
  vertical-align: middle !important;
}
/* The ::before mask glyph also needs its baseline offset zeroed inside the
   collapsed rail, otherwise the icon glyph drifts down ~3px relative to the
   <i> centre point. */
.page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a > i::before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i::before {
  vertical-align: middle;
}
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .title,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .arrow,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li .sub-menu {
  display: none !important;
}

/* ============================================================
 * COLLAPSED RAIL — CENTERED PILL (equal L/R breathing room)
 * ------------------------------------------------------------
 * Live-inspected: the link is a FULL-WIDTH 72px box (margin/padding 0), so the
 * active rust block + hover pill ran edge-to-edge — butting against the browser
 * window on the left with no inset. Constrain the link to a centred 48px box so
 * the pill has an equal 12px gap on BOTH sides of the 72px rail, in EVERY state
 * (rest / hover / active / open). Placed AFTER the width:72 locks above so it
 * wins on source order; the icon stays centred via the locks' justify-content.
 * MUST be scoped to the desktop breakpoint (min-width:992px) like the rest of the
 * collapsed-rail geometry — below it the sidebar is a full-width off-canvas panel
 * whose nav links must stay full width, NOT shrink to a 48px pill.
 * ============================================================ */
@media (min-width: 992px) {
  .page-sidebar-closed .page-sidebar .page-sidebar-menu > li > a,
  .page-sidebar-closed .page-sidebar .page-sidebar-menu > li.active > a,
  .page-sidebar-closed .page-sidebar .page-sidebar-menu > li.active.open > a,
  .page-sidebar-closed .page-sidebar .page-sidebar-menu > li.open > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li.active > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li.active.open > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu.page-sidebar-menu-compact > li.open > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a,
  .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a {
    width: 48px !important;          /* centred pill: 12px gap each side of the 72px rail */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
 * PAGE TITLE — now the heading INSIDE the content pane (the top title bar was
 * removed on desktop), so show + style it as the pane header.
 * ============================================================ */
.page-content .page-title,
.page-container-bg-solid .page-title,
.page-title {
  display: flex !important;          /* so the section icon centres with the text */
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-family-display) !important;
  font-size: var(--font-size-2xl) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-strong) !important;
  line-height: var(--line-height-tight) !important;
  margin: 0 0 var(--space-5) 0 !important;
}
/* Section icon before the title, tinted ochre (cloned from the active nav item
   by refinements.js). Inherits the icon-mask treatment from _icons.css. */
.page-content .page-title .ng-title-icon {
  color: var(--color-amber-500) !important;   /* ochre */
  font-size: 1.3em;                            /* larger, sits with the title */
  flex: 0 0 auto;
  margin: 0;
}

/* Titles that carry a control (dashboards: year selector + "last updated")
   become a flex row so the control sits on the right. */
.page-content .page-title:has(select),
.page-content .page-title:has(.pull-right) {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
/* "Last updated …" reads as a quiet meta chip (rounded, faint fill, clock glyph)
   rather than plain text trailing the title. */
.page-content .page-title:has(select) > small {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-subtle);
  font-family: var(--font-family-ui) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--color-text-muted) !important;
  line-height: 1.5;
  white-space: nowrap;
}
/* Phosphor clock, baked as a mask data-URI (no clock SVG ships in
   /img/icons/phosphor) so it tints with the chip's text colour. */
.page-content .page-title:has(select) > small::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-content .page-title:has(select) .pull-right,
.page-content .page-title:has(.pull-right) .pull-right {
  float: none !important;
  margin-left: auto;
}
.page-content .page-title:has(select) select {
  width: auto !important;
  min-width: 96px;
}

/* ============================================================
 * FOOTER
 * ============================================================ */
.page-footer .page-footer-inner {
  color: var(--color-text-faint) !important;
  font-family: var(--font-family-ui) !important;
  font-size: var(--font-size-xs) !important;
}
.page-footer .page-footer-inner a { color: var(--color-text-muted); }

/* ============================================================
 * LOGIN PAGE TOUCH-UPS (auth layout — top bar/sidebar absent here)
 * ============================================================ */
/* The app-shell flex column (body in _layout.css) must NOT apply to the auth
   page — it squished Metronic's login-3 block layout so the panel/fields
   collapsed. Restore a normal block page and centre the login column over the
   backstretch background. */
body.login {
  display: block !important;
  height: auto !important;
  min-height: 100vh;
  /* Transparent — _base.css paints --color-bg-app on body, which would bury the
     Backstretch photo when the plugin sits at a negative z-index. */
  background: transparent !important;
}

/* jQuery Backstretch injects a full-viewport .backstretch on body with inline
   z-index:-999999. That layer can paint over .content so refinements (index.css)
   look unloaded, or hide behind an opaque body background. Pin the photo at 0 and
   lift the login UI above it. !important defeats the plugin inline z-index. */
body.login > .backstretch {
  z-index: 0 !important;
}

/* ---------- LOGIN TOP-LEFT LOGO ----------
   Brand mark in the top-left of the login page, mirroring the sidebar brand
   when authenticated. Sits above the centred login content so it never
   interferes with the form column. */
.ng-login-logo {
  position: fixed;
  top: var(--space-5);
  left: var(--space-5);
  display: inline-flex;
  flex-direction: row;            /* mark on the left, wordmark/byline stacked to the right (mirrors sidebar) */
  align-items: center;
  gap: var(--space-3);
  z-index: 10;
  text-decoration: none;
}
.ng-login-logo:hover { text-decoration: none; }
.ng-login-logo__mark {
  height: 96px;                   /* hero-sized mark (2× the sidebar's 48px) */
  width: auto;
  display: block;
  flex: 0 0 auto;
}
.ng-login-logo__lockup {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.ng-login-logo__name {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);   /* 27px — hero wordmark, ~2× sidebar */
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1;
}
.ng-login-logo__byline {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-medium);
  /* Bumped 13.5 → 18 px so the byline reads as a proper subtitle next to the
     27 px wordmark (not a footnote). At 18 px Figtree medium it carries
     enough weight to be visible at glance on the login page. */
  font-size: var(--font-size-xl);
  line-height: 1.3;
  color: var(--color-text-muted);
  margin-top: 4px;
  white-space: normal;
}
/* ---------- CONDENSED (mark-only) variant ----------
   For tight contexts where only the brand mark should appear (favicon-adjacent
   uses, narrow chrome, image-only social cards). Hides the lockup, keeps the
   mark at the same physical size as the full lockup so swap-in stays stable. */
.ng-login-logo--condensed .ng-login-logo__lockup { display: none !important; }
.ng-login-logo--condensed { gap: 0 !important; }

@media (max-width: 767px) {
  .ng-login-logo { top: var(--space-3); left: var(--space-3); gap: var(--space-2); }
  .ng-login-logo__mark { height: 64px; }
  .ng-login-logo__name { font-size: var(--font-size-2xl); }
  /* Mobile drops one step (xl → lg = 16 px) so it doesn't crowd the screen edge. */
  .ng-login-logo__byline { font-size: var(--font-size-lg); }
}
body.login .content {
  position: relative;
  z-index: var(--z-base);
  width: auto !important;
  min-height: 100vh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
body.login .content > .row {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}
/* Fields: clean bordered inputs with the icon inside, full width (overrides the
   broken Metronic login-3 material styling — the green left edge + cramped box). */
body.login .login-form .form-group { margin-bottom: var(--space-4); }
/* The icon wrapper / group must NOT draw their own box — only the rounded field
   border below should show (Metronic's wrapper border sat OUTSIDE the radius). */
body.login .login-form .input-icon,
body.login .login-form .form-group {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.login .login-form .input-icon { position: relative; display: block; width: 100%; }
body.login .login-form .input-icon > i {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: var(--color-text-faint);
  z-index: 2;
  font-size: var(--font-size-md);
}
body.login .login-form .input-icon > .form-control,
body.login .login-form .form-control {
  width: 100% !important;
  height: 46px !important;
  border: 1px solid var(--color-input-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-input-bg) !important;
  box-shadow: none !important;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8) !important;
}
body.login .login-form .form-control:focus {
  border-color: var(--color-brand-secondary) !important;
  background: var(--color-input-bg-focus) !important;
  box-shadow: var(--shadow-input-focus) !important;
  outline: none !important;
}
body.login .login-form .form-control::placeholder { color: var(--color-input-placeholder) !important; opacity: 1; }

/* Card — comfortably sized (was a narrow Bootstrap col), sits to the right. */
body.login .row > [class*="col-"]:last-child {
  width: 440px !important;
  max-width: 100% !important;
  margin-left: auto !important;
  float: none !important;
  padding: 0 !important;
}
body.login .portlet.light {
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-2xl);
  margin-top: 0 !important;       /* flex centring places it; kill the inline margin-top:50% */
  padding: var(--space-8) !important;
  width: 100%;
}

/* Login logo: bigger, pinned to the top-left of the screen (position:fixed so it
   anchors to the viewport regardless of the flex/centred row — absolute hid it). */
body.login .row > [class*="col-"]:first-child {
  position: fixed !important;
  top: var(--space-6);
  left: var(--space-6);
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10;
}
body.login .row > [class*="col-"]:first-child > a { display: inline-block; line-height: 0; }
body.login .row > [class*="col-"] > a > img {
  display: block;
  width: 300px;
  max-width: 42vw;
  height: auto;
}

/* Login button — full width, aligned with the input fields above.
   Metronic's .form-actions-custom has padding-right:20px which made
   `width:100%` resolve to (parent − 20px) → the button was 20px short on the
   right of the input fields. Zero the parent padding so the button edges
   align with the inputs above it. */
body.login .form-actions-custom {
  margin-top: var(--space-5);
  text-align: left;
  padding: 0 !important;
}
body.login .login-form .btn.green {
  width: 100% !important;
  min-height: 46px;
}

/* Small screens: logo flows above the centred card instead of overlapping it. */
@media (max-width: 767px) {
  body.login .row > [class*="col-"]:first-child {
    position: static;
    margin: 0 auto var(--space-5) !important;
    text-align: center;
  }
  body.login .row > [class*="col-"] > a > img { max-width: 220px; }
  body.login .row > [class*="col-"]:last-child { margin: 0 auto !important; }
}
body.login .form-title {
  font-family: var(--font-family-display) !important;
  font-size: var(--font-size-2xl) !important;   /* 21.5px — slightly larger heading, on the page-title scale */
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-5);
  line-height: var(--line-height-tight);
}
body.login .form-control { font-size: var(--font-size-base) !important; }
body.login .btn.green {
  font-family: var(--font-family-display) !important;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  /* match the global primary: darker green resting (AA), lightens on hover */
  background-color: var(--color-brand-secondary-hover) !important;
  border-color: var(--color-brand-secondary-hover) !important;
}
body.login .btn.green:hover,
body.login .btn.green:focus {
  background-color: var(--color-brand-secondary) !important;
  border-color: var(--color-brand-secondary) !important;
}
body.login .alert .close { cursor: pointer; font-size: var(--font-size-xl); line-height: 1; }
body.login .forget-password h4 {
  font-family: var(--font-family-display) !important;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}
body.login .forget-password p {
  font-family: var(--font-family-ui) !important;
  font-size: var(--font-size-base);
}

/* ============================================================
   Notification bell (issue 690)
   Mobile top bar: layouts/app/notification-bell.blade.php (bell toggle + panel).
   Desktop sidebar: unread badge on account avatar + Notifications link in the
   account dropup (→ /notifications, inline count chip). public/js/notifications.js
   polls the unread count and fills the mobile panel.
   ============================================================ */
.ng-notif { position: relative; }
.ng-notif__toggle {
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-sidebar-text) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}
.ng-notif__toggle:hover { background: var(--color-sidebar-bg-hover); color: var(--color-sidebar-text-strong) !important; }
.ng-notif__toggle > i { font-size: var(--font-size-lg); position: relative; }
.ng-notif__badge {
  position: absolute;
  top: 2px;
  left: 22px;                       /* rides the top-right of the bell icon */
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-danger-500);
  color: #fff;
  font-family: var(--font-family-ui);
  font-size: 10px;                  /* below the type scale on purpose — count chip */
  font-weight: var(--font-weight-semibold);
  line-height: 16px;
  text-align: center;
}
.ng-notif__badge--avatar {
  top: -2px;
  right: -2px;
  left: auto;
}
/* Inline count chip — account dropup Notifications row */
.ng-notif__badge--menu {
  position: static;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  margin-left: auto;
}
.ng-notif__badge[hidden] { display: none; }

/* ---------- SIDEBAR NAV COUNTERS (.ng-nav-count) ----------
   "Work waiting" count chip on Registration sub-menu leaves (Conflict
   Resolution, Duplicate Review, Fraud Alerts, Enrolment). Fed by
   SidebarCounterService through a view composer and rendered only when the
   count is non-zero. Positioned absolutely so it never disturbs Metronic's
   inline sub-link layout, and drawn as a solid surface pill so it stays legible
   on the light-grey inactive row, the green active row, and in dark mode alike
   (all three resolve through semantic tokens that flip). */
.page-sidebar-menu .sub-link { position: relative; }
.page-sidebar-menu .sub-link:has(.ng-nav-count) > .title { padding-right: 26px; }
.ng-nav-count {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;              /* pill — a shape constant, not a token dup */
  background: var(--color-bg-surface);
  border: 1px solid var(--color-stroke-default);
  color: var(--color-text-strong);
  font-family: var(--font-family-ui);
  font-size: 10px;                   /* below the type scale on purpose — count chip */
  font-weight: var(--font-weight-semibold);
  line-height: 14px;
  text-align: center;
}
/* On the active (filled) row drop the border so the pill sits cleanly. */
.nav-item.active > .sub-link .ng-nav-count,
.nav-item.open > .sub-link .ng-nav-count { border-color: transparent; }

/* Avatar badge anchor — sidebar account only */
.ng-sidebar-account .ng-user__avatar { position: relative; }

/* Panel — shared by both placements */
.ng-notif .ng-notif__panel {
  width: 320px;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
}
.ng-notif__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.ng-notif__title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-strong);
}
.ng-notif__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}
.ng-notif__empty {
  padding: var(--space-4) var(--space-3);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}
.ng-notif__item {
  display: flex;
  align-items: stretch;
}
.ng-notif__panel .ng-notif__item-actions { display: none; }
.ng-notif__item-link {
  display: flex !important;
  flex: 1 1 auto;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-default) !important;
  text-decoration: none !important;
}
.ng-notif__item-link:hover { background: var(--color-bg-raised); }
.ng-notif__item.is-unread .ng-notif__item-link,
.ng-notif__item-link.is-unread { box-shadow: inset 3px 0 0 var(--color-info-500); } /* theme-safe unread accent */
.ng-notif__item-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
}
.ng-notif__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--color-info-500);
}
.ng-notif__dot--success { background: var(--color-success-500); }
.ng-notif__dot--warning { background: var(--color-warning-500); }
.ng-notif__dot--danger  { background: var(--color-danger-500); }
.ng-notif__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ng-notif__item-title {
  font-family: var(--font-family-ui);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-strong);
}
.ng-notif__item-body {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.ng-notif__item-time {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}
.ng-notif__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}
.ng-notif__foot a {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-link);
}
.ng-notif__foot-sep {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
}
.ng-notif-page__foot {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  text-align: center;
}
.ng-notif-page__foot a {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-sm);
  color: var(--color-link);
}

/* Mobile top bar placement — push to the right, ahead of the avatar */
.ng-topbar .ng-notif { margin-left: auto; }
.ng-topbar .ng-notif + .ng-mobile-account { margin-left: var(--space-2); }
.ng-topbar .ng-notif .ng-notif__panel { right: 0; left: auto; }

/* "View all" page */
.ng-notif-page__list { margin: 0; padding: 0; list-style: none; }
.ng-notif-page__item { border-bottom: 1px solid var(--color-border-subtle); }
.ng-notif-page__item .ng-notif__item-link { padding: var(--space-3); }
.ng-notif-page__item .ng-notif__item-actions {
  padding-right: var(--space-3);
  opacity: 1;
}
.ng-notif-page__empty {
  font-family: var(--font-family-ui);
  color: var(--color-text-muted);
  margin: var(--space-4) 0;
}
.ng-notif-page__item.is-unread .ng-notif__item-link { box-shadow: inset 3px 0 0 var(--color-info-500); }
.ng-notif-page__item.is-archived .ng-notif__item-link {
  opacity: 0.72;
}
.ng-notif__archived-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-text-muted) 12%, var(--color-bg-surface));
  color: var(--color-text-muted);
  font-family: var(--font-family-ui);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  line-height: 16px;
  vertical-align: middle;
}