/* Dashboard buttons have exactly two visual weights:
 * - Variant.Filled: primary, solid background.
 * - Variant.Text: secondary, transparent by default — no automatic fill.
 *
 * Only specific opt-in surfaces (dialog Cancel, gv-refresh-action, ...) get
 * a background. Plain Text/Icon buttons (table rows, kebabs, header actions)
 * stay transparent so they don't paint a colored pill everywhere.
 */
.mud-button-root.mud-button-text {
    background-color: transparent;
    box-shadow: none;
}

.mud-button-root.mud-button-text:hover,
.mud-button-root.mud-button-text:focus-visible,
.mud-button-root.mud-button-text:active {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
}

.mud-button-root.mud-button-text.mud-disabled,
.mud-button-root.mud-button-text:disabled {
    background-color: transparent;
}

/* MudIconButton does not consistently expose mud-button-text across versions.
 * MudSwitch uses the same base class internally and is not an action button. */
.mud-icon-button:not(.mud-switch-base) {
    background-color: transparent;
}

.mud-icon-button:not(.mud-switch-base):hover,
.mud-icon-button:not(.mud-switch-base):focus-visible,
.mud-icon-button:not(.mud-switch-base):active {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
}

/* Opt-in secondary fill: dialog Cancel and other explicit secondary actions. */
.mud-dialog-actions .mud-button-root.mud-button-text,
.mud-dialog-actions .mud-button-root.mud-button-text:hover,
.mud-dialog-actions .mud-button-root.mud-button-text:focus-visible,
.mud-dialog-actions .mud-button-root.mud-button-text:active {
    background-color: rgba(40, 40, 55, 0.5);
}

.mud-dialog-actions .mud-button-root.mud-button-text.mud-disabled,
.mud-dialog-actions .mud-button-root.mud-button-text:disabled {
    background-color: rgba(40, 40, 55, 0.25);
}

/* MudCheckBox also uses MudIconButton internally; the checkbox is its own affordance. */
.mud-checkbox .mud-icon-button,
.mud-checkbox .mud-icon-button:hover,
.mud-checkbox .mud-icon-button:focus-visible,
.mud-checkbox .mud-icon-button:active {
    background-color: transparent;
}

/* Repeated row actions stay visually quiet; the table already provides their surface. */
.mud-table-cell .mud-icon-button:not(.mud-switch-base),
.mud-table-cell .mud-icon-button:not(.mud-switch-base):hover,
.mud-table-cell .mud-icon-button:not(.mud-switch-base):focus-visible,
.mud-table-cell .mud-icon-button:not(.mud-switch-base):active {
    background-color: transparent;
}

/* Row kebab triggers are part of the table surface. Keep their normal medium
 * corner radius for hover/focus geometry without drawing a filled circle. */
.mud-table-cell .mud-button-root[aria-label="More actions"],
.mud-table-cell .mud-button-root[aria-label="More actions"]:hover,
.mud-table-cell .mud-button-root[aria-label="More actions"]:focus-visible,
.mud-table-cell .mud-button-root[aria-label="More actions"]:active {
    background-color: transparent !important;
    border-radius: 8px !important;
}

/* Scroll affordances appear only when tabs overflow; the tab bar itself is
 * already their surface, so circular fills create an unrelated visual layer. */
.mud-tabs-scroll-button,
.mud-tabs-scroll-button:hover,
.mud-tabs-scroll-button:focus-visible,
.mud-tabs-scroll-button:active {
    background-color: transparent !important;
    border-radius: 8px !important;
}

/* Dialog titles already provide a colored header surface. The close affordance
 * stays transparent while preserving its full icon-button hit target. */
.mud-dialog-title .mud-icon-button,
.mud-dialog-title .mud-icon-button:hover,
.mud-dialog-title .mud-icon-button:focus-visible,
.mud-dialog-title .mud-icon-button:active {
    background-color: transparent !important;
    border-radius: 8px !important;
}

/* Refresh is the one blue utility action. Its label and icon remain fully white. */
.mud-button-root.gv-refresh-action,
.mud-button-root.gv-refresh-action:hover,
.mud-button-root.gv-refresh-action:focus-visible,
.mud-button-root.gv-refresh-action:active {
    color: #fff !important;
    background-color: color-mix(in srgb, var(--mud-palette-info) 50%, var(--mud-palette-surface));
}

.mud-button-root.gv-refresh-action .mud-icon-root {
    color: #fff !important;
}

.mud-button-root.gv-refresh-action {
    padding-block: 10px;
    padding-inline: 16px;
}

/* Back is navigation, not a call to action. It stays surface-free. */
.mud-button-root.gv-detail-back,
.mud-button-root.gv-detail-back:hover,
.mud-button-root.gv-detail-back:focus-visible,
.mud-button-root.gv-detail-back:active {
    background-color: transparent !important;
}

/* The detail header already provides a colored surface. Nested actions must
 * not add another block of color, but labelled controls still need room. */
