@tailwind base;
@tailwind components;
@tailwind utilities;




/* Legacy pastel palette retained for reference.
:root {
    --color-primary: #8EC6F7;
    --color-primary-strong: #6BB3E6;
    --color-primary-soft: #B5D0FF;
    --color-secondary: #F7B7A3;
    --color-secondary-strong: #F39E86;
    --color-secondary-soft: #FFCAB3;
    --color-success: #B9FBC0;
    --color-success-strong: #96E0A0;
    --color-success-soft: #DAFFDF;
    --color-warning: #FFF3B0;
    /* Playlist player components */
    .playlist-slider,
    .amplitude-song-slider {
        --slider-progress: 0%;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 8px;
        border-radius: 9999px;
        background: linear-gradient(to right,
                rgba(127, 90, 240, 0.85) 0%,
                rgba(127, 90, 240, 0.85) var(--slider-progress),
                rgba(127, 90, 240, 0.18) var(--slider-progress),
                rgba(127, 90, 240, 0.18) 100%);
        box-shadow: inset 0 1px 2px rgba(15, 40, 64, 0.15);
        cursor: pointer;
        transition: box-shadow 0.2s ease;
    }

    .playlist-slider:focus-visible,
    .amplitude-song-slider:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(127, 90, 240, 0.35);
    }

    .playlist-slider::-webkit-slider-thumb,
    .amplitude-song-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        background: #ffffff;
        cursor: pointer;
        border-radius: 50%;
        border: 1px solid rgba(15, 40, 64, 0.12);
        box-shadow: 0 2px 6px rgba(15, 40, 64, 0.25);
        transition: transform 0.15s ease;
    }

    .playlist-slider::-moz-range-thumb,
    .amplitude-song-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: #ffffff;
        cursor: pointer;
        border-radius: 50%;
        border: 1px solid rgba(15, 40, 64, 0.12);
        box-shadow: 0 2px 6px rgba(15, 40, 64, 0.25);
        transition: transform 0.15s ease;
    }

    .playlist-slider::-webkit-slider-thumb:hover,
    .amplitude-song-slider::-webkit-slider-thumb:hover,
    .playlist-slider::-moz-range-thumb:hover,
    .amplitude-song-slider::-moz-range-thumb:hover {
        transform: scale(1.1);
    }

    .playlist-time-bar {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        font-variant-numeric: tabular-nums;
        color: rgba(15, 40, 64, 0.7);
        opacity: 1;
        margin-bottom: 1.5rem;
    }

    .playlist-control-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.25rem;
    }

    .playlist-control-circle {
        width: 48px;
        height: 48px;
        border-radius: 9999px;
        background: #ffffff;
        border: 1px solid rgba(15, 40, 64, 0.08);
        box-shadow: 0 6px 14px rgba(15, 40, 64, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .playlist-control-circle--primary {
        width: 64px;
        height: 64px;
        box-shadow: 0 10px 18px rgba(15, 40, 64, 0.2);
    }

    .playlist-control-circle:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 20px rgba(15, 40, 64, 0.22);
    }

    .playlist-control-circle:active {
        transform: translateY(1px);
        box-shadow: inset 0 4px 10px rgba(15, 40, 64, 0.16);
    }

    .playlist-control-circle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(127, 90, 240, 0.35);
    }

    .playlist-control-icon {
        font-size: 1.8rem;
        color: var(--color-primary-strong, #5F3FEB);
        transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    }

    .playlist-control-icon--primary {
        font-size: 2.8rem;
    }

    .playlist-control-circle:hover .playlist-control-icon {
        color: var(--color-primary-bright, #8E7BFF);
        transform: scale(1.08);
        filter: drop-shadow(0 4px 12px rgba(95, 63, 235, 0.35));
    }

    .amplitude-pause[hidden] {
        display: none !important;
    }

    .playlist-buffering-message {
        margin-top: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.9rem;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .playlist-buffering-spinner {
        font-size: 1.2rem;
        animation: playlist-spin 0.9s linear infinite;
    }

    [data-player-buffering]:not([hidden]) {
        opacity: 1 !important;
    }

    .playlist-song-item {
        transition: background-color 0.2s ease, border-color 0.2s ease;
        border: 1px solid transparent;
    }

    .playlist-song-item:hover {
        background: rgba(127, 90, 240, 0.08);
    }

    .playlist-song-item.amplitude-active-song-container {
        background: rgba(127, 90, 240, 0.15);
        border-left: 4px solid var(--color-primary, #7F5AF0);
    }

    .playlist-song-item.amplitude-active-song-container .amplitude-playing-icon {
        opacity: 1 !important;
        animation: playlist-eq-pulse 1.4s ease-in-out infinite;
    }

    .amplitude-playing-icon {
        font-size: 1.25rem;
        color: var(--color-primary-strong, #5F3FEB);
    }

    .playlist-player-panel {
        padding: 1.75rem 2.25rem;
        background: #ffffff;
        border-top: 1px solid rgba(15, 40, 64, 0.06);
    }

    .playlist-nowplaying {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        margin-bottom: 1.5rem;
    }

    .playlist-nowplaying-title {
        color: var(--color-primary-strong, #5F3FEB);
        font-weight: 700;
        font-size: 1.15rem;
        letter-spacing: 0.01em;
    }

    .playlist-nowplaying-artist {
        color: rgba(15, 40, 64, 0.68);
        font-size: 0.9rem;
    }

    @keyframes playlist-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes playlist-eq-pulse {
        0%, 100% {
            transform: translateY(0);
            opacity: 0.9;
        }
        50% {
            transform: translateY(-3px);
            opacity: 0.6;
        }
    }

    .playlist-song-item.amplitude-active-song-container .playlist-song-indicator {
        display: inline-flex;
        animation: playlist-eq-pulse 1s ease-in-out infinite;
    }

    @keyframes playlist-eq-pulse {
        0%, 100% {
            transform: translateY(0);
            opacity: 0.85;
        }
        50% {
            transform: translateY(-2px);
            opacity: 0.55;
        }
    }

/*
Accent colors for easy reference:
    --pastel-coral: var(--color-accent-coral);
    --pastel-sage: var(--color-accent-sage);
    --pastel-rose: var(--color-accent-rose);
    --pastel-cream: var(--color-accent-cream);
    --pastel-aqua: var(--color-accent-aqua);
*/

/* Modern purple palette retained for reference.
:root {
    --color-primary: #7F5AF0;
    --color-primary-strong: #5F3FEB;
    --color-primary-soft: #B9A6FF;
    --color-secondary: #00E5FF;
    --color-secondary-strong: #00B8E6;
    --color-secondary-soft: #7EF0FF;
    --color-success: #2CB67D;
    --color-success-strong: #219B69;
    --color-success-soft: #6DF4B3;
    --color-warning: #F7C948;
    --color-warning-strong: #F2A61D;
    --color-warning-soft: #FFE69C;
    --color-error: #EF4565;
    --color-error-strong: #D72F4D;
    --color-error-soft: #FF8AA2;
    --color-info: #4FB5FF;
    --color-info-strong: #1F8AF5;
    --color-info-soft: #9AD6FF;
    --color-dark: #0B1228;
    --color-dark-elevated: #111B33;
    --color-dark-soft: #1F2A4A;
    --color-light: #FFFFFF;
    --color-background: #FBFCFF;
    --color-surface: #FFFFFF;
    --color-surface-elevated: #EEF2FF;
    --color-border: #D7DEF5;
    --color-border-strong: #AEB8E3;
    --color-shadow-tint: rgba(127, 90, 240, 0.18);
    --color-shadow-glow: rgba(95, 72, 210, 0.28);
    --color-hover: #9C82FF;
    --color-disabled: #E1E5F5;
    --color-disabled-border: #C5CBE3;
    --color-disabled-text: #9CA3C0;
    --color-muted: #5C6384;
    --color-text: #1E2745;
    --color-text-strong: #0B1020;
    --color-text-inverse: #FFFFFF;
    --color-text-subtle: #4F587A;
    --panel-glow-opacity: 0.26;

    --color-accent-coral: #FF6F91;
    --color-accent-purple: #C084FC;
    --color-accent-teal: #2DD4BF;
    --color-accent-rose: #FF80AB;
    --color-accent-cream: #FFE8A3;
    --color-accent-aqua: #38BDF8;
    --color-accent-sage: #4ADE80;
    --color-accent-red: #FF4D6D;

    --hover-primary: var(--color-hover);
    --hover-secondary: #05C8E0;
    --hover-success: #31D897;
    --hover-warning: #F4B732;
    --hover-error: #FF5C7D;
    --hover-info: #3AA8F7;
    --hover-dark: #27345C;
    --hover-light: #E4E9FF;
    --hover-red: #FF4664;
    --hover-purple: #A855F7;
    --hover-teal: #22B8A6;
    --hover-coral: #FF517F;
    --hover-sage: #3BBB64;
    --hover-rose: #FF5FAA;
    --hover-cream: #FFD866;
    --hover-aqua: #1FB6FF;

    --text-on-primary: var(--color-text-inverse);
    --text-on-secondary: var(--color-dark);
    --text-on-success: #063421;
    --text-on-warning: #4F3503;
    --text-on-error: var(--color-text-inverse);
    --text-on-spectrum: var(--color-text-inverse);
    --text-on-prism: var(--color-dark);

    --shadow-btn-default: 0 10px 24px rgba(15, 30, 70, 0.12);
    --shadow-btn-active: 0 4px 14px rgba(15, 30, 70, 0.18);
    --shadow-elevation-glow: 0 18px 36px rgba(127, 90, 240, 0.16), 0 10px 26px rgba(0, 229, 255, 0.12);

    --btn-surface-primary: var(--color-primary);
    --btn-surface-secondary: var(--color-secondary);
    --btn-surface-success: var(--color-success);
    --btn-surface-spectrum: var(--color-surface-elevated);
    --btn-surface-prism: var(--color-light);
    --btn-disabled-surface: var(--color-disabled);

    --panel-glow-gradient-rainbow: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );
    --panel-glow-gradient-primary: linear-gradient(45deg,
        rgba(127, 90, 240, 0.55),
        rgba(98, 60, 226, 0.4),
        rgba(127, 90, 240, 0.6),
        rgba(155, 140, 255, 0.45)
    );
    --panel-glow-gradient-secondary: linear-gradient(45deg,
        rgba(0, 229, 255, 0.55),
        rgba(0, 205, 255, 0.4),
        rgba(126, 240, 255, 0.6),
        rgba(0, 229, 255, 0.55)
    );
    --panel-glow-gradient-success: linear-gradient(45deg,
        rgba(44, 182, 125, 0.6),
        rgba(31, 154, 100, 0.38),
        rgba(109, 244, 179, 0.55),
        rgba(44, 182, 125, 0.6)
    );
    --panel-glow-gradient-warning: linear-gradient(45deg,
        rgba(247, 201, 72, 0.6),
        rgba(242, 166, 29, 0.4),
        rgba(255, 230, 156, 0.55),
        rgba(247, 201, 72, 0.6)
    );
    --panel-glow-gradient-info: linear-gradient(45deg,
        rgba(79, 181, 255, 0.6),
        rgba(31, 138, 245, 0.38),
        rgba(154, 214, 255, 0.55),
        rgba(79, 181, 255, 0.6)
    );
    --panel-glow-gradient-error: linear-gradient(45deg,
        rgba(239, 69, 101, 0.6),
        rgba(215, 47, 77, 0.4),
        rgba(255, 138, 162, 0.55),
        rgba(239, 69, 101, 0.6)
    );
    --btn-glow-primary-gradient: linear-gradient(45deg,
        var(--color-primary-strong),
        var(--color-primary),
        var(--color-secondary),
        var(--color-primary-soft),
        var(--color-secondary-soft),
        var(--color-primary)
    );
    --btn-glow-secondary-gradient: linear-gradient(45deg,
        var(--color-secondary),
        var(--color-secondary-strong),
        var(--color-info),
        var(--color-secondary-soft),
        var(--color-info-soft),
        var(--color-secondary)
    );
    --btn-glow-success-gradient: linear-gradient(45deg,
        var(--color-success),
        var(--color-success-strong),
        var(--color-success-soft),
        var(--color-secondary),
        var(--color-success),
        var(--color-success-soft)
    );
    --btn-glow-spectrum-gradient: linear-gradient(45deg,
        #ff007a,
        #ff8c00,
        #ffee00,
        #48ff00,
        #00ffd5,
        #00a0ff,
        #7a00ff,
        #ff00c8,
        #ff007a
    );
    --btn-glow-prism-gradient: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );
    --btn-outlined-base-gradient: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );

    --gradient-info-transparent: rgba(79, 181, 255, 0);

    --pastel-primary: var(--color-primary);
    --pastel-secondary: var(--color-secondary);
    --pastel-success: var(--color-success);
    --pastel-warning: var(--color-warning);
    --pastel-error: var(--color-error);
    --pastel-info: var(--color-info);
    --pastel-dark: var(--color-dark);
    --pastel-light: var(--color-light);
    --pastel-text: var(--color-text);
    --pastel-border: var(--color-border);
    --pastel-shadow: var(--color-shadow-tint);
    --pastel-hover: var(--color-hover);
    --pastel-background: var(--color-background);
    --pastel-disabled: var(--color-disabled);
    --pastel-muted: var(--color-muted);
    --pastel-red: var(--color-accent-red);
    --pastel-purple: var(--color-accent-purple);
    --pastel-teal: var(--color-accent-teal);
    --pastel-coral: var(--color-accent-coral);
    --pastel-sage: var(--color-accent-sage);
    --pastel-rose: var(--color-accent-rose);
    --pastel-cream: var(--color-accent-cream);
    --pastel-aqua: var(--color-accent-aqua);
}
*/

:root {
    /* Modern feminine palette */
    --color-primary: #A450FF;
    --color-primary-strong: #8636D8;
    --color-primary-soft: #C99CFF;
    --color-secondary: #FF7CCB;
    --color-secondary-strong: #F152B1;
    --color-secondary-soft: #FFB0E2;
    --color-success: #58E3B4;
    --color-success-strong: #31C496;
    --color-success-soft: #A0F5D6;
    --color-warning: #FFB5A2;
    --color-warning-strong: #FF967D;
    --color-warning-soft: #FFD5C8;
    --color-error: #FF6F91;
    --color-error-strong: #E44F72;
    --color-error-soft: #FFA4BB;
    --color-info: #6FB6FF;
    --color-info-strong: #3D92E5;
    --color-info-soft: #A7D3FF;
    --color-dark: #231625;
    --color-dark-elevated: #2F2032;
    --color-dark-soft: #423247;
    --color-light: #FFFFFF;
    --color-background: #FFFFFF;
    --color-surface: #FFFFFF;
    --color-surface-elevated: #F7EFFA;
    --color-border: #ECD7FB;
    --color-border-strong: #D1B4E9;
    --color-shadow-tint: rgba(164, 80, 255, 0.18);
    --color-shadow-glow: rgba(128, 58, 210, 0.26);
    --color-hover: #BF76FF;
    --color-disabled: #E9DFF5;
    --color-disabled-border: #D8C6EB;
    --color-disabled-text: #A196B8;
    --color-muted: #6E5C7D;
    --color-text: #2A1B33;
    --color-text-strong: #160C1D;
    --color-text-inverse: #FFFFFF;
    --color-text-subtle: #5B4A68;
    --panel-glow-opacity: 0.28;

    --color-accent-coral: #FF8C69;
    --color-accent-purple: #D4A5FF;
    --color-accent-teal: #58E3D8;
    --color-accent-rose: #FF94C2;
    --color-accent-cream: #FFF2D7;
    --color-accent-aqua: #7FE7FF;
    --color-accent-sage: #9BE6C6;
    --color-accent-red: #FF5D7D;

    --hover-primary: var(--color-hover);
    --hover-secondary: #FF65BD;
    --hover-success: #3FD3A2;
    --hover-warning: #FF9A86;
    --hover-error: #FF537D;
    --hover-info: #4FA4FC;
    --hover-dark: #3B2A42;
    --hover-light: #F5EDF9;
    --hover-red: #FF4A74;
    --hover-purple: #B779F9;
    --hover-teal: #47D8D0;
    --hover-coral: #FF755D;
    --hover-sage: #88DBB8;
    --hover-rose: #FF7AB6;
    --hover-cream: #FFE7BD;
    --hover-aqua: #63D8F7;

    --text-on-primary: var(--color-text-inverse);
    --text-on-secondary: var(--color-text-inverse);
    --text-on-success: #0C281F;
    --text-on-warning: #4C231D;
    --text-on-error: var(--color-text-inverse);
    --text-on-spectrum: var(--color-text-inverse);
    --text-on-prism: var(--color-dark);

    --shadow-btn-default: 0 14px 28px rgba(42, 27, 51, 0.12);
    --shadow-btn-active: 0 6px 16px rgba(42, 27, 51, 0.2);
    --shadow-elevation-glow: 0 16px 32px rgba(164, 80, 255, 0.18), 0 10px 24px rgba(255, 108, 177, 0.12);

    --btn-surface-primary: var(--color-primary);
    --btn-surface-secondary: var(--color-secondary);
    --btn-surface-success: var(--color-success);
    --btn-surface-spectrum: var(--color-surface-elevated);
    --btn-surface-prism: var(--color-light);
    --btn-disabled-surface: var(--color-disabled);

    --panel-glow-gradient-rainbow: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );
    --panel-glow-gradient-primary: linear-gradient(45deg,
        rgba(164, 80, 255, 0.65),
        rgba(134, 54, 216, 0.4),
        rgba(164, 80, 255, 0.65),
        rgba(201, 156, 255, 0.45)
    );
    --panel-glow-gradient-secondary: linear-gradient(45deg,
        rgba(255, 124, 203, 0.65),
        rgba(241, 82, 177, 0.45),
        rgba(255, 176, 226, 0.5),
        rgba(255, 124, 203, 0.65)
    );
    --panel-glow-gradient-success: linear-gradient(45deg,
        rgba(88, 227, 180, 0.62),
        rgba(49, 196, 150, 0.4),
        rgba(160, 245, 214, 0.55),
        rgba(88, 227, 180, 0.62)
    );
    --panel-glow-gradient-warning: linear-gradient(45deg,
        rgba(255, 181, 162, 0.65),
        rgba(255, 150, 125, 0.42),
        rgba(255, 213, 200, 0.5),
        rgba(255, 181, 162, 0.65)
    );
    --panel-glow-gradient-info: linear-gradient(45deg,
        rgba(111, 182, 255, 0.65),
        rgba(61, 146, 229, 0.42),
        rgba(167, 211, 255, 0.55),
        rgba(111, 182, 255, 0.65)
    );
    --panel-glow-gradient-error: linear-gradient(45deg,
        rgba(255, 111, 145, 0.65),
        rgba(228, 79, 114, 0.42),
        rgba(255, 164, 187, 0.5),
        rgba(255, 111, 145, 0.65)
    );
    --btn-glow-primary-gradient: linear-gradient(45deg,
        var(--color-primary-strong),
        var(--color-primary),
        var(--color-secondary),
        var(--color-primary-soft),
        var(--color-secondary-soft),
        var(--color-primary)
    );
    --btn-glow-secondary-gradient: linear-gradient(45deg,
        var(--color-secondary),
        var(--color-secondary-strong),
        var(--color-info),
        var(--color-secondary-soft),
        var(--color-info-soft),
        var(--color-secondary)
    );
    --btn-glow-success-gradient: linear-gradient(45deg,
        var(--color-success),
        var(--color-success-strong),
        var(--color-success-soft),
        var(--color-secondary),
        var(--color-success),
        var(--color-success-soft)
    );
    --btn-glow-spectrum-gradient: linear-gradient(45deg,
        #ff007a,
        #ff8c00,
        #ffee00,
        #48ff00,
        #00ffd5,
        #00a0ff,
        #7a00ff,
        #ff00c8,
        #ff007a
    );
    --btn-glow-prism-gradient: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );
    --btn-outlined-base-gradient: linear-gradient(45deg,
        var(--color-primary),
        var(--color-info),
        var(--color-success),
        var(--color-warning),
        var(--color-secondary),
        var(--color-error),
        var(--color-primary)
    );

    --gradient-info-transparent: rgba(111, 182, 255, 0);

    --pastel-primary: var(--color-primary);
    --pastel-secondary: var(--color-secondary);
    --pastel-success: var(--color-success);
    --pastel-warning: var(--color-warning);
    --pastel-error: var(--color-error);
    --pastel-info: var(--color-info);
    --pastel-dark: var(--color-dark);
    --pastel-light: var(--color-light);
    --pastel-text: var(--color-text);
    --pastel-border: var(--color-border);
    --pastel-shadow: var(--color-shadow-tint);
    --pastel-hover: var(--color-hover);
    --pastel-background: var(--color-background);
    --pastel-disabled: var(--color-disabled);
    --pastel-muted: var(--color-muted);
    --pastel-red: var(--color-accent-red);
    --pastel-purple: var(--color-accent-purple);
    --pastel-teal: var(--color-accent-teal);
    --pastel-coral: var(--color-accent-coral);
    --pastel-sage: var(--color-accent-sage);
    --pastel-rose: var(--color-accent-rose);
    --pastel-cream: var(--color-accent-cream);
    --pastel-aqua: var(--color-accent-aqua);
}

/* Navigation link styling */
.active-nav-link {
    color: var(--color-primary) !important;
    background-color: var(--color-shadow-tint) !important;
    border-right: 4px solid var(--color-primary) !important;
}

    .active-nav-link span, .active-nav-link ::deep .mud-icon {
        color: var(--color-primary) !important;
    }

    /*Fix date picker border radius for mud*/
    .mud-picker.mud-paper{
        border-radius:5px;
    }



/* Fixed Pagination Styling */
.fixed-pagination .mud-pagination-item {
    border-radius: 9999px !important;
}
.fixed-pagination .mud-pagination-item.mud-pagination-item-selected {
    color: var(--color-text-strong) !important;
}
.fixed-pagination .mud-pagination-item.mud-pagination-item-selected button {
    background-color: var(--color-primary) !important;
    border-radius: 9999px !important;
}
.fixed-pagination .mud-pagination-item:hover:not(.mud-pagination-item-selected) button {
    background-color: var(--color-light) !important;
}

/* ── Responsive Sidebar ─────────────────────────────────────────── */

/* Auto-collapse on screens narrower than lg (1024px) regardless of Blazor state */
@media (max-width: 1023px) {
    #main-sidebar {
        width: 5rem !important;
    }

    #main-sidebar .sidebar-label,
    #main-sidebar .sidebar-section {
        display: none !important;
    }
}

/* Collapsed state toggled by sidebar-static.js on static (Account) pages */
#main-sidebar.sidebar-collapsed {
    width: 5rem !important;
}

#main-sidebar.sidebar-collapsed .sidebar-label,
#main-sidebar.sidebar-collapsed .sidebar-section {
    display: none !important;
}

