/* =====================================================================
   BackOffice density — the compact scale (flow redesign phase 4)
   Ships with the CH.BowlingCRM.UI.Framework library. Consumers reference it
   via _content/CH.BowlingCRM.UI.Framework/css/density.css AFTER MudBlazor's
   stylesheet and supply the density tokens (--bo-field-pad-y, --bo-cell-pad-y,
   … — defined with the palette in the host theme). Every value below falls
   back to the compact default, so the file also works without the tokens.

   GLOBAL on purpose, like buttons.css: popovers and dialogs render outside
   the layout, and the point is that no page has to opt in. A region that
   needs the roomier spacing back sets the tokens itself (the host theme's
   .bo-comfortable class does exactly that).

   Text sizes come from the MudTheme typography; this file owns geometry only.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Outlined fields — every text field, select, picker and autocomplete is
   36px, whether or not the page set Margin.Dense. MudBlazor sizes a field
   from its vertical padding plus a one-line input, and parks the resting
   label with a translate; both are restated here for all margins. The
   floating (shrunk) label keeps MudBlazor's own, more specific rule.
   --------------------------------------------------------------------- */
.mud-input > input.mud-input-root-outlined,
div.mud-input-slot.mud-input-root-outlined,
.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: var(--bo-field-pad-y, 9.5px);
    padding-bottom: var(--bo-field-pad-y, 9.5px);
}

.mud-input > textarea.mud-input-root-outlined,
.mud-input > textarea.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: var(--bo-field-pad-y, 9.5px);
    padding-bottom: var(--bo-field-pad-y, 9.5px);
    mask-image: linear-gradient(to bottom, transparent var(--bo-field-pad-y, 9.5px), black var(--bo-field-pad-y, 9.5px));
}

/* MudBlazor sizes labels at a fixed 1rem rather than from the theme; match the 14px body text. */
label.mud-input-label,
.mud-input-control > .mud-input-control-input-container > label.mud-input-label-inputcontrol {
    font-size: 0.875rem;
}

label.mud-input-label-outlined,
label.mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(14px, var(--bo-field-label-y, 9px)) scale(1);
}

/* Normal-margin fields reserve 16px above for the floating label; dense ones 8px. Use 8px for all. */
.mud-input-control.mud-input-control-margin-normal.mud-input-outlined-with-label {
    margin-top: 8px;
    margin-bottom: 4px;
}

.mud-input-control .mud-input-helper-text {
    font-size: 0.7rem;
    margin-top: 2px;
}

/* ---------------------------------------------------------------------
   Popover lists — select, autocomplete and menu items
   --------------------------------------------------------------------- */
