/*
 * ============================================================
 * DynixIQ Design System
 * Version: 1.0.0
 * ============================================================
 * This file defines the authoritative design tokens, spacing,
 * typography, color, and component specs for the entire app.
 * ALL pages and components MUST follow these guidelines.
 * ============================================================
 */

/* ============================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================ */
:root {
    /* --- Font Family --- */
    --ds-font-family: 'Poppins', sans-serif;

    /* --- Typography Scale --- */
    --ds-font-page-title: 24px;        /* Page titles: 600 weight */
    --ds-font-section-title: 18px;     /* Section titles: 600 weight (18-20px) */
    --ds-font-card-title: 15px;        /* Card titles: 600 weight (14-15px) */
    --ds-font-body: 13px;              /* Body text: 400 weight */
    --ds-font-label: 11px;             /* Labels: 600 weight, uppercase, 0.5px spacing */
    --ds-font-value-lg: 32px;          /* Large metric values: 600 weight */
    --ds-font-value-md: 16px;          /* Medium values: 600 weight (16-18px) */
    --ds-font-value-sm: 13px;          /* Small values */
    --ds-font-caption: 11px;           /* Captions: 400 weight (11-12px) */
    --ds-font-change: 13px;            /* Change/delta text: 500 weight */

    /* --- Spacing Scale (base 4px) --- */
    --ds-space-micro: 4px;             /* Icon gaps */
    --ds-space-sm: 8px;                /* Text gaps */
    --ds-space-md: 12px;              /* Element gaps */
    --ds-space-base: 16px;            /* Card padding (mobile), standard */
    --ds-space-lg: 20px;              /* Card padding (desktop), grid gaps */
    --ds-space-xl: 24px;              /* Section header margins */
    --ds-space-2xl: 32px;             /* Section margins, container padding */

    /* --- Border Radius Scale --- */
    --ds-radius-xs: 4px;              /* Badges, tags */
    --ds-radius-sm: 6px;              /* Buttons, inputs */
    --ds-radius-md: 8px;              /* Icons, mini cards */
    --ds-radius-lg: 10px;             /* Nav tabs container */
    --ds-radius-xl: 12px;             /* Cards, dropdowns */

    /* --- Colors: Backgrounds --- */
    --ds-bg-primary: #F8F9FA;
    --ds-bg-secondary: #FFFFFF;
    --ds-bg-tertiary: #F1F3F4;

    /* --- Colors: Text --- */
    --ds-text-primary: #1A1A1A;
    --ds-text-secondary: #5F6368;
    --ds-text-tertiary: #9AA0A6;

    /* --- Colors: Borders --- */
    --ds-border-light: #E8EAED;

    /* --- Colors: Accent / Semantic --- */
    --ds-accent-blue: #4285F4;
    --ds-accent-green: #34A853;
    --ds-accent-red: #EA4335;
    --ds-accent-amber: #F59E0B;

    /* --- Grid System --- */
    --ds-container-max-width: 1600px;
    --ds-container-padding: 32px;
    --ds-grid-columns: 4;
    --ds-grid-gap: 20px;
    --ds-section-margin: 32px;

    /* --- Card Specs --- */
    --ds-card-padding: 20px;
    --ds-card-radius: 12px;
    --ds-card-border: 1px solid #E8EAED;
    --ds-card-perf-border: 4px;       /* Performance card left border */

    /* --- Component: Section Icon --- */
    --ds-section-icon-size: 48px;
    --ds-section-icon-radius: 12px;
    --ds-section-icon-svg: 20px;

    /* --- Component: Card Icon --- */
    --ds-card-icon-size: 32px;
    --ds-card-icon-radius: 8px;
    --ds-card-icon-svg: 16px;

    /* --- Component: Mini Stat Box --- */
    --ds-mini-stat-padding: 12px;
    --ds-mini-stat-radius: 8px;

    /* --- Component: Badge --- */
    --ds-badge-padding: 4px 10px;
    --ds-badge-font: 10px;

    /* --- Component: Nav Tab --- */
    --ds-tab-padding: 8px 16px;
    --ds-tab-font: 13px;
    --ds-tab-container-radius: 10px;

    /* --- Component: Sparkline --- */
    --ds-sparkline-height: 40px;
    --ds-sparkline-height-sm: 32px;

    /* --- Desktop Wireframe: Min Heights --- */
    --ds-metric-card-min-height: 180px;
    --ds-metric-card-sm-min-height: 160px;
    --ds-chart-card-min-height: 380px;   /* = 180 + 20 gap + 180 */
    --ds-chart-card-padding: 24px;

    /* --- Desktop Wireframe: Row 1 Layout (Metrics + Chart) --- */
    --ds-row1-columns: 1fr 3fr;          /* 25% metrics + 75% chart */

    /* --- Desktop Wireframe: Section Margin --- */
    --ds-section-gap: 24px;              /* Space between major sections */
}