.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes thinking-animation-light {
    0%, 100% { color: var(--color-dark); }
    50% { color: var(--color-text); }
}
.thinking {
    font-style: italic;
    animation: var(--thinking-animation) 2s infinite;
}
.hover\:scale-105:hover {
    transform: scale(1.05);
}
.bg-pastel-primary { background-color: var(--color-primary); }
.bg-pastel-secondary { background-color: var(--color-secondary); }
.bg-pastel-info { background-color: var(--color-info); }
.bg-pastel-success { background-color: var(--color-success); }
.bg-pastel-warning { background-color: var(--color-warning); }
.bg-pastel-error { background-color: var(--color-error); }
.bg-pastel-light { background-color: var(--color-light); }
.bg-pastel-dark { background-color: var(--color-dark); }
.bg-pastel-background { background-color: var(--color-background); }
.text-pastel-primary { color: var(--color-primary); }
.text-pastel-secondary { color: var(--color-secondary); }
.text-pastel-info { color: var(--color-info); }
.text-pastel-success { color: var(--color-success); }
.text-pastel-warning { color: var(--color-warning); }
.text-pastel-error { color: var(--color-error); }
.text-pastel-text { color: var(--color-text); }
.text-pastel-dark { color: var(--color-dark); }
.text-pastel-muted { color: var(--color-muted); }
.border-pastel-primary { border-color: var(--color-primary); }
.border-pastel-border { border-color: var(--color-border); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--gradient-stops)); }
.from-pastel-info {
    --tw-gradient-from: var(--color-info);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, var(--gradient-info-transparent));
}
.to-pastel-primary { --tw-gradient-to: var(--color-primary); }
.focus\:ring-pastel-primary:focus { --tw-ring-color: var(--color-primary); }

