/* =====================================================================
   BackOffice buttons — PostHog-style
   Ships with the CH.BowlingCRM.UI.Framework library. Consumers reference it
   via _content/CH.BowlingCRM.UI.Framework/css/buttons.css and supply the
   `--bo-*` theme tokens (palette lives with the host, not the library).

   Turns MudBlazor's solid/outlined action buttons into a PostHog "secondary"
   button — a light surface with a semantic-coloured border and a thicker,
   darker bottom edge that reads as a subtly raised, physical button. Each
   button keeps its colour: red border for delete/error, orange for
   edit/warning, green for success, blue for primary, grey for default. The
   colour shows in the border + icon instead of a full fill.

   SCOPE — what this targets and why:
     • Filled buttons          (.mud-button-filled)
     • Outlined buttons        (.mud-button-outlined)
     • Labelled text buttons   (.mud-button-text, but NOT icon-only)
   These are the deliberate action buttons developers place (CRUDButton,
   dialog actions, toolbars, …). MudBlazor's own chrome — dialog close "X",
   table pagination, input adornments, checkboxes / radios / switches — is
   rendered as *text icon* buttons, so it is left untouched. Tabs and table
   sort labels are excluded explicitly for the same reason.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Shared selector group. Repeated per rule because plain CSS can't alias
   a selector list; keep the three members in sync across the blocks below.
   --------------------------------------------------------------------- */

/* --- Base shell: light surface, semantic border, raised bottom edge -
   The border takes the button's semantic colour; the bottom border is
   thicker and darker, so — following the corner radius — it reads as a
   subtly raised, physical button (the PostHog look). */
