/* ========================================
   EWU Course Schedule System - Main Styles
   Version: 2.5 - Modern High-Fidelity UI System
   ======================================== */

/* ===== GLOBAL STYLES & RESET ===== */
*, *::before, *::after {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:root {
    --brand-primary: #D86C5A;
    --brand-primary-hover: #c45745;
    --brand-primary-glow: rgba(216, 108, 90, 0.4);
    --brand-blue: #5a8fd8;
    --brand-blue-hover: #487ac2;
    --brand-blue-glow: rgba(90, 143, 216, 0.35);
    --brand-cyan: #06b6d4;
    --brand-emerald: #10b981;
    --brand-amber: #f59e0b;
    --brand-rose: #ef4444;
    
    --bg-dark-950: #050508;
    --bg-dark-900: #0a0a0f;
    --bg-dark-850: #0e0e14;
    --bg-dark-800: #12121a;
    --bg-card: rgba(18, 18, 26, 0.75);
    --border-glass: rgba(255, 255, 255, 0.08);
    --border-blue: rgba(90, 143, 216, 0.2);
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(90, 143, 216, 0.3) rgba(10, 10, 15, 0.8);
}

body {
    background: linear-gradient(135deg, #050508 0%, #0a0a0f 25%, #0e0e14 50%, #0a0a0f 75%, #050508 100%);
    background-attachment: fixed;
    min-height: 100vh;
    color: #f3f4f6;
    /* `clip` avoids creating a scroll container (which can break sticky
       headers), while the hidden fallback keeps older browsers safe. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* Modern Sleek Scrollbars */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: rgba(10, 10, 15, 0.8);
}

::-webkit-scrollbar-thumb {
    background: rgba(90, 143, 216, 0.35);
    border-radius: 9999px;
    border: 2px solid rgba(10, 10, 15, 0.8);
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(90, 143, 216, 0.65);
}

/* Selection */
::selection {
    background: rgba(216, 108, 90, 0.35);
    color: #ffffff;
}

/* Focus Visible */
:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

/* ===== GLASS MORPHISM SURFACES ===== */
.glass-card {
    background: linear-gradient(145deg, rgba(22, 22, 34, 0.75) 0%, rgba(12, 12, 20, 0.88) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 36px 0 rgba(0, 0, 0, 0.45), 
                0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    border-radius: 1rem;
    transform: translateZ(0);
}

.glass-premium {
    background: linear-gradient(135deg, rgba(18, 18, 26, 0.85) 0%, rgba(10, 10, 15, 0.92) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
        0 12px 36px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.glass-subtle {
    background: rgba(18, 18, 26, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* ===== INPUTS & CONTROLS ===== */
.glass-input,
.search-input-premium {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(90, 143, 216, 0.25);
    border-radius: 14px;
    padding: 14px 20px;
    font-size: 14px;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    width: 100%;
}

.search-input-premium {
    padding: 15px 20px 15px 50px;
}

.glass-input:focus,
.search-input-premium:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(90, 143, 216, 0.6);
    box-shadow: 0 0 0 4px rgba(90, 143, 216, 0.12), 0 4px 20px rgba(90, 143, 216, 0.15);
}

.glass-input::placeholder,
.search-input-premium::placeholder {
    color: rgba(156, 163, 175, 0.55);
}

/* Custom Select Dropdown */
select.glass-input,
select.glass-select,
#sortSelect {
    background-color: rgba(20, 20, 30, 0.75);
    border: 1px solid rgba(90, 143, 216, 0.25);
    border-radius: 14px;
    color: #ffffff;
    padding: 12px 38px 12px 16px;
    font-size: 14px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235a8fd8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    transition: all 0.3s ease;
}

select.glass-input:focus,
select.glass-select:focus,
#sortSelect:focus {
    border-color: rgba(90, 143, 216, 0.6);
    box-shadow: 0 0 0 4px rgba(90, 143, 216, 0.12);
    outline: none;
}

select.glass-input option,
select.glass-select option,
#sortSelect option {
    background: #12121a;
    color: #f3f4f6;
    padding: 10px 14px;
}

.glass-input-select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(90, 143, 216, 0.25);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.glass-input-select:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(90, 143, 216, 0.5);
}

/* Modern Input */
.input-modern {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(216, 108, 90, 0.25);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: white;
    transition: all 0.3s ease;
    outline: none;
}

.input-modern:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: #D86C5A;
    box-shadow: 0 0 20px rgba(216, 108, 90, 0.25);
}

/* ===== BUTTON SYSTEM ===== */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    font-weight: 600;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-weight: 600;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Coral Brand Buttons */
.btn-get-started,
.btn-login,
.btn-glossy {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    overflow: hidden;
    font-weight: 600;
    border-radius: 14px;
    background: linear-gradient(135deg, #D86C5A 0%, #c5584a 50%, #D86C5A 100%);
    background-size: 200% auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 25px rgba(216, 108, 90, 0.45);
    text-decoration: none;
}

.btn-get-started:hover,
.btn-login:hover,
.btn-glossy:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 35px rgba(216, 108, 90, 0.65);
}

.btn-get-started span,
.btn-login-inner,
.btn-glossy-inner {
    position: relative;
    padding: 0.875rem 2.25rem;
    transition: all 0.3s ease;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.btn-get-started:hover span,
.btn-login:hover .btn-login-inner,
.btn-glossy:hover .btn-glossy-inner {
    background: rgba(216, 108, 90, 0.2);
}

.btn-learn-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2.25rem;
    font-weight: 600;
    border-radius: 14px;
    background: rgba(216, 108, 90, 0.1);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(216, 108, 90, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
    color: #D86C5A;
    text-decoration: none;
}

.btn-learn-more:hover {
    transform: translateY(-2px);
    background: rgba(216, 108, 90, 0.2);
    border-color: #D86C5A;
    box-shadow: 0 8px 30px rgba(216, 108, 90, 0.4);
    color: white;
}

/* Dashboard Action Buttons */
.btn-premium-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2px;
    background: linear-gradient(135deg, #5a8fd8 0%, #3b82f6 50%, #06b6d4 100%);
    background-size: 200% auto;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(90, 143, 216, 0.35);
    overflow: hidden;
    text-decoration: none;
}

.btn-premium-primary:hover {
    box-shadow: 0 8px 30px rgba(90, 143, 216, 0.55);
    transform: translateY(-2px);
}

.btn-premium-primary-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(10, 10, 18, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    color: #ffffff;
    font-size: 14px;
    transition: background 0.3s ease;
}

.btn-premium-primary:hover .btn-premium-primary-inner {
    background: rgba(90, 143, 216, 0.15);
}

.btn-premium-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(239, 68, 68, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 14px;
    color: #ef4444;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-premium-secondary:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.25);
    transform: translateY(-2px);
}

/* ===== TOGGLES & CARDS ===== */
.toggle-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(90, 143, 216, 0.2);
    border-radius: 14px;
    transition: all 0.3s ease;
    min-height: 48px;
}

.toggle-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(90, 143, 216, 0.4);
}