/* Glow Button Stylings and Animations */
@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
@keyframes slowGlowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.pastel-shadow {
    box-shadow: var(--shadow-elevation-glow);
}

.pastel-border {
    border: 1px solid var(--color-border);
}

/* Basic button styling */

.btn-container {
    display: flex;
    gap: 12px;
    margin: 16px 0;
}

/* Container alignment variants */
.btn-container-center {
    justify-content: center;
}

.btn-container-end {
    justify-content: flex-end;
}

.btn-container-between {
    justify-content: space-between;
}

/* Container for single buttons with consistent spacing */
.btn-wrapper {
    margin: 16px 0;
}

/* Container in form contexts - typically at the bottom of forms */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.btn {
    position: relative;
    z-index: 0;
    overflow: visible;
    border-radius: 24px;
    padding: 12px 24px; /* Slightly increased padding for better touch targets */
    border: none;
    color: var(--text-on-primary);
    font-weight: 600;
    font-size: 0.95rem; /* Slightly more refined text size */
    letter-spacing: 0.02rem; /* Subtle letter spacing for modern feel */
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Better centering */
    gap: 10px; /* Increased gap between icon and text */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth, slight bounce transition */
    box-shadow: var(--shadow-btn-default);
    min-height: 46px; /* Consistent height */
    text-decoration: none; /* Remove underlines if used as links */
    min-width: 120px; /* Minimum width for consistency */
}

    .btn:hover {
        transform: none; /* Hover transform intentionally neutral to rely on glow */
        /*transform: translateY(-2px) scale(1.01);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);*/ /* Enhanced shadow on hover */
    }

    .btn:active {
        transform: translateY(1px); /* Subtle press effect */
        box-shadow: var(--shadow-btn-active);
    }

    /* Style for material icons within buttons */
    .btn .material-icons {
        font-size: 1.15rem; /* Slightly larger icons */
        margin-top: -2px; /* Fine-tune vertical alignment */
    }

    .btn:disabled,
    .btn[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }

