/* ============================================
   MUDBLAZOR OVERRIDES
   Scoped customizations for MudBlazor components
   ============================================ */

/* IMPORTANT: These overrides should be used sparingly.
   Most MudBlazor styling should be done through component parameters.
   Document any override with a comment explaining why it's needed. */

/* ==================== INPUT COMPONENTS ==================== */
/* 
 * REMOVED: Global .mud-input-outlined overrides were breaking MudBlazor's default styling.
 * MudBlazor handles input borders, labels, and focus states correctly out of the box.
 * Only use component parameters (like Variant, Color, etc.) to customize inputs.
 */

/* ==================== BUTTON COMPONENTS ==================== */

/* Override: Smooth button transitions */
.mud-button-root {
    transition: all var(--transition-base);
    text-transform: none; /* Remove uppercase transform */
}

.mud-button-filled:hover {
    transform: translateY(-1px);
}

/* Override: Button border radius */
.mud-button-root {
    border-radius: var(--border-radius-md);
}

/* ==================== DIALOG COMPONENTS ==================== */

/* Override: Dialog border radius */
.mud-dialog {
    border-radius: var(--border-radius-xl);
}

.mud-dialog-content {
    padding: var(--space-lg);
}

/* Override: Dialog backdrop */
.mud-overlay-dialog {
    background-color: rgba(0, 0, 0, 0.5);
}

/* ==================== SELECT COMPONENTS ==================== */

/* Override: Select dropdown border radius */
.mud-popover.mud-popover-open .mud-list {
    border-radius: var(--border-radius-md);
}

/* Override: Select item hover */
.mud-list-item:hover {
    background-color: var(--color-bg-hover);
}

/* ==================== CARD COMPONENTS ==================== */

/* Override: Card shadows and borders */
.mud-card {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

.mud-card:hover {
    box-shadow: var(--shadow-md);
}

/* ==================== TABLE COMPONENTS ==================== */

/* Override: Table header styling */
.mud-table-head {
    background-color: var(--color-bg-hover);
}

.mud-table-head .mud-table-cell {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Override: Table row hover */
.mud-table-row:hover {
    background-color: var(--color-bg-hover);
}

/* ==================== SNACKBAR COMPONENTS ==================== */

/* Override: Snackbar positioning and style */
.mud-snackbar {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ==================== PROGRESS COMPONENTS ==================== */

/* Override: Progress circular color */
.mud-progress-circular-circle {
    stroke: var(--color-primary);
}

/* ==================== TOOLTIP COMPONENTS ==================== */

/* Override: Tooltip styling */
.mud-tooltip {
    background-color: var(--color-text-main);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
}

/* ==================== DIVIDER COMPONENTS ==================== */

/* Override: Divider color */
.mud-divider {
    border-color: var(--color-border-subtle);
}

/* ==================== CHIP COMPONENTS ==================== */

/* Override: Chip styling */
.mud-chip {
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
}

/* ==================== PAGINATION COMPONENTS ==================== */

/* Override: Pagination button styling */
.mud-pagination .mud-button-root {
    border-radius: var(--border-radius-sm);
}

.mud-pagination .mud-button-filled-primary {
    background-color: var(--color-primary);
}

.mud-pagination .mud-button-filled-primary:hover {
    background-color: var(--color-primary-hover);
}

/* ==================== SWITCH COMPONENTS ==================== */

/* Override: Switch active color */
.mud-switch-checked .mud-switch-thumb {
    background-color: var(--color-success);
}

/* ==================== ICON COMPONENTS ==================== */

/* Override: Icon sizing */
.mud-icon-root {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==================== RESPONSIVE OVERRIDES ==================== */

@media (max-width: 768px) {
    /* Override: Dialog full width on mobile */
    .mud-dialog {
        max-width: 95vw !important;
        margin: var(--space-sm);
    }
    
    /* Override: Reduce card padding on mobile */
    .mud-card-content {
        padding: var(--space-md);
    }
}

/* ==================== CUSTOM UTILITY OVERRIDES ==================== */

/* Helper: Remove MudBlazor's default text transform on buttons */
.mud-button-text-transform-none {
    text-transform: none !important;
}

/* Helper: Custom primary button with shadow */
.mud-button-filled-primary-shadow {
    box-shadow: var(--shadow-button);
}

.mud-button-filled-primary-shadow:hover {
    box-shadow: var(--shadow-button-hover);
}

/* ==================== NOTES ==================== */

/* 
USAGE GUIDELINES:
1. Use component parameters first (Color, Variant, Size, etc.)
2. Use CSS variables from design-tokens.css
3. Only add overrides here when component parameters are insufficient
4. Document each override with a comment
5. Avoid using !important unless absolutely necessary
6. Test overrides don't break other pages/components

MAINTENANCE:
- Review this file quarterly
- Remove unused overrides
- Update with new MudBlazor versions
- Keep total !important usage under 5

LAST UPDATED: January 7, 2026
*/