/* ==========================================================================
   site-theme.css — "Forest Green" design refresh
   Loads AFTER demo.css in both _Layout.cshtml and _CustomLayout.cshtml.
   Purely additive: overrides hardcoded Sneat/Materio purple + cool-gray
   values with the approved Forest Green palette. No Razor/JS changes required.

   Note: primary is green here, so `success` deliberately uses teal (not a
   lighter green) to stay visually distinct from primary in badge/chip-cycling
   contexts (MyWeek.cshtml entry chips, Index.cshtml TimeStatus badges).
   ========================================================================== */

/* ---------- 1. Root tokens (feeds anything that DOES read var(--bs-*),
   e.g. MyWeek.cshtml's inline styles and the radial-progress ring) ---------- */
:root {
  --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

  --bs-body-color: #3F4239;
  --bs-body-color-rgb: 63, 66, 57;
  --bs-secondary-color: rgba(63, 66, 57, 0.75);
  --bs-secondary-color-rgb: 63, 66, 57;

  --bs-primary: #15803D;
  --bs-primary-rgb: 21, 128, 61;
  --bs-primary-text-emphasis: #14532D;
  --bs-primary-bg-subtle: #DCFCE7;
  --bs-primary-border-subtle: #86EFAC;

  --bs-secondary: #6B7268;
  --bs-secondary-rgb: 107, 114, 104;
  --bs-secondary-text-emphasis: #3F4239;
  --bs-secondary-bg-subtle: #E3E5E1;
  --bs-secondary-border-subtle: #D1D4CD;

  --bs-success: #0D9488;
  --bs-success-rgb: 13, 148, 136;
  --bs-success-text-emphasis: #115E59;
  --bs-success-bg-subtle: #CCFBF1;
  --bs-success-border-subtle: #5EEAD4;

  --bs-info: #2563EB;
  --bs-info-rgb: 37, 99, 235;
  --bs-info-text-emphasis: #1E40AF;
  --bs-info-bg-subtle: #DBEAFE;
  --bs-info-border-subtle: #93C5FD;

  --bs-warning: #D97706;
  --bs-warning-rgb: 217, 119, 6;
  --bs-warning-text-emphasis: #92400E;
  --bs-warning-bg-subtle: #FEF3C7;
  --bs-warning-border-subtle: #FCD34D;

  --bs-danger: #DC2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: #991B1B;
  --bs-danger-bg-subtle: #FEE2E2;
  --bs-danger-border-subtle: #FCA5A5;

  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 0.625rem;

  --bs-link-color: #15803D;
  --bs-link-color-rgb: 21, 128, 61;
  --bs-link-hover-color: #166534;
  --bs-link-hover-color-rgb: 22, 101, 52;

  --bs-box-shadow: 0 0.25rem 0.75rem rgba(28, 30, 27, 0.10);
  --bs-box-shadow-sm: 0 0.125rem 0.375rem rgba(28, 30, 27, 0.08);
}

body {
  background: #F7F8F6;
}
.bg-body {
  background: #F7F8F6 !important;
}