/* --- Dark Mode Tokens --- */
.dark {
    --ds-bg-primary: #000000;
    --ds-bg-secondary: #111111;
    --ds-bg-tertiary: #1a1a1a;
    --ds-text-primary: #f1f5f9;
    --ds-text-secondary: #94a3b8;
    --ds-text-tertiary: #64748b;
    --ds-border-light: #2a2a2a;
}


/* ============================================================
   2. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet: ≤1200px */
@media (max-width: 1200px) {
    :root {
        --ds-container-padding: 24px;
        --ds-grid-gap: 16px;
    }
}

/* Mobile: ≤768px */
@media (max-width: 768px) {
    :root {
        --ds-container-padding: 20px;
        --ds-grid-gap: 12px;
        --ds-card-padding: 16px;
        --ds-section-margin: 24px;
        --ds-section-icon-size: 40px;
        --ds-section-icon-radius: 10px;
        --ds-section-icon-svg: 18px;
        --ds-card-icon-size: 28px;
        --ds-card-icon-radius: 6px;
        --ds-card-icon-svg: 14px;
        --ds-mini-stat-padding: 10px;
        --ds-mini-stat-radius: 6px;
        --ds-badge-padding: 3px 8px;
        --ds-badge-font: 9px;
        --ds-tab-padding: 8px 12px;
        --ds-tab-font: 11px;
        --ds-sparkline-height: 32px;
    }
}


/* ============================================================
   3. DESIGN SYSTEM UTILITY CLASSES
   ============================================================
   Use these classes throughout the app to ensure consistency.
   ============================================================ */

/* --- Typography Classes --- */
.ds-page-title {
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-page-title);
    font-weight: 600;
    color: var(--ds-text-primary);
    line-height: 1.3;
}

.ds-section-title {
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-section-title);
    font-weight: 600;
    color: var(--ds-text-primary);
    line-height: 1.4;
}

.ds-card-title {
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-card-title);
    font-weight: 600;
    color: var(--ds-text-primary);
    line-height: 1.4;
}

.ds-body {
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-body);
    font-weight: 400;
    color: var(--ds-text-secondary);
    line-height: 1.5;
}

.ds-label {
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ds-text-tertiary);
}

.ds-value-lg {
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-value-lg);
    font-weight: 600;
    color: var(--ds-text-primary);
    line-height: 1.1;
}

.ds-value-md {
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-value-md);
    font-weight: 600;
    color: var(--ds-text-primary);
}

.ds-value-sm {
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-value-sm);
    color: var(--ds-text-primary);
}

.ds-caption {
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-caption);
    font-weight: 400;
    color: var(--ds-text-tertiary);
}

.ds-change {
    font-family: var(--ds-font-family);
    font-size: var(--ds-font-change);
    font-weight: 500;
}

/* --- Card Classes --- */
.ds-card {
    background: var(--ds-bg-secondary);
    border: var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    padding: var(--ds-card-padding);
}

.ds-card-metric {
    background: var(--co-bg-white, var(--ds-bg-secondary));
    border: 1px solid var(--co-border, var(--ds-border-light));
    border-radius: var(--ds-card-radius);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

.ds-card-metric .ds-card-inner {
    padding: var(--ds-card-padding) var(--ds-card-padding) var(--ds-space-md) var(--ds-card-padding);
}

.ds-card-perf {
    background: var(--ds-bg-secondary);
    border: var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    padding: var(--ds-card-padding);
}

.ds-card-perf-green { border-left: var(--ds-card-perf-border) solid var(--ds-accent-green); }
.ds-card-perf-red { border-left: var(--ds-card-perf-border) solid var(--ds-accent-red); }
.ds-card-perf-amber { border-left: var(--ds-card-perf-border) solid var(--ds-accent-amber); }
.ds-card-perf-blue { border-left: var(--ds-card-perf-border) solid var(--ds-accent-blue); }
.ds-card-perf-purple { border-left: var(--ds-card-perf-border) solid #8B5CF6; }

/* --- Spacing inside cards (consistent margins) --- */
.ds-card .ds-label { margin-bottom: var(--ds-space-sm); }
.ds-card .ds-value-lg { margin-bottom: 6px; }
.ds-card .ds-change { margin-bottom: var(--ds-space-base); }

/* --- Section Icon --- */
.ds-section-icon {
    width: var(--ds-section-icon-size);
    height: var(--ds-section-icon-size);
    border-radius: var(--ds-section-icon-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-section-icon svg {
    width: var(--ds-section-icon-svg);
    height: var(--ds-section-icon-svg);
}

/* --- Card Icon --- */
.ds-card-icon {
    width: var(--ds-card-icon-size);
    height: var(--ds-card-icon-size);
    border-radius: var(--ds-card-icon-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-card-icon svg {
    width: var(--ds-card-icon-svg);
    height: var(--ds-card-icon-svg);
}

/* --- Mini Stat Box --- */
.ds-mini-stat {
    padding: var(--ds-mini-stat-padding);
    border-radius: var(--ds-mini-stat-radius);
    background: var(--ds-bg-tertiary);
    text-align: center;
}

/* --- Badge --- */
.ds-badge {
    padding: var(--ds-badge-padding);
    font-size: var(--ds-badge-font);
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--ds-radius-xs);
}

/* --- Tab Container --- */
.ds-tab-container {
    display: inline-flex;
    background: var(--ds-bg-tertiary);
    border: 1px solid var(--ds-border-light);
    border-radius: var(--ds-tab-container-radius);
    padding: var(--ds-space-micro);
    gap: 2px;
}

.ds-tab {
    padding: var(--ds-tab-padding);
    font-size: var(--ds-tab-font);
    font-weight: 500;
    color: var(--ds-text-tertiary);
    background: transparent;
    border: none;
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.ds-tab.active {
    background: var(--ds-bg-tertiary);
    color: var(--ds-text-primary);
}

/* --- Sparkline --- */
.ds-sparkline {
    height: var(--ds-sparkline-height);
    width: 100%;
}

/* --- Grid Layouts --- */
.ds-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ds-grid-gap);
}

.ds-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-grid-gap);
}

.ds-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-grid-gap);
}

