/* ==========================================================================
   Manafea (وقف منافع) - brand design layer
   --------------------------------------------------------------------------
   Palette is taken straight from assets/img/logo.png:
     petrol teal #245267  (the pinwheel mark)  -> structural / interactive
     gold       #d9a631  (the منافع wordmark) -> accent / highlight

   Teal carries every interactive surface because it clears WCAG AA against
   white (8.4:1); gold is reserved for accents, indicators and dark-on-light
   chips, since white-on-gold is only 2.2:1 and would fail as a text colour.

   Load order: core_*.css -> theme-default_*.css -> brand-theme.css (generated
   palette swap) -> brand.css (this file, the design work).

   Direction: written with CSS logical properties so a single file serves both
   the RTL (ar) and LTR (en) builds.
   ========================================================================== */

:root {
  /* teal ramp */
  --mnf-teal-900: #12303d;
  --mnf-teal-800: #173645;
  --mnf-teal-700: #1d4354;
  --mnf-teal-600: #214c60;
  --mnf-teal: #245267;
  --mnf-teal-400: #2f6d88;
  --mnf-teal-300: #4d8ba6;
  --mnf-teal-200: #a9c6d2;
  --mnf-teal-100: #d8e6ec;
  --mnf-teal-50: #e5eff3;
  --mnf-teal-25: #f3f8fa;

  /* gold ramp - `--mnf-gold-ink` is the only one safe for body text on white */
  --mnf-gold-ink: #8a6613;
  --mnf-gold-700: #b8891f;
  --mnf-gold-600: #c2921f;
  --mnf-gold: #d9a631;
  --mnf-gold-300: #e8c46f;
  --mnf-gold-200: #f0d79c;
  --mnf-gold-100: #f7ecd2;
  --mnf-gold-50: #fbf6ea;

  /* neutrals */
  --mnf-ink: #1f2d36;
  --mnf-body: #4a5c69;
  --mnf-muted: #7d8f9c;
  --mnf-line: #e4eaef;
  --mnf-surface: #ffffff;

  --mnf-radius-sm: .5rem;
  --mnf-radius: .75rem;
  --mnf-radius-lg: 1rem;

  --mnf-shadow-xs: 0 1px 2px rgba(18, 48, 61, .06);
  --mnf-shadow-sm: 0 2px 8px rgba(18, 48, 61, .06);
  --mnf-shadow-md: 0 6px 20px rgba(18, 48, 61, .08);
  --mnf-shadow-lg: 0 18px 44px rgba(18, 48, 61, .14);

  --mnf-ring: 0 0 0 .2rem rgba(36, 82, 103, .18);
  --mnf-ease: cubic-bezier(.4, 0, .2, 1);

  /* Sidebar state colours. These are light-sidebar defaults; the dashboard
     layout re-declares them from the admin's chosen sidebar background via
     includes/custom_styles.blade.php, which loads after this file. */
  --mnf-menu-fg: var(--mnf-body);
  --mnf-menu-hover-bg: var(--mnf-teal-50);
  --mnf-menu-hover-fg: var(--mnf-teal-700);
  --mnf-menu-active-bg: var(--mnf-teal-50);
  --mnf-menu-active-fg: var(--mnf-teal);
  --mnf-menu-icon: var(--mnf-muted);
  --mnf-menu-icon-active: var(--mnf-teal);
  --mnf-menu-border: var(--mnf-line);
  --mnf-menu-chip-bg: var(--mnf-teal-50);
  --mnf-menu-chip-border: var(--mnf-teal-100);
  --mnf-menu-chip-name: var(--mnf-teal-900);
  --mnf-menu-chip-role: var(--mnf-gold-ink);
  --mnf-menu-avatar-bg: var(--mnf-teal);
  --mnf-menu-avatar-fg: #ffffff;
  --mnf-menu-scroll: var(--mnf-teal-100);
}

/* ==========================================================================
   1. Base & typography
   ========================================================================== */

body {
  font-family: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--mnf-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--mnf-ink);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Figures line up in stat cards and tables. */
.mnf-num,
.card-title.mnf-num,
table tbody td .mnf-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

::selection {
  background: var(--mnf-teal-100);
  color: var(--mnf-teal-900);
}

