/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette */
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --secondary: #8b5cf6;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    
    /* Neutrals */
    --bg-primary: #0a0a0f;
    --bg-secondary: #13131a;
    --bg-tertiary: #1a1a24;
    --bg-card: rgba(26, 26, 36, 0.8);
    --bg-glass: rgba(255, 255, 255, 0.05);
    
    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-tertiary: #71717a;
    
    /* Borders */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}



/* Ensure native form controls render in dark scheme (Windows/Chrome fix) */
:root {
  color-scheme: dark;
}

select,
option {
  color: #e5e7eb;
  background-color: #0b1220;
}

select:focus {
  outline: none;
}

/* For select dropdown items on some browsers */
select option {
  background-color: #0b1220;
  color: #e5e7eb;
}
/* ===== GLOBAL RESET ===== */
html {
    scroll-behavior: auto !important;
}

html, body {
    scroll-behavior: auto !important;
    scroll-padding-top: 0 !important;
}

/* Force page to start at top */
html, body {
    scroll-behavior: smooth;
}

/* Loading overlay - Title Card cinematic loader */
/* ===== TITLE CARD LOADING OVERLAY ===== */
.loading-overlay:not(.active) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.loading-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, rgba(10,10,20,0.98) 0%, rgba(20,15,40,0.97) 50%, rgba(10,10,25,0.98) 100%);
    background-size: 200% 200%;
    animation: loaderBgPulse 8s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999 !important;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    overflow: hidden;
}

@keyframes loaderBgPulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Cinematic vignette */
.loading-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 55% at 50% 45%, transparent 35%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.75) 100%);
    pointer-events: none;
}

/* Film grain */
.loading-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.03;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Light sweeps */
.loading-overlay .sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.06), rgba(167,139,250,0.04), transparent);
    animation: loaderSweep 5s ease-in-out infinite;
    pointer-events: none;
}
.loading-overlay .sweep-slow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent);
    animation: loaderSweep 8s ease-in-out infinite 1s;
    pointer-events: none;
}
@keyframes loaderSweep {
    0% { left: -60%; }
    100% { left: 160%; }
}

/* Spotlight halo */
.loading-overlay .spotlight-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 520px);
    height: min(70vh, 380px);
    background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.06) 40%, transparent 70%);
    animation: loaderHaloPulse 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes loaderHaloPulse {
    0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

/* Title card content */
.loading-overlay .loading-content {
    position: relative;
    z-index: 1;
    text-align: center;
    animation: loaderContentBreath 6s ease-in-out infinite;
}
@keyframes loaderContentBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.008); }
}

.loading-overlay .title-card-welcome-wrap {
    margin-bottom: 2.5rem;
}
.loading-overlay .title-card-welcome {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #94a3b8;
    animation: loaderFadeInOut 3s ease-in-out infinite;
}
.loading-overlay .welcome-line {
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.6), transparent);
    margin: 0.75rem auto 0;
    animation: loaderLineGlow 2.5s ease-in-out infinite;
}
@keyframes loaderLineGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
@keyframes loaderFadeInOut {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

.loading-overlay .brand-wrap {
    position: relative;
    display: inline-block;
}
.loading-overlay .brand-big {
    position: relative;
    z-index: 1;
    font-size: clamp(2.75rem, 9vw, 4.25rem);
    font-weight: 900;
    letter-spacing: 0.28em;
    background: linear-gradient(135deg, #fff 0%, #c7d2fe 30%, #6366f1 50%, #a78bfa 70%, #fef3c7 85%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: loaderTitleShine 3.5s linear infinite;
    filter: drop-shadow(0 0 30px rgba(99,102,241,0.25));
}
.loading-overlay .brand-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 200%;
    background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(99,102,241,0.2) 0%, transparent 65%);
    animation: loaderBrandGlowPulse 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes loaderTitleShine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}
@keyframes loaderBrandGlowPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.loading-overlay .loading-phrase-wrap {
    margin-top: 2rem;
    overflow: hidden;
    display: inline-block;
    min-width: 22ch;
}
.loading-overlay .loading-phrase {
    font-size: clamp(0.7rem, 2.5vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #94a3b8;
    display: inline-block;
    white-space: nowrap;
    border-right: 2px solid var(--primary);
    padding-right: 0.15em;
    animation: loaderExpandPhrase 2.2s ease-out forwards, loaderBlink 0.8s step-end infinite;
    box-sizing: border-box;
}
@keyframes loaderExpandPhrase {
    0% { width: 0; opacity: 0.6; }
    25% { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 1; }
}
@keyframes loaderBlink {
    50% { border-color: transparent; }
}

.loading-overlay .progress-wrap {
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
    width: min(320px, 85vw);
    position: relative;
}
.loading-overlay .progress-wrap .progress-track {
    height: 4px;
    background: rgba(99,102,241,0.15);
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
}
.loading-overlay .progress-wrap .progress-fill,
.loading-overlay #progressFill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
    background-size: 200% 100%;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(99,102,241,0.5);
    transition: width 0.3s ease-out;
}
.loading-overlay .title-card-progress-text {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #94a3b8;
    letter-spacing: 0.1em;
}

/* Title card particles */
.loading-overlay .particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.loading-overlay .particles .particle {
    position: absolute;
    border-radius: 50%;
    animation: loaderFloat 8s ease-in-out infinite;
}
.loading-overlay .particles .particle:nth-child(1) { left: 12%; top: 18%; width: 3px; height: 3px; background: rgba(99,102,241,0.35); animation-delay: 0s; }
.loading-overlay .particles .particle:nth-child(2) { left: 88%; top: 25%; width: 4px; height: 4px; background: rgba(167,139,250,0.3); animation-delay: 1.2s; }
.loading-overlay .particles .particle:nth-child(3) { left: 50%; top: 82%; width: 2px; height: 2px; background: rgba(255,255,255,0.2); animation-delay: 2.5s; }
.loading-overlay .particles .particle:nth-child(4) { left: 22%; top: 68%; width: 3px; height: 3px; background: rgba(99,102,241,0.25); animation-delay: 0.6s; }
.loading-overlay .particles .particle:nth-child(5) { left: 78%; top: 55%; width: 3px; height: 3px; background: rgba(139,92,246,0.3); animation-delay: 1.8s; }
.loading-overlay .particles .particle:nth-child(6) { left: 5%; top: 45%; width: 2px; height: 2px; background: rgba(255,255,255,0.15); animation-delay: 3s; }
.loading-overlay .particles .particle:nth-child(7) { left: 95%; top: 72%; width: 3px; height: 3px; background: rgba(99,102,241,0.2); animation-delay: 0.3s; }
.loading-overlay .particles .particle:nth-child(8) { left: 35%; top: 12%; width: 2px; height: 2px; background: rgba(167,139,250,0.25); animation-delay: 2s; }
.loading-overlay .particles .particle:nth-child(9) { left: 65%; top: 88%; width: 4px; height: 4px; background: rgba(255,255,255,0.12); animation-delay: 1s; }
@keyframes loaderFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
    33% { transform: translate(8px, -12px) scale(1.15); opacity: 0.6; }
    66% { transform: translate(-5px, 8px) scale(0.95); opacity: 0.4; }
}

/* Cinematic Background Elements */
.cinematic-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Animated Stars */
.stars-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    border-radius: 50%;
    animation: twinkle var(--duration) ease-in-out infinite var(--delay);
}

.star:nth-child(1) { top: 20%; left: 10%; }
.star:nth-child(2) { top: 30%; left: 80%; }
.star:nth-child(3) { top: 60%; left: 20%; }
.star:nth-child(4) { top: 80%; left: 70%; }
.star:nth-child(5) { top: 15%; left: 60%; }
.star:nth-child(6) { top: 70%; left: 90%; }
.star:nth-child(7) { top: 40%; left: 40%; }
.star:nth-child(8) { top: 90%; left: 30%; }
.star:nth-child(9) { top: 25%; left: 75%; }
.star:nth-child(10) { top: 55%; left: 15%; }

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Floating Particles */
.particles-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: linear-gradient(45deg, rgba(99, 102, 241, 0.6), rgba(139, 92, 246, 0.6));
    border-radius: 50%;
    animation: float var(--duration) linear infinite var(--delay);
}

.particle:nth-child(1) { top: 10%; left: 5%; }
.particle:nth-child(2) { top: 20%; left: 85%; }
.particle:nth-child(3) { top: 70%; left: 15%; }
.particle:nth-child(4) { top: 80%; left: 75%; }
.particle:nth-child(5) { top: 30%; left: 50%; }
.particle:nth-child(6) { top: 60%; left: 25%; }

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

/* Energy Waves */
.energy-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
}

.wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    animation: ripple 3s ease-out infinite;
}

.wave-1 {
    width: 100px;
    height: 100px;
    animation-delay: 0s;
}

.wave-2 {
    width: 150px;
    height: 150px;
    animation-delay: 1s;
}

.wave-3 {
    width: 200px;
    height: 200px;
    animation-delay: 2s;
}

@keyframes ripple {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Loading Content Container */
.loading-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Scene Management */
.loading-scene {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.loading-scene.active {
    opacity: 1;
    visibility: visible;
}

/* Scene 1: Logo Entrance */
.logo-entrance {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: logoEntrance 2s ease-out;
}

.corsearch-logo-cinematic {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 15;
    opacity: 1 !important;
    visibility: visible !important;
}

.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.logo-icon-cinematic {
    position: relative;
    z-index: 2;
    color: #6366f1;
    animation: logoFloat 3s ease-in-out infinite;
}

.logo-text-cinematic {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
}

.letter-reveal {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px) rotateX(90deg);
    animation: letterReveal 0.6s ease-out forwards;
}

.letter-reveal:nth-child(1) { animation-delay: 0.1s; }
.letter-reveal:nth-child(2) { animation-delay: 0.2s; }
.letter-reveal:nth-child(3) { animation-delay: 0.3s; }
.letter-reveal:nth-child(4) { animation-delay: 0.4s; }
.letter-reveal:nth-child(5) { animation-delay: 0.5s; }
.letter-reveal:nth-child(6) { animation-delay: 0.6s; }
.letter-reveal:nth-child(7) { animation-delay: 0.7s; }
.letter-reveal:nth-child(8) { animation-delay: 0.8s; }
.letter-reveal:nth-child(9) { animation-delay: 0.9s; }

.tagline-cinematic {
    font-size: 1.2rem;
    color: #a1a1aa;
    margin-top: 1rem;
    opacity: 0;
    animation: fadeInUp 1s ease-out 1.5s forwards;
}

@keyframes logoEntrance {
    0% { transform: scale(0.5) rotateY(180deg); opacity: 0; }
    100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes letterReveal {
    0% { opacity: 0; transform: translateY(50px) rotateX(90deg); }
    100% { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

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

/* Scene 2: Piano Key Feature Activation */
.piano-key-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.central-logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    width: 300px;
    height: 300px;
}

.logo-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    animation: pulseRing 2s ease-in-out infinite;
}

.logo-pulse-ring.ring-2 {
    width: 250px;
    height: 250px;
    animation-delay: 0.5s;
    border-color: rgba(139, 92, 246, 0.3);
}

.logo-pulse-ring.ring-3 {
    width: 300px;
    height: 300px;
    animation-delay: 1s;
    border-color: rgba(16, 185, 129, 0.3);
}

.piano-key-features {
    position: relative;
    width: 500px;
    height: 500px;
}

.piano-key {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 110px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    animation: pianoKeyActivate 1s ease-out forwards;
    animation-delay: var(--delay);
    overflow: hidden;
    cursor: pointer;
    transform-origin: center;
}

/* Piano key positions - arranged in a perfect circle around the logo using CSS custom properties */
.piano-key { 
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-200px) rotate(calc(-1 * var(--angle))) scale(0.5);
    animation: pianoKeyActivate 0.8s ease-out forwards;
    animation-delay: var(--delay);
}

.key-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    opacity: 0;
    animation: keyGlow 2s ease-in-out infinite;
    animation-delay: var(--delay);
}

.key-icon {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
    position: relative;
    z-index: 2;
    color: #ffffff;
    transition: all 0.3s ease;
}

.key-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
}

.key-text {
    font-size: 0.7rem;
    color: #ffffff;
    text-align: center;
    position: relative;
    z-index: 2;
    font-weight: 500;
}

.scene-message {
    font-size: 1.1rem;
    color: #a1a1aa;
    text-align: center;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.5s forwards;
}

@keyframes pulseRing {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* Generic piano key animation using CSS custom properties */
@keyframes pianoKeyActivate {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.3);
        filter: brightness(0.5);
    }
    30% { 
        opacity: 0.8; 
        transform: translate(-50%, -50%) scale(1.2);
        filter: brightness(1.5);
    }
    60% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(0.9);
        filter: brightness(1.2);
    }
    100% { 
        opacity: 1; 
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-200px) rotate(calc(-1 * var(--angle))) scale(1);
        filter: brightness(1);
    }
}

@keyframes keyGlow {
    0%, 100% { 
        opacity: 0;
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.4), 0 0 50px rgba(139, 92, 246, 0.3);
    }
    50% { 
        opacity: 1;
        box-shadow: 0 0 60px rgba(99, 102, 241, 0.9), 0 0 80px rgba(139, 92, 246, 0.7), 0 0 100px rgba(99, 102, 241, 0.5);
    }
}

.piano-key:hover {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-300px) rotate(calc(-1 * var(--angle))) scale(1.1);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
}

.piano-key:hover .key-icon svg {
    filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.9));
    transform: scale(1.1);
}

/* Piano key text styling for uniformity */
.key-text {
    font-size: 11px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    margin-top: 6px;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    max-width: 80px;
    word-wrap: break-word;
    hyphens: auto;
}

/* Piano key icon styling for uniformity */
.key-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.key-icon svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Piano key spin-out animation for scene transition */
@keyframes pianoKeySpinOut {
    0% { 
        opacity: 1; 
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-200px) rotate(calc(-1 * var(--angle))) scale(1);
        filter: brightness(1);
    }
    30% { 
        opacity: 1; 
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-200px) rotate(calc(-1 * var(--angle))) scale(1.1);
        filter: brightness(1.2);
    }
    70% { 
        opacity: 0.6; 
        transform: translate(-50%, -50%) rotate(calc(var(--angle) + 180deg)) translateY(-250px) rotate(calc(-1 * var(--angle) - 180deg)) scale(0.8);
        filter: brightness(0.8);
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -50%) rotate(calc(var(--angle) + 360deg)) translateY(-300px) rotate(calc(-1 * var(--angle) - 360deg)) scale(0.3);
        filter: brightness(0.5);
    }
}

/* Scene transition classes */
.scene-transitioning .piano-key {
    animation: pianoKeySpinOut 2s ease-in-out forwards;
    animation-delay: calc(var(--delay) * 0.05);
}

.scene-transitioning .piano-key-features {
    animation: fadeOut 2s ease-out forwards;
}

@keyframes fadeOut {
    0% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.05);
    }
    100% { 
        opacity: 0; 
        transform: scale(0.95);
    }
}

/* Smooth scene transition */
.scene-2.scene-transitioning {
    animation: sceneFadeOut 2s ease-out forwards;
}

@keyframes sceneFadeOut {
    0% { 
        opacity: 1; 
    }
    70% { 
        opacity: 0.8; 
    }
    100% { 
        opacity: 0; 
    }
}

/* Scene 3: Personalized Welcome */
.welcome-showcase {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.welcome-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 2rem;
}

.welcome-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(99, 102, 241, 0.5);
    animation: welcomeRingPulse 2s ease-in-out infinite;
}

.welcome-avatar-ring.ring-2 {
    inset: -10px;
    border-color: rgba(99, 102, 241, 0.3);
    animation-delay: 0.3s;
}

@keyframes welcomeRingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}

.welcome-avatar {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
    animation: welcomeAvatarEntrance 0.8s ease-out forwards;
}

@keyframes welcomeAvatarEntrance {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.welcome-initials {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.welcome-text-container {
    text-align: center;
    animation: welcomeTextSlide 0.8s ease-out 0.3s forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes welcomeTextSlide {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-greeting {
    font-size: 1.2rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.welcome-name {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    animation: welcomeNameGlow 2s ease-in-out infinite;
}

@keyframes welcomeNameGlow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.6));
    }
}

.welcome-subtitle {
    font-size: 1rem;
    color: #64748b;
}

.welcome-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.welcome-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border-radius: 50%;
    opacity: 0;
    animation: welcomeParticleFloat 3s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

.welcome-particle:nth-child(1) { left: 10%; top: 20%; }
.welcome-particle:nth-child(2) { left: 80%; top: 15%; }
.welcome-particle:nth-child(3) { left: 20%; top: 70%; }
.welcome-particle:nth-child(4) { left: 75%; top: 65%; }
.welcome-particle:nth-child(5) { left: 50%; top: 85%; }

@keyframes welcomeParticleFloat {
    0%, 100% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
    25% {
        transform: translateY(-30px) scale(1);
        opacity: 1;
    }
    75% {
        transform: translateY(-60px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-80px) scale(0);
        opacity: 0;
    }
}

.scene-3.active .welcome-showcase {
    animation: sceneEntranceFade 0.5s ease-out forwards;
}

/* Legacy Scene 3: Motivational Quotes */
.quotes-showcase {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quotes-background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.quote-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    filter: blur(60px);
    animation: quoteOrbFloat 30s ease-in-out infinite;
}

.quote-orb.orb-1 {
    width: 400px;
    height: 400px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.quote-orb.orb-2 {
    width: 500px;
    height: 500px;
    top: 50%;
    right: 10%;
    animation-delay: 10s;
}

.quote-orb.orb-3 {
    width: 350px;
    height: 350px;
    bottom: 10%;
    left: 50%;
    animation-delay: 20s;
}

@keyframes quoteOrbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.15;
    }
    33% {
        transform: translate(100px, -80px) scale(1.2);
        opacity: 0.25;
    }
    66% {
        transform: translate(-80px, 120px) scale(0.9);
        opacity: 0.2;
    }
}

/* Streaming Quotes Container */
.streaming-quotes-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.streaming-quote {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    transform: translate(-50%, -50%);
    max-width: 400px;
    background: rgba(26, 26, 36, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    opacity: 0;
    animation: quoteStream 6s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(99, 102, 241, 0.2);
}

@keyframes quoteStream {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) translateY(20px);
        filter: blur(10px);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
        filter: blur(0);
    }
    85% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) translateY(-20px);
        filter: blur(10px);
    }
}

.streaming-quote .quote-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: inline-block;
    animation: quoteIconFloat 3s ease-in-out infinite;
    animation-delay: calc(var(--delay) + 0.5s);
}

@keyframes quoteIconFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1.1);
    }
}

.streaming-quote .quote-text {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    margin-bottom: 0.75rem;
    font-style: italic;
    text-align: center;
}

.streaming-quote .quote-author {
    font-size: 0.85rem;
    color: rgba(99, 102, 241, 0.9);
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
}

.quotes-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
    opacity: 0.3;
}

.logo-pulse-ring-quote {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    animation: quotePulseRing 3s ease-in-out infinite;
}

.logo-pulse-ring-quote.ring-2 {
    width: 400px;
    height: 400px;
    animation-delay: 1s;
    border-color: rgba(139, 92, 246, 0.15);
}

@keyframes quotePulseRing {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.4;
    }
}

/* Responsive streaming quotes */
@media (max-width: 768px) {
    .streaming-quote {
        max-width: 300px;
        padding: 1.25rem 1.5rem;
    }
    
    .streaming-quote .quote-text {
        font-size: 0.9rem;
    }
    
    .streaming-quote .quote-author {
        font-size: 0.75rem;
    }
}

/* Scene 3: Feature Showcase */
.feature-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 900px;
    margin-top: 3rem;
}

.feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0;
    transform: translateY(30px) scale(0.8);
    animation: featureCardEntrance 0.8s ease-out forwards;
    animation-delay: var(--delay);
    overflow: hidden;
    transition: all 0.3s ease;
}

.feature-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    opacity: 0;
    animation: featureGlow 2s ease-in-out infinite;
    animation-delay: var(--delay);
}

.feature-icon-cinematic {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
    color: #ffffff;
    transition: all 0.3s ease;
}

.feature-icon-cinematic svg {
    width: 2.5rem;
    height: 2.5rem;
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
}

.feature-text-cinematic {
    font-size: 0.95rem;
    color: #ffffff;
    text-align: center;
    font-weight: 500;
    margin-top: 0.5rem;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes featureCardEntrance {
    0% { opacity: 0; transform: translateY(30px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.feature-card:hover {
    transform: translateY(-5px) scale(1.05);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

.feature-card:hover .feature-icon-cinematic svg {
    filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.8));
    transform: scale(1.1);
}

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

/* Scene 4: Dramatic Team Showcase */
.dramatic-team-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.team-title-cinematic {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.5s forwards;
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

.team-stage {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.team-member-dramatic {
    position: relative;
    width: 100px;
    height: 160px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(50px) scale(0.8) rotateX(90deg);
    animation: dramaticMemberEntrance 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--delay);
    overflow: hidden;
    cursor: pointer;
}

.member-aura {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    animation: memberAura 3s ease-in-out infinite;
    animation-delay: var(--delay);
}

.member-spotlight {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    animation: spotlight 2s ease-in-out infinite;
    animation-delay: var(--delay);
}

.member-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    position: relative;
    z-index: 3;
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.member-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(99, 102, 241, 0.1), 
        rgba(139, 92, 246, 0.1), 
        rgba(16, 185, 129, 0.1));
    opacity: 0;
    animation: memberGlow 4s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes dramaticMemberEntrance {
    0% { 
        opacity: 0; 
        transform: translateY(50px) scale(0.8) rotateX(90deg);
    }
    50% { 
        opacity: 1; 
        transform: translateY(-10px) scale(1.05) rotateX(0deg);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1) rotateX(0deg);
    }
}

@keyframes memberAura {
    0%, 100% { 
        opacity: 0; 
        transform: scale(0.8);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2);
    }
}

@keyframes spotlight {
    0%, 100% { 
        opacity: 0; 
        transform: translateX(-50%) scale(0.5);
    }
    50% { 
        opacity: 1; 
        transform: translateX(-50%) scale(1);
    }
}

@keyframes memberGlow {
    0%, 100% { 
        opacity: 0;
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    }
    50% { 
        opacity: 1;
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.8), 0 0 60px rgba(99, 102, 241, 0.6);
    }
}

/* Scene 5: Final Loading */
.final-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.loading-spinner-cinematic {
    position: relative;
    width: 120px;
    height: 120px;
}

.spinner-ring-cinematic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.ring-1 {
    border-top-color: #6366f1;
    animation-delay: 0s;
}

.ring-2 {
    border-right-color: #8b5cf6;
    animation-delay: 0.3s;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

.ring-3 {
    border-bottom-color: #10b981;
    animation-delay: 0.6s;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
}

.spinner-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #ffffff, #6366f1);
    border-radius: 50%;
    animation: corePulse 1s ease-in-out infinite;
}

.loading-messages-cinematic {
    text-align: center;
}

.loading-message-cinematic {
    margin-bottom: 0.5rem;
    opacity: 0;
    animation: messageFade 2s ease-in-out infinite;
}

.loading-message-cinematic.primary {
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 600;
    animation-delay: 0s;
}

.loading-message-cinematic.secondary {
    font-size: 1rem;
    color: #a1a1aa;
    animation-delay: 1s;
}

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

@keyframes corePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
}

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

/* Progress Bar */
.loading-progress-cinematic {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 100;
}

.progress-track {
    position: relative;
    width: 300px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #10b981);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease-out;
    position: relative;
}

/* Progress bar pulsing animation while waiting for data */
@keyframes progressPulse {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    }
    50% { 
        opacity: 0.7;
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
    }
}

.progress-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: progressShimmer 2s ease-in-out infinite;
}

.progress-text {
    color: #a1a1aa;
    font-size: 0.9rem;
    font-weight: 500;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Hide main content initially - will be shown after loading */
main, .main-content, .dashboard-content {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.8s ease-in, visibility 0.8s ease-in !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure loading overlay covers everything during navigation */
.loading-overlay.active {
    z-index: 999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 0, 150, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 0, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 40, 0.98) 100%) !important;
    backdrop-filter: blur(10px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Show content when loaded */
main.loaded, .main-content.loaded, .dashboard-content.loaded {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.8s ease-in, visibility 0.8s ease-in !important;
}

/* Force dashboard content to be visible when loaded - Maximum specificity */
.dashboard-content.loaded {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* ===== COMPLETELY REDESIGNED FLOATING NAVIGATION ===== */

/* Main floating navigation container */
.floating-nav {
    position: fixed;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%) translateY(-50px) scale(0.8);
    z-index: 9999;
    width: calc(100% - 4rem);
    max-width: 1600px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: visible; /* Allow submenu to overflow */
}

/* Hide navigation when scrolled down */
.floating-nav.scrolled-down {
    transform: translateX(-50%) translateY(-120%);
    opacity: 0;
    visibility: hidden;
}

/* Show navigation when at top */
.floating-nav.at-top {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Navigation container */
.floating-nav .nav-container {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible; /* Allow submenu to overflow */
}

/* Navigation menu */
.floating-nav .nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    overflow: visible; /* Changed from overflow-x: auto to allow submenu to show */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.floating-nav .nav-menu::-webkit-scrollbar {
    display: none;
}

/* Navigation items */
.floating-nav .nav-item {
    position: relative;
}

.floating-nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    color: #94a3b8;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.75rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

.floating-nav .nav-item .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
}

.floating-nav .nav-item .nav-link:hover::before {
    opacity: 1;
}

.floating-nav .nav-item .nav-link:hover {
    color: #f1f5f9;
    transform: translateY(-2px);
}

/* Featured Navigation Item (Report Center) - Gold Star Highlight */
.nav-item-featured .nav-link-featured {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1)) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2), inset 0 0 8px rgba(255, 215, 0, 0.1);
}

.nav-item-featured .nav-link-featured:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 165, 0, 0.2)) !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.15);
}

