/* =====================================================
   MudBlazor Glassmorphic Ice Fortress Theme
   For Whiteout Survival Battle Simulator
   ===================================================== */

/* ========================================
   ROOT VARIABLES & THEME CONFIGURATION
   ======================================== */
:root {
    /* Ice Fortress Color Palette */
    --ice-primary: #0891b2;
    --ice-primary-dark: #0e7490;
    --ice-primary-light: #22d3ee;
    --ice-secondary: #475569;
    --ice-accent: #67e8f9;
    --frost-white: rgba(255, 255, 255, 0.1);
    --frost-border: rgba(255, 255, 255, 0.18);

    /* Glassmorphic Properties */
    --glass-blur: 20px;
    --glass-saturation: 180%;
    --glass-opacity: 0.1;

    /* Animation Timings */
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Dark theme overrides */
.theme-dark {
    --ice-primary: #22d3ee;
    --ice-primary-dark: #0891b2;
    --ice-primary-light: #67e8f9;
    --frost-white: rgba(255, 255, 255, 0.05);
    --frost-border: rgba(255, 255, 255, 0.12);
}

/* ========================================
   GLASSMORPHIC CONTAINERS
   ======================================== */
.glass-card {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    border: 1px solid var(--frost-border);
    border-radius: 16px;
    box-shadow:
        0 8px 32px 0 rgba(31, 193, 224, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.95);
}

.glass-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px 0 rgba(31, 193, 224, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Nested glass effect for depth */
.glass-inner {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem;
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.95);
}

/* ========================================
   ICE PARTICLE BACKGROUND
   ======================================== */
.ice-particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.ice-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(34, 211, 238, 0.4) 50%,
        transparent 70%);
    border-radius: 50%;
    filter: blur(0.5px);
    animation: snowfall linear infinite;
}

@keyframes snowfall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Generate multiple particles with different speeds */
.ice-particle:nth-child(odd) {
    animation-duration: 15s;
    width: 3px;
    height: 3px;
}

.ice-particle:nth-child(even) {
    animation-duration: 20s;
}

.ice-particle:nth-child(3n) {
    animation-duration: 25s;
    width: 5px;
    height: 5px;
}

/* ========================================
   FROST BUTTONS
   ======================================== */
.frost-button {
    background: linear-gradient(135deg, var(--ice-primary) 0%, var(--ice-primary-light) 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 32px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.25);
}

.frost-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent);
    transition: left 0.5s;
}

.frost-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.35);
}

.frost-button:hover::before {
    left: 100%;
}

.frost-button:active {
    transform: translateY(0);
}

/* Secondary frost button */
.frost-button-secondary {
    background: transparent;
    border: 1px solid var(--frost-border);
    backdrop-filter: blur(10px);
    color: var(--ice-primary-light);
}

.frost-button-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--ice-primary-light);
}

/* ========================================
   MUD BLAZOR COMPONENT OVERRIDES
   ======================================== */

/* MudPaper glassmorphic style */
.mud-paper.glass {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 100%) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    border: 1px solid var(--frost-border);
    box-shadow:
        0 8px 32px 0 rgba(31, 193, 224, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.95) !important;
}

/* MudCard glassmorphic style */
.mud-card.glass {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.08) 100%) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    border: 1px solid var(--frost-border);
    color: rgba(255, 255, 255, 0.95) !important;
}

/* MudSelect glassmorphic style */
.mud-select.glass > .mud-input-control > .mud-input-control-input-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid var(--frost-border);
    border-radius: 8px;
}

/* MudTextField glassmorphic style */
.mud-input.glass > .mud-input-control > .mud-input-control-input-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid var(--frost-border);
    border-radius: 8px;
}

/* MudButton overrides */
.mud-button-root.frost {
    background: linear-gradient(135deg, var(--ice-primary) 0%, var(--ice-primary-light) 100%);
    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.25);
    position: relative;
    overflow: hidden;
}

.mud-button-root.frost::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent);
    transition: left 0.5s;
}

.mud-button-root.frost:hover::before {
    left: 100%;
}

/* ========================================
   BATTLE SIMULATOR SPECIFIC STYLES
   ======================================== */

/* Player selection cards */
.player-select-card {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.06) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid var(--frost-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all var(--transition-smooth);
    position: relative;
    color: rgba(255, 255, 255, 0.95);
}

/* Attacker card glow */
.attacker-card {
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.12) 0%,
        rgba(255, 255, 255, 0.06) 100%);
    border-color: rgba(239, 68, 68, 0.3);
}

.attacker-card:hover {
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.2);
}

/* Defender card glow */
.defender-card {
    background: linear-gradient(135deg,
        rgba(34, 211, 238, 0.12) 0%,
        rgba(255, 255, 255, 0.06) 100%);
    border-color: rgba(34, 211, 238, 0.3);
}

.defender-card:hover {
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.2);
}

/* Battle stats display */
.battle-stat {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    backdrop-filter: blur(5px);
}

.battle-stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.25rem;
}

.battle-stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--ice-primary-light);
}

/* ========================================
   LOADING STATES
   ======================================== */
.glass-skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
    .glass-card {
        border-radius: 12px;
        backdrop-filter: blur(15px);
    }

    .frost-button {
        padding: 10px 24px;
        font-size: 0.9rem;
    }

    .player-select-card {
        padding: 1rem;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.glow-text {
    text-shadow: 0 0 20px rgba(34, 211, 238, 0.5);
}

.ice-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--ice-primary-light),
        transparent);
    margin: 1.5rem 0;
}

.frost-badge {
    background: rgba(34, 211, 238, 0.25);
    color: #f0f9ff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(34, 211, 238, 0.4);
}

