/* ==========================================================================
   ALUMEN — brand layer
   Palette: navy #22346E · blue #105689 · white #FFFFFF

   NOTE ON THE `html` PREFIXES
   TemplateCustomizer (vendor/js/template-customizer.js) removes the static
   core/theme links and re-injects the rtl build at the END of <head> — i.e.
   AFTER this file. Order therefore cannot be relied on, so every override
   here is prefixed with `html` to out-specify the single-class vendor rule
   it replaces. Do not strip those prefixes.
   ========================================================================== */

:root {
  --alumen-navy: #22346e;
  --alumen-navy-deep: #1a2856;
  --alumen-navy-dark: #131d3f;
  --alumen-blue: #105689;
  --alumen-blue-light: #1c6ea8;
  --alumen-blue-pale: #e7ebf5;
  --alumen-line: #dde3f1;
  --alumen-white: #ffffff;
  --alumen-ink: #1b2440;
  --alumen-muted: #6b7590;

  --alumen-shadow-sm: 0 2px 8px rgba(34, 52, 110, 0.08);
  --alumen-shadow: 0 6px 24px rgba(34, 52, 110, 0.12);
}

/* --------------------------------------------------------------- brand logo */
html .app-brand-link {
  align-items: center;
  gap: 0;
}

html .app-brand-logo img,
html .app-brand-mark-img {
  display: block;
  width: auto;
  max-width: 100%;
}

/* Full wordmark while the menu is expanded, square mark once collapsed. */
html .app-brand-logo-full {
  display: block;
}

html .app-brand-logo-full img {
  height: 38px;
}

html .app-brand-logo-mark {
  display: none;
}

html .app-brand-logo-mark img {
  height: 32px;
}

html.layout-menu-collapsed:not(.layout-menu-hover) .app-brand-logo-full {
  display: none;
}

html.layout-menu-collapsed:not(.layout-menu-hover) .app-brand-logo-mark {
  display: block;
}

html .app-brand-mark-img {
  height: 30px;
}

/* -------------------------------------------------------- navy side menu */
html .bg-menu-theme {
  background-color: var(--alumen-navy) !important;
  color: rgba(255, 255, 255, 0.78);
}

html .bg-menu-theme.menu-horizontal {
  background-color: var(--alumen-navy) !important;
}

/* The wordmark is dark ink, so it sits on a white plate inside the navy rail. */
html .bg-menu-theme .app-brand {
  background: var(--alumen-white);
  border-radius: 0.375rem;
  margin-inline: 1rem;
  padding-inline: 0.625rem;
  box-shadow: var(--alumen-shadow-sm);
}

html .bg-menu-theme .menu-link,
html .bg-menu-theme .menu-header,
html .bg-menu-theme .menu-horizontal-prev,
html .bg-menu-theme .menu-horizontal-next {
  color: rgba(255, 255, 255, 0.78);
}

html .bg-menu-theme .menu-link .menu-icon {
  color: rgba(255, 255, 255, 0.62);
}

html .bg-menu-theme .menu-link:hover,
html .bg-menu-theme .menu-link:focus {
  background-color: rgba(255, 255, 255, 0.09);
  color: var(--alumen-white);
}

html .bg-menu-theme .menu-link:hover .menu-icon,
html .bg-menu-theme .menu-link:focus .menu-icon {
  color: var(--alumen-white);
}

html .bg-menu-theme .menu-item.active > .menu-link,
html .bg-menu-theme .menu-item.open:not(.menu-item-closing) > .menu-toggle {
  color: var(--alumen-white);
}

/* Active pill uses the second brand blue so it reads against the navy rail. */
html .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
html[dir='rtl'] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
html[dir='ltr'] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
html .bg-menu-theme.menu-horizontal .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--alumen-blue) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
  color: var(--alumen-white) !important;
}

html .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
  color: var(--alumen-white) !important;
}

html .bg-menu-theme .menu-item.disabled .menu-link {
  color: rgba(255, 255, 255, 0.36) !important;
}

html .bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(var(--alumen-navy) 41%, rgba(34, 52, 110, 0.5) 95%, rgba(34, 52, 110, 0)) !important;
}

html .bg-menu-theme .menu-block::before,
html .bg-menu-theme .menu-divider {
  background-color: rgba(255, 255, 255, 0.24);
}

