/* ============================================================================
   yz-theme.css  —  global dark-mode overrides for the MudBlazor app
   ----------------------------------------------------------------------------
   Why this file exists:
   Most pages (Orders, Products, AddScript, Variations, ThirdPartyProducts,
   Script*, BulkUpload, …) each ship the SAME inline <style> block with the
   same hard-coded hex (#3A3A3A headers, #3A3A3A body text, #fafafa stripes,
   #666 labels, #ccc underlines, #555 nested-table headers, etc). Rather than
   edit every page, this ONE sheet re-themes those shared selectors from the
   --yz-* tokens published by MudMainContent (class "yz-app").

   How it wins without page edits:
   The pages' rules look like  ".mud-table-head .mud-table-cell { … !important }".
   Every rule here is prefixed with ".yz-app", giving it HIGHER specificity, so
   even though page <style> blocks render later in the DOM, these override them.

   Requirements:
     1. MudMainContent has  Class="yz-app"  and defines the --yz-* tokens
        (see the layout edit in dark-mode-README.md).
     2. This file is linked in App.razor AFTER app.css.

   Light mode is unchanged: every var() carries its original value as fallback,
   and in light mode the tokens resolve to exactly the old hex.
   ========================================================================== */

/* ── Data-table header ───────────────────────────────────────────────────── */
.yz-app .mud-table-head .mud-table-cell {
    background-color: var(--yz-thead, #3A3A3A) !important;
    color: #ffffff !important;
}

.yz-app .mud-table-head .mud-icon-root,
.yz-app .mud-table-head .mud-table-sort-label {
    color: #ffffff !important;
}

/* ── Data-table body ─────────────────────────────────────────────────────── */
.yz-app .mud-table-body .mud-table-cell {
    color: var(--yz-text, #3A3A3A) !important;
    border-bottom: 1px solid var(--yz-line, #f5f5f5) !important;
}
/* Both spellings appear across pages (.mud-table-row and .mud-table-container) */
.yz-app .mud-table-body .mud-table-row:nth-child(even),
.yz-app .mud-table-body .mud-table-container:nth-child(even) {
    background-color: var(--yz-surface-alt, #fafafa) !important;
}

.yz-app .mud-table-body .mud-table-row:hover td,
.yz-app .mud-table-body .mud-table-container:hover td {
    background-color: var(--yz-hover, rgba(246,192,10,0.05)) !important;
}

/* ── Nested tables (price-table on Products, mto-table on Variations) ──────── */
.yz-app .price-table .mud-table-head .mud-table-cell,
.yz-app .mto-table .mud-table-head .mud-table-cell {
    background-color: var(--yz-thead-2, #555555) !important;
}

/* ── Field labels & input underlines ───────────────────────────────────────── */
.yz-app .yz-label {
    color: var(--yz-text-muted, #666666) !important;
}

.yz-app .mud-input-underline:before {
    border-bottom-color: var(--yz-input-line, #cccccc) !important;
}
/* :after (focused) stays brand gold — intentionally not overridden. */

/* ── Dashed image-upload dropzones ─────────────────────────────────────────── */
.yz-app .image-upload-area {
    border-color: var(--yz-dashed, #dddddd) !important;
}

/* ── Inline style="" hex that CSS can only reach via attribute selectors ─────
   These target the exact inline strings used across the pages. They assume the
   no-space form actually in the code (e.g. "color:#3A3A3A", not "color: #3A3A3A").
   The [i] flag makes the hex case-insensitive.
   -------------------------------------------------------------------------- */

/* Modal header bars: charcoal → slate in dark */
.yz-app [style*="background:#3A3A3A" i] {
    background: var(--yz-thead, #3A3A3A) !important;
}

/* Dark text NOT sitting on a gold button (titles, subtitles, "Close" buttons,
   expanded-section captions). The :not() keeps gold buttons' dark text intact
   (those styles contain #F6C00A). Both the no-space ("color:#3A3A3A") and
   spaced ("color: #3A3A3A") inline forms are matched — pages use both. */
.yz-app [style*="color:#3A3A3A" i]:not([style*="F6C00A" i]),
.yz-app [style*="color: #3A3A3A" i]:not([style*="F6C00A" i]) {
    color: var(--yz-text, #3A3A3A) !important;
}

/* Faint helper captions (#888), both inline forms */
.yz-app [style*="color:#888" i],
.yz-app [style*="color: #888" i] {
    color: var(--yz-text-faint, #888888) !important;
}

/* White card backgrounds set inline (e.g. .stat-card { background:#fff }) */
.yz-app .stat-card,
.yz-app [style*="background:#fff" i]:not(.mud-button-root),
.yz-app [style*="background: #fff" i]:not(.mud-button-root) {
    background: var(--yz-surface, #ffffff) !important;
}

/* Upload dropzone dashed border + tinted fill read fine in both modes; the
   caption text inside is handled by the #3A3A3A / #888 rules above. */

/* Light-grey slabs behind expanded rows (#f9f9f9) */
.yz-app [style*="background:#f9f9f9" i] {
    background: var(--yz-surface-alt, #f9f9f9) !important;
}

/* Hairline borders used inline (#eee / #ddd) */
.yz-app [style*="1px solid #eee" i],
.yz-app [style*="1px solid #ddd" i],
.yz-app [style*="border-color:#ddd" i] {
    border-color: var(--yz-border, #eeeeee) !important;
}

/* ── Modal / dialog backdrop ─────────────────────────────────────────────────
   Frost the app behind any open modal. The scrim (.mud-overlay) covers the
   viewport and sits below the modal, so blurring it blurs the background app
   while the modal content (painted on top) stays sharp. Covers both MudDialog
   and the custom "mud-overlay mud-overlay-dialog" modals on Products/Variations. */
.mud-overlay {
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}
    /* A touch more scrim so the modal reads as the focus */
    .mud-overlay.mud-overlay-dialog,
    .mud-overlay .mud-overlay-scrim,
    .mud-overlay-dialog {
        background-color: rgba(0,0,0,0.45) !important;
    }

/* ── Kill the reload flash ───────────────────────────────────────────────────
   site.js adds html.yz-dark synchronously in <head> (before Blazor/Mud load),
   so painting the dark background here means no light flash before the app
   hydrates. The cookie (see site.js) lets the server prerender in dark too. */
html.yz-dark,
html.yz-dark body {
    background-color: #1f2430 !important;
}

/* ── Toast notifications (BlazorBootstrap <Toasts>) ──────────────────────────
   These render at the document root (outside .yz-app), so they are themed with
   the global --mud-palette-* variables the theme provider publishes, not --yz-*.
   Two problems fixed: (1) they were tucked under the fixed app bar, (2) white
   surface looked wrong in dark mode.
   -------------------------------------------------------------------------- */

/* Clear the fixed app bar and stack above it (top placements) */
.toast-container.position-fixed.top-0 {
    top: 76px !important;
}

.toast-container {
    z-index: 2100 !important;
}

/* Theme the toast surface for light + dark */
.toast {
    --bs-toast-bg: var(--mud-palette-surface);
    --bs-toast-color: var(--mud-palette-text-primary);
    --bs-toast-header-bg: var(--mud-palette-surface);
    --bs-toast-header-color: var(--mud-palette-text-primary);
    --bs-toast-border-color: var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
}

    .toast .toast-header {
        background-color: var(--mud-palette-surface) !important;
        color: var(--mud-palette-text-primary) !important;
        border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    }

    .toast .toast-body {
        color: var(--mud-palette-text-primary) !important;
    }
/* Close (×) is a dark SVG — invert it in dark mode so it stays visible */
html.yz-dark .toast .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6) !important;
}

/* ── Notes ───────────────────────────────────────────────────────────────────
   • .dark-search header inputs (white text) are deliberately left alone — white
     reads fine on both the charcoal (light-mode) and slate (dark-mode) header.
   • MudPaper cards, modal bodies, MudSelect/MudTextField popovers, chips,
     switches, alerts and progress all re-theme automatically from the
     PaletteDark you added — no rules needed here.
   • Row action icons / expand chevrons stay light via the app-wide
     ".mud-icon-root { color:#E0E0E0 }" rule, which reads fine on dark rows.
   • Gold "Save"/"Add" buttons: dark text on gold, correct in both modes.
   ========================================================================== */