.nav-item-featured .nav-link-featured span {
    color: #ffd700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.nav-star-icon {
    margin-left: 4px;
    animation: starPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
}

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

.floating-nav .nav-item.active .nav-link {
    color: #f1f5f9;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Navigation icons */
.floating-nav .nav-item .nav-link svg {
    width: 16px;
    height: 16px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.floating-nav .nav-item:hover .nav-link svg {
    transform: scale(1.1);
}

/* Submenu styles */
.floating-nav .nav-item .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    padding: 0.5rem;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 10000;
}

.floating-nav .nav-item:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-nav .submenu-item {
    display: block;
    padding: 0.75rem 1rem;
    color: #94a3b8;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.floating-nav .submenu-item:hover {
    color: #f1f5f9;
    background: rgba(99, 102, 241, 0.1);
}

/* Navigation actions */
.floating-nav .nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.floating-nav .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    color: #99a3b8;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.floating-nav .action-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #f1f5f9;
    transform: scale(1.05);
}

/* Floating unhide button */
.floating-unhide-btn {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 9998;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-unhide-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.floating-unhide-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}

.floating-unhide-btn svg {
    width: 24px;
    height: 24px;
}

/* Show navigation when animation is complete */
.floating-nav.animation-complete {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) scale(1) rotate(0deg) translateZ(0) !important;
    filter: blur(0px) brightness(1) hue-rotate(0deg) saturate(1);
    box-shadow: 0 0 5px rgba(99, 102, 241, 0.2), 0 0 10px rgba(139, 92, 246, 0.1);
}

/* Override animation-complete when scrolled down */
.floating-nav.animation-complete.scrolled-down {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(-120%) scale(1) rotate(0deg) translateZ(0) !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .floating-nav {
        width: calc(100% - 2rem);
        top: 1rem;
    }
    
    .floating-nav .nav-container {
        padding: 0.75rem 1rem;
    }
    
    .floating-nav .nav-menu {
        gap: 0.25rem;
    }
    
    .floating-nav .nav-item .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .floating-unhide-btn {
        top: 1rem;
        right: 1rem;
        width: 45px;
        height: 45px;
    }
}

/* Hide navigation during loading */
.loading-overlay.active ~ .floating-nav,
body:has(.loading-overlay.active) .floating-nav {
    opacity: 0.3 !important;
    pointer-events: none !important;
    transform: translateX(-50%) scale(0.95) !important;
}

/* Hide navigation on report view */
#report-view.active ~ .floating-nav,
body:has(#report-view.active) .floating-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide navigation when viewing reports - override ALL other styles with maximum specificity */
.floating-nav.nav-hidden-for-reports,
#mainNav.nav-hidden-for-reports,
body:has(#report-view.active) .floating-nav.nav-hidden-for-reports,
body:has(#report-view.active) #mainNav.nav-hidden-for-reports,
body:has(#report-builder.active) .floating-nav.nav-hidden-for-reports,
body:has(#report-builder.active) #mainNav.nav-hidden-for-reports,
.floating-nav.nav-hidden-for-reports.nav-visible,
.floating-nav.nav-hidden-for-reports.animation-complete,
.floating-nav.nav-hidden-for-reports.at-top,
.floating-nav.nav-hidden-for-reports.scrolled-down,
#mainNav.nav-hidden-for-reports.nav-visible,
#mainNav.nav-hidden-for-reports.animation-complete,
#mainNav.nav-hidden-for-reports.at-top,
#mainNav.nav-hidden-for-reports.scrolled-down {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(-120%) !important;
    position: fixed !important;
    top: -200px !important;
    left: 50% !important;
}

/* ===== END REDESIGNED FLOATING NAVIGATION ===== */

/* Navigation collapsed state - Disabled to prevent hover issues */
.floating-nav.nav-collapsed {
    /* Hide navigation when collapsed */
    transform: translateX(-50%) translateY(-120%) translateZ(0) !important;
    opacity: 0.8 !important;
    visibility: visible !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Ensure dashboard content is visible when loaded - Maximum specificity */
.dashboard-content.loaded {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Override the initial hidden state for loaded dashboard content - Maximum specificity */
main .dashboard-content.loaded,
.main-content .dashboard-content.loaded,
body .dashboard-content.loaded {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force visibility for scorecards dashboard content */
#scorecards .dashboard-content.loaded,
section[data-page="scorecards"] .dashboard-content.loaded {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== ANIMATED BACKGROUND ===== */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
    animation: float 20s ease-in-out infinite;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
    top: 50%;
    right: -150px;
    animation-delay: -7s;
}

.orb-3 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    bottom: -100px;
    left: 50%;
    animation-delay: -14s;
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(150px, -100px) scale(1.15) rotate(90deg);
    }
    50% {
        transform: translate(50px, 150px) scale(0.85) rotate(180deg);
    }
    75% {
        transform: translate(-100px, 50px) scale(1.05) rotate(270deg);
    }
}

/* Particle system */
.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(99, 102, 241, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.8), 0 0 12px rgba(99, 102, 241, 0.4);
    animation: particleFloat 15s infinite ease-in-out;
}

.particle:nth-child(odd) {
    background: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.8), 0 0 12px rgba(139, 92, 246, 0.4);
    animation-duration: 20s;
}

.particle:nth-child(3n) {
    background: rgba(236, 72, 153, 0.5);
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.8), 0 0 12px rgba(236, 72, 153, 0.4);
    animation-duration: 18s;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    5% {
        opacity: 0.8;
    }
    10% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    95% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100vh) translateX(100px) scale(1.2);
        opacity: 0;
    }
}

/* Glow effect on orbs */
.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
    animation: float 20s ease-in-out infinite, pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
        filter: blur(120px);
    }
    50% {
        opacity: 0.5;
        filter: blur(140px);
    }
}

/* ===== FLOATING NAVIGATION ===== */
/* Updated: 2025-10-14 - Removed border effects and enhanced Hollywood animations - CACHE BUST 2 */
/* Laser beam that travels around individual nav item borders */
.floating-nav .nav-item::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 350deg,
        #2563eb 355deg,
        #1e40af 360deg,
        #ffffff 365deg,
        #1e40af 370deg,
        #2563eb 375deg,
        transparent 380deg,
        transparent 360deg
    );
    animation: borderLaserRotate 3s linear infinite;
    z-index: -1;
    opacity: 1;
    filter: brightness(1.2) saturate(1.1);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    padding: 2px;
}

/* Laser beam glow effect for individual nav items */
.floating-nav .nav-item::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 350deg,
        rgba(30, 64, 175, 0.3) 355deg,
        rgba(37, 99, 235, 0.5) 360deg,
        rgba(255, 255, 255, 0.7) 365deg,
        rgba(37, 99, 235, 0.5) 370deg,
        rgba(30, 64, 175, 0.3) 375deg,
        transparent 380deg,
        transparent 360deg
    );
    animation: borderLaserRotate 3s linear infinite;
    z-index: -2;
    opacity: 0.6;
    filter: blur(2px);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    padding: 3px;
}

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

/* Force animation to work by removing any conflicting styles */
.floating-nav[style*="animation"] {
    animation-fill-mode: forwards !important;
}

/* Ensure animation can override any existing styles */
.floating-nav:not(.animation-complete) {
    animation-fill-mode: forwards !important;
}

.floating-nav * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.brand-icon {
    animation: hollywoodLogoGlow 3s ease-in-out infinite;
}

@keyframes navSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px) scale(0.8);
        filter: blur(10px);
    }
    50% {
        opacity: 0.8;
        transform: translateX(-50%) translateY(-10px) scale(1.05);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        filter: blur(0px);
    }
}

@keyframes hollywoodEntrance {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-200px) scale(0.05) rotate(-15deg);
        filter: blur(20px) brightness(3) hue-rotate(180deg) saturate(2);
        box-shadow: 0 0 50px rgba(99, 102, 241, 0.8), 0 0 100px rgba(139, 92, 246, 0.6);
    }
    20% {
        opacity: 0.2;
        transform: translateX(-50%) translateY(-100px) scale(0.3) rotate(-8deg);
        filter: blur(15px) brightness(2.5) hue-rotate(120deg) saturate(1.8);
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.7), 0 0 80px rgba(139, 92, 246, 0.5);
    }
    40% {
        opacity: 0.5;
        transform: translateX(-50%) translateY(-50px) scale(0.6) rotate(-4deg);
        filter: blur(10px) brightness(2) hue-rotate(60deg) saturate(1.5);
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.6), 0 0 60px rgba(139, 92, 246, 0.4);
    }
    60% {
        opacity: 0.8;
        transform: translateX(-50%) translateY(-20px) scale(0.9) rotate(-1deg);
        filter: blur(5px) brightness(1.5) hue-rotate(30deg) saturate(1.3);
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.5), 0 0 40px rgba(139, 92, 246, 0.3);
    }
    80% {
        opacity: 0.95;
        transform: translateX(-50%) translateY(-5px) scale(1.05) rotate(0deg);
        filter: blur(2px) brightness(1.2) hue-rotate(10deg) saturate(1.1);
        box-shadow: 0 0 10px rgba(99, 102, 241, 0.4), 0 0 20px rgba(139, 92, 246, 0.2);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
        filter: blur(0px) brightness(1) hue-rotate(0deg) saturate(1);
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.2), 0 0 10px rgba(139, 92, 246, 0.1);
    }
}



.nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem 1rem !important;
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    max-width: none !important;
}

/* Prevent any layout changes on page transitions */
.floating-nav .nav-container,
.floating-nav.nav-visible .nav-container,
.floating-nav.animation-complete .nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem 1rem !important;
    background: var(--bg-glass) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    max-width: none !important;
}

/* Brand */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hollywoodLogoGlow 2s ease-in-out infinite alternate;
}

@keyframes hollywoodLogoGlow {
    0% {
        filter: drop-shadow(0 0 20px rgba(99, 102, 241, 1))
                drop-shadow(0 0 40px rgba(139, 92, 246, 0.8))
                drop-shadow(0 0 60px rgba(236, 72, 153, 0.6))
                drop-shadow(0 0 80px rgba(16, 185, 129, 0.4));
        transform: scale(1) rotate(0deg);
    }
    25% {
        filter: drop-shadow(0 0 30px rgba(99, 102, 241, 1))
                drop-shadow(0 0 60px rgba(139, 92, 246, 1))
                drop-shadow(0 0 90px rgba(236, 72, 153, 0.8))
                drop-shadow(0 0 120px rgba(16, 185, 129, 0.6))
                drop-shadow(0 0 150px rgba(245, 158, 11, 0.4));
        transform: scale(1.05) rotate(3deg);
    }
    50% {
        filter: drop-shadow(0 0 40px rgba(99, 102, 241, 1))
                drop-shadow(0 0 80px rgba(139, 92, 246, 1))
                drop-shadow(0 0 120px rgba(236, 72, 153, 0.9))
                drop-shadow(0 0 160px rgba(16, 185, 129, 0.7))
                drop-shadow(0 0 200px rgba(245, 158, 11, 0.5))
                drop-shadow(0 0 240px rgba(239, 68, 68, 0.3));
        transform: scale(1.1) rotate(-2deg);
    }
    75% {
        filter: drop-shadow(0 0 30px rgba(99, 102, 241, 1))
                drop-shadow(0 0 60px rgba(139, 92, 246, 1))
                drop-shadow(0 0 90px rgba(236, 72, 153, 0.8))
                drop-shadow(0 0 120px rgba(16, 185, 129, 0.6))
                drop-shadow(0 0 150px rgba(245, 158, 11, 0.4));
        transform: scale(1.05) rotate(2deg);
    }
    100% {
        filter: drop-shadow(0 0 20px rgba(99, 102, 241, 1))
                drop-shadow(0 0 40px rgba(139, 92, 246, 0.8))
                drop-shadow(0 0 60px rgba(236, 72, 153, 0.6))
                drop-shadow(0 0 80px rgba(16, 185, 129, 0.4));
        transform: scale(1) rotate(0deg);
    }
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    background: linear-gradient(135deg, #ffffff, #e0e7ff, #c7d2fe);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: brandTextShimmer 3s ease-in-out infinite;
    position: relative;
    white-space: nowrap;
}

.brand-name::before {
    display: none;
}

.brand-subtitle {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    animation: subtitleFloat 2.5s ease-in-out infinite;
    white-space: nowrap;
}

#currentMonthDisplay {
    color: #FFD700;
    font-weight: 600;
    background: linear-gradient(135deg, #FFD700, #FFA500, #FF6B35);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: monthDisplayPulse 2s ease-in-out infinite, monthDisplayShimmer 3s ease-in-out infinite;
    position: relative;
}

#currentMonthDisplay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.3) 50%, transparent 70%);
    animation: monthDisplayGlow 2.5s ease-in-out infinite;
    border-radius: 4px;
}

.filter-display {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Navigation Menu - Fixed spacing */
.nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
}

/* Prevent navigation layout changes while preserving styling - ENHANCED */
.floating-nav .nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 1 !important;
}

.floating-nav .nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem 1rem !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
}

/* Force consistent spacing for all navigation states - ENHANCED */
.floating-nav.nav-visible .nav-menu,
.floating-nav.animation-complete .nav-menu,
.floating-nav.nav-collapsed .nav-menu,
.floating-nav .nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    flex-grow: 1 !important;
    flex-wrap: nowrap !important;
}

/* Prevent any layout changes on navigation items */
.floating-nav .nav-item {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Ensure stable hover areas */
    position: relative;
    overflow: visible;
}

/* Fix hover area stability - prevent layout shifts */
.floating-nav .nav-item .nav-link {
    position: relative;
    overflow: visible;
    white-space: nowrap;
    /* Ensure consistent hover detection */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 36px;
    transition: all 0.3s ease;
}

/* Prevent pointer events on child elements */
.floating-nav .nav-item .nav-link svg,
.floating-nav .nav-item .nav-link span:not(.tm-text-icon) {
    pointer-events: none;
}

/* Clean hover state */
.floating-nav .nav-item:hover {
    z-index: 200;
}

/* Simplified hover area */
.floating-nav .nav-item .nav-link::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: transparent;
    z-index: -1;
}

/* Ensure consistent spacing between nav items */
.floating-nav .nav-item {
    margin: 0 1px; /* Clean spacing without overlaps */
    flex-shrink: 0;
}

/* Special handling for Scorecards nav item - Simplified */
.floating-nav .nav-item[data-page="scorecards"] {
    position: relative;
    z-index: 100;
}

.nav-item {
    position: relative;
    /* Ensure consistent hover area for all nav items */
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Report Center Submenu Styles */
.nav-item.has-submenu {
    position: relative;
    overflow: visible !important;
}

/* Create invisible bridge to maintain hover between nav-item and submenu */
.nav-item.has-submenu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
    pointer-events: auto;
}

.nav-item.has-submenu .nav-submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-sm);
    min-width: 250px;
    max-width: 300px;
    max-height: 400px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 10000;
    pointer-events: none;
}

.nav-item.has-submenu:hover .nav-submenu,
.nav-submenu:hover,
.nav-item.has-submenu.submenu-hover .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Keep parent nav-item in hover state when submenu is hovered */
.nav-item.has-submenu:hover,
.nav-item.has-submenu.submenu-hover {
    background-color: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
}

.nav-item.has-submenu:hover .nav-link,
.nav-item.has-submenu.submenu-hover .nav-link {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-full);
}

.nav-item.has-submenu:hover .nav-link span:not(.tm-text-icon),
.nav-item.has-submenu.submenu-hover .nav-link span:not(.tm-text-icon) {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    width: auto;
}

.nav-subitem {
    margin: 0;
    padding: 0;
}

.nav-sublink {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-sublink:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--text-primary);
}

/* ===== REPORT CENTER GOLD STAR HIGHLIGHT ===== */
/* Special styling for Report Center nav item to make it stand out */
.nav-item.has-submenu[data-page="dashboards"] .nav-link {
    position: relative;
    overflow: visible;
}

/* Gold star icon */
.nav-item.has-submenu[data-page="dashboards"] .nav-link::after {
    content: '\2B50'; /* Star emoji */
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.65em;
    z-index: 10;
    animation: starTwinkle 2s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
}

/* Gold pulsing glow effect */
.nav-item.has-submenu[data-page="dashboards"] .nav-link::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
    border-radius: inherit;
    z-index: -1;
    animation: goldPulse 3s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes starTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    50% { transform: scale(1.2) rotate(15deg); opacity: 1; }
}

@keyframes goldPulse {
    0%, 100% { 
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.3), 
                    inset 0 0 4px rgba(255, 215, 0, 0.1);
        opacity: 0.5;
    }
    50% { 
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 
                    inset 0 0 8px rgba(255, 215, 0, 0.2);
        opacity: 0.8;
    }
}

/* Enhanced hover for Report Center */
.nav-item.has-submenu[data-page="dashboards"]:hover .nav-link {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
    transform: translateX(4px);
}

.nav-sublink svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.saved-report-link {
    border-left: 3px solid transparent;
    transition: border-color 0.2s ease;
}

.saved-report-link:hover {
    border-left-color: var(--primary);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    animation: navButtonSubtleGlow 6s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(139, 92, 246, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Collapsible navigation - compact by default but show icons */
    width: auto;
    min-width: 2.5rem;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Hide text spans by default - more aggressive hiding */
.nav-link span:not(.tm-text-icon) {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    pointer-events: none;
    width: 0;
    overflow: hidden;
    max-width: 0;
    margin: 0;
}

/* Ensure icons are always visible */
.nav-link svg {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex-shrink: 0;
}

/* Show text on hover - Fixed positioning */
.nav-link:hover {
    width: auto;
    padding: 0.5rem 0.85rem;
    justify-content: center;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
    /* Ensure consistent hover area */
    position: relative;
    z-index: 1000;
}

.nav-link:hover span:not(.tm-text-icon) {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    width: auto;
    max-width: 200px;
    margin-left: 0.3rem;
}

/* ===== UNIQUE ICON ANIMATIONS ===== */

/* Scorecards Icon - Simplified and clean */
.scorecards-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.scorecards-icon:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.scorecards-icon:hover svg {
    animation: scorecardsGlow 0.6s ease-in-out;
}

/* Clean navigation item styling */
.scorecards-icon::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -25px; /* Much larger left extension */
    right: -15px;
    bottom: -15px;
    background: transparent;
    z-index: 0;
    border-radius: 8px;
}

/* Additional hover trigger zone specifically for left-to-right movement */
.scorecards-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30px; /* Even larger left zone */
    width: 35px;
    height: 100%;
    background: transparent;
    z-index: 1;
}

@keyframes scorecardsGlow {
    0%, 100% { 
        transform: scale(1.05); 
        filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
    }
    50% { 
        transform: scale(1.15); 
        filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.8));
    }
}

/* Analytics Icon - Data Flow Animation */
.analytics-icon:hover svg {
    animation: analyticsPulse 0.6s ease-in-out;
}

.analytics-icon:hover svg circle {
    animation: dataFlow 1.2s ease-in-out infinite;
}

@keyframes analyticsPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes dataFlow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Dashboards Icon - Grid Animation */
.dashboards-icon:hover svg {
    animation: dashboardGrid 0.8s ease-in-out;
}

.dashboards-icon:hover svg circle {
    animation: gridPulse 1.5s ease-in-out infinite;
}

@keyframes dashboardGrid {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    25% { opacity: 1; transform: scale(1.3); }
    50% { opacity: 0.8; transform: scale(1.1); }
    75% { opacity: 1; transform: scale(1.2); }
}

/* Trends Icon - Chart Animation */
.trends-icon:hover svg {
    animation: trendsChart 0.7s ease-in-out;
}

.trends-icon:hover svg path:last-child {
    animation: trendLine 1.8s ease-in-out infinite;
}

@keyframes trendsChart {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.1) translateY(-2px); }
    100% { transform: scale(1) translateY(0); }
}

@keyframes trendLine {
    0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 50 50; stroke-dashoffset: -25; }
    100% { stroke-dasharray: 100 0; stroke-dashoffset: -100; }
}

/* ARR Icon - Report Animation */
.arr-icon:hover svg {
    animation: arrReport 0.6s ease-in-out;
}

.arr-icon:hover svg circle {
    animation: reportGlow 1.4s ease-in-out infinite;
}

@keyframes arrReport {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes reportGlow {
    0%, 100% { opacity: 0.7; transform: scale(1); filter: brightness(1); }
    50% { opacity: 1; transform: scale(1.4); filter: brightness(1.5); }
}

/* Job Icon - Monitor Animation */
.job-icon:hover svg {
    animation: jobMonitor 0.8s ease-in-out;
}

.job-icon:hover svg circle {
    animation: monitorBlink 2s ease-in-out infinite;
}

.job-icon:hover svg path:last-child {
    animation: statusBar 1.6s ease-in-out infinite;
}

@keyframes jobMonitor {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.1) translateY(-1px); }
    100% { transform: scale(1) translateY(0); }
}

@keyframes monitorBlink {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0.3; }
}

@keyframes statusBar {
    0%, 100% { stroke-dasharray: 0 100; }
    50% { stroke-dasharray: 50 50; }
}

/* Currency Icon - Money Animation */
.currency-icon:hover svg {
    animation: currencySpin 0.9s ease-in-out;
}

.currency-icon:hover svg circle {
    animation: moneyGlow 1.8s ease-in-out infinite;
}

@keyframes currencySpin {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

@keyframes moneyGlow {
    0%, 100% { opacity: 0.8; transform: scale(1); filter: brightness(1); }
    50% { opacity: 1; transform: scale(1.3); filter: brightness(1.8); }
}

/* Knowledge Icon - Brain Animation */
.knowledge-icon:hover svg {
    animation: knowledgeBrain 0.7s ease-in-out;
}

.knowledge-icon:hover svg circle {
    animation: brainPulse 1.5s ease-in-out infinite;
}

.knowledge-icon:hover svg path:last-child {
    animation: knowledgeFlow 2s ease-in-out infinite;
}

@keyframes knowledgeBrain {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes brainPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes knowledgeFlow {
    0% { stroke-dasharray: 0 100; }
    50% { stroke-dasharray: 30 70; }
    100% { stroke-dasharray: 100 0; }
}

/* Subtle glowing idle animation for all nav buttons */
@keyframes navButtonSubtleGlow {
    0%, 100% {
        box-shadow: 
            0 0 8px rgba(99, 102, 241, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.3);
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(139, 92, 246, 0.02));
    }
    50% {
        box-shadow: 
            0 0 12px rgba(99, 102, 241, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.4);
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.03));
    }
}

/* Comprehensive fix for white bars on navigation */
.nav-item.active .nav-link {
    border-bottom: none !important;
    position: relative;
}

.nav-item.active .nav-link::before {
    display: none;
}

.nav-item.active .nav-link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1;
    animation: activeTabGlow 2s ease-in-out infinite;
}

/* Comprehensive fix for white bars on navigation */
.nav-link::before,
.nav-link::after,
.nav-item.active .nav-link::before,
.nav-item.active .nav-link::after,
.nav-link:hover::before,
.nav-link:hover::after,
.brand-name::before,
.brand-name::after,
.brand-subtitle::before,
.brand-subtitle::after,
.btn::before,
.btn::after,
.floating-nav *::before,
.floating-nav *::after {
    display: none !important;
}

.nav-link svg {
    width: 16px;
    height: 16px;
    opacity: 0.8;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1);
    flex-shrink: 0;
}

.nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
}

.nav-link:hover svg {
    opacity: 1;
    transform: scale(1.05);
    filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4));
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover::after {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
}

.nav-link:hover svg {
    opacity: 1;
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
}

.nav-item.active .nav-link {
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 6px 20px rgba(99, 102, 241, 0.2),
        0 0 0 1px rgba(99, 102, 241, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: activeTabSubtleGlow 4s ease-in-out infinite;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Subtle active tab glow animation */
@keyframes activeTabSubtleGlow {
    0%, 100% {
        box-shadow: 
            0 6px 20px rgba(99, 102, 241, 0.2),
            0 0 0 1px rgba(99, 102, 241, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            0 0 15px rgba(99, 102, 241, 0.1);
    }
    50% {
        box-shadow: 
            0 8px 25px rgba(99, 102, 241, 0.3),
            0 0 0 1px rgba(99, 102, 241, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 0 20px rgba(99, 102, 241, 0.15);
    }
}

.nav-item.active .nav-link::after {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
    animation: activeTabGlow 2s ease-in-out infinite;
}

.nav-item.active .nav-link svg {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.8));
    animation: activeIconPulse 1.5s ease-in-out infinite;
}

/* Spectacular Animations */
@keyframes activeTabPulse {
    0%, 100% {
        box-shadow: 
            0 10px 30px rgba(99, 102, 241, 0.2),
            0 0 0 1px rgba(99, 102, 241, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transform: translateY(-1px) scale(1.05);
    }
    50% {
        box-shadow: 
            0 15px 40px rgba(99, 102, 241, 0.3),
            0 0 0 2px rgba(99, 102, 241, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: translateY(-2px) scale(1.08);
    }
}

@keyframes activeTabGlow {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes activeIconPulse {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.8));
        transform: scale(1.1);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(99, 102, 241, 1));
        transform: scale(1.2);
    }
}

/* Tab Transition Animation - Only apply when navigation is animating */
.floating-nav.animating .nav-link {
    animation: tabEntrance 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
}

/* Ensure nav links are visible by default */
.nav-link {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.floating-nav.animating .nav-item:nth-child(1) .nav-link { animation-delay: 0.1s; }
.floating-nav.animating .nav-item:nth-child(2) .nav-link { animation-delay: 0.2s; }
.floating-nav.animating .nav-item:nth-child(3) .nav-link { animation-delay: 0.3s; }
.floating-nav.animating .nav-item:nth-child(4) .nav-link { animation-delay: 0.4s; }
.floating-nav.animating .nav-item:nth-child(5) .nav-link { animation-delay: 0.5s; }
.floating-nav.animating .nav-item:nth-child(6) .nav-link { animation-delay: 0.6s; }

@keyframes tabEntrance {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Navigation Toggle Button */
.nav-toggle-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(0.8);
}

.nav-toggle-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.nav-toggle-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-color));
}

