/* ==========================================================================
   I. ROOT / GLOBAL STYLES
   ========================================================================== */

/* CSS Variables have been moved to ../shared-code/css-variables.css */

/* Global Styles - MOVED TO tea-explorer-global-styles.css */
/* The following global styles are now centralized in tea-explorer-global-styles.css:
   - * { } reset
   - html { } viewport sizing
   - body { } base styles
   - .container { } layout
   
   This file now focuses on TEA Explorer specific styles while inheriting
   the global base styles from tea-explorer-global-styles.css
*/

/* Header Styles - REMOVED OLD HEADER STYLES */
/* Note: H1 styles are global and effectively part of the header */
/* Mindstate: Simplified h1 with no gradients or shadows */
h1 {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 2.4rem; /* Matched standard-of-care-index.html */
    margin-bottom: var(--spacing-xl); /* Matched standard-of-care-index.html */
    padding-bottom: var(--spacing-md); /* Matched standard-of-care-index.html */
    background: none; /* Mindstate: Remove gradient */
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #000000; /* Mindstate: Pure black text */
    background-clip: unset;
    color: #000000; /* Mindstate: Pure black */
    text-shadow: none; /* Mindstate: Remove shadow */
    position: relative;
    letter-spacing: -0.06em; /* Mindstate: Tighter letter spacing for large text */
    text-align: center; /* Added for centering like index.html main title */
    font-weight: 300; /* Mindstate: Lighter weight for large text */
}

/* Mindstate: Simplified underline with sharp corners */
h1::after { /* Added h1::after for underline effect like index.html */
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px; /* Matched standard-of-care-index.html */
    height: 4px; /* Matched standard-of-care-index.html */
    background: #6B8E23; /* Mindstate: Data green solid color */
    border-radius: 0; /* Mindstate: Sharp corners */
}

/* REMOVED .subtitle STYLES */

/* Scrollbar Styles */
/* Mindstate: Simplified scrollbar without gradients */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #F4F4F4; /* Mindstate: Light gray */
    border-radius: 0; /* Mindstate: Sharp corners */
}

::-webkit-scrollbar-thumb {
    background: #8B9187; /* Mindstate: Medium gray solid color */
    border-radius: 0; /* Mindstate: Sharp corners */
    border: none; /* Mindstate: Remove border for cleaner look */
}

::-webkit-scrollbar-thumb:hover {
    background: #3B3B3B; /* Mindstate: Dark gray on hover */
}

/* Utility Classes - REMOVED (duplicated in tea-explorer-global-styles.css) */
/* The following utility classes were removed as duplicates:
   .mt-1, .mt-2, .mt-3
   .mb-1, .mb-2, .mb-3
   .text-center, .text-muted, .hidden
   Use the ones from tea-explorer-global-styles.css instead.
*/

/* Animation keyframes have been moved to ../shared-code/animations.css */


/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: var(--spacing-md);
    }
    
    h1 {
        font-size: 2rem;
    }
    
    /* These specific responsive rules apply to shared components, 
       so they remain global or are moved to the shared section.
       Keeping them here for now as they are broad. */
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .two-column,
    .three-column {
        grid-template-columns: 1fr;
    }
    
    .tab-navigation { /* Main app tab navigation */
        flex-direction: column;
    }
    
    .tab-button { /* Main app tab buttons */
        width: 100%;
    }
}