/* ========================================
   BUTTON STYLES
   Custom button classes for Material Design 3
   ======================================== */

/* ========== CUSTOM BUTTON CLASSES ========== */

/* Primary filled button */
.primary-button {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    border: none;
    position: relative;
    transition: box-shadow .18s ease, transform .08s ease;
    will-change: box-shadow, transform;
}

.primary-button:hover,
.primary-button:focus-visible {
    box-shadow: inset 0 0 0 100vmax rgba(0,0,0,0.10);
}

.primary-button:active {
    box-shadow: inset 0 0 0 100vmax rgba(0,0,0,0.18);
    transform: translateY(1px);
}

.primary-button:focus-visible {
    outline: 2px solid var(--md-sys-color-primary-container);
    outline-offset: 2px;
}

/* Secondary filled button */
.secondary-button {
    background-color: var(--md-sys-color-secondary) !important;
    color: var(--md-sys-color-on-secondary) !important;
    border: none;
    position: relative;
    transition: box-shadow .18s ease, transform .08s ease;
    will-change: box-shadow, transform;
}

.secondary-button:hover,
.secondary-button:focus-visible {
    box-shadow: inset 0 0 0 100vmax rgba(0,0,0,0.10);
}

.secondary-button:active {
    box-shadow: inset 0 0 0 100vmax rgba(0,0,0,0.18);
    transform: translateY(1px);
}

.secondary-button:focus-visible {
    outline: 2px solid var(--md-sys-color-secondary-container);
    outline-offset: 2px;
}

/* Outlined button variants */
.primary-button.outlined {
    background: transparent !important;
    color: var(--md-sys-color-primary) !important;
    border: 1px solid var(--md-sys-color-primary);
}

.primary-button.outlined:hover,
.primary-button.outlined:focus-visible {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
    box-shadow: none;
}

.secondary-button.outlined {
    background: transparent !important;
    color: var(--md-sys-color-secondary) !important;
    border: 1px solid var(--md-sys-color-secondary);
}

.secondary-button.outlined:hover,
.secondary-button.outlined:focus-visible {
    background: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
    box-shadow: none;
}

/* ========== MUDBLAZOR BUTTON OVERRIDES ========== */

.mud-button-filled-primary:hover {
    background-color: var(--mud-palette-primary) !important;
    box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.08) !important;
}

.mud-button-filled-secondary:hover {
    background-color: var(--mud-palette-secondary) !important;
    box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.08) !important;
}

/* Icon buttons */
.mud-icon-button:hover {
    background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04)) !important;
}

.mud-icon-button.mud-primary:hover {
    background-color: var(--md-sys-color-primary-container) !important;
    opacity: 0.9;
}

/* ========== FAB (Floating Action Button) ========== */

.mud-fab.mud-fab-primary {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.mud-fab.mud-fab-primary:hover {
    background-color: var(--md-sys-color-primary) !important;
    box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.1), 0 4px 8px 2px rgba(0, 0, 0, 0.2) !important;
}

.mud-fab.mud-fab-primary:active {
    background-color: var(--md-sys-color-primary) !important;
    box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.1), 0 2px 4px 1px rgba(0, 0, 0, 0.2) !important;
}

.drawer-fab-container .mud-fab {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) !important;
}

/* ========== TONAL BUTTONS ========== */

.btn--tonal {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: 10px;
    padding: 0 10px;
    height: 28px;
}