/* AdminPortal css 21: Theme toggle + Radzen variable mapping.

   WHAT THIS FILE USED TO BE, AND WHY IT IS NOW 10% OF ITS SIZE.

   It was 1,625 lines and 593 hardcoded colours. About 915 of those lines styled
   selectors that no .razor file in this repo emits: it was ported from a portal
   that had css files 08-28 (its own section comments say "---- 17 hot buys",
   "---- 25 product card v3") and those files do not exist here. Another ~365
   lines were a hand-maintained second copy of the light palette - the same six
   hue families 02-tokens.css already declares as roles, restated per component.

   That second copy is what this rewrite removes. A rule written as
   `color: var(--foreground)` is already correct in both themes, so it needs no
   [data-theme="light"] twin. Every rule in 01/03/05/06/07/08 is now written that
   way, so the twins had nothing left to correct.

   The legacy-token light block (--white: #1B1E24 and friends) has moved to
   02-tokens.css as aliases onto the roles. That is the untangling: --white no
   longer has to mean near-black in one theme and white in the other, because
   nothing needs --white to mean a colour at all - it resolves to --foreground,
   and --foreground is theme-correct by construction.

   WHAT RADZEN ACTUALLY RENDERS HERE. Exactly two things: dialogs (DialogService,
   via Shared/ConfirmDialog) and notification toasts (NotificationService). There
   is no RadzenDataGrid, RadzenDropDown, RadzenChart or RadzenPopup anywhere in
   the app - every table is a hand-written <table class="data-table">. So all the
   .rz-data-grid / .rz-dropdown / .rz-popup / .rz-pager overrides are gone too;
   they styled DOM that is never produced.

   A CONFIRMED BUG THIS FIXES. Radzen ships two base sheets and App.razor swaps
   between them. They map the SAME component variables to OPPOSITE ends of the
   base ramp: the dark sheet reads --rz-base-50 as text and --rz-base-900 as page,
   the light sheet reads --rz-text-color from --rz-base-800 and the dialog
   background from --rz-white. The old file set a light --rz-base ramp using the
   DARK sheet's meaning (900 = #FCFCFD, 50 = #232730), so in light theme the
   dialog title resolved to #FCFCFD on a #ffffff dialog: white on white. Any
   confirm flow hit it. Mapping every consumed variable explicitly - including
   --rz-white and the --rz-text-* family, which the old file never set at all -
   makes the result independent of which sheet is loaded. */

/* ============================================
   Theme toggle
   ============================================ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    color: var(--foreground-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.theme-toggle:hover {
    background: var(--card-hover);
    border-color: var(--border-strong);
    color: var(--foreground);
    /* No translateY here. It was the only hover lift left in the cascade. */
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* ============================================================================
   Radzen variable mapping

   ONE block on :root, no light twin: the tokens it reads are already theme-aware,
   so this resolves correctly under either base sheet and either data-theme.
   ============================================================================ */
