/* Monitoreo Shared UI Theme */

/* Many styles have been removed because we are now using Start Bootstrap SB Admin 2
   and its default classes (.card, .btn-primary, etc.)
*/

.page-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
}

.page-header {
    margin-bottom: 1.5rem;
}

.page-header-compact {
    margin-bottom: 0.75rem;
}

/* ============================================================
   ROW ACTIONS  (GridRowActions / GridRowAction)

   Every selector here is deliberately over-qualified. App.razor links this
   file BEFORE MudBlazor.min.css, so on a tie MudBlazor wins by order and the
   rules below would silently do nothing. MudBlazor's own icon-button rules
   reach three classes (.mud-icon-button-size-small.mud-button-root
   .mud-icon-button); ours reach four, five with the pseudo-class.
   ============================================================ */

.grid-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border-radius: 8px;
    color: var(--mud-palette-text-secondary);
    background-color: transparent;
    transition: color 120ms ease, background-color 120ms ease;
}

.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action .mud-icon-root {
    font-size: 1.125rem;
}

/* At rest every action in the cluster is the same grey. The tone shows up
   under the pointer or the focus ring -- see GridActionTone for the why. */
.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action:hover,
.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action:focus-visible {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action.grid-row-action--primary:hover,
.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action.grid-row-action--primary:focus-visible {
    color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action.grid-row-action--success:hover,
.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action.grid-row-action--success:focus-visible {
    color: var(--mud-palette-success);
    background-color: var(--mud-palette-success-hover);
}

.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action.grid-row-action--warning:hover,
.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action.grid-row-action--warning:focus-visible {
    color: var(--mud-palette-warning);
    background-color: var(--mud-palette-warning-hover);
}

.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action.grid-row-action--danger:hover,
.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action.grid-row-action--danger:focus-visible {
    color: var(--mud-palette-error);
    background-color: var(--mud-palette-error-hover);
}

/* Keyboard users get the same ring on every tone; only the fill changes. */
.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -1px;
}

.grid-row-actions .mud-button-root.mud-icon-button.grid-row-action:disabled {
    color: var(--mud-palette-action-disabled);
    background-color: transparent;
}