.mud-popover .mud-list-item {
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.mud-popover .mud-list-item .mud-list-item-text p,
.mud-popover .mud-menu-item .mud-menu-item-text {
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------
   Buttons — height only; the look lives in buttons.css. Icon-only buttons
   are MudBlazor's own chrome and keep their size except for a tighter pad.
   --------------------------------------------------------------------- */
.mud-button-root.mud-button:not(.mud-icon-button):not(.mud-tab):not(.mud-table-sort-label) {
    min-height: var(--bo-ctl-h, 30px);
    padding-top: 0;
    padding-bottom: 0;
    padding-inline: 12px;
}

.mud-button-root.mud-button.mud-button-size-small:not(.mud-icon-button):not(.mud-tab):not(.mud-table-sort-label) {
    min-height: var(--bo-ctl-h-sm, 26px);
    padding-inline: 10px;
}

.mud-button-root.mud-icon-button:not(.mud-icon-button-size-small):not(.mud-icon-button-size-large) {
    padding: 6px;
}

/* Numeric spin arrows are part of the field, not action buttons: give them back MudBlazor's own
   sizing (the rules above and buttons.css would otherwise make them full buttons that overflow
   the 36px field) and draw them as plain chevrons. */
.mud-input-control.mud-input-number-control .mud-input-numeric-spin button.mud-button-root.mud-button {
    min-height: 0;
    min-width: 0;
    height: 50%;
    padding: 0 4px;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    box-shadow: none;
    color: var(--bo-text-muted, inherit) !important;
}

    .mud-input-control.mud-input-number-control .mud-input-numeric-spin button.mud-button-root.mud-button:hover {
        color: var(--bo-text, inherit) !important;
        background-color: var(--bo-surface-muted, transparent) !important;
    }

    .mud-input-control.mud-input-number-control .mud-input-numeric-spin .mud-button-root .mud-icon-root {
        font-size: 1.1rem;
    }

/* ---------------------------------------------------------------------
   Tables — any MudTable / MudDataGrid, grids included
   --------------------------------------------------------------------- */
.mud-table .mud-table-body .mud-table-cell,
.mud-table.mud-table-dense .mud-table-body .mud-table-cell,
.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: var(--bo-cell-pad-y, 7px) var(--bo-cell-pad-x, 10px);
}

.mud-table .mud-table-head .mud-table-cell {
    padding: 7px var(--bo-cell-pad-x, 10px);
}

/* Row content must not hold rows open: chips drop MudBlazor's 4px vertical
   margin, and the row menu (an inline-block in a wrapper) loses its
   baseline gap and gets a tighter icon button. */
.mud-table .mud-table-body .mud-chip {
    margin-top: 0;
    margin-bottom: 0;
}

.mud-table .mud-table-body .mud-table-cell > div:has(> .mud-menu) {
    display: flex;
    justify-content: flex-end;
}

.mud-table .mud-table-body .mud-icon-button.mud-icon-button-size-small {
    padding: 2px;
}

    .mud-table .mud-table-body .mud-icon-button.mud-icon-button-size-small .mud-icon-root {
        font-size: 1.125rem;
    }

.mud-simple-table table * tr > td,
.mud-simple-table table * tr > th {
    padding: var(--bo-cell-pad-y, 7px) var(--bo-cell-pad-x, 10px);
}

/* ---------------------------------------------------------------------
   Cards, expansion panels, chips
   --------------------------------------------------------------------- */
.mud-card .mud-card-header {
    padding: var(--bo-card-head-pad, 10px 12px);
}

.mud-card .mud-card-content {
    padding: var(--bo-card-pad, 12px);
}

.mud-card .mud-card-actions {
    padding: 8px var(--bo-card-pad, 12px);
}

.mud-expand-panel .mud-expand-panel-header {
    min-height: 40px;
    padding: 8px 14px;
}

.mud-expand-panel .mud-expand-panel-content {
    padding: 4px 14px 14px;
}

.mud-chip.mud-chip-size-small {
    height: var(--bo-chip-h-sm, 20px);
    font-size: 0.72rem;
    padding: 0 8px;
}

    .mud-chip.mud-chip-size-small .mud-icon-root {
        font-size: 0.95rem;
    }

/* ---------------------------------------------------------------------
   MudGrid gutters — one step tighter. Spacing 1–2 are already compact.
   --------------------------------------------------------------------- */
.mud-grid-spacing-xs-3 {
    width: calc(100% + var(--bo-gutter-3, 8px));
    margin-left: calc(-1 * var(--bo-gutter-3, 8px));
    margin-top: calc(-1 * var(--bo-gutter-3, 8px));
}

    .mud-grid-spacing-xs-3 > .mud-grid-item {
        padding-left: var(--bo-gutter-3, 8px);
        padding-top: var(--bo-gutter-3, 8px);
    }

.mud-grid-spacing-xs-4 {
    width: calc(100% + var(--bo-gutter-4, 10px));
    margin-left: calc(-1 * var(--bo-gutter-4, 10px));
    margin-top: calc(-1 * var(--bo-gutter-4, 10px));
}

    .mud-grid-spacing-xs-4 > .mud-grid-item {
        padding-left: var(--bo-gutter-4, 10px);
        padding-top: var(--bo-gutter-4, 10px);
    }

.mud-grid-spacing-xs-5,
.mud-grid-spacing-xs-6 {
    width: calc(100% + var(--bo-gutter-5, 12px));
    margin-left: calc(-1 * var(--bo-gutter-5, 12px));
    margin-top: calc(-1 * var(--bo-gutter-5, 12px));
}

    .mud-grid-spacing-xs-5 > .mud-grid-item,
    .mud-grid-spacing-xs-6 > .mud-grid-item {
        padding-left: var(--bo-gutter-5, 12px);
        padding-top: var(--bo-gutter-5, 12px);
    }