.nav-toggle-btn:active {
    transform: translateY(0) scale(0.95);
}

.nav-toggle-btn svg {
    transition: transform 0.3s ease;
}

.nav-toggle-btn:hover svg {
    transform: rotate(90deg);
}

/* Nav Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-base);
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: scale(1.05);
}

.action-btn:active {
    transform: scale(0.95);
}

/* User Profile */
.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
}

.user-profile:hover {
    background: rgba(255, 255, 255, 0.08);
}

.user-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
}

.user-role {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1;
    white-space: nowrap;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
    transform: translateY(-1px);
}

.logout-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.logout-btn:hover svg {
    transform: translateX(2px);
}

.logout-btn span {
    line-height: 1;
}

/* ===== USER MANAGEMENT ===== */
.user-management-container {
    padding: 2rem 0;
}

.users-table-wrapper {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table thead {
    background: rgba(99, 102, 241, 0.1);
    border-bottom: 2px solid var(--border-color);
}

.users-table th {
    padding: 1rem 1.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.users-table td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.users-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.users-table tbody tr:last-child td {
    border-bottom: none;
}

.user-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.user-status.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.user-status.inactive {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.user-role-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.user-role-badge.admin {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-light);
}

.user-role-badge.user {
    background: rgba(139, 92, 246, 0.2);
    color: var(--secondary);
}

.permissions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 400px;
}

.permission-tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.permission-tag.admin-permission {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: var(--primary-light);
    font-weight: 500;
}

.user-actions {
    display: flex;
    gap: 0.5rem;
}

.user-action-btn {
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary);
    color: var(--primary-light);
}

.user-action-btn.delete:hover {
    border-color: var(--danger);
    color: var(--danger);
}

/* User Management Modal */
.user-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.user-modal.active {
    display: flex;
}

.user-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.user-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.user-modal-header h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.user-modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.user-modal-close:hover {
    color: var(--text-primary);
}

.user-form-group {
    margin-bottom: 1.5rem;
}

.user-form-group label {
    display: block;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.user-form-group input,
.user-form-group select {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.user-form-group input:focus,
.user-form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.permission-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.permission-checkbox input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.permission-checkbox label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.permission-checkbox input[type="checkbox"]:checked + label {
    color: var(--text-primary);
}

.user-modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.user-modal-actions .btn {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.user-modal-actions .btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
}

.user-modal-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.user-modal-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.user-modal-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Admin-only nav item */
.nav-item.admin-only {
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    position: relative;
    z-index: 1;
    padding: 6rem 2rem 4rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* Pages */
.page {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.page.active {
    display: block;
}

/* Page Section - for dynamically loaded pages like TM Center, AI Query, etc */
.page-section {
    display: none;
    min-height: calc(100vh - 80px);
    padding: 20px;
    animation: fadeIn 0.3s ease-out;
}

.page-section.active,
.page-section[style*="display: block"] {
    display: block !important;
}

#tm-center-page.active,
#ai-query.active,
#customer-classification.active,
#up-for-renewals.active,
#bookings-to-billings.active {
    display: block !important;
}


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

/* Page Header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.header-content {
    flex: 1;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* AI Explanation Section */
.ai-explanation {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ai-explanation h3 {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-explanation h3::before {
    content: "🤖";
    font-size: 1.2rem;
}

.ai-explanation p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.ai-explanation ul {
    margin: 1rem 0;
    padding-left: 0;
    list-style: none;
}

.ai-explanation li {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0.75rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.ai-explanation li::before {
    content: "▶";
    color: var(--primary-color);
    font-size: 0.8rem;
    position: absolute;
    left: 0;
    top: 0.1rem;
}

.ai-explanation strong {
    color: var(--text-primary);
    font-weight: 600;
}

.ai-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.ai-feature {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
}

.ai-feature:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.ai-feature h4 {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-feature p {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.9rem;
    margin: 0;
}

.ai-summary {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.ai-summary p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Classification Methods Section */
.classification-methods-section {
    margin-bottom: 2rem;
}

.methods-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

.methods-title {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.methods-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
    margin: 0;
    opacity: 0.8;
}

/* Visual Divider Between ML and LLM Sections */
.classification-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2.5rem 0;
    position: relative;
}

.divider-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(99, 102, 241, 0.3) 20%,
        rgba(139, 92, 246, 0.5) 50%,
        rgba(99, 102, 241, 0.3) 80%,
        transparent 100%
    );
    position: relative;
}

.divider-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
    border: 2px solid rgba(139, 92, 246, 0.4);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 15px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 1;
    transition: all 0.3s ease;
}

.divider-badge:hover {
    transform: scale(1.05);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 
        0 6px 20px rgba(139, 92, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.divider-icon {
    font-size: 1.2rem;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6));
    animation: dividerIconPulse 2s ease-in-out infinite;
}

.divider-text {
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

@keyframes dividerIconPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.8));
    }
}

/* Sortable Table Headers */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color 0.2s ease;
}

.sortable:hover {
    background-color: rgba(99, 102, 241, 0.1);
}

.sort-icon {
    margin-left: 0.5rem;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.sortable:hover .sort-icon {
    opacity: 0.8;
}

.sortable.sort-asc .sort-icon {
    opacity: 1;
    color: var(--primary-color);
}

.sortable.sort-desc .sort-icon {
    opacity: 1;
    color: var(--primary-color);
    transform: rotate(180deg);
}

/* Search Container with Clear Button */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-clear-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.search-clear-btn:hover {
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 1;
}

.search-clear-btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Chart Container Enhancements */
.chart-container {
    position: relative;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%);
    border-radius: 16px;
    padding: 1.5rem;
    border: 2px solid rgba(99, 102, 241, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    overflow: hidden;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
    border-radius: 16px;
    pointer-events: none;
}

.chart-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.02) 50%, transparent 70%);
    border-radius: 16px;
    pointer-events: none;
}

#classificationChart {
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.action-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.action-group.export-group {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border-color);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

/* Hollywood button hover effects */
.btn::before {
    display: none;
}

.btn:hover::before {
    display: none;
}

.btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(99, 102, 241, 0.4);
}

.btn:active {
    transform: translateY(-1px) scale(1.02);
}

.btn svg {
    width: 20px;
    height: 20px;
}

.btn-primary {
    background: linear-gradient(135deg, 
        var(--primary) 0%, 
        var(--primary-dark) 50%, 
        var(--primary-light) 100%);
    color: white;
    box-shadow: 
        0 4px 15px rgba(99, 102, 241, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
    background: linear-gradient(135deg, 
        var(--primary-light) 0%, 
        var(--primary) 50%, 
        var(--primary-dark) 100%);
    box-shadow: 
        0 8px 25px rgba(99, 102, 241, 0.5),
        0 0 30px rgba(99, 102, 241, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.3);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: 1px solid #f59e0b;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

/* Spin animation for inline SVGs */
.spin {
    animation: spin 1s linear infinite;
}

.btn-secondary {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

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

/* ===== CUSTOM TOOLTIPS ===== */
.custom-tooltip {
    position: fixed;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 126, 234, 0.3);
    font-size: 14px;
    line-height: 1.6;
    max-width: 400px;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: pre-wrap;
    transform: translateY(-10px);
}

.custom-tooltip.active {
    opacity: 1;
    transform: translateY(0);
}

.custom-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #667eea;
}

/* Help Icon Indicator */
.kpi-card {
    position: relative;
}

.kpi-card[title]::after {
    content: '?';
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    opacity: 0.6;
    transition: all 0.3s ease;
    cursor: help;
    pointer-events: none;
    z-index: 1;
}

.kpi-card[title]:hover::after {
    opacity: 1;
    background: rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.6);
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
}

/* ===== KPI CARDS ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Job Monitoring specific - 6 cards in single row */
#job-monitoring .kpi-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

#job-monitoring .kpi-card {
    padding: 0.75rem;
}

#job-monitoring .kpi-value {
    font-size: 1.2rem;
}

#job-monitoring .kpi-label {
    font-size: 0.7rem;
}

.kpi-card {
    position: relative;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1rem;
    overflow: hidden;
    transition: all var(--transition-base);
    cursor: pointer;
    user-select: none;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.kpi-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0.5rem 0;
    word-break: break-all;
    overflow-wrap: break-word;
    line-height: 1.2;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    opacity: 0;
    transition: opacity var(--transition-base);
}

.kpi-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.kpi-card:hover::before {
    opacity: 1;
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.kpi-icon.primary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.1));
    color: var(--primary-light);
}

.kpi-icon.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    color: var(--success);
}

.kpi-icon.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
    color: var(--warning);
}

/* ===== STATUS BADGES ===== */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-badge.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-badge.info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.status-badge.secondary {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
    border: 1px solid rgba(107, 114, 128, 0.2);
}

/* ===== PIVOT TABLE (Dark Theme - Matching Report Viewer) ===== */
.pivot-table-container {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    padding: 1.5rem;
}

/* Table Header - Ensure proper layout for toggles */
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    min-width: 0;
    overflow: visible;
}

/* Ensure table header doesn't constrain mode toggles */
.pivot-table-container .table-header {
    padding: 0 0 1rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    min-width: 0;
    overflow: visible;
}

.pivot-table-container .table-wrapper {
    overflow-y: auto;
    max-height: 70vh;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    scroll-behavior: smooth;
    overflow-x: auto;
    background: rgba(15, 23, 42, 0.3);
}

/* Scrollbar styling for pivot table - matching report viewer */
.pivot-table-container .table-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.pivot-table-container .table-wrapper::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 5px;
}

.pivot-table-container .table-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 5px;
    border: 2px solid rgba(30, 41, 59, 0.5);
}

.pivot-table-container .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
}

.pivot-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    background: transparent;
    table-layout: fixed;
    position: relative;
}

.pivot-table td {
    color: #e2e8f0;
    font-size: 0.8125rem;
    font-weight: 400;
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(71, 85, 105, 0.3);
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 100px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(30, 41, 59, 0.6);
    transition: background-color 0.2s ease;
    font-variant-numeric: tabular-nums;
}

.pivot-table td:hover {
    background: rgba(51, 65, 85, 0.8);
}

/* Clean table row styling with dark theme gradients - FORCE OVERRIDE */
.pivot-table tr:nth-child(even) td {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(51, 65, 85, 0.5) 100%) !important;
}

.pivot-table tr:nth-child(odd) td {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.6) 100%) !important;
}

.pivot-table tr:nth-child(even) td:hover {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.9) 0%, rgba(71, 85, 105, 0.7) 100%) !important;
}

.pivot-table tr:nth-child(odd) td:hover {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.7) 100%) !important;
}

.pivot-table th {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%) !important;
    color: #e2e8f0 !important;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-bottom: 2px solid rgba(99, 102, 241, 0.3);
    padding: 0.75rem 0.5rem;
    min-height: 50px;
    vertical-align: middle;
    text-align: center;
    opacity: 1 !important;
}

/* Month header specific styling - enhanced visibility */
.pivot-table th.month-header {
    border-left: 1px solid rgba(99, 102, 241, 0.3);
    border-right: 1px solid rgba(99, 102, 241, 0.3);
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.9) 100%) !important;
    opacity: 1 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* REMOVE MONTH HEADER HOVER TO PREVENT FLICKERING */
.pivot-table th.month-header:hover {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(71, 85, 105, 0.9) 100%) !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

/* AGGRESSIVE FIX: Remove ALL backdrop-filter from table elements */
.pivot-table-container,
.pivot-table-container *,
.pivot-table,
.pivot-table *,
.pivot-table th,
.pivot-table th *,
.pivot-table td,
.pivot-table td * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-attachment: scroll !important;
}

/* NUCLEAR ANTI-FLICKER SOLUTION - Complete header fix (Dark Theme) */
.pivot-table th,
.pivot-table th.month-header,
.pivot-table th.arr-column,
.pivot-table th.id-column,
.pivot-table th.name-column,
.pivot-table th.product-column,
.pivot-table thead th,
.pivot-table thead th * {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
    background-color: rgba(30, 41, 59, 0.98) !important;
    background-image: none !important;
    background-attachment: scroll !important;
    color: #e2e8f0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    border-bottom: 2px solid rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) !important;
    transition: none !important;
    will-change: auto !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
}

/* Override any inherited transparency */
.pivot-table th::before,
.pivot-table th::after {
    display: none !important;
}

/* Ensure headers stay solid during scroll */
.pivot-table th[style*="backdrop-filter"],
.pivot-table th[style*="opacity"] {
    backdrop-filter: none !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
}

/* NUCLEAR OPTION: Force headers to NEVER be transparent (Dark Theme) */
.pivot-table th,
.pivot-table th *,
.pivot-table thead th,
.pivot-table thead th * {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
    background-color: rgba(30, 41, 59, 0.98) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    /* Override any inline styles */
    background-attachment: scroll !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    background-position: 0% 0% !important;
    background-repeat: repeat !important;
    background-size: auto !important;
}

/* ULTRA-AGGRESSIVE FIX: Override ANY potential transparency (Dark Theme) */
.pivot-table-container .pivot-table th,
.pivot-table-container .pivot-table thead th,
.pivot-table-container .pivot-table th.month-header,
.pivot-table-container .pivot-table th.arr-column,
.pivot-table-container .pivot-table th.id-column,
.pivot-table-container .pivot-table th.name-column,
.pivot-table-container .pivot-table th.product-column {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
    background-color: rgba(30, 41, 59, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* Force headers to stay opaque even when cursor is within table (Dark Theme) */
.pivot-table-container:hover .pivot-table th,
.pivot-table-container:hover .pivot-table thead th,
.pivot-table-container .pivot-table:hover th,
.pivot-table-container .pivot-table:hover thead th {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
    background-color: rgba(30, 41, 59, 0.98) !important;
    opacity: 1 !important;
}

/* Override any JavaScript or CSS that might make headers transparent (Dark Theme) */
.pivot-table th[style*="opacity"],
.pivot-table thead th[style*="opacity"],
.pivot-table-container .pivot-table th[style*="opacity"],
.pivot-table-container .pivot-table thead th[style*="opacity"] {
    opacity: 1 !important;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
    background-color: rgba(30, 41, 59, 0.98) !important;
}

/* REMOVE ALL HOVER EFFECTS TO PREVENT FLICKERING (Dark Theme) */
.pivot-table-container:hover .pivot-table th,
.pivot-table-container:focus .pivot-table th,
.pivot-table-container:active .pivot-table th,
.pivot-table:hover .pivot-table th,
.pivot-table:focus .pivot-table th,
.pivot-table:active .pivot-table th {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
    background-color: rgba(30, 41, 59, 0.98) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
}

/* Clean table styling (Dark Theme) */
.pivot-table th,
.pivot-table th *,
.pivot-table thead th,
.pivot-table thead th *,
.pivot-table th[style*="opacity"],
.pivot-table th[style*="backdrop"],
.pivot-table th[style*="filter"],
.pivot-table th[style*="transform"] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
    background-color: rgba(30, 41, 59, 0.98) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    color: #e2e8f0 !important;
}

/* Override any JavaScript-set styles (Dark Theme) */
.pivot-table th[style] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
    background-color: rgba(30, 41, 59, 0.98) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #e2e8f0 !important;
}

/* ISOLATION FIX: Prevent table rows from interfering with sticky header */
.pivot-table tbody {
    isolation: isolate !important;
    contain: layout style !important;
}

.pivot-table tbody tr {
    isolation: isolate !important;
    contain: layout !important;
    will-change: auto !important;
}

/* HEADER ISOLATION: Create a separate stacking context for headers (Dark Theme) */
.pivot-table thead {
    isolation: isolate !important;
    contain: layout style !important;
    z-index: 10000 !important;
    position: relative !important;
}

.pivot-table thead th {
    isolation: isolate !important;
    contain: layout style !important;
    z-index: 10001 !important;
    position: sticky !important;
    top: 0 !important;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%) !important;
    background-color: rgba(30, 41, 59, 0.98) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
}

/* Month header content styling (Dark Theme) */
.month-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: 1.2;
}

.month-header-content .month-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 2px;
}

.month-header-content .year {
    font-size: 0.7rem;
    font-weight: 600;
    color: #cbd5e1;
    opacity: 1;
}

/* Removed duplicate styling - handled above */

/* Specific column widths */
.pivot-table th:first-child,
.pivot-table td:first-child {
    min-width: 150px; /* Reporting ID */
    max-width: 200px;
}

.pivot-table th:nth-child(2),
.pivot-table td:nth-child(2) {
    min-width: 200px; /* Reporting Name */
    max-width: 250px;
}

.pivot-table th:nth-child(3),
.pivot-table td:nth-child(3) {
    min-width: 120px; /* Product Group (if present) */
    max-width: 150px;
}

/* DISABLED: Row hover effects that compete with sticky header (Dark Theme) */
.pivot-table tr:hover {
    background: rgba(51, 65, 85, 0.5);
    /* transform: translateY(-1px); DISABLED - causes header competition */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); DISABLED - causes header competition */
}

.pivot-table tr {
    /* transition: all var(--transition-fast); DISABLED - causes header competition */
    transition: background-color 0.2s ease !important;
}

.pivot-table td {
    border-right: 1px solid rgba(71, 85, 105, 0.3);
}

.pivot-table td:last-child {
    border-right: none;
}

.pivot-table .pivot-header {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%);
    font-weight: 600;
    color: #e2e8f0;
}

.pivot-table .pivot-cell {
    padding: 0.5rem 0.75rem;
}

.pivot-table .pivot-cell.numeric {
    text-align: right;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 500;
    color: #f1f5f9;
}

/* ARR Table Width Optimization - Fit 12 months or less within container */
.pivot-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto; /* Allow flexible column sizing */
}

/* When there are 12 or fewer ARR columns, use fixed layout to fit container */
.pivot-table.arr-columns-12-or-less {
    table-layout: fixed;
    width: 100%;
}

/* ARR column width calculation for 12 months or less */
.pivot-table.arr-columns-12-or-less .arr-column {
    width: calc((100% - 300px) / var(--arr-column-count, 12)); /* Subtract space for non-ARR columns */
    min-width: 80px;
    max-width: 120px;
}

/* Ensure name and product columns have fixed width */
.pivot-table.arr-columns-12-or-less .name-column,
.pivot-table.arr-columns-12-or-less .product-column {
    width: 150px;
    min-width: 150px;
    max-width: 200px;
}

/* Hide horizontal scrollbar when fitting within container */
.pivot-table.arr-columns-12-or-less {
    overflow-x: hidden;
}

.pivot-table-container .table-wrapper:has(.pivot-table.arr-columns-12-or-less) {
    overflow-x: hidden;
}

/* ARR columns styling (Dark Theme) */
.pivot-table .arr-column,
.pivot-table .arr-value {
    text-align: right;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 500;
    min-width: 90px;
    max-width: 110px;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
    color: #1e293b;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.5rem 0.75rem;
}

.pivot-table .arr-value:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: scale(1.02);
    overflow: visible;
    white-space: normal;
    z-index: 10;
    position: relative;
    max-width: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pivot-table .arr-value.editable-cell {
    position: relative;
}

.pivot-table .arr-value.editable-cell::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pivot-table .arr-value.editable-cell:hover::after {
    opacity: 0.7;
}

.pivot-table .arr-value.editing {
    background: rgba(139, 92, 246, 0.1);
    border: 2px solid var(--primary-color);
}

.pivot-table .arr-value.adjusted {
    background: rgba(34, 197, 94, 0.15);
    border-left: 4px solid var(--success);
    position: relative;
}

.pivot-table .arr-value.adjusted::before {
    content: '✓';
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 10px;
    color: var(--success);
    font-weight: bold;
}

.cell-edit-input {
    outline: none;
    color: var(--text-primary) !important;
    background: var(--bg-primary) !important;
    border: 2px solid var(--primary-color) !important;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.875rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    text-align: right;
    box-shadow: rgba(139, 92, 246, 0.2) 0px 0px 0px 2px;
    width: 100%;
    height: 100%;
}

.cell-edit-input:focus {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3) !important;
    color: var(--text-primary) !important;
    background: var(--bg-primary) !important;
}

.pivot-table .arr-value:empty::before {
    content: '$0';
    color: var(--text-secondary);
    font-weight: 400;
}

/* ID columns styling */
.pivot-table .id-column,
.pivot-table .id-value {
    min-width: 120px;
    max-width: 150px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.875rem;
}

/* Name columns styling */
.pivot-table .name-column,
.pivot-table .name-value {
    min-width: 150px;
    max-width: 200px;
    font-weight: 500;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.4;
    vertical-align: top;
}

/* Product group columns styling */
.pivot-table th[data-column="product_group"],
.pivot-table td[data-column="product_group"],
.pivot-table .product-column,
.pivot-table .product-value {
    min-width: 100px;
    max-width: 120px;
    text-align: center;
    font-size: 0.875rem;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.4;
    vertical-align: top;
}

/* Adjustment Mode Table Styling */
.adjustment-mode-active .pivot-table-container {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.adjustment-mode-active .pivot-table {
    border-collapse: separate;
    border-spacing: 0;
}

.adjustment-mode-active .pivot-table th,
.adjustment-mode-active .pivot-table td {
    border: 1px solid rgba(75, 85, 99, 0.4);
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    color: #e5e7eb !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.adjustment-mode-active .pivot-table th {
    background: rgba(31, 41, 55, 0.9) !important;
    backdrop-filter: blur(15px);
    border-bottom: 2px solid rgba(75, 85, 99, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: #f3f4f6 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    font-size: 0.9rem !important;
}

.adjustment-mode-active .pivot-table tr:nth-child(even) td {
    background: rgba(17, 24, 39, 0.5) !important;
    color: #e5e7eb !important;
}

.adjustment-mode-active .pivot-table tr:nth-child(odd) td {
    background: rgba(17, 24, 39, 0.7) !important;
    color: #e5e7eb !important;
}

.adjustment-mode-active .pivot-table td:hover {
    background: rgba(59, 130, 246, 0.3) !important;
    color: #f3f4f6 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


/* Editable cell styling in adjustment mode */
.adjustment-mode-active .pivot-table td.editing-enabled {
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.adjustment-mode-active .pivot-table td.editing-enabled:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.5);
    transform: scale(1.02);
    box-shadow: 
        0 8px 25px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.adjustment-mode-active .pivot-table td.editing-enabled:active {
    transform: scale(0.98);
    background: rgba(59, 130, 246, 0.3) !important;
}

/* Cell editing input styling */
.adjustment-mode-active .cell-edit-input {
    background: rgba(31, 41, 55, 0.95);
    border: 2px solid rgba(59, 130, 246, 0.5);
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f3f4f6;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(75, 85, 99, 0.2);
    transition: all 0.3s ease;
}

.adjustment-mode-active .cell-edit-input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.8);
    background: rgba(31, 41, 55, 1);
    box-shadow: 
        0 0 0 4px rgba(59, 130, 246, 0.2),
        0 8px 25px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(75, 85, 99, 0.3);
    transform: scale(1.05);
}




/* Adjustment Mode Full-Screen Animation */
.adjustment-mode-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.95) 0%, 
        rgba(20, 20, 40, 0.98) 50%, 
        rgba(0, 0, 0, 0.95) 100%);
    backdrop-filter: blur(20px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity 0.1s ease;
}

.adjustment-mode-content {
    text-align: center;
    transform: scale(0.5) translateY(50px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
}

.adjustment-mode-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.adjustment-mode-content {
    text-align: center;
    transform: scale(0.8) translateY(20px);
    opacity: 0.8;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.adjustment-mode-overlay.active .adjustment-mode-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.adjustment-mode-title {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(135deg, 
        #10b981 0%, 
        #34d399 25%, 
        #6ee7b7 50%, 
        #34d399 75%, 
        #10b981 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
    animation: adjustmentTitleGlow 2s ease-in-out infinite alternate;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.adjustment-mode-subtitle {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    animation: adjustmentSubtitleFloat 3s ease-in-out infinite;
}

.adjustment-mode-icon {
    font-size: 6rem;
    margin-bottom: 2rem;
    animation: adjustmentIconSpin 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.6));
}

.adjustment-mode-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.adjustment-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: linear-gradient(45deg, #10b981, #34d399);
    border-radius: 50%;
    animation: adjustmentParticleFloat 4s linear infinite;
}

.adjustment-mode-progress {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin: 2rem auto 0 auto;
    display: block;
}

.adjustment-mode-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
    border-radius: 2px;
    width: 0%;
    animation: adjustmentProgressFill 2s ease-out forwards;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

/* Keyframe Animations */
@keyframes adjustmentTitleGlow {
    0% {
        background-position: 0% 50%;
        text-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
        transform: scale(1);
    }
    100% {
        background-position: 100% 50%;
        text-shadow: 0 0 50px rgba(16, 185, 129, 0.8);
        transform: scale(1.05);
    }
}

@keyframes adjustmentSubtitleFloat {
    0%, 100% {
        transform: translateY(0px);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

@keyframes adjustmentIconSpin {
    0% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.6));
    }
    50% {
        transform: rotate(180deg) scale(1.1);
        filter: drop-shadow(0 0 30px rgba(16, 185, 129, 0.8));
    }
    100% {
        transform: rotate(360deg) scale(1);
        filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.6));
    }
}

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