:root {
    /* ---- Base ramp -------------------------------------------------------
       Radzen's convention is 900 = furthest from the text, 50 = the text itself.
       Mapped onto our elevation ladder so a Radzen surface sits at the same
       height as the hand-written surface next to it. */
    --rz-base-900: var(--background);
    --rz-base-800: var(--surface);
    --rz-base-700: var(--card);
    --rz-base-600: var(--card-hover);
    --rz-base-500: var(--border);
    --rz-base-400: var(--border-strong);
    --rz-base-300: var(--foreground-subtle);
    --rz-base-200: var(--foreground-subtle);
    --rz-base-100: var(--foreground-muted);
    --rz-base-50: var(--foreground);

    --rz-on-base: var(--foreground);
    --rz-on-base-dark: var(--foreground);
    --rz-on-base-darker: var(--foreground);

    /* The light base sheet routes the dialog background AND the notification
       container through --rz-white, bypassing the ramp entirely. It was never
       set, which is half of the white-on-white defect. --rz-black backs the
       dialog mask, which Radzen paints at 50% opacity. */
    --rz-white: var(--card);
    --rz-black: var(--background);
    --rz-base-background-color: var(--card);
    --rz-body-background-color: var(--background);

    /* ---- Text ------------------------------------------------------------
       None of these were declared before, so they fell through to whichever
       base sheet happened to be loaded. */
    --rz-text-color: var(--foreground);
    --rz-text-title-color: var(--foreground);
    --rz-text-secondary-color: var(--foreground-muted);
    --rz-text-tertiary-color: var(--foreground-subtle);
    --rz-text-disabled-color: var(--foreground-subtle);
    --rz-text-contrast-color: var(--foreground);

    /* ---- Brand -----------------------------------------------------------
       Every -light/-dark/-darker points at the same solid: a back-office does
       not need four shades of the accent, and four shades is four chances for
       one of them to fail contrast. */
    --rz-primary: var(--primary);
    --rz-primary-light: var(--primary);
    --rz-primary-dark: var(--primary);
    --rz-primary-darker: var(--primary);
    --rz-primary-lighter: var(--primary-subtle);
    --rz-on-primary: var(--primary-ink);
    --rz-on-primary-light: var(--primary-ink);
    --rz-on-primary-dark: var(--primary-ink);
    --rz-on-primary-darker: var(--primary-ink);
    --rz-on-primary-lighter: var(--primary);

    --rz-outline-color: var(--ring);

    /* ---- Intents ---------------------------------------------------------
       Never declared before, so notification toasts rendered Radzen Material's
       own hues (#4caf50 / #f44336 / #ff9800 / #2196f3) in BOTH themes - matching
       neither the semantic tokens nor the Delta component sitting beside them. */
    --rz-success: var(--success);
    --rz-success-light: var(--success);
    --rz-success-dark: var(--success);
    --rz-success-darker: var(--success);
    --rz-success-lighter: var(--success-subtle);
    --rz-on-success: var(--success-ink);

    --rz-danger: var(--danger);
    --rz-danger-light: var(--danger);
    --rz-danger-dark: var(--danger);
    --rz-danger-darker: var(--danger);
    --rz-danger-lighter: var(--danger-subtle);
    --rz-on-danger: var(--danger-ink);

    --rz-warning: var(--warning);
    --rz-warning-light: var(--warning);
    --rz-warning-dark: var(--warning);
    --rz-warning-darker: var(--warning);
    --rz-warning-lighter: var(--warning-subtle);
    --rz-on-warning: var(--warning-ink);

    --rz-info: var(--info);
    --rz-info-light: var(--info);
    --rz-info-dark: var(--info);
    --rz-info-darker: var(--info);
    --rz-info-lighter: var(--info-subtle);
    --rz-on-info: var(--info-ink);

    /* ---- Geometry and elevation ------------------------------------------ */
    --rz-border-radius: var(--radius);
    --rz-border-radius-sm: var(--radius-sm);
    --rz-border-radius-lg: var(--radius-lg);
    --rz-shadow-1: var(--shadow-sm);
    --rz-shadow-2: var(--shadow-sm);
    --rz-shadow-3: var(--shadow-md);
    --rz-shadow-6: var(--shadow-md);
    --rz-shadow-9: var(--shadow-lg);

    /* ---- Dialog chrome ---------------------------------------------------
       Set explicitly rather than inherited, because the two base sheets reach
       these through different paths. */
    --rz-dialog-background-color: var(--card);
    --rz-dialog-color: var(--foreground);
    --rz-dialog-border-radius: var(--radius);
    --rz-dialog-shadow: var(--shadow-lg);
    --rz-dialog-title-background-color: var(--surface);
    --rz-dialog-title-color: var(--foreground);
    --rz-dialog-title-border: var(--hairline) solid var(--border);
    --rz-dialog-close-color: var(--foreground-muted);
    --rz-dialog-close-hover-color: var(--foreground);
    --rz-dialog-close-hover-background-color: var(--card-hover);
    --rz-dialog-mask-background-color: var(--background);

    /* ---- Notifications ---------------------------------------------------- */
    --rz-notification-container-background-color: var(--card);
    --rz-notification-border-radius: var(--radius);
    --rz-notification-shadow: var(--shadow-md);
    --rz-notification-success-background-color: var(--success-subtle);
    --rz-notification-success-color: var(--success);
    --rz-notification-success-icon-color: var(--success);
    --rz-notification-error-background-color: var(--danger-subtle);
    --rz-notification-error-color: var(--danger);
    --rz-notification-error-icon-color: var(--danger);
    --rz-notification-warning-background-color: var(--warning-subtle);
    --rz-notification-warning-color: var(--warning);
    --rz-notification-warning-icon-color: var(--warning);
    --rz-notification-info-background-color: var(--info-subtle);
    --rz-notification-info-color: var(--info);
    --rz-notification-info-icon-color: var(--info);

    /* ---- Inputs (the dialog's textarea/input are ours, but Radzen's own
            chrome still reads these) ------------------------------------- */
    --rz-input-background-color: var(--surface);
    --rz-input-color: var(--foreground);
    --rz-input-border: var(--hairline) solid var(--border-strong);
    --rz-input-focus-border: var(--hairline) solid var(--ring);
    --rz-input-focus-shadow: none;
    --rz-input-placeholder-color: var(--foreground-subtle);
}

/* ============================================================================
   The two Radzen surfaces this app actually renders.

   Both base sheets are aggressive about their own colours, so these carry
   !important where the sheet does. Nothing here hardcodes a value.
   ============================================================================ */
.rz-dialog {
    background: var(--card);
    color: var(--foreground);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.rz-dialog-titlebar,
.rz-dialog-title {
    background: var(--surface);
    color: var(--foreground);
}

.rz-dialog-content {
    color: var(--foreground);
}

/* --scrim, not an inverted tint: a modal scrim is dark in both themes (see 02).
   Built from --overlay-inv this went white in light theme and a #FFFFFF confirm
   dialog lost its separation from a #FAFAFA-washed page - on the destructive
   confirms in particular. */
.rz-dialog-mask {
    background: var(--scrim);
}

.rz-notification-item {
    background: var(--card);
    color: var(--foreground);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.rz-notification-item .rz-notification-message,
.rz-notification-item .rz-notification-detail {
    color: var(--foreground);
}