/* ══════════════════════════════════════════════════════════════════════
   SHUBBAK STORE — 10 Comprehensive Theme Identities
   Each theme has: colors + shapes + fonts + spacing + animations + style
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. SHUBBAK — Modern Glassmorphism (Navy + Sky + Amber)
   Style: Rounded, glass effects, gradient sidebar, shimmer animations
   ───────────────────────────────────────────────────────────────────── */
[data-theme="shubbak"] {
    /* Colors */
    --t-primary: #0ea4e9; --t-primary-dark: #0284c7; --t-primary-light: #38bdf8;
    --t-accent: #f59e0a; --t-accent-dark: #d97706;
    --t-login-bg: #0f162a; --t-login-grid: rgba(14,164,233,0.04);
    --t-glow-1: rgba(14,164,233,0.15); --t-glow-2: rgba(245,158,10,0.08);
    --t-group-label: rgba(14,164,233,0.6); --t-sidebar-icon: #38bdf8;
    --t-scrollbar: rgba(14,164,233,0.5);
    --t-text-heading: #0f162a;
    /* Shape */
    --t-radius-card: 20px; --t-radius-btn: 12px;
    --t-radius-input: 12px; --t-radius-badge: 8px;
    --t-border-width: 1px;
    /* Sidebar */
    --t-sidebar-bg: linear-gradient(175deg, #0f162a 0%, #0d2248 50%, #0f162a 100%);
    --t-sidebar-text: rgba(255,255,255,0.65); --t-sidebar-active-bg: rgba(14,164,233,0.18);
    --t-sidebar-active-border: #0ea4e9; --t-sidebar-glow: 0 0 20px rgba(14,164,233,0.2);
    /* Header */
    --t-header-bg: rgba(255,255,255,0.92); --t-header-border: rgba(14,164,233,0.08);
    --t-header-blur: blur(24px);
    /* Body */
    --t-body-bg: #f0f4f8;
    /* Cards */
    --t-card-bg: rgba(255,255,255,0.95); --t-card-border: rgba(14,164,233,0.1);
    --t-card-shadow: 0 4px 24px rgba(15,22,42,0.08), 0 1px 4px rgba(14,164,233,0.06);
    --t-card-top: linear-gradient(90deg, #0ea4e9, #f59e0a, #0ea4e9); --t-card-top-h: 3px;
    --t-card-hover: translateY(-4px) scale(1.005);
    /* Buttons */
    --t-btn-bg: linear-gradient(135deg, #0ea4e9 0%, #0284c7 100%);
    --t-btn-shadow: 0 4px 16px rgba(14,164,233,0.4); --t-btn-hover-shadow: 0 8px 24px rgba(14,164,233,0.5);
    /* Inputs */
    --t-input-bg: white; --t-input-border: rgba(15,22,42,0.1);
    --t-input-focus: #0ea4e9; --t-focus-ring: rgba(14,164,233,0.18);
    /* Table */
    --t-table-header-bg: rgba(14,164,233,0.04); --t-table-row-hover: rgba(14,164,233,0.03);
    --t-table-border: rgba(14,164,233,0.08);
    /* Spacing */
    --t-density: 1.5rem; --t-section-radius: 20px;
    /* Animations */
    --t-anim-speed: 0.3s; --t-anim-curve: cubic-bezier(0.34,1.56,0.64,1);
    /* Font */
    --t-font: 'Tajawal', 'Inter', system-ui;
    --t-font-heading-weight: 800; --t-font-body-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────
   2. MIDNIGHT — Neo-Brutalism (Deep Purple + Gold)
   Style: Bold borders, flat shadows, sharp typography, high contrast
   ───────────────────────────────────────────────────────────────────── */
[data-theme="midnight"] {
    --t-primary: #8b5cf6; --t-primary-dark: #7c3aed; --t-primary-light: #a78bfa;
    --t-accent: #fbbf24; --t-accent-dark: #f59e0b;
    --t-login-bg: #120a2e; --t-login-grid: rgba(139,92,246,0.06);
    --t-glow-1: rgba(139,92,246,0.2); --t-glow-2: rgba(251,191,36,0.1);
    --t-group-label: rgba(167,139,250,0.7); --t-sidebar-icon: #a78bfa;
    --t-scrollbar: rgba(139,92,246,0.5); --t-text-heading: #120a2e;
    /* Shape — Neo-Brutalism: SHARP corners + thick borders */
    --t-radius-card: 4px; --t-radius-btn: 4px;
    --t-radius-input: 4px; --t-radius-badge: 2px;
    --t-border-width: 2px;
    /* Sidebar */
    --t-sidebar-bg: linear-gradient(180deg, #0d0824 0%, #120a2e 100%);
    --t-sidebar-text: rgba(255,255,255,0.7); --t-sidebar-active-bg: rgba(139,92,246,0.25);
    --t-sidebar-active-border: #fbbf24; --t-sidebar-glow: none;
    /* Header */
    --t-header-bg: #ffffff; --t-header-border: #000000;
    --t-header-blur: none;
    /* Body */
    --t-body-bg: #f5f0ff;
    /* Cards — flat with hard shadow */
    --t-card-bg: #ffffff; --t-card-border: #000000;
    --t-card-shadow: 4px 4px 0 #000000;
    --t-card-top: linear-gradient(90deg, #8b5cf6, #fbbf24); --t-card-top-h: 4px;
    --t-card-hover: translate(-2px,-2px);
    /* Buttons — flat + hard shadow */
    --t-btn-bg: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    --t-btn-shadow: 3px 3px 0 #000000; --t-btn-hover-shadow: 5px 5px 0 #000000;
    /* Inputs */
    --t-input-bg: #fff; --t-input-border: #000000;
    --t-input-focus: #8b5cf6; --t-focus-ring: rgba(139,92,246,0.15);
    /* Table */
    --t-table-header-bg: #120a2e; --t-table-row-hover: rgba(139,92,246,0.05);
    --t-table-border: #000000;
    /* Spacing — Compact */
    --t-density: 1rem; --t-section-radius: 4px;
    /* Animations — Fast & snappy */
    --t-anim-speed: 0.15s; --t-anim-curve: steps(3, end);
    /* Font */
    --t-font: 'Tajawal', 'Inter', system-ui;
    --t-font-heading-weight: 900; --t-font-body-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────
   3. EMERALD — Neumorphism (Forest Green + Soft Shadows)
   Style: Soft inset shadows, ultra-rounded, no hard borders, airy
   ───────────────────────────────────────────────────────────────────── */
[data-theme="emerald"] {
    --t-primary: #10b981; --t-primary-dark: #059669; --t-primary-light: #34d399;
    --t-accent: #f59e0a; --t-accent-dark: #d97706;
    --t-login-bg: #052e16; --t-login-grid: rgba(16,185,129,0.05);
    --t-glow-1: rgba(16,185,129,0.15); --t-glow-2: rgba(245,158,10,0.08);
    --t-group-label: rgba(52,211,153,0.7); --t-sidebar-icon: #34d399;
    --t-scrollbar: rgba(16,185,129,0.4); --t-text-heading: #052e16;
    /* Shape — Ultra rounded */
    --t-radius-card: 28px; --t-radius-btn: 50px;
    --t-radius-input: 50px; --t-radius-badge: 50px;
    --t-border-width: 0px;
    /* Sidebar */
    --t-sidebar-bg: linear-gradient(180deg, #052e16 0%, #064e3b 100%);
    --t-sidebar-text: rgba(255,255,255,0.7); --t-sidebar-active-bg: rgba(16,185,129,0.25);
    --t-sidebar-active-border: #10b981; --t-sidebar-glow: 0 0 30px rgba(16,185,129,0.15);
    /* Header */
    --t-header-bg: #e8f7f0; --t-header-border: transparent;
    --t-header-blur: none;
    /* Body — Light green */
    --t-body-bg: #e8f7f0;
    /* Cards — Neumorphism */
    --t-card-bg: #e8f7f0; --t-card-border: transparent;
    --t-card-shadow: 8px 8px 20px rgba(5,46,22,0.12), -8px -8px 20px rgba(255,255,255,0.8);
    --t-card-top: none; --t-card-top-h: 0px;
    --t-card-hover: translateY(-2px);
    /* Buttons */
    --t-btn-bg: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --t-btn-shadow: 4px 4px 12px rgba(5,46,22,0.2), -2px -2px 8px rgba(255,255,255,0.5);
    --t-btn-hover-shadow: 6px 6px 18px rgba(5,46,22,0.25);
    /* Inputs */
    --t-input-bg: #e8f7f0; --t-input-border: transparent;
    --t-input-focus: #10b981; --t-focus-ring: rgba(16,185,129,0.15);
    /* Table */
    --t-table-header-bg: rgba(16,185,129,0.08); --t-table-row-hover: rgba(16,185,129,0.05);
    --t-table-border: rgba(16,185,129,0.1);
    /* Spacing — Spacious */
    --t-density: 2rem; --t-section-radius: 28px;
    --t-anim-speed: 0.4s; --t-anim-curve: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --t-font: 'Tajawal', system-ui; --t-font-heading-weight: 700; --t-font-body-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────
   4. ROSE GOLD — Luxury Magazine (Pink + Champagne Gold)
   Style: Elegant thin borders, spacious, editorial layout
   ───────────────────────────────────────────────────────────────────── */
[data-theme="rose-gold"] {
    --t-primary: #f43f5e; --t-primary-dark: #e11d48; --t-primary-light: #fb7185;
    --t-accent: #d4a853; --t-accent-dark: #b8891a;
    --t-login-bg: #1a0a10; --t-login-grid: rgba(244,63,94,0.05);
    --t-glow-1: rgba(244,63,94,0.12); --t-glow-2: rgba(212,168,83,0.1);
    --t-group-label: rgba(251,113,133,0.7); --t-sidebar-icon: #fb7185;
    --t-scrollbar: rgba(244,63,94,0.4); --t-text-heading: #1a0a10;
    /* Shape — Elegant thin */
    --t-radius-card: 12px; --t-radius-btn: 8px;
    --t-radius-input: 8px; --t-radius-badge: 4px;
    --t-border-width: 1px;
    /* Sidebar */
    --t-sidebar-bg: linear-gradient(180deg, #1a0a10 0%, #2d1525 100%);
    --t-sidebar-text: rgba(255,255,255,0.65); --t-sidebar-active-bg: rgba(244,63,94,0.15);
    --t-sidebar-active-border: #d4a853; --t-sidebar-glow: 0 0 25px rgba(244,63,94,0.1);
    /* Header */
    --t-header-bg: rgba(255,255,255,0.98); --t-header-border: rgba(212,168,83,0.2);
    --t-header-blur: blur(20px);
    /* Body */
    --t-body-bg: #fff0f3;
    /* Cards — Thin elegant border */
    --t-card-bg: #ffffff; --t-card-border: rgba(212,168,83,0.25);
    --t-card-shadow: 0 2px 20px rgba(26,10,16,0.06);
    --t-card-top: linear-gradient(90deg, #f43f5e, #d4a853, #f43f5e); --t-card-top-h: 2px;
    --t-card-hover: translateY(-3px);
    /* Buttons */
    --t-btn-bg: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    --t-btn-shadow: 0 4px 16px rgba(244,63,94,0.35); --t-btn-hover-shadow: 0 8px 24px rgba(244,63,94,0.45);
    --t-input-bg: #fff; --t-input-border: rgba(212,168,83,0.3);
    --t-input-focus: #f43f5e; --t-focus-ring: rgba(244,63,94,0.15);
    --t-table-header-bg: rgba(244,63,94,0.04); --t-table-row-hover: rgba(244,63,94,0.025);
    --t-table-border: rgba(212,168,83,0.15);
    /* Spacing — Very spacious */
    --t-density: 2.25rem; --t-section-radius: 12px;
    --t-anim-speed: 0.35s; --t-anim-curve: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --t-font: 'Tajawal', 'Georgia', system-ui; --t-font-heading-weight: 700; --t-font-body-weight: 300;
}

/* ─────────────────────────────────────────────────────────────────────
   5. OCEAN — Sharp Corporate (Deep Blue + Cyan)
   Style: Sharp corners, dense info, no decorations, pure professional
   ───────────────────────────────────────────────────────────────────── */
[data-theme="ocean"] {
    --t-primary: #0891b2; --t-primary-dark: #0e7490; --t-primary-light: #22d3ee;
    --t-accent: #06b6d4; --t-accent-dark: #0891b2;
    --t-login-bg: #042233; --t-login-grid: rgba(8,145,178,0.06);
    --t-glow-1: rgba(8,145,178,0.1); --t-glow-2: rgba(34,211,238,0.06);
    --t-group-label: rgba(34,211,238,0.6); --t-sidebar-icon: #22d3ee;
    --t-scrollbar: rgba(8,145,178,0.4); --t-text-heading: #042233;
    /* Shape — Sharp professional */
    --t-radius-card: 6px; --t-radius-btn: 6px;
    --t-radius-input: 6px; --t-radius-badge: 3px;
    --t-border-width: 1px;
    --t-sidebar-bg: linear-gradient(180deg, #042233 0%, #0a3a55 100%);
    --t-sidebar-text: rgba(255,255,255,0.7); --t-sidebar-active-bg: rgba(8,145,178,0.2);
    --t-sidebar-active-border: #22d3ee; --t-sidebar-glow: none;
    --t-header-bg: #ffffff; --t-header-border: rgba(8,145,178,0.12);
    --t-header-blur: none; --t-body-bg: #f0f9ff;
    --t-card-bg: #ffffff; --t-card-border: rgba(8,145,178,0.12);
    --t-card-shadow: 0 2px 8px rgba(4,34,51,0.08);
    --t-card-top: linear-gradient(90deg, #0891b2, #22d3ee); --t-card-top-h: 2px;
    --t-card-hover: translateY(-2px);
    --t-btn-bg: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    --t-btn-shadow: 0 3px 10px rgba(8,145,178,0.3); --t-btn-hover-shadow: 0 6px 16px rgba(8,145,178,0.4);
    --t-input-bg: #fff; --t-input-border: rgba(8,145,178,0.2);
    --t-input-focus: #0891b2; --t-focus-ring: rgba(8,145,178,0.15);
    --t-table-header-bg: rgba(4,34,51,0.04); --t-table-row-hover: rgba(8,145,178,0.03);
    --t-table-border: rgba(8,145,178,0.08);
    /* Dense spacing */
    --t-density: 1rem; --t-section-radius: 6px;
    --t-anim-speed: 0.15s; --t-anim-curve: ease-out;
    --t-font: 'Tajawal', 'Inter', system-ui; --t-font-heading-weight: 700; --t-font-body-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────
   6. OBSIDIAN — Ultra Minimal Dark (Black + Silver)
   Style: Zero borders, pure shadows, extreme whitespace, monochrome
   ───────────────────────────────────────────────────────────────────── */
[data-theme="obsidian"] {
    --t-primary: #e2e8f0; --t-primary-dark: #94a3b8; --t-primary-light: #f8fafc;
    --t-accent: #64748b; --t-accent-dark: #475569;
    --t-login-bg: #000000; --t-login-grid: rgba(255,255,255,0.02);
    --t-glow-1: rgba(255,255,255,0.06); --t-glow-2: rgba(255,255,255,0.03);
    --t-group-label: rgba(255,255,255,0.25); --t-sidebar-icon: rgba(255,255,255,0.5);
    --t-scrollbar: rgba(255,255,255,0.15); --t-text-heading: #0f172a;
    /* Shape — Minimal */
    --t-radius-card: 16px; --t-radius-btn: 8px;
    --t-radius-input: 8px; --t-radius-badge: 4px;
    --t-border-width: 0px;
    --t-sidebar-bg: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
    --t-sidebar-text: rgba(255,255,255,0.45); --t-sidebar-active-bg: rgba(255,255,255,0.06);
    --t-sidebar-active-border: rgba(255,255,255,0.3); --t-sidebar-glow: none;
    --t-header-bg: rgba(255,255,255,0.99); --t-header-border: rgba(0,0,0,0.04);
    --t-header-blur: none; --t-body-bg: #f8fafc;
    --t-card-bg: #ffffff; --t-card-border: transparent;
    --t-card-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 8px 32px rgba(0,0,0,0.06);
    --t-card-top: none; --t-card-top-h: 0px;
    --t-card-hover: translateY(-2px);
    --t-btn-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --t-btn-shadow: 0 2px 8px rgba(0,0,0,0.2); --t-btn-hover-shadow: 0 4px 16px rgba(0,0,0,0.3);
    --t-input-bg: #f8fafc; --t-input-border: transparent;
    --t-input-focus: #0f172a; --t-focus-ring: rgba(0,0,0,0.08);
    --t-table-header-bg: rgba(0,0,0,0.02); --t-table-row-hover: rgba(0,0,0,0.015);
    --t-table-border: rgba(0,0,0,0.04);
    /* Spacious */
    --t-density: 2rem; --t-section-radius: 16px;
    --t-anim-speed: 0.25s; --t-anim-curve: ease;
    --t-font: 'Tajawal', 'Inter', system-ui; --t-font-heading-weight: 600; --t-font-body-weight: 300;
}

/* ─────────────────────────────────────────────────────────────────────
   7. ROYAL — Imperial Luxury (Indigo + Gold)
   Style: Heavy presence, premium ornamental, editorial boldness
   ───────────────────────────────────────────────────────────────────── */
[data-theme="royal"] {
    --t-primary: #6366f1; --t-primary-dark: #4f46e5; --t-primary-light: #818cf8;
    --t-accent: #eab308; --t-accent-dark: #ca8a04;
    --t-login-bg: #0e0c3a; --t-login-grid: rgba(99,102,241,0.06);
    --t-glow-1: rgba(99,102,241,0.15); --t-glow-2: rgba(234,179,8,0.1);
    --t-group-label: rgba(234,179,8,0.7); --t-sidebar-icon: #818cf8;
    --t-scrollbar: rgba(99,102,241,0.4); --t-text-heading: #0e0c3a;
    /* Shape — Imperial */
    --t-radius-card: 8px; --t-radius-btn: 6px;
    --t-radius-input: 6px; --t-radius-badge: 4px;
    --t-border-width: 2px;
    --t-sidebar-bg: linear-gradient(180deg, #0e0c3a 0%, #1a1660 100%);
    --t-sidebar-text: rgba(255,255,255,0.65); --t-sidebar-active-bg: rgba(234,179,8,0.12);
    --t-sidebar-active-border: #eab308; --t-sidebar-glow: 0 0 30px rgba(99,102,241,0.2);
    --t-header-bg: #ffffff; --t-header-border: #eab308;
    --t-header-blur: none; --t-body-bg: #eef2ff;
    --t-card-bg: #ffffff; --t-card-border: rgba(234,179,8,0.3);
    --t-card-shadow: 0 4px 24px rgba(14,12,58,0.1);
    --t-card-top: linear-gradient(90deg, #6366f1, #eab308, #6366f1); --t-card-top-h: 4px;
    --t-card-hover: translateY(-3px);
    --t-btn-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --t-btn-shadow: 0 4px 14px rgba(99,102,241,0.4); --t-btn-hover-shadow: 0 8px 24px rgba(99,102,241,0.5);
    --t-input-bg: #fff; --t-input-border: rgba(234,179,8,0.25);
    --t-input-focus: #6366f1; --t-focus-ring: rgba(99,102,241,0.15);
    --t-table-header-bg: rgba(14,12,58,0.04); --t-table-row-hover: rgba(99,102,241,0.03);
    --t-table-border: rgba(234,179,8,0.15);
    --t-density: 1.5rem; --t-section-radius: 8px;
    --t-anim-speed: 0.3s; --t-anim-curve: ease-in-out;
    --t-font: 'Tajawal', system-ui; --t-font-heading-weight: 800; --t-font-body-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────
   8. CRIMSON — Neon Dark Gaming (Red + Orange Glow)
   Style: Neon glow effects, dark bg, angular, high energy
   ───────────────────────────────────────────────────────────────────── */
[data-theme="crimson"] {
    --t-primary: #dc2626; --t-primary-dark: #b91c1c; --t-primary-light: #ef4444;
    --t-accent: #f97316; --t-accent-dark: #ea580c;
    --t-login-bg: #0a0000; --t-login-grid: rgba(220,38,38,0.06);
    --t-glow-1: rgba(220,38,38,0.2); --t-glow-2: rgba(249,115,22,0.1);
    --t-group-label: rgba(239,68,68,0.7); --t-sidebar-icon: #ef4444;
    --t-scrollbar: rgba(220,38,38,0.5); --t-text-heading: #1a0000;
    /* Shape — Angular */
    --t-radius-card: 8px; --t-radius-btn: 6px;
    --t-radius-input: 6px; --t-radius-badge: 4px;
    --t-border-width: 1px;
    --t-sidebar-bg: linear-gradient(180deg, #0a0000 0%, #1a0505 100%);
    --t-sidebar-text: rgba(255,255,255,0.65); --t-sidebar-active-bg: rgba(220,38,38,0.2);
    --t-sidebar-active-border: #ef4444;
    --t-sidebar-glow: 0 0 30px rgba(220,38,38,0.15), inset -1px 0 0 rgba(220,38,38,0.3);
    --t-header-bg: rgba(255,255,255,0.97); --t-header-border: rgba(220,38,38,0.12);
    --t-header-blur: blur(20px); --t-body-bg: #fff5f5;
    --t-card-bg: #ffffff; --t-card-border: rgba(220,38,38,0.12);
    --t-card-shadow: 0 4px 20px rgba(26,0,0,0.08), 0 0 0 1px rgba(220,38,38,0.06);
    --t-card-top: linear-gradient(90deg, #dc2626, #f97316, #dc2626); --t-card-top-h: 3px;
    --t-card-hover: translateY(-3px);
    --t-btn-bg: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    --t-btn-shadow: 0 4px 16px rgba(220,38,38,0.4), 0 0 20px rgba(220,38,38,0.2);
    --t-btn-hover-shadow: 0 8px 28px rgba(220,38,38,0.5), 0 0 40px rgba(220,38,38,0.3);
    --t-input-bg: #fff; --t-input-border: rgba(220,38,38,0.15);
    --t-input-focus: #dc2626; --t-focus-ring: rgba(220,38,38,0.15);
    --t-table-header-bg: rgba(220,38,38,0.04); --t-table-row-hover: rgba(220,38,38,0.025);
    --t-table-border: rgba(220,38,38,0.08);
    --t-density: 1.25rem; --t-section-radius: 8px;
    --t-anim-speed: 0.2s; --t-anim-curve: cubic-bezier(0.68,-0.55,0.265,1.55);
    --t-font: 'Tajawal', system-ui; --t-font-heading-weight: 800; --t-font-body-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────
   9. SUNSET — Gradient Vibe (Orange + Purple)
   Style: Full gradients everywhere, flowing, vibrant, creative
   ───────────────────────────────────────────────────────────────────── */
[data-theme="sunset"] {
    --t-primary: #f97316; --t-primary-dark: #ea580c; --t-primary-light: #fb923c;
    --t-accent: #c026d3; --t-accent-dark: #a21caf;
    --t-login-bg: #0d0514; --t-login-grid: rgba(249,115,22,0.05);
    --t-glow-1: rgba(249,115,22,0.15); --t-glow-2: rgba(192,38,211,0.1);
    --t-group-label: rgba(251,146,60,0.7); --t-sidebar-icon: #fb923c;
    --t-scrollbar: rgba(249,115,22,0.4); --t-text-heading: #1a0a00;
    /* Shape — Rounded with gradient */
    --t-radius-card: 20px; --t-radius-btn: 50px;
    --t-radius-input: 14px; --t-radius-badge: 50px;
    --t-border-width: 0px;
    --t-sidebar-bg: linear-gradient(175deg, #0d0514 0%, #1a0a00 50%, #0d0514 100%);
    --t-sidebar-text: rgba(255,255,255,0.65); --t-sidebar-active-bg: rgba(249,115,22,0.2);
    --t-sidebar-active-border: #f97316;
    --t-sidebar-glow: 0 0 40px rgba(249,115,22,0.12);
    --t-header-bg: rgba(255,255,255,0.95); --t-header-border: transparent;
    --t-header-blur: blur(24px); --t-body-bg: #fff7ed;
    /* Cards — Gradient borders via box-shadow */
    --t-card-bg: #ffffff; --t-card-border: transparent;
    --t-card-shadow: 0 4px 24px rgba(26,10,0,0.1), 0 0 0 1px rgba(249,115,22,0.1);
    --t-card-top: linear-gradient(90deg, #f97316, #c026d3, #f97316); --t-card-top-h: 3px;
    --t-card-hover: translateY(-4px) scale(1.01);
    --t-btn-bg: linear-gradient(135deg, #f97316 0%, #c026d3 100%);
    --t-btn-shadow: 0 4px 20px rgba(249,115,22,0.4);
    --t-btn-hover-shadow: 0 8px 30px rgba(249,115,22,0.5), 0 0 30px rgba(192,38,211,0.3);
    --t-input-bg: #fff; --t-input-border: rgba(249,115,22,0.15);
    --t-input-focus: #f97316; --t-focus-ring: rgba(249,115,22,0.15);
    --t-table-header-bg: rgba(249,115,22,0.04); --t-table-row-hover: rgba(249,115,22,0.025);
    --t-table-border: rgba(249,115,22,0.08);
    --t-density: 1.5rem; --t-section-radius: 20px;
    --t-anim-speed: 0.4s; --t-anim-curve: cubic-bezier(0.34,1.56,0.64,1);
    --t-font: 'Tajawal', system-ui; --t-font-heading-weight: 800; --t-font-body-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────
   10. ARCTIC — Nordic Minimal (Ice Blue + Precision)
   Style: Ultra-clean, thin lines, generous whitespace, Nordic design
   ───────────────────────────────────────────────────────────────────── */
[data-theme="arctic"] {
    --t-primary: #0369a1; --t-primary-dark: #075985; --t-primary-light: #0ea5e9;
    --t-accent: #0891b2; --t-accent-dark: #0e7490;
    --t-login-bg: #0c2340; --t-login-grid: rgba(3,105,161,0.06);
    --t-glow-1: rgba(3,105,161,0.1); --t-glow-2: rgba(8,145,178,0.06);
    --t-group-label: rgba(125,211,252,0.6); --t-sidebar-icon: #7dd3fc;
    --t-scrollbar: rgba(3,105,161,0.3); --t-text-heading: #0c2340;
    /* Shape — Nordic thin precision */
    --t-radius-card: 12px; --t-radius-btn: 8px;
    --t-radius-input: 8px; --t-radius-badge: 6px;
    --t-border-width: 1px;
    --t-sidebar-bg: linear-gradient(180deg, #0c2340 0%, #0f3460 100%);
    --t-sidebar-text: rgba(255,255,255,0.7); --t-sidebar-active-bg: rgba(3,105,161,0.2);
    --t-sidebar-active-border: #7dd3fc; --t-sidebar-glow: none;
    --t-header-bg: rgba(255,255,255,1); --t-header-border: rgba(3,105,161,0.08);
    --t-header-blur: none; --t-body-bg: #f0f9ff;
    --t-card-bg: #ffffff; --t-card-border: rgba(3,105,161,0.1);
    --t-card-shadow: 0 1px 4px rgba(12,35,64,0.06), 0 4px 16px rgba(12,35,64,0.04);
    --t-card-top: linear-gradient(90deg, #0369a1, #0891b2); --t-card-top-h: 2px;
    --t-card-hover: translateY(-2px);
    --t-btn-bg: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    --t-btn-shadow: 0 2px 10px rgba(3,105,161,0.25); --t-btn-hover-shadow: 0 6px 18px rgba(3,105,161,0.35);
    --t-input-bg: #fff; --t-input-border: rgba(3,105,161,0.15);
    --t-input-focus: #0369a1; --t-focus-ring: rgba(3,105,161,0.12);
    --t-table-header-bg: rgba(12,35,64,0.03); --t-table-row-hover: rgba(3,105,161,0.025);
    --t-table-border: rgba(3,105,161,0.07);
    /* Very spacious & precise */
    --t-density: 1.75rem; --t-section-radius: 12px;
    --t-anim-speed: 0.2s; --t-anim-curve: ease;
    --t-font: 'Tajawal', 'Inter', system-ui; --t-font-heading-weight: 600; --t-font-body-weight: 300;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE OVERRIDES — Applied over any theme
   ══════════════════════════════════════════════════════════ */
.dark [data-theme] {
    --t-header-bg:   rgba(8, 12, 28, 0.95);
    --t-header-blur: blur(20px);
    --t-body-bg:     #07091a;
    --t-card-bg:     rgba(255,255,255,0.035);
    --t-card-border: rgba(255,255,255,0.06);
    --t-card-shadow: 0 4px 24px rgba(0,0,0,0.3);
    --t-input-bg:    rgba(255,255,255,0.05);
    --t-input-border: rgba(255,255,255,0.1);
    --t-table-header-bg: rgba(255,255,255,0.03);
    --t-table-row-hover: rgba(255,255,255,0.02);
    --t-table-border: rgba(255,255,255,0.05);
    --t-text-heading: rgba(255,255,255,0.92);
}

/* ═══ Special dark: Midnight Neo-Brutalism ═══ */
.dark [data-theme="midnight"] {
    --t-body-bg:     #080418;
    --t-card-bg:     #110c30;
    --t-card-border: #fbbf24;
    --t-card-shadow: 3px 3px 0 #fbbf24;
    --t-header-bg:   #110c30;
    --t-header-border: #fbbf24;
}

/* ═══ Special dark: Obsidian ═══ */
.dark [data-theme="obsidian"] {
    --t-body-bg:     #000000;
    --t-card-bg:     #0a0a0a;
    --t-card-border: transparent;
    --t-card-shadow: 0 2px 8px rgba(255,255,255,0.04);
    --t-header-bg:   #000000;
    --t-header-border: rgba(255,255,255,0.05);
}

/* ═══ Special dark: Crimson neon ═══ */
.dark [data-theme="crimson"] {
    --t-body-bg:   #0a0000;
    --t-card-bg:   rgba(220,38,38,0.05);
    --t-card-border: rgba(220,38,38,0.15);
    --t-card-shadow: 0 0 20px rgba(220,38,38,0.1), 0 4px 20px rgba(0,0,0,0.4);
}

/* ══════════════════════════════════════════════════════════════════════
   ADMIN DARK MODE — Per-theme precision overrides
   Fixes visual conflicts when .dark is combined with colored themes
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Shubbak (default) — sky blue accents preserved ───────────────── */
.dark [data-theme="shubbak"] {
    --t-body-bg:     #060c1a;
    --t-card-bg:     rgba(14,164,233,0.04);
    --t-card-border: rgba(14,164,233,0.12);
    --t-header-bg:   rgba(6,12,26,0.96);
    --t-header-border: rgba(14,164,233,0.1);
}

/* ─── Ocean — corporate deep blue ──────────────────────────────────── */
.dark [data-theme="ocean"] {
    --t-body-bg:     #020a14;
    --t-card-bg:     rgba(8,145,178,0.04);
    --t-card-border: rgba(8,145,178,0.12);
    --t-card-shadow: 0 2px 12px rgba(0,0,0,0.4);
    --t-header-bg:   rgba(2,10,20,0.97);
    --t-header-border: rgba(8,145,178,0.1);
    --t-table-header-bg: rgba(8,145,178,0.06);
    --t-table-border: rgba(8,145,178,0.08);
}

/* ─── Arctic — nordic ice precision ────────────────────────────────── */
.dark [data-theme="arctic"] {
    --t-body-bg:     #030c18;
    --t-card-bg:     rgba(3,105,161,0.05);
    --t-card-border: rgba(125,211,252,0.1);
    --t-card-shadow: 0 2px 12px rgba(0,0,0,0.35);
    --t-header-bg:   rgba(3,12,24,0.97);
    --t-header-border: rgba(3,105,161,0.12);
    --t-table-border: rgba(3,105,161,0.08);
    --t-input-border: rgba(125,211,252,0.12);
}

/* ─── Royal — imperial indigo + gold ───────────────────────────────── */
.dark [data-theme="royal"] {
    --t-body-bg:     #07061e;
    --t-card-bg:     rgba(99,102,241,0.05);
    --t-card-border: rgba(234,179,8,0.15);
    --t-card-shadow: 0 4px 20px rgba(0,0,0,0.4);
    --t-header-bg:   rgba(7,6,30,0.97);
    --t-header-border: rgba(234,179,8,0.2);
    --t-table-header-bg: rgba(99,102,241,0.06);
    --t-table-border: rgba(234,179,8,0.1);
}

/* ─── Emerald — neumorphism on dark ────────────────────────────────── */
.dark [data-theme="emerald"] {
    --t-body-bg:     #020e07;
    --t-card-bg:     rgba(16,185,129,0.05);
    --t-card-border: rgba(16,185,129,0.1);
    --t-card-shadow: 0 4px 20px rgba(0,0,0,0.5);
    --t-header-bg:   rgba(2,14,7,0.97);
    --t-header-border: rgba(16,185,129,0.1);
    --t-input-border: rgba(16,185,129,0.12);
}

/* ─── Rose Gold — luxury on dark ───────────────────────────────────── */
.dark [data-theme="rose-gold"] {
    --t-body-bg:     #0f0008;
    --t-card-bg:     rgba(244,63,94,0.04);
    --t-card-border: rgba(212,168,83,0.15);
    --t-card-shadow: 0 4px 20px rgba(0,0,0,0.5);
    --t-header-bg:   rgba(15,0,8,0.97);
    --t-header-border: rgba(212,168,83,0.15);
    --t-table-border: rgba(212,168,83,0.1);
}

/* ─── Sunset — vibrant gradients on dark ───────────────────────────── */
.dark [data-theme="sunset"] {
    --t-body-bg:     #0a0408;
    --t-card-bg:     rgba(249,115,22,0.04);
    --t-card-border: rgba(249,115,22,0.12);
    --t-card-shadow: 0 4px 20px rgba(0,0,0,0.5);
    --t-header-bg:   rgba(10,4,8,0.97);
    --t-header-border: rgba(249,115,22,0.1);
}

/* ══ Universal dark: table text contrast fix ════════════════════════ */
.dark [data-theme] .fi-ta-text,
.dark [data-theme] .fi-ta-cell,
.dark [data-theme] [class*="fi-ta"] {
    color: rgba(220,230,255,0.85) !important;
}

/* ══ Universal dark: badge contrast ════════════════════════════════ */
.dark [data-theme] .fi-badge {
    opacity: 0.9;
}

/* ══ Universal dark: stat widget text ══════════════════════════════ */
.dark [data-theme] .fi-wi-stats-overview-stat-description,
.dark [data-theme] .fi-wi-stats-overview-stat-label {
    color: rgba(180,195,220,0.7) !important;
}

/* ══ Universal dark: form labels ════════════════════════════════════ */
.dark [data-theme] .fi-fo-field-wrp-label {
    color: rgba(210,225,245,0.85) !important;
}

/* ══ Universal dark: page headings ══════════════════════════════════ */
.dark [data-theme] .fi-header-heading {
    color: rgba(235,245,255,0.95) !important;
}

/* ══ Universal dark: nav links text ═════════════════════════════════ */
.dark [data-theme] .fi-sidebar-item-button {
    color: rgba(180,195,220,0.6) !important;
}
.dark [data-theme] .fi-active > .fi-sidebar-item-button,
.dark [data-theme] .fi-sidebar-item-button[aria-current="page"] {
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════
   WCAG AA CONTRAST FIXES
   Minimum 4.5:1 for normal text, 3:1 for large/bold text
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Obsidian: sidebar text too dim (rgba(255,255,255,0.45) = ~3:1 on black) ─ */
[data-theme="obsidian"] .fi-sidebar-item-button {
    color: rgba(255,255,255,0.65) !important;   /* → 5.8:1 on #000 */
}
[data-theme="obsidian"] .fi-sidebar-group-label {
    color: rgba(255,255,255,0.55) !important;   /* → 4.6:1 on #000 */
}
[data-theme="obsidian"] .fi-sidebar-item-icon {
    color: rgba(255,255,255,0.60) !important;
}

/* ─── Emerald: group labels too dim on dark sidebar ────────────────── */
[data-theme="emerald"] .fi-sidebar-group-label {
    color: rgba(52,211,153,0.85) !important;    /* → 4.8:1 on #052e16 */
}
[data-theme="emerald"] .fi-sidebar-item-button {
    color: rgba(255,255,255,0.80) !important;   /* → 7:1 on dark green */
}

/* ─── Rose Gold: sidebar text on dark burgundy ──────────────────────── */
[data-theme="rose-gold"] .fi-sidebar-item-button {
    color: rgba(255,255,255,0.78) !important;   /* → 6.5:1 on #1a0a10 */
}
[data-theme="rose-gold"] .fi-sidebar-group-label {
    color: rgba(251,113,133,0.90) !important;   /* → 4.7:1 on #1a0a10 */
}

/* ─── Sunset: sidebar text on very dark bg ──────────────────────────── */
[data-theme="sunset"] .fi-sidebar-item-button {
    color: rgba(255,255,255,0.78) !important;
}
[data-theme="sunset"] .fi-sidebar-group-label {
    color: rgba(251,146,60,0.88) !important;    /* → 4.8:1 on #0d0514 */
}

/* ─── Crimson: sidebar text on near-black ───────────────────────────── */
[data-theme="crimson"] .fi-sidebar-item-button {
    color: rgba(255,255,255,0.75) !important;   /* → 6.3:1 on #0a0000 */
}
[data-theme="crimson"] .fi-sidebar-group-label {
    color: rgba(239,68,68,0.88) !important;     /* → 5:1 on #0a0000 */
}

/* ─── Global: muted text in stats widget ────────────────────────────── */
[data-theme] .fi-wi-stats-overview-stat-description {
    color: rgba(100,116,139,1) !important;      /* slate-500 = 4.6:1 on white */
}

/* ─── Global: table cell muted text ─────────────────────────────────── */
[data-theme] .fi-ta-text.text-gray-400,
[data-theme] .fi-ta-text.text-gray-500 {
    color: #64748b !important;                  /* slate-500 = 4.6:1 on white */
}

/* ─── Dark mode text contrast boost ─────────────────────────────────── */
.dark [data-theme] .fi-wi-stats-overview-stat-description,
.dark [data-theme] .fi-wi-stats-overview-stat-label {
    color: rgba(203,213,225,1) !important;      /* slate-300 = 9:1 on dark bg */
}
.dark [data-theme] .fi-ta-text {
    color: rgba(226,232,240,0.9) !important;    /* slate-200 = 10:1 on dark bg */
}