@keyframes adjustmentProgressFill {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes progressBar {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* Adjustment Mode Toggle Styling */
.pagination-info-text {
    margin-right: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}


.adjustment-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.adjustment-toggle-btn:hover {
    border-color: var(--primary-color);
    background: var(--bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.adjustment-toggle-btn.active {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.adjustment-toggle-btn.active:hover {
    background: rgba(34, 197, 94, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.toggle-icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.adjustment-toggle-btn:hover .toggle-icon {
    transform: scale(1.1);
}

.toggle-text {
    font-weight: 600;
    letter-spacing: 0.025em;
}


/* Uniform Button Base Styling */
.adjustment-toggle-btn,
.gaps-toggle-btn,
.change-detection-btn,
.export-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    min-width: 140px;
    justify-content: center;
}

.adjustment-toggle-btn:hover,
.gaps-toggle-btn:hover,
.change-detection-btn:hover,
.export-btn:hover {
    border-color: var(--primary-color);
    background: var(--bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.adjustment-toggle-btn:hover .toggle-icon,
.gaps-toggle-btn:hover .toggle-icon,
.change-detection-btn:hover .toggle-icon,
.export-btn:hover .toggle-icon {
    transform: scale(1.1);
}

.toggle-icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.toggle-text {
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Individual Button Active States */
.adjustment-toggle-btn.active {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.adjustment-toggle-btn.active:hover {
    background: rgba(34, 197, 94, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.gaps-toggle-btn.active {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.gaps-toggle-btn.active:hover {
    background: rgba(245, 158, 11, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.change-detection-btn.active {
    border-color: #10b981;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    font-weight: bold;
}

.change-detection-btn.active:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.export-btn:hover {
    border-color: var(--primary-color);
    background: var(--bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Export Button Styling */
.export-toggle {
    display: inline-flex;
    align-items: center;
}

/* Change Detection Button Styling */
.change-detection-toggle {
    display: inline-flex;
    align-items: center;
}

    /* Change Detection Visual Styling */
    .arr-value.change-new_customer {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        color: white !important;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }

    .arr-value.change-churn {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
        color: white !important;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    }

    .arr-value.change-major_upsell {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
        color: white !important;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    }

    .arr-value.change-major_downsell {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
        color: white !important;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
    }

    .arr-value.change-price_increase {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
        color: white !important;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    }

    .arr-value.change-price_decrease {
        background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%) !important;
        color: white !important;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(132, 204, 22, 0.3);
    }

    .arr-value.change-upsell {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
        color: white !important;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }

    .arr-value.change-downsell {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
        color: white !important;
        font-weight: bold;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    }

    /* Change Badge Styling - Text-based badges for clarity */
    .change-badge {
        position: absolute;
        top: -6px;
        right: 2px;
        padding: 2px 6px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        z-index: 10;
        white-space: nowrap;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .change-badge-new_customer {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
    }

    .change-badge-churn {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
    }

    .change-badge-major_upsell {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        color: white;
    }

    .change-badge-upsell {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
    }

    .change-badge-price_increase {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: white;
    }

    .change-badge-major_downsell {
        background: linear-gradient(135deg, #f97316, #ea580c);
        color: white;
    }

    .change-badge-downsell {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
    }

    .change-badge-price_decrease {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
    }

    .change-badge-gap_correction {
        background: linear-gradient(135deg, #6b7280, #4b5563);
        color: white;
    }

    .change-badge-no_change,
    .change-badge-flat {
        background: linear-gradient(135deg, #64748b, #475569);
        color: white;
    }

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

    /* Simple Change Tooltip - COMPLETELY OPAQUE */
    .change-tooltip {
        position: absolute;
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        background-image: none !important;
        color: white !important;
        padding: 8px 12px !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        z-index: 10000 !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease !important;
        pointer-events: none !important;
        border: 1px solid #333 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        mix-blend-mode: normal !important;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .change-tooltip.show {
        opacity: 1 !important;
        visibility: visible !important;
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
    }
    
    .change-tooltip .tooltip-title {
        font-weight: bold;
        margin-bottom: 4px;
        color: #fff !important;
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
    }
    
    .change-tooltip .tooltip-content {
        color: #e0e0e0 !important;
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
    }
    
    .change-tooltip .tooltip-content div {
        margin: 2px 0;
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        color: #e0e0e0 !important;
    }
    
    /* Force all tooltip content to be opaque */
    .change-tooltip * {
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
        background-image: none !important;
        color: #e0e0e0 !important;
        opacity: 1 !important;
    }

    /* ===== EXPORT LOADING ANIMATION ===== */
    .export-loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .export-loading-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    .export-loading-content {
        background: white;
        padding: 30px 40px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        text-align: center;
        max-width: 400px;
        margin: 0 20px;
    }

    .export-loading-spinner {
        width: 50px;
        height: 50px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: exportSpin 1s linear infinite;
        margin: 0 auto 20px;
    }

    .export-loading-text {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 10px;
    }

    .export-loading-subtext {
        font-size: 14px;
        color: #666;
        margin-bottom: 0;
    }

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

    /* Export progress bar */
    .export-progress-bar {
        width: 100%;
        height: 4px;
        background: #e0e0e0;
        border-radius: 2px;
        margin-top: 15px;
        overflow: hidden;
    }

    .export-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #3498db, #2ecc71);
        border-radius: 2px;
        width: 0%;
        transition: width 0.3s ease;
        animation: exportProgressPulse 2s ease-in-out infinite;
    }

    @keyframes exportProgressPulse {
        0%, 100% { opacity: 0.8; }
        50% { opacity: 1; }
    }


    .tooltip-title {
        font-weight: bold;
        margin-bottom: 4px;
        color: #fbbf24;
    }

    .tooltip-content div {
        margin: 2px 0;
    }

/* Gap-filled cell styling */
.arr-value.gap-filled {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #dc2626 !important;
    font-weight: 700;
    border: 2px solid #dc2626 !important;
    position: relative;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.3);
    overflow: hidden;
    box-sizing: border-box;
}

.arr-value.gap-filled::before {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    opacity: 0.8;
}

.arr-value.gap-filled::after {
    content: 'GAP FILLED';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 600;
    color: #dc2626;
    background: rgba(251, 191, 36, 0.9);
    padding: 2px 4px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 10;
}

/* Editable cell states */
.arr-value.editable-cell.editing-enabled {
    position: relative;
    transition: all 0.2s ease;
}

.arr-value.editable-cell.editing-enabled:hover {
    background: rgba(16, 185, 129, 0.1);
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.arr-value.editable-cell.editing-enabled::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.arr-value.editable-cell.editing-enabled:hover::after {
    opacity: 0.7;
}

.arr-value.editable-cell:not(.editing-enabled) {
    cursor: default !important;
    opacity: 0.8;
}

.arr-value.editable-cell:not(.editing-enabled):hover {
    background: rgba(255, 255, 255, 0.05);
    transform: none;
    box-shadow: none;
}

/* Scrollbar styling for pivot table container */
.pivot-table-container::-webkit-scrollbar {
    height: 8px;
}

.pivot-table-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.pivot-table-container::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: var(--radius-sm);
}

.pivot-table-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
}

/* ===== PIVOT PAGINATION ===== */
.pivot-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.pivot-pagination-top {
    margin-top: 0;
    margin-bottom: 1rem;
}

.pivot-pagination .pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pivot-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pivot-pagination .pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0.5rem;
}

.pivot-pagination .page-btn {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 2.5rem;
    text-align: center;
}

.pivot-pagination .page-btn:hover:not(:disabled) {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pivot-pagination .page-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pivot-pagination .page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pivot-pagination .page-ellipsis {
    padding: 0.5rem 0.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.kpi-icon.danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    color: var(--danger);
}

.kpi-content {
    margin-bottom: 1rem;
}

.kpi-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.kpi-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    word-break: break-all;
    overflow-wrap: break-word;
}

.kpi-change {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.kpi-change svg {
    width: 16px;
    height: 16px;
}

.kpi-change.positive {
    color: var(--success);
}

.kpi-change.negative {
    color: var(--danger);
}

.kpi-change.neutral {
    color: var(--text-secondary);
}

.kpi-sparkline {
    height: 40px;
    margin-top: 1rem;
    opacity: 0.5;
}

/* ===== CHARTS ===== */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

/* Analytics Card styling */
.analytics-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    transition: all var(--transition-base);
    position: relative;
    width: 100%;
    min-width: 0; /* Prevents grid items from overflowing */
}

.analytics-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.analytics-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.analytics-card .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.analytics-card .chart-content {
    position: relative;
    height: 300px;
    width: 100%;
}

.analytics-card .chart-content canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Analytics Grid - 2 charts per row with proper width distribution */
.analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Even distribution - each chart takes 50% */
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}

/* Full width analytics grid */
.analytics-grid.full-width {
    grid-template-columns: 1fr;
}

.chart-card {
    grid-column: span 6;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    transition: all var(--transition-base);
}

.chart-card.large {
    grid-column: span 12;
}

/* Magazine chart layout — three equal cards, big KPI + sparkline */
.charts-grid.charts-magazine {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.charts-grid.charts-magazine .chart-card.magazine-card {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.12) 0%, rgba(15, 15, 28, 0.98) 100%);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 20px;
}
.charts-grid.charts-magazine .magazine-kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.charts-grid.charts-magazine .magazine-kpi {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}
.charts-grid.charts-magazine .chart-header.magazine-header {
    width: 100%;
    padding: 0.5rem 0;
    border-bottom: none;
    justify-content: center;
    flex-wrap: wrap;
}
.charts-grid.charts-magazine .magazine-header .chart-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}
.charts-grid.charts-magazine .magazine-header .chart-subtitle {
    display: none;
}
.charts-grid.charts-magazine .magazine-header .chart-controls {
    margin-top: 0.5rem;
}
.charts-grid.charts-magazine .magazine-spark {
    width: 100%;
    height: 100px;
    margin-top: 0.75rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.charts-grid.charts-magazine .magazine-spark .chart-container {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0.5rem;
}
.charts-grid.charts-magazine .magazine-spark .chart-container canvas {
    max-height: 90px;
}
@media (max-width: 900px) {
    .charts-grid.charts-magazine {
        grid-template-columns: 1fr;
    }
}

/* Full width analytics cards */
.analytics-card.full-width {
    grid-column: span 1;
    width: 100%;
}

/* ===== DASHBOARD HERO + PRODUCT ARR (Mockup #3) ===== */
.hero-block {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: none;
    border-radius: var(--radius-xl);
    padding: 2rem 2.5rem;
    margin-bottom: 2rem;
}
.hero-block .hero-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.hero-block .hero-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.hero-block .hero-value.hero-xl {
    font-size: 3rem;
}
.hero-block .hero-sub {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}
.hero-block .hero-sub .positive {
    color: var(--success);
}
.dashboard-section-title {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-weight: 600;
}
.product-arr-grid {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.product-arr-grid.cols-6 {
    grid-template-columns: repeat(6, 1fr);
}
/* 4 cards per row, ~25% width each so 8 cards = 2 full rows */
.product-arr-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.product-arr-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    transition: all var(--transition-base);
}
.product-arr-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-lg);
}
.product-arr-card .pg-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.product-arr-card .pg-arr {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}
.product-arr-card .pg-pct {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}
@media (max-width: 1200px) {
    .product-arr-grid.cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    .product-arr-grid.cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .product-arr-grid.cols-6 {
        grid-template-columns: 1fr;
    }
    .product-arr-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Ensure customer classification section is hidden by default */
#customer-classification {
    display: none !important;
}

#customer-classification.active {
    display: block !important;
}

.chart-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-lg);
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.chart-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.chart-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
    margin-top: 0.5rem;
}

/* Responsive chart subtitle scaling */
@media (max-width: 768px) {
    .chart-subtitle {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }
}

@media (max-width: 480px) {
    .chart-subtitle {
        font-size: 0.7rem;
        margin-top: 0.25rem;
    }
}

.chart-controls {
    display: flex;
    gap: 0.5rem;
}

.chart-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.chart-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.chart-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: transparent;
    color: white;
}

/* Chart.js legend styling fixes */
.chartjs-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* Force all chart text to be horizontal and visible */
canvas {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* Chart container text fixes */
.chart-container * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* Hide any Chart.js generated titles */
.chartjs-chart-title {
    display: none !important;
}

/* Ensure chart subtitles are hidden by default */
.chart-subtitle {
    display: none !important;
}

.chartjs-legend li {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0.25rem 0 !important;
    flex-shrink: 0 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

.chartjs-legend li span {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
}

.chartjs-legend li {
    color: #ffffff !important;
}

/* Ensure chart legend text is always visible */
.chartjs-legend li,
.chartjs-legend li span,
.chartjs-legend li * {
    color: #ffffff !important;
}

/* Chart.js specific legend text styling */
canvas + div .chartjs-legend li,
canvas + div .chartjs-legend li span,
canvas + div .chartjs-legend li * {
    color: #ffffff !important;
}

/* Ensure chart containers have proper spacing for legends */
.chart-container {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-bottom: 2rem; /* Space for legend */
}

/* Fix Chart.js legend text wrapping and positioning */
.chart-container canvas {
    max-width: 100%;
    height: auto;
}

/* Chart.js legend styling fixes */
.chartjs-legend {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
}

.chartjs-legend li {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0.25rem 0 !important;
}

.chartjs-legend li span {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
}

.chart-loading {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ===== STICKY FILTER FOOTER ===== */
.sticky-filter-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(31, 41, 55, 0.95) 100%);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(99, 102, 241, 0.3);
    padding: 8px 16px;
    display: none; /* Initially hidden */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.sticky-filter-footer:hover {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.98) 0%, rgba(31, 41, 55, 0.98) 100%);
    border-top-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.3);
}

.filter-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-icon {
    font-size: 14px;
    opacity: 0.8;
    animation: filterIconPulse 2s ease-in-out infinite;
}

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

.filter-text {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Backend Toggle Styles */
.backend-toggle-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding-left: 20px;
    border-left: 1px solid rgba(99, 102, 241, 0.3);
}

.backend-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.backend-label {
    font-size: 11px;
    font-weight: 500;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.backend-label.active {
    opacity: 1;
    text-shadow: 0 0 8px currentColor;
}

.snowflake-label {
    color: #38bdf8;
}

.clickhouse-label {
    color: #fbbf24;
}

.backend-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.backend-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.backend-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    transition: 0.4s;
    border-radius: 22px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.backend-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.backend-switch input:checked + .backend-slider {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.backend-switch input:checked + .backend-slider:before {
    transform: translateX(22px);
}

.backend-switch input:focus + .backend-slider {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.backend-status {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    min-width: 80px;
}

.backend-status.loading {
    color: #fbbf24;
}

.backend-status.connected {
    color: #34d399;
}

.backend-status.error {
    color: #f87171;
}

@media (max-width: 768px) {
    .backend-toggle-container {
        display: none !important;
    }
}

.filter-label {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-value {
    font-size: 13px;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Ensure main content doesn't get hidden behind footer */
body {
    padding-bottom: 40px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sticky-filter-footer {
        padding: 6px 12px;
    }
    
    .filter-indicator {
        gap: 6px;
    }
    
    .filter-icon {
        font-size: 12px;
    }
    
    .filter-label {
        font-size: 10px;
    }
    
    .filter-value {
        font-size: 12px;
    }
    
    body {
        padding-bottom: 35px;
    }
}
[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-animate="fade-up"][data-delay="0"] {
    animation-delay: 0s;
}

[data-animate="fade-up"][data-delay="100"] {
    animation-delay: 0.1s;
}

[data-animate="fade-up"][data-delay="200"] {
    animation-delay: 0.2s;
}

[data-animate="fade-up"][data-delay="300"] {
    animation-delay: 0.3s;
}

[data-animate="fade-up"][data-delay="400"] {
    animation-delay: 0.4s;
}

[data-animate="fade-up"][data-delay="500"] {
    animation-delay: 0.5s;
}

[data-animate="fade-up"][data-delay="600"] {
    animation-delay: 0.6s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== TITLE CARD LOADING OVERLAY (active state) ===== */
/* ::before (vignette) and ::after (grain) are defined in the Title Card block earlier */

.loading-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.loading-spinner {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.spinner-ring:nth-child(2) {
    border-top-color: var(--secondary);
    animation-delay: -0.5s;
}

.spinner-ring:nth-child(3) {
    border-top-color: var(--primary-light);
    animation-delay: -1s;
}

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

.loading-text {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    margin-top: 20px;
    text-align: center;
    text-shadow: 
        0 0 10px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(0, 255, 255, 0.6),
        0 0 30px rgba(0, 255, 255, 0.4);
    animation: loadingTextPulse 2s ease-in-out infinite alternate;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Beautiful animated loading messages */
.loading-messages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 40px 0 30px 0;
    opacity: 1;
    animation: none;
}

.loading-message {
    text-align: center;
    font-weight: 600;
    letter-spacing: 1.5px;
    opacity: 1;
    transform: translateY(0);
    position: relative;
}

.loading-message.primary {
    color: #00ffff;
    font-size: 2.2rem;
    font-weight: 700;
    text-shadow: 
        0 0 20px rgba(0, 255, 255, 1),
        0 0 30px rgba(0, 255, 255, 0.8),
        0 0 40px rgba(0, 255, 255, 0.6),
        0 0 50px rgba(0, 255, 255, 0.4);
    animation: 
        primaryMessageGlow 3s ease-in-out infinite alternate,
        primaryMessageFloat 4s ease-in-out infinite,
        primaryMessagePulse 2.5s ease-in-out infinite;
}

.loading-message.secondary {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 500;
    text-shadow: 
        0 0 15px rgba(255, 255, 255, 0.9),
        0 0 25px rgba(255, 255, 255, 0.7),
        0 0 35px rgba(255, 255, 255, 0.5);
    animation: 
        secondaryMessageFade 4s ease-in-out infinite alternate,
        secondaryMessageFloat 5s ease-in-out infinite,
        secondaryMessagePulse 3s ease-in-out infinite;
}

/* Keyframe animations for loading messages */
@keyframes loadingMessagesFadeIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes primaryMessageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.7) rotateX(90deg);
    }
    30% {
        opacity: 0.8;
        transform: translateY(20px) scale(0.9) rotateX(45deg);
    }
    60% {
        opacity: 1;
        transform: translateY(0) scale(1.05) rotateX(0deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
    }
}

@keyframes secondaryMessageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8) rotateX(60deg);
    }
    40% {
        opacity: 0.7;
        transform: translateY(15px) scale(0.95) rotateX(30deg);
    }
    70% {
        opacity: 1;
        transform: translateY(0) scale(1.03) rotateX(0deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
    }
}

@keyframes primaryMessagePulse {
    0%, 100% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(1.2) saturate(1.3);
    }
}

@keyframes secondaryMessagePulse {
    0%, 100% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(1.1) saturate(1.1);
    }
}

@keyframes primaryMessageFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes secondaryMessageFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes primaryMessageGlow {
    0% {
        text-shadow: 
            0 0 20px rgba(0, 255, 255, 1),
            0 0 30px rgba(0, 255, 255, 0.8),
            0 0 40px rgba(0, 255, 255, 0.6),
            0 0 50px rgba(0, 255, 255, 0.4);
    }
    100% {
        text-shadow: 
            0 0 30px rgba(0, 255, 255, 1),
            0 0 40px rgba(0, 255, 255, 0.9),
            0 0 50px rgba(0, 255, 255, 0.7),
            0 0 60px rgba(0, 255, 255, 0.5);
    }
}

@keyframes secondaryMessageFade {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes loadingTextPulse {
    0% {
        transform: scale(1);
        text-shadow: 
            0 0 10px rgba(0, 255, 255, 0.8),
            0 0 20px rgba(0, 255, 255, 0.6),
            0 0 30px rgba(0, 255, 255, 0.4);
    }
    100% {
        transform: scale(1.05);
        text-shadow: 
            0 0 15px rgba(0, 255, 255, 1),
            0 0 25px rgba(0, 255, 255, 0.8),
            0 0 35px rgba(0, 255, 255, 0.6);
    }
}

/* Hollywood Progress Bar */
.loading-progress {
    width: 300px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 255, 255, 0.3);
}

.loading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(0, 255, 255, 0.8) 0%, 
        rgba(255, 255, 255, 1) 50%, 
        rgba(0, 255, 255, 0.8) 100%);
    border-radius: 3px;
    animation: progressGlow 2s ease-in-out infinite alternate;
    box-shadow: 
        0 0 10px rgba(0, 255, 255, 0.8),
        0 0 20px rgba(0, 255, 255, 0.6);
}

@keyframes progressGlow {
    0% {
        box-shadow: 
            0 0 10px rgba(0, 255, 255, 0.8),
            0 0 20px rgba(0, 255, 255, 0.6);
    }
    100% {
        box-shadow: 
            0 0 15px rgba(0, 255, 255, 1),
            0 0 25px rgba(0, 255, 255, 0.8),
            0 0 35px rgba(0, 255, 255, 0.6);
    }
}

/* ===== TRENDS ANALYTICS ===== */
.trends-content {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.trend-period-selector {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.period-buttons {
    display: flex;
    background: rgba(31, 41, 55, 0.5);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.period-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.period-btn:hover {
    color: #e5e7eb;
    background: rgba(99, 102, 241, 0.1);
}

.period-btn.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.trends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.trend-card {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.8) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.trend-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.trend-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.trend-period {
    background: rgba(99, 102, 241, 0.2);
    color: #a78bfa;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.trend-chart-container {
    height: 200px;
    margin-bottom: 1rem;
    position: relative;
}

.trend-summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.trend-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.metric-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    margin-bottom: 4px;
}

.metric-value {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.trends-insights {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.8) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.insights-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.insights-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.insights-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1rem;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.insight-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.insight-text {
    color: #e5e7eb;
    line-height: 1.5;
}

.insight-text strong {
    color: #ffffff;
    font-weight: 600;
}

/* Responsive adjustments for trends */
@media (max-width: 768px) {
    .trends-content {
        padding: 1rem;
    }
    
    .trends-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .trend-card {
        padding: 1rem;
    }
    
    .trend-summary {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .insights-content {
        gap: 0.75rem;
    }
    
    .insight-item {
        padding: 0.75rem;
    }
}

/* ===== SPECTACULAR FIREWORK ANIMATIONS ===== */
.firework {
    display: none; /* Removed - main explosion circles causing visual issues */
}

.firework-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 30px currentColor;
    filter: brightness(2) saturate(2) contrast(1.5);
}

.firework-sparkle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #ffffff;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 
        0 0 5px #ffffff,
        0 0 10px #ffffff,
        0 0 15px #ffffff,
        0 0 20px #ffffff;
    animation: sparkleExplode 1s linear forwards;
}

/* Firework rings for expanding effect - REMOVED */
.firework-ring {
    display: none;
}

@keyframes fireworkPulse {
    0% {
        transform: scale(0);
        opacity: 1;
        filter: brightness(5) saturate(5) contrast(3);
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
        filter: brightness(4) saturate(4) contrast(2.5);
    }
    100% {
        transform: scale(2);
        opacity: 0;
        filter: brightness(3) saturate(3) contrast(2);
    }
}

@keyframes fireworkExplode {
    0% {
        transform: scale(0);
        opacity: 1;
        filter: brightness(2) saturate(2);
    }
    20% {
        transform: scale(1.2);
        opacity: 1;
        filter: brightness(2.5) saturate(2.5);
    }
    60% {
        transform: scale(2.2);
        opacity: 0.8;
        filter: brightness(2) saturate(2);
    }
    100% {
        transform: scale(3.2);
        opacity: 0;
        filter: brightness(1.5) saturate(1.5);
    }
}

@keyframes fireworkTrail {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    30% {
        transform: translate(calc(var(--random-x) * 0.3), calc(var(--random-y) * 0.3)) scale(0.9);
        opacity: 0.9;
    }
    70% {
        transform: translate(calc(var(--random-x) * 0.7), calc(var(--random-y) * 0.7)) scale(0.6);
        opacity: 0.6;
    }
    100% {
        transform: translate(var(--random-x), var(--random-y)) scale(0.3);
        opacity: 0;
    }
}

@keyframes sparkleExplode {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
        filter: brightness(2) saturate(2) contrast(1.5);
    }
    25% {
        transform: scale(0.8) rotate(90deg);
        opacity: 1;
        filter: brightness(2.5) saturate(2.5) contrast(1.8);
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.8;
        filter: brightness(2) saturate(2) contrast(1.5);
    }
    75% {
        transform: scale(1.6) rotate(270deg);
        opacity: 0.5;
        filter: brightness(1.5) saturate(1.5) contrast(1.2);
    }
    100% {
        transform: scale(2) rotate(360deg);
        opacity: 0;
        filter: brightness(1) saturate(1) contrast(1);
    }
}

@keyframes organicRingExpand {
    0% {
        transform: scale(0) rotate(var(--random-rotation, 0deg));
        opacity: 1;
        filter: brightness(1.5) saturate(1.5) blur(0px);
    }
    25% {
        transform: scale(0.4) rotate(calc(var(--random-rotation, 0deg) + 45deg));
        opacity: 0.9;
        filter: brightness(1.3) saturate(1.3) blur(0.5px);
    }
    50% {
        transform: scale(0.8) rotate(calc(var(--random-rotation, 0deg) + 90deg));
        opacity: 0.7;
        filter: brightness(1.1) saturate(1.1) blur(1px);
    }
    75% {
        transform: scale(1.2) rotate(calc(var(--random-rotation, 0deg) + 135deg));
        opacity: 0.4;
        filter: brightness(1) saturate(1) blur(1.5px);
    }
    100% {
        transform: scale(1.6) rotate(calc(var(--random-rotation, 0deg) + 180deg));
        opacity: 0;
        filter: brightness(0.8) saturate(0.8) blur(2px);
    }
}

.firework-explosion {
    animation: fireworkExplode 1.5s linear forwards;
}

.firework-trail {
    animation: fireworkTrail 2s linear forwards;
}

/* ===== MONTH PICKER ===== */
.month-picker {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px;
    min-width: 200px;
    font-family: inherit;
}

.month-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.month-picker-nav {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.month-picker-nav:hover {
    background-color: var(--bg-secondary);
}

.month-picker-year {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.month-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.month-picker-month {
    padding: 8px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.month-picker-month:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.month-picker-month.active {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    font-weight: 600;
}

.month-picker-month.active:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.month-picker-month.selected {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.month-picker-month.selected:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* ===== COMING SOON ===== */
.coming-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ===== ENHANCED ANIMATIONS & INTERACTIONS ===== */

/* Ripple Effect */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.btn,
.action-btn,
.nav-link,
.chart-btn,
.kpi-card,
.chart-card {
    position: relative;
    overflow: hidden;
}

.btn::after,
.action-btn::after,
.chart-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::after,
.action-btn:active::after,
.chart-btn:active::after {
    width: 200px;
    height: 200px;
}

/* Glow Pulse */
@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.6);
    }
}

.btn-primary:hover {
    animation: glow-pulse 2s ease-in-out infinite;
}

/* Number Counter Animation */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.kpi-value {
    animation: countUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.kpi-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.03) 50%, 
        transparent 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 3s infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.kpi-card:hover::after {
    opacity: 1;
}

/* Enhanced Card Hover */
.kpi-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        var(--shadow-xl),
        0 0 50px rgba(99, 102, 241, 0.2);
}

.chart-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        var(--shadow-xl),
        0 0 30px rgba(99, 102, 241, 0.15);
}

/* Button Press Animation */
@keyframes button-press {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.btn:active,
.action-btn:active,
.chart-btn:active {
    animation: button-press 0.2s ease-out;
}


/* Chart Animation Enhancement */
canvas {
    transition: opacity 0.5s ease-in-out;
}

/* Floating Animation for Icons */
@keyframes float-icon {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.kpi-icon {
    animation: float-icon 3s ease-in-out infinite;
    animation-play-state: paused;
}

.kpi-card:hover .kpi-icon {
    animation-play-state: running;
}

/* ===== LOADING SPINNERS ===== */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
    margin-right: 8px;
}

.loading-spinner.active {
    display: inline-block;
}

.kpi-value {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.kpi-text {
    transition: opacity 0.3s ease;
}

.kpi-text.loading {
    opacity: 0.5;
}

/* Period indicator styling */
.period-indicator {
    color: #FFD700 !important;
    font-weight: bold !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

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

/* ===== DRILL-DOWN MODAL MONTH SELECTOR ===== */
.month-selector-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.month-selector-container label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.month-selector {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 6px 8px;
    color: white;
    font-size: 14px;
    min-width: 120px;
}

.month-selector:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.month-selector::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* ===== DRILL-DOWN MODAL PAGINATION ===== */
.pagination-container {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: sticky; /* Keep pagination visible */
    bottom: 0; /* Stick to bottom of container */
    z-index: 100; /* Ensure it's above other content */
    margin-bottom: 0; /* Remove bottom margin */
}

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Small loading spinner for pagination */
.loading-spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.pagination-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Notification Slide In */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Progress Bar Animation */
@keyframes progress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Bounce In */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.page-header {
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Gradient Text Animation */
@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.page-title {
    background-size: 200% auto;
    animation: gradient-shift 3s ease infinite;
}

/* ===== FILTER PANEL ===== */
.filter-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: none; /* Hidden by default */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
    animation: slideDown 0.3s ease-out;
}

.filter-panel.active {
    display: grid; /* Show when active */
}

.filter-hint {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
    font-style: italic;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Add extra spacing between reporting ID and product group */
.filter-group:nth-child(2) {
    margin-top: 0.5rem;
}

/* Add extra spacing before buttons */
.filter-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.filter-select,
.filter-input {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.filter-select:hover,
.filter-input:hover {
    border-color: var(--border-hover);
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-input::placeholder {
    color: var(--text-tertiary);
}

/* Enhanced month input styling */
.filter-input[type="month"] {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    /* Make entire input clickable */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.filter-input[type="month"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
}

/* Add calendar icon that's visible */
.filter-input[type="month"]::-webkit-calendar-picker-indicator {
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

.filter-input[type="month"]::-moz-calendar-picker-indicator {
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.filter-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* ===== DRILL-DOWN MODAL ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
    overflow-y: auto;
    padding: 2rem;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 1400px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl), 0 0 100px rgba(99, 102, 241, 0.3);
    animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin: auto;
    position: relative;
}

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.modal-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.modal-close {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: rotate(90deg);
}

/* Modal Toolbar */
.modal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-width: 250px;
}

.search-box svg {
    color: var(--text-secondary);
}

.search-input {
    flex: 1;
    border: 1px solid rgba(139, 92, 246, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.search-container:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
}

.search-container:focus-within {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Sortable Table Headers */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: all 0.3s ease;
}

.sortable:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.sortable::after {
    content: '↕';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.sortable:hover::after {
    opacity: 1;
    color: #8b5cf6;
}

.sort-asc::after {
    content: '↑';
    opacity: 1;
    color: #8b5cf6;
}

.sort-desc::after {
    content: '↓';
    opacity: 1;
    color: #8b5cf6;
}

.pivot-header.sortable {
    padding-right: 2rem;
}

.pivot-header.sortable:hover {
    background: rgba(139, 92, 246, 0.1);
    border-radius: 4px;
}

/* Enhanced Loading Animation with Corsearch Branding */
.loading-brand {
    text-align: center;
    margin-bottom: 3rem;
    animation: fadeInUp 1s ease-out;
}

.corsearch-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.logo-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: logoPulse 2s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

.logo-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.1em;
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGlow 2s ease-in-out infinite alternate;
}

/* Team Members Animation - Subtle and Dramatic */
.team-members-section {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    animation: teamFadeIn 2s ease-out 1.5s forwards;
}

.team-title {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.team-members-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.team-member {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.8) translateY(20px);
    opacity: 0;
    position: relative;
    overflow: hidden;
}

.team-member::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent);
    transition: left 0.8s ease-out;
}

.team-member.animate {
    color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%);
    border-color: rgba(139, 92, 246, 0.4);
    transform: scale(1) translateY(0);
    opacity: 1;
    box-shadow: 
        0 4px 15px rgba(139, 92, 246, 0.2),
        0 0 20px rgba(59, 130, 246, 0.1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.team-member.animate::before {
    left: 100%;
}

/* Staggered animation delays for each team member */
.team-member:nth-child(1) { animation: teamMemberSlideIn 0.8s ease-out 2s forwards; }
.team-member:nth-child(2) { animation: teamMemberSlideIn 0.8s ease-out 2.2s forwards; }
.team-member:nth-child(3) { animation: teamMemberSlideIn 0.8s ease-out 2.4s forwards; }
.team-member:nth-child(4) { animation: teamMemberSlideIn 0.8s ease-out 2.6s forwards; }
.team-member:nth-child(5) { animation: teamMemberSlideIn 0.8s ease-out 2.8s forwards; }
.team-member:nth-child(6) { animation: teamMemberSlideIn 0.8s ease-out 3s forwards; }

/* Keyframe animations */
@keyframes teamFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes teamMemberSlideIn {
    0% {
        transform: scale(0.8) translateY(20px);
        opacity: 0;
    }
    50% {
        transform: scale(1.05) translateY(-5px);
        opacity: 0.8;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .team-members-section {
        bottom: 2rem;
    }
    
    .team-members-list {
        gap: 1rem;
    }
    
    .team-member {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
    }
    
    .team-title {
        font-size: 0.8rem;
    }
    
    .loading-features {
        gap: 1rem;
        max-width: 90%;
    }
    
    .feature-item {
        min-width: 100px;
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
}
.piano-letter {
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    color: var(--text-primary);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
    opacity: 0.7;
    position: relative;
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.piano-letter.illuminate {
    color: #ffffff;
    text-shadow: 
        0 0 12px rgba(255, 255, 255, 0.6),
        0 0 24px rgba(139, 92, 246, 0.4),
        0 0 36px rgba(99, 102, 241, 0.3);
    transform: scale(1.05);
    opacity: 1;
    animation: pianoKeyPressSubtle 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #ffffff 0%, #8b5cf6 50%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.piano-letter.illuminate::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, 
        rgba(139, 92, 246, 0.15),
        rgba(99, 102, 241, 0.15),
        rgba(139, 92, 246, 0.15));
    border-radius: 6px;
    z-index: -1;
    animation: pianoGlowSubtle 0.8s ease-out;
}

/* Subtle piano key press animation */
@keyframes pianoKeyPressSubtle {
    0% {
        transform: scale(1);
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    }
    30% {
        transform: scale(1.08);
        text-shadow: 
            0 0 16px rgba(255, 255, 255, 0.7),
            0 0 28px rgba(139, 92, 246, 0.5),
            0 0 40px rgba(99, 102, 241, 0.4);
    }
    100% {
        transform: scale(1.05);
        text-shadow: 
            0 0 12px rgba(255, 255, 255, 0.6),
            0 0 24px rgba(139, 92, 246, 0.4),
            0 0 36px rgba(99, 102, 241, 0.3);
    }
}

/* Subtle piano glow effect */
@keyframes pianoGlowSubtle {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    30% {
        opacity: 0.8;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

.loading-tagline {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    margin-top: 0.5rem;
    animation: fadeInUp 1s ease-out 0.5s both;
}

.loading-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
    max-width: 800px;
    animation: fadeInUp 1s ease-out 1s both;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 10;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    animation: featureFloat 3s ease-in-out infinite;
    min-width: 120px;
    flex: 0 0 auto;
}

.feature-item:nth-child(2) {
    animation-delay: 0.2s;
}

.feature-item:nth-child(3) {
    animation-delay: 0.4s;
}

.feature-item:nth-child(4) {
    animation-delay: 0.6s;
}

.feature-item:nth-child(5) {
    animation-delay: 0.8s;
}

.feature-item:nth-child(6) {
    animation-delay: 1.0s;
}

.feature-item:nth-child(7) {
    animation-delay: 1.2s;
}

.feature-item:nth-child(8) {
    animation-delay: 1.4s;
}

.feature-item:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 1.5rem;
    animation: iconBounce 2s ease-in-out infinite;
}

.feature-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.loading-text {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 2rem 0;
    animation: fadeInUp 1s ease-out 1.5s both;
}

/* Enhanced Spinner */
.loading-spinner {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 2rem auto;
    animation: fadeInUp 1s ease-out 0.8s both;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.spinner-ring:nth-child(1) {
    border-top-color: #8b5cf6;
    animation-delay: 0s;
}

.spinner-ring:nth-child(2) {
    border-right-color: #3b82f6;
    animation-delay: 0.3s;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

.spinner-ring:nth-child(3) {
    border-bottom-color: #10b981;
    animation-delay: 0.6s;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
}

/* Animations */
@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(139, 92, 246, 0.5);
    }
}

@keyframes textGlow {
    0% {
        filter: brightness(1);
    }
    100% {
        filter: brightness(1.2);
    }
}

@keyframes featureFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes iconBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

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

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

/* Responsive Design for Loading */
@media (max-width: 768px) {
    .loading-features {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
        justify-content: center;
        max-width: 100%;
    }
    
    .feature-item {
        width: auto;
        min-width: 100px;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .feature-text {
        font-size: 0.75rem;
    }
    
    .logo-text {
        font-size: 2rem;
    }
    
    .loading-tagline {
        font-size: 1rem;
    }
}

/* New Customers KPI Card Styling */
#newCustomers .kpi-text {
    font-size: 0.9em;
    line-height: 1.3;
}

#newCustomers .kpi-text div {
    margin-bottom: 0.2rem;
}

#newCustomers .kpi-text strong {
    font-weight: 700;
    color: var(--text-primary);
}

/* New Customers Modal Tabs */
.new-customers-modal {
    width: 100%;
}

.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.tab-button {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-base);
}

.tab-button:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
}

.tab-content {
    min-height: 200px;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
}

.pagination-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-base);
}

.pagination-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.pagination-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Coming Soon Popup */
.coming-soon-popup {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.coming-soon-popup.active {
    opacity: 1;
    visibility: visible;
}

.coming-soon-content {
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.coming-soon-popup.active .coming-soon-content {
    transform: scale(1);
}

.coming-soon-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: bounce 2s infinite;
}

.coming-soon-content h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.coming-soon-content p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.coming-soon-content .btn {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
}

.toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

/* Modal Content */
.modal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.table-container {
    flex: 1;
    overflow: auto;
    padding: 1rem 2rem;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-tertiary);
    padding: 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    transition: all var(--transition-fast);
}

.data-table thead th:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
    z-index: 11;
}

.data-table thead th.sortable::after {
    content: '⇅';
    margin-left: 0.5rem;
    opacity: 0.3;
}

.data-table thead th.sorted-asc::after {
    content: '↑';
    opacity: 1;
    color: var(--primary);
}

.data-table thead th.sorted-desc::after {
    content: '↓';
    opacity: 1;
    color: var(--primary);
}

.data-table tbody tr {
    transition: all var(--transition-fast);
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.data-table tbody td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Footer */
.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.table-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.table-pagination {
    display: flex;
    gap: 0.5rem;
}

.built-in-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.built-in-pagination .pagination-btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.built-in-pagination .pagination-btn:hover:not(:disabled) {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.built-in-pagination .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.built-in-pagination .pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.pagination-btn {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pagination-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.pagination-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .chart-card {
        grid-column: span 12;
    }
}

@media (max-width: 768px) {
    .floating-nav {
        top: 1rem;
        width: calc(100% - 2rem);
    }
    
    .nav-container {
        padding: 0.5rem 1rem;
    }
    
    .nav-menu {
        display: none;
    }
    
    .user-info {
        display: none;
    }
    
    .main-content {
        padding: 6rem 1rem 2rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .header-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* Total row styling for MoM growth table */
.total-row {
    background-color: rgba(99, 102, 241, 0.1) !important;
    font-weight: bold;
    border-top: 2px solid var(--primary);
}

.total-row td {
    background-color: rgba(99, 102, 241, 0.1) !important;
    font-weight: bold;
}

/* ===== CURRENCY & REPORTING ID MANAGEMENT ===== */
.management-tabs {
    margin-bottom: 2rem;
}

.tab-nav {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.tab-btn {
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.tab-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.tab-btn.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    background-color: var(--bg-secondary);
}

.tab-content.active {
    display: block;
}

.management-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.toolbar-left {
    display: flex;
    gap: 0.75rem;
}

.toolbar-right {
    display: flex;
    align-items: center;
}

.data-table-container {
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: visible; /* Allow vertical overflow for pagination */
    margin-bottom: 1.5rem;
    position: relative; /* For proper pagination positioning */
}

/* BTB Table Container - No horizontal scrolling */
#bookings-to-billings-section {
    width: 100%;
    max-width: 100%;
    overflow-x: visible !important;
}

#bookings-to-billings-section .page-content {
    width: 100%;
    max-width: 100%;
    overflow-x: visible !important;
}

#bookings-to-billings-section .table-container {
    overflow-x: visible !important;
    width: 100%;
    max-width: 100%;
}

/* BTB Table - Ensure it fits all columns without scrolling */
#btbTable {
    width: 100% !important;
    table-layout: auto;
    min-width: 100%;
}

/* BTB Table Column Widths - Optimize for better fit - Reduced padding to eliminate scrollbar */
#btbTable th,
#btbTable td {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.8rem;
    overflow: visible;
    word-wrap: break-word;
}

/* BTB Table Headers - Allow wrapping and prevent truncation */
#btbTable th {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    text-overflow: clip !important;
    overflow: visible !important;
    hyphens: auto;
    min-height: 2.5rem; /* Ensure headers have enough height for wrapping */
    vertical-align: middle;
}

/* Specific column width adjustments for BTB table - using auto layout with min-widths */
#btbTable th:nth-child(1), /* Opportunity ID */
#btbTable td:nth-child(1) {
    min-width: 140px;
    max-width: 160px;
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.75rem;
    overflow: visible;
}

#btbTable th:nth-child(2), /* Customer Name */
#btbTable td:nth-child(2) {
    min-width: 180px;
    max-width: 250px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: visible;
}

#btbTable th:nth-child(3), /* Opp Type */
#btbTable td:nth-child(3) {
    min-width: 100px;
    max-width: 120px;
    white-space: nowrap;
}

#btbTable th:nth-child(4), /* Close Date */
#btbTable td:nth-child(4) {
    min-width: 110px;
    max-width: 120px;
    white-space: nowrap;
}

#btbTable th:nth-child(5), /* Booking Amount */
#btbTable td:nth-child(5),
#btbTable th:nth-child(6), /* Billed to Date */
#btbTable td:nth-child(6),
#btbTable th:nth-child(7), /* Unbilled Amount */
#btbTable td:nth-child(7) {
    min-width: 120px;
    max-width: 140px;
    text-align: right;
    white-space: nowrap;
}

#btbTable th:nth-child(8), /* Fulfillment % */
#btbTable td:nth-child(8) {
    min-width: 130px;
    max-width: 160px;
    white-space: normal;
    overflow: visible;
}