html .bg-menu-theme .ps__thumb-y,
html .bg-menu-theme .ps__rail-y.ps--clicking > .ps__thumb-y {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

html .bg-menu-theme .menu-toggle::after {
  color: rgba(255, 255, 255, 0.7);
}

html .bg-menu-theme .menu-sub .menu-link {
  color: rgba(255, 255, 255, 0.66);
}

/* Collapse arrow lives on the white brand plate, so it needs dark ink. */
html .bg-menu-theme .app-brand .layout-menu-toggle,
html .bg-menu-theme .app-brand .layout-menu-toggle i {
  color: var(--alumen-navy) !important;
}

/* ---------------------------------------------------------------- navbar */
html .layout-navbar.bg-navbar-theme {
  background-color: var(--alumen-white) !important;
  box-shadow: var(--alumen-shadow-sm);
}

html .layout-navbar .nav-item > .nav-link,
html .layout-navbar .nav-item > .nav-link i {
  color: var(--alumen-navy);
}

html .layout-navbar .avatar img {
  background: var(--alumen-navy);
  object-fit: contain;
  padding: 2px;
}

/* ---------------------------------------------------- buttons and accents */
html .btn-primary {
  background: var(--alumen-navy) !important;
  border-color: var(--alumen-navy) !important;
  color: var(--alumen-white) !important;
}

html .btn-primary:hover,
html .btn-primary:focus,
html .btn-primary:active,
html .btn-primary.active {
  background: var(--alumen-blue) !important;
  border-color: var(--alumen-blue) !important;
  color: var(--alumen-white) !important;
}

html .btn-outline-primary {
  border-color: var(--alumen-navy) !important;
  color: var(--alumen-navy) !important;
}

html .btn-outline-primary:hover,
html .btn-outline-primary:focus,
html .btn-outline-primary:active {
  background: var(--alumen-navy) !important;
  border-color: var(--alumen-navy) !important;
  color: var(--alumen-white) !important;
}

html .btn-label-primary,
html .bg-label-primary {
  background-color: var(--alumen-blue-pale) !important;
  color: var(--alumen-navy) !important;
}

html .text-primary {
  color: var(--alumen-navy) !important;
}

html .bg-primary {
  background-color: var(--alumen-navy) !important;
}

html a {
  color: var(--alumen-blue);
}

html a:hover {
  color: var(--alumen-navy);
}

html .form-control:focus,
html .form-select:focus {
  border-color: var(--alumen-blue);
  box-shadow: 0 0 0 0.15rem rgba(16, 86, 137, 0.15);
}

html .form-check-input:checked {
  background-color: var(--alumen-navy);
  border-color: var(--alumen-navy);
}

html .nav-tabs .nav-link.active,
html .nav-pills .nav-link.active {
  background: var(--alumen-navy) !important;
  color: var(--alumen-white) !important;
}

html .page-item.active .page-link {
  background: var(--alumen-navy) !important;
  border-color: var(--alumen-navy) !important;
  color: var(--alumen-white) !important;
}

html .progress-bar {
  background-color: var(--alumen-blue);
}

/* ------------------------------------------------------- cards and tables */
html .card {
  border: 1px solid var(--alumen-line);
  box-shadow: var(--alumen-shadow-sm);
}

html .card-header {
  border-bottom: 1px solid var(--alumen-line);
}

html .table > thead {
  background: var(--alumen-blue-pale);
}

html .table > thead th {
  color: var(--alumen-navy) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

html h1, html h2, html h3, html h4, html h5, html h6,
html .card-title {
  color: var(--alumen-ink);
}

/* -------------------------------------------------------- dark mode tweaks */
html.dark-style .bg-menu-theme {
  background-color: var(--alumen-navy-dark) !important;
}

html.dark-style .layout-navbar.bg-navbar-theme {
  background-color: #1c2338 !important;
}

html.dark-style .bg-menu-theme .app-brand {
  background: rgba(255, 255, 255, 0.94);
}

html.dark-style .card {
  border-color: rgba(255, 255, 255, 0.08);
}

html.dark-style h1,
html.dark-style h2,
html.dark-style h3,
html.dark-style h4,
html.dark-style h5,
html.dark-style h6,
html.dark-style .card-title {
  color: #e6eaf6;
}

html.dark-style .table > thead {
  background: rgba(255, 255, 255, 0.05);
}

html.dark-style .table > thead th {
  color: #cdd6ea !important;
}