/* Small variant */
.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
    min-height: 36px;
    min-width: 80px;
}

/* Large variant */
.btn-lg {
    padding: 14px 28px;
    font-size: 1.05rem;
    min-height: 54px;
    min-width: 140px;
}

/* Style for material icons within buttons - UPDATED SIZE */
.btn .material-icons {
    font-size: 1.3rem; /* Increased from 1.15rem */
    margin-top: -1px; /* Adjusted for better vertical alignment */
}

/* Size variants for icons to maintain proportions */
.btn-sm .material-icons {
    font-size: 1.1rem; /* Smaller icon for small buttons */
}

.btn-lg .material-icons {
    font-size: 1.5rem; /* Larger icon for large buttons */
}

/* For MudIcon components within buttons */
.btn :deep(.mud-icon-root) {
    font-size: 1.3rem !important;
    margin-top: -1px;
}

.btn-sm :deep(.mud-icon-root) {
    font-size: 1.1rem !important;
}

.btn-lg :deep(.mud-icon-root) {
    font-size: 1.5rem !important;
}

/* PRIMARY BUTTON WITH GLOW */
.btn-glow-primary {
    background-color: var(--btn-surface-primary);
    position: relative;
    z-index: 0;
}

    .btn-glow-primary:before {
        content: '';
        background: var(--btn-glow-primary-gradient);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-glow-primary:hover:before {
        opacity: 1;
    }

    .btn-glow-primary:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-primary);
    }
    .btn-glow-primary:disabled,
    .btn-glow-primary[disabled] {
        background-color: var(--btn-disabled-surface);
        border-color: var(--color-disabled-border);
        color: var(--color-disabled-text);
        box-shadow: none;
    }
    