.toggle-premium {
    position: relative;
    width: 48px;
    height: 26px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 13px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.toggle-premium.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

.toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.toggle-premium.active .toggle-knob {
    transform: translateX(22px);
}

.result-counter-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(90, 143, 216, 0.08);
    border: 1px solid rgba(90, 143, 216, 0.22);
    border-radius: 14px;
    font-size: 14px;
    color: rgba(90, 143, 216, 0.95);
    min-height: 48px;
}

/* ===== TABLE & BADGES ===== */
.table-wrapper {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(90, 143, 216, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    background: rgba(10, 10, 18, 0.7);
}

.table-scroll-container {
    max-height: calc(100vh - 380px);
    min-height: 350px;
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
    scroll-behavior: smooth;
}

.table-premium {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0;
}

.table-premium thead {
    position: sticky;
    top: 0;
    z-index: 20;
}

.table-premium thead tr {
    background: #0d0d17;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.table-premium th {
    padding: 16px 14px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5a8fd8;
    border-bottom: 2px solid rgba(90, 143, 216, 0.35);
    background: #0d0d17;
    white-space: nowrap;
}

.table-premium tbody tr {
    transition: background 0.15s ease, transform 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.table-premium tbody tr:hover {
    background: linear-gradient(90deg, rgba(90, 143, 216, 0.1) 0%, rgba(90, 143, 216, 0.02) 100%);
    transform: translateX(2px);
}

.table-premium td {
    padding: 14px 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    vertical-align: middle;
}

/* Course Badges */
.badge-course {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: linear-gradient(135deg, rgba(90, 143, 216, 0.2) 0%, rgba(90, 143, 216, 0.1) 100%);
    border: 1px solid rgba(90, 143, 216, 0.35);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    color: #5a8fd8;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge-section {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 11px;
    color: #06b6d4;
    min-width: 32px;
}

.badge-room {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 11px;
    color: #10b981;
    white-space: normal;
    word-break: break-word;
}

.day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #c084fc;
    white-space: nowrap;
}

.time-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #38bdf8;
    white-space: normal;
    word-break: break-word;
    display: inline-block;
}