/* One consistent focus ring everywhere, only for keyboard users. */
:focus-visible {
  outline: none;
  box-shadow: var(--mnf-ring);
  border-radius: var(--mnf-radius-sm);
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */

.btn {
  --bs-btn-focus-box-shadow: var(--mnf-ring);
  font-weight: 600;
  border-radius: var(--mnf-radius-sm);
  transition: background-color .18s var(--mnf-ease),
              border-color .18s var(--mnf-ease),
              color .18s var(--mnf-ease),
              box-shadow .18s var(--mnf-ease),
              transform .18s var(--mnf-ease);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background-color: var(--mnf-teal);
  border-color: var(--mnf-teal);
  box-shadow: 0 2px 6px rgba(36, 82, 103, .22);
}

.btn-primary:hover {
  background-color: var(--mnf-teal-700);
  border-color: var(--mnf-teal-700);
  box-shadow: 0 6px 16px rgba(36, 82, 103, .28);
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--mnf-teal-800) !important;
  border-color: var(--mnf-teal-800) !important;
}

/* Sneat styles buttons with plain declarations rather than the Bootstrap
   --bs-btn-* variables, so `.btn:disabled` finds no disabled background and
   falls through to a near-invisible button. Give it an explicit muted fill. */
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: #dde5ea;
  border-color: #dde5ea;
  color: #8095a3;
  box-shadow: none;
  opacity: 1;
}

.btn-outline-primary {
  color: var(--mnf-teal);
  border-color: var(--mnf-teal-200);
}

.btn-outline-primary:hover {
  background-color: var(--mnf-teal);
  border-color: var(--mnf-teal);
  color: #fff;
}

/* Gold accent button - dark ink on gold keeps contrast at 7:1. */
.btn-gold {
  background-color: var(--mnf-gold);
  border-color: var(--mnf-gold);
  color: var(--mnf-teal-900);
  box-shadow: 0 2px 6px rgba(217, 166, 49, .3);
}

.btn-gold:hover,
.btn-gold:focus {
  background-color: var(--mnf-gold-600);
  border-color: var(--mnf-gold-600);
  color: var(--mnf-teal-900);
  box-shadow: 0 6px 16px rgba(217, 166, 49, .36);
}

/* ==========================================================================
   3. Forms
   ========================================================================== */

.form-label {
  color: var(--mnf-ink);
  font-weight: 600;
  font-size: .8125rem;
  margin-bottom: .375rem;
}

.form-control,
.form-select {
  border-color: var(--mnf-line);
  border-radius: var(--mnf-radius-sm);
  color: var(--mnf-ink);
  padding-block: .5rem;
  transition: border-color .18s var(--mnf-ease), box-shadow .18s var(--mnf-ease);
}

.form-control::placeholder { color: var(--mnf-muted); }

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
  border-color: var(--mnf-teal-200);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--mnf-teal-300);
  box-shadow: var(--mnf-ring);
}

.input-group:focus-within {
  box-shadow: var(--mnf-ring);
  border-radius: var(--mnf-radius-sm);
}

.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
  border-color: var(--mnf-teal-300);
  box-shadow: none;
}

.input-group-text {
  background-color: #fff;
  border-color: var(--mnf-line);
  color: var(--mnf-muted);
}

.input-group-text.cursor-pointer:hover { color: var(--mnf-teal); }

/* Checked controls read as solid teal rather than the stock 8% wash. */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--mnf-teal) !important;
  border-color: var(--mnf-teal) !important;
}

.form-check-input:focus { box-shadow: var(--mnf-ring); }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--mnf-line) !important;
  border-radius: var(--mnf-radius-sm) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--mnf-teal-300) !important;
  box-shadow: var(--mnf-ring);
}

/* ==========================================================================
   4. Cards & surfaces
   ========================================================================== */

.card {
  border: 1px solid var(--mnf-line);
  border-radius: var(--mnf-radius);
  box-shadow: var(--mnf-shadow-sm);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--mnf-line);
  padding-block: 1rem;
}

.card-header .card-title { margin-bottom: 0; }

/* Opt-in hover lift for cards that are themselves a link target. */
.mnf-card-interactive {
  transition: transform .2s var(--mnf-ease), box-shadow .2s var(--mnf-ease),
              border-color .2s var(--mnf-ease);
}

.mnf-card-interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--mnf-shadow-md);
  border-color: var(--mnf-teal-200);
}