/* SECONDARY BUTTON WITH GLOW */
.btn-glow-secondary {
    background-color: var(--btn-surface-secondary);
    color: var(--text-on-secondary);
    position: relative;
    z-index: 0;
}

    .btn-glow-secondary:before {
        content: '';
        background: var(--btn-glow-secondary-gradient);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-glow-secondary:hover:before {
        opacity: 1;
    }

    .btn-glow-secondary:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-secondary);
    }

/* SUCCESS BUTTON WITH GLOW */
.btn-glow-success {
    background-color: var(--btn-surface-success);
    color: var(--text-on-success);
    position: relative;
    z-index: 0;
}

    .btn-glow-success:before {
        content: '';
        background: var(--btn-glow-success-gradient);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-glow-success:hover:before {
        opacity: 1;
    }

    .btn-glow-success:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-success);
    }

/* RAINBOW BUTTON WITH GLOW */
.btn-glow-rainbow {
    background-color: var(--btn-surface-spectrum);
    color: var(--text-on-spectrum);
    position: relative;
    z-index: 0;
}

    .btn-glow-rainbow:before {
        content: '';
        background: var(--btn-glow-spectrum-gradient);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-glow-rainbow:hover:before {
        opacity: 1;
    }

    .btn-glow-rainbow:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-spectrum);
    }