.faculty-name {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    display: block;
    white-space: normal;
    word-break: break-word;
}

/* Availability Badges & Bars */
.status-available { color: #34d399; font-weight: 700; }
.status-limited { color: #fbbf24; font-weight: 700; }
.status-full { color: #f87171; font-weight: 700; }

.badge-seat-open {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.badge-seat-low {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.badge-seat-full {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.capacity-bar {
    width: 48px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.capacity-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ===== DROPDOWNS & SEARCH SUGGESTIONS ===== */
.filter-dropdown-premium,
.search-suggestions-premium,
.search-suggestions,
.dropdown-menu {
    background: linear-gradient(180deg, rgba(18, 18, 26, 0.98) 0%, rgba(10, 10, 16, 0.98) 100%);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(90, 143, 216, 0.22);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(90, 143, 216, 0.1) inset;
    overflow: hidden;
    z-index: 100;
}

.filter-option,
.dropdown-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-option:hover,
.dropdown-option:hover {
    background: linear-gradient(90deg, rgba(90, 143, 216, 0.18) 0%, rgba(90, 143, 216, 0.06) 100%);
    color: #ffffff;
    padding-left: 20px;
}

.filter-option.active {
    background: rgba(90, 143, 216, 0.2);
    border-left: 3px solid #5a8fd8;
    color: #ffffff;
}

.suggestion-item-premium,
.suggestion-item {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.suggestion-item-premium:hover,
.suggestion-item-premium.active,
.suggestion-item:hover {
    background: linear-gradient(90deg, rgba(90, 143, 216, 0.18) 0%, rgba(90, 143, 216, 0.08) 100%);
    border-left: 3px solid rgba(90, 143, 216, 0.85);
    padding-left: 15px;
}

/* Keyboard hint */
.kbd-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 6px;
}

/* ===== FIXED FLOATING REFRESH & SETTINGS ===== */
.refresh-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.45);
    z-index: 1000;
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.refresh-btn:hover {
    transform: scale(1.12) rotate(90deg);
    box-shadow: 0 8px 35px rgba(16, 185, 129, 0.65);
}

.refresh-btn.refreshing {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.refresh-btn.refreshing .refresh-icon {
    animation: spin 1s linear infinite;
}

#auto-refresh-settings-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: subtlePulse 3s ease-in-out infinite;
}

#auto-refresh-settings-btn:hover {
    transform: scale(1.1) rotate(90deg);
}

@keyframes subtlePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(90, 143, 216, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(90, 143, 216, 0); }
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-notification {
    position: fixed;
    top: 2rem;
    right: 2rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 14px;
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 9999;
    opacity: 0;
    transform: translateX(400px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.toast-notification.hide {
    opacity: 0;
    transform: translateX(400px) scale(0.95);
}

/* ===== RETRY WIDGET STYLES ===== */
.retry-widget {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    width: 320px !important;
    background: rgba(18, 18, 26, 0.95) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 2px solid rgba(216, 108, 90, 0.5) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8) !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    transform: translateX(400px) scale(0.9) !important;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.retry-widget.show {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
}

.retry-widget-content { padding: 1.25rem !important; }
.retry-widget-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
}

.status-indicator {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.status-icon.status-connecting { color: #D86C5A !important; }
.status-icon.status-timeout { color: #f59e0b !important; }
.status-icon.status-success { color: #10b981 !important; }

.status-text {
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: white !important;
}

.retry-widget-actions { display: flex !important; gap: 0.5rem !important; }

.widget-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(216, 108, 90, 0.3) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.widget-btn:hover {
    background: rgba(216, 108, 90, 0.25) !important;
    border-color: rgba(216, 108, 90, 0.7) !important;
    transform: scale(1.08) !important;
}

.retry-stat {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem 1rem !important;
    background: rgba(216, 108, 90, 0.1) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(216, 108, 90, 0.25) !important;
    margin-bottom: 0.5rem !important;
}

.retry-stat i { color: #D86C5A !important; }
.stat-label { color: #d1d5db !important; font-size: 0.85rem !important; font-weight: 500 !important; }
.stat-value { margin-left: auto !important; color: white !important; font-weight: 700 !important; font-size: 0.9rem !important; }

.retry-widget.minimized {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    overflow: hidden;
}

.retry-widget.minimized .retry-widget-content { display: none !important; }

.retry-widget-minimized {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.retry-widget.minimized .retry-widget-minimized { display: flex !important; }

.mini-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #D86C5A;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== ALERT BOXES ===== */
.alert-box {
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.alert-error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.alert-success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86efac;
}

.alert-info {
    background: rgba(216, 108, 90, 0.12);
    border: 1px solid rgba(216, 108, 90, 0.35);
    color: #f87171;
}

/* ===== ANIMATIONS ===== */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.05); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.fade-in-up { animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

.loading-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.loading-dot {
    width: 8px;
    height: 8px;
    background: #5a8fd8;
    border-radius: 50%;
    animation: loadingBounce 1.4s ease-in-out infinite;
}

.loading-dot:nth-child(1) { animation-delay: 0s; }
.loading-dot:nth-child(2) { animation-delay: 0.16s; }
.loading-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes loadingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ===== APP HEADER =====
   The top navigation must stay pinned to the viewport on every page except the
   index hero. Positioning is declared here (shared by all pages) so headers
   remain sticky even if the Tailwind CDN is unavailable or blocked. */
.nav-glass,
.fp-nav {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Some pages wrap the nav in a <header>. Without this, the sticky nav can only
   travel within the header's own (single-row) box and scrolls away. Making the
   top-level header sticky keeps the whole bar pinned to the viewport. */
body > header {
    position: sticky;
    top: 0;
    z-index: 50;
}

.fp-nav {
    background: rgba(8, 8, 12, 0.82);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* advise.html uses the premium glass nav */
nav.glass-premium {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Solid fallback when backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-glass,
    .fp-nav,
    nav.glass-premium { background: rgba(8, 8, 12, 0.97); }
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */
@media (max-width: 1024px) {
    .table-scroll-container { max-height: calc(100vh - 350px); }
}

@media (max-width: 768px) {
    .glass-card,
    .glass-premium {
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 1.25rem !important;
    }
    
    .refresh-btn {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 48px;
        height: 48px;
    }
    
    #auto-refresh-settings-container {
        bottom: 5rem;
        right: 1.25rem;
    }
    
    .toast-notification {
        top: 1rem;
        right: 1rem;
        left: 1rem;
    }
    
    .table-premium th,
    .table-premium td {
        padding: 10px 8px;
        font-size: 11px;
    }
}

@media (max-width: 640px) {
    .btn-get-started,
    .btn-learn-more,
    .btn-login {
        width: 100%;
    }

    /* Header: allow controls to wrap instead of being clipped on phones */
    .fp-nav > div,
    .nav-glass > div,
    nav.glass-premium > div {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .fp-nav .max-w-7xl > div,
    .nav-glass .max-w-7xl > div,
    nav.glass-premium .max-w-7xl > div {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .fp-nav .max-w-7xl > div > *,
    .nav-glass .max-w-7xl > div > * {
        min-width: 0;
    }

    .fp-nav button,
    .nav-glass button,
    nav.glass-premium button {
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    /* Fixed-width retry widget must never exceed the viewport */
    .retry-widget {
        width: auto !important;
        left: 1rem !important;
        right: 1rem !important;
    }

    /* Hero CTAs sized with inline min-width can overflow very narrow screens */
    .btn-get-started,
    .btn-learn-more {
        min-width: 0 !important;
    }
}

/* Print */
@media print {
    .refresh-btn,
    .toast-notification,
    .retry-widget,
    nav,
    .fp-nav,
    #backToDashBtn,
    #backToDashDiv,
    .no-print,
    footer,
    #auto-refresh-settings-container,
    .btn-premium-primary,
    .btn-premium-secondary {
        display: none !important;
    }
    
    body { background: #ffffff !important; color: #111827 !important; }
    .glass-card, .glass-premium { background: transparent !important; border: 1px solid #d1d5db !important; box-shadow: none !important; color: #111827 !important; }
}