.badge.bg-label-gold {
  background-color: var(--mnf-gold-100);
  color: var(--mnf-gold-ink);
}

.mnf-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--mnf-line) 20%, var(--mnf-line) 80%, transparent);
  opacity: 1;
}

/* ==========================================================================
   5. Sidebar / vertical menu
   --------------------------------------------------------------------------
   includes/custom_styles.blade.php emits admin-configurable sidebar colours
   with !important, so the rules that must win here are marked too. Anything
   the admin can genuinely control (background, base link colour) is left
   alone; only brand state styling is forced.
   ========================================================================== */

#layout-menu.layout-menu {
  border-inline-end: 1px solid var(--mnf-menu-border);
  box-shadow: none;
}

/* Brand block.
   logo.png is transparent behind the mark, so it takes on whatever surface is
   behind it. Pin the block to white so the logo always reads as intended -
   including when an admin sets a tinted sidebar background in settings. */
#layout-menu .app-brand {
  padding-block: 1.25rem .875rem;
  margin-block-end: .5rem;
  border-bottom: 1px solid var(--mnf-menu-border);
  position: relative;
  background: #fff;
}

#layout-menu .app-brand::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--mnf-gold);
}

[dir=ltr] #layout-menu .app-brand::after { transform: translateX(-50%); }

#layout-menu .app-brand-logo img {
  transition: transform .25s var(--mnf-ease);
}

#layout-menu .app-brand-link:hover .app-brand-logo img { transform: scale(1.03); }

/* Signed-in identity chip */
.mnf-menu-user {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 .875rem .75rem;
  padding: .625rem .75rem;
  border-radius: var(--mnf-radius-sm);
  background: var(--mnf-menu-chip-bg);
  border: 1px solid var(--mnf-menu-chip-border);
}

.mnf-menu-user__avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mnf-menu-avatar-bg);
  color: var(--mnf-menu-avatar-fg);
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1;
}

/* Larger variant used for the navbar avatar and its dropdown header. */
.mnf-menu-user__avatar--lg {
  width: 40px;
  height: 40px;
  font-size: .875rem;
}

.mnf-menu-user__meta { min-width: 0; }

.mnf-menu-user__name {
  display: block;
  font-weight: 700;
  font-size: .8125rem;
  color: var(--mnf-menu-chip-name);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mnf-menu-user__role {
  display: block;
  font-size: .6875rem;
  color: var(--mnf-menu-chip-role);
  font-weight: 600;
}

/* The navbar sits on its own admin-controlled background, so its avatar keeps
   the fixed brand teal rather than following the sidebar's light/dark theme. */
.layout-navbar .mnf-menu-user__avatar,
.dropdown-menu .mnf-menu-user__avatar {
  background: var(--mnf-teal);
  color: #fff;
}

/* Menu links */
.bg-menu-theme .menu-item .menu-link {
  border-radius: var(--mnf-radius-sm);
  margin-inline: .625rem;
  padding-block: .5rem;
  font-size: .875rem;
  font-weight: 500;
  transition: background-color .16s var(--mnf-ease), color .16s var(--mnf-ease);
}

.bg-menu-theme .menu-item .menu-link:hover {
  background-color: var(--mnf-menu-hover-bg) !important;
  color: var(--mnf-menu-hover-fg) !important;
}

.bg-menu-theme .menu-item .menu-link .menu-icon {
  font-size: 1.2rem;
  color: var(--mnf-menu-icon);
  transition: color .16s var(--mnf-ease);
}

.bg-menu-theme .menu-item .menu-link:hover .menu-icon {
  color: var(--mnf-menu-icon-active);
}

/* Active state: tinted wash + high-contrast ink + the gold rail Sneat reserves */
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  background-color: var(--mnf-menu-active-bg) !important;
  color: var(--mnf-menu-active-fg) !important;
  font-weight: 700;
}

.bg-menu-theme .menu-item.active > .menu-link .menu-icon {
  color: var(--mnf-menu-icon-active) !important;
}

.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before {
  background: var(--mnf-gold) !important;
  width: .1875rem;
  height: 2.25rem;
}

/* Open parent group */
.bg-menu-theme .menu-inner > .menu-item.open > .menu-toggle {
  color: var(--mnf-menu-hover-fg) !important;
  font-weight: 700;
}