#btbTable th:nth-child(9), /* Fulfillment Status */
#btbTable td:nth-child(9) {
    min-width: 140px;
    max-width: 180px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: visible;
}

#btbTable th:nth-child(10), /* Product Group */
#btbTable td:nth-child(10) {
    min-width: 110px;
    max-width: 130px;
    white-space: nowrap;
}

#btbTable th:nth-child(11), /* Details */
#btbTable td:nth-child(11) {
    min-width: 90px;
    max-width: 100px;
    text-align: center;
    white-space: nowrap;
}

.data-table {
    width: 100%;
    min-width: 800px; /* Ensure minimum width for horizontal scroll */
    border-collapse: collapse;
    background-color: var(--bg-secondary);
}

.data-table th {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    padding: 1rem;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tr:hover {
    background-color: var(--bg-tertiary);
}

.data-table tr.editing {
    background-color: rgba(var(--accent-rgb), 0.1);
}

.loading-row {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: 2rem;
}

/* Inline Editing Styles */
.editable-cell {
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.editable-cell:hover {
    background-color: var(--bg-tertiary);
}

.editable-cell.editing {
    padding: 0;
}

.editable-cell input {
    width: 100%;
    padding: 0.5rem;
    border: 2px solid var(--accent-color);
    border-radius: 4px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: inherit;
    outline: none;
}

.editable-cell input:focus {
    border-color: var(--accent-hover);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-action {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-action:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-hover);
}

.btn-action.primary {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.btn-action.primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-action.danger {
    background-color: var(--danger-color);
    color: white;
    border-color: var(--danger-color);
}

.btn-action.danger:hover {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
}

.btn-action.success {
    background-color: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.btn-action.success:hover {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
}

/* Status Badges */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.active {
    background-color: rgba(var(--success-rgb), 0.1);
    color: var(--success-color);
}

.status-badge.inactive {
    background-color: rgba(var(--danger-rgb), 0.1);
    color: var(--danger-color);
}

.status-badge.pending {
    background-color: rgba(var(--warning-rgb), 0.1);
    color: var(--warning-color);
}

/* Add/Edit Modal Styles */
.modal-form {
    padding: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* CSV Import Modal */
.csv-import-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    background-color: var(--bg-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.csv-import-area:hover {
    border-color: var(--accent-color);
    background-color: var(--bg-tertiary);
}

.csv-import-area.dragover {
    border-color: var(--accent-color);
    background-color: rgba(var(--accent-rgb), 0.1);
}

.csv-import-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    color: var(--text-secondary);
}

.csv-import-text {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.csv-import-subtext {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.csv-preview {
    margin-top: 1.5rem;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.csv-preview table {
    width: 100%;
    border-collapse: collapse;
}

.csv-preview th,
.csv-preview td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
}

.csv-preview th {
    background-color: var(--bg-tertiary);
    font-weight: 600;
    position: sticky;
    top: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .management-toolbar {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .toolbar-left,
    .toolbar-right {
        justify-content: center;
    }
    
    .data-table {
        font-size: 0.875rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.75rem 0.5rem;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .btn-action {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Dashboard Tiles Styles */
.dashboards-container {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.dashboards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.dashboard-tile {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    cursor: pointer;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.dashboard-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.dashboard-tile:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dashboard-tile:hover::before {
    opacity: 1;
}

.dashboard-tile.featured {
    border: 2px solid rgba(139, 92, 246, 0.4);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
}

.dashboard-tile.featured::before {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.15) 100%);
}

.dashboard-tile.featured:hover {
    box-shadow: 
        0 25px 50px rgba(139, 92, 246, 0.2),
        0 0 0 1px rgba(139, 92, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.tile-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b5cf6;
    transition: all 0.3s ease;
}

.dashboard-tile:hover .tile-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%);
    transform: scale(1.1) rotate(5deg);
}

.tile-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: pulse 2s infinite;
}

.status-indicator.active {
    background: #10b981;
}

.status-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.tile-content {
    flex: 1;
    margin-bottom: 1.5rem;
}

.tile-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.dashboard-tile:hover .tile-title {
    color: #8b5cf6;
}

.tile-description {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.tile-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.metric {
    text-align: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.dashboard-tile:hover .metric {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
    transform: translateY(-2px);
}

.metric-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.metric-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.tile-footer {
    margin-top: auto;
}

.tile-action {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

.dashboard-tile:hover .tile-action {
    background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.dashboard-tile:hover .tile-action::before {
    left: 100%;
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .dashboards-container {
        padding: 1rem;
    }
    
    .dashboards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .dashboard-tile {
        min-height: 250px;
        padding: 1.25rem;
    }
    
    .tile-metrics {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .dashboard-tile {
        min-height: 220px;
        padding: 1rem;
    }
    
    .tile-title {
        font-size: 1.125rem;
    }

    .tile-description {
        font-size: 0.8rem;
    }
}

/* Floating Navigation Animations */
@keyframes brandTextShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes brandTextSweep {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes subtitleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-2px);
    }
}

@keyframes monthDisplayPulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
}

@keyframes monthDisplayShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

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

/* Gaps Overlay Animation */
.gaps-overlay-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.95), rgba(255, 165, 0, 0.95));
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: auto;
}

.gaps-overlay-animation.active {
    opacity: 1;
    visibility: visible;
}

.gaps-overlay-content {
    text-align: center;
    color: #000;
    z-index: 10001;
}

.gaps-overlay-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: gapsOverlayPulse 2s ease-in-out infinite;
}

.gaps-overlay-title {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.gaps-overlay-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    opacity: 0.8;
}

.gaps-overlay-progress {
    width: 300px;
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
}

.gaps-overlay-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #000, #333);
    border-radius: 3px;
    animation: gapsOverlayProgress 3s ease-in-out;
}

.gaps-overlay-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.gaps-overlay-particle {
    position: absolute;
    background: #000;
    border-radius: 50%;
    animation: gapsOverlayFloat 5s linear infinite;
}

@keyframes gapsOverlayPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes gapsOverlayProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

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

/* Change Detection Animation */
.change-detection-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.change-detection-animation.active {
    opacity: 1;
    visibility: visible;
}

.change-detection-content {
    text-align: center;
    color: #fff;
    z-index: 10001;
}

.change-detection-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: changeDetectionPulse 2s ease-in-out infinite;
}

.change-detection-title {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.change-detection-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.change-detection-progress {
    width: 300px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
}

.change-detection-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #fff, #e5e7eb);
    border-radius: 3px;
    animation: changeDetectionProgress 3s ease-in-out;
}

.change-detection-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.change-detection-particle {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: changeDetectionFloat 5s linear infinite;
}

@keyframes changeDetectionPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes changeDetectionProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

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

/* ===== KNOWLEDGE CENTER STYLING ===== */
.knowledge-center {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.knowledge-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.knowledge-header h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.knowledge-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin: 0;
}

.knowledge-version {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0.5rem 0 0 0;
    font-style: italic;
}

.knowledge-toc {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 3rem;
    border-left: 5px solid #667eea;
}

.knowledge-toc h2 {
    color: #333;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.knowledge-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
}

.knowledge-toc li {
    margin: 0;
}

.knowledge-toc a {
    display: block;
    padding: 0.75rem 1rem;
    background: white;
    color: #667eea;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.knowledge-toc a:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.knowledge-section {
    margin-bottom: 3rem;
    scroll-margin-top: 2rem;
}

.knowledge-section h2 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #667eea;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.knowledge-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.knowledge-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.knowledge-card h3 {
    color: #495057;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    padding-left: 1rem;
    border-left: 4px solid #667eea;
}

.knowledge-card h3:first-child {
    margin-top: 0;
}

.knowledge-card h4 {
    color: #1e293b !important;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    margin-top: 1.25rem;
}

.knowledge-card p {
    color: #374151 !important;
    margin-bottom: 1rem;
}

.knowledge-card ul, .knowledge-card ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.knowledge-card li {
    margin-bottom: 0.5rem;
    color: #495057;
}

.knowledge-card strong {
    color: #333;
    font-weight: 600;
}

.formula-box {
    background: #f8f9fa;
    border: 2px solid #667eea;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
    text-align: center;
}

.formula-box code {
    font-size: 1.2rem;
    font-weight: 600;
    color: #667eea;
    font-family: 'Courier New', monospace;
}

.architecture-diagram {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.flow-step {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #dee2e6;
    transition: transform 0.3s ease;
}

.flow-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.flow-step h4 {
    color: #667eea;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.flow-step p {
    font-size: 0.9rem;
    color: #374151 !important;
    margin: 0;
}

.knowledge-footer {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    margin-top: 3rem;
    border-top: 3px solid #667eea;
}

.knowledge-footer p {
    margin: 0.5rem 0;
    color: #374151 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .knowledge-center {
        padding: 1rem;
    }
    
    .knowledge-header h1 {
        font-size: 2rem;
    }
    
    .knowledge-subtitle {
        font-size: 1rem;
    }
    
    .knowledge-toc ul {
        grid-template-columns: 1fr;
    }
    
    .architecture-diagram {
        grid-template-columns: 1fr;
    }
    
    .knowledge-section h2 {
        font-size: 1.5rem;
    }
}

/* ===== EXECUTION TYPE BADGES ===== */
.execution-type-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.execution-type-badge.ad-hoc {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.execution-type-badge.scheduled-run {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.execution-type-badge.unknown {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

/* ===== TASK EXECUTION ANIMATION ===== */
.task-execution-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(20, 20, 40, 0.95));
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.task-execution-content {
    text-align: center;
    color: white;
    max-width: 600px;
    padding: 2rem;
}

.task-execution-icon {
    margin-bottom: 2rem;
    animation: taskIconPulse 2s ease-in-out infinite;
}

.task-execution-icon svg {
    color: #3b82f6;
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.5));
}

.task-execution-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: taskTitleGlow 3s ease-in-out infinite;
}

.task-execution-subtitle {
    font-size: 1.2rem;
    color: #94a3b8;
    margin-bottom: 2rem;
    animation: taskSubtitleFade 2s ease-in-out infinite;
}

.task-execution-progress {
    margin-bottom: 3rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 4px;
    width: 0%;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.progress-text {
    font-size: 1rem;
    color: #94a3b8;
    font-weight: 500;
}

.task-execution-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.4;
    transition: all 0.5s ease;
}

.step.active {
    opacity: 1;
    transform: scale(1.05);
}

.step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    transition: all 0.5s ease;
}

.step.active .step-icon {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    animation: stepIconPulse 1s ease-in-out infinite;
}

.step-text {
    font-size: 0.9rem;
    color: #94a3b8;
    text-align: center;
    font-weight: 500;
}

.step.active .step-text {
    color: white;
}

.task-execution-particle {
    position: absolute;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    animation: taskParticleFloat 6s ease-in-out infinite;
    opacity: 0.7;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    pointer-events: none;
}

@keyframes taskParticleFloat {
    0% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translateY(-20px) translateX(10px) scale(1.1);
        opacity: 1;
    }
    50% {
        transform: translateY(-10px) translateX(-15px) scale(0.9);
        opacity: 0.8;
    }
    75% {
        transform: translateY(-30px) translateX(5px) scale(1.2);
        opacity: 0.9;
    }
    100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.7;
    }
}