.gv-detail-actions .mud-button-root,
.gv-detail-actions .mud-button-root:hover,
.gv-detail-actions .mud-button-root:focus-visible,
.gv-detail-actions .mud-button-root:active,
.gv-detail-actions .mud-icon-button,
.gv-detail-actions .mud-icon-button:hover,
.gv-detail-actions .mud-icon-button:focus-visible,
.gv-detail-actions .mud-icon-button:active {
    background-color: transparent !important;
}

.gv-detail-actions .mud-button-root:not(.mud-icon-button) {
    min-height: 40px;
    padding-inline: 16px;
}

.gv-detail-actions .mud-icon-button {
    width: 40px;
    height: 40px;
}

/* Every labelled action button is at least 40px tall, wherever it lives (page toolbars, dialog footers, cards, detail headers).
 * Before this, only buttons inside .gv-toolbar / .gv-detail-actions were forced to 40px, so a Text button such as Clear in a
 * dialog or card measured ~36px next to a Filled one. Icon-only buttons and Size.Small controls (dense rows and grid actions) keep
 * their own size, and the application header stays outside the button system (see the .mud-appbar reset below). */
.mud-button-root:not(.mud-icon-button):not([class*="size-small"]) {
    min-height: 40px;
    box-sizing: border-box;
}

.mud-appbar .mud-button-root,
.gv-auth-header-actions .mud-button-root {
    min-height: 0;
}

/* Inline copy affordances sit inside content cards and stay visually quiet. */
.gv-inline-copy-action,
.gv-inline-copy-action:hover,
.gv-inline-copy-action:focus-visible,
.gv-inline-copy-action:active {
    background-color: transparent !important;
}

/* Pagination controls belong to the table footer surface. */
.mud-table-pagination-actions .mud-icon-button,
.mud-table-pagination-actions .mud-icon-button:hover,
.mud-table-pagination-actions .mud-icon-button:focus-visible,
.mud-table-pagination-actions .mud-icon-button:active {
    background-color: transparent !important;
}

/* Role selection is a selected-state control: only the active role gets a fill. */
.gv-auth-role-selector .mud-button-root.mud-button-text,
.gv-auth-role-selector .mud-button-root.mud-button-text:hover,
.gv-auth-role-selector .mud-button-root.mud-button-text:focus-visible,
.gv-auth-role-selector .mud-button-root.mud-button-text:active {
    background-color: transparent;
}

/* Clearable input affordances are compact squares, not circular icon buttons. */
.mud-input-control .mud-icon-button:not(.mud-switch-base) {
    border-radius: 8px !important;
}

/* Screenshot cards use one shared action geometry. The review icon keeps its
 * secondary fill, but is a rounded square instead of an unrelated circle. */
.gv-screenshot-card-actions {
    align-items: center;
    gap: 8px;
    padding: 8px 16px 16px;
}

.gv-screenshot-card-actions .gv-screenshot-review-action,
.gv-screenshot-card-actions .gv-screenshot-sanction-action,
.gv-screenshot-card-actions .gv-screenshot-review-action:hover,
.gv-screenshot-card-actions .gv-screenshot-sanction-action:hover,
.gv-screenshot-card-actions .gv-screenshot-review-action:focus-visible,
.gv-screenshot-card-actions .gv-screenshot-sanction-action:focus-visible {
    min-height: 40px;
    border-radius: 8px !important;
    background-color: rgba(40, 40, 55, 0.5);
}

.gv-screenshot-card-actions .gv-screenshot-review-action {
    width: 40px;
    height: 40px;
    padding: 8px;
}

.gv-screenshot-card-actions .gv-screenshot-sanction-action {
    padding-inline: 16px;
}

/* The application header is deliberately outside the dashboard button system. */
.mud-appbar .mud-button-root.mud-button-text,
.mud-appbar .mud-icon-button,
.gv-auth-header-actions .mud-button-root.mud-button-text,
.gv-auth-header-actions .mud-icon-button,
.mud-appbar .mud-button-root.mud-button-text:hover,
.mud-appbar .mud-button-root.mud-button-text:focus-visible,
.mud-appbar .mud-button-root.mud-button-text:active,
.mud-appbar .mud-icon-button:hover,
.mud-appbar .mud-icon-button:focus-visible,
.mud-appbar .mud-icon-button:active,
.gv-auth-header-actions .mud-button-root.mud-button-text:hover,
.gv-auth-header-actions .mud-button-root.mud-button-text:focus-visible,
.gv-auth-header-actions .mud-button-root.mud-button-text:active,
.gv-auth-header-actions .mud-icon-button:hover,
.gv-auth-header-actions .mud-icon-button:focus-visible,
.gv-auth-header-actions .mud-icon-button:active {
    background-color: transparent;
}

@media (forced-colors: active) {
    .mud-button-root.mud-button-text,
    .mud-icon-button:not(.mud-appbar .mud-icon-button) {
        outline: 1px solid ButtonText;
    }
}