/* ═══════════════════════════════════════════════════════════════
   Clyffe · MudBlazor overrides
   Mirrors the canonical design system's integrations/mudblazor/
   clyffe-mud-overrides.css. The theme object (ClyffeTheme.cs) handles
   palette, type, and radius; these rules cover the Clyffe-specific
   details MudBlazor's Material defaults can't express: flat cards,
   calm hovers, gentle press, quiet tables, scarce Ember.

   MUST load AFTER MudBlazor's stylesheet. Both web apps link it from
   _content/Clyffe.DesignSystem/clyffe-mud-overrides.css in App.razor.
   Variables come from clyffe-tokens.css, which every host links first.
   Nothing here re-declares a brand value — that is what ADR 0015 forbids.
   ═══════════════════════════════════════════════════════════════ */

/* ── Cards: flat, hairline border, 2px radius, NO drop shadow ── */
.mud-paper,
.mud-card {
  border-radius: 2px !important;
  box-shadow: none !important;
  border: 1px solid var(--border-hairline);
  background: var(--white, #fff);
}
/* Genuinely floating layers keep a soft shadow */
.mud-popover, .mud-menu-popover, .mud-dialog, .mud-snackbar, .mud-tooltip {
  box-shadow: 0 8px 28px rgba(9,18,4,0.10), 0 2px 6px rgba(9,18,4,0.05) !important;
  border: none;
}
.mud-dialog { border-radius: 4px !important; }

/* ── Buttons: 4px, no ripple flood, calm hover / gentle press ── */
.mud-button-root {
  border-radius: 4px !important;
  letter-spacing: 0.3px;
  text-transform: none !important;   /* sentence case, never UPPERCASE */
  transition: all var(--duration-micro) var(--ease-out);
}

/* One height per size, whatever the variant. MudBlazor gives every variant its own
   padding and no height at all, so buttons that should read as one row of controls
   drift a pixel or three apart — and anything that wraps a button (a file upload, a
   menu) adds its own box on top of that. The height is the contract; padding is not. */
.mud-button-root.mud-button {
  min-height: var(--control-height-md, 40px);
  /* A label that wraps is the one thing that can push a button past its size, and a fixed height
     would answer that by clipping the text. Hold the label on one line instead — the same call
     Button.jsx makes in the React components — and the minimum is then also the actual height. */
  white-space: nowrap;
}
.mud-button-root.mud-button.mud-button-text-size-small,
.mud-button-root.mud-button.mud-button-filled-size-small,
.mud-button-root.mud-button.mud-button-outlined-size-small {
  min-height: var(--control-height-sm, 32px);
}
.mud-button-root.mud-button.mud-button-text-size-large,
.mud-button-root.mud-button.mud-button-filled-size-large,
.mud-button-root.mud-button.mud-button-outlined-size-large {
  min-height: var(--control-height-lg, 48px);
}

/* Icon buttons ride the same scale, square, so one can stand in a row with a text button.
   MudBlazor sizes them from the icon out — 48px at medium against a 40px text button, 24px at
   small against 32px — which is a mismatch waiting for the first row that mixes the two. The
   height is set outright rather than as a minimum, because medium's 12px padding is what makes
   it too big; the icon stays centred by the flex box `.mud-button-root` already is.

   …but only where the icon button IS the control. MudBlazor also builds the moving parts of
   bigger controls out of icon buttons — a field's clear button, a picker's day cells, a chip's
   close button, a checkbox, a switch — and those are sized by the control around them, not by
   this scale. Those parts are excluded from the selector rather than resized back by a later
   rule, because `width: auto` is not "whatever MudBlazor says": it is a value of its own, and it
   carried more weight than the rule it was meant to defer to. Wherever MudBlazor sizes a part in
   pixels — a day cell at 36px, a chip's close button at 18px — the undo won and collapsed the
   part onto its text. A day cell measured 14x16 instead of 36x36: a month grid with no grid in it.

   Matched on the class MudBlazor puts on the button itself wherever there is one, because popover
   content is teleported to the popover provider and an ancestor selector would stop matching the
   moment a picker opens; only the three components that mark no class on the button are matched
   by ancestor. A table pager's arrows and a menu's activator are not in this group: those are
   controls a person aims at, and they take the scale. Every entry was verified against a rendered
   gallery of the control it names; guesses at components we do not use were dropped.

   The scale is carried on a custom property so the exclusion list is written once. The size
   classes only declare the property; the one rule that reads it is the one that skips the parts. */
.mud-button-root.mud-icon-button.mud-icon-button-size-small {
  --icon-button-size: var(--control-height-sm, 32px);
}
.mud-button-root.mud-icon-button.mud-icon-button-size-large {
  --icon-button-size: var(--control-height-lg, 48px);
}
.mud-button-root.mud-icon-button:not(:is(
  .mud-input-clear-button,
  .mud-input-adornment-icon-button,
  .mud-alert-close-button,
  .mud-chip-close-button,
  .mud-switch-base,
  .mud-picker-calendar-day,
  .mud-picker-nav-button-prev,
  .mud-picker-nav-button-next,
  .mud-checkbox *,
  .mud-radio *,
  .mud-tabs-tabbar *)) {
  box-sizing: border-box;
  height: var(--icon-button-size, var(--control-height-md, 40px));
  width: var(--icon-button-size, var(--control-height-md, 40px));
}

.mud-button-filled { box-shadow: none !important; }
.mud-button-filled.mud-button-filled-primary { background-color: var(--navy); color: var(--parchment); }
.mud-button-filled:hover { box-shadow: none !important; opacity: 0.88; }
.mud-button-root:active { transform: scale(0.98); }
/* Material ripple off — too loud for Clyffe. NB: in MudBlazor the `mud-ripple`
   class is on the interactive element itself (position:relative; overflow:hidden;
   ripple drawn via ::after), so we must disable the pseudo-element only — NOT
   `display:none` on `.mud-ripple`, which would hide every button. */
.mud-ripple::after { display: none !important; }

/* Ember is scarce: reserve the filled-warning/secondary for true CTAs */
.mud-button-filled.mud-button-filled-tertiary { background-color: var(--ember); color: #fff; }

/* ── Inputs: hairline, cove focus (not Material's underline pop) ── */
.mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: 4px; border-color: var(--border-hairline); }
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--cove) !important;
  border-width: 1px !important;
  box-shadow: 0 0 0 3px rgba(70,129,137,0.18);
}