@keyframes taskTitleGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

@keyframes taskSubtitleFade {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes stepIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* FINAL NUCLEAR ANTI-FLICKER SOLUTION */
.pivot-table th,
.pivot-table th *,
.pivot-table thead th,
.pivot-table thead th * {
    background: linear-gradient(135deg, #e2e8f0 0%, #ffffff 50%, #f1f5f9 100%) !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
    will-change: auto !important;
    transition: none !important;
    animation: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}

/* Table loading spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}

/* ===== ARR TABLE HEADER TOGGLE BUTTONS ===== */
.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}


.table-header .export-btn,
.table-header .adjustment-toggle-btn,
.table-header .gaps-toggle-btn,
.table-header .change-detection-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.table-header .export-btn:hover,
.table-header .adjustment-toggle-btn:hover,
.table-header .gaps-toggle-btn:hover,
.table-header .change-detection-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* Export button special styling */
.table-header .export-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.table-header .export-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #2563eb;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* Active state for toggle buttons */
.table-header .adjustment-toggle-btn.active,
.table-header .gaps-toggle-btn.active,
.table-header .change-detection-btn.active {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    font-weight: bold;
}

.table-header .adjustment-toggle-btn.active:hover,
.table-header .gaps-toggle-btn.active:hover,
.table-header .change-detection-btn.active:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.table-header .toggle-icon {
    font-size: 1rem;
    line-height: 1;
}

.table-header .toggle-text {
    white-space: nowrap;
}

/* ===== DATA DICTIONARY STYLING ===== */
    .data-dictionary-link {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
        color: #1f2937 !important;
        font-weight: bold !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        display: inline-block !important;
        margin: 4px 0 !important;
        box-shadow: 0 2px 4px rgba(251, 191, 36, 0.3) !important;
        transition: all 0.3s ease !important;
        border: 2px solid #f59e0b !important;
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

.data-dictionary-link:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(251, 191, 36, 0.4) !important;
}

    .data-dictionary-intro {
        background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
        padding: 20px !important;
        border-radius: 12px !important;
        border-left: 6px solid #f59e0b !important;
        margin-bottom: 30px !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        color: #f9fafb !important; /* White text on dark background */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        font-weight: 500 !important;
    }

.field-category {
    margin-bottom: 40px !important;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3) !important;
    border: 2px solid #3b82f6 !important;
}

.field-category h3 {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: bold !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 3px solid #60a5fa !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Force white text for all h3 elements in field categories */
.knowledge-center-content .field-category h3,
.knowledge-center-content .field-category h3 * {
    color: #ffffff !important;
}

.field-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

.field-item {
    background: #f8fafc !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
    transition: all 0.3s ease !important;
}

.field-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3) !important;
    border-color: #1d4ed8 !important;
}

.field-item h4 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
    padding: 8px 12px !important;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
    border-radius: 8px !important;
    text-align: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.field-item p {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Force white text for all h4 elements in field items */
.knowledge-center-content .field-item h4,
.knowledge-center-content .field-item h4 * {
    color: #ffffff !important;
}

/* ULTRA-AGGRESSIVE DATA DICTIONARY TEXT FIX */
.knowledge-center-content .field-item p,
.knowledge-center-content .field-item p *,
.knowledge-center-content .field-item p span,
.knowledge-center-content .field-item p div,
.knowledge-center-content .field-item p strong,
.knowledge-center-content .field-item p em,
.knowledge-center-content .field-item p i,
.knowledge-center-content .field-item p b,
.knowledge-center-content .field-item p code,
.knowledge-center-content .field-item p mark,
.knowledge-center-content .field-item p small,
.knowledge-center-content .field-item p sub,
.knowledge-center-content .field-item p sup,
.knowledge-center-content .field-item p u,
.knowledge-center-content .field-item p del,
.knowledge-center-content .field-item p ins,
.knowledge-center-content .field-item p cite,
.knowledge-center-content .field-item p q,
.knowledge-center-content .field-item p abbr,
.knowledge-center-content .field-item p acronym,
.knowledge-center-content .field-item p dfn,
.knowledge-center-content .field-item p kbd,
.knowledge-center-content .field-item p samp,
.knowledge-center-content .field-item p var,
.knowledge-center-content .field-item p time,
.knowledge-center-content .field-item p data,
.knowledge-center-content .field-item p output,
.knowledge-center-content .field-item p progress,
.knowledge-center-content .field-item p meter,
.knowledge-center-content .field-item p details,
.knowledge-center-content .field-item p summary,
.knowledge-center-content .field-item p dialog,
.knowledge-center-content .field-item p menu,
.knowledge-center-content .field-item p menuitem,
.knowledge-center-content .field-item p command,
.knowledge-center-content .field-item p keygen,
.knowledge-center-content .field-item p wbr,
.knowledge-center-content .field-item p ruby,
.knowledge-center-content .field-item p rt,
.knowledge-center-content .field-item p rp,
.knowledge-center-content .field-item p bdi,
.knowledge-center-content .field-item p bdo,
.knowledge-center-content .field-item p canvas,
.knowledge-center-content .field-item p embed,
.knowledge-center-content .field-item p object,
.knowledge-center-content .field-item p param,
.knowledge-center-content .field-item p source,
.knowledge-center-content .field-item p track,
.knowledge-center-content .field-item p video,
.knowledge-center-content .field-item p audio,
.knowledge-center-content .field-item p map,
.knowledge-center-content .field-item p area,
.knowledge-center-content .field-item p svg,
.knowledge-center-content .field-item p math,
.knowledge-center-content .field-item p mtext,
.knowledge-center-content .field-item p mi,
.knowledge-center-content .field-item p mo,
.knowledge-center-content .field-item p mn,
.knowledge-center-content .field-item p mspace,
.knowledge-center-content .field-item p ms,
.knowledge-center-content .field-item p mrow,
.knowledge-center-content .field-item p mfrac,
.knowledge-center-content .field-item p msqrt,
.knowledge-center-content .field-item p mroot,
.knowledge-center-content .field-item p msub,
.knowledge-center-content .field-item p msup,
.knowledge-center-content .field-item p msubsup,
.knowledge-center-content .field-item p munder,
.knowledge-center-content .field-item p mover,
.knowledge-center-content .field-item p munderover,
.knowledge-center-content .field-item p mtable,
.knowledge-center-content .field-item p mtr,
.knowledge-center-content .field-item p mtd,
.knowledge-center-content .field-item p mlabeledtr,
.knowledge-center-content .field-item p maligngroup,
.knowledge-center-content .field-item p malignmark,
.knowledge-center-content .field-item p maction,
.knowledge-center-content .field-item p mglyph,
.knowledge-center-content .field-item p mstyle,
.knowledge-center-content .field-item p merror,
.knowledge-center-content .field-item p mpadded,
.knowledge-center-content .field-item p mphantom,
.knowledge-center-content .field-item p mfenced,
.knowledge-center-content .field-item p menclose,
.knowledge-center-content .field-item p semantics,
.knowledge-center-content .field-item p annotation,
.knowledge-center-content .field-item p annotation-xml,
.knowledge-center-content .field-item p mtext,
.knowledge-center-content .field-item p mtext * {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

/* NUCLEAR OPTION - FORCE ALL TEXT IN FIELD ITEMS TO BE DARK */
.knowledge-center-content .field-item *:not(h4):not(h3):not(h2):not(h1) {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

/* Force h4 elements to stay white */
.knowledge-center-content .field-item h4,
.knowledge-center-content .field-item h4 * {
    color: #ffffff !important;
}

.data-dictionary-footer {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
    padding: 25px !important;
    border-radius: 16px !important;
    border: 2px solid #3b82f6 !important;
    margin-top: 40px !important;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3) !important;
}

.data-dictionary-footer h3 {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: bold !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 3px solid #60a5fa !important;
}

.data-dictionary-footer ul {
    list-style: none !important;
    padding: 0 !important;
}

.data-dictionary-footer li {
    color: #f9fafb !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    border-left: 4px solid #60a5fa !important;
    line-height: 1.6 !important;
}

.data-dictionary-footer li strong {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* Responsive design for data dictionary */
@media (max-width: 768px) {
    .field-grid {
        grid-template-columns: 1fr !important;
    }
    
    .field-item {
        padding: 15px !important;
    }
    
    .field-category {
        padding: 20px !important;
    }
    
    .data-dictionary-intro {
        padding: 15px !important;
    }
}

/* ===== EXPORT MODAL STYLING ===== */
/* Modal overlay styles consolidated - using base .modal-overlay definition above */

.export-modal {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 800px; /* Increased width */
    width: 100%;
    max-height: 85vh; /* Reduced height to fit screen */
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
    display: flex;
    flex-direction: column;
}

/* Ensure modal body scrolls properly */
.export-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem 2rem;
}

/* Export Modal Select Dropdown Styling */
.export-modal select {
    background: #374151 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    width: 100% !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1rem !important;
    padding-right: 2.5rem !important;
}

.export-modal select:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.export-modal select option {
    background: #374151 !important;
    color: #ffffff !important;
    padding: 0.5rem !important;
}

.export-modal select option:hover {
    background: #4b5563 !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.modal-body {
    padding: 2rem;
}

.export-options {
    margin-bottom: 2rem;
}

.export-option {
    margin-bottom: 1rem;
}

.export-option input[type="radio"] {
    display: none;
}

.export-option label {
    display: block;
    padding: 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
}

.export-option input[type="radio"]:checked + label {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.option-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.option-icon {
    font-size: 1.5rem;
}

.option-title {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 600;
}

.option-description {
    color: #d1d5db;
    font-size: 0.875rem;
    line-height: 1.5;
}

.option-details {
    margin-top: 0.5rem;
    color: #3b82f6;
    font-weight: 500;
}

.export-settings {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.setting-group {
    margin-bottom: 1.5rem;
}

.setting-group:last-child {
    margin-bottom: 0;
}

.setting-group label {
    display: block;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.setting-group select {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.875rem;
}

.setting-group select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.setting-group input[type="checkbox"] {
    margin-right: 0.5rem;
    accent-color: #3b82f6;
}

.checkbox-label {
    color: #d1d5db;
    font-size: 0.875rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-footer .btn {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Report Management Center Styles */
.report-categories {
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.category-tabs {
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.category-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
    transform: translateY(-2px);
}

.category-tab.active {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
    border-color: rgba(255, 255, 255, 0.6);
    color: white;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

/* Responsive behavior for category tabs */
@media (max-width: 768px) {
    .report-categories {
        flex-direction: column;
        align-items: stretch;
    }
    
    .category-tabs {
        justify-content: center;
    }
    
    .category-tab {
        flex: 1;
        min-width: 120px;
        text-align: center;
    }
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.report-tile {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.report-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.report-tile:hover::before {
    transform: scaleX(1);
}

.report-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(102, 126, 234, 0.3);
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.report-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.report-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    border-radius: 12px;
}

.report-icon.renewal {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.report-icon.churn {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.report-icon.upsell {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.report-badge {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ===== REPORT VIEW PAGE - MODAL-LIKE LAYOUT ===== */
#report-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    z-index: 10000;
    overflow: hidden;
    display: none;
    padding-bottom: 4rem; /* Add bottom spacing to prevent table touching bottom */
}

#report-view.active {
    display: block;
}

/* Hide floating navigation when report view is active - TARGET SPECIFIC CLASSES */
#report-view.active ~ .floating-nav,
#report-view.active + .floating-nav,
body:has(#report-view.active) .floating-nav,
#report-view.active ~ #mainNav,
#report-view.active + #mainNav,
body:has(#report-view.active) #mainNav,
body:has(#report-view.active) .floating-nav.nav-visible,
body:has(#report-view.active) .floating-nav.animation-complete,
body:has(#report-view.active) #mainNav.nav-visible,
/* Report View - Use z-index layering like Export Center */
body:has(#report-view.active) #mainNav {
    z-index: 100 !important;
}

#report-view {
    z-index: 10000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important;
}

/* Hide sticky filter footer when report view is active */
#report-view.active ~ .sticky-filter-footer,
#report-view.active + .sticky-filter-footer,
body:has(#report-view.active) .sticky-filter-footer {
    display: none !important;
}

/* Hide sticky filter footer on up-for-renewals page */
#up-for-renewals.active ~ .sticky-filter-footer,
#up-for-renewals.active + .sticky-filter-footer,
body:has(#up-for-renewals.active) .sticky-filter-footer,
body:has(#up-for-renewals[style*="display: block"]) .sticky-filter-footer {
    display: none !important;
}

/* Report view page header - compact design */
#report-view .page-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
}

#report-view .header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

#report-view .page-title {
    font-size: 1.5rem;
    margin: 0;
    color: #f8fafc;
}

#report-view .page-subtitle {
    font-size: 0.875rem;
    margin: 0;
    color: #94a3b8;
}

/* Report stats styling within header */
#report-view .report-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

#report-view .report-stat {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
}

#report-view .report-stat .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#report-view .report-stat .stat-value {
    font-weight: 600;
    color: #ffffff;
}

/* Report content - takes remaining space */
#report-view .report-content {
    flex: 1;
    overflow: hidden; /* Don't scroll here - let table container handle it */
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1rem 1.5rem;
    height: calc(100vh - 140px); /* Adjusted for compact header */
}

/* Report table wrapper - minimal padding */
#report-view .report-table-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Report table header with actions - compact */
#report-view .report-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    margin-bottom: 0.75rem;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 8px;
}

#report-view .report-table-info h3 {
    color: #ffffff;
    margin: 0;
    font-size: 1.25rem;
}

#report-view .report-table-info p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
}

/* Report table actions - buttons in same row */
#report-view .report-table-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

/* Date format toggle: highlight selected US/EU */
#report-view .report-date-format-btn.active {
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    border-color: #6366f1;
}

/* Button styling for table actions */
#report-view .report-table-actions .btn {
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

#report-view .report-table-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ===== FIXED PAGINATION CONTROLS (Above table, always visible) ===== */
#report-view .report-fixed-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 6px;
    margin: 0 1rem;
    flex-shrink: 0;
}

#report-view .report-fixed-pagination .pagination-length-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    font-size: 0.8125rem;
}

#report-view .report-fixed-pagination .pagination-select {
    background: rgba(30, 41, 59, 0.8);
    color: #f1f5f9;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    cursor: pointer;
}

#report-view .report-fixed-pagination .pagination-select:hover {
    border-color: rgba(99, 102, 241, 0.5);
}

#report-view .report-fixed-pagination .pagination-info {
    color: #94a3b8;
    font-size: 0.8125rem;
    white-space: nowrap;
}

#report-view .report-fixed-pagination .pagination-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#report-view .report-fixed-pagination .pagination-btn {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

#report-view .report-fixed-pagination .pagination-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    transform: translateY(-1px);
}

#report-view .report-fixed-pagination .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

#report-view .report-fixed-pagination .pagination-page-display {
    color: #e2e8f0;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0 0.5rem;
}

/* Make report-table-header wrap better with pagination */
#report-view .report-table-header {
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ===== REPORT TABLE CONTAINER - COMPACT HORIZONTAL SCROLLING ===== */
#report-view .report-table-container {
    /* Container dimensions */
    width: 100%;
    max-width: 100%;
    
    /* Styling */
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 8px;
    padding: 0;
    margin: 0.5rem 0;
    
    /* NO overflow here - let inner elements handle it */
    overflow: visible;
    position: relative;
}

/* WebKit scrollbars - make them prominent */
#report-view .report-table-container::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

#report-view .report-table-container::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.8);
    border-radius: 7px;
}

#report-view .report-table-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 7px;
    border: 2px solid rgba(30, 41, 59, 0.8);
}

#report-view .report-table-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
}

#report-view .report-table-container::-webkit-scrollbar-corner {
    background: rgba(30, 41, 59, 0.8);
}

/* DataTables wrapper - FIXED width, inner scrolls */
#report-view .report-table-container .dataTables_wrapper {
    width: 100% !important;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

/* Top controls row - info/filter OUTSIDE scroll area */
#report-view .report-table-container .dataTables_wrapper > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    flex-shrink: 0;
}

/* Scroll body container - THIS is what scrolls horizontally */
#report-view .report-table-container .dataTables_scroll {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 400px);
    min-height: 300px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.3);
}

#report-view .report-table-container .dataTables_scrollHead,
#report-view .report-table-container .dataTables_scrollBody {
    overflow: visible !important;
}

/* Scrollbar styling for dataTables_scroll */
#report-view .report-table-container .dataTables_scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#report-view .report-table-container .dataTables_scroll::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 5px;
}

#report-view .report-table-container .dataTables_scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 5px;
    border: 2px solid rgba(30, 41, 59, 0.5);
}

#report-view .report-table-container .dataTables_scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
}

#report-view .report-table-container .dataTables_scroll::-webkit-scrollbar-corner {
    background: rgba(30, 41, 59, 0.5);
}

/* Pagination controls - COMPACT bar at bottom of table container */
#report-view .report-table-container .dataTables_wrapper {
    position: relative;
}

/* Create a bottom bar for pagination controls */
#report-view .report-table-container .dataTables_info,
#report-view .report-table-container .dataTables_paginate {
    position: static !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Pagination wrapper bar */
#report-view .dataTables_wrapper::after {
    content: '';
    display: table;
    clear: both;
}

/* Style the bottom row containing info and pagination */
#report-view .report-table-container .dataTables_wrapper > div:last-of-type {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.5rem 0.75rem !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border-top: 1px solid rgba(99, 102, 241, 0.2) !important;
    margin-top: 0.5rem !important;
    border-radius: 0 0 8px 8px !important;
}

#report-view .report-table-container .dataTables_info {
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    background: rgba(30, 41, 59, 0.6) !important;
    border-radius: 4px !important;
}

#report-view .report-table-container .dataTables_paginate {
    display: flex !important;
    gap: 0.25rem !important;
    align-items: center !important;
}

/* TABLE - compact layout */
#report-view .report-table-container table,
#report-view .report-table-container table.dataTable {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.8125rem;
}

/* Force DataTables scrollX headers to be visible and scroll normally - COMPACT */
#report-view .report-table-container .dataTables_scrollHead th,
#report-view .report-table-container .dataTables_scrollHeadInner th,
#report-view .report-table-container table#reportDataTable th {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%) !important;
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    z-index: 10 !important;
    padding: 0.5rem 0.625rem !important;
    text-align: left !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 28px !important;
    overflow: visible !important;
}

/* Live Preview specific header fixes - COMPLETELY DISABLE STICKY BEHAVIOR */
#report-builder-modal .report-builder-preview .dataTables_scrollHead th,
#report-builder-modal .report-builder-preview .dataTables_scrollHeadInner th,
#report-builder-modal .report-builder-preview table#previewDataTable th,
#report-builder-modal .report-builder-preview .dataTables_scrollHeadInner table th,
#report-builder-modal .report-builder-preview .dataTables_scrollHead table th,
#report-builder-modal .report-builder-preview th,
#report-builder-modal th {
    position: static !important; /* Force static positioning for Live Preview */
    top: auto !important; /* Remove top positioning */
    left: auto !important; /* Remove left positioning */
    right: auto !important; /* Remove right positioning */
    transform: none !important; /* Remove any transforms */
    background: rgba(30, 58, 138, 0.95) !important;
    color: white !important;
    font-weight: 600 !important;
    z-index: auto !important; /* Remove z-index */
    backdrop-filter: none !important; /* Remove backdrop filter */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 40px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    min-width: 200px !important;
    max-width: 400px !important;
    /* Force remove any sticky behavior */
    position: static !important;
    position: relative !important;
}

/* Additional Live Preview container fixes */
#report-builder-modal .report-builder-preview .dataTables_scrollHead,
#report-builder-modal .report-builder-preview .dataTables_scrollHeadInner {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: auto !important;
}

/* Force Live Preview table to scroll horizontally */
#report-builder-modal .report-builder-preview .preview-table-scroll-container {
    overflow-x: auto !important;
    overflow-y: auto !important;
    position: relative !important;
}

/* Fix DataTables sizing div that's hiding content */
#report-view .report-table-container .dataTables_sizing {
    height: auto !important; /* Override height: 0px */
    overflow: visible !important; /* Override overflow: hidden */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Let DataTables handle scroll head positioning */
#report-view .report-table-container .dataTables_scrollHead {
    width: 100% !important;
}

#report-view .report-table-container .dataTables_scrollHeadInner {
    width: 100% !important;
}

/* DataTables components - allow content to flow */
#report-view .report-table-container .dataTables_wrapper,
#report-view .report-table-container .dataTables_scroll,
#report-view .report-table-container .dataTables_scrollBody,
#report-view .report-table-container .dataTables_scrollHead {
    overflow: visible !important; /* NEVER use overflow:hidden - breaks scrolling */
    box-sizing: border-box;
}

/* Table sizing - force wide content */
#report-view .report-table-container .dataTables_wrapper table {
    width: max-content !important;
    min-width: 1200px !important;
    table-layout: auto !important;
}

/* ===== DATATABLES CONTROLS - PAGINATION, SEARCH, LENGTH ===== */

/* Top controls row */
#report-view .report-table-container .dataTables_length,
#report-view .report-table-container .dataTables_filter {
    display: inline-block;
    padding: 0.75rem 0;
    color: #cbd5e1;
    font-size: 0.875rem;
}

#report-view .report-table-container .dataTables_filter {
    float: right;
}

/* Search input */
#report-view .report-table-container .dataTables_filter input {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    color: #f1f5f9;
    padding: 0.5rem 1rem;
    margin-left: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

#report-view .report-table-container .dataTables_filter input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Length select */
#report-view .report-table-container .dataTables_length select {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 6px;
    color: #f1f5f9;
    padding: 0.375rem 0.75rem;
    margin: 0 0.25rem;
    cursor: pointer;
}

/* Bottom controls - info and pagination COMPACT */
#report-view .report-table-container .dataTables_info {
    display: inline-block;
    padding: 0.5rem 0;
    color: #94a3b8;
    font-size: 0.75rem;
}

#report-view .report-table-container .dataTables_paginate {
    float: left;
    padding: 0.5rem 0;
}

/* Pagination buttons - COMPACT */
#report-view .report-table-container .dataTables_paginate .paginate_button {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    margin: 0 2px;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.3);
    font-size: 0.75rem;
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

#report-view .report-table-container .dataTables_paginate .paginate_button:hover {
    background: rgba(99, 102, 241, 0.3);
    border-color: #6366f1;
    color: #f8fafc;
}

#report-view .report-table-container .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: white;
    font-weight: 600;
}

#report-view .report-table-container .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== REPORT TABLE STYLING - COMPACT MODERN DESIGN ===== */

/* Table header cells - COMPACT */
#report-view .report-table-container th {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9), rgba(55, 48, 163, 0.9)) !important;
    color: #f8fafc !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 0.5rem 0.625rem !important;
    letter-spacing: 0.5px !important;
    padding: 1rem 1.25rem !important;
    text-align: left !important;
    border-bottom: 2px solid rgba(99, 102, 241, 0.5) !important;
    white-space: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

/* Table body cells - COMPACT */
#report-view .report-table-container td {
    padding: 0.375rem 0.5rem !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important;
    color: #e2e8f0 !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    background: transparent !important;
    font-variant-numeric: tabular-nums !important;
}

/* Zebra striping for rows */
#report-view .report-table-container tbody tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.3) !important;
}

#report-view .report-table-container tbody tr:nth-child(odd) {
    background: rgba(15, 23, 42, 0.3) !important;
}

/* Row hover effect */
#report-view .report-table-container tbody tr:hover {
    background: rgba(99, 102, 241, 0.15) !important;
}
    z-index: 10 !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3) !important;
}

/* Report table cell content styling - Target DataTables elements */
#report-view .report-table-container td,
#report-view .report-table-container .clean-table td,
#report-view .report-table-container .dataTable td {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Override DataTables cell content styling */
#report-view .report-table-container table#reportDataTable td {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Report table hover effects - Target DataTables elements */
#report-view .report-table-container tbody tr:hover,
#report-view .report-table-container .clean-table tbody tr:hover,
#report-view .report-table-container .dataTable tbody tr:hover {
    background: rgba(102, 126, 234, 0.1) !important;
}

/* Override DataTables hover effects */
#report-view .report-table-container table#reportDataTable tbody tr:hover {
    background: rgba(102, 126, 234, 0.1) !important;
}

/* Additional professional styling for the table */
#report-view .report-table-container {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
}

/* Sticky header styling */
#report-view .report-table-container th {
    background: rgba(30, 58, 138, 0.95) !important; /* Solid background instead of transparent */
    backdrop-filter: blur(10px) !important;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3) !important;
}

