/* ============================================================
   mudblazor-overrides.css  (design-system V2 — RCLIENT-385)
   ────────────────────────────────────────────────────────────
   CSS that targets MudBlazor's emitted class names to fix the
   things RiqTheme.cs (the MudTheme object) can't reach.

   Load AFTER MudBlazor's stylesheet, e.g. in App.razor:

     <link rel="stylesheet" href="_content/MudBlazor/MudBlazor.min.css" />
     <link rel="stylesheet" href="css/tokens.css" />
     <link rel="stylesheet" href="css/mudblazor-overrides.css" />

   This file READS from CSS variables in tokens.css, so if you tweak
   a token there, it flows through here automatically. Adopted VERBATIM
   from recycleriq-design-v2 v1.1.0 (the kit is authoritative on design).
   Only deviation: the kit's --ll-deep-navy ref is mapped to --riq-deep-navy
   because this repo's tokens.css uses the --riq- spine, not --ll- (same
   value, no visual change).
   ============================================================ */

/* ── Surfaces ─────────────────────────────────────────────── */
.mud-paper { border-radius: var(--r-md); }
.mud-paper.mud-elevation-1 { box-shadow: var(--shadow-1); }
.mud-paper.mud-elevation-2 { box-shadow: var(--shadow-2); }
.mud-paper.mud-elevation-4 { box-shadow: var(--shadow-3); }

.mud-card {
  border: 1px solid var(--riq-border-1);
  border-radius: var(--r-lg);
}

/* ── Buttons ──────────────────────────────────────────────── */
.mud-button-root {
  font-family: var(--font-body) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: var(--r-md);
}

.mud-button-filled.mud-button-filled-primary {
  background-color: var(--riq-teal);
  color: var(--riq-deep-navy);
  box-shadow: var(--shadow-1);
}
.mud-button-filled.mud-button-filled-primary:hover {
  background-color: var(--riq-teal-hover);
}

.mud-button-outlined.mud-button-outlined-primary {
  border-color: var(--riq-teal);
  color: var(--riq-teal-hover);
}

/* ── App bar ──────────────────────────────────────────────── */
.mud-appbar {
  box-shadow: var(--shadow-1);
}
.mud-appbar .mud-typography-h6,
.mud-appbar .mud-button-root {
  color: var(--riq-soft-white, #F4F7F9);
}

/* ── Drawer / nav ─────────────────────────────────────────── */
.mud-drawer {
  border-right: 1px solid var(--riq-border-1);
}
.mud-nav-link {
  border-radius: var(--r-md);
  margin: 2px 8px;
  font-weight: 500;
}
.mud-nav-link.active {
  background-color: var(--riq-teal-100);
  color: var(--riq-teal-hover);
}
.mud-nav-link.active .mud-icon-root {
  color: var(--riq-teal-hover);
}

/* ── Responsive touch nav (RCLIENT-429) ───────────────────────
   Per the Recycler.IQ design kit Operator Console prototype (.touch-nav block). On touch
   tablets/phones (coarse pointer) or narrow viewports (≤1024px) the compact desktop drawer
   is swapped for a wider, touch-sized menu: roomier 54px rows, larger single-line labels
   (no wrap/clip — the Galaxy Tab defect), and a dimmed scrim so page content is actually
   covered (MudBlazor's temporary-drawer scrim is transparent by default, which is why the
   page bled through behind the open drawer). Desktop (fine pointer, wide) is unchanged.
   Hamburger + section-header touch sizing live in riq-app.css under the same query. */
@media (max-width: 1024px), (pointer: coarse) {
  /* Override MudBlazor 9.2's --mud-drawer-width variable, NOT the width property. Its rule is
     .mud-drawer.mud-drawer-temporary.mud-drawer-pos-left { width: var(--mud-drawer-width, var(--mud-drawer-width-left)) }
     and the closed-state translate (.mud-drawer--closed { left: calc(-1*var(--mud-drawer-width,…)) })
     reads the SAME variable — so setting width directly would leave the closed drawer peeking out
     by the width delta. Matching the full temporary+pos-left selector (later source order) sets the var. */
  .mud-drawer.mud-drawer-temporary.mud-drawer-pos-left { --mud-drawer-width: min(88vw, 392px); }

  .mud-nav-link {
    min-height: 54px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 16px;
  }
  .mud-nav-link .mud-nav-link-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Dim the temporary-drawer scrim so content is covered (MudBlazor 9.2's .mud-overlay-scrim
     defaults to a transparent background — the root cause of the page bleeding through). Selector
     depends on the MudBlazor 9.2 overlay DOM (.mud-overlay.mud-overlay-drawer > .mud-overlay-scrim) —
     re-audit on a MudBlazor upgrade. */
  .mud-overlay-drawer .mud-overlay-scrim { background-color: rgba(0, 0, 0, 0.62); }
}

/* Phone — let the menu use nearly the full width for comfortable reach (same var override). */
@media (max-width: 480px) {
  .mud-drawer.mud-drawer-temporary.mud-drawer-pos-left { --mud-drawer-width: min(92vw, 360px); }
}

/* ── Tables ───────────────────────────────────────────────── */
.mud-table {
  border: 1px solid var(--riq-border-1);
  border-radius: var(--r-md);
  overflow: hidden;
}
.mud-table-head {
  background-color: var(--riq-bg-sunken);
}
.mud-table-head .mud-table-cell {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--riq-fg-3);
}
.mud-table-row:hover {
  background-color: var(--riq-bg-hover);
}

