:root {
  --mud-palette-primary: var(--primary);
  --mud-palette-primary-hover: var(--primary-hover);
  --mud-palette-primary-text: var(--on-primary);
  --mud-palette-background: var(--canvas);
  --mud-palette-background-grey: var(--surface-2);
  --mud-palette-surface: var(--surface);
  --mud-palette-text-primary: var(--text-strong);
  --mud-palette-text-secondary: var(--text);
  --mud-palette-text-disabled: var(--text-muted);
  --mud-palette-lines-default: var(--border);
  --mud-palette-lines-inputs: var(--border-strong);
  --mud-palette-divider: var(--border);
  --mud-palette-success: var(--green);
  --mud-palette-warning: var(--gold);
  --mud-palette-info: var(--info);
  --mud-palette-error: var(--danger);
  --mud-palette-appbar-background: var(--surface);
  --mud-palette-appbar-text: var(--text-strong);
  --mud-palette-drawer-background: var(--surface);
  --mud-palette-drawer-text: var(--text);
  --mud-default-borderradius: 12px;
  --mud-typography-default-family: 'Instrument Sans', sans-serif;
  --mud-typography-h1-family: 'Bricolage Grotesque', sans-serif;
  --mud-typography-h2-family: 'Bricolage Grotesque', sans-serif;
  --mud-typography-h3-family: 'Bricolage Grotesque', sans-serif;
  --mud-typography-h4-family: 'Bricolage Grotesque', sans-serif;
  --mud-typography-h5-family: 'Bricolage Grotesque', sans-serif;
  --mud-typography-h6-family: 'Bricolage Grotesque', sans-serif;
}

.mud-paper {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.mud-paper-outlined {
  border-color: var(--border);
}

.mud-button-filled.mud-button-filled-primary {
  background-color: var(--primary);
  color: var(--on-primary);
  border-radius: 12px;
  font-weight: 700;
}

.mud-button-filled.mud-button-filled-primary:hover {
  background-color: var(--primary-hover);
}

.mud-button-root {
  text-transform: none;
  letter-spacing: 0;
}

.mud-input.mud-input-filled {
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 11px;
}

.mud-input.mud-input-filled::before,
.mud-input.mud-input-filled::after {
  display: none;
}

.mud-dialog {
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

/* LetsEat dialog chrome — opt-in via Class="le-dialog" on the MudDialog.
   Adds the header/footer dividers and cream footer seen across the redesigned
   dialogs (AddMealView, AddCourseDialog, AddDishOptionDialog, MealPlanView,
   shared ConfirmDialog). Qualified by the app-owned .le-dialog so only opted-in
   dialogs are affected. */
.mud-dialog.le-dialog .mud-dialog-title {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.mud-dialog.le-dialog .mud-dialog-actions {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding: 14px 24px;
  gap: 8px;
}

/* Confirm variant renders its title inside the content next to the icon tile,
   so suppress MudBlazor's default title bar (fed by the ShowAsync title). */
.mud-dialog.le-dialog--confirm .mud-dialog-title {
  display: none;
}

/* Destructive filled buttons (confirm dialogs, delete actions) — match the
   rounded, bold treatment the primary override gives. */
.mud-button-filled.mud-button-filled-error {
  border-radius: 12px;
  font-weight: 700;
}

.mud-popover,
.mud-menu-popover {
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}

.mud-nav-link.active:not(.mud-nav-link-disabled) {
  background-color: var(--primary-tint);
  color: var(--primary);
  border-radius: 11px;
}

.mud-chip {
  border-radius: 20px;
  font-weight: 600;
}

/* User menu popover (LoginDisplay) */
.mud-popover.le-user-popover {
  width: 238px;
}

/* About dialog */
.mud-dialog.le-about-dialog {
  max-width: 440px;
  overflow: hidden;
}

/* =====================================================================
   Component overrides that reach into MudBlazor / Cropper INTERNAL class
   names. Collected here so a MudBlazor/Cropper upgrade that renames
   internals has a single place to audit. Each selector is qualified by an
   app-owned class, so it only affects that component.

   Also relying on framework-internal classes, but left in their component
   files because relocating them would split cohesive styling or a local
   @keyframes:
     - GroupSelector.razor.css  → .group-selector-menu .mud-menu/.mud-popover
     - ImageUpload.razor.css    → .iu-cropper .cropper-*, .iu-btn/.iu-input .mud-*
   ===================================================================== */

/* NavMenu — MudNavLink internal slots */
.le-nav-item .mud-nav-link-text {
  display: contents;
}

.le-nav-item .mud-nav-link-icon {
  display: none;
}

/* Action menus (Mealplans course/meal/dish-option kebab menus, and any future
   MudMenu that opts in with PopoverClass="le-menu"). Restyles MudMenuItem internals
   to match the LoginDisplay user-menu look; IconColor (Primary/Error) set on the
   items is preserved because MudBlazor's colour classes carry their own colour. */
.mud-popover.le-menu {
  padding: 6px;
  min-width: 208px;
}

.le-menu .mud-menu-item {
  border-radius: 9px;
  padding: 9px 10px;
  gap: 11px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  transition: background .15s ease;
}

.le-menu .mud-menu-item:hover:not(.mud-menu-item-disabled) {
  background: var(--surface-2);
}

.le-menu .mud-menu-item-icon {
  min-width: 0;
  margin-right: 0;
}

.le-menu .mud-menu-item-icon .mud-icon-root {
  font-size: 20px;
}

/* GlobalSearchBar — MudTextField (filled) internals */
.le-global-search__field .mud-input.mud-input-filled {
  height: 42px;
  min-height: 42px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 0 16px 0 42px;
  font-size: 14px;
  color: var(--text-strong);
}

.le-global-search__field .mud-input.mud-input-filled .mud-input-slot {
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  color: var(--text-strong);
}

.le-global-search__field .mud-input-control {
  margin-top: 0;
}