.bg-menu-theme .menu-inner > .menu-item.open > .menu-toggle .menu-icon {
  color: var(--mnf-menu-icon-active) !important;
}

/* Sub-menus: quieter type, hairline rail to show nesting */
.bg-menu-theme .menu-sub {
  position: relative;
  margin-block: .125rem;
}

.bg-menu-theme .menu-sub .menu-link {
  font-size: .8125rem;
  font-weight: 500;
  padding-block: .4rem;
}

.bg-menu-theme .menu-sub .menu-item.active > .menu-link {
  background-color: var(--mnf-menu-active-bg) !important;
  color: var(--mnf-menu-active-fg) !important;
}

/* Sneat draws sub-item bullets with :before - retint them */
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
  background-color: var(--mnf-gold) !important;
}

.menu-toggle:after { transition: transform .2s var(--mnf-ease); }

/* Scrollbar inside the menu */
#layout-menu .menu-inner::-webkit-scrollbar { width: 6px; }
#layout-menu .menu-inner::-webkit-scrollbar-thumb {
  background: var(--mnf-menu-scroll);
  border-radius: 6px;
}

/* ==========================================================================
   6. Navbar
   ========================================================================== */

.layout-navbar {
  border: 1px solid var(--mnf-line);
  border-radius: var(--mnf-radius);
  box-shadow: var(--mnf-shadow-xs);
}

.layout-navbar .navbar-nav .nav-item .bx-search { color: var(--mnf-muted); }

/* Search field reads as a real control instead of a bare input */
.mnf-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--mnf-teal-25);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .25rem .875rem;
  min-width: 220px;
  transition: border-color .18s var(--mnf-ease), background-color .18s var(--mnf-ease),
              box-shadow .18s var(--mnf-ease);
}

.mnf-search:focus-within {
  background: #fff;
  border-color: var(--mnf-teal-200);
  box-shadow: var(--mnf-ring);
}

.mnf-search .form-control {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-inline: 0;
  height: 2rem;
  font-size: .875rem;
}

.mnf-search i { color: var(--mnf-muted); }

@media (max-width: 575.98px) {
  .mnf-search { min-width: 0; width: 100%; }
}

/* Icon buttons get a hover target */
.layout-navbar .navbar-nav > .nav-item > .nav-link {
  border-radius: 50%;
  width: 2.375rem;
  height: 2.375rem;
  display: grid;
  place-items: center;
  color: var(--mnf-body);
  transition: background-color .16s var(--mnf-ease), color .16s var(--mnf-ease);
}

.layout-navbar .navbar-nav > .nav-item > .nav-link:hover {
  background-color: var(--mnf-teal-50);
  color: var(--mnf-teal);
}

.layout-navbar .dropdown-user > .nav-link { width: auto; height: auto; }

.badge-notifications {
  box-shadow: 0 0 0 2px #fff;
  font-weight: 700;
}

.dropdown-menu {
  border: 1px solid var(--mnf-line);
  border-radius: var(--mnf-radius);
  box-shadow: var(--mnf-shadow-md);
  padding-block: .375rem;
}

.dropdown-item {
  border-radius: var(--mnf-radius-sm);
  margin-inline: .375rem;
  width: auto;
  transition: background-color .14s var(--mnf-ease), color .14s var(--mnf-ease);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--mnf-teal-50);
  color: var(--mnf-teal-700);
}

.dropdown-item i { margin-inline-end: .5rem; }

/* ==========================================================================
   7. Breadcrumb & footer
   ========================================================================== */

.nav-breadcrumb .h4-breadcrumb { color: var(--mnf-ink); }
.nav-breadcrumb .h4-breadcrumb a { color: var(--mnf-muted) !important; }
.nav-breadcrumb .h4-breadcrumb a:hover { color: var(--mnf-teal) !important; }

.content-footer {
  color: var(--mnf-muted);
  font-size: .8125rem;
}

/* ==========================================================================
   8. Login / authentication
   ========================================================================== */

.mnf-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: #fff;
}

/* --- brand panel --- */
.mnf-auth__aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem clamp(2rem, 5vw, 4.5rem);
  background:
    radial-gradient(120% 90% at 15% 10%, #2f6d88 0%, transparent 55%),
    radial-gradient(110% 80% at 85% 90%, #1b4356 0%, transparent 60%),
    linear-gradient(145deg, var(--mnf-teal-800), var(--mnf-teal-900));
  color: #fff;
  isolation: isolate;
}

/* dot grid + gold glow, purely decorative */
.mnf-auth__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
  z-index: -1;
}