/* Ensure all text in glass components is readable */
.glass-card .mud-text,
.glass .mud-text,
.mud-paper.glass .mud-text,
.mud-card.glass .mud-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Fix label colors */
.glass-card .mud-input-label,
.glass .mud-input-label,
.mud-input-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Fix helper text colors */
.glass-card .mud-input-helper-text,
.glass .mud-input-helper-text,
.mud-input-helper-text {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Fix select text */
.glass .mud-select-input,
.mud-select-input {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Fix placeholder text in inputs and selects */
.mud-input-slot::placeholder,
.mud-select-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1;
}

/* Fix radio button and checkbox labels */
.mud-radio .mud-typography,
.mud-checkbox .mud-typography {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Fix caption text (small text) */
.mud-typography-caption {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Fix body text */
.mud-typography-body1,
.mud-typography-body2 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Fix input field text */
.mud-input-slot,
.mud-input-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Improve text shadow for better readability on glass backgrounds */
.glass-card .mud-text,
.glass .mud-text {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ========================================
   GLASS INPUT FIELDS
   ======================================== */

/* ========================================
   CSS VARIABLE THEMING - PRIMARY FIX FOR MUDBLAZOR 8.14.0
   Apply at highest level to intercept MudBlazor theme system
   ======================================== */

.glass-input {
    /* Primary border color variables */
    --mud-palette-lines-inputs: rgba(34, 211, 238, 0.3) !important;
    --mud-palette-lines-default: rgba(34, 211, 238, 0.3) !important;

    /* Fallback grey colors used by MudBlazor for borders */
    --mud-palette-grey-300: rgba(34, 211, 238, 0.3) !important;
    --mud-palette-grey-500: rgba(34, 211, 238, 0.6) !important;
    --mud-palette-grey-700: rgba(34, 211, 238, 0.3) !important;

    /* Icon and action colors */
    --mud-palette-action-default: rgba(34, 211, 238, 0.8) !important;
    --mud-palette-action-disabled: rgba(34, 211, 238, 0.4) !important;

    /* Border colors */
    --mud-palette-border: rgba(34, 211, 238, 0.3) !important;

    /* Text colors for inputs */
    --mud-palette-text-primary: rgba(255, 255, 255, 0.95) !important;

    /* Ensure info color (used for select/input focus) is cyan */
    --mud-palette-info: #22d3ee !important;
}

.glass-input:hover {
    --mud-palette-lines-inputs: rgba(34, 211, 238, 0.6) !important;
    --mud-palette-lines-default: rgba(34, 211, 238, 0.6) !important;
    --mud-palette-grey-300: rgba(34, 211, 238, 0.6) !important;
    --mud-palette-action-default: rgba(34, 211, 238, 0.9) !important;
}

.glass-input.mud-focused,
.glass-input.mud-input-focused {
    --mud-palette-lines-inputs: rgba(34, 211, 238, 0.8) !important;
    --mud-palette-primary: rgba(34, 211, 238, 0.8) !important;
    --mud-palette-action-default: rgba(34, 211, 238, 1) !important;
}

/* Override MudBlazor's Default Outlined Borders (FALLBACK for browsers without CSS variables) */
.glass-input.mud-input-outlined,
.glass-input.mud-input-outlined-dense {
    border-color: rgba(34, 211, 238, 0.3) !important;
}

/* Override MudBlazor's Default Hover - Outlined Standard */
.glass-input.mud-input-outlined:hover {
    border-color: rgba(34, 211, 238, 0.6) !important;
}

/* Override MudBlazor's Default Hover - Outlined Dense */
.glass-input.mud-input-outlined-dense:hover {
    border-color: rgba(34, 211, 238, 0.6) !important;
}

/* Override MudBlazor's Default Focus - Outlined Standard */
.glass-input.mud-input-outlined.mud-focused {
    border-color: rgba(34, 211, 238, 0.8) !important;
}

/* Override MudBlazor's Default Focus - Outlined Dense */
.glass-input.mud-input-outlined-dense.mud-focused {
    border-color: rgba(34, 211, 238, 0.8) !important;
}

/* Glass input styling for form controls - Target internal MudBlazor structure */
.glass-input > .mud-input-control > .mud-input-control-input-container {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(34, 211, 238, 0.3) !important;
    border-radius: 8px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Hover state for glass inputs - Enhanced glow effect */
.glass-input:hover > .mud-input-control > .mud-input-control-input-container,
.glass-input.mud-input-outlined:hover > .mud-input-control > .mud-input-control-input-container,
.glass-input.mud-input-outlined-dense:hover > .mud-input-control > .mud-input-control-input-container {
    border-color: rgba(34, 211, 238, 0.6) !important;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.15) !important;
}

/* Focus state for glass inputs - Brighter cyan with stronger glow */
.glass-input.mud-input-focused > .mud-input-control > .mud-input-control-input-container,
.glass-input > .mud-input-control.mud-input-control-focused > .mud-input-control-input-container,
.glass-input.mud-input-outlined.mud-focused > .mud-input-control > .mud-input-control-input-container,
.glass-input.mud-input-outlined-dense.mud-focused > .mud-input-control > .mud-input-control-input-container {
    border-color: rgba(34, 211, 238, 0.8) !important;
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.25) !important;
}

/* Text color overrides */
.glass-input .mud-input-slot,
.glass-input .mud-input-text,
.glass-input .mud-select-input {
    color: rgba(255, 255, 255, 0.95) !important;
}

.glass-input .mud-input-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Placeholder text */
.glass-input .mud-input-slot::placeholder,
.glass-input .mud-select-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1;
}

/* Also handle cases where MudSelect applies inline styles */
.glass-input .mud-input-outlined {
    border-color: rgba(34, 211, 238, 0.3) !important;
}

.glass-input .mud-input-outlined:hover {
    border-color: rgba(34, 211, 238, 0.6) !important;
}

.glass-input .mud-input-outlined.mud-focused {
    border-color: rgba(34, 211, 238, 0.8) !important;
}

/* Adornment styling (if used in inputs) */
.glass-input .mud-input-adornment {
    color: rgba(34, 211, 238, 0.8) !important;
}

/* Start adornment spacing - add padding between icon and text */
.glass-input .mud-input-adornment-start {
    margin-right: 8px !important;
}

.glass-input .mud-input-slot {
    padding-left: 4px !important;
}

/* End adornment only (no start adornment) - add left padding to align with fields that have start icons */
.glass-input .mud-input-adornment-end ~ .mud-input-slot,
.glass-input:not(:has(.mud-input-adornment-start)) .mud-input-slot {
    padding-left: 12px !important;
}

/* Error state override */
.glass-input.mud-input-error.mud-input-outlined,
.glass-input.mud-input-error.mud-input-outlined-dense {
    border-color: rgba(239, 68, 68, 0.6) !important;
}

.glass-input.mud-input-error.mud-input-outlined:hover,
.glass-input.mud-input-error.mud-input-outlined-dense:hover {
    border-color: rgba(239, 68, 68, 0.8) !important;
}

/* ========================================
   BROWSER AUTOFILL OVERRIDE
   Fixes autofill background color on Login/Auth pages
   Uses same background as glass-input: rgba(255, 255, 255, 0.05)
   ======================================== */

/* WebKit browsers (Chrome, Safari, Edge) autofill override */
/* Force transparent background to match glassmorphic style */
.glass-input input:-webkit-autofill,
.glass-input input:-webkit-autofill:hover,
.glass-input input:-webkit-autofill:focus,
.glass-input input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset !important;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
    caret-color: rgba(255, 255, 255, 0.95) !important;
    background-color: transparent !important;
    background: transparent !important;
    transition: background-color 9999s ease-out 0s !important;
}

/* Firefox autofill override */
.glass-input input:autofill,
.glass-input input:autofill:hover,
.glass-input input:autofill:focus {
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
    caret-color: rgba(255, 255, 255, 0.95) !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* ========================================
   ENHANCED SPECIFICITY FOR MUDBLAZOR 8.14.0
   Targeting internal fieldset and icon elements
   ======================================== */

/* Target the actual fieldset element used by MudBlazor outlined variant */
.glass-input .mud-input-outlined fieldset {
    border-color: rgba(34, 211, 238, 0.3) !important;
    transition: border-color 0.3s ease !important;
}

.glass-input:hover .mud-input-outlined fieldset {
    border-color: rgba(34, 211, 238, 0.6) !important;
}

.glass-input.mud-input-focused .mud-input-outlined fieldset,
.glass-input .mud-input-control-focused .mud-input-outlined fieldset,
.glass-input .mud-input-outlined.mud-focused fieldset {
    border-color: rgba(34, 211, 238, 0.8) !important;
}

/* MudSelect dropdown arrow icon - CRITICAL FIX */
.glass-input .mud-select .mud-input-adornment .mud-icon-button {
    color: rgba(34, 211, 238, 0.8) !important;
}

.glass-input .mud-select .mud-input-adornment .mud-icon-root {
    color: rgba(34, 211, 238, 0.8) !important;
}

/* Dropdown arrow SVG icon specifically */
.glass-input .mud-select .mud-input-adornment svg {
    stroke: rgba(34, 211, 238, 0.8) !important;
    fill: rgba(34, 211, 238, 0.8) !important;
}

/* Icon button on hover - brighten the arrow */
.glass-input .mud-select .mud-input-adornment .mud-icon-button:hover {
    color: rgba(34, 211, 238, 1) !important;
}

.glass-input .mud-select .mud-input-adornment .mud-icon-button:hover svg {
    stroke: rgba(34, 211, 238, 1) !important;
    fill: rgba(34, 211, 238, 1) !important;
}

/* Target MudAutocomplete dropdown arrow as well */
.glass-input .mud-autocomplete .mud-input-adornment .mud-icon-button {
    color: rgba(34, 211, 238, 0.8) !important;
}

.glass-input .mud-autocomplete .mud-input-adornment .mud-icon-button:hover {
    color: rgba(34, 211, 238, 1) !important;
}

/* Override any inline styles that MudBlazor might apply to icons */
.glass-input .mud-select .mud-icon-button[style*="color"],
.glass-input .mud-autocomplete .mud-icon-button[style*="color"] {
    color: rgba(34, 211, 238, 0.8) !important;
}

/* Ensure all descendant icons in glass-input are cyan */
.glass-input .mud-icon-button {
    color: rgba(34, 211, 238, 0.8) !important;
}

.glass-input .mud-icon-button:hover {
    color: rgba(34, 211, 238, 1) !important;
}

/* FIX: Override Bootstrap card-body dark text inheritance for MudBlazor dropdown icons */
/* Targets MudSelect and MudAutocomplete icons when nested inside Bootstrap cards */
.card .card-body .glass-input .mud-select .mud-input-adornment .mud-icon-button,
.card .card-body .glass-input .mud-select .mud-input-adornment .mud-icon-root,
.card .card-body .glass-input .mud-autocomplete .mud-input-adornment .mud-icon-button {
    color: rgba(34, 211, 238, 0.8) !important;
}

.card .card-body .glass-input .mud-select .mud-input-adornment svg,
.card .card-body .glass-input .mud-autocomplete .mud-input-adornment svg {
    stroke: rgba(34, 211, 238, 0.8) !important;
    fill: rgba(34, 211, 238, 0.8) !important;
}

/* Override mud-icon-root.mud-svg-icon fill: currentColor - the main culprit */
.card .card-body .glass-input .mud-input-adornment .mud-icon-root.mud-svg-icon {
    fill: rgba(34, 211, 238, 0.8) !important;
}

/* Hover states for better UX */
.card .card-body .glass-input .mud-select .mud-input-adornment .mud-icon-button:hover,
.card .card-body .glass-input .mud-autocomplete .mud-input-adornment .mud-icon-button:hover {
    color: rgba(34, 211, 238, 1) !important;
}

.card .card-body .glass-input .mud-select .mud-input-adornment .mud-icon-button:hover svg,
.card .card-body .glass-input .mud-autocomplete .mud-input-adornment .mud-icon-button:hover svg {
    stroke: rgba(34, 211, 238, 1) !important;
    fill: rgba(34, 211, 238, 1) !important;
}

/* Hover state for mud-icon-root.mud-svg-icon */
.card .card-body .glass-input .mud-input-adornment .mud-icon-root.mud-svg-icon:hover {
    fill: rgba(34, 211, 238, 1) !important;
}

/* ========================================
   EXPANSION PANELS
   ======================================== */
/* Fix expansion panel header text and icon visibility */
.mud-expand-panel-header {
    color: rgba(255, 255, 255, 0.95) !important;
}

.mud-expand-panel-header .mud-expand-panel-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

.mud-expand-panel-header .mud-icon-button {
    color: rgba(255, 255, 255, 0.95) !important;
}

.mud-expand-panel-header .mud-icon-button .mud-icon-root {
    color: rgba(34, 211, 238, 0.9) !important;
}

.mud-expand-panel-header .mud-icon-root {
    color: rgba(34, 211, 238, 0.9) !important;
}

.mud-expand-panel-content {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ========================================
   DROPDOWN / POPOVER ITEMS (DOUBLE SCROLLBAR FIX)
   ======================================== */

/* Fix MudPopover outer container - CRITICAL: Remove all overflow from container */
.mud-popover.mud-popover-open {
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(34, 211, 238, 0.3) !important;
    max-height: none !important;           /* Remove height constraint */
    overflow: visible !important;          /* Remove outer overflow */
    height: auto !important;               /* Allow natural height */
}

/* Fix popover wrapper layers */
.mud-popover-provider {
    overflow: visible !important;
}

.mud-popover {
    overflow: visible !important;
}

/* Ensure popover content doesn't have hidden overflow */
.mud-popover-content {
    overflow: visible !important;
}

/* Fix MudList - this is where ALL scrolling should happen */
.mud-popover.mud-popover-open .mud-list {
    background: rgba(30, 41, 59, 0.98) !important;
    padding: 8px 4px;
    max-height: 400px !important;          /* Set max-height on list only */
    overflow-y: auto !important;           /* Scrollbar only on list */
    overflow-x: hidden !important;         /* Hide horizontal scroll */
}

/* Scrollbar styling for better UX */
.mud-popover.mud-popover-open .mud-list::-webkit-scrollbar {
    width: 8px;
}

.mud-popover.mud-popover-open .mud-list::-webkit-scrollbar-track {
    background: rgba(34, 211, 238, 0.1);
    border-radius: 4px;
}

.mud-popover.mud-popover-open .mud-list::-webkit-scrollbar-thumb {
    background: rgba(34, 211, 238, 0.4);
    border-radius: 4px;
}

.mud-popover.mud-popover-open .mud-list::-webkit-scrollbar-thumb:hover {
    background: rgba(34, 211, 238, 0.6);
}

/* Firefox scrollbar */
.mud-popover.mud-popover-open .mud-list {
    scrollbar-color: rgba(34, 211, 238, 0.4) rgba(34, 211, 238, 0.1);
    scrollbar-width: thin;
}

/* List item styling */
.mud-list-item {
    color: rgba(255, 255, 255, 0.95) !important;
}

.mud-list-item:hover {
    background: rgba(34, 211, 238, 0.15) !important;
}

.mud-list-item.mud-selected-item {
    background: rgba(34, 211, 238, 0.25) !important;
    color: rgba(255, 255, 255, 1) !important;
}

.mud-list-item .mud-list-item-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Fix select item text specifically */
.mud-select-item {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ========================================
   ICON VISIBILITY FIXES
   ======================================== */
/* Ensure icons in glass components are visible */
.glass .mud-icon-root,
.glass-card .mud-icon-root {
    color: rgba(34, 211, 238, 0.9) !important;
}

/* Section header icons */
.glass .mud-text .mud-icon-root,
.glass-card .mud-text .mud-icon-root {
    color: inherit !important;
}
/* ========================================
   MUD DIALOG GLASSMORPHIC STYLES
   Ice Fortress Theme for All Dialogs
   ======================================== */

/* Dialog backdrop (overlay) - frosted dark with blur */
.mud-overlay {
    backdrop-filter: blur(8px) !important;
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Dialog container styling - Ice Fortress glassmorphic theme */
.mud-dialog {
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.98) 0%, 
        rgba(30, 41, 59, 0.95) 100%) !important;
    border: 1px solid rgba(34, 211, 238, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Dialog content area */
.mud-dialog-content {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Dialog title/header */
.mud-dialog-title {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(34, 211, 238, 0.3) !important;
    padding-bottom: 1rem !important;
}

/* Dialog actions (footer buttons) */
.mud-dialog-actions {
    background: transparent !important;
    border-top: 1px solid rgba(34, 211, 238, 0.3) !important;
}

/* Tabs within dialogs */
.mud-dialog .mud-tabs {
    background: transparent !important;
}

.mud-dialog .mud-tabs-panels {
    background: transparent !important;
    padding-top: 1rem !important;
}

/* Tab panel content area */
.mud-dialog .mud-tab-panel {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Tab styling */
.mud-dialog .mud-tab {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.3s ease !important;
}

.mud-dialog .mud-tab:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

.mud-dialog .mud-tab-active {
    color: #22d3ee !important;
    font-weight: 600 !important;
}

/* Tab underline indicator */
.mud-dialog .mud-tabs-toolbar .mud-tab-slider {
    background-color: #22d3ee !important;
}

/* List items in dialogs */
.mud-dialog .mud-list,
.mud-dialog .mud-list-item {
    color: rgba(255, 255, 255, 0.95) !important;
    background: transparent !important;
}

.mud-dialog .mud-list-item .mud-list-item-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

.mud-dialog .mud-list-item strong {
    color: #22d3ee !important;
    font-weight: 600 !important;
}

/* List item icons */
.mud-dialog .mud-list-item .mud-list-item-icon,
.mud-dialog .mud-list-item .mud-icon-root {
    color: #22d3ee !important;
}

/* Typography in dialogs - Brighter for better readability */
.mud-dialog .mud-typography,
.mud-dialog .mud-typography-body1,
.mud-dialog .mud-typography-body2,
.mud-dialog .mud-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Subtitle and heading colors */
.mud-dialog .mud-typography-subtitle1,
.mud-dialog .mud-typography-subtitle2 {
    color: #22d3ee !important;
    font-weight: 600 !important;
}

/* Alerts in dialogs - DARK backgrounds with proper contrast */
.mud-dialog .mud-alert {
    background: rgba(8, 145, 178, 0.25) !important;  /* DARK cyan tint */
    border: 1px solid rgba(34, 211, 238, 0.5) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.mud-dialog .mud-alert-message {
    color: rgba(255, 255, 255, 0.95) !important;
}

.mud-dialog .mud-alert.mud-alert-filled-info {
    background: rgba(8, 145, 178, 0.3) !important;
}

.mud-dialog .mud-alert.mud-alert-filled-success {
    background: rgba(21, 128, 61, 0.3) !important;  /* DARK green */
    border-color: rgba(34, 197, 94, 0.5) !important;
}

.mud-dialog .mud-alert.mud-alert-filled-warning {
    background: rgba(161, 98, 7, 0.3) !important;  /* DARK amber/orange */
    border-color: rgba(251, 191, 36, 0.5) !important;
}

.mud-dialog .mud-alert.mud-alert-filled-error {
    background: rgba(153, 27, 27, 0.3) !important;  /* DARK red */
    border-color: rgba(239, 68, 68, 0.5) !important;
}

/* Papers within dialogs */
.mud-dialog .mud-paper {
    color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(30, 41, 59, 0.6) !important;
}

/* Colored paper sections in guide (info boxes, examples, etc.) - DARK backgrounds with colored accents */
.mud-dialog .mud-paper[style*="background: rgba(34, 211, 238"] {
    background: rgba(8, 145, 178, 0.25) !important;  /* DARK cyan tint */
    border: 1px solid rgba(34, 211, 238, 0.5) !important;
}

.mud-dialog .mud-paper[style*="background: rgba(139, 92, 246"] {
    background: rgba(88, 28, 135, 0.3) !important;  /* DARK purple tint */
    border: 1px solid rgba(139, 92, 246, 0.5) !important;
}

.mud-dialog .mud-paper[style*="background: rgba(34, 197, 94"] {
    background: rgba(21, 128, 61, 0.3) !important;  /* DARK green tint */
    border: 1px solid rgba(34, 197, 94, 0.5) !important;
}

.mud-dialog .mud-paper[style*="background: rgba(239, 68, 68"] {
    background: rgba(153, 27, 27, 0.3) !important;  /* DARK red tint */
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
}

/* All text in colored paper sections */
.mud-dialog .mud-paper .mud-typography,
.mud-dialog .mud-paper .mud-text,
.mud-dialog .mud-paper .mud-list-item,
.mud-dialog .mud-paper .mud-list-item-text,
.mud-dialog .mud-paper p,
.mud-dialog .mud-paper span,
.mud-dialog .mud-paper div,
.mud-dialog .mud-paper strong {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ========================================
   EXPANSION PANELS - CRITICAL FOR ADVANCED TAB
   Ultra-specific selectors to override MudBlazor defaults
   ======================================== */

/* Expansion panel container - DARK background */
.mud-dialog .mud-expansion-panel,
.mud-dialog .mud-expansion-panels .mud-expansion-panel {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(34, 211, 238, 0.4) !important;
    margin-bottom: 0.75rem !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.mud-dialog .mud-expansion-panels {
    background: transparent !important;
}

/* Expansion panel header - DARK with cyan accent */
.mud-dialog .mud-expansion-panel .mud-expand-panel-header,
.mud-dialog .mud-expansion-panels .mud-expansion-panel .mud-expand-panel-header,
.mud-dialog .mud-expansion-panel-header {
    color: rgba(255, 255, 255, 1) !important;
    background: rgba(30, 41, 59, 0.95) !important;  /* DARK slate background */
    border-radius: 8px 8px 0 0 !important;
    padding: 1rem !important;
    border-bottom: 1px solid rgba(34, 211, 238, 0.3) !important;
}

/* Header hover state - Slightly lighter with cyan glow */
.mud-dialog .mud-expansion-panel .mud-expand-panel-header:hover,
.mud-dialog .mud-expansion-panels .mud-expansion-panel .mud-expand-panel-header:hover {
    background: rgba(8, 145, 178, 0.3) !important;  /* DARK cyan-tinted background */
    border-bottom-color: rgba(34, 211, 238, 0.6) !important;
}

/* Header text - CYAN accent to match guide subtitle pattern */
.mud-dialog .mud-expand-panel-header .mud-expand-panel-text,
.mud-dialog .mud-expansion-panel .mud-expand-panel-text,
.mud-dialog .mud-expand-panel-text {
    color: #22d3ee !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Header icons - Cyan */
.mud-dialog .mud-expand-panel-header .mud-icon-button,
.mud-dialog .mud-expand-panel-header .mud-icon-root {
    color: #22d3ee !important;
}

/* Expansion panel content area - DARK background with padding */
.mud-dialog .mud-expansion-panel .mud-expand-panel-content,
.mud-dialog .mud-expansion-panels .mud-expansion-panel .mud-expand-panel-content,
.mud-dialog .mud-expand-panel-content {
    color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(15, 23, 42, 0.9) !important;  /* DARK slate background */
    padding: 1.25rem !important;
}

/* All text inside expansion panels - WHITE */
.mud-dialog .mud-expansion-panel .mud-typography,
.mud-dialog .mud-expansion-panel .mud-text,
.mud-dialog .mud-expansion-panel .mud-list-item,
.mud-dialog .mud-expansion-panel .mud-list-item-text,
.mud-dialog .mud-expansion-panel .mud-body2,
.mud-dialog .mud-expansion-panel p,
.mud-dialog .mud-expansion-panel span:not(.mud-icon-root),
.mud-dialog .mud-expansion-panel div:not(.mud-expand-panel-header),
.mud-dialog .mud-expansion-panel li,
.mud-dialog .mud-expansion-panel label {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Strong tags - Cyan accent */
.mud-dialog .mud-expansion-panel strong {
    color: #22d3ee !important;
    font-weight: 700 !important;
}

/* Lists inside expansion panels */
.mud-dialog .mud-expansion-panel .mud-list {
    background: transparent !important;
}

.mud-dialog .mud-expansion-panel .mud-list-item {
    background: transparent !important;
    padding: 0.5rem 0 !important;
}

.mud-dialog .mud-expansion-panel .mud-list-item-icon {
    color: #22d3ee !important;
}

/* Alerts inside expansion panels - Dark with cyan accent */
.mud-dialog .mud-expansion-panel .mud-alert {
    background: rgba(8, 145, 178, 0.2) !important;
    border: 1px solid rgba(34, 211, 238, 0.5) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.mud-dialog .mud-expansion-panel .mud-alert .mud-alert-message {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Timeline in dialogs */
.mud-dialog .mud-timeline {
    background: transparent !important;
}

.mud-dialog .mud-timeline-item {
    color: rgba(255, 255, 255, 0.95) !important;
}

.mud-dialog .mud-timeline-item-dot {
    background: #22d3ee !important;
    border-color: #22d3ee !important;
}

.mud-dialog .mud-timeline-item-dot-inner {
    background: #22d3ee !important;
}

.mud-dialog .mud-timeline-item-content {
    color: rgba(255, 255, 255, 0.95) !important;
}

.mud-dialog .mud-timeline-item-content .mud-typography {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Headers in dialogs */
.mud-dialog h6,
.mud-dialog .mud-typography-h6 {
    color: #22d3ee !important;
}

/* Icon styling - cyan/light colored */
.mud-dialog .mud-icon-root,
.mud-dialog .mud-svg-icon {
    color: #22d3ee !important;
}

.mud-dialog .mud-list-item-icon {
    color: #22d3ee !important;
}

.mud-dialog .mud-tab .mud-icon-root {
    color: rgba(255, 255, 255, 0.7) !important;
}

.mud-dialog .mud-tab-active .mud-icon-root {
    color: #22d3ee !important;
}

/* Close button styling */
.mud-dialog .mud-button-close {
    color: rgba(255, 255, 255, 0.7) !important;
}

.mud-dialog .mud-button-close:hover {
    color: #22d3ee !important;
    background: rgba(34, 211, 238, 0.1) !important;
}

/* ========================================
   CATCH-ALL DIALOG TEXT READABILITY
   Ensures NO white-on-white text issues
   ======================================== */
.mud-dialog p,
.mud-dialog span,
.mud-dialog div:not(.mud-dialog):not(.mud-overlay),
.mud-dialog label,
.mud-dialog li {
    color: rgba(255, 255, 255, 0.95);
}

/* Ensure all nested content in dialog content area is readable */
.mud-dialog-content * {
    color: rgba(255, 255, 255, 0.95);
}

/* Override for icon elements (they should remain themed color) */
.mud-dialog-content .mud-icon-root,
.mud-dialog-content .mud-svg-icon {
    color: #22d3ee !important;
}

/* Override for MudPaper.glass border-radius for consistency */
.mud-paper.glass {
    border-radius: 4px !important;
}

/* ========================================
   BATTLE MENU ICONS - FIX FOR MUDBLAZOR MENU POPOVER
   ======================================== */

/* Override CSS variable at popover level to catch all menu icons */
.battle-menu-popover {
    --mud-palette-action-default: rgba(34, 211, 238, 0.9) !important;
    --mud-palette-action-default-hover: rgba(34, 211, 238, 1) !important;
}

/* Direct selector for menu item icons (MudBlazor renders icons as direct children) */
.battle-menu-popover .mud-menu-item > .mud-icon-root {
    color: rgba(34, 211, 238, 0.9) !important;
}

/* Fallback for list item icons (in case MudBlazor structure varies) */
.battle-menu-popover .mud-list-item .mud-icon-root {
    color: rgba(34, 211, 238, 0.9) !important;
}

/* Additional specificity for SVG icons */
.battle-menu-popover .mud-menu-item > .mud-icon-root.mud-svg-icon,
.battle-menu-popover .mud-list-item .mud-icon-root.mud-svg-icon {
    color: rgba(34, 211, 238, 0.9) !important;
    fill: currentColor !important;
}

/* ========================================
   HERO SECTION STYLING
   Consistent title and subtitle styling
   ======================================== */

.hero-section {
    padding: 2rem 0 1rem;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0.3px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .hero-section {
        padding: 1.5rem 0 0.75rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }
}

/* ========================================
   MUD TABLE PAGER (PAGINATION CONTROLS)
   Ice Fortress Theme - Readable White Text & Cyan Icons
   ======================================== */

/* Main pagination toolbar - glassmorphic background */
.mud-table-pagination-toolbar {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(34, 211, 238, 0.3) !important;
    padding: 0.75rem 1rem !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Pagination display text (e.g., "1-10 of 18") - BRIGHT WHITE */
.mud-table-pagination-display,
.mud-table-pagination-caption {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500 !important;
}

/* "Rows per page" text label - BRIGHT WHITE */
.mud-table-pagination-toolbar .mud-typography,
.mud-table-pagination-toolbar .mud-typography-body2 {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Pagination icon buttons (arrows) - CYAN */
.mud-table-pagination-toolbar .mud-icon-button {
    color: rgba(34, 211, 238, 0.9) !important;
}

.mud-table-pagination-toolbar .mud-icon-button .mud-icon-root {
    color: rgba(34, 211, 238, 0.9) !important;
}

.mud-table-pagination-toolbar .mud-icon-button svg {
    fill: rgba(34, 211, 238, 0.9) !important;
    stroke: rgba(34, 211, 238, 0.9) !important;
}

/* Icon button hover - BRIGHTER CYAN */
.mud-table-pagination-toolbar .mud-icon-button:hover {
    color: rgba(34, 211, 238, 1) !important;
    background: rgba(34, 211, 238, 0.15) !important;
}

.mud-table-pagination-toolbar .mud-icon-button:hover .mud-icon-root {
    color: rgba(34, 211, 238, 1) !important;
}

.mud-table-pagination-toolbar .mud-icon-button:hover svg {
    fill: rgba(34, 211, 238, 1) !important;
    stroke: rgba(34, 211, 238, 1) !important;
}

/* Disabled pagination buttons - DIM CYAN */
.mud-table-pagination-toolbar .mud-icon-button.mud-disabled,
.mud-table-pagination-toolbar .mud-icon-button:disabled {
    color: rgba(34, 211, 238, 0.4) !important;
    cursor: not-allowed !important;
}

.mud-table-pagination-toolbar .mud-icon-button.mud-disabled .mud-icon-root,
.mud-table-pagination-toolbar .mud-icon-button:disabled .mud-icon-root {
    color: rgba(34, 211, 238, 0.4) !important;
}

.mud-table-pagination-toolbar .mud-icon-button.mud-disabled svg,
.mud-table-pagination-toolbar .mud-icon-button:disabled svg {
    fill: rgba(34, 211, 238, 0.4) !important;
    stroke: rgba(34, 211, 238, 0.4) !important;
}

/* Rows per page dropdown (MudSelect) - glassmorphic styling */
.mud-table-pagination-toolbar .mud-select {
    color: rgba(255, 255, 255, 0.95) !important;
}

.mud-table-pagination-toolbar .mud-select .mud-select-input {
    color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(34, 211, 238, 0.3) !important;
}

.mud-table-pagination-toolbar .mud-select:hover .mud-select-input {
    border-color: rgba(34, 211, 238, 0.6) !important;
}

/* Dropdown arrow in rows-per-page select - CYAN */
.mud-table-pagination-toolbar .mud-select .mud-input-adornment .mud-icon-button {
    color: rgba(34, 211, 238, 0.9) !important;
}

.mud-table-pagination-toolbar .mud-select .mud-input-adornment .mud-icon-root {
    color: rgba(34, 211, 238, 0.9) !important;
}

.mud-table-pagination-toolbar .mud-select .mud-input-adornment svg {
    fill: rgba(34, 211, 238, 0.9) !important;
    stroke: rgba(34, 211, 238, 0.9) !important;
}

/* Page number text - BRIGHT WHITE */
.mud-table-pagination-toolbar .mud-table-pagination-spacer + .mud-typography {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Ensure all text elements in pagination are readable */
.mud-table-pagination-toolbar * {
    color: rgba(255, 255, 255, 0.95);
}

/* Override for icon elements (they should be cyan) */
.mud-table-pagination-toolbar .mud-icon-root,
.mud-table-pagination-toolbar .mud-icon-button,
.mud-table-pagination-toolbar svg {
    color: rgba(34, 211, 238, 0.9) !important;
}

/* ========================================
   MUDBLAZOR BUTTON GLOBAL STYLING
   Ice Fortress Theme - Readable Buttons
   ======================================== */

/* PRIMARY BUTTONS - Filled variant (default) */
.mud-button-filled-primary {
    background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.3) !important;
    border: none !important;
}

.mud-button-filled-primary:hover {
    background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%) !important;
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4) !important;
    transform: translateY(-1px);
}

.mud-button-filled-primary:active {
    transform: translateY(0);
}

/* SECONDARY BUTTONS - Filled variant */
.mud-button-filled-secondary {
    background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(71, 85, 105, 0.3) !important;
}

.mud-button-filled-secondary:hover {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
    box-shadow: 0 6px 20px rgba(100, 116, 139, 0.4) !important;
}

/* TERTIARY/DEFAULT BUTTONS - Filled variant */
.mud-button-filled-default,
.mud-button-filled-tertiary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.mud-button-filled-default:hover,
.mud-button-filled-tertiary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* INFO BUTTONS - Cyan theme */
.mud-button-filled-info {
    background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* SUCCESS BUTTONS - Green theme */
.mud-button-filled-success {
    background: linear-gradient(135deg, #15803d 0%, #22c55e 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.mud-button-filled-success:hover {
    background: linear-gradient(135deg, #166534 0%, #16a34a 100%) !important;
}

/* WARNING BUTTONS - Amber theme */
.mud-button-filled-warning {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.mud-button-filled-warning:hover {
    background: linear-gradient(135deg, #92400e 0%, #d97706 100%) !important;
}

/* ERROR/DANGER BUTTONS - Red theme */
.mud-button-filled-error {
    background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.mud-button-filled-error:hover {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
}

/* ----------------------------------------
   OUTLINED BUTTONS - Better visibility
   ---------------------------------------- */

/* Primary outlined */
.mud-button-outlined-primary {
    border: 2px solid #22d3ee !important;
    color: #22d3ee !important;
    font-weight: 600 !important;
    background: transparent !important;
}

.mud-button-outlined-primary:hover {
    background: rgba(34, 211, 238, 0.15) !important;
    border-color: #67e8f9 !important;
    color: #67e8f9 !important;
}

/* Secondary outlined - BRIGHT for visibility */
.mud-button-outlined-secondary {
    border: 2px solid rgba(148, 163, 184, 1) !important;    /* Full opacity */
    color: rgba(226, 232, 240, 1) !important;               /* slate-200 - bright */
    font-weight: 600 !important;
    background: transparent !important;
}

.mud-button-outlined-secondary:hover {
    background: rgba(148, 163, 184, 0.2) !important;
    border-color: rgba(226, 232, 240, 1) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* Default/Tertiary outlined */
.mud-button-outlined-default,
.mud-button-outlined-tertiary {
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    background: transparent !important;
}

.mud-button-outlined-default:hover,
.mud-button-outlined-tertiary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* Info outlined */
.mud-button-outlined-info {
    border: 2px solid #22d3ee !important;
    color: #22d3ee !important;
    font-weight: 600 !important;
}

.mud-button-outlined-info:hover {
    background: rgba(34, 211, 238, 0.15) !important;
}

/* Success outlined */
.mud-button-outlined-success {
    border: 2px solid #22c55e !important;
    color: #22c55e !important;
    font-weight: 600 !important;
}

.mud-button-outlined-success:hover {
    background: rgba(34, 197, 94, 0.15) !important;
}

/* Warning outlined */
.mud-button-outlined-warning {
    border: 2px solid #f59e0b !important;
    color: #f59e0b !important;
    font-weight: 600 !important;
}

.mud-button-outlined-warning:hover {
    background: rgba(245, 158, 11, 0.15) !important;
}

/* Error outlined */
.mud-button-outlined-error {
    border: 2px solid #ef4444 !important;
    color: #ef4444 !important;
    font-weight: 600 !important;
}

.mud-button-outlined-error:hover {
    background: rgba(239, 68, 68, 0.15) !important;
}

/* ----------------------------------------
   TEXT BUTTONS - Improved contrast
   ---------------------------------------- */

/* Primary text button */
.mud-button-text-primary {
    color: #22d3ee !important;
    font-weight: 600 !important;
}

.mud-button-text-primary:hover {
    background: rgba(34, 211, 238, 0.15) !important;
    color: #67e8f9 !important;
}

/* Secondary text button */
.mud-button-text-secondary {
    color: rgba(226, 232, 240, 1) !important;   /* Brighter for visibility */
    font-weight: 600 !important;
}

.mud-button-text-secondary:hover {
    background: rgba(148, 163, 184, 0.15) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* Default/Inherit text button */
.mud-button-text-default,
.mud-button-text-inherit {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
}

.mud-button-text-default:hover,
.mud-button-text-inherit:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 1) !important;
}

/* Info text button */
.mud-button-text-info {
    color: #22d3ee !important;
    font-weight: 600 !important;
}

/* Success text button */
.mud-button-text-success {
    color: #22c55e !important;
    font-weight: 600 !important;
}

/* Warning text button */
.mud-button-text-warning {
    color: #f59e0b !important;
    font-weight: 600 !important;
}

/* Error text button */
.mud-button-text-error {
    color: #ef4444 !important;
    font-weight: 600 !important;
}

/* ----------------------------------------
   DISABLED BUTTONS - Clear disabled state
   ---------------------------------------- */

.mud-button-root.mud-disabled,
.mud-button-root[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Filled disabled */
.mud-button-filled.mud-disabled {
    background: rgba(100, 116, 139, 0.4) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
}

/* Outlined disabled */
.mud-button-outlined.mud-disabled {
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: rgba(148, 163, 184, 0.5) !important;
}

/* Text disabled */
.mud-button-text.mud-disabled {
    color: rgba(148, 163, 184, 0.4) !important;
}

/* ----------------------------------------
   ICON BUTTONS - Consistent styling
   Note: Icon buttons may use either hyphenated (.mud-icon-button-primary)
   or compound selectors, so we include both for compatibility
   ---------------------------------------- */

.mud-icon-button-primary,
.mud-icon-button.mud-button-primary {
    color: #22d3ee !important;
}

.mud-icon-button-primary:hover,
.mud-icon-button.mud-button-primary:hover {
    background: rgba(34, 211, 238, 0.15) !important;
    color: #67e8f9 !important;
}

.mud-icon-button-secondary,
.mud-icon-button.mud-button-secondary {
    color: rgba(226, 232, 240, 1) !important;   /* Brighter for visibility */
}

.mud-icon-button-secondary:hover,
.mud-icon-button.mud-button-secondary:hover {
    background: rgba(148, 163, 184, 0.15) !important;
    color: rgba(255, 255, 255, 1) !important;
}

.mud-icon-button-default,
.mud-icon-button-inherit,
.mud-icon-button.mud-button-default,
.mud-icon-button.mud-button-inherit {
    color: rgba(255, 255, 255, 0.85) !important;
}

.mud-icon-button-default:hover,
.mud-icon-button-inherit:hover,
.mud-icon-button.mud-button-default:hover,
.mud-icon-button.mud-button-inherit:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 1) !important;
}

.mud-icon-button-error,
.mud-icon-button.mud-button-error {
    color: #ef4444 !important;
}

.mud-icon-button-error:hover,
.mud-icon-button.mud-button-error:hover {
    background: rgba(239, 68, 68, 0.15) !important;
}

.mud-icon-button-success,
.mud-icon-button.mud-button-success {
    color: #22c55e !important;
}

.mud-icon-button-success:hover,
.mud-icon-button.mud-button-success:hover {
    background: rgba(34, 197, 94, 0.15) !important;
}

/* ----------------------------------------
   FAB BUTTONS - Floating action buttons
   ---------------------------------------- */

.mud-fab.mud-fab-primary {
    background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(8, 145, 178, 0.4) !important;
}

.mud-fab.mud-fab-primary:hover {
    background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%) !important;
    box-shadow: 0 6px 25px rgba(34, 211, 238, 0.5) !important;
}

.mud-fab.mud-fab-secondary {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
    color: #ffffff !important;
}

/* ----------------------------------------
   BUTTON GROUP - Consistent styling
   ---------------------------------------- */

.mud-button-group .mud-button-root {
    border-color: rgba(34, 211, 238, 0.3) !important;
}

.mud-button-group .mud-button-root:hover {
    border-color: rgba(34, 211, 238, 0.6) !important;
}

/* ----------------------------------------
   BUTTON TRANSITIONS
   ---------------------------------------- */

.mud-button-root {
    transition: all 0.2s ease-in-out !important;
}

/* ----------------------------------------
   CUSTOM RESPONSIVE UTILITIES
   Override Bootstrap/MudBlazor conflicts with explicit breakpoints
   Using Bootstrap's XL breakpoint (1200px) for consistency
   ---------------------------------------- */

/* Desktop-only: Hidden by default, shown at 1200px+ */
.wos-desktop-only {
    display: none !important;
}

@media (min-width: 1200px) {
    .wos-desktop-only {
        display: block !important;
    }
}

/* Mobile-only: Shown by default, hidden at 1200px+ */
.wos-mobile-only {
    display: block !important;
}

@media (min-width: 1200px) {
    .wos-mobile-only {
        display: none !important;
    }
}

/* Table cells: Hidden below LG (992px), visible as table-cell at LG+ */
.table-cell-lg {
    display: none !important;
}

@media (min-width: 992px) {
    .table-cell-lg {
        display: table-cell !important;
    }
}

/* Table cells: Hidden below MD (768px), visible as table-cell at MD+ */
.table-cell-md {
    display: none !important;
}

@media (min-width: 768px) {
    .table-cell-md {
        display: table-cell !important;
    }
}

/* Show table cell only below LG */
.table-cell-below-lg {
    display: table-cell !important;
}

@media (min-width: 992px) {
    .table-cell-below-lg {
        display: none !important;
    }
}

/* ========================================
   AUTH PAGE STYLES - Ice Fortress Theme
   Login, Register, ForgotPassword, etc.
   ======================================== */

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.auth-box {
    width: 100%;
    max-width: 420px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.auth-title {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-align: center;
}

.auth-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-link {
    color: #22d3ee !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.auth-link:hover {
    color: #67e8f9 !important;
    text-decoration: underline;
}

/* Auth form spacing */
.auth-box .mud-input-control {
    margin-bottom: 1rem;
}

.auth-box .mud-input-control:last-of-type {
    margin-bottom: 1.5rem;
}

/* Auth button styling */
.auth-box .mud-button-root {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Auth divider */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
}

.auth-divider::before {
    margin-right: 1rem;
}

.auth-divider::after {
    margin-left: 1rem;
}

/* Auth footer links */
.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(34, 211, 238, 0.15);
}

.auth-footer-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Auth checkbox styling */
.auth-checkbox {
    color: rgba(255, 255, 255, 0.9) !important;
}

.auth-checkbox .mud-checkbox-icons {
    color: rgba(34, 211, 238, 0.8) !important;
}

.auth-checkbox .mud-typography {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.9rem !important;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .auth-container {
        padding: 1rem;
    }

    .auth-box {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .auth-title {
        font-size: 1.5rem;
    }

    .auth-subtitle {
        font-size: 0.9rem;
    }
}