/* ================================================================
# DACOG Search Engine – System Architecture
# File: ad-analytics.css
# Path: /static/css/ad-analytics.css
# Version: 3.0.0
# Description: Mathematical-Unit Analytics UI (Light/Hero Theme)
# ================================================================*/

/* 1. Base Wrappers */
.analytics-wrapper {
    padding-top: 2.5rem; /* 40px */
    padding-bottom: 3.125rem; /* 50px */
    min-height: 100vh;
}

/* 2. Theme-Aware Data Cards */
.analytic-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);
    height: 100%;
    -webkit-transition: -webkit-transform 0.2s ease, box-shadow 0.2s ease;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.analytic-card:hover {
    -webkit-transform: translateY(-0.125rem);
    -moz-transform: translateY(-0.125rem);
    -ms-transform: translateY(-0.125rem);
    -o-transform: translateY(-0.125rem);
    transform: translateY(-0.125rem);
    -webkit-box-shadow: var(--dacog-shadow-dropdown);
    -moz-box-shadow: var(--dacog-shadow-dropdown);
    box-shadow: var(--dacog-shadow-dropdown);
}

.analytic-card-body {
    padding: 1.5rem;
    text-align: center;
}

/* 3. Premium / Financial Card Styling */
.analytic-card-dark {
    background: linear-gradient(135deg, var(--dacog-bg-topbar), #000000);
    color: #ffffff;
    border: none;
}

.analytic-card-dark .text-white-50 {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 4. Chart Wrappers */
.chart-container {
    position: relative;
    width: 100%;
}

/* 5. Typography Utilities */
.stat-title {
    font-size: 0.75rem;
    letter-spacing: 0.0625rem;
    color: var(--dacog-text-muted);
}

.stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    color: var(--dacog-text-main);
}

.text-primary-custom { color: var(--dacog-accent-primary) !important; }
.text-success-custom { color: var(--dacog-accent-green) !important; }

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

@media screen and (max-width: 62em) { /* 992px */
    .analytics-header-block {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
}

@media screen and (max-width: 30em) { /* 480px */
    .analytics-wrapper {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    .analytic-card-body {
        padding: 1.25rem;
    }
    
    .stat-value {
        font-size: 1.75rem; /* Shrink oversized fonts on mobile */
    }
    
    .analytics-header-block h2 {
        font-size: 1.5rem;
    }
    
    /* Optimize chart container heights for portrait mobile screens */
    #placementChart {
        max-height: 15.625rem; /* Prevents donut from blowing up the viewport */
    }
}