.mnf-auth__aside::after {
  content: "";
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -12%;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 166, 49, .30), transparent 68%);
  z-index: -1;
}

.mnf-auth__aside-inner { max-width: 30rem; }

.mnf-auth__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mnf-gold-300);
  background: rgba(217, 166, 49, .12);
  border: 1px solid rgba(217, 166, 49, .3);
  border-radius: 999px;
  padding: .3rem .75rem;
  margin-bottom: 1.5rem;
}

.mnf-auth__headline {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  margin-bottom: .875rem;
}

.mnf-auth__headline em {
  font-style: normal;
  color: var(--mnf-gold);
}

.mnf-auth__lede {
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, .78);
  margin-bottom: 2.25rem;
}

.mnf-auth__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.mnf-auth__points li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .9375rem;
  color: rgba(255, 255, 255, .9);
}

.mnf-auth__points i {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: .625rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--mnf-gold-300);
  font-size: 1.05rem;
}

/* --- form panel --- */
.mnf-auth__main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: #fff;
}

.mnf-auth__card {
  width: 100%;
  max-width: 25rem;
}

/* Same reasoning as the sidebar brand block: the transparent logo always sits
   on white, whatever the surrounding panel does. */
.mnf-auth__logo {
  display: block;
  width: 148px;
  height: auto;
  margin-inline: auto;
  margin-bottom: 1.75rem;
  background: #fff;
  border-radius: var(--mnf-radius-sm);
}

.mnf-auth__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mnf-ink);
  text-align: center;
  margin-bottom: .375rem;
}

.mnf-auth__subtitle {
  text-align: center;
  color: var(--mnf-muted);
  font-size: .875rem;
  margin-bottom: 1.75rem;
}

.mnf-auth__card .form-control { padding-block: .625rem; }

.mnf-auth__submit {
  width: 100%;
  padding-block: .6875rem;
  font-size: 1rem;
  margin-top: .25rem;
}

.mnf-auth__alt {
  text-align: center;
  font-size: .875rem;
  color: var(--mnf-muted);
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.mnf-auth__alt a {
  color: var(--mnf-teal);
  font-weight: 700;
  text-decoration: none;
}

.mnf-auth__alt a:hover { text-decoration: underline; }

.mnf-auth__foot {
  text-align: center;
  font-size: .75rem;
  color: var(--mnf-muted);
  margin-top: 2.5rem;
}

/* password reveal toggle */
.mnf-auth__card .input-group-text {
  border-inline-start: 0;
  color: var(--mnf-muted);
}

.mnf-auth__card .form-control { border-inline-end: 0; }

/* Stack on tablet and below; the brand panel becomes a compact header. */
@media (max-width: 991.98px) {
  .mnf-auth { grid-template-columns: 1fr; }

  .mnf-auth__aside {
    padding: 2.25rem 1.5rem;
    text-align: center;
  }

  .mnf-auth__aside-inner { max-width: none; margin-inline: auto; }
  .mnf-auth__points { display: none; }
  .mnf-auth__lede { margin-bottom: 0; font-size: .9375rem; }
  .mnf-auth__eyebrow { margin-bottom: 1rem; }
  .mnf-auth__main { padding-block: 2.5rem 3rem; }
}

@media (max-width: 575.98px) {
  .mnf-auth__headline { font-size: 1.375rem; }
  .mnf-auth__logo { width: 124px; margin-bottom: 1.25rem; }
}

/* ==========================================================================
   9. Dashboard home
   ========================================================================== */

.mnf-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--mnf-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 1.5rem;
  color: #fff;
  background:
    radial-gradient(120% 140% at 12% 0%, #2f6d88 0%, transparent 55%),
    linear-gradient(135deg, var(--mnf-teal-800), var(--mnf-teal-900));
  box-shadow: var(--mnf-shadow-md);
}

.mnf-hero::after {
  content: "";
  position: absolute;
  inset-block-start: -60%;
  inset-inline-end: -8%;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 166, 49, .28), transparent 68%);
  pointer-events: none;
}

