/* ═══════════════════════════════════════════════════════════════
   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);
}
.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); }