/* =========================================================================
   POS Register — app.css
   MudBlazor integration layer: the token-driven Mud palette + the handful of
   Mud rules we override directly. Loads last, so nothing here needs
   !important — MudBlazor.min.css now loads with the vendor bases at the top
   of index.html (it used to load after us, which is why this file was a
   !important quarantine).

   Two sections:
     1. Palette bridge — maps --mud-palette-* onto our --pos-* tokens, so
        Mud components theme themselves from tokens.css. This is the
        "MudTheme palette" in CSS form rather than C#: it keeps colors in
        tokens.css only (README rule 1) and it follows a runtime
        :root[data-theme] switch, which a static C# MudTheme cannot.
     2. Direct overrides — Mud rules we restyle by hand.

   Mud overrides go here and nowhere else. Rules that style Mud DOM *inside*
   one of our own components stay anchored in components.css / dialogs.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Palette bridge
   MudThemeProvider emits its palette into a runtime <style> block on :root,
   which lands after this file in the document. The doubled :root:root raises
   specificity above it so these mappings win regardless of source order.
   Only the palette entries our UI actually exercises are mapped; anything
   omitted keeps Mud's default.
   ------------------------------------------------------------------------- */
:root:root {
    /* Brand */
    --mud-palette-primary: var(--pos-primary);
    --mud-palette-primary-rgb: var(--pos-primary-rgb);
    --mud-palette-primary-text: var(--pos-text-on-dark);
    --mud-palette-primary-hover: var(--pos-primary-soft);
    --mud-palette-primary-darken: var(--pos-primary-dark);
    --mud-palette-primary-lighten: var(--pos-primary-light);

    /* Secondary — the register has no pink accent; Mud's secondary is used
       for selection affordances, so it maps to the grid-selection blue. */
    --mud-palette-secondary: var(--pos-selected);
    --mud-palette-secondary-rgb: var(--pos-selected-rgb);
    --mud-palette-secondary-text: var(--pos-text-on-dark);

    /* State */
    --mud-palette-success: var(--pos-success);
    --mud-palette-success-rgb: var(--pos-success-rgb);
    --mud-palette-error: var(--pos-danger);
    --mud-palette-error-rgb: var(--pos-danger-rgb);
    --mud-palette-warning: var(--pos-amber);
    --mud-palette-warning-rgb: var(--pos-amber-rgb);
    --mud-palette-info: var(--pos-info);
    --mud-palette-info-rgb: var(--pos-info-rgb);

    /* Surfaces */
    --mud-palette-background: var(--pos-surface);
    --mud-palette-background-gray: var(--pos-surface-muted);
    --mud-palette-surface: var(--pos-surface);
    /* NB: Mud ships -gray, not -grey. Do not add the British spelling here to
       accommodate a typo'd consumer; fix the consumer. */

    /* Text */
    --mud-palette-text-primary: var(--pos-text);
    --mud-palette-text-secondary: var(--pos-text-muted);
    --mud-palette-text-disabled: var(--pos-neutral-400);

    /* Lines */
    --mud-palette-divider: var(--pos-border-light);
    --mud-palette-divider-light: var(--pos-border-light);
    --mud-palette-lines-default: var(--pos-border-light);
    --mud-palette-lines-inputs: var(--pos-border-input);
    --mud-palette-table-lines: var(--pos-border-light);
    --mud-palette-table-striped: var(--pos-surface-muted);
    --mud-palette-table-hover: var(--pos-surface-muted);

    /* Actions */
    --mud-palette-action-default-hover: var(--pos-scrim-05);
}

/* -------------------------------------------------------------------------
   2. Direct overrides
   ------------------------------------------------------------------------- */

/* Dialog close button: Mud renders a bare icon button; we want the brand
   chip. Beats Mud's own .mud-icon-button colouring on specificity. */
.mud-dialog .mud-button-close {
    padding: 10px;
    border-radius: var(--pos-radius);
    background: var(--pos-primary);
    border-color: var(--pos-primary);
    color: var(--pos-text-on-dark);
}

/* Dense inputs sit flush in our layouts; Mud ships 4px block margins.
   Same specificity as Mud's .mud-input-control.mud-input-control-margin-dense,
   so this only wins because app.css now loads after MudBlazor.min.css. */
.mud-input-control.mud-input-control-margin-dense {
    margin: 0;
}

/* …except this one checkbox (CustomerDialog), which wants breathing room
   back. Listed both bare and .mud-input-control-qualified so it outranks the
   rule above whichever element Mud puts the class on. */
.custom-checkboxmd,
.mud-input-control.custom-checkboxmd {
    margin-bottom: 18px;
    margin-top: 18px;
    top: 5px;
}