/* AI Infrastructure Dashboard */
.ai-page { max-width: 1400px; margin: 0 auto; padding: var(--spacing-lg); }

.ai-module {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--border-color, #334155);
    border-radius: 12px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.ai-module-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.ai-module-title { margin: 0; font-size: 1.3rem; color: var(--text-primary, #f1f5f9); }
.ai-module-source { font-size: 0.8rem; color: var(--text-muted, #64748b); }
.ai-module-desc { font-size: 0.85rem; color: var(--text-secondary, #94a3b8); margin: 0 0 var(--spacing-md) 0; }

.ai-module-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ai-module-badge.live { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.ai-module-badge.curated { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }

/* Charts */
.ai-chart-wrap { position: relative; height: 320px; margin-top: var(--spacing-sm); }
.ai-chart-tall { height: 420px; }

/* 2x2 grid for mini charts */
.ai-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}
.ai-mini-chart { height: 220px; position: relative; }

/* Side-by-side module grid */
.ai-module-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-sm);
}

/* GPU % slider */
.ai-capex-controls { margin-bottom: var(--spacing-sm); }
.ai-gpu-toggle { display: flex; align-items: center; gap: 10px; }
.ai-toggle-label { font-size: 0.85rem; color: var(--text-secondary, #94a3b8); }
.ai-toggle-value { font-size: 0.9rem; font-weight: 600; color: var(--text-primary, #f1f5f9); min-width: 40px; }
.ai-slider {
    -webkit-appearance: none;
    width: 200px;
    height: 6px;
    border-radius: 3px;
    background: var(--border-color, #334155);
    outline: none;
}
.ai-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
}

/* GPU pricing table */
.ai-table-wrap { overflow-y: auto; max-height: 320px; }
.ai-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.ai-table-wrap th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary, #1e293b);
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #334155);
}
.ai-table-wrap td {
    padding: 6px 10px;
    color: var(--text-primary, #f1f5f9);
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
}
.ai-table-wrap tr:hover td { background: rgba(51, 65, 85, 0.2); }

/* Ornn module — controls + stat strips + movers table */
.ornn-controls {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: center;
    margin: var(--spacing-sm) 0 var(--spacing-md);
}
.ornn-stat-strip {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    padding: var(--spacing-sm);
    background: rgba(30,41,59,0.4);
    border: 1px solid var(--border-color, #334155);
    border-radius: 6px;
    margin-bottom: var(--spacing-sm);
}
.ornn-stat-strip .stat {
    flex: 1;
    min-width: 110px;
    text-align: center;
}
.ornn-stat-strip .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    letter-spacing: 0.05em;
}
.ornn-stat-strip .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    margin-top: 2px;
}
.ornn-stat-strip .stat-value.up   { color: #10b981; }
.ornn-stat-strip .stat-value.down { color: #ef4444; }

#memoryMovers table { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
#memoryMovers th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-muted, #64748b);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--border-color, #334155);
}
#memoryMovers td { padding: 6px 8px; border-bottom: 1px solid rgba(51,65,85,0.3); }
#memoryMovers td.pct.up   { color: #10b981; font-weight: 600; }
#memoryMovers td.pct.down { color: #ef4444; font-weight: 600; }
#memoryMovers .mover-name { font-size: 0.78rem; color: var(--text-primary, #f1f5f9); }
#memoryMovers .mover-cat { font-size: 0.7rem; color: var(--text-muted, #64748b); text-transform: uppercase; }

/* Responsive */
@media (max-width: 900px) {
    .ai-grid-2x2 { grid-template-columns: 1fr; }
    .ai-module-grid { grid-template-columns: 1fr; }
}