/* ==========================================
   MODERN COMPONENT STYLES
   Cards, Buttons, Forms, Data Grids with minimal shadows
   ========================================== */

/* ========== GLOBAL ICON FIXES ========== */
/* Ensure all icons are properly displayed and aligned */
.mud-icon-root {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

.mud-icon-button .mud-icon-root {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========== CARDS & SURFACES ========== */
.mud-card {
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: all var(--transition-base) !important;
    background-color: var(--mud-palette-surface) !important;
}

.mud-card:hover {
    /* Removed hover effects on cards - too much */
}

.mud-paper {
    border-radius: 12px !important;
}

/* Removed card-content padding override - using MudBlazor defaults */

/* Card Headers - minimal changes */
.mud-card-header {
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

.mud-card-header .mud-typography-h5,
.mud-card-header .mud-typography-h6 {
    font-weight: 600 !important;
}

/* ========== BUTTONS ========== */
.mud-button-root {
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    transition: background-color var(--transition-base), box-shadow var(--transition-base) !important;
    /* Removed min-height and padding overrides - using MudBlazor defaults */
}

.mud-button-filled {
    box-shadow: none !important;
}

.mud-button-filled:hover {
    box-shadow: 0 2px 4px rgba(26, 144, 176, 0.15) !important;
    /* Removed transform */
}

.mud-button-filled:active {
    /* Removed transform */
}

.mud-button-outlined {
    border-width: 1.5px !important;
}

.mud-button-outlined:hover {
    border-width: 1.5px !important;
    background-color: rgba(26, 144, 176, 0.05) !important;
}

/* Icon Buttons */
.mud-icon-button {
    border-radius: 10px !important;
    transition: background-color var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mud-icon-button:hover {
    /* Removed transform - keeping it simple */
}

.mud-icon-button:active {
    /* Removed transform */
}

/* Loading Buttons */
.mud-button-root.mud-button-loading {
    opacity: 0.7;
}

.mud-button-root.mud-button-loading .mud-button-label {
    opacity: 0.5;
}

/* Button Groups */
.mud-button-group .mud-button-root {
    border-radius: 0 !important;
}

.mud-button-group .mud-button-root:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.mud-button-group .mud-button-root:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* ========== FORMS & INPUTS ========== */
.mud-input {
    border-radius: 8px !important;
}

/* Removed input-root min-height override */

.mud-input-outlined {
    border-radius: 8px !important;
}

.mud-input-outlined-border {
    border-width: 1.5px !important;
    border-color: var(--mud-palette-lines-inputs) !important;
    transition: all var(--transition-base) !important;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-width: 2px !important;
    border-color: var(--mud-palette-primary) !important;
    box-shadow: none !important;
}

.mud-input-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--mud-palette-text-secondary) !important;
    margin-bottom: 8px !important;
}

.mud-input-helper-text {
    font-size: 13px !important;
    margin-top: 4px !important;
}

.mud-input-error .mud-input-outlined-border {
    border-color: var(--mud-palette-error) !important;
}

.mud-input-error-text {
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 4px !important;
}

/* Select Fields - using defaults */

/* Checkboxes */
.mud-checkbox {
    border-radius: 6px !important;
}

/* Removed checkbox icon size override - using default */

/* Removed checkbox animation */

/* ========== DATA GRID & TABLES ========== */
.mud-table {
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-divider) !important;
    overflow: hidden;
}

.mud-table-head {
    /* Lighter, modern header tint based on primary color */
    background-color: rgba(26, 144, 176, 0.06) !important;
}

.mud-table-head .mud-table-cell {
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    border-bottom: 1px solid rgba(26, 144, 176, 0.25) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* Ensure table icons are visible and aligned */
.mud-table-head .mud-table-cell .mud-icon-root,
.mud-table-cell .mud-icon-root {
    display: inline-flex !important;
    vertical-align: middle !important;
}

.mud-table-head .mud-icon-button,
.mud-table-cell .mud-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mud-table-row {
    transition: background-color var(--transition-fast) !important;
}

.mud-table-row:hover {
    background-color: rgba(26, 144, 176, 0.03) !important;
    /* Removed transform */
}

.mud-table-cell {
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

/* Remove border from last row */
.mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}

/* Data Grid Specific */
.mud-data-grid {
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-divider) !important;
    overflow: hidden;
}

.mud-data-grid-header {
    /* Lighter, modern header tint based on primary color */
    background-color: rgba(26, 144, 176, 0.06) !important;
}

.mud-data-grid-header-cell {
    font-weight: 600 !important;
    font-size: 14px !important;
    border-bottom: 1px solid rgba(26, 144, 176, 0.25) !important;
}

/* Ensure data grid icons are visible */
.mud-data-grid .mud-icon-root {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mud-data-grid .mud-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Pagination */
.mud-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.mud-pagination-item {
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: background-color var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mud-pagination-item:hover {
    background-color: rgba(26, 144, 176, 0.08) !important;
}

.mud-pagination-item.mud-pagination-item-selected {
    background-color: var(--mud-palette-primary) !important;
    color: white !important;
    font-weight: 600 !important;
}

/* ========== DIALOGS ========== */
.mud-dialog {
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.mud-dialog-title {
    font-size: 20px !important;
    font-weight: 600 !important;
}

/* Using MudBlazor default padding for dialog content and actions */

/* ========== CHIPS ========== */
.mud-chip {
    border-radius: 8px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

.mud-chip-filled {
    box-shadow: none !important;
}

.mud-chip .mud-icon-root {
    display: inline-flex !important;
    align-items: center !important;
}

/* ========== ALERTS ========== */
.mud-alert {
    border-radius: 12px !important;
    border: 1px solid !important;
    box-shadow: none !important;
}

/* ========== TABS ========== */
.mud-tabs {
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

.mud-tab {
    font-weight: 500 !important;
    text-transform: none !important;
    transition: background-color var(--transition-base) !important;
}

.mud-tab:hover {
    background-color: rgba(26, 144, 176, 0.05) !important;
}

.mud-tab-active {
    font-weight: 600 !important;
}

.mud-tab-slider {
    height: 3px !important;
    border-radius: 3px 3px 0 0 !important;
}

/* ========== DIVIDERS ========== */
.mud-divider {
    border-color: var(--mud-palette-divider) !important;
    opacity: 1 !important;
}

/* ========== TOOLTIPS ========== */
.mud-tooltip {
    border-radius: 6px !important;
    font-weight: 500 !important;
}

/* ========== BADGES ========== */
.mud-badge {
    font-weight: 600 !important;
    font-size: 11px !important;
}

.mud-badge-dot {
    min-width: 8px !important;
    height: 8px !important;
    border-radius: 4px !important;
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========== MENUS ========== */
.mud-menu {
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-divider) !important;
}

.mud-menu-item {
    border-radius: 8px !important;
    transition: background-color var(--transition-fast) !important;
}

.mud-menu-item:hover {
    background-color: rgba(26, 144, 176, 0.08) !important;
}

/* ========== PROGRESS ========== */
.mud-progress-linear {
    border-radius: 4px !important;
    overflow: hidden;
}

.mud-progress-linear-bar {
    transition: all var(--transition-base) !important;
}

.mud-progress-circular {
    animation: spin 1.4s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========== AVATARS ========== */
.mud-avatar {
    font-weight: 600 !important;
    border: 2px solid rgba(26, 144, 176, 0.2) !important;
}

/* ========== SNACKBAR ========== */
.mud-snackbar {
    border-radius: 12px !important;
}

/* ========== EXPANSION PANELS ========== */
.mud-expand-panel {
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
}

.mud-expand-panel-header {
    font-weight: 600 !important;
}

/* Using MudBlazor default padding for expand panel content */

/* ========== AUTOCOMPLETE ========== */
/* Using MudBlazor defaults */

/* ========== SWITCHES ========== */
.mud-switch {
    transition: all var(--transition-base) !important;
}

.mud-switch-track {
    border-radius: 12px !important;
}

.mud-switch-thumb {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* ========== SLIDERS ========== */
.mud-slider {
    height: 6px !important;
    border-radius: 3px !important;
}

.mud-slider-thumb {
    width: 18px !important;
    height: 18px !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* ========== SKELETON ========== */
.mud-skeleton {
    border-radius: 8px !important;
    background: linear-gradient(
        90deg,
        var(--mud-palette-background-gray) 0%,
        rgba(26, 144, 176, 0.05) 50%,
        var(--mud-palette-background-gray) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}