/* ---------- 2. Utility classes (cheap safety net) ---------- */
.text-primary { color: #15803D !important; }
.bg-primary { background-color: #15803D !important; }
a.bg-primary:hover, a.bg-primary:focus { background-color: #166534 !important; }

/* ---------- 3. Badges — the six .bg-label-* classes used app-wide
   (Index.cshtml TimeStatus/Source badges, MyWeek.cshtml entry chips) ---------- */
.bg-label-primary   { background-color: #DCFCE7 !important; color: #15803D !important; }
.bg-label-secondary { background-color: #E3E5E1 !important; color: #52584B !important; }
.bg-label-success   { background-color: #CCFBF1 !important; color: #0D9488 !important; }
.bg-label-info      { background-color: #DBEAFE !important; color: #2563EB !important; }
.bg-label-warning   { background-color: #FEF3C7 !important; color: #D97706 !important; }
.bg-label-danger    { background-color: #FEE2E2 !important; color: #DC2626 !important; }

.bg-label-hover-primary {
  background-color: #DCFCE7 !important;
  color: #15803D !important;
}
.bg-label-hover-primary:hover {
  background-color: #15803D !important;
  color: #fff !important;
}

.bg-label-primary, .bg-label-secondary, .bg-label-success,
.bg-label-info, .bg-label-warning, .bg-label-danger {
  font-weight: 600;
}

/* ---------- 4. Buttons ---------- */
.btn {
  --bs-btn-border-radius: 0.375rem;
  font-weight: 600;
  /* core.css:7265-7271 forces all-caps button text (text-transform: uppercase);
     override back to normal mixed-case as authored ("Add Time", not "ADD TIME"). */
  text-transform: none;
  letter-spacing: normal;
}

.btn-primary {
  color: #fff;
  background-color: #15803D;
  border-color: #15803D;
}
.btn-primary:hover {
  color: #fff !important;
  background-color: #166534 !important;
  border-color: #166534 !important;
}
.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #166534;
  border-color: #166534;
  box-shadow: 0 0 0 0.2rem rgba(21, 128, 61, 0.25);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary,
.btn-primary:active, .btn-primary.active,
.btn-primary.show.dropdown-toggle, .show > .btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #14532D !important;
  border-color: #14532D !important;
}

.btn-label-primary {
  color: #15803D;
  border-color: #DCFCE7;
  background: #DCFCE7;
}
.btn-label-primary:hover {
  border-color: #86EFAC !important;
  background: #86EFAC !important;
  color: #15803D !important;
}
.btn-label-primary:focus, .btn-label-primary.focus {
  color: #15803D;
  background: #86EFAC;
  border-color: #86EFAC;
}
.btn-label-primary:active, .btn-label-primary.active,
.btn-label-primary.show.dropdown-toggle, .show > .btn-label-primary.dropdown-toggle {
  color: #15803D !important;
  background-color: #4ADE80 !important;
  border-color: #4ADE80 !important;
}

.btn-outline-primary {
  color: #15803D;
  border-color: #86EFAC;
  background: transparent;
}
.btn-outline-primary:hover {
  color: #fff !important;
  background-color: #15803D !important;
  border-color: #15803D !important;
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
  color: #15803D;
  background-color: #DCFCE7;
  border-color: #86EFAC;
}
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary,
.btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
  color: #fff !important;
  background-color: #15803D !important;
  border-color: #15803D !important;
}

/* Confirmed in use via SweetAlert2 dialogs (Views/User/Index.cshtml) */
.btn-outline-secondary {
  color: #6B7268;
  border-color: #D1D4CD;
  background: transparent;
}
.btn-outline-secondary:hover {
  color: #52584B !important;
  background-color: #EEF0EC !important;
  border-color: #D1D4CD !important;
}
.btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary,
.btn-outline-secondary:active, .btn-outline-secondary.active {
  color: #3F4239 !important;
  background-color: #E3E5E1 !important;
  border-color: #D1D4CD !important;
}

/* success uses teal here (not green) so it stays distinct from the green primary */
.btn-success {
  color: #fff;
  background-color: #0D9488;
  border-color: #0D9488;
}
.btn-success:hover {
  color: #fff !important;
  background-color: #0F766E !important;
  border-color: #0F766E !important;
}
.btn-check:checked + .btn-success, .btn-check:active + .btn-success,
.btn-success:active, .btn-success.active {
  color: #fff !important;
  background-color: #115E59 !important;
  border-color: #115E59 !important;
}

.btn-danger {
  color: #fff;
  background-color: #DC2626;
  border-color: #DC2626;
}
.btn-danger:hover {
  color: #fff !important;
  background-color: #B91C1C !important;
  border-color: #B91C1C !important;
}
.btn-check:checked + .btn-danger, .btn-check:active + .btn-danger,
.btn-danger:active, .btn-danger.active {
  color: #fff !important;
  background-color: #991B1B !important;
  border-color: #991B1B !important;
}

/* ---------- 5. Cards ---------- */
.card {
  --bs-card-border-radius: 0.5rem;
  --bs-card-inner-border-radius: 0.5rem;
  --bs-card-border-color: #E3E5E1;
  --bs-card-box-shadow: 0 0.25rem 1rem 0 rgba(28, 30, 27, 0.08);
  --bs-card-bg: #fff;
  --bs-card-title-color: #1C1E1B;
  --bs-card-cap-color: #1C1E1B;
  box-shadow: 0 0.25rem 1rem 0 rgba(28, 30, 27, 0.08);
}
.card-title {
  font-weight: 700;
}

/* ---------- 6. Sidebar (menu) ---------- */
.bg-menu-theme {
  background-color: #FFFFFF !important;
  color: #3F4239;
}
.bg-menu-theme .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next {
  color: #3F4239;
}
.bg-menu-theme .menu-link:hover, .bg-menu-theme .menu-link:focus,
.bg-menu-theme .menu-horizontal-prev:hover, .bg-menu-theme .menu-horizontal-prev:focus,
.bg-menu-theme .menu-horizontal-next:hover, .bg-menu-theme .menu-horizontal-next:focus {
  color: #15803D;
}
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle) {
  background: #15803D;
}
.bg-menu-theme .menu-item.disabled .menu-link,
.bg-menu-theme .menu-horizontal-prev.disabled,
.bg-menu-theme .menu-horizontal-next.disabled {
  color: #9CA39A !important;
}
.bg-menu-theme .menu-header {
  color: #9CA39A;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.bg-menu-theme .menu-text {
  color: #3F4239;
}
.bg-menu-theme .menu-inner-shadow {
  background: linear-gradient(#fff 5%, rgba(255, 255, 255, 0.75) 45%, rgba(255, 255, 255, 0.2) 80%, transparent);
}
.bg-menu-theme .ps__thumb-y,
.bg-menu-theme .ps__rail-y.ps--clicking > .ps__thumb-y {
  background: rgba(63, 66, 57, 0.22) !important;
}

/* Brand mark "G" square — inline `color: slateblue` in _Layout.cshtml/
   _CustomLayout.cshtml needs an !important CSS override, not a Razor edit,
   since author-stylesheet !important beats a non-important inline style. */
.app-brand-logo.demo div {
  color: #15803D !important;
}

/* ---------- 7. Navbar ---------- */
.bg-navbar-theme {
  color: #3F4239;
}
.bg-navbar-theme .navbar-brand,
.bg-navbar-theme .navbar-brand a {
  color: #1C1E1B;
}
.layout-navbar-fixed .window-scrolled .bg-navbar-theme.layout-navbar,
.layout-horizontal .bg-navbar-theme.layout-navbar {
  background-color: rgba(247, 248, 246, 0.92) !important;
}

/* ---------- 8. Footer ---------- */
.bg-footer-theme,
.bg-footer-theme .footer-link {
  color: #15803D;
}
.bg-footer-theme .footer-link:hover, .bg-footer-theme .footer-link:focus {
  color: #166534;
}
.bg-footer-theme .footer-text {
  color: #3F4239;
}

/* ---------- 9. Form controls (offcanvas Add/Edit forms across CRUD screens) ---------- */
.form-control, .form-select {
  border-color: #D1D4CD;
  border-radius: 0.375rem;
  color: #1C1E1B;
}
.form-control:focus, .form-select:focus,
.form-floating-outline .form-control:focus, .form-floating-outline .form-select:focus {
  border-color: #15803D !important;
  box-shadow: 0 0 0 0.2rem rgba(21, 128, 61, 0.15);
}
.form-control::placeholder {
  color: #9CA39A;
}

/* theme-default.css hardcodes the vendor's original purple (#9055fd) on the
   floating label text once a field is focused/filled - override to match. */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:focus:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:focus:not(:placeholder-shown) ~ label,
.form-floating-outline :not(select):focus + label,
.form-floating-outline :not(select):focus + span {
  color: #15803D !important;
}
.form-label {
  color: #3F4239;
  font-weight: 600;
}

.form-check-input:focus {
  border-color: #86EFAC;
  box-shadow: 0 0 0.25rem 0.05rem rgba(21, 128, 61, 0.15);
}
.form-check-input:checked {
  background-color: #15803D;
  border-color: #15803D;
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #15803D;
  border-color: #15803D;
}

/* Offcanvas (Add/Edit slide-outs) shadow to match cards */
.offcanvas {
  --bs-offcanvas-box-shadow: 0px 4px 20px 0px rgba(28, 30, 27, 0.14);
}

/* ---------- 10. Headings ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #1C1E1B;
  font-weight: 700;
}

/* ---------- 11. Sidebar hamburger/menu-toggle icon fix ----------
   core.css hardcodes this icon via raw MDI codepoints (\f043e / \f043d / \f05ad)
   that belong to an older MDI version's glyph table. Against the actually-bundled
   font (wwwroot/assets/vendor/fonts/materialdesignicons.css) those codepoints
   resolve to mdi-radiobox-marked / mdi-radiobox-blank / mdi-window-close - i.e.
   a filled/empty radio button dot and a close icon, not a menu icon at all.
   Override with the font's real mdi-menu codepoint (confirmed at
   materialdesignicons.css:17680) so a plain, correct hamburger shows in every
   state instead of swapping between wrong glyphs. */
.layout-menu-toggle .menu-toggle-icon::before,
.layout-menu-collapsed .layout-menu-toggle .menu-toggle-icon::before {
  content: "\F035C" !important;
}
@media (max-width: 1199.98px) {
  .layout-menu-toggle .menu-toggle-icon::before,
  .layout-menu-collapsed .layout-menu-toggle .menu-toggle-icon::before {
    content: "\F035C" !important;
  }
}

/* ---------- 12. Impersonation banner ----------
   The fixed sidebar (#layout-menu) and fixed "detached" navbar (.layout-navbar) are
   both positioned relative to the viewport (top: 0), not the document flow, so they
   don't automatically make room for this banner sitting above them - without the
   overrides below they'd render underneath it. Content clearance for the navbar is
   otherwise handled by the template's own floating/overlay design (nothing here
   depends on how that baseline works - these rules only ever ADD the banner's own
   height on top of it), so this is safe regardless of viewport width. */
.impersonation-banner {
  height: 48px;
  position: sticky;
  top: 0;
  z-index: 1100;
  background-color: #fff3cd;
  color: #664d03;
  border-bottom: 1px solid #ffe69c;
  padding: 0 1rem;
}

html.is-impersonating .layout-navbar-fixed .layout-navbar,
html.is-impersonating.layout-navbar-fixed .layout-navbar {
  top: 48px;
}
html.is-impersonating #layout-menu {
  top: 48px;
}
@media (max-width: 1199.98px) {
  html.is-impersonating #layout-menu {
    top: 48px !important;
    height: calc(100% - 48px) !important;
  }
}
html.is-impersonating .content-wrapper {
  padding-top: 48px;
}

/* ---------- 12b. Trial banner ----------
   Same 48px sticky-bar/offset mechanism as the impersonation banner above, under its own
   html class so the two never try to occupy the same space at once (see _Layout.cshtml -
   isOnTrial is forced false while impersonating). */
.trial-banner {
  height: 48px;
  position: sticky;
  top: 0;
  z-index: 1100;
  background-color: #cfe2ff;
  color: #084298;
  border-bottom: 1px solid #9ec5fe;
  padding: 0 1rem;
}

html.is-on-trial .layout-navbar-fixed .layout-navbar,
html.is-on-trial.layout-navbar-fixed .layout-navbar {
  top: 48px;
}
html.is-on-trial #layout-menu {
  top: 48px;
}
@media (max-width: 1199.98px) {
  html.is-on-trial #layout-menu {
    top: 48px !important;
    height: calc(100% - 48px) !important;
  }
}
html.is-on-trial .content-wrapper {
  padding-top: 48px;
}

/* ---------- 13. Status toggle switches ----------
   theme-default.css hardcodes the vendor's original purple (#9055fd) on both the
   base checked-state switch and the .switch-primary variant (User list Active/
   Inactive toggle) - override to match. */
.switch-input:checked ~ .switch-toggle-slider,
.switch-primary.switch .switch-input:checked ~ .switch-toggle-slider {
  background: rgba(21, 128, 61, 0.38) !important;
}
.switch-input:checked ~ .switch-toggle-slider::after,
.switch-primary.switch .switch-input:checked ~ .switch-toggle-slider::after {
  background: #15803D !important;
}
.switch-input:checked:hover ~ .switch-toggle-slider::before,
.switch-primary.switch .switch-input:checked:hover ~ .switch-toggle-slider::before {
  background: rgba(21, 128, 61, 0.08) !important;
}

/* ---------- 14. Loading spinner (ShowSpinner() / .sk-primary) ----------
   Same vendor purple hardcoded across every SpinKit shape variant - only sk-wave
   is actually used (loaderspinner.js), but overriding the full set costs nothing
   and covers any other shape used elsewhere (e.g. cards-actions.js's sk-fold). */
.sk-primary.sk-plane,
.sk-primary .sk-chase-dot:before,
.sk-primary .sk-bounce-dot,
.sk-primary .sk-wave-rect,
.sk-primary.sk-pulse,
.sk-primary .sk-swing-dot,
.sk-primary .sk-circle-dot:before,
.sk-primary .sk-circle-fade-dot:before,
.sk-primary .sk-grid-cube,
.sk-primary .sk-fold-cube:before {
  background-color: #15803D !important;
}

/* ---------- 15. Select2 (client-grouped Project picker on the time entry form) ----------
   theme-default.css hardcodes the vendor purple on the highlighted/focused states - the
   bundled select2.css itself is already reasonably themed (group headers, selected-state),
   so only the accent color needs overriding here. */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #15803D !important;
  color: #fff !important;
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: #15803D !important;
}
.form-floating.select2-focus label {
  color: #15803D !important;
}
.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: #15803D !important;
  color: #fff !important;
}

/* ---------- 16. Grid column headers ----------
   core.css:7217 sets `.table th { text-transform: uppercase; }` app-wide, forcing every
   grid's column headers into ALL CAPS regardless of how the title string is authored
   (they're already Title Case in the JS, e.g. "Project Code" - just visually transformed).
   Override once here so every grid shows headers as authored. */
.table th {
  text-transform: none;
}

/* ---------- 17. Base font size ----------
   core.css:74 sets --bs-body-font-size: 0.9375rem (15px) app-wide; every rem-based size
   in the template (headings, buttons, form controls, table text) scales off this one
   variable, so a single step down here (15px -> 14px) takes a point off everywhere at
   once without needing per-component overrides. */
:root {
  --bs-body-font-size: 0.875rem;
}

/* ---------- 18. Grid row height ----------
   core.css:1816 sets `.table > :not(caption) > * > * { padding: 0.6rem 1.25rem; }` app-wide,
   which is the actual driver of row height in every grid (DataTables draws plain <table>
   cells, no per-row height setting of its own). Trimmed vertical padding so more rows fit
   on screen/page without a rebuild; horizontal padding kept close to original for readability. */
.table > :not(caption) > * > * {
  padding: 0.4rem 1rem;
}

/* ---------- 19. Link color ----------
   theme-default.css:775 sets `a { color: #9055fd; }` (hardcoded hex, not a variable) and
   loads after core.css's variable-based `a` rule but before this file - overriding
   --bs-link-color/-rgb above has no effect on it since it never reads those variables.
   Re-declaring the selector itself here (this file loads last) is the only way to win. */
a {
  color: var(--bs-link-color);
}
a:hover {
  color: var(--bs-link-hover-color);
}

/* ---------- 20. Header removed — kill the compensating top padding ----------
   demo.css:24 adds `padding-top: 64px !important` to .layout-page to reserve
   space for the fixed top navbar. That navbar was removed from _Layout.cshtml
   (its only content, the avatar dropdown, moved into the sidebar) - without
   this override every page keeps a 64px dead gap above its content for a
   header that no longer exists. */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 0 !important;
}