/* PASTEL RAINBOW BUTTON WITH GLOW */
.btn-glow-pastel-rainbow {
    background-color: var(--btn-surface-prism);
    color: var(--text-on-prism);
    position: relative;
    z-index: 0;
}

    .btn-glow-pastel-rainbow:before {
        content: '';
        background: var(--btn-glow-prism-gradient);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-glow-pastel-rainbow:hover:before {
        opacity: 1;
    }

    .btn-glow-pastel-rainbow:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-prism);
    }


/* OUTLINED BUTTON BASE */
.btn-outlined {
    background-color: transparent;
    border: 2px solid;
    color: inherit;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

    /* Base glow effect - spectrum glow */
    .btn-outlined:before {
        content: '';
        background: var(--btn-outlined-base-gradient);
        position: absolute;
        top: -4px;
        left: -4px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: inherit;
    }

    .btn-outlined:hover:before {
        opacity: 1;
    }

    .btn-outlined:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: inherit;
        background-color: var(--btn-surface-prism);
    }

    /* Disabled state - no glow, greyed out */
    .btn-outlined:disabled,
    .btn-outlined.disable, .btn.disabled{
        border-color: var(--color-disabled-border) !important;
        color: var(--color-disabled-text) !important;
        cursor: not-allowed !important;
        opacity: 0.6;
    }

        .btn-outlined:disabled:before,
        .btn-outlined.disabled:before,
        .btn-outlined:disabled:hover:before,
        .btn-outlined.disabled:hover:before {
            opacity: 0 !important; /* No glow when disabled */
        }

