/* ================================================================
   SHIELD — LIGHT THEME (toggleable)
   Loaded ONLY when the UI theme is "light" (see ApplicationHelper#light_theme?
   and `rake theme:light` / `rake theme:dark`). When absent, the app falls back
   to the original dark-navy sidebar / navy login defined in custom.css + login3.css.
   Pairs with shield-dark.svg / shield-icon-dark.svg (navy logo).
   ================================================================ */

/* ---- Logo zone → light, to blend with the white header ---- */
.page-header.navbar .page-logo,
.page-sidebar-closed.page-sidebar-fixed .page-header.navbar .page-logo {
  background-color: #ffffff !important;
  border-right: 1px solid #e9edf5 !important;
}
.page-header.navbar .menu-toggler::before { color: #24246D !important; }

/* ---- Sidebar surface (expanded + collapsed) ---- */
.page-sidebar-wrapper .page-sidebar,
.page-sidebar,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #e9edf5 !important;
  box-shadow: 2px 0 16px rgba(36,36,109,0.06) !important;
}

/* ---- Toggler ---- */
.page-sidebar .sidebar-toggler,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar .sidebar-toggler,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggler {
  border: none !important;
  box-shadow: none !important;
}
.page-sidebar .sidebar-toggler::before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggler::before {
  color: #4a5666 !important;
}
/* Hover changes the glyph colour only — no tint, no outline, no shadow. */
.page-sidebar .sidebar-toggler:hover,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggler:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.page-sidebar .sidebar-toggler:hover::before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggler:hover::before {
  color: #24246D !important;
}
/* Hairline separator, light-theme tone. */
.page-sidebar .page-sidebar-menu > li.sidebar-toggler-wrapper {
  border-bottom: 1px solid #e9edf5 !important;
}

