/* Global (unscoped) on purpose: MudNavMenu does not forward the Blazor CSS-isolation
   scope attribute onto its rendered root element, so ::deep rules in a component's
   .razor.css can never reach MudNavLink/MudNavGroup's internal markup. */

.mud-drawer-content {
  padding-left: 8px;
  padding-right: 8px;
}

/* MudDrawerHeader ships with a fixed 24px side padding, sized for the
   expanded (240px) drawer only. With justify-content left at its default
   (flex-start) the logo was never actually centered even when expanded, just
   padded from the left — and at the collapsed 56px width that same 24px+24px
   padding left only 8px for a 40px-wide logo, so it overflowed past the
   drawer's right edge instead of shrinking. Centering + zeroing the padding
   (the drawer-content padding above already gives 8px of breathing room)
   fixes both states with one rule, and the leftover mr-2 on the image (meant
   to leave room for a hamburger button that no longer exists here) is what
   was nudging it off-center too. */
.nav-drawer .mud-drawer-header {
  justify-content: center;
  padding: 0;
}

.nav-drawer .mud-drawer-header .mud-image {
  margin: 0;
}

.mud-nav-link {
  background:
    linear-gradient(
      95.73deg,
      rgba(0, 118, 135, 0.08) 0.9%,
      rgba(0, 118, 135, 0.06) 52.54%,
      rgba(0, 118, 135, 0.02) 99.06%
    ),
    rgba(235, 240, 241, 0.3);
  /*  background-color: var(--mud-palette-background-gray);*/
  border-radius: 12px;
  margin: 2px 0;
  min-height: 65px;
  display: flex;
  align-items: center;
}

.mud-navmenu.mud-navmenu-primary
  .mud-nav-link.active:not(.mud-nav-link-disabled) {
  background-color: var(--mud-palette-primary);
  box-shadow:
    0px 15px 80px rgba(0, 124, 132, 0.13),
    0px 5.47525px 40.9132px rgba(0, 124, 132, 0.0896976),
    0px 2.65813px 30.1634px rgba(0, 124, 132, 0.0723178),
    0px 1.30307px 21.8208px rgba(0, 124, 132, 0.0576822),
    0px 0.515234px 12.1225px rgba(0, 124, 132, 0.0403024);
  color: var(--mud-palette-primary-text);
}

.mud-navmenu.mud-navmenu-primary
  .mud-nav-link.active:not(.mud-nav-link-disabled)
  .mud-icon-root {
  color: var(--mud-palette-primary-text);
}

.mud-nav-group .mud-typography {
  color: var(--mud-palette-drawer-icon);
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Sidebar collapse-to-icons toggle (.nav-drawer class in MainLayout.razor,
   toggled via MudStaticNavDrawerToggle bound to _sidebarExpanded — the only
   toggle mechanism found that reliably reaches the server in this exact
   spot; a plain MudIconButton's OnClick placed here silently never fired,
   root cause not pinned down after extensive isolation testing, not worth
   blocking on further). DrawerVariant.Persistent's own "closed" state slides
   the whole box off-screen (`left: -240px`, per its shipped CSS) — it's
   built for show/hide, not shrink-to-icons, so we override what "closed"
   visually means for this specific drawer: stay in place, shrink to 56px
   and hide labels, instead of sliding away. */
.nav-drawer.mud-drawer-persistent.mud-drawer-pos-left.mud-drawer--closed {
  left: 0 !important;
  width: 56px !important;
  box-shadow: var(--mud-elevation-2);
}

.nav-drawer {
  transition: width 225ms cubic-bezier(0.4, 0, 0.2, 1);
  /* MudDrawer's own default only sets overflow-y:auto, which clips
     .c-drawer-toggle since that button sits half outside the drawer's box
     (right:-14px, to visually straddle the sidebar/content border). Clipped
     content is also excluded from hit-testing, so every real click landed on
     this <aside> itself instead of the button — root cause of clicks never
     registering, across every toggle mechanism tried this session. Setting
     only overflow-x:visible does NOT fix it: per spec, when overflow-y is
     auto/scroll and overflow-x is visible, the computed overflow-x is forced
     back to auto so the two axes stay consistent — they can only be freed
     together. The nav menu is short enough that losing its own scrollbar is
     fine; the page scrolls instead if it ever overflows. */
  overflow: visible !important;
}

.nav-drawer.mud-drawer--closed .mud-nav-link-text,
.nav-drawer.mud-drawer--closed .mud-nav-link-expand-icon,
.nav-drawer.mud-drawer--closed .mud-select {
  display: none;
}

/* MudStaticNavDrawerToggle flips the drawer's open/closed CSS classes purely
   client-side (MudDrawerInterop, no Blazor circuit round trip — see
   MainLayout.razor's comment on why), so the chevron's direction can't be
   driven by the server-rendered _sidebarExpanded field: it's only ever the
   initial value and never updates after a click. Rotating a single fixed
   icon based on the drawer's actual class (same source of truth as every
   other collapse rule in this file) keeps the arrow in sync with reality
   instead of with stale server state. Scoped here (global, unscoped file)
   rather than MainLayout.razor.css because the icon is rendered by a child
   component (MudStaticNavDrawerToggle) and never receives the Blazor
   CSS-isolation scope attribute — the same limitation already documented
   for MudNavMenu/MudIconButton elsewhere in this file. */
.c-drawer-toggle svg {
  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-drawer.mud-drawer--closed .c-drawer-toggle svg {
  transform: rotate(180deg);
}

/* !important is required here: MudBlazor indents nested MudNavGroup children
   via `.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link { padding-left: 36px; }`
   (5 classes of specificity), which outranks a plain `.nav-drawer.mud-drawer--closed
   .mud-nav-link` selector (3 classes) — so without !important, nested items
   (e.g. Dashboard/Transactions under the Financial group) kept their 36px
   indent while collapsed, pushing their icons off-center. */
.nav-drawer.mud-drawer--closed .mud-nav-link {
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.nav-drawer.mud-drawer--closed .mud-nav-link-icon {
  margin-left: 0;
  margin-right: 0;
}

/* MudMainContent's own margin-left rule (`.mud-main-content{margin-left:var(
   --mud-drawer-width-left)}`) and MudBlazor's later reset (`.mud-main-content
   {margin:0}`, same specificity, wins by source order) leave it at 0 in this
   layout (no MudAppBar in use, which is what those rules are normally paired
   with) — so the content already needs its own explicit offset, open or
   closed. The .nav-drawer-anchored selector here outranks both. */
.nav-drawer.mud-drawer--open ~ .mud-main-content {
  margin-left: var(--mud-drawer-width-left);
  transition: margin-left 225ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-drawer.mud-drawer--closed ~ .mud-main-content {
  margin-left: 56px;
  transition: margin-left 225ms cubic-bezier(0.4, 0, 0.2, 1);
}