/**
 * Frontend Dashboard Styles
 * Q&A Format with Typewriter and Slot Machine Display
 */

/* Base Container */
.ga-analytics-dashboard {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f5 100%);
    color: #212529;
    min-height: 100vh;
    transition: background 1s ease, color 1s ease;
    display: flex;
    flex-direction: column;
}

/* === THEME VARIATIONS === */

/* Day Theme (Default) */
.ga-analytics-dashboard.theme-day {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f5 100%);
    color: #212529;
}

/* Night Theme */
.ga-analytics-dashboard.theme-night {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1a1f2e 100%);
    color: #e2e8f0;
}

.ga-analytics-dashboard.theme-night .ga-dashboard-title {
    color: #f1f5f9;
}

.ga-analytics-dashboard.theme-night .ga-qa-question {
    color: #cbd5e1;
}

.ga-analytics-dashboard.theme-night .ga-qa-value {
    color: #f1f5f9;
}

.ga-analytics-dashboard.theme-night .ga-live-text,
.ga-analytics-dashboard.theme-night .ga-weather-temp,
.ga-analytics-dashboard.theme-night .ga-coord-value {
    color: #cbd5e1;
}

/* Sunrise Theme */
.ga-analytics-dashboard.theme-sunrise {
    background: linear-gradient(135deg, #dae7f7 0%, #e6f0fb 20%, #f1ebd9 45%, #f6dfba 65%, #f8cf99 82%, #f8bd7e 100%);
    color: #1f1a18;
    background-size: 320% 320%;
    animation: sunriseSkyShift 360s ease-in-out infinite alternate;
}

.ga-analytics-dashboard.theme-sunrise .ga-dashboard-title {
    color: #7d4924;
}

.ga-analytics-dashboard.theme-sunrise .ga-qa-question {
    color: #9a6b3b;
}

.ga-analytics-dashboard.theme-sunrise .ga-qa-value {
    color: #7d4924;
}

/* Sunset Theme */
.ga-analytics-dashboard.theme-sunset {
    background: linear-gradient(135deg, #fce9d6 0%, #f9c296 20%, #f69d6b 40%, #e96d4d 60%, #c0544f 80%, #593e6d 100%);
    color: #20181d;
    background-size: 360% 360%;
    animation: sunsetSkyShift 420s ease-in-out infinite alternate;
}

.ga-analytics-dashboard.theme-sunset .ga-dashboard-title {
    color: #5a2134;
}

.ga-analytics-dashboard.theme-sunset .ga-qa-question {
    color: #7e3640;
}

.ga-analytics-dashboard.theme-sunset .ga-qa-value {
    color: #5a2134;
}

/* === HEADER === */

.ga-qa-header {
    padding: 60px 80px 40px 80px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ga-dashboard-title {
    font-size: 150px !important;
    font-weight: 800 !important;
    color: #212529;
    margin: 0 !important;
    letter-spacing: -3.75px !important;
    line-height: 0.9 !important;
    transition: color 1s ease;
}

.ga-header-meta {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Live Indicator */
.ga-live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ga-live-dot {
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        background: #22c55e;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 1), 0 0 8px rgba(34, 197, 94, 0.8);
    }
    50% {
        background: #86efac;
        transform: scale(1.3);
        box-shadow: 0 0 0 12px rgba(34, 197, 94, 0), 0 0 20px rgba(34, 197, 94, 0.4);
    }
}

.ga-live-text {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Weather Widget */
.ga-weather-widget {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ga-weather-icon {
    font-size: 24px;
    line-height: 1;
}

.ga-weather-temp {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
    line-height: 1;
}

/* Coordinates */
.ga-coordinates {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ga-coord-label {
    font-size: 16px;
    line-height: 1;
}

.ga-coord-value {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    font-family: 'Courier New', monospace;
}

/* === Q&A DISPLAY === */

.ga-qa-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px 80px;
    min-height: calc(100vh - 300px);
}

.ga-qa-question {
    font-size: 101px; /* 72px * 1.4 = 100.8px (40% bigger) */
    font-weight: 600;
    color: #495057;
    margin-bottom: 60px;
    line-height: 1.3;
    letter-spacing: -1.4px;
    min-height: 132px;
    transition: color 1s ease;
    position: relative;
}

.ga-qa-question.typing-complete::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 101px;
    background: currentColor;
    margin-left: 11px;
    animation: blink 1s step-end infinite;
    vertical-align: baseline;
    position: relative;
    top: 17px;
}

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

.ga-qa-answer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ga-qa-answer.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ga-qa-answer.slide-out {
    opacity: 0 !important;
    transform: translateX(300px) translateY(-80px) scale(0.85) !important;
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.6, 0.04, 0.98, 0.335) !important;
}

.ga-qa-answer.slide-in-from-bottom {
    opacity: 0 !important;
    transform: translateY(200px) scale(0.8) !important;
    transition: none !important;
}

.ga-qa-value {
    font-size: 333px; /* 392px - 15% = 333px */
    font-weight: 800;
    color: #212529;
    line-height: 1;
    letter-spacing: -9px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    transition: color 1s ease;
    text-align: right;
}

/* Odometer Customization - Smooth Slot Machine Effect */
.ga-qa-value.odometer {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.ga-qa-value.odometer .odometer-inside {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ga-qa-value.odometer .odometer-digit {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

.ga-qa-value.odometer .odometer-formatting-mark {
    color: inherit;
}

/* Enhanced smooth slot machine animation */
.ga-qa-value.odometer .odometer-ribbon {
    perspective: 2000px;
    transform-style: preserve-3d;
    display: block;
}

.ga-qa-value.odometer .odometer-ribbon-inner {
    display: block;
    backface-visibility: hidden;
    /* Smooth slot machine rolling for each digit change */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform;
    transform: translateZ(0);
    /* Enable hardware acceleration for smoother 60fps animation */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ga-qa-value.odometer .odometer-value {
    display: block;
    transform: translateZ(0);
}

/* Force Odometer to use same font */
.ga-qa-value.odometer .odometer-inside .odometer-digit,
.ga-qa-value.odometer .odometer-inside .odometer-digit .odometer-digit-inner,
.ga-qa-value.odometer .odometer-inside .odometer-digit .odometer-value {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
    font-weight: 800 !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
}

/* Error Message */
.ga-dashboard-error {
    background: #fff5f5;
    border: 2px solid #ffc9c9;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    color: #c92a2a;
    box-shadow: 0 4px 20px rgba(201, 42, 42, 0.1);
    margin: 60px auto;
    max-width: 600px;
}

.ga-dashboard-error a {
    color: #e03131;
    text-decoration: underline;
    font-weight: 700;
}

.ga-dashboard-error a:hover {
    color: #c92a2a;
}

/* === ANIMATIONS === */

@keyframes sunriseSkyShift {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 30% 55%;
    }
    50% {
        background-position: 60% 50%;
    }
    75% {
        background-position: 40% 45%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes sunsetSkyShift {
    0% {
        background-position: 100% 50%;
    }
    20% {
        background-position: 70% 60%;
    }
    50% {
        background-position: 40% 50%;
    }
    80% {
        background-position: 20% 40%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* === RESPONSIVE === */

@media (max-width: 1400px) {
    .ga-dashboard-title {
        font-size: 112px !important;
        letter-spacing: -2.8px !important;
    }
    
    .ga-qa-question {
        font-size: 78px; /* 56px * 1.4 */
        min-height: 102px;
    }
    
    .ga-qa-question.typing-complete::after {
        height: 78px;
        width: 5px;
        top: 13px;
    }
    
    .ga-qa-value {
        font-size: 262px; /* 308px - 15% */
        letter-spacing: -7px;
    }
}

@media (max-width: 1024px) {
    .ga-qa-header {
        padding: 40px 60px 30px 60px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .ga-dashboard-title {
        font-size: 90px !important;
        letter-spacing: -2.25px !important;
    }
    
    .ga-qa-display {
        padding: 50px 60px;
    }
    
    .ga-qa-question {
        font-size: 67px; /* 48px * 1.4 */
        min-height: 87px;
    }
    
    .ga-qa-question.typing-complete::after {
        height: 67px;
        width: 5px;
        top: 11px;
    }
    
    .ga-qa-value {
        font-size: 214px; /* 252px - 15% */
        letter-spacing: -6px;
    }
}

@media (max-width: 768px) {
    .ga-qa-header {
        padding: 30px 40px 20px 40px;
    }
    
    .ga-dashboard-title {
        font-size: 60px !important;
        letter-spacing: -1.5px !important;
    }
    
    .ga-header-meta {
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .ga-qa-display {
        padding: 50px 40px;
        min-height: calc(100vh - 220px);
    }
    
    .ga-qa-question {
        font-size: 50px; /* 36px * 1.4 */
        margin-bottom: 40px;
        min-height: 66px;
    }
    
    .ga-qa-question.typing-complete::after {
        height: 50px;
        width: 4px;
        top: 8px;
    }
    
    .ga-qa-value {
        font-size: 143px; /* 168px - 15% */
        letter-spacing: -3.5px;
    }
}