/* ============================================================
   Mezzo Recovery – Blazor Stylesheet
   Visual design mirrors www.mezzorecovery.com
============================================================ */

/* ---------- Self-hosted fonts (originals from mezzorecovery.com) ---------- */
@font-face {
  font-family: 'AvenirLight';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/avenir-lt-light.woff2') format('woff2');
}
@font-face {
  font-family: 'BrandonGrotLight';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/brandon-grot-light.woff2') format('woff2');
}

/* ---------- CSS Variables ---------- */
:root {
  --mz-bg:            #0c0c0c;
  --mz-bg-alt:        #111214;
  --mz-bg-card:       #161819;
  --mz-accent:        #b8975a;
  --mz-accent-light:  #d4b47a;
  --mz-accent-dark:   #a07840;
  --mz-text:          #f0ede8;
  --mz-text-muted:    #9a9690;
  --mz-border:        #2a2826;
  --mz-radius:        6px;
  --mz-transition:    0.25s ease;
  --mz-nav-height:    68px;
  --mz-max-w:         1140px;
  --mz-font-heading:  'BrandonGrotLight', 'Helvetica Neue', Arial, sans-serif;
  --mz-font-body:     'AvenirLight', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Base Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden; /* scroll happens only in the content pane, not the page */
}
html { scroll-behavior: smooth; background: var(--mz-bg); }

body {
  font-family: var(--mz-font-body) !important;
  background: var(--mz-bg) !important;
  color: var(--mz-text) !important;
  font-size: 16px;
  line-height: 1.7;
}

img { max-width: 100%; display: block; }
a   { color: var(--mz-accent); text-decoration: none; transition: color var(--mz-transition); }
a:hover { color: var(--mz-accent-light); }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
  font-family: var(--mz-font-heading) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

h1, .mud-typography-h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: uppercase; }
h2, .mud-typography-h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); text-transform: uppercase; letter-spacing: 0.1em; }
h3, .mud-typography-h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mz-accent) !important; }
h4, .mud-typography-h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }
h5, .mud-typography-h5 { font-size: 0.85rem; letter-spacing: 0.06em; }
h6, .mud-typography-h6 { font-size: 0.8rem; }

p,
.mud-typography-body1,
.mud-typography-body2 { color: var(--mz-text-muted); }

/* ---------- Selection & Scrollbar ---------- */
::selection { background: rgba(184,151,90,0.25); color: var(--mz-text); }

/* Chromium / Safari – thin dark-gray scrollbar matching mezzorecovery.com.
   Rules are on the actual scroll containers, not a bare * selector, because
   Chromium only reliably applies ::-webkit-scrollbar on the scrolling element.
   Track uses #0c0c0c (page background) instead of transparent so no browser
   can show white/grey through it. */