/* Alternating row colors for better readability - Target DataTables elements */
#report-view .report-table-container tbody tr:nth-child(even),
#report-view .report-table-container .clean-table tbody tr:nth-child(even),
#report-view .report-table-container .dataTable tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

#report-view .report-table-container tbody tr:nth-child(odd),
#report-view .report-table-container .clean-table tbody tr:nth-child(odd),
#report-view .report-table-container .dataTable tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.01) !important;
}

/* Override DataTables alternating row colors */
#report-view .report-table-container table#reportDataTable tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

#report-view .report-table-container table#reportDataTable tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.01) !important;
}

/* Responsive behavior - COMPACT on mobile */
@media (max-width: 768px) {
    #report-view .report-table-wrapper {
        padding: 0 0.5rem 0.5rem 0.5rem;
    }
    
    #report-view .report-table-container .dataTables_scroll {
        max-height: calc(100vh - 280px);
        min-height: 200px;
    }
    
    #report-view .report-table-container th,
    #report-view .report-table-container td {
        padding: 0.25rem 0.375rem !important;
        font-size: 0.7rem !important;
        min-width: 80px !important;
    }
}

/* ===== ENHANCED REPORT VIEW STYLING - COMPACT & MODERN ===== */

/* Reduce excess space between header and search */
#report-view .page-header {
    padding: 0.75rem 1.5rem !important;
}

#report-view .report-table-header {
    padding: 0.5rem 1rem !important;
    margin-bottom: 0.5rem !important;
    gap: 0.75rem;
}

/* Modern search input styling - compact */
#report-view .dataTables_filter {
    margin-bottom: 0.25rem !important;
    padding: 0 !important;
}

#report-view .dataTables_filter input {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(100, 116, 139, 0.4) !important;
    border-radius: 6px !important;
    padding: 0.5rem 0.75rem !important;
    color: #e2e8f0 !important;
    font-size: 0.8rem !important;
    min-width: 200px !important;
    transition: all 0.2s ease !important;
}

#report-view .dataTables_filter input:focus {
    border-color: rgba(99, 102, 241, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

#report-view .dataTables_filter input::placeholder {
    color: rgba(148, 163, 184, 0.6) !important;
}

/* Length selector styling - compact */
#report-view .dataTables_length {
    margin-bottom: 0.25rem !important;
    padding: 0 !important;
}

#report-view .dataTables_length select {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(100, 116, 139, 0.4) !important;
    border-radius: 4px !important;
    padding: 0.375rem 0.5rem !important;
    color: #e2e8f0 !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
}

/* Modern table design */
#report-view .report-table-container {
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(99, 102, 241, 0.4) rgba(15, 23, 42, 0.4) !important;
}

/* Ensure horizontal scrollbar is always visible when needed */
#report-view .report-table-container::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

#report-view .report-table-container::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4) !important;
    border-radius: 5px !important;
}

#report-view .report-table-container::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5) !important;
    border-radius: 5px !important;
    border: 2px solid transparent !important;
    background-clip: content-box !important;
}

#report-view .report-table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7) !important;
}

/* Clean table header design - COMPACT */
#report-view .report-table-container th {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%) !important;
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 0.5rem 0.625rem !important;
    letter-spacing: 0.5px !important;
    padding: 0.875rem 1rem !important;
    border-bottom: 2px solid rgba(99, 102, 241, 0.4) !important;
    white-space: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

/* Clean table cell design - COMPACT */
#report-view .report-table-container td {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.8rem !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(100, 116, 139, 0.08) !important;
    white-space: nowrap !important;
    max-width: 300px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Zebra striping with subtle colors */
#report-view .report-table-container tbody tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.3) !important;
}

#report-view .report-table-container tbody tr:nth-child(odd) {
    background: rgba(15, 23, 42, 0.2) !important;
}

/* Hover effect */
#report-view .report-table-container tbody tr:hover {
    background: rgba(99, 102, 241, 0.12) !important;
}

/* Numeric column alignment */
#report-view .report-table-container td.numeric,
#report-view .report-table-container th.numeric,
#report-view .report-table-container td[data-type="number"],
#report-view .report-table-container td:has([data-type="number"]) {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace !important;
}

/* Modern pagination styling - LEFT ALIGNED, always visible */
#report-view .dataTables_paginate {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.25rem !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
}

#report-view .dataTables_paginate .paginate_button {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    border-radius: 4px !important;
    padding: 0.25rem 0.5rem !important;
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    min-width: 36px !important;
    text-align: center !important;
}

#report-view .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    color: #e2e8f0 !important;
}

#report-view .dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%) !important;
    border-color: rgba(99, 102, 241, 0.6) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

#report-view .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Info text styling - compact */
#report-view .dataTables_info {
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    padding: 0.5rem 0 !important;
    margin-left: auto !important;
}

/* Wrapper layout for controls */
#report-view .dataTables_wrapper > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin-bottom: 0.75rem !important;
}

#report-view .dataTables_wrapper > div:last-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    border-top: 1px solid rgba(100, 116, 139, 0.2) !important;
    margin-top: 0.5rem !important;
}

/* Empty state styling */
#report-view .dataTables_empty {
    padding: 3rem !important;
    text-align: center !important;
    color: #64748b !important;
    font-size: 1rem !important;
}

/* Loading state */
#report-view .dataTables_processing {
    background: rgba(15, 23, 42, 0.9) !important;
    border-radius: 8px !important;
    padding: 1rem 2rem !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.report-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
}

.report-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.report-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.metric {
    text-align: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.metric-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.25rem;
}

.metric-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.report-footer {
    display: flex;
    justify-content: center;
}

.report-action {
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

.report-action:hover::before {
    left: 100%;
}

.report-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* Report Builder Modal Styles */
/* Report Builder styles moved to report-builder.css */

.builder-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
}

.field-group {
    margin-bottom: 1.5rem;
}

.field-group-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: grab;
    transition: all 0.3s ease;
}

.field-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.field-item:active {
    cursor: grabbing;
}

.field-name {
    color: white;
    font-weight: 500;
}

.field-type {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    background: rgba(102, 126, 234, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.config-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.config-panel {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drop-zone {
    min-height: 120px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.drop-zone.drag-over {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.drop-zone-placeholder {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-style: italic;
    margin-top: 2rem;
}

.filters-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Removed conflicting .preview-container styles - now handled by .full-preview-table */

.preview-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.preview-table {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
    min-height: 200px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-placeholder {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-style: italic;
    margin-top: 4rem;
}

/* Animations */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

.report-tile[data-category="revenue"] {
    animation: slideInFromLeft 0.6s ease-out;
}

.report-tile[data-category="customer"] {
    animation: slideInFromRight 0.6s ease-out;
}

.report-tile[data-category="product"] {
    animation: fadeInUp 0.6s ease-out;
}

.report-tile[data-category="operational"] {
    animation: slideInFromLeft 0.6s ease-out;
}

/* Gap Analysis and Change Tracking Styles */
.gap-analysis-content,
.change-tracking-content {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.methodology-section {
    margin-bottom: 3rem;
}

.methodology-section h2 {
    color: #1f2937;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    border-bottom: 3px solid #3b82f6;
    padding-bottom: 1rem;
}

.methodology-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-bottom: 2rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.methodology-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.methodology-card .card-header {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.methodology-card .card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.methodology-card .card-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.methodology-card .card-content {
    padding: 1.5rem;
    color: #374151;
    line-height: 1.6;
}

.methodology-card .card-content p {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.methodology-card .card-content ul,
.methodology-card .card-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.methodology-card .card-content li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.methodology-card .card-content strong {
    color: #1f2937;
    font-weight: 600;
}

/* Navigation icons for new sections */
.nav-link.gap-analysis-icon svg,
.nav-link.change-tracking-icon svg {
    transition: transform 0.2s ease;
}

.nav-link.gap-analysis-icon:hover svg,
.nav-link.change-tracking-icon:hover svg {
    transform: scale(1.1);
}

/* Responsive design for methodology cards */
@media (max-width: 768px) {
    .gap-analysis-content,
    .change-tracking-content {
        padding: 1rem;
    }
    
    .methodology-section h2 {
        font-size: 1.5rem;
    }
    
    .methodology-card .card-header {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .methodology-card .card-content {
        padding: 1rem;
    }
}

/* Product Filter Indicator */
.product-filter-indicator {
    color: #fbbf24;
    font-weight: 600;
    margin-left: 8px;
    font-size: 0.9em;
}

.product-filter-indicator::before {
    content: " - ";
    color: #6b7280;
    font-weight: normal;
}

/* ===== TOGGLE SYSTEM - REBUILT FROM SCRATCH ===== */

/* Mode Toggles Container - Main container for all toggles */
.mode-toggles {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    max-width: 100%;
    overflow: visible;
    width: 100%;
    min-width: 0;
}

/* Mode Toggles within Table Header - Ensure proper spacing */
.table-header .mode-toggles {
    flex: 1;
    min-width: 0;
    overflow: visible;
    justify-content: flex-end;
}

/* Individual Toggle Containers - Each toggle group */
.analysis-mode-toggle,
.gaps-overlay-toggle,
.change-detection-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 4px 0;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    position: relative !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    min-width: 0;
    flex: 0 0 auto;
    flex-direction: row !important;
}

/* Toggle Slider Container - Wrapper for label + slider */
.toggle-slider-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    flex-direction: row !important;
}

/* Toggle Slider Wrapper - Container for the actual toggle */
.toggle-slider-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

/* Force horizontal alignment for all toggle elements */
.analysis-mode-toggle,
.gaps-overlay-toggle,
.change-detection-toggle,
.toggle-slider-container,
.toggle-slider-wrapper {
    flex-direction: row !important;
    display: flex !important;
    align-items: center !important;
}

/* Ensure labels and toggles are on the same line */
.toggle-slider-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    min-width: 120px;
    white-space: nowrap;
    text-align: left;
    flex-shrink: 0;
    overflow: visible;
    text-overflow: visible;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Analysis Mode Label - Special yellow styling */
#analysisModeToggle .toggle-slider-label {
    color: #fbbf24 !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Gap Overlay Label - Green styling */
.gaps-overlay-toggle .toggle-slider-label {
    color: #16a34a !important;
}

/* Change Detection Label - Purple styling */
.change-detection-toggle .toggle-slider-label {
    color: #8b5cf6 !important;
    min-width: 140px;
}

/* Force toggle sliders to be visible and properly positioned */
.toggle-slider {
    appearance: none;
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}

.toggle-slider:hover {
    background: #9ca3af;
    transform: scale(1.05);
}

.toggle-slider:checked {
    background: #10b981;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-slider:checked::before {
    transform: translateX(20px);
}

/* Analysis Mode Toggle - Special yellow styling */
#analysisModeToggle .toggle-slider {
    background: #fbbf24;
}

#analysisModeToggle .toggle-slider:hover {
    background: #f59e0b;
}

#analysisModeToggle .toggle-slider:checked {
    background: #fbbf24;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(251, 191, 36, 0.3);
}

/* Gap Overlay Toggle - Green styling */
.gaps-overlay-toggle .toggle-slider {
    background: #16a34a;
}

.gaps-overlay-toggle .toggle-slider:hover {
    background: #15803d;
}

.gaps-overlay-toggle .toggle-slider:checked {
    background: #16a34a;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(22, 163, 74, 0.3);
}

/* Change Detection Toggle - Purple styling */
.change-detection-toggle .toggle-slider {
    background: #8b5cf6;
}

.change-detection-toggle .toggle-slider:hover {
    background: #7c3aed;
}

.change-detection-toggle .toggle-slider:checked {
    background: #8b5cf6;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(139, 92, 246, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .mode-toggles {
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .toggle-slider-label {
        min-width: 100px;
        font-size: 11px;
    }
    
    .toggle-slider {
        width: 40px;
        height: 22px;
    }
    
    .toggle-slider::before {
        width: 16px;
        height: 16px;
        top: 3px;
        left: 3px;
    }
    
    .toggle-slider:checked::before {
        transform: translateX(18px);
    }
}

/* ===== DUPLICATE REPORTING NAME DETECTION STYLES ===== */

/* Legend for duplicate detection */
.duplicate-legend {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    animation: slideInFromTop 0.5s ease-out;
}

.legend-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.legend-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.legend-text {
    flex: 1;
    color: #92400e;
    font-size: 14px;
    line-height: 1.5;
}

.legend-text strong {
    color: #78350f;
    font-weight: 600;
}

.legend-text small {
    color: #a16207;
    font-size: 12px;
}

.legend-close {
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.legend-close:hover {
    background: #d97706;
    transform: scale(1.1);
}

/* Aggregated row styling */
.aggregated-row {
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
    border-left: 4px solid #f59e0b !important;
    position: relative;
}

.aggregated-row:hover {
    background: linear-gradient(135deg, #fde68a, #fcd34d) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.15);
}

/* Make aggregated rows non-editable */
.aggregated-row .editable-cell {
    cursor: not-allowed !important;
    opacity: 0.7;
}

.aggregated-row .editable-cell:hover {
    background-color: rgba(245, 158, 11, 0.1) !important;
}


/* Animation for legend appearance */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments for legend */
@media (max-width: 768px) {
    .duplicate-legend {
        margin-bottom: 16px;
        padding: 12px;
    }

/* ===== SAVED REPORTS PAGE ===== */
#saved-reports .reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.saved-report-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.saved-report-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
}

.saved-report-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.saved-report-card:hover::before {
    opacity: 1;
}

.saved-report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.saved-report-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.saved-report-actions {
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.saved-report-card:hover .saved-report-actions {
    opacity: 1;
}

.saved-report-action {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.saved-report-action:hover {
    color: var(--primary-color);
    background: rgba(30, 58, 138, 0.1);
}

.saved-report-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    min-height: 2.5rem;
}

.saved-report-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

.saved-report-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.saved-report-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.saved-report-stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1;
}

.saved-report-stat-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}

.saved-report-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.saved-report-buttons {
    display: flex;
    gap: 0.5rem;
}

.saved-report-btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.saved-report-btn-primary {
    background: var(--primary-color);
    color: white;
}

.saved-report-btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.saved-report-btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.saved-report-btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.saved-report-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.saved-report-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.saved-report-empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.saved-report-empty-description {
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 400px;
    margin: 0 auto;
}

/* ===== SAVED REPORTS PAGE END ===== */
    
    .legend-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .legend-icon {
        font-size: 20px;
    }
    
    .legend-text {
        font-size: 13px;
    }
    
    .legend-close {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}

/* UI Configuration Styles */
.ui-config-container {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.config-categories {
    margin-bottom: 2rem;
}

.category-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    color: #6b7280;
    font-weight: 500;
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.tab-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.tab-btn.active {
    background: #3b82f6;
    color: white;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3b82f6;
}

.config-content {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.config-panel {
    display: none;
    padding: 2rem;
}

.config-panel.active {
    display: block;
}

.panel-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.panel-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.5rem 0;
}

.panel-header p {
    color: #6b7280;
    margin: 0;
}

/* Query Configuration Styles */
.query-item, .widget-item, .table-item, .slider-item, .event-item, .api-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.query-item:hover, .widget-item:hover, .table-item:hover, .slider-item:hover, .event-item:hover, .api-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.config-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.config-item-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.config-item-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.config-item-actions {
    display: flex;
    gap: 0.5rem;
}

.config-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.config-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.config-btn.primary {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.config-btn.primary:hover {
    background: #2563eb;
}

.config-item-content {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 1rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #374151;
    white-space: pre-wrap;
    overflow-x: auto;
}

.config-item-properties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.property-group {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    padding: 1rem;
}

.property-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.property-value {
    font-size: 0.875rem;
    color: #6b7280;
    word-break: break-all;
}

/* Report view page title illumination effects - SIMPLIFIED */
#report-view .page-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleIllumination 3s ease-in-out infinite, titleShimmer 2s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(102, 126, 234, 0.5), 0 0 40px rgba(118, 75, 162, 0.3), 0 0 60px rgba(240, 147, 251, 0.2);
    position: relative;
}

#report-view .page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: titleSweep 2.5s ease-in-out infinite;
    pointer-events: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Illumination animations */
@keyframes titleIllumination {
    0%, 100% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
}

@keyframes titleShimmer {
    0%, 100% {
        text-shadow: 0 0 20px rgba(102, 126, 234, 0.5), 0 0 40px rgba(118, 75, 162, 0.3), 0 0 60px rgba(240, 147, 251, 0.2);
    }
    50% {
        text-shadow: 0 0 30px rgba(102, 126, 234, 0.8), 0 0 60px rgba(118, 75, 162, 0.6), 0 0 90px rgba(240, 147, 251, 0.4), 0 0 120px rgba(245, 87, 108, 0.3);
    }
}

@keyframes titleSweep {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Additional aggressive hiding for floating navigation on report pages */
#report-view.active ~ .floating-nav,
#report-view.active + .floating-nav,
#report-builder.active ~ .floating-nav,
#report-builder.active + .floating-nav,
#report-view.active ~ #mainNav,
#report-view.active + #mainNav,
#report-builder.active ~ #mainNav,
#report-builder.active + #mainNav {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-120%) !important;
    z-index: -9999 !important;
}

/* Hide floating navigation on report builder and viewer pages */
#report-builder ~ .floating-nav,
#report-view ~ .floating-nav,
body:has(#report-builder.active) .floating-nav,
body:has(#report-view.active) .floating-nav,
#report-view.active ~ #mainNav,
body:has(#report-view.active) #mainNav,
#report-builder.active ~ #mainNav,
body:has(#report-builder.active) #mainNav {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-120%) !important;
    z-index: -9999 !important;
}

/* Hide floating unhide button on report pages */
body:has(#report-builder.active) .floating-unhide-btn,
body:has(#report-view.active) .floating-unhide-btn {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ===== SALESFORCE & PIPELINE ANALYSIS STYLES ===== */

/* Salesforce page specific styles */
#salesforce-pipeline {
    padding: var(--spacing-xl);
}

/* Charts section */
.charts-section {
    margin: var(--spacing-xl) 0;
}

.chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.chart-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    backdrop-filter: blur(10px);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.chart-header h3 {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}

.chart-controls {
    display: flex;
    gap: var(--spacing-sm);
}

.chart-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-select:hover {
    border-color: var(--border-hover);
}

.chart-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.chart-content {
    position: relative;
    height: 300px;
}

/* Analysis section */
.analysis-section {
    margin-top: var(--spacing-xl);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.section-header h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.section-controls {
    display: flex;
    gap: var(--spacing-sm);
}

/* Stage badges */
.stage-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stage-prospecting {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.stage-qualification {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.stage-proposal {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.stage-negotiation {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.stage-closed-won {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.stage-closed-lost {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.stage-closed {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.stage-needs-analysis {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.stage-value-proposition {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.stage-perception-analysis {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.stage-proposal-price-quote {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.stage-decision-makers {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.stage-id-decision-criteria {
    background: rgba(251, 191, 36, 0.2);
    color: #fcd34d;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.stage-id-evaluation-criteria {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.stage-id-stakeholders {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.stage-unknown {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Responsive design */
@media (max-width: 1024px) {
    .chart-row {
        grid-template-columns: 1fr;
    }
    
    .chart-content {
        height: 250px;
    }
}

@media (max-width: 768px) {
    #salesforce-pipeline {
        padding: var(--spacing-lg);
    }
    
    .chart-container {
        padding: var(--spacing-md);
    }
    
    .chart-content {
        height: 200px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
}

/* Customer Classification Styles */
.classification-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.classification-badge.law-firm {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.classification-badge.corporation {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.classification-badge.unknown {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Active Customers Toggle Card (Classification Page Only) */
#customer-classification .active-customers-toggle-card {
    display: flex;
    align-items: center;
    padding: 1.5rem;
}

#customer-classification .toggle-control-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#customer-classification .toggle-control-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#customer-classification .toggle-label-text {
    color: #94a3b8;
    font-weight: 500;
    font-size: 14px;
}

/* Active Customers Toggle Switch (Classification Page Only) */
#customer-classification .active-customers-toggle-switch {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 40px;
    cursor: pointer;
}

#customer-classification .active-customers-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#customer-classification .active-customers-toggle-switch .toggle-slider {
    position: absolute !important;
    cursor: pointer;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(100, 116, 139, 0.3) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 40px !important;
    transition: all 0.4s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 12px !important;
    width: 100% !important;
    height: 100% !important;
    appearance: none !important;
}

#customer-classification .active-customers-toggle-switch .toggle-slider::before {
    content: '';
    position: absolute;
    height: 32px;
    width: 32px;
    left: 4px;
    bottom: 4px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    transition: all 0.4s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    z-index: 2;
}

#customer-classification .active-customers-toggle-switch input:checked + .toggle-slider {
    background-color: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
}

#customer-classification .active-customers-toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(160px);
    background: linear-gradient(135deg, #10b981, #047857);
}

#customer-classification .active-customers-toggle-switch .toggle-label-left,
#customer-classification .active-customers-toggle-switch .toggle-label-right {
    position: relative;
    z-index: 3;
    font-weight: 600;
    font-size: 13px;
    transition: opacity 0.3s ease, color 0.3s ease;
    pointer-events: none;
}

#customer-classification .active-customers-toggle-switch .toggle-label-left {
    color: #fff;
    opacity: 1;
}

#customer-classification .active-customers-toggle-switch .toggle-label-right {
    color: #10b981;
    opacity: 0;
}

#customer-classification .active-customers-toggle-switch input:checked + .toggle-slider .toggle-label-left {
    opacity: 0;
}

#customer-classification .active-customers-toggle-switch input:checked + .toggle-slider .toggle-label-right {
    opacity: 1;
}

#customer-classification .toggle-status-text {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
}

/* Classification Chart Container */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
    margin: 1rem 0;
    display: block !important;
    visibility: visible !important;
}

/* Ensure canvas is visible */
#classificationChart {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: 200px !important;
    max-width: 100% !important;
}

/* Classification Filter Controls */
.filter-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.filter-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: #ffffff;
    font-size: 14px;
    min-width: 150px;
}

.filter-select:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.search-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: #ffffff;
    font-size: 14px;
    min-width: 200px;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* Timeframe Info Styles */
.timeframe-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.info-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-style: italic;
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-numbers {
    display: flex;
    gap: 0.25rem;
    margin: 0 1rem;
}

.page-number {
    padding: 0.5rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.page-number:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.page-number.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.page-number:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Enhanced filter select styling */
.filter-select {
    padding: 0.5rem 1rem !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md);
    color: var(--text-primary) !important;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.filter-select:hover {
    border-color: var(--border-hover) !important;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary) !important;
}

.filter-select option {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    padding: 0.5rem;
}

/* AI Classification Loading Overlay */
.ai-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.95) 0%, 
        rgba(20, 20, 40, 0.98) 25%,
        rgba(40, 20, 60, 0.98) 50%,
        rgba(20, 20, 40, 0.98) 75%,
        rgba(0, 0, 0, 0.95) 100%);
    backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}

.ai-loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.ai-loading-container {
    text-align: center;
    position: relative;
    max-width: 600px;
    width: 90%;
}

/* AI Brain Animation */
.ai-brain-container {
    margin-bottom: 3rem;
    position: relative;
}

.ai-brain {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    animation: aiBrainPulse 3s ease-in-out infinite;
}

.neural-network {
    position: relative;
    width: 100%;
    height: 100%;
}

.neuron {
    position: absolute;
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #00d4ff, #0099cc);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
    animation: neuronPulse 2s ease-in-out infinite;
}

.neuron-1 { top: 20%; left: 30%; animation-delay: 0s; }
.neuron-2 { top: 30%; right: 25%; animation-delay: 0.3s; }
.neuron-3 { top: 50%; left: 20%; animation-delay: 0.6s; }
.neuron-4 { top: 60%; right: 30%; animation-delay: 0.9s; }
.neuron-5 { bottom: 30%; left: 40%; animation-delay: 1.2s; }
.neuron-6 { bottom: 20%; right: 40%; animation-delay: 1.5s; }
.neuron-7 { top: 40%; left: 50%; animation-delay: 1.8s; }
.neuron-8 { bottom: 40%; right: 20%; animation-delay: 2.1s; }

.neural-path {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
    animation: neuralFlow 3s linear infinite;
}

.path-1 { top: 25%; left: 30%; width: 40%; animation-delay: 0s; }
.path-2 { top: 45%; left: 20%; width: 30%; animation-delay: 0.5s; }
.path-3 { top: 55%; right: 25%; width: 35%; animation-delay: 1s; }
.path-4 { bottom: 25%; left: 35%; width: 25%; animation-delay: 1.5s; }
.path-5 { bottom: 35%; right: 35%; width: 30%; animation-delay: 2s; }
.path-6 { top: 45%; left: 50%; width: 20%; animation-delay: 2.5s; }

/* AI Processing Text */
.ai-processing-text {
    color: white;
    margin-bottom: 2rem;
}

.ai-title {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(45deg, #00d4ff, #ff6b6b, #4ecdc4);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
    margin-bottom: 0.5rem;
}

.ai-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

/* Progress Steps */
.ai-progress-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
}

.ai-progress-steps::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    opacity: 0.4;
    transition: all 0.5s ease;
}

.step.active {
    opacity: 1;
    transform: scale(1.1);
}

.step-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    animation: stepIconPulse 2s ease-in-out infinite;
}

.step-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Progress Bar */
.ai-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.ai-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #ff6b6b, #4ecdc4);
    background-size: 200% 100%;
    border-radius: 4px;
    width: 0%;
    animation: progressFill 4s ease-in-out infinite;
}

/* Status Text */
.ai-status-text {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    animation: statusTextFade 2s ease-in-out infinite;
}

/* Floating Data Particles */
.data-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(0, 212, 255, 0.7);
    animation: particleFloat 6s ease-in-out infinite;
}

.particle-1 { top: 10%; left: 10%; animation-delay: 0s; }
.particle-2 { top: 20%; right: 15%; animation-delay: 0.8s; }
.particle-3 { top: 60%; left: 5%; animation-delay: 1.6s; }
.particle-4 { top: 80%; right: 10%; animation-delay: 2.4s; }
.particle-5 { top: 30%; left: 80%; animation-delay: 3.2s; }
.particle-6 { top: 70%; right: 80%; animation-delay: 4s; }
.particle-7 { top: 50%; left: 90%; animation-delay: 4.8s; }
.particle-8 { top: 90%; left: 20%; animation-delay: 5.6s; }

/* Animations */
@keyframes aiBrainPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes neuronPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
    }
    50% { 
        transform: scale(1.2);
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.9);
    }
}

@keyframes neuralFlow {
    0% { opacity: 0; transform: scaleX(0); }
    50% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(0); }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes stepIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes progressFill {
    0% { width: 0%; }
    25% { width: 25%; }
    50% { width: 50%; }
    75% { width: 75%; }
    100% { width: 100%; }
}

@keyframes statusTextFade {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes particleFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3;
    }
    50% { 
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.8;
    }
}

/* Salesforce Date Filter */
.date-filter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.date-filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Comprehensive NetSuite Data Styles */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.summary-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-card h4 {
    color: #fff;
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.9;
}

.summary-value {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.summary-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    margin: 0;
}

/* Filter Controls Styles */
.filter-section {
    margin: 1rem 0;
}

.filter-section h4 {
    color: #fff;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
}

.filter-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
}

.filter-group select,
.filter-group input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    color: #fff;
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.filter-group select option {
    background: #2d3748;
    color: #fff;
}

/* Data Table Styles */
.data-table-container,
.data-summary-container {
    margin: 1rem 0;
}

.data-table-container h4,
.data-summary-container h4 {
    color: #fff;
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
}

.summary-table {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.data-table th {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.data-table td {
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

.data-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.status-success {
    color: #48bb78;
    font-weight: 600;
}

.status-error {
    color: #f56565;
    font-weight: 600;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

/* ===== CHART LOADING OVERLAY STYLES ===== */
.chart-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 12px;
}

.chart-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #ffffff;
}

.chart-loading-spinner .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.chart-loading-spinner .loading-text {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

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

/* ===== SALESFORCE TOOLTIP SYSTEM ===== */
.salesforce-tooltip {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #1a1a24 0%, #2d2d3a 100%);
    color: #ffffff;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 400px;
    min-width: 300px;
    z-index: 999999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.3);
    border: 2px solid #FFD700;
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateX(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.salesforce-tooltip.show {
    opacity: 1;
    transform: translateX(0) scale(1);
    animation: tooltipGlow 2s ease-in-out infinite alternate;
}

.salesforce-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #FFD700;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

@keyframes tooltipGlow {
    0% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.3);
        border-color: #FFD700;
    }
    100% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.6);
        border-color: #FFA500;
    }
}

/* ===== PIPELINE METRICS INFORMATION STYLES ===== */
.pipeline-metrics-info {
    background: rgba(26, 26, 36, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    backdrop-filter: blur(10px);
}

.pipeline-metrics-info h4 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.metric-explanation {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
}

.metric-explanation:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.metric-explanation h5 {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.metric-explanation p {
    color: #a1a1aa;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 4px 0;
}

.metric-explanation p strong {
    color: #ffffff;
    font-weight: 600;
}

/* ===== SALESFORCE INFORMATION CENTER STYLES ===== */
.salesforce-explanation {
    background: rgba(26, 26, 36, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
    backdrop-filter: blur(10px);
}

.salesforce-explanation h3 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.salesforce-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.salesforce-feature {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
}

.salesforce-feature:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.salesforce-feature h4 {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.salesforce-feature p {
    color: #a1a1aa;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.salesforce-summary {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.salesforce-summary p {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.date-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
}

.date-input:hover {
    border-color: var(--border-hover);
}


/* Health Tooltip - Updated to match Salesforce tooltip system */
/* Health Tooltip - Updated to match Salesforce tooltip system */
.health-tooltip {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #1a1a24 0%, #2d2d3a 100%);
    color: #ffffff;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 400px;
    min-width: 300px;
    z-index: 999999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.3);
    border: 2px solid #FFD700;
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateX(20px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.health-tooltip.show {
    opacity: 1;
    transform: translateX(0) scale(1);
    animation: tooltipGlow 2s ease-in-out infinite alternate;
}

.health-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #FFD700;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

@keyframes tooltipGlow {
    0% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.3);
        border-color: #FFD700;
    }
    100% {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.6);
        border-color: #FFA500;
    }
}

.health-tooltip-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #F3F4F6;
}

.health-tooltip-breakdown {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    font-size: 11px;
}

.health-tooltip-breakdown .label {
    color: #D1D5DB;
}

.health-tooltip-breakdown .score {
    color: #F3F4F6;
    font-weight: 500;
}

.health-tooltip-risk {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #374151;
}

.health-tooltip-risk-title {
    font-weight: 600;
    color: #FCA5A5;
    margin-bottom: 4px;
}

/* ===== UP FOR RENEWALS CSS ===== */

/* Priority Badges */
.priority-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-badge.urgent {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.priority-badge.high {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}

.priority-badge.medium {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

.priority-badge.low {
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(100, 116, 139, 0.5);
    color: #94a3b8;
}

/* Product Group Toggle Container */
.product-group-filters {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.product-group-toggle-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Product Group Toggle Button */
.product-group-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 500;
    user-select: none;
}

.product-group-toggle:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

.product-group-toggle input[type="checkbox"] {
    margin-right: 0.5rem;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #6366f1;
}

.product-group-toggle input[type="checkbox"]:checked + span {
    font-weight: 600;
}

/* Page Number Buttons */
.page-number-btn {
    padding: 0.4rem 0.8rem;
    margin: 0 0.25rem;
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 6px;
    color: #94a3b8;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-number-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

.page-number-btn.active {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
    color: #c7d2fe;
    font-weight: 600;
}

/* Renewal Methodology Section */
.renewal-methodology-section {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}

.methodology-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}

.methodology-header h2 {
    color: #f1f5f9;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.methodology-subtitle {
    color: #94a3b8;
    font-size: 0.875rem;
    margin: 0;
}

.methodology-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Filter description animations */
@keyframes slideInFade {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Simple card style - clean, minimal, no heavy borders */
.simple-card {
    background: rgba(30, 41, 59, 0.3);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: 10px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.simple-card:hover {
    background: rgba(30, 41, 59, 0.4);
    border-color: rgba(99, 102, 241, 0.2);
}

.simple-card h3 {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.simple-card ul {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.8;
    margin: 0;
    padding-left: 1.5rem;
}

.simple-card ul li {
    margin-bottom: 0.5rem;
}

.simple-card ul li:last-child {
    margin-bottom: 0;
}

.simple-card strong {
    color: #e2e8f0;
    font-weight: 600;
}

/* Legacy methodology-section styles (kept for backward compatibility) */
.methodology-section {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 8px;
    padding: 0.625rem;
}

.methodology-section h3 {
    color: #a5b4fc;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
}

.methodology-section h3::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 0.875rem;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    border-radius: 2px;
    margin-right: 0.5rem;
}

.methodology-section p {
    color: #cbd5e1;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 0.25rem 0;
}

.methodology-section p:last-child {
    margin-bottom: 0;
}

.methodology-section ul {
    color: #cbd5e1;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

.methodology-section ul li {
    margin-bottom: 0.25rem;
}

.methodology-section ul li:last-child {
    margin-bottom: 0;
}

.methodology-section strong {
    color: #a5b4fc;
    font-weight: 600;
}

.metric-definitions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0.75rem;
}

@media (max-width: 1200px) {
    .metric-definitions {
        grid-template-columns: 1fr;
    }
}

.metric-definition {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.metric-definition:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(15, 23, 42, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

.metric-definition h4 {
    color: #f1f5f9;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
}

.metric-definition h4::before {
    content: '📊';
    margin-right: 0.5rem;
    font-size: 1rem;
}

.metric-definition p {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 0.5rem 0;
}

.metric-definition p:last-child {
    margin-bottom: 0;
}

.calculation-formula {
    background: rgba(99, 102, 241, 0.1);
    border-left: 3px solid rgba(99, 102, 241, 0.5);
    padding: 0.5rem;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #a5b4fc;
    margin-top: 0.5rem !important;
    word-break: break-word;
}

/* Time Window Filter Buttons */
.time-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.time-filter-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 1.25rem;
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #94a3b8;
    font-size: 0.875rem;
    text-align: left;
    min-width: 140px;
}

.time-filter-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
    transform: translateY(-1px);
}

.time-filter-btn.active {
    background: rgba(99, 102, 241, 0.2);
    border-color: #6366f1;
    color: #a5b4fc;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.time-filter-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: inherit;
    margin-bottom: 0.25rem;
}

.time-filter-days {
    font-weight: 700;
    font-size: 1rem;
    color: inherit;
    margin-bottom: 0.125rem;
}

.time-filter-desc {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.8);
    font-weight: 400;
}

/* ===================================
   Bookings to Billings Section
   =================================== */

.product-tabs {
    width: 100%;
}

.tabs-container {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: rgba(30, 41, 59, 0.3);
    padding: 0.75rem;
    border-radius: 10px;
}

.tab-btn {
    background: transparent;
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--text-secondary);
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.tab-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.5);
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.time-filter-section {
    background: rgba(30, 41, 59, 0.5);
    padding: 1.5rem;
    border-radius: 10px;
}

.time-filter-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.filter-option {
    background: rgba(15, 23, 42, 0.3);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.filter-option label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 500;
}

.filter-option input[type="radio"] {
    accent-color: var(--primary-color);
    cursor: pointer;
}

.form-select {
    width: 100%;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--text-primary);
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.form-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.btb-metrics-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.btb-metrics-grid .metric-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.3s ease;
    min-width: 0;
    overflow: hidden;
}

.btb-metrics-grid .metric-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* BTB Metric Card Styles - Force smaller text to prevent overflow */
.btb-metrics-grid .metric-card .metric-value {
    font-size: clamp(1rem, 1.2vw, 1.35rem) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.3 !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
}

.btb-metrics-grid .metric-card .metric-label {
    font-size: clamp(0.65rem, 0.75vw, 0.8rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.4 !important;
    display: block !important;
}

.btb-metrics-grid .metric-card .metric-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    min-width: 0 !important;
    width: 100% !important;
}

.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-numbers {
    display: flex;
    gap: 0.25rem;
}

.page-numbers button {
    padding: 0.5rem 0.75rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-numbers button:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.page-numbers button.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.search-input {
    padding: 0.5rem 1rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    width: 300px;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: rgba(30, 41, 59, 0.7);
}

.data-table th {
    padding: 1rem;
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 2px solid rgba(99, 102, 241, 0.3);
}

.data-table td {
    padding: 1rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

.data-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* BTB Table fulfillment status badges - allow wrapping */
#btbTable .status-badge {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4;
    max-width: 100%;
}

/* Confidence badges for unified 3-tier strategy */
.confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.85rem;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.confidence-100 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.confidence-90 {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.confidence-85 {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(234, 179, 8, 0.08));
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.25);
}

.confidence-70 {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.08));
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.25);
}