.ds-section {
    margin-bottom: var(--ds-section-margin);
}

@media (max-width: 1200px) {
    .ds-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .ds-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .ds-grid-4 { grid-template-columns: 1fr; }
    .ds-grid-3 { grid-template-columns: 1fr; }
    .ds-grid-2 { grid-template-columns: 1fr; }
}

/* --- Section Header (icon + title + subtitle) --- */
.ds-section-header {
    display: flex;
    align-items: center;
    gap: var(--ds-space-md);
    margin-bottom: var(--ds-space-base);
}

/* --- Card Header (icon + title) --- */
.ds-card-header {
    display: flex;
    align-items: center;
    gap: var(--ds-space-md);
    margin-bottom: var(--ds-space-md);
}

/* --- Dark mode toggle button --- */
.ds-dark-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ds-border-light);
    border-radius: var(--ds-radius-md);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--ds-text-secondary);
}

.ds-dark-toggle:hover {
    background: var(--ds-bg-tertiary);
    color: var(--ds-text-primary);
}

.ds-dark-toggle svg {
    width: 20px;
    height: 20px;
}

/* ============================================================
   4. DESKTOP WIREFRAME LAYOUT CLASSES
   ============================================================
   Reference: /public/desktop-wireframe-specs.html
   Grid system, row layouts, min-heights, and alignment rules.
   ============================================================ */

/* --- Row 1: Key Metrics (stacked) + Chart --- */
.ds-row-metrics-chart {
    display: grid;
    grid-template-columns: var(--ds-row1-columns, 1fr 3fr);
    gap: var(--ds-grid-gap);
    margin-bottom: var(--ds-grid-gap);
}

.ds-metrics-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ds-grid-gap);
}

.ds-metrics-stack > .ds-card,
.ds-metrics-stack > .ds-card-metric,
.ds-metrics-stack > [class*="co-stat-card"] {
    flex: 1;
    min-height: var(--ds-metric-card-min-height);
    display: flex;
    flex-direction: column;
}

.ds-chart-card {
    min-height: var(--ds-chart-card-min-height);
    padding: var(--ds-chart-card-padding);
    display: flex;
    flex-direction: column;
}

.ds-chart-card .ds-chart-area {
    flex: 1;
    min-height: 280px;
}

/* --- Row 2: 4 Equal Secondary Metrics --- */
.ds-row-secondary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ds-grid-gap);
}

.ds-row-secondary > .ds-card,
.ds-row-secondary > .ds-card-metric,
.ds-row-secondary > [class*="co-stat-card"] {
    min-height: var(--ds-metric-card-sm-min-height);
    display: flex;
    flex-direction: column;
}

/* Sparkline push to bottom */
.ds-sparkline-push {
    margin-top: auto;
}

/* --- Section gap between rows/groups --- */
.ds-section-gap {
    margin-bottom: var(--ds-section-gap);
}

/* --- 2-Column Equal Layout (Device & Day, etc.) --- */
.ds-row-half {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-grid-gap);
}

/* --- Responsive: Desktop Wireframe Layouts --- */
@media (max-width: 1200px) {
    .ds-row-metrics-chart {
        grid-template-columns: 1fr 2fr;
    }
    .ds-row-secondary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ds-row-metrics-chart {
        grid-template-columns: 1fr;
    }
    .ds-metrics-stack {
        flex-direction: column;
    }
    .ds-row-secondary {
        grid-template-columns: 1fr;
    }
    .ds-row-half {
        grid-template-columns: 1fr;
    }
}