/* ============================================
   企業級 LLM 智庫 — Dashboard V2 Page Styles
   ============================================
   
   Asymmetric dual-column layout with smart sections.
   All tokens come from design-system/*.css.
   ============================================ */


/* ── Dashboard Hero: 2-column asymmetric ── */
.dash-hero {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.dash-hero-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.dash-hero-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}


/* ── Dashboard Sections ── */
.dash-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.dash-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.dash-section-title i,
.dash-section-title svg {
    width: 16px;
    height: 16px;
}

/* ── Dashboard Cards: remove hover effects ── */
.dash-hero .card:hover,
.dash-bottom .card:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    border-color: var(--color-border);
}

/* ── Dashboard Cards: dark mode background (matches card-flat / table) ── */
[data-theme="dark"] .dash-hero .card,
[data-theme="dark"] .dash-bottom .card {
    background: color-mix(in srgb, var(--color-bg-surface) 60%, transparent);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

[data-theme="dark"] .dash-hero .card:hover,
[data-theme="dark"] .dash-bottom .card:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
    border-color: rgba(240, 237, 230, 0.08);
}


/* ── Attention List ── */
.attention-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}


/* ── KPI 2x2 Grid ── */
.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--color-border);
}

.kpi-grid .kpi-item {
    background: var(--color-bg-elevated);
    padding: var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

/* Vertical divider: only left column items get right border */
.kpi-grid .kpi-item:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

/* Remove bottom border from last row */
.kpi-grid .kpi-item:nth-last-child(-n+2) {
    border-bottom: none;
}

[data-theme="dark"] .kpi-grid {
    border-top-color: rgba(240, 237, 230, 0.06);
}

[data-theme="dark"] .kpi-grid .kpi-item {
    background: transparent;
    border-color: rgba(240, 237, 230, 0.06);
}

.kpi-unit {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-tertiary);
}


/* ── Todo ── */
.todo-list {
    display: flex;
    flex-direction: column;
}

.todo-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    font-size: 12px;
    border-radius: var(--radius-badge);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.5px;
}


/* ── Dashboard Bottom: Timeline + Health ── */
.dash-bottom {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}


/* ── Timeline Dot Colors ── */
.dot-blue {
    background: var(--color-info-light);
    color: var(--color-accent-blue);
}

.dot-green {
    background: var(--color-success-light);
    color: var(--color-accent-green);
}

.dot-purple {
    background: var(--color-purple-light);
    color: var(--color-accent-purple);
}

.dot-orange {
    background: var(--color-warning-light);
    color: var(--color-accent-orange);
}

.dot-red {
    background: var(--color-error-light, #fef2f2);
    color: var(--color-error, #ef4444);
}


/* ── Health Bar Fill Colors ── */
.fill-green {
    background: linear-gradient(90deg, var(--color-accent-green), #34d399);
}

.fill-orange {
    background: linear-gradient(90deg, var(--color-accent-orange), #fbbf24);
}

.fill-red {
    background: linear-gradient(90deg, var(--color-error), #f87171);
}

.health-value[data-color="green"] {
    color: var(--color-accent-green);
}

.health-value[data-color="orange"] {
    color: var(--color-accent-orange);
}

.health-value[data-color="red"] {
    color: var(--color-error);
}


/* ── Health List ── */
.health-list {
    display: flex;
    flex-direction: column;
}


/* ── Filter Tabs (Timeline) ── */
.filter-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--color-bg-hover);
    padding: 3px;
    border-radius: var(--radius-input);
}

.filter-tabs .tab {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.filter-tabs .tab.active {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
}

.filter-tabs .tab:hover:not(.active) {
    color: var(--color-text-primary);
}

[data-theme="dark"] .filter-tabs {
    background: rgba(240, 237, 230, 0.04);
}

[data-theme="dark"] .filter-tabs .tab.active {
    background: rgba(240, 237, 230, 0.08);
    box-shadow: none;
}


/* ── Utility Helpers ── */
.text-sm {
    font-size: var(--text-sm);
}

.text-xs {
    font-size: var(--text-xs);
}

.text-muted {
    color: var(--color-text-tertiary);
}

.font-medium {
    font-weight: var(--weight-medium);
}

.mt-auto {
    margin-top: auto;
}


/* ── Footer ── */
.footer {
    padding: var(--space-6) var(--space-8);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}


/* ── Theme Toggle (header inline button) ── */
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-base) var(--ease-default);
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-border-hover);
}

.theme-toggle i,
.theme-toggle svg {
    width: 16px;
    height: 16px;
}

[data-theme="dark"] .theme-toggle {
    background: rgba(240, 237, 230, 0.06);
    border: var(--glass-border);
    color: var(--color-accent-gold, #E8C872);
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(240, 237, 230, 0.1);
    box-shadow: var(--glow-gold, var(--glow-cyan));
}


/* ── Card Header with icon ── */
.card-header .text-sm {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.card-header .text-sm i,
.card-header .text-sm svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
}


/* ── Responsive ── */
@media (max-width: 1200px) {
    .dash-hero {
        grid-template-columns: 1fr;
    }

    .dash-bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 639px) { /* changed to standard mobile breakpoint */
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .kpi-grid .kpi-item {
        padding: var(--space-4) var(--space-4);
        border-right: none;
    }
    
    .kpi-grid .kpi-value {
        font-size: var(--text-xl);
    }
    
    .dash-section-title {
        font-size: var(--text-sm);
    }
}