.mnf-hero__inner { position: relative; z-index: 1; }

.mnf-hero__date {
  font-size: .8125rem;
  color: var(--mnf-gold-300);
  font-weight: 600;
  margin-bottom: .5rem;
}

.mnf-hero__title {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: .375rem;
}

.mnf-hero__subtitle {
  color: rgba(255, 255, 255, .76);
  font-size: .9375rem;
  margin-bottom: 0;
  max-width: 46rem;
  line-height: 1.8;
}

/* Section headings between card groups */
.mnf-section-title {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--mnf-ink);
  margin-bottom: 1rem;
}

.mnf-section-title::before {
  content: "";
  width: .1875rem;
  height: 1.125rem;
  border-radius: 2px;
  background: var(--mnf-gold);
  flex: 0 0 auto;
}

/* Stat card */
.mnf-stat { height: 100%; }

.mnf-stat__icon {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--mnf-radius-sm);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: var(--mnf-teal-50);
  color: var(--mnf-teal);
}

.mnf-stat__icon--gold {
  background: var(--mnf-gold-100);
  color: var(--mnf-gold-ink);
}

.mnf-stat__label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mnf-muted);
  margin-bottom: .25rem;
}

.mnf-stat__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--mnf-ink);
  line-height: 1.2;
  margin-bottom: 0;
  font-variant-numeric: tabular-nums;
}

.mnf-stat__unit {
  font-size: .875rem;
  font-weight: 600;
  color: var(--mnf-muted);
  margin-inline-start: .25rem;
}

/* Service / action card */
.mnf-service {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mnf-service__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--mnf-radius-sm);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--mnf-teal), var(--mnf-teal-400));
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(36, 82, 103, .24);
}

.mnf-service__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--mnf-ink);
  margin-bottom: .25rem;
}

.mnf-service__desc {
  font-size: .8125rem;
  color: var(--mnf-muted);
  margin-bottom: 0;
  line-height: 1.7;
}

/* Disabled service keeps its shape but drops all colour weight. */
.mnf-service--disabled { opacity: .85; }

.mnf-service--disabled .mnf-service__icon {
  background: #eef2f5;
  color: var(--mnf-muted);
  box-shadow: none;
}

.mnf-service__badge {
  font-size: .6875rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: var(--mnf-gold-100);
  color: var(--mnf-gold-ink);
  white-space: nowrap;
}

.mnf-service__badge--muted {
  background: #eef2f5;
  color: var(--mnf-muted);
}

/* Empty state */
.mnf-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--mnf-muted);
}

.mnf-empty i {
  font-size: 2.5rem;
  color: var(--mnf-teal-200);
  margin-bottom: .75rem;
  display: block;
}

/* ==========================================================================
   9b. Sticky navbar & breadcrumb (desktop only)
   ========================================================================== */

/* On xl and up the sidebar is pinned and the window is the scroller, so the
   top navbar and the page breadcrumb ride along with it. Below xl the layout
   switches to the off-canvas menu (navbar z-index 1080) and both bars stay in
   the normal flow, so a phone keeps its full screen height for content. */
@media (min-width: 1200px) {
  .layout-content-navbar {
    --mnf-nav-h: 3.875rem;   /* .layout-navbar height, from core css */
    --mnf-nav-gap: .75rem;   /* .navbar-detached top margin */
  }

  /* The second shadow is a solid, page-coloured band the height of the detached
     gap: it masks the strip between the two bars so content does not flash
     through it while scrolling. The brand shadow is listed first so it keeps
     painting on top of that band. */
  .layout-content-navbar #layout-navbar {
    position: sticky;
    top: 0;
    z-index: 1035;
    box-shadow: var(--mnf-shadow-xs), 0 var(--mnf-nav-gap) 0 var(--bs-body-bg, #f5f5f9);
  }

  .layout-content-navbar #layout-navbar-breadcrumb {
    position: sticky;
    top: calc(var(--mnf-nav-h) + var(--mnf-nav-gap));
    z-index: 1034;
  }
}

/* ==========================================================================
   10. Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .mnf-card-interactive:hover { transform: none; }
}

@media print {
  #layout-menu,
  .layout-navbar,
  .content-footer { display: none !important; }

  .card { box-shadow: none; border-color: #ccc; }
  .mnf-hero { background: none; color: #000; }
}