/* 
 * CPaaS Themes
 * Overrides root variables based on data-theme attribute
 */

/* ── Ocean Blue ── */
[data-theme="ocean"] {
    --primary: #0284c7;
    --primary-dark: #0369a1;
    --primary-light: #e0f2fe;
    --primary-glow: rgba(2, 132, 199, 0.15);
    --bg-sidebar: #0f172a;
    --bg-sidebar-hover: #1e293b;
    --bg-sidebar-active: rgba(2, 132, 199, 0.2);
    --text-sidebar: #cbd5e1;
}

/* ── Forest Green ── */
[data-theme="forest"] {
    --primary: #059669;
    --primary-dark: #047857;
    --primary-light: #d1fae5;
    --primary-glow: rgba(5, 150, 105, 0.15);
    --bg-sidebar: #064e3b;
    --bg-sidebar-hover: #065f46;
    --bg-sidebar-active: rgba(5, 150, 105, 0.2);
    --text-sidebar: #a7f3d0;
}

/* ── Midnight Dark ── */
[data-theme="midnight"] {
    --primary: #8b5cf6;
    --primary-dark: #7c3aed;
    --primary-light: #ede9fe;
    --primary-glow: rgba(139, 92, 246, 0.15);
    
    /* Darker portal background */
    --bg: #0f172a;
    --bg-card: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --border: #334155;
    --border-light: #1e293b;
    
    --bg-sidebar: #020617;
    --bg-sidebar-hover: #0f172a;
    --bg-sidebar-active: rgba(139, 92, 246, 0.2);
    --text-sidebar: #94a3b8;
}

/* Elements that need specific overrides for Midnight dark mode */
[data-theme="midnight"] .card, 
[data-theme="midnight"] .stat-card,
[data-theme="midnight"] .header {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}
[data-theme="midnight"] .data-table th {
    background: #0f172a;
    color: var(--text-primary);
    border-color: var(--border);
}
[data-theme="midnight"] .data-table td {
    border-color: var(--border);
}
[data-theme="midnight"] .form-control {
    background: #0f172a;
    border-color: var(--border);
    color: var(--text-primary);
}

/* ── Sunset Orange ── */
[data-theme="sunset"] {
    --primary: #ea580c;
    --primary-dark: #c2410c;
    --primary-light: #ffedd5;
    --primary-glow: rgba(234, 88, 12, 0.15);
    --bg-sidebar: #431407;
    --bg-sidebar-hover: #7c2d12;
    --bg-sidebar-active: rgba(234, 88, 12, 0.2);
    --text-sidebar: #fed7aa;
}