html,
body,
.mud-main-content,
.mud-drawer-content,
.mud-popover-paper {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a #0c0c0c;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.mud-main-content::-webkit-scrollbar,
.mud-drawer-content::-webkit-scrollbar,
.mud-popover-paper::-webkit-scrollbar              { width: 7px; height: 7px; }

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.mud-main-content::-webkit-scrollbar-track,
.mud-drawer-content::-webkit-scrollbar-track,
.mud-popover-paper::-webkit-scrollbar-track        { background: #0c0c0c; }

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.mud-main-content::-webkit-scrollbar-thumb,
.mud-drawer-content::-webkit-scrollbar-thumb,
.mud-popover-paper::-webkit-scrollbar-thumb        { background: #3a3a3a; border-radius: 4px; }

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.mud-main-content::-webkit-scrollbar-thumb:hover,
.mud-drawer-content::-webkit-scrollbar-thumb:hover,
.mud-popover-paper::-webkit-scrollbar-thumb:hover  { background: #555; }

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
.mud-main-content::-webkit-scrollbar-corner,
.mud-drawer-content::-webkit-scrollbar-corner,
.mud-popover-paper::-webkit-scrollbar-corner       { background: #0c0c0c; }

/* ============================================================
   MudBlazor Component Overrides
============================================================ */

/* CSS variable for error (mirrors theme) */
:root {
  --mz-error: #c94040;
}

/* ---------- AppBar / Nav ---------- */
.mud-appbar {
  height: var(--mz-nav-height) !important;
  /* Column flex: justify-content centers the toolbar vertically, same as
     static site's .nav { display:flex; align-items:center } on its inner div */
  flex-direction: column !important;
  justify-content: center !important;
  background: rgba(10, 10, 10, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--mz-border) !important;
  box-shadow: none !important;
}
/* Toolbar is auto-height (content-sized), centred by the parent appbar —
   exactly mirrors .nav__inner in the static site */
.mud-appbar .mud-toolbar {
  height: auto !important;
  min-height: unset !important;
  display: flex !important;
  align-items: center !important;
  max-width: var(--mz-max-w) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* ---------- Drawer ---------- */
.mud-drawer,
.mud-drawer-paper {
  background: var(--mz-bg-alt) !important;
  border-right: 1px solid var(--mz-border) !important;
}

/* ---------- Nav Links (drawer & appbar) ---------- */
.mud-nav-link,
.mud-nav-link:visited {
  font-family: var(--mz-font-heading) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mz-text-muted) !important;
  transition: color var(--mz-transition) !important;
  border-radius: 0 !important;
}
.mud-nav-link:hover,
.mud-nav-link.active {
  color: var(--mz-accent) !important;
  background: transparent !important;
}
.mud-nav-link .mud-nav-link-icon { color: var(--mz-text-muted) !important; }
.mud-nav-link:hover .mud-nav-link-icon,
.mud-nav-link.active .mud-nav-link-icon { color: var(--mz-accent) !important; }

/* ---------- Buttons ---------- */
.mud-button-root,
.mud-button-filled,
.mud-button-outlined,
.mud-button-text,
.mud-icon-button {
  font-family: var(--mz-font-heading) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  border-radius: var(--mz-radius) !important;
  transition: all var(--mz-transition) !important;
}

.mud-button-filled,
.mud-button-outlined,
.mud-button-text {
  padding: 14px 34px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* Primary filled */
.mud-button-filled-primary,
.mud-button-filled-primary:visited {
  background: var(--mz-accent) !important;
  color: #000 !important;
  box-shadow: none !important;
}
.mud-button-filled-primary:hover {
  background: var(--mz-accent-light) !important;
  color: #000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(184,151,90,0.35) !important;
}

/* Outlined primary */
.mud-button-outlined-primary {
  border: 1px solid var(--mz-border) !important;
  color: var(--mz-text) !important;
  background: transparent !important;
}
.mud-button-outlined-primary:hover {
  border-color: var(--mz-accent) !important;
  color: var(--mz-accent) !important;
  transform: translateY(-2px) !important;
}

/* Secondary */
.mud-button-filled-secondary {
  background: var(--mz-bg-card) !important;
  color: var(--mz-text) !important;
  border: 1px solid var(--mz-border) !important;
  box-shadow: none !important;
}
.mud-button-filled-secondary:hover {
  border-color: var(--mz-accent) !important;
  color: var(--mz-accent) !important;
  transform: translateY(-2px) !important;
}

/* ---------- Paper & Cards ---------- */
.mud-paper,
.mud-card {
  background: var(--mz-bg-card) !important;
  border: 1px solid var(--mz-border) !important;
  border-radius: var(--mz-radius) !important;
  box-shadow: none !important;
  transition: border-color var(--mz-transition), transform var(--mz-transition), box-shadow var(--mz-transition) !important;
}
/* Only interactive cards lift — popover/picker/dialog/tooltip papers do not */
.mud-card:hover {
  border-color: var(--mz-accent) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
}
/* Popovers, pickers, tooltips, snackbars: override the base paper transition */
.mud-popover-paper,
.mud-picker-popover-paper,
.mud-picker-inline-paper,
.mud-tooltip,
.mud-snackbar {
  transition: none !important;
  transform: none !important;
}
.mud-card-header-title { font-family: var(--mz-font-heading) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; }
.mud-card-header-subheader { color: var(--mz-text-muted) !important; font-size: 0.82rem !important; }

/* ---------- Chips ---------- */
.mud-chip {
  font-family: var(--mz-font-heading) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
}
.mud-chip-outlined-primary {
  border-color: var(--mz-accent) !important;
  color: var(--mz-accent) !important;
  background: rgba(184,151,90,0.1) !important;
}

/* ---------- Text Fields / Inputs ---------- */
.mud-input-root .mud-input,
.mud-input-root input,
.mud-input-root textarea {
  background: var(--mz-bg-card) !important;
  color: var(--mz-text) !important;
  font-family: var(--mz-font-body) !important;
  font-size: 0.95rem !important;
}
.mud-input-outlined .mud-notched-outline { border-color: var(--mz-border) !important; border-radius: var(--mz-radius) !important; }
.mud-input-outlined:focus-within .mud-notched-outline {
  border-color: var(--mz-accent) !important;
  box-shadow: 0 0 0 3px rgba(184,151,90,0.12) !important;
}
.mud-input-label,
.mud-input-helper-text { color: var(--mz-text-muted) !important; font-family: var(--mz-font-body) !important; }
.mud-input-label.mud-input-label-inputcontrol { font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; }

/* ---------- Select ---------- */
/* Ensure popover dropdown is clearly visible above page background */
.mud-popover-paper {
  background: #1e2022 !important;
  border: 1px solid rgba(184,151,90,0.3) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}
.mud-list-item { color: var(--mz-text-muted) !important; font-family: var(--mz-font-body) !important; }
.mud-list-item:hover, .mud-list-item.mud-selected { background: rgba(184,151,90,0.08) !important; color: var(--mz-accent) !important; }

/* ---------- Table ---------- */
.mud-table { background: var(--mz-bg-card) !important; border: 1px solid var(--mz-border) !important; }
.mud-table-head .mud-table-cell {
  color: var(--mz-text-muted) !important;
  font-family: var(--mz-font-heading) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--mz-border) !important;
  background: var(--mz-bg-alt) !important;
}
.mud-table-body .mud-table-row:hover { background: rgba(184,151,90,0.04) !important; }
.mud-table-cell { border-bottom-color: var(--mz-border) !important; color: var(--mz-text) !important; }
.mud-table-pagination-toolbar .mud-input-root { background: transparent !important; }

/* ---------- Tabs ---------- */
.mud-tabs-tabbar { border-bottom: 1px solid var(--mz-border) !important; background: transparent !important; }
.mud-tab { font-family: var(--mz-font-heading) !important; font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--mz-text-muted) !important; }
.mud-tab.mud-tab-active { color: var(--mz-accent) !important; }
.mud-tab-slider { background: var(--mz-accent) !important; }

/* ---------- Expansion Panel ---------- */
.mud-expand-panel { border: 1px solid var(--mz-border) !important; border-radius: var(--mz-radius) !important; background: var(--mz-bg-card) !important; margin-bottom: 8px !important; }
.mud-expand-panel-header { font-family: var(--mz-font-heading) !important; font-weight: 600 !important; letter-spacing: 0.06em !important; }

/* ---------- Divider ---------- */
.mud-divider { border-color: var(--mz-border) !important; }

/* ---------- Badge ---------- */
.mud-badge { background: var(--mz-accent) !important; color: #000 !important; font-family: var(--mz-font-heading) !important; font-weight: 700 !important; }

/* ---------- Alert ---------- */
.mud-alert { border-radius: var(--mz-radius) !important; border: 1px solid !important; }
.mud-alert-filled-info { background: rgba(126,168,192,0.12) !important; border-color: #7ea8c0 !important; }
.mud-alert-filled-success { background: rgba(107,165,128,0.12) !important; border-color: #6ba580 !important; }
.mud-alert-filled-warning { background: rgba(212,180,122,0.12) !important; border-color: var(--mz-accent-light) !important; }
.mud-alert-filled-error { background: rgba(201,64,64,0.12) !important; border-color: #c94040 !important; }

/* ---------- Tooltip ---------- */
.mud-tooltip { background: var(--mz-bg-card) !important; border: 1px solid var(--mz-border) !important; color: var(--mz-text) !important; font-family: var(--mz-font-body) !important; font-size: 0.82rem !important; }

/* ---------- Dialog ---------- */
.mud-dialog { background: var(--mz-bg-card) !important; border: 1px solid var(--mz-border) !important; border-radius: var(--mz-radius) !important; }
/* Dialog title — override h6 typography which renders at 0.8rem */
.mud-dialog-title,
.mud-dialog-title h6,
.mud-dialog-title .mud-typography-h6,
.mud-dialog-title .mud-typography {
  font-family: var(--mz-font-heading) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
.mud-dialog-title {
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid var(--mz-border) !important;
}
/* Icon inside dialog title vertically aligned with text */
.mud-dialog-title .mud-icon-root {
  font-size: 1.3rem !important;
  width: 1.3rem !important;
  height: 1.3rem !important;
  flex-shrink: 0 !important;
}
.mud-overlay { background: rgba(0,0,0,0.72) !important; }

/* ============================================================
   MudBlazor Additional Component Overrides
============================================================ */

/* Push top snackbars below the fixed navbar */
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-right { top: calc(var(--mz-nav-height) + 8px) !important; }

/* ---------- Snackbar ---------- */
.mud-snackbar {
  background: var(--mz-bg-card) !important;
  border: 1px solid var(--mz-border) !important;
  border-radius: var(--mz-radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.mud-snackbar-surface {
  color: var(--mz-text) !important;
  font-family: var(--mz-font-body) !important;
}
.mud-snackbar-content-message { color: var(--mz-text-muted) !important; }
.mud-theme-info.mud-snackbar    { border-color: #7ea8c0 !important; }
.mud-theme-success.mud-snackbar { border-color: #6ba580 !important; }
.mud-theme-warning.mud-snackbar { border-color: var(--mz-accent-light) !important; }
.mud-theme-error.mud-snackbar   { border-color: #c94040 !important; }

/* ---------- Pagination ---------- */
.mud-pagination .mud-button-root {
  font-family: var(--mz-font-heading) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: var(--mz-text-muted) !important;
  min-width: 36px !important;
  height: 36px !important;
  border-radius: var(--mz-radius) !important;
}
.mud-pagination-item-selected .mud-button-root {
  background: var(--mz-accent) !important;
  color: #000 !important;
}
.mud-pagination .mud-button-root:hover:not([disabled]) {
  background: rgba(184,151,90,0.08) !important;
  color: var(--mz-accent) !important;
}

/* ---------- Progress ---------- */
.mud-progress-linear { border-radius: 2px !important; }
.mud-progress-linear-background { background: var(--mz-border) !important; }
/* Circular colour is already driven by --mud-palette-primary from theme */

/* Switch — active track uses a neutral warm white, not gold */
.mud-switch-span { background-color: var(--mz-border) !important; }
.mud-switch.mud-checked .mud-switch-span { background-color: #8a9aa0 !important; }
.mud-switch-base.mud-focus-visible { outline: 2px solid rgba(184,151,90,0.4) !important; }

/* ---------- Checkbox ---------- */
/* Unchecked icon uses muted text; checked uses primary (gold) via theme */
.mud-checkbox .mud-icon-root { color: var(--mz-text-muted) !important; }

/* ---------- Radio ---------- */
.mud-radio .mud-radio-icons { color: var(--mz-text-muted) !important; }
.mud-radio.mud-checked .mud-radio-icons,
.mud-radio .mud-radio-icon-checked { color: var(--mz-accent) !important; }

/* ---------- Rating ---------- */
.mud-rating-item                { color: var(--mz-border) !important; }
.mud-rating-item.mud-rating-item-active { color: var(--mz-accent) !important; }
.mud-rating-item:hover          { color: var(--mz-accent-light) !important; }

/* ---------- MudLink ---------- */
.mud-link,
.mud-link:visited { color: var(--mz-accent) !important; }
.mud-link:hover   { color: var(--mz-accent-light) !important; }
.mud-link-disabled { color: var(--mz-text-muted) !important; opacity: 0.5 !important; }
.mud-link-underline-hover:hover { text-decoration: underline !important; text-decoration-color: var(--mz-accent) !important; }

/* ---------- Breadcrumbs ---------- */
.mud-breadcrumbs { font-family: var(--mz-font-body) !important; font-size: 0.82rem !important; }
.mud-breadcrumbs li { color: var(--mz-text-muted) !important; }
.mud-breadcrumbs a { color: var(--mz-accent) !important; }
.mud-breadcrumbs a:hover { color: var(--mz-accent-light) !important; }
.mud-breadcrumbs .mud-breadcrumbs-separator { color: var(--mz-border) !important; }

/* ---------- Timeline ---------- */
.mud-timeline-item-divider::before { background: var(--mz-border) !important; }
.mud-timeline-item-dot            { background: var(--mz-bg-card) !important; }
.mud-timeline-item-dot-inner      { background: var(--mz-accent) !important; }
.mud-timeline-dot-fill            { border-color: var(--mz-accent) !important; }
.mud-timeline-item-content        { color: var(--mz-text-muted) !important; font-family: var(--mz-font-body) !important; }
.mud-timeline-item-opposite       { color: var(--mz-text-muted) !important; font-size: 0.82rem !important; }

/* ---------- Stepper ---------- */
.mud-stepper-nav-connector-line { border-color: var(--mz-border) !important; }
.mud-step-label-icon .mud-icon-root { color: var(--mz-text-muted) !important; }
.mud-step-label-icon.mud-primary    { color: var(--mz-accent) !important; }
.mud-step-label-content-title {
  font-family: var(--mz-font-heading) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ---------- Skeleton ---------- */
.mud-skeleton {
  background-color: rgba(255,255,255,0.06) !important;
  border-radius: var(--mz-radius) !important;
}
.mud-skeleton-circle { border-radius: 50% !important; }
.mud-skeleton-wave::after {
  background: linear-gradient(90deg, transparent, rgba(184,151,90,0.06), transparent) !important;
}

/* ---------- FAB ---------- */
.mud-fab.mud-fab-primary {
  background: var(--mz-accent) !important;
  color: #000 !important;
  box-shadow: 0 4px 12px rgba(184,151,90,0.35) !important;
}
.mud-fab.mud-fab-primary:hover {
  background: var(--mz-accent-light) !important;
  box-shadow: 0 8px 24px rgba(184,151,90,0.5) !important;
  transform: translateY(-2px) !important;
}
.mud-fab.mud-fab-secondary {
  background: var(--mz-bg-card) !important;
  color: var(--mz-text) !important;
  border: 1px solid var(--mz-border) !important;
  box-shadow: none !important;
}
.mud-fab.mud-fab-secondary:hover {
  border-color: var(--mz-accent) !important;
  color: var(--mz-accent) !important;
}

/* ---------- NavGroup ---------- */
/* Group header — treated as an upper-level category label */
.mud-nav-group > .mud-nav-link {
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  opacity: 0.6 !important;
}

/* ---------- Menu ---------- */
.mud-menu-item {
  font-family: var(--mz-font-body) !important;
  font-size: 0.9rem !important;
  color: var(--mz-text-muted) !important;
  transition: background var(--mz-transition), color var(--mz-transition) !important;
}
.mud-menu-item:hover {
  background: rgba(184,151,90,0.08) !important;
  color: var(--mz-accent) !important;
}
.mud-menu-item-icon .mud-icon-root { color: currentColor !important; }
.mud-menu-list { padding: 4px 0 !important; }

/* ---------- FileUpload ---------- */
.mud-file-upload { border-radius: var(--mz-radius) !important; }
.mud-file-upload-dragarea {
  border: 1px dashed var(--mz-border) !important;
  border-radius: var(--mz-radius) !important;
  background: var(--mz-bg-card) !important;
  transition: border-color var(--mz-transition), background var(--mz-transition) !important;
}
.mud-file-upload-dragover .mud-file-upload-dragarea,
.mud-file-upload-dragarea:hover {
  border-color: var(--mz-accent) !important;
  background: rgba(184,151,90,0.04) !important;
}

/* ---------- Date / Time Picker ---------- */
.mud-picker-container {
  background: var(--mz-bg-card) !important;
  border: 1px solid var(--mz-border) !important;
  border-radius: var(--mz-radius) !important;
}
/* Picker toolbar — light enough for readable text */
.mud-picker-toolbar {
  background: var(--mz-bg-alt) !important;
  border-bottom: 1px solid var(--mz-border) !important;
}
/* Force all text/buttons inside the toolbar to use light text */
.mud-picker-toolbar,
.mud-picker-toolbar .mud-button-root,
.mud-picker-toolbar .mud-typography,
.mud-picker-timepicker-toolbar-text,
.mud-picker-datepicker-toolbar {
  color: var(--mz-text) !important;
}
.mud-picker-calendar-header-switch .mud-button-root {
  color: var(--mz-text) !important;
  font-family: var(--mz-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.mud-picker-calendar-header-day {
  color: var(--mz-text-muted) !important;
  font-family: var(--mz-font-heading) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
}
.mud-picker-year            { color: var(--mz-text-muted) !important; font-family: var(--mz-font-body) !important; }
.mud-picker-year-selected   { color: var(--mz-accent) !important; font-weight: 700 !important; }
.mud-picker-month           { color: var(--mz-text-muted) !important; font-family: var(--mz-font-body) !important; }
.mud-picker-month-selected  { color: var(--mz-accent) !important; }
/* Day buttons in calendar week grid */
.mud-picker-calendar-week .mud-button-root {
  color: var(--mz-text-muted) !important;
  font-family: var(--mz-font-body) !important;
  font-size: 0.85rem !important;
  border-radius: 50% !important;
}
.mud-picker-calendar-week .mud-button-root:hover {
  background: rgba(184,151,90,0.12) !important;
  color: var(--mz-accent) !important;
}
/* Range selection highlight */
.mud-range-selection { background: rgba(184,151,90,0.12) !important; }
.mud-range-start-selected .mud-button-root,
.mud-range-end-selected .mud-button-root {
  background: var(--mz-accent) !important;
  color: #000 !important;
}

/* ---------- TreeView ---------- */
/* TreeView — no background on items; hover keeps subtle tint */
.mud-treeview-item-content                           { background: transparent !important; }
.mud-treeview-item-content:hover                     { background: rgba(184,151,90,0.06) !important; }
.mud-treeview-item-selected > .mud-treeview-item-content,
.mud-treeview-selected-primary                       { background: rgba(184,151,90,0.1) !important; color: var(--mz-accent) !important; }
.mud-treeview-item-arrow .mud-icon-root              { color: var(--mz-text-muted) !important; }
.mud-treeview-item-label                             { color: var(--mz-text) !important; font-family: var(--mz-font-body) !important; }
.mud-treeview-item-icon .mud-icon-root               { color: var(--mz-accent) !important; }

/* ---------- Toggle Group ---------- */
.mud-toggle-group {
  border: 1px solid var(--mz-border) !important;
  border-radius: var(--mz-radius) !important;
}
.mud-toggle-item {
  font-family: var(--mz-font-heading) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--mz-text-muted) !important;
  border-color: var(--mz-border) !important;
  transition: all var(--mz-transition) !important;
}
.mud-toggle-item:hover { color: var(--mz-accent) !important; background: rgba(184,151,90,0.08) !important; }
.mud-selected.mud-toggle-item {
  background: rgba(184,151,90,0.12) !important;
  color: var(--mz-accent) !important;
  border-color: var(--mz-accent) !important;
}
.mud-toggle-item-delimiter { background: var(--mz-border) !important; }

/* ---------- Icon Button ---------- */
.mud-icon-button .mud-icon-root {
  color: var(--mz-text-muted) !important;
  transition: color var(--mz-transition) !important;
}
.mud-icon-button:hover                  { background: rgba(184,151,90,0.08) !important; }
.mud-icon-button:hover .mud-icon-root   { color: var(--mz-accent) !important; }
.mud-icon-button.mud-focus-visible      { outline: 2px solid rgba(184,151,90,0.4) !important; outline-offset: 2px !important; }

/* ---------- Additional Button Variants ---------- */
.mud-button-text-primary             { color: var(--mz-accent) !important; }
.mud-button-text-primary:hover       { background: rgba(184,151,90,0.08) !important; color: var(--mz-accent-light) !important; }
.mud-button-text-secondary           { color: var(--mz-text-muted) !important; }
.mud-button-text-secondary:hover     { background: rgba(255,255,255,0.04) !important; color: var(--mz-text) !important; }
.mud-button-outlined-secondary       { border: 1px solid var(--mz-border) !important; color: var(--mz-text-muted) !important; }
.mud-button-outlined-secondary:hover { border-color: var(--mz-accent) !important; color: var(--mz-accent) !important; }
.mud-button-filled-tertiary          { background: rgba(184,151,90,0.15) !important; color: var(--mz-accent) !important; }
.mud-button-filled-tertiary:hover    { background: rgba(184,151,90,0.25) !important; }

/* ---------- Simple Table ---------- */
.mud-simple-table { background: var(--mz-bg-card) !important; border: 1px solid var(--mz-border) !important; }
.mud-simple-table th {
  color: var(--mz-text-muted) !important;
  font-family: var(--mz-font-heading) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--mz-border) !important;
  background: var(--mz-bg-alt) !important;
}
.mud-simple-table td        { border-bottom-color: var(--mz-border) !important; color: var(--mz-text) !important; }
.mud-simple-table tr:hover td { background: rgba(184,151,90,0.04) !important; }

/* ---------- List Subheader ---------- */
.mud-list-subheader {
  font-family: var(--mz-font-heading) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--mz-text-muted) !important;
}

/* ---------- Scroll-to-top FAB ---------- */
.mud-scroll-to-top .mud-fab {
  background: var(--mz-bg-card) !important;
  border: 1px solid var(--mz-border) !important;
  color: var(--mz-text-muted) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
.mud-scroll-to-top .mud-fab:hover {
  border-color: var(--mz-accent) !important;
  color: var(--mz-accent) !important;
}

/* ---------- Ripple ---------- */
.mud-ripple-effect { background: rgba(184,151,90,0.15) !important; }

/* ---------- Focus visible (global) ---------- */
.mud-focus-visible { outline: 2px solid rgba(184,151,90,0.5) !important; outline-offset: 2px !important; }

/* ---------- Input underline variant ---------- */
.mud-input-underline::after         { border-bottom-color: var(--mz-accent) !important; }
.mud-input-underline:hover::before  { border-bottom-color: rgba(184,151,90,0.4) !important; }

/* ---------- Input filled variant ---------- */
.mud-input-root-filled { background: var(--mz-bg-card) !important; }

/* ============================================================
   Mezzo Nav (top horizontal nav in AppBar)
============================================================ */
.mezzo-logo-text {
  font-family: var(--mz-font-heading) !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mz-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.mezzo-logo-img {
  height: 38px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.mezzo-nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding-top: 3px;
}
.mezzo-nav-links a {
  font-family: var(--mz-font-heading);
  color: var(--mz-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--mz-transition);
}
.mezzo-nav-links a:hover,
.mezzo-nav-links a.active { color: var(--mz-accent); }

/* ---------- Main content offset for fixed AppBar ---------- */
/* Main content pane is the sole scroll container.
   Pinned to exactly the area below the navbar so the scrollbar
   track never extends behind it. */
.mud-main-content {
  position: fixed !important;
  top: var(--mz-nav-height) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding-top: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.mezzo-content { min-height: 100%; }

/* ============================================================
   Page / Section Layout Utilities
============================================================ */
.container { max-width: var(--mz-max-w); margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }

.section { padding: 96px 0; }
.section--alt { background: var(--mz-bg-alt); }

.section__label {
  font-family: var(--mz-font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mz-accent);
  display: block;
  margin-bottom: 14px;
}
.section__heading { margin-bottom: 16px; }
.section__lead {
  font-size: 1.05rem;
  color: var(--mz-text-muted);
  max-width: 600px;
  margin: 0 auto 60px;
}

.divider-accent { width: 50px; height: 2px; background: var(--mz-accent); margin: 20px auto 0; }
.divider-accent--left { margin-left: 0; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--mz-nav-height) + 60px) 24px 80px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(184,151,90,0.08) 0%, transparent 70%),
    linear-gradient(135deg, #0c0c0c 0%, #141008 50%, #0c0c0c 100%);
}

.hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mz-accent);
  border: 1px solid var(--mz-accent);
  padding: 6px 18px;
  border-radius: 2px;
  margin-bottom: 28px;
  font-family: var(--mz-font-heading);
}

.hero h1 { margin-bottom: 20px; max-width: 800px; }
.hero__sub { font-size: 1.1rem; color: var(--mz-text); max-width: 560px; margin: 0 auto 40px; }

/* ---------- CTA Strip ---------- */
.cta-strip {
  background: linear-gradient(135deg, #1a140a 0%, #0f0c06 100%);
  border-top: 1px solid var(--mz-border);
  border-bottom: 1px solid var(--mz-border);
  text-align: center;
  padding: 72px 24px;
}
.cta-strip p { font-size: 1.1rem; max-width: 540px; margin: 0 auto 32px; }

/* ---------- Service Cards ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 60px;
}
.service-card {
  background: var(--mz-bg-card);
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  padding: 36px 28px;
  transition: var(--mz-transition);
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--mz-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mz-transition);
}
.service-card:hover { border-color: var(--mz-accent); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
.service-card:hover::before { transform: scaleX(1); }
.service-card h3 { margin-bottom: 12px; }
.service-card p  { font-size: 0.9rem; line-height: 1.8; }

/* ---------- Client Cards ---------- */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 60px;
}
.client-card {
  background: var(--mz-bg-card);
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  padding: 36px 32px;
  transition: var(--mz-transition);
}
.client-card:hover { border-color: var(--mz-accent); box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
.client-card__header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.client-card__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(184,151,90,0.15);
  border: 1px solid var(--mz-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
  color: var(--mz-accent); font-weight: 700;
}
.client-card__meta h3 { color: var(--mz-text); font-size: 1rem; margin-bottom: 4px; }
.client-card__meta span { font-size: 0.8rem; color: var(--mz-text-muted); }
.client-card__quote {
  font-size: 0.9rem; line-height: 1.9;
  color: var(--mz-text-muted);
  border-left: 2px solid var(--mz-accent);
  padding-left: 16px; margin-bottom: 20px;
}

/* ---------- Page Hero (inner pages) ---------- */
.page-hero {
  padding: calc(var(--mz-nav-height) + 72px) 24px 64px;
  text-align: center;
  background: linear-gradient(to bottom, rgba(184,151,90,0.04) 0%, transparent 100%);
  border-bottom: 1px solid var(--mz-border);
}
.page-hero h1 { margin-bottom: 14px; }
.page-hero p { max-width: 520px; margin: 0 auto; font-size: 1rem; }

/* ---------- 404 page ---------- */
.page-hero--404 {
  position: relative;
  overflow: hidden;
  /* slightly taller to give the ghost glyph room */
  padding-top: calc(var(--mz-nav-height) + 80px);
  padding-bottom: 80px;
}

/* Large ghost "404" watermark sitting behind the content */
.notfound-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mz-font-heading);
  font-size: clamp(14rem, 28vw, 26rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(184, 151, 90, 0.05);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.notfound-message {
  max-width: 420px;
  margin: 0 auto;
}

/* ---------- Badges ---------- */
.badge-accent {
  display: inline-block;
  background: rgba(184,151,90,0.15);
  color: var(--mz-accent);
  border: 1px solid var(--mz-accent);
  border-radius: 100px;
  padding: 5px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--mz-font-heading);
}

/* ---------- Form styles ---------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-group label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mz-text-muted);
  font-family: var(--mz-font-heading);
}
.form-group input,
.form-group textarea,
.form-group select {
  background: var(--mz-bg-card);
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  padding: 13px 16px;
  color: var(--mz-text);
  font-size: 0.95rem;
  font-family: var(--mz-font-body);
  transition: border-color var(--mz-transition);
  outline: none;
  width: 100%;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--mz-accent);
  box-shadow: 0 0 0 3px rgba(184,151,90,0.12);
}
.form-group textarea { min-height: 140px; resize: vertical; }

/* ---------- Footer ---------- */
.mezzo-footer {
  background: #080808;
  border-top: 1px solid var(--mz-border);
  padding: 56px 0 32px;
  font-size: 0.85rem;
  color: var(--mz-text-muted);
}
.mezzo-footer a { color: var(--mz-text-muted); }
.mezzo-footer a:hover { color: var(--mz-accent); }
.mezzo-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
  max-width: var(--mz-max-w);
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
.mezzo-footer__heading {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mz-text);
  margin-bottom: 18px;
  font-family: var(--mz-font-heading);
}
.mezzo-footer__nav { list-style: none; padding: 0; margin: 0; }
.mezzo-footer__nav li { margin-bottom: 10px; }
.mezzo-footer__nav a { font-size: 0.88rem; color: var(--mz-text-muted); transition: color var(--mz-transition); }
.mezzo-footer__nav a:hover { color: var(--mz-accent); }
.mezzo-footer__bottom {
  border-top: 1px solid var(--mz-border);
  padding-top: 24px; margin-top: 8px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  font-size: 0.8rem;
  max-width: var(--mz-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- Blazor Error UI ---------- */
#blazor-error-ui {
  background: rgba(184,151,90,0.1);
  border-top: 1px solid var(--mz-accent);
  color: var(--mz-accent);
  display: none;
  font-size: 0.9rem;
  padding: 12px 24px;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
}
#blazor-error-ui .reload { color: var(--mz-accent-light); }
#blazor-error-ui .dismiss { cursor: pointer; float: right; margin-left: 12px; }

/* ============================================================
   Responsive
============================================================ */

/* ---------- Hamburger button (hidden on desktop) ---------- */
.mezzo-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  height: 36px;
  width: 36px;
  line-height: 1;
  vertical-align: middle;
  font-size: 0;
}
.mezzo-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--mz-text);
  border-radius: 2px;
  transition: transform var(--mz-transition), opacity var(--mz-transition);
}
/* Animate to X when open */
.mezzo-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mezzo-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mezzo-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile dropdown nav ---------- */
.mezzo-mobile-nav {
  display: none; /* hidden until breakpoint */
  position: fixed;
  top: var(--mz-nav-height);
  left: 0;
  right: 0;
  z-index: 1400; /* above MudBlazor AppBar (~1300) and all content */
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mz-border);
  flex-direction: column;
  padding: 12px 0;
  /* slide-down animation */
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--mz-transition), opacity var(--mz-transition);
}
.mezzo-mobile-nav.is-open {
  pointer-events: auto;
  transform: translateY(0);
  opacity: 1;
}
.mezzo-mobile-nav a {
  display: block;
  padding: 14px 28px;
  font-family: var(--mz-font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mz-text-muted);
  transition: color var(--mz-transition), background var(--mz-transition);
}
.mezzo-mobile-nav a:hover,
.mezzo-mobile-nav a.active {
  color: var(--mz-accent);
  background: rgba(184,151,90,0.05);
}

/* ---------- Breakpoints ---------- */
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .mezzo-nav-links { gap: 20px; }
  .form-row { grid-template-columns: 1fr; }
  .mezzo-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .mezzo-footer__bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
  .section { padding: 48px 0; }
  /* Hide inline links, show hamburger */
  .mezzo-nav-links { display: none !important; }
  .mezzo-hamburger { display: flex; }
  /* Mobile nav becomes a flex column when open */
  .mezzo-mobile-nav { display: flex; }
  .clients-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Examples Page Layout
============================================================ */

/* ── Section wrapper ── */
.ex-section {
  margin-bottom: 80px;
}
.ex-section__header {
  margin-bottom: 40px;
}

/* ── Example card ── */
.ex-card {
  background: var(--mz-bg-card);
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  margin-bottom: 24px;
  overflow: hidden;
  transition: border-color var(--mz-transition);
}
.ex-card:hover { border-color: rgba(184,151,90,0.4); }

.ex-card__header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--mz-border);
}
.ex-card__title {
  color: var(--mz-text) !important;
  margin-bottom: 4px !important;
}
.ex-card__desc {
  color: var(--mz-text-muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
}

.ex-card__demo {
  padding: 24px;
}

/* ── Utility row used inside demo areas ── */
.ex-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

@media (max-width: 600px) {
  .ex-card__demo { padding: 16px; }
  .ex-button-row { gap: 8px; }
}