/* ================================================================
# DACOG Search Engine – System Architecture
# File: commodity-page.css
# Path: /static/css/commodity-page.css
# Version: 3.0.0
# Description: Mathematical-Unit Commodity Profiles (Multi-Theme)
# ================================================================*/

/* 1. SECTOR VARIABLE ENGINE (Dynamic Theme Injectors) */
[data-sector="agriculture"] { 
    --sector-bg: linear-gradient(135deg, #0B3D2E, #146C43); 
    --sector-accent: #A3E635; 
    --sector-text: #146C43; 
}
[data-sector="energy"] { 
    --sector-bg: linear-gradient(135deg, #0F172A, #334155); 
    --sector-accent: #38BDF8; 
    --sector-text: #0F172A; 
}
[data-sector="precious-metals"] { 
    --sector-bg: linear-gradient(135deg, #3D2B1F, #6F4E37); 
    --sector-accent: #F1C40F; 
    --sector-text: #3D2B1F; 
}
[data-sector="industrial"] { 
    --sector-bg: linear-gradient(135deg, #1E293B, #475569); 
    --sector-accent: #22C55E; 
    --sector-text: #1E293B; 
}

/* Ensure Light Mode keeps dark text for Sector Colors, Hero Mode uses light text */
.theme-hero [data-sector] {
    --sector-text: var(--sector-accent); /* In Dark Mode, use the neon accent for text */
}

/* 2. HERO BANNER COMPONENTS */
.commodity-hero { 
    background: var(--sector-bg); 
    -webkit-box-shadow: 0 0.9375rem 2.1875rem rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0.9375rem 2.1875rem rgba(0,0,0,0.15);
    box-shadow: 0 0.9375rem 2.1875rem rgba(0,0,0,0.15);
    color: #ffffff !important;
}

.text-accent { color: var(--sector-accent) !important; }
.bg-accent { background-color: var(--sector-accent) !important; }
.text-sector { color: var(--sector-text) !important; }
.bg-sector { background-color: var(--sector-text) !important; }

.border-sector { border: 0.0625rem solid var(--sector-text) !important; }

.backdrop-blur {
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
}

/* Progress bar uses the sector primary color */
.progress-bar.bg-sector {
    background-color: var(--sector-accent) !important;
}

/* 3. THEME-AWARE DATA CARDS */
.commodity-data-card {
    background-color: var(--dacog-bg-nav);
    border: 0.0625rem solid var(--dacog-border-color);
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: var(--dacog-shadow-sm);
    -moz-box-shadow: var(--dacog-shadow-sm);
    box-shadow: var(--dacog-shadow-sm);
    padding: 1.5rem;
    overflow: hidden;
}

.card-header-custom {
    background-color: var(--dacog-bg-nav);
    border-bottom: 0.0625rem solid var(--dacog-border-color);
    padding: 1rem 1.5rem;
    color: var(--dacog-text-main);
}

/* Fix Tables for Dark Theme */
.theme-hero .table { color: var(--dacog-text-main); }
.theme-hero .table-light { background-color: var(--dacog-border-color); color: var(--dacog-text-muted); }
.theme-hero .table > :not(caption) > * > * { border-bottom-color: var(--dacog-border-color); }

/* List Groups */
.dacog-list-group .list-group-item {
    background-color: transparent;
    color: var(--dacog-text-main);
    border-color: var(--dacog-border-color);
    padding: 0.75rem 1rem;
}

/* ==========================================================================
   4. MEDIA QUERIES (AFRICAN TARGET OPTIMIZATION)
   ========================================================================== */

/* Mobile Portrait (Max 480px / 30em) */
@media screen and (max-width: 30em) {
    .commodity-hero .card-body {
        padding: 1.5rem !important;
    }
    
    .commodity-hero h1.display-5 {
        font-size: 2.25rem; /* Scale down heading */
    }
    
    .commodity-hero .border-start {
        border-left: none !important; /* Stack stats horizontally without borders */
        border-bottom: 0.0625rem solid rgba(255,255,255,0.2);
        padding-left: 0 !important;
        padding-bottom: 0.5rem;
        width: 100%;
    }
    
    .commodity-data-card {
        padding: 1rem;
    }
    
    #supplyMap {
        height: 15.625rem !important; /* Compress map from 400px to 250px */
    }
    
    .table-responsive {
        border: 0.0625rem solid var(--dacog-border-color);
        -webkit-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }
}