/*
 * Theme CSS — layout, animations, and responsive styles.
 *
 * All values come from CSS custom properties emitted by get_base_css()
 * in components/shared/colors.py (injected inline in base.html).
 *
 * Loaded AFTER the inline :root block so var() references resolve.
 */

/* =================================================================
   MD3 Elevation & State layers
   ================================================================= */

.md-elevation-0 { box-shadow: none; }
.md-elevation-1 { box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15); }
.md-elevation-2 { box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15); }
.md-elevation-3 { box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 8px 3px rgba(0,0,0,0.15); }

/* =================================================================
   Base styles (mobile-first)
   ================================================================= */

html {
    font-size: var(--theme-typo-base-mobile);
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--theme-color-background);
    color: var(--theme-color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--theme-typo-base-rem);
    line-height: var(--theme-typo-leading-normal);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: 'tnum' 1, 'lnum' 1, 'kern' 1;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
}

p, span, div, td, th, label { font-size: inherit; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* =================================================================
   KPI Cards — stack on mobile, row on desktop
   ================================================================= */

.kpi-cards-row { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
.kpi-card { min-width: 100%; padding: 1.25rem; }

/* =================================================================
   Tables — horizontal scroll on mobile
   ================================================================= */

.table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.md-table { font-size: var(--theme-typo-sm); min-width: 500px; }
.md-table th { font-size: var(--theme-typo-xs); font-weight: var(--theme-typo-font-semibold); white-space: nowrap; }
.md-table td { font-size: var(--theme-typo-sm); }

/* =================================================================
   Charts — responsive height
   ================================================================= */

.chart-container { height: var(--theme-typo-chart-height-mobile); width: 100%; }
[class*="echarts"]:not(.mini-chart) { height: var(--theme-typo-chart-height-mobile) !important; }

/* =================================================================
   Text utility overrides (accessible font sizes from theme)
   ================================================================= */

.text-xs  { font-size: var(--theme-typo-xs) !important; }
.text-sm  { font-size: var(--theme-typo-sm) !important; }
.text-base { font-size: var(--theme-typo-base-rem) !important; }
.text-lg  { font-size: var(--theme-typo-lg) !important; }
.text-xl  { font-size: var(--theme-typo-xl) !important; }
.text-2xl { font-size: var(--theme-typo-2xl) !important; }
.text-3xl { font-size: var(--theme-typo-3xl) !important; }

/* =================================================================
   Touch-friendly elements
   ================================================================= */

button, .clickable, [role="button"] { min-height: var(--theme-typo-touch-target); min-width: var(--theme-typo-touch-target); }
tr[style*="cursor: pointer"] { min-height: 52px; }
.expand-icon { min-width: var(--theme-typo-touch-target); min-height: var(--theme-typo-touch-target); display: flex; align-items: center; justify-content: center; }

/* =================================================================
   Decomposition table — mobile optimized
   ================================================================= */

.decomp-table { min-width: 400px; }
.decomp-cell { padding: 12px 8px !important; }
.decomp-badge { min-height: 32px; padding: 6px 10px !important; font-size: var(--theme-typo-xs) !important; }

/* =================================================================
   Desktop (min-width from theme)
   ================================================================= */

@media (min-width: 640px) {
    html { font-size: var(--theme-typo-base-desktop); }
    .kpi-cards-row { flex-direction: row; flex-wrap: wrap; }
    .kpi-card { min-width: var(--theme-typo-card-min-width); flex: 1; }
    .md-table { font-size: var(--theme-typo-base-rem); }
    .md-table th { font-size: var(--theme-typo-sm); }
    .md-table td { font-size: var(--theme-typo-base-rem); }
    .chart-container, [class*="echarts"]:not(.mini-chart) { height: var(--theme-typo-chart-height-desktop) !important; }
    .hero-stats > div { border-bottom: none; border-right: 1px solid var(--theme-color-border); }
    .hero-stats > div:last-child { border-right: none; }
}

@media (min-width: 1024px) {
    .kpi-cards-row { flex-wrap: nowrap; }
}

/* =================================================================
   Scrollbar & snap utilities
   ================================================================= */

.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.scroll-snap-x { scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.scroll-snap-x > * { scroll-snap-align: start; }

/* =================================================================
   Hero stats — responsive dividers
   ================================================================= */

.hero-stats > div { border-bottom: 1px solid var(--theme-color-border); position: relative; overflow: hidden; transition: background 0.2s ease; }
.hero-stats > div:last-child { border-bottom: none; }
.hero-stats > div:hover { background: rgba(45, 74, 138, 0.02); }

/* Period pills — compact */
.period-pills button { min-height: 0 !important; min-width: 0 !important; }

/* Metric numbers */
.metric-num { font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; }

/* =================================================================
   Micro-interactions
   ================================================================= */

button:active:not(:disabled), [role="button"]:active:not(:disabled) { transform: scale(0.97); transition: transform 0.1s ease; }

/* =================================================================
   Animations & keyframes
   ================================================================= */

@keyframes bar-fill { from { width: 0%; } }
.pacing-fill { animation: bar-fill 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.3s; }

@keyframes arc-fill { from { stroke-dashoffset: var(--arc-circumference); } }
.pacing-arc { animation: arc-fill 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.3s; }

@keyframes skeleton-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }
.skeleton-pulse { background: var(--theme-color-border); animation: skeleton-pulse 2.5s ease-in-out infinite; border-radius: var(--theme-radius-sm); }

@keyframes anomaly-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 96, 96, 0.3); } 50% { box-shadow: 0 0 8px 2px rgba(192, 96, 96, 0.15); } }
.anomaly-pulse { animation: anomaly-pulse 2.5s ease-in-out infinite; }

@keyframes page-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-slide-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

.anim-rise { animation: page-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-header { animation: page-slide-down 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }

.anim-stagger > * { opacity: 0; animation: page-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-stagger > *:nth-child(1) { animation-delay: 0.06s; }
.anim-stagger > *:nth-child(2) { animation-delay: 0.12s; }
.anim-stagger > *:nth-child(3) { animation-delay: 0.18s; }
.anim-stagger > *:nth-child(4) { animation-delay: 0.24s; }
.anim-stagger > *:nth-child(5) { animation-delay: 0.30s; }
.anim-stagger > *:nth-child(6) { animation-delay: 0.36s; }
.anim-stagger > *:nth-child(7) { animation-delay: 0.42s; }
.anim-stagger > *:nth-child(8) { animation-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
    .anim-rise, .anim-header, .anim-stagger > *, .skeleton-pulse, .anomaly-pulse, .pacing-fill, .pacing-arc {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* =================================================================
   Focus & keyboard navigation
   ================================================================= */

*:focus-visible { outline: 2px solid var(--theme-color-primary-light); outline-offset: 2px; border-radius: var(--theme-radius-sm); }
*:focus:not(:focus-visible) { outline: none; }

/* =================================================================
   Print
   ================================================================= */

@media print {
    header, nav, button, [role="button"], .period-pills, .hide-scrollbar { display: none !important; }
    body { background: #fff !important; color: #2a2a35 !important; font-size: 11pt !important; }
    [class*="echarts"] { height: 200px !important; }
    .skeleton-pulse, .anomaly-pulse { animation: none !important; }
}