/* ---- Top-level nav items ---- */
.page-sidebar-menu > li > a {
  color: #2b3648 !important;
  font-weight: 500 !important;
  border-left: 3px solid transparent !important;
}
.page-sidebar-menu > li > a > i { color: #4a5666 !important; }

/* hover + OPEN (expanded parent) — must include .open, else the theme's
   `li.open > a { background:#303030 }` shows charcoal on an expanded group. */
.page-sidebar-menu > li > a:hover,
.page-sidebar-menu > li:hover > a,
.page-sidebar-menu > li.open > a {
  background-color: #dfe5f3 !important;
  color: #24246D !important;
}
.page-sidebar-menu > li:hover > a > i,
.page-sidebar-menu > li.open > a > i { color: #24246D !important; }
.page-sidebar-menu > li.open > a > .arrow:before,
.page-sidebar-menu > li.open > a > .arrow.open:before { color: #24246D !important; }

/* active (current page) — distinguished by the red accent bar */
.page-sidebar-menu > li.active > a,
.page-sidebar-menu > li.active > a:hover,
.page-sidebar-menu > li.active.open > a {
  background-color: #eef0f8 !important;
  color: #24246D !important;
  font-weight: 600 !important;
  border-left: 3px solid #DB2424 !important;
}
.page-sidebar-menu > li.active > a > i,
.page-sidebar-menu > li.active.open > a > i { color: #DB2424 !important; }
.page-sidebar-menu > li > a > .arrow:before,
.page-sidebar-menu > li > a > .arrow.open:before { color: #6b7688 !important; }
.page-sidebar-menu > li.active > a > .arrow:before,
.page-sidebar-menu > li.active > a > .arrow.open:before { color: #24246D !important; }
.page-sidebar-menu > li.heading > h3 { color: #5f6b7a !important; }

/* ---- Sub-menu (must match theme's `.page-sidebar ...` specificity + !important) ---- */
.page-sidebar .page-sidebar-menu .sub-menu { background-color: #f7f9fc !important; }
/* Sub-menu items are the actual navigation targets, so they get maximum
   contrast: black at normal weight rather than a darker grey at heavier
   weight. 21:1 against the #f7f9fc band. */
.page-sidebar .page-sidebar-menu .sub-menu > li > a {
  color: #000000 !important;
  font-weight: 400 !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li > a > i { color: #3a4452 !important; }
.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.open > a {
  background: #eef2f8 !important;
  color: #24246D !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a > i,
.page-sidebar .page-sidebar-menu .sub-menu > li.open > a > i {
  color: #24246D !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
  background: #e3e7f5 !important;
  color: #24246D !important;
  font-weight: 600 !important;
}
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a > i {
  color: #DB2424 !important;
}

/* ---- Collapsed rail + flyout (opaque white) ---- */
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li > a > i { color: #4a5666 !important; }
/* `li.open` is excluded on purpose: the group holding the current page keeps
   .open, so including it drew a second empty white panel next to the real
   flyout whenever the collapsed rail was hovered.

   The flyout has to read as a panel floating over the sidebar. White-on-white
   with a faint shadow made it look like nothing had happened, so the parent
   row gets a clear navy tint and the panel gets a real border and a deeper
   shadow. */
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover:not(.sidebar-toggler-wrapper):not(.sidebar-search-wrapper),
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover:not(.sidebar-toggler-wrapper):not(.sidebar-search-wrapper) {
  background-color: #ffffff !important;
  border: 1px solid #ccd5ea !important;
  border-left: none !important;
  box-shadow: 8px 6px 24px rgba(36,36,109,0.22) !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover:not(.sidebar-toggler-wrapper) > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover:not(.sidebar-toggler-wrapper) > a {
  background-color: #dfe5f5 !important;
  color: #24246D !important;
  font-weight: 600 !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > a > i,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a > i {
  color: #24246D !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li.active > 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-color: #eef0f8 !important;
  color: #24246D !important;
  border-left: 3px solid #DB2424 !important;
}
/* Red icon marks the current section in the rail, matching the expanded
   sidebar. Needs the collapsed-state specificity to beat the generic rail
   icon colour set above. */
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li.active > a > i,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > i,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a > i {
  color: #DB2424 !important;
}
/* Flyout sub-menu: white card, separated from the tinted parent row by a rule. */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar .page-sidebar-menu .sub-menu,
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu {
  background-color: #ffffff !important;
  border-top: 1px solid #dfe5f0 !important;
}
/* Same black as the expanded sub-menu, so the flyout reads identically. */
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu > li > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a {
  color: #000000 !important;
  font-weight: 400 !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > .sub-menu > li:hover > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a {
  background-color: #eef2f8 !important;
  color: #24246D !important;
}
.page-sidebar-closed .page-sidebar .page-sidebar-menu.page-sidebar-menu-closed > li:hover > a > .title {
  color: #24246D !important;
}

/* ================================================================
   LOGIN PAGE — light overrides (override navy login3.css; loaded after it)
   ================================================================ */
.login {
  background: radial-gradient(1200px 600px at 50% -10%, #eef1fb 0%, rgba(238,241,251,0) 60%),
              linear-gradient(160deg, #f6f8fc 0%, #eef1f8 100%) !important;
}
.login .logo .login-logo-text { color: #24246D !important; }
.login .logo .login-logo-sub { color: rgba(36,36,109,0.55) !important; }
.login .content {
  box-shadow: 0 18px 50px rgba(36,36,109,0.12), 0 2px 8px rgba(36,36,109,0.06) !important;
  border: 1px solid #e9edf5 !important;
}
.login .copyright { color: #4a5666 !important; }

/* ---- Phone and tablet -------------------------------------------------------
   Metronic ships a second, darker set of sidebar colours below 992px, and they
   are one element more specific than the desktop rules this file overrides:
   `.page-sidebar .page-sidebar-menu > li .sub-menu` (0,3,1) against the
   `.page-sidebar .page-sidebar-menu .sub-menu` (0,3,0) matched above. Both
   carry !important, so specificity decided it and the phone sub-menu stayed
   #2b2b2b inside an otherwise white sidebar.

   The comment above -- "must match theme's `.page-sidebar ...` specificity" --
   was right about the desktop rule and simply did not know about this one.
   Re-stated here at the matching specificity, with the same values.
   ---------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .page-sidebar .page-sidebar-menu > li .sub-menu { background-color: #f7f9fc !important; }
  .page-sidebar .page-sidebar-menu > li .sub-menu > li > a { color: #000000 !important; }
  .page-sidebar .page-sidebar-menu > li .sub-menu > li > a > i { color: #3a4452 !important; }
  .page-sidebar .page-sidebar-menu > li .sub-menu > li:hover > a,
  .page-sidebar .page-sidebar-menu > li .sub-menu > li.open > a {
    background: #eef2f8 !important;
    color: #24246D !important;
  }
  .page-sidebar .page-sidebar-menu > li .sub-menu > li.active > a {
    background: #e3e7f5 !important;
    color: #24246D !important;
    font-weight: 600 !important;
  }

  /* Row separators drawn at #3d3d3d for a charcoal sidebar, and the search
     field's charcoal fill -- both from the same ≤991px block. */
  .page-sidebar .page-sidebar-menu > li > a { border-top-color: #e6eaf2 !important; }
  .page-sidebar .page-sidebar-menu .sidebar-search input { background-color: #f7f9fc !important; }
}