/* OUTLINED PRIMARY */
.btn-outlined-primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

    .btn-outlined-primary:hover {
        color: var(--color-primary);
        border-color: var(--hover-primary);
    }

/* OUTLINED SECONDARY */
.btn-outlined-secondary {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

    .btn-outlined-secondary:hover {
        color: var(--color-secondary);
        border-color: var(--hover-secondary);
    }

/* OUTLINED SUCCESS */
.btn-outlined-success {
    border-color: var(--color-success);
    color: var(--color-success);
}

    .btn-outlined-success:hover {
        color: var(--text-on-success);
        border-color: var(--hover-success); 
    }


/* OUTLINED failure */
.btn-outlined-failure {
    border-color: var(--color-error);
    color: var(--color-error);
}

    .btn-outlined-failure:hover {
        color: var(--text-on-error);
        border-color: var(--hover-error);
    }



/* OUTLINED warning */
.btn-outlined-warning {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

    .btn-outlined-warning:hover {
        color: var(--text-on-warning);
        border-color: var(--hover-warning);
    }



/* OUTLINED failure */
.btn-outlined-info {
    border-color: var(--color-info);
    color: var(--color-info);
}

    .btn-outlined-info:hover {
        color: var(--color-text);
        border-color: var(--hover-info);
    }


/* OUTLINED dark */
.btn-outlined-dark {
    border-color: var(--color-dark);
    color: var(--color-dark);
}

    .btn-outlined-dark:hover {
        color: var(--color-text);
        border-color: var(--hover-dark);
    }



/* OUTLINED light */
.btn-outlined-light {
    border-color: var(--color-light);
    color: var(--color-light);
}

    .btn-outlined-light:hover {
        color: var(--color-dark);
        border-color: var(--hover-light);
    }


/* OUTLINED RED */
.btn-outlined-red {
    border-color: var(--color-accent-red);
    color: var(--color-accent-red);
}

    .btn-outlined-red:hover {
        color: var(--text-on-error);
        border-color: var(--hover-red);
    }

/* OUTLINED PURPLE */
.btn-outlined-purple {
    border-color: var(--color-accent-purple);
    color: var(--color-accent-purple);
}

    .btn-outlined-purple:hover {
        color: var(--color-text);
        border-color: var(--hover-purple);
    }

/* OUTLINED TEAL */
.btn-outlined-teal {
    border-color: var(--color-accent-teal);
    color: var(--color-accent-teal);
}

    .btn-outlined-teal:hover {
        color: var(--color-text);
        border-color: var(--hover-teal);
    }

/* OUTLINED CORAL */
.btn-outlined-coral {
    border-color: var(--color-accent-coral);
    color: var(--color-accent-coral);
}

    .btn-outlined-coral:hover {
        color: var(--color-text);
        border-color: var(--hover-coral);
    }

/* OUTLINED SAGE */
.btn-outlined-sage {
    border-color: var(--color-accent-sage);
    color: var(--color-accent-sage);
}

    .btn-outlined-sage:hover {
        color: var(--color-text);
        border-color: var(--hover-sage);
    }

/* OUTLINED ROSE */
.btn-outlined-rose {
    border-color: var(--color-accent-rose);
    color: var(--color-accent-rose);
}

    .btn-outlined-rose:hover {
        color: var(--color-text);
        border-color: var(--hover-rose);
    }

/* OUTLINED CREAM */
.btn-outlined-cream {
    border-color: var(--color-accent-cream);
    color: var(--color-accent-cream);
}

    .btn-outlined-cream:hover {
        color: var(--color-dark);
        border-color: var(--hover-cream);
    }

/* OUTLINED AQUA */
.btn-outlined-aqua {
    border-color: var(--color-accent-aqua);
    color: var(--color-accent-aqua);
}

    .btn-outlined-aqua:hover {
        color: var(--color-text);
        border-color: var(--hover-aqua);
    }

/* Glow wrapper for elevated form panels */
.panel-glow {
    position: relative;
    z-index: 0;
    --panel-glow-gradient-current: var(--panel-glow-gradient, var(--panel-glow-gradient-rainbow));
}

.panel-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    z-index: -1;
}

.panel-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: var(--panel-glow-gradient-current);
    background-size: 400%;
    filter: blur(10px);
    opacity: var(--panel-glow-opacity);
    z-index: -2;
    pointer-events: none;
    transition: opacity 0.3s ease;
    animation: glowing 20s linear infinite;
}

.panel-glow:hover::before {
    opacity: calc(var(--panel-glow-opacity) + 0.1);
}

