/* ═══════════════════════════════════════════════════════════════
   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 (linked first).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Fallbacks in case the token layer isn't linked */
  --clyffe-navy: var(--navy, #1e1d79);
  --clyffe-ember: var(--ember, #d66320);
  --clyffe-cove: var(--cove, #468189);
  --clyffe-hairline: var(--border-hairline, rgba(30,29,121,0.08));
  --clyffe-parchment: var(--parchment, #fdf0d5);
}

/* ── 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(--clyffe-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 200ms cubic-bezier(0.22,1,0.36,1);
}

/* 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. */
.mud-button-root.mud-icon-button {
  box-sizing: border-box;
  height: var(--control-height-md, 40px);
  width: var(--control-height-md, 40px);
}
.mud-button-root.mud-icon-button.mud-icon-button-size-small {
  height: var(--control-height-sm, 32px);
  width: var(--control-height-sm, 32px);
}
.mud-button-root.mud-icon-button.mud-icon-button-size-large {
  height: var(--control-height-lg, 48px);
  width: var(--control-height-lg, 48px);
}

/* …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 checkbox,
   a switch — and those are sized by the control around them, not by this scale. A table pager's
   arrows and a menu's activator are not in that group: those are controls a person aims at, and
   they take the scale.

   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. Each selector carries the same weight as the size rules above, so it is
   source order and not a specificity race that decides. Every entry was verified against a
   rendered gallery of the control it names; guesses at components we do not use were dropped. */
.mud-button-root.mud-icon-button.mud-input-clear-button,
.mud-button-root.mud-icon-button.mud-input-adornment-icon-button,
.mud-button-root.mud-icon-button.mud-alert-close-button,
.mud-button-root.mud-icon-button.mud-chip-close-button,
.mud-button-root.mud-icon-button.mud-switch-base,
.mud-button-root.mud-icon-button.mud-picker-calendar-day,
.mud-button-root.mud-icon-button.mud-picker-nav-button-prev,
.mud-button-root.mud-icon-button.mud-picker-nav-button-next,
.mud-checkbox .mud-button-root.mud-icon-button,
.mud-radio .mud-button-root.mud-icon-button,
.mud-tabs-tabbar .mud-button-root.mud-icon-button {
  height: auto;
  width: auto;
}
.mud-button-filled { box-shadow: none !important; }
.mud-button-filled.mud-button-filled-primary { background-color: var(--clyffe-navy); color: var(--clyffe-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(--clyffe-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(--clyffe-hairline); }
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--clyffe-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(--clyffe-navy) !important; height: 2px; }

/* ── Tables: quiet, generous rows, parchment zebra ── */
.mud-table { box-shadow: none !important; border: 1px solid var(--clyffe-hairline); border-radius: 2px; }
.mud-table-head .mud-table-cell {
  background: rgba(30,29,121,0.03);
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  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(--clyffe-hairline); }
.mud-drawer { border: none; }
.mud-nav-link.active { background: rgba(255,255,255,0.08) !important; }

/* ── Switches read Cove when on (see Switch.jsx) ── */
.mud-switch .mud-switch-track.mud-primary { background: var(--clyffe-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(--clyffe-cove); }