/* ---------- 21. Sidebar user footer (avatar + name, anchored to the bottom) ----------
   .menu-inner has flex: 1 1 auto inside the sidebar's flex column (core.css:21042-21045),
   so this footer - placed as its next sibling, not nested inside it - is naturally
   pushed to the bottom without needing position:absolute/fixed of its own. */
.sidebar-user-footer {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid rgba(63, 66, 57, 0.12);
}
.sidebar-user-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #3F4239;
}
.sidebar-user-toggle:hover {
  color: #15803D;
}
.sidebar-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Same collapsed-state condition core.css uses to hide .app-brand-text
   (core.css:22613-22629) - this sidebar text needs the identical rule since
   it lives outside .app-brand. */
.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .sidebar-user-name {
  display: none;
}
/* Collapsed rail: the menu-item icons above are centered within the ~4.25rem
   width (core.css:22042-22045's text-align:center on .menu-icon plus the
   menu-link's own symmetric padding/margins) - this footer needs the same
   centering explicitly, since it sits outside .menu-inner and doesn't inherit
   any of that. Without it, the avatar stays pinned to its expanded-state left
   padding instead of lining up with the icons above it. */
.layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .sidebar-user-footer {
  display: flex;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- 22. Active pagination button ----------
   theme-default.css:50-56 hardcodes #9055fd (purple) directly on
   .page-item.active .page-link instead of reading --bs-primary - the same
   hardcoded-hex pattern as the link-color bug above (see section 19). Used by
   every DataTables grid's page-number buttons (e.g. Reports). */
.page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus,
.pagination li.active > a:not(.page-link),
.pagination li.active > a:not(.page-link):hover,
.pagination li.active > a:not(.page-link):focus {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary);
}

/* ---------- 23. Sidebar top gap ----------
   core.css:21037-21041 gives every .menu-vertical:first-of-type a 1.1rem
   margin-top (meant for menus that aren't the first thing on the page) - the
   sidebar <aside> is trivially ":first-of-type" since it's the only <aside>
   on the page, so it gets this margin unintentionally, leaving a blank strip
   above the "G" logo. */
/* ---------- 24. Sidebar nav: font size + section-header casing ----------
   The menu already uses the same font as the rest of the app (--bs-font-sans-serif,
   "Inter" - re-declared identically in section 1 above, never overridden per-menu
   anywhere in the vendor CSS); it just reads bigger and shoutier than the rest of the
   UI because core.css:21071-21074 sets .menu-vertical .menu-item .menu-link's font-size
   to a flat 1rem (16px) regardless of --bs-body-font-size, and core.css:20900-20902
   forces section headers ("Review", "Organize", etc. - already normal-case in the
   Razor markup) to text-transform: uppercase. */
.menu-vertical .menu-item .menu-link {
  font-size: 13px;
}
.menu-header .menu-header-text {
  text-transform: none;
}

#layout-menu {
  margin-top: 0 !important;
}