.panel-glow--rainbow { --panel-glow-gradient: var(--panel-glow-gradient-rainbow); }
.panel-glow--primary { --panel-glow-gradient: var(--panel-glow-gradient-primary); }
.panel-glow--secondary { --panel-glow-gradient: var(--panel-glow-gradient-secondary); }
.panel-glow--success { --panel-glow-gradient: var(--panel-glow-gradient-success); }
.panel-glow--warning { --panel-glow-gradient: var(--panel-glow-gradient-warning); }
.panel-glow--info { --panel-glow-gradient: var(--panel-glow-gradient-info); }
.panel-glow--error { --panel-glow-gradient: var(--panel-glow-gradient-error); }


/* Amplitude.js Playlist Player Styles */
.playlist-player {
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}

.amplitude-song-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    border-radius: 2px;
}

    .amplitude-song-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        background: white;
        cursor: pointer;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .amplitude-song-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        background: white;
        cursor: pointer;
        border-radius: 50%;
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

.amplitude-playing .amplitude-paused {
    display: inline-block;
}

.amplitude-playing .amplitude-playing {
    display: none;
}

.amplitude-paused .amplitude-paused {
    display: none;
}

.amplitude-paused .amplitude-playing {
    display: inline-block;
}

.amplitude-song-container.bg-pastel-light {
    background-color: var(--color-surface-elevated);
}

.playlist-controls .playlist-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    transition: background-color 0.25s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.playlist-controls .playlist-control-btn:hover {
    transform: translateY(-1px);
}

.playlist-controls .amplitude-prev,
.playlist-controls .amplitude-next {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.playlist-controls .amplitude-prev:hover,
.playlist-controls .amplitude-next:hover {
    background: rgba(255, 255, 255, 0.25);
}

.playlist-controls .amplitude-play,
.playlist-controls .amplitude-pause,
.playlist-controls .playlist-control-btn:not(.amplitude-prev):not(.amplitude-next):not(.amplitude-play):not(.amplitude-pause) {
    background: #ffffff;
}

.playlist-player.is-playing .amplitude-pause {
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.25);
}

.playlist-player.is-buffering .playlist-controls .playlist-control-btn {
    opacity: 0.7;
}

.playlist-buffering-indicator {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.playlist-buffering-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    animation: playlist-spin 0.8s linear infinite;
}

.playlist-buffering-label {
    letter-spacing: 0.02em;
    font-weight: 500;
}

@keyframes playlist-spin {
    to {
        transform: rotate(360deg);
    }
}

.playlist-song-item {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.playlist-song-item:hover {
    background: rgba(58, 107, 255, 0.08);
}

.playlist-song-item.amplitude-active-song-container {
    background: rgba(58, 107, 255, 0.12);
    border-color: var(--color-primary, #3a6bff);
}

.playlist-player.is-playing .playlist-song-item.amplitude-active-song-container .playlist-eq-indicator {
    display: inline-block !important;
    animation: playlist-eq-pulse 1s ease-in-out infinite;
}

@keyframes playlist-eq-pulse {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-2px);
        opacity: 0.6;
    }
}

/* ── AI Chat markdown prose ─────────────────────────────────────────────────
   Tailwind's preflight resets all browser defaults (no bullets, no margins).
   These rules restore the expected look for HTML emitted by marked.js inside
   the chat bubbles (both streaming div and AiChatMessageBubble).
   ────────────────────────────────────────────────────────────────────────── */
.ai-prose p {
    margin-bottom: 0.5em;
}
.ai-prose p:last-child {
    margin-bottom: 0;
}
.ai-prose ul {
    list-style-type: disc;
    padding-left: 1.4em;
    margin-bottom: 0.5em;
}
.ai-prose ol {
    list-style-type: decimal;
    padding-left: 1.4em;
    margin-bottom: 0.5em;
}
.ai-prose li {
    margin-bottom: 0.2em;
}
.ai-prose strong, .ai-prose b {
    font-weight: 700;
}
.ai-prose em, .ai-prose i {
    font-style: italic;
}
.ai-prose h1, .ai-prose h2, .ai-prose h3,
.ai-prose h4, .ai-prose h5, .ai-prose h6 {
    font-weight: 700;
    margin-bottom: 0.35em;
    margin-top: 0.75em;
    line-height: 1.3;
}
.ai-prose h1 { font-size: 1.25em; }
.ai-prose h2 { font-size: 1.15em; }
.ai-prose h3 { font-size: 1.05em; }
.ai-prose code {
    background: #f3f0ff;
    color: #5b21b6;
    border-radius: 0.25em;
    padding: 0.1em 0.35em;
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ai-prose pre {
    background: #1e1b2e;
    color: #e2e8f0;
    border-radius: 0.5em;
    padding: 0.85em 1em;
    overflow-x: auto;
    margin-bottom: 0.6em;
    font-size: 0.82em;
}
.ai-prose pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}
.ai-prose blockquote {
    border-left: 3px solid #c4b5fd;
    padding-left: 0.75em;
    color: #6b7280;
    font-style: italic;
    margin-bottom: 0.5em;
}
.ai-prose a {
    color: #7c3aed;
    text-decoration: underline;
}
.ai-prose hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0.75em 0;
}
.ai-prose table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0.6em;
    font-size: 0.875em;
}
.ai-prose th, .ai-prose td {
    border: 1px solid #e5e7eb;
    padding: 0.35em 0.6em;
    text-align: left;
}
.ai-prose th {
    background: #f5f3ff;
    font-weight: 600;
}