/* ========================================
   AIMarketCap - Main Stylesheet
   File: /css/main.css
   Last Updated: 2025
   MODERN CSS: Cascade Layers, Nesting, Container Queries
   ======================================== */

/* ========================================
   CSS CASCADE LAYERS (2024+ Feature)
   Explicit layer order for predictable cascade
   Browser Support: Chrome 99+, Firefox 97+, Safari 15.4+
   ======================================== */

@layer settings, reset, base, layout, components, utilities, overrides;

/* ========================================
   ITCSS LAYER 1: SETTINGS
   Design tokens, CSS variables, config
   ======================================== */
@import url('1-settings/variables.css') layer(settings);

/* ========================================
   ITCSS LAYER 2: GENERIC
   Resets, normalize, box-sizing
   ======================================== */
@import url('2-generic/reset.css') layer(reset);

/* ========================================
   ITCSS LAYER 3: ELEMENTS
   Base HTML element styling (no classes)
   ======================================== */
@import url('3-elements/typography.css') layer(base);
@import url('3-elements/forms.css') layer(base);
@import url('3-elements/tables.css') layer(base);

/* ========================================
   ITCSS LAYER 4: OBJECTS
   Layout patterns without visual styling
   ======================================== */
@import url('4-objects/o-container.css') layer(layout);
@import url('4-objects/o-grid.css') layer(layout);
@import url('4-objects/o-layout.css') layer(layout);
@import url('4-objects/o-wrapper.css') layer(layout);
@import url('4-objects/o-media.css') layer(layout);

/* ========================================
   ITCSS LAYER 5: COMPONENTS
   UI components with visual styling
   ======================================== */
@import url('5-components/c-button.css') layer(components);
@import url('5-components/c-card.css') layer(components);
@import url('5-components/c-header.css') layer(components);
@import url('5-components/c-footer.css') layer(components);
@import url('5-components/c-ticker.css') layer(components);
@import url('5-components/c-chart-modal.css') layer(components);
@import url('5-components/c-search.css') layer(components);
@import url('5-components/c-news-ticker.css') layer(components);
@import url('5-components/c-broker-bar.css') layer(components);
@import url('5-components/c-table.css') layer(components);

/* Feature modules with internal ITCSS */
@import url('features/investment/investment.css') layer(components);

/* Note: investment-panel-mobile.css merged into features/investment/investment.css */

/* ========================================
   ITCSS LAYER 6: UTILITIES
   Single-purpose helper classes (highest specificity)
   ======================================== */
@import url('6-utilities/u-helpers.css') layer(utilities);

/* ========================================
   OVERRIDES LAYER
   Page-specific styles and utility overrides
   Highest specificity layer (after utilities)
   ======================================== */
@layer overrides {
/* ===== PAGE TITLE ===== */
h1 {
    font-size: clamp(24px, 5vw, 48px);
    font-weight: 900;
    background: linear-gradient(135deg, var(--oasis-blue) 0%, var(--sand-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

/* ===== HELPER TEXT ===== */
.click-instruction {
    color: var(--oasis-blue);
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
    font-style: italic;
}

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
    display: none;
    padding: 10px;
    background: linear-gradient(90deg, transparent, var(--sand-light), transparent);
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
    border-radius: var(--border-radius-md);
    font-style: italic;
}

/* Show on tablet and below (768px - 1365px) */
@media (width <= 1365px) {
    .scroll-indicator {
        display: block;
    }
}

/* ===== LOADING STATES ===== */
.loading {
    padding: 40px;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

.loading-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid var(--sand-medium);
    border-top-color: var(--oasis-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ===== ANIMATIONS ===== */
@keyframes fade-in {
    from {
        opacity: 0%;
        transform: translateY(10px);
    }
    to {
        opacity: 100%;
        transform: translateY(0);
    }
}

@keyframes fade-in-slide {
    from {
        opacity: 0%;
        transform: translateX(-20px);
    }
    to {
        opacity: 100%;
        transform: translateX(0);
    }
}

@keyframes spin {
    to { 
        transform: rotate(360deg); 
    }
}

/* Page load animation */
.container {
    animation: fade-in 0.5s ease-out;
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
   Aligned with layout-system.css breakpoints
   ======================================== */

/* Mobile: 320px - 767px */
@media (width <= 767px) {
    h1 {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    .click-instruction {
        font-size: 12px;
        margin-bottom: 8px;
    }
}

/* Small Mobile: 320px - 479px */
@media (width <= 479px) {
    h1 {
        font-size: 18px;
    }
}

/* Tablet: 768px - 1365px */
@media (width >= 768px) and (width <= 1365px) {
    h1 {
        font-size: 30px;
    }
}

/* Desktop: 1920px+ (Full HD) */
@media (width >= 1920px) {
    h1 {
        font-size: 48px;
    }
}

/* 2K: 2560px+ */
@media (width >= 2560px) {
    h1 {
        font-size: 52px;
    }
}

/* 4K: 3840px+ */
@media (width >= 3840px) {
    h1 {
        font-size: 56px;
        margin-bottom: 40px;
    }
}

/* 8K: 7680px+ */
@media (width >= 7680px) {
    h1 {
        font-size: 84px;
        margin-bottom: 50px;
    }
}

/* ===== CUSTOM SCROLLBAR ===== */

/* Applied globally for consistency */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--sand-light);
    border-radius: var(--border-radius-md);
}

::-webkit-scrollbar-thumb {
    background: var(--sand-dark);
    border-radius: var(--border-radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sand-deep);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sand-dark) var(--sand-light);
}

/* ===== PRINT STYLES ===== */
@media print {
    body {
        background: var(--primitive-color-white);
    }
    
    body::before {
        display: none;
    }
    
    .container {
        width: 100%;
        padding: 0;
    }
    
    .invest-btn,
    .investment-panel-row,
    .scroll-indicator,
    .click-instruction,
    .main-footer,
    .cookie-banner,
    .broker-cards-wrapper,
    .news-ticker-wrapper,
    .etf-ticker-wrapper,
    .chip-ticker-wrapper {
        display: none !important;
    }
    
    table {
        width: 100%;
        font-size: 10pt;
    }
    
    .table-wrapper {
        box-shadow: none;
        border: 1px solid #000;
        overflow: visible;
    }
    
    h1 {
        background: none !important;
        color: var(--text-primary) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        -webkit-text-fill-color: var(--text-primary) !important;
    }
    
    /* Ensure all columns are visible when printing */
    th, td {
        display: table-cell !important;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: high) {
    .table-wrapper {
        border: 2px solid currentcolor;
    }
    
    th, td {
        border: 1px solid currentcolor;
    }
    
    .invest-btn {
        border: 2px solid currentcolor;
    }
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--oasis-blue);
    outline-offset: 2px;
}

/* ===== UTILITY OVERRIDES ===== */

/* These should have highest specificity */
.no-animate {
    transition: none !important;
    animation: none !important;
}

.force-show {
    display: block !important;
}

.force-hide {
    display: none !important;
}

.no-scroll {
    overflow: hidden !important;
}

} /* End @layer overrides */

/* ===== END OF MAIN.CSS ===== */