.confidence-50 {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.08));
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.25);
}

.confidence-0 {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.15), rgba(100, 116, 139, 0.08));
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.25);
}

/* Shared indicator badge */
.shared-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08));
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.25);
    cursor: help;
}

/* ===== AI FEATURES STYLES ===== */
.ai-insights-container {
    margin-bottom: 2rem;
    margin-top: 1rem;
}

.ai-insights-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.ai-insights-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ai-refresh-btn {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--primary-color);
    transition: all 0.2s;
}

.ai-refresh-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    transform: rotate(90deg);
}

.ai-insights-content {
    color: var(--text-primary);
}

.ai-insight-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.ai-key-findings ul,
.ai-recommendations ul {
    margin: 0;
    padding-left: 1.5rem;
    line-height: 1.8;
}

.ai-key-findings li,
.ai-recommendations li {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.ai-confidence-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
}

.ai-query-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Duplicate modal-overlay removed - using the fixed position version above */

/* Duplicate modal-container removed - using the main definition above */

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    color: var(--text-primary);
}

/* AI Query Page Styles */
.ai-query-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* AI Query Loading Animation - Similar to Classification */
.ai-query-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.95) 0%, 
        rgba(20, 20, 40, 0.98) 25%,
        rgba(40, 20, 60, 0.98) 50%,
        rgba(20, 20, 40, 0.98) 75%,
        rgba(0, 0, 0, 0.95) 100%);
    backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}

/* Hide floating nav when loading overlay is active */
.ai-query-loading-overlay[style*="block"],
body:has(.ai-query-loading-overlay[style*="block"]) .floating-nav,
body:has(.ai-query-loading-overlay[style*="display: block"]) .floating-nav {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.ai-query-loading-overlay[style*="block"] {
    opacity: 1;
    visibility: visible;
}

.ai-query-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
    padding: 2rem;
}

.ai-query-brain-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
    position: relative;
    width: 100%;
}

.ai-query-brain {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    animation: aiBrainPulse 3s ease-in-out infinite;
}

.neural-network-query {
    position: relative;
    width: 100%;
    height: 100%;
}

.neuron-query {
    position: absolute;
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #00d4ff, #0099cc);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
    animation: neuronPulse 2s ease-in-out infinite;
}

.neuron-query-1 { top: 20%; left: 30%; animation-delay: 0s; }
.neuron-query-2 { top: 30%; right: 25%; animation-delay: 0.3s; }
.neuron-query-3 { top: 50%; left: 20%; animation-delay: 0.6s; }
.neuron-query-4 { top: 60%; right: 30%; animation-delay: 0.9s; }
.neuron-query-5 { bottom: 30%; left: 40%; animation-delay: 1.2s; }
.neuron-query-6 { bottom: 20%; right: 40%; animation-delay: 1.5s; }
.neuron-query-7 { top: 40%; left: 50%; animation-delay: 1.8s; }
.neuron-query-8 { bottom: 40%; right: 20%; animation-delay: 2.1s; }

.neural-path-query {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
    animation: neuralFlow 3s linear infinite;
}

.path-query-1 { top: 25%; left: 30%; width: 40%; animation-delay: 0s; }
.path-query-2 { top: 45%; left: 20%; width: 30%; animation-delay: 0.5s; }
.path-query-3 { top: 55%; right: 25%; width: 35%; animation-delay: 1s; }
.path-query-4 { bottom: 25%; left: 35%; width: 25%; animation-delay: 1.5s; }
.path-query-5 { bottom: 35%; right: 35%; width: 30%; animation-delay: 2s; }
.path-query-6 { top: 45%; left: 50%; width: 20%; animation-delay: 2.5s; }

.ai-query-processing-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: white;
    margin-bottom: 2rem;
    text-align: center;
}

.ai-query-title {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(45deg, #00d4ff, #ff6b6b, #4ecdc4);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
    margin-bottom: 0.5rem;
    text-align: center;
    width: 100%;
}

.ai-query-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    text-align: center;
    width: 100%;
}

.ai-query-progress-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    position: relative;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

.ai-query-progress-steps::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

.step-query {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    opacity: 0.4;
    transition: all 0.5s ease;
}

.step-query.active {
    opacity: 1;
    transform: scale(1.1);
}

.step-icon-query {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    animation: stepIconPulse 2s ease-in-out infinite;
}

.step-text-query {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

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

@keyframes neuronPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

@keyframes neuralFlow {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes stepIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Cora Premium Branding */
.cora-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.cora-name {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: coraGradientShift 4s ease-in-out infinite;
    letter-spacing: -0.02em;
}

.cora-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0.75rem !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15)) !important;
    border: 1px solid rgba(102, 126, 234, 0.5) !important;
    border-radius: 12px !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    backdrop-filter: blur(10px) !important;
    animation: coraBadgePulse 3s ease-in-out infinite !important;
    text-shadow: 0 0 10px rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.2) !important;
}

.cora-title .cora-badge,
h1.cora-title .cora-badge,
.page-title .cora-badge,
.cora-name + .cora-badge,
.cora-badge *,
.cora-badge span,
.cora-badge::before,
.cora-badge::after {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    fill: #ffffff !important;
}

/* Override any gradient text effects on badge */
.cora-badge {
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
}

.cora-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    margin-top: 0.5rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: coraSubtitleShimmer 3s ease-in-out infinite;
}

@keyframes coraGradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

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

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

/* Enhanced Cora Input Section */
.ai-query-input-section {
    margin-bottom: 2rem;
    position: relative;
}

.query-input-wrapper {
    position: relative;
    background: linear-gradient(135deg, rgba(30, 30, 45, 0.95), rgba(40, 40, 60, 0.95));
    border: 2px solid rgba(102, 126, 234, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(102, 126, 234, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.query-input-wrapper:hover {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 12px 48px rgba(102, 126, 234, 0.2),
                0 0 0 1px rgba(102, 126, 234, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.query-input-wrapper:focus-within {
    border-color: rgba(102, 126, 234, 0.7);
    box-shadow: 0 12px 48px rgba(102, 126, 234, 0.3),
                0 0 0 2px rgba(102, 126, 234, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#aiQueryInput {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 150px;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#aiQueryInput::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

#aiQueryInput:focus {
    outline: none;
}

.query-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

.query-actions .btn {
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.query-actions .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.query-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(102, 126, 234, 0.5);
}

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

.query-actions .btn-primary:hover::before {
    left: 100%;
}

.ai-query-input-section {
    margin-bottom: 2rem;
}

.query-suggestions {
    margin-top: 1rem;
}

.query-suggestion-btn {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.3);
    color: #667eea;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    font-family: inherit;
}

.query-suggestion-btn:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.query-suggestion-btn:active {
    transform: translateY(0);
}

.analytical-results-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-color);
}

.forecast-results,
.monte-carlo-results,
.what-if-results {
    animation: fadeInUp 0.5s ease-out;
}

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

/* Enhanced AI Query Results Table */
#aiQueryResultsTable {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#aiQueryResultsTable thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background-color 0.2s;
}

#aiQueryResultsTable thead th:hover {
    background: var(--bg-tertiary);
}

#aiQueryResultsTable thead th .sort-indicator {
    transition: opacity 0.2s;
}

#aiQueryResultsTable tbody tr {
    transition: background-color 0.2s;
}

#aiQueryResultsTable tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.05);
}

#aiQueryResultsTable tbody td {
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
    max-width: 400px;
}

#aiQueryResultsTable tbody td:has(style*="textAlign: right") {
    font-variant-numeric: tabular-nums;
}

.ai-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-container {
    overflow-x: auto;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.query-input-wrapper {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.query-input-wrapper textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    resize: vertical;
    margin-bottom: 1rem;
    min-height: 120px;
}

.query-input-wrapper textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.query-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.ai-response-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.ai-response-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ai-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ai-query-input-container textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    resize: vertical;
    margin-bottom: 1rem;
}

.ai-query-input-container textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.ai-response-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.ai-response-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ai-response-text {
    color: var(--text-primary);
    line-height: 1.8;
    white-space: pre-wrap;
}

.btb-ai-summary-card {
    margin-bottom: 2rem;
    animation: fadeIn 0.5s ease-in;
}

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

/* Opportunity type badge */
.opp-type-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.2);
    white-space: nowrap;
}

.status-matched {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.status-variance {
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
}

.status-missing {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-partial {
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
}

.status-minimal {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.status-info {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.status-warning {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

/* ============================================================
   MODERN FLOATING NAV v4.0 - Truly Modern Design
   Floating pill-style navigation with glassmorphism
   ============================================================ */

/* Hide the old fixed nav behavior */
.floating-nav {
    all: unset !important;
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100% - 40px) !important;
    height: auto !important;
    background: rgba(18, 18, 32, 0.85) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(99, 102, 241, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    z-index: 99999 !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Nav container */
.floating-nav .nav-container {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Brand - compact logo + text */
.floating-nav .nav-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 14px 6px 8px !important;
    background: rgba(99, 102, 241, 0.1) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
}

.floating-nav .brand-icon {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.floating-nav .brand-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.floating-nav .brand-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.floating-nav .brand-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.1 !important;
    letter-spacing: -0.3px !important;
}

.floating-nav .brand-subtitle {
    font-size: 9px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    line-height: 1.1 !important;
}

/* Divider */
.floating-nav .nav-brand::after {
    content: '' !important;
    display: none !important;
}

/* Nav menu - horizontal pills */
.floating-nav .nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    padding: 4px !important;
}

.floating-nav .nav-menu::-webkit-scrollbar {
    display: none !important;
}

/* Nav items */
.floating-nav .nav-item {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    list-style: none !important;
}

.floating-nav .nav-item::before,
.floating-nav .nav-item::after {
    display: none !important;
    content: none !important;
}

/* Nav links - small rounded buttons */
.floating-nav .nav-item .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    position: relative !important;
}

.floating-nav .nav-item .nav-link::before,
.floating-nav .nav-item .nav-link::after {
    display: none !important;
    content: none !important;
}

.floating-nav .nav-item .nav-link svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

/* Tooltip on hover - exclude tm-text-icon */
.floating-nav .nav-item .nav-link span:not(.tm-text-icon) {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.9) !important;
    padding: 6px 12px !important;
    background: rgba(10, 10, 20, 0.95) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 100000 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.floating-nav .nav-item .nav-link span::before {
    content: '' !important;
    position: absolute !important;
    top: -5px !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
    width: 8px !important;
    height: 8px !important;
    background: rgba(10, 10, 20, 0.95) !important;
    border-left: 1px solid rgba(99, 102, 241, 0.2) !important;
    border-top: 1px solid rgba(99, 102, 241, 0.2) !important;
}

.floating-nav .nav-item .nav-link:hover span:not(.tm-text-icon) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) scale(1) !important;
}

/* Hover state */
.floating-nav .nav-item .nav-link:hover {
    color: #fff !important;
    background: rgba(99, 102, 241, 0.2) !important;
}

.floating-nav .nav-item .nav-link:hover svg {
    transform: scale(1.1) !important;
}

/* Active state - glowing pill */
.floating-nav .nav-item.active .nav-link {
    color: #fff !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.5) !important;
}

.floating-nav .nav-item.active .nav-link svg {
    color: #fff !important;
}

/* Featured items with star */
.floating-nav .nav-item-featured .nav-link {
    background: rgba(99, 102, 241, 0.12) !important;
}

.floating-nav .nav-star-icon {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 12px !important;
    height: 12px !important;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6)) !important;
    z-index: 2 !important;
}

/* Submenu arrow hidden */
.floating-nav .nav-item .submenu-arrow {
    display: none !important;
}

/* Submenu dropdown */
.floating-nav .nav-submenu {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(18, 18, 32, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    min-width: 180px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 100001 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.floating-nav .nav-item.has-submenu:hover .nav-submenu {
    opacity: 1 !important;
    visibility: visible !important;
}

.floating-nav .nav-subitem {
    list-style: none !important;
}

.floating-nav .nav-sublink {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.floating-nav .nav-sublink:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #fff !important;
}

.floating-nav .nav-sublink svg {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.7 !important;
}

/* Right section - user */
.floating-nav .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-left: 8px !important;
    margin-left: 4px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.floating-nav .user-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.floating-nav .user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #6366f1, #a855f7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

.floating-nav .user-details {
    display: flex !important;
    flex-direction: column !important;
}

.floating-nav .user-name {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.floating-nav .user-role {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
}

.floating-nav .logout-btn {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 12px !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
    border-radius: 10px !important;
    color: #f87171 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.floating-nav .logout-btn:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.2) !important;
}

/* Body offset for floating nav */
body {
    padding-top: 58px !important;
}

/* Keep nav always visible */
.floating-nav,
.floating-nav.scrolled-down,
.floating-nav.at-top,
.floating-nav.animation-complete,
.floating-nav.nav-visible,
.floating-nav.nav-hidden-for-reports {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Override hiding */
.loading-overlay.active ~ .floating-nav,
body:has(.loading-overlay.active) .floating-nav,
#report-view.active ~ .floating-nav,
body:has(#report-view.active) .floating-nav {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Responsive - tablet */
@media (max-width: 1100px) {
    .floating-nav .brand-text {
        display: none !important;
    }
    
    .floating-nav .nav-brand {
        padding: 6px !important;
    }
    
    .floating-nav .user-details {
        display: none !important;
    }
}

/* Responsive - mobile */
@media (max-width: 768px) {
    .floating-nav {
        top: 8px !important;
        padding: 6px 8px !important;
        border-radius: 16px !important;
    }
    
    .floating-nav .nav-menu {
        padding: 3px !important;
        border-radius: 10px !important;
    }
    
    .floating-nav .nav-item .nav-link {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
    }
    
    .floating-nav .nav-item .nav-link svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .floating-nav .logout-btn span {
        display: none !important;
    }
}


/* Ensure page sections display properly */
#tm-center-page,
#ai-query,
#customer-classification,
#up-for-renewals,
#bookings-to-billings {
    position: relative;
    z-index: 10;
}

/* When active, show the page section */
#tm-center-page.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* TM Center specific layout */
#tm-center-page .tm-center {
    min-height: calc(100vh - 100px);
    padding: 20px;
}

/* Ensure content is visible above any overlays when page is active */
.page-section.active {
    position: relative !important;
    z-index: 100 !important;
}


/* TM Text Icon in Nav */
.tm-text-icon,
.nav-link .tm-text-icon,
.floating-nav .nav-item .nav-link .tm-text-icon,
span.tm-text-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    color: #a5b4fc !important;
    letter-spacing: -0.3px !important;
    text-transform: uppercase !important;
    background: rgba(99, 102, 241, 0.3) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(99, 102, 241, 0.5) !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
}

.nav-item.active .tm-text-icon {
    color: #fff !important;
    background: rgba(99, 102, 241, 0.5) !important;
}

/* Prevent TM icon from moving on hover */
.nav-link:hover .tm-text-icon,
.floating-nav .nav-item .nav-link:hover .tm-text-icon,
.nav-item:hover .nav-link .tm-text-icon {
    transform: none !important;
    margin: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
}

/* Keep TM icon centered in its container on hover */
.nav-link.tm-icon:hover {
    justify-content: center !important;
}

.nav-link.tm-icon:hover .tm-text-icon {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}