/* ── Inputs ───────────────────────────────────────────────── */
.mud-input-outlined .mud-input-outlined-border {
  border-radius: var(--r-md);
  border-color: var(--riq-border-2);
}
.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
  border-color: var(--riq-teal) !important;
  box-shadow: var(--focus-ring);
}

/* ── Chart — read this carefully ──────────────────────────── */
/* MudChart renders an SVG with these classes. Override the visual
   defaults (gridlines, axis labels, bar stroke) here. Bar fills are
   driven by ChartOptions.ChartPalette in RiqTheme.cs. */
.mud-chart {
  font-family: var(--font-body);
  color: var(--riq-fg-2);
}
.mud-chart svg text {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--riq-fg-3);
  letter-spacing: 0;
}
/* Y-axis grid lines — quieter than the default */
.mud-chart svg .mud-chart-grid line,
.mud-chart svg line[stroke="#a0a0a0"] {
  stroke: var(--riq-border-1) !important;
  stroke-dasharray: 0 !important;
  stroke-width: 1 !important;
}
/* Axis lines themselves */
.mud-chart svg path[stroke="#000"],
.mud-chart svg path.mud-chart-axis {
  stroke: var(--riq-border-2) !important;
  stroke-width: 1 !important;
}
/* Bars — round the tops a touch */
.mud-chart-bar rect {
  rx: 2;
  ry: 2;
}
/* Bars on hover */
.mud-chart-bar rect:hover {
  filter: brightness(1.08);
  cursor: pointer;
}
/* Remove the default MudBlazor chart drop shadow (looks dated) */
.mud-chart .mud-chart-bar { filter: none; }

/* ── Chips / badges ───────────────────────────────────────── */
.mud-chip.mud-chip-color-success {
  background-color: var(--riq-money-green-100);
  color: var(--riq-money-green-hover);
}
.mud-chip.mud-chip-color-primary {
  background-color: var(--riq-teal-100);
  color: var(--riq-teal-hover);
}

/* ── Snackbar / Alert ─────────────────────────────────────────
   Aligned with the Recycler.IQ <Banner> component. Token-driven,
   so the same rules resolve correctly in light AND dark (the
   --riq-*-50 / -200 ramps swap per [data-theme]). The variant
   icon is tinted to the accent so it reads like Banner's chip. */
.mud-alert {
  border-radius: var(--r-lg);
  border: 1px solid var(--riq-border-1);
  box-shadow: var(--shadow-1);
  font-family: var(--font-body);
  color: var(--riq-fg-2);
}
.mud-alert .mud-alert-message { color: var(--riq-fg-1); }

/* info */
.mud-alert-filled-info,
.mud-alert-outlined-info,
.mud-alert-text-info        { background: var(--riq-teal-50);  border-color: var(--riq-teal-200);  color: var(--riq-fg-2); }
.mud-alert-filled-info .mud-alert-icon,
.mud-alert-outlined-info .mud-alert-icon,
.mud-alert-text-info .mud-alert-icon        { color: var(--riq-info); }

/* success */
.mud-alert-filled-success,
.mud-alert-outlined-success,
.mud-alert-text-success     { background: var(--riq-green-50); border-color: var(--riq-green-200); color: var(--riq-fg-2); }
.mud-alert-filled-success .mud-alert-icon,
.mud-alert-outlined-success .mud-alert-icon,
.mud-alert-text-success .mud-alert-icon     { color: var(--riq-success); }

/* warning */
.mud-alert-filled-warning,
.mud-alert-outlined-warning,
.mud-alert-text-warning     { background: #FBF1DC; border-color: #ECCB86; color: var(--riq-fg-2); }
.mud-alert-filled-warning .mud-alert-icon,
.mud-alert-outlined-warning .mud-alert-icon,
.mud-alert-text-warning .mud-alert-icon     { color: var(--riq-warning); }

/* error */
.mud-alert-filled-error,
.mud-alert-outlined-error,
.mud-alert-text-error       { background: #FBEAEA; border-color: #E8AFAF; color: var(--riq-fg-2); }
.mud-alert-filled-error .mud-alert-icon,
.mud-alert-outlined-error .mud-alert-icon,
.mud-alert-text-error .mud-alert-icon       { color: var(--riq-danger); }

/* warning + error need dark-surface tints (not in the token ramps) */
[data-theme="dark"] .mud-alert-filled-warning,
[data-theme="dark"] .mud-alert-outlined-warning,
[data-theme="dark"] .mud-alert-text-warning { background: #2A2207; border-color: #574611; }
[data-theme="dark"] .mud-alert-filled-error,
[data-theme="dark"] .mud-alert-outlined-error,
[data-theme="dark"] .mud-alert-text-error   { background: #2C1313; border-color: #5A2727; }