/* Global Styles */

/* 
 * Consistent Font Sizing - Independent of System Settings
 * Uses a fixed base with minimal flexibility via clamp()
 * text-size-adjust prevents mobile browsers from inflating text
 */
html {
    /* Base font size: starts at 16px, scales slightly with viewport, max 18px */
    font-size: clamp(15px, 0.5vw + 14px, 18px);
    
    /* Prevent automatic text inflation on mobile devices (especially Android) */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    
    /* Ensure consistent rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override for users who really need larger text (respects prefers-reduced-motion & accessibility) */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

:root {
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --bg-gradient: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: var(--bg-gradient);
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite;
    min-height: 100vh;
    color: #1e293b;
    /* Slate 800 */
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Enhanced Glassmorphism */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    /* Highlight for 3D effect */
    border-left: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--glass-shadow);
    border-radius: 1rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.glass-panel:hover {
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}

.dark .glass-panel {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Animations & Transitions */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin 3s linear infinite;
}

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

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

/* Staggered Animation for Dashboard Items */
#dashboard-content>* {
    opacity: 0;
    /* Default hidden for anim */
    animation: fadeInUp 0.6s ease-out forwards;
}

#dashboard-content>*:nth-child(1) {
    animation-delay: 0.1s;
}

/* Quick Stats Grid items - handled by their container if possible, but here we target direct children of dashboard grid.
   The Quick Stats Grid is the 2nd child of Dashboard Grid.
   We probably want to animate its children too.
*/
#dashboard-content>*:nth-child(2) {
    animation-delay: 0.2s;
}

#dashboard-content>*:nth-child(3) {
    animation-delay: 0.3s;
}

#dashboard-content>*:nth-child(4) {
    animation-delay: 0.4s;
}

#dashboard-content>*:nth-child(5) {
    animation-delay: 0.5s;
}

/* Modal Transition */
.modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(8px);
    /* Blur background behind modal */
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

/* Buttons & Interactive Elements */
.chart-btn {
    transition: all 0.2s ease;
}

.chart-btn.active {
    background-color: #fff;
    color: #2563eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

/* Custom Scrollbar for webkit */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.8);
}