.mud-button-root.mud-button-outlined,
.mud-button-root.mud-button-text:not(.mud-icon-button):not(.mud-tab):not(.mud-table-sort-label) {
    /* Resolve the accent here WITHOUT declaring --bo-btn-accent, so the
       per-colour rules below (lower specificity) still win. Color.Default /
       Inherit fall back to grey via the var() fallback. */
    --bo-btn-tone: var(--bo-btn-accent, var(--bo-text-muted));
    /* Softened, grey-leaning border: the accent shows through but stays muted,
       so default buttons read as light grey and coloured ones as a soft tint. */
    --bo-btn-border: color-mix(in srgb, var(--bo-btn-tone) 42%, transparent);
    /* The raised bottom "lip": same accent, more opaque so it reads darker. */
    --bo-btn-edge: color-mix(in srgb, var(--bo-btn-tone) 62%, transparent);

    background-color: var(--bo-surface-solid) !important;
    color: var(--bo-text) !important;
    border: 1px solid var(--bo-btn-border) !important;
    border-bottom: 3.5px solid var(--bo-btn-edge) !important;
    border-radius: var(--bo-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    text-transform: none;
    font-weight: 500;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}

/* The icon carries the semantic colour (the "current colouring"). */
.mud-button-root.mud-button-outlined .mud-icon-root,
.mud-button-root.mud-button-text:not(.mud-icon-button):not(.mud-tab):not(.mud-table-sort-label) .mud-icon-root {
    color: var(--bo-btn-tone);
}

/* Hover: gentle accent-tinted fill, slightly deeper shadow. */
.mud-button-root.mud-button-outlined:hover,
.mud-button-root.mud-button-text:not(.mud-icon-button):not(.mud-tab):not(.mud-table-sort-label):hover {
    background-color: color-mix(in srgb, var(--bo-btn-tone) 7%, var(--bo-surface-solid)) !important;
    border-color: color-mix(in srgb, var(--bo-btn-tone) 60%, transparent) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

/* Active: flatten the raised bottom edge and sink — the button "presses". */
.mud-button-root.mud-button-outlined:active,
.mud-button-root.mud-button-text:not(.mud-icon-button):not(.mud-tab):not(.mud-table-sort-label):active {
    border-bottom-width: 1px !important;
    transform: translateY(1px);
    box-shadow: none;
}

/* Keyboard focus ring in the accent colour. */
.mud-button-root.mud-button-outlined:focus-visible,
.mud-button-root.mud-button-text:not(.mud-icon-button):not(.mud-tab):not(.mud-table-sort-label):focus-visible {
    outline: 2px solid var(--bo-btn-tone);
    outline-offset: 1px;
}

/* Disabled: keep the flat shell but read as inert. */
.mud-button-root.mud-button-outlined:disabled,
.mud-button-root.mud-button-outlined.mud-disabled,
.mud-button-root.mud-button-text:not(.mud-icon-button):not(.mud-tab):not(.mud-table-sort-label):disabled,
.mud-button-root.mud-button-text:not(.mud-icon-button):not(.mud-tab):not(.mud-table-sort-label).mud-disabled {
    opacity: 0.5;
    box-shadow: none;
    border-color: var(--bo-border) !important;
}

/* ---------------------------------------------------------------------
   Filled = the primary CTA. Unlike outlined/text (light secondary shells
   above), a filled button gets a SOLID semantic-colour surface with white
   text and a darker bottom "lip", so it still reads as a raised, physical
   PostHog button while standing out as the deliberate primary action.
   --------------------------------------------------------------------- */
.mud-button-root.mud-button-filled {
    /* Accent comes from the per-colour rules below; default/inherit falls
       back to the primary brand colour (a CTA should never be grey). */
    --bo-btn-tone: var(--bo-btn-accent, var(--bo-primary));
    /* Darker shade of the same accent for the raised bottom edge. */
    --bo-btn-edge: color-mix(in srgb, var(--bo-btn-tone) 78%, black);

    background-color: var(--bo-btn-tone) !important;
    color: #fff !important;
    border: 1px solid var(--bo-btn-tone) !important;
    border-bottom: 3.5px solid var(--bo-btn-edge) !important;
    border-radius: var(--bo-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    text-transform: none;
    font-weight: 500;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}

/* Icon + label inherit the white-on-accent foreground. */
.mud-button-root.mud-button-filled .mud-icon-root {
    color: inherit;
}

/* Hover: deepen the fill a touch, slightly stronger shadow. */
.mud-button-root.mud-button-filled:hover {
    background-color: color-mix(in srgb, var(--bo-btn-tone) 88%, black) !important;
    border-color: color-mix(in srgb, var(--bo-btn-tone) 88%, black) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

/* Active: flatten the raised edge and sink — the button "presses". */
.mud-button-root.mud-button-filled:active {
    border-bottom-width: 1px !important;
    transform: translateY(1px);
    box-shadow: none;
}

/* Keyboard focus ring in the accent colour. */
.mud-button-root.mud-button-filled:focus-visible {
    outline: 2px solid var(--bo-btn-edge);
    outline-offset: 2px;
}

/* Disabled: keep the fill but read as inert. */
.mud-button-root.mud-button-filled:disabled,
.mud-button-root.mud-button-filled.mud-disabled {
    opacity: 0.5;
    box-shadow: none;
}

/* ---------------------------------------------------------------------
   Per-colour accent (drives icon + hover border + focus ring).
   MudBlazor emits `.mud-button-{variant}-{color}`; we map each colour to a
   palette var. Setting the var on every coloured button is harmless — only
   the styled shells above consume it.
   --------------------------------------------------------------------- */
.mud-button-filled-primary,
.mud-button-outlined-primary,
.mud-button-text-primary {
    --bo-btn-accent: var(--mud-palette-primary);
}

.mud-button-filled-secondary,
.mud-button-outlined-secondary,
.mud-button-text-secondary {
    --bo-btn-accent: var(--mud-palette-secondary);
}

.mud-button-filled-tertiary,
.mud-button-outlined-tertiary,
.mud-button-text-tertiary {
    --bo-btn-accent: var(--mud-palette-tertiary);
}

.mud-button-filled-info,
.mud-button-outlined-info,
.mud-button-text-info {
    --bo-btn-accent: var(--mud-palette-info);
}

.mud-button-filled-success,
.mud-button-outlined-success,
.mud-button-text-success {
    --bo-btn-accent: var(--mud-palette-success);
}

.mud-button-filled-warning,
.mud-button-outlined-warning,
.mud-button-text-warning {
    --bo-btn-accent: var(--mud-palette-warning);
}

.mud-button-filled-error,
.mud-button-outlined-error,
.mud-button-text-error {
    --bo-btn-accent: var(--mud-palette-error);
}

.mud-button-filled-dark,
.mud-button-outlined-dark,
.mud-button-text-dark {
    --bo-btn-accent: var(--bo-text);
}