/* ── Tabs: calm underline, navy indicator ── */
.mud-tabs .mud-tab { text-transform: none !important; letter-spacing: 0.2px; }
.mud-tabs .mud-tab-slider { background-color: var(--navy) !important; height: 2px; }

/* ── Tables: quiet, generous rows, parchment zebra ── */
.mud-table { box-shadow: none !important; border: 1px solid var(--border-hairline); border-radius: 2px; }
.mud-table-head .mud-table-cell {
  background: rgba(30,29,121,0.03);
  font-family: var(--font-body, sans-serif);
  font-size: 12px; font-weight: 600; letter-spacing: 0.3px; text-transform: none;
  color: rgba(9,18,4,0.40);
}
.mud-table-row { min-height: 48px; }
.mud-table-row:nth-of-type(even) { background: rgba(253,240,213,0.30); }
.mud-table-row:hover { background: rgba(30,29,121,0.03) !important; }

/* ── Chips / badges: pill only here ── */
.mud-chip { border-radius: 999px; font-weight: 600; letter-spacing: 0.3px; }

/* ── App bar / drawer: match the UI-kit shell ── */
.mud-appbar { box-shadow: none !important; border-bottom: 1px solid var(--border-hairline); }
.mud-drawer { border: none; }
/* The active nav item is drawn by each host's own sidebar rules (.clyffe-nav-menu), not here.
   A generic !important on .mud-nav-link.active silently outranked them, so the "subtle cream
   highlight + 2px rule" both stylesheets declared never rendered — #578. */

/* ── Switches read Cove when on (see Switch.jsx) ── */
.mud-switch .mud-switch-track.mud-primary { background: var(--cove); opacity: 1; }

/* ── Progress / meters use Cove for healthy, Ember only for alert ── */
.mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar { background-color: var(--cove); }