/* Global Reset & Base Styles */
:root {
    /* DEFAULT THEME - Sovereign Light (Enterprise Professional) */
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;

    --accent-primary: #2563eb;
    --accent-cyan: #0284c7;
    --accent-green: #059669;
    --accent-red: #dc2626;
    --accent-purple: #7c3aed;
    --accent-yellow: #d97706;

    --border-subtle: #f1f5f9;
    --border-accent: #e2e8f0;
    --glass-border: rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(255, 255, 255, 0.9);

    --nav-font: 'Inter', sans-serif;
    --heading-font: 'Poppins', sans-serif;
    --nav-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

    /* --- Bureau Sovereign Light Tokens --- */
    --bureau-navy: #0f172a;
    --bureau-cyan: #06b6d4;
    --bureau-slate: #334155;
    --bureau-bg-subtle: #f8fafc;
    --bureau-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

    /* Surface Variants for Bureau */
    --bureau-surface-low: #ffffff;
    --bureau-surface-med: #f1f5f9;
    --bureau-surface-border: rgba(15, 23, 42, 0.06);
}

main.container {
    padding-top: 120px !important;
    padding-bottom: 60px !important;
}

body {
    background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
                      radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
                      radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
    background-image: none !important; /* Force clean light background */
    background-color: var(--bg-primary) !important;
}

/* 2. SOC OPERATOR (Industrial Command) */
[data-theme="soco"] {
    --bg-primary: #000000;
    --bg-secondary: #0d0d0d;
    --bg-tertiary: #1a1a1a;
    --bg-card: #111111;
    --bg-card-hover: #1a1a1a;

    --text-primary: #ffffff;
    --text-secondary: #eab308;
    --text-muted: #71717a;

    --accent-primary: #eab308;
    --accent-cyan: #eab308;
    --accent-green: #22c55e;
    --accent-red: #ef4444;

    --border-subtle: #27272a;
    --border-accent: #eab308;
    --glass-border: rgba(234, 179, 8, 0.2);
    --glass-bg: rgba(0, 0, 0, 0.8);

    --nav-font: 'Chakra Petch', sans-serif;
    --heading-font: 'Orbitron', sans-serif;
    --nav-shadow: 0 4px 0 #eab308;
}

/* 3. CYBER OPS (Offensive Purple) */
[data-theme="cyber"] {
    /* Identity: Synth, Neon, Offensive Security */
    --bg-primary: #090014;
    --bg-secondary: #120024;
    --bg-tertiary: #240046;
    --bg-card: rgba(36, 0, 70, 0.6);
    --bg-card-hover: rgba(36, 0, 70, 0.8);

    --text-primary: #faf5ff;
    --text-secondary: #e0aaff;
    --text-muted: #9d4edd;

    --accent-primary: #d946ef;
    --accent-cyan: #d946ef;
    --accent-green: #38ef7d;
    --accent-red: #f45c43;

    --border-subtle: #5a189a;
    --border-accent: #d946ef;
    --glass-border: rgba(217, 70, 239, 0.3);
    --glass-bg: rgba(18, 0, 36, 0.8);

    --nav-font: 'Rajdhani', sans-serif;
    --heading-font: 'Orbitron', sans-serif;
    --nav-shadow: 0 0 15px rgba(217, 70, 239, 0.3);
}

/* 4. ZEN FOCUS (Minimalist Leaf) */
[data-theme="zen"] {
    --bg-primary: #f0f4f0;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e6ebe6;
    --bg-card: #ffffff;
    --bg-card-hover: #fcfdfc;

    --text-primary: #2c3e50;
    --text-secondary: #5d6d7e;
    --text-muted: #95a5a6;

    --accent-primary: #88b04b;
    --accent-cyan: #88b04b;
    --accent-green: #88b04b;

    --border-subtle: #dce3dc;
    --border-accent: #88b04b;
    --glass-border: rgba(136, 176, 75, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.9);

    --nav-font: 'Outfit', sans-serif;
    --heading-font: 'Outfit', sans-serif;
    --nav-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 7. EXECUTIVE (Premium Ivory) */
[data-theme="executive"] {
    --bg-primary: #f9f9f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f0f0;
    --bg-card: #ffffff;
    --bg-card-hover: #fcfcfb;

    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #999999;

    --accent-primary: #000000;
    --accent-cyan: #334155;

    --border-subtle: #e2e2e0;
    --border-accent: #1a1a1a;
    --glass-border: rgba(0, 0, 0, 0.05);
    --glass-bg: rgba(255, 255, 255, 0.9);

    --nav-font: 'Playfair Display', serif;
    --heading-font: 'Playfair Display', serif;
    --nav-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* 8. PAPER (Forensic Typewriter) */
[data-theme="paper"] {
    --bg-primary: #f5f1e6;
    --bg-secondary: #e8e2d2;
    --bg-tertiary: #d4cfc1;
    --bg-card: #faf8f2;
    --bg-card-hover: #ffffff;

    --text-primary: #2b2b2b;
    --text-secondary: #5c5c5c;
    --text-muted: #8c8c8c;

    --accent-primary: #8a3033;
    --accent-cyan: #8a3033;

    --border-subtle: #b0a996;
    --border-accent: #2b2b2b;
    --glass-border: rgba(43, 43, 43, 0.1);
    --glass-bg: #f5f1e6;

    --nav-font: 'Courier Prime', monospace;
    --heading-font: 'Courier Prime', monospace;
    --nav-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

/* 9. DIAMOND (Grand Gallery) */
[data-theme="diamond"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.8);
    --bg-card-hover: rgba(255, 255, 255, 0.9);

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;

    --accent-primary: #0ea5e9;
    --border-subtle: rgba(200, 210, 230, 0.3);
    --border-accent: #0ea5e9;

    --nav-font: 'Inter', sans-serif;
    --heading-font: 'Playfair Display', serif;
    --nav-shadow: 0 4px 20px rgba(148, 163, 184, 0.1);
}

/* 10. AURORA (Ethereal Flow) */
[data-theme="aurora"] {
    --bg-primary: #0f172a;
    --bg-secondary: rgba(255, 255, 255, 0.05);
    --bg-tertiary: rgba(0, 0, 0, 0.2);
    --bg-card: rgba(20, 20, 40, 0.5);
    --bg-card-hover: rgba(20, 20, 40, 0.7);

    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --accent-primary: #22d3ee;
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-accent: #c084fc;

    --nav-font: 'Outfit', sans-serif;
    --heading-font: 'Outfit', sans-serif;
    --nav-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* 11. STEALTH (Night Ops) */
[data-theme="stealth"] {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #111111;
    --bg-card: #050505;
    --bg-card-hover: #0a0a0a;

    --text-primary: #cc0000;
    --text-secondary: #880000;
    --text-muted: #440000;

    --accent-primary: #ff0000;
    --border-subtle: #1a0000;
    --border-accent: #330000;

    --nav-font: 'JetBrains Mono', monospace;
    --heading-font: 'JetBrains Mono', monospace;
    --nav-shadow: none;
}

/* 12. MAINFRAME (Retro OS) */
[data-theme="mainframe"] {
    --bg-primary: #c0c0c0;
    --bg-secondary: #d4d4d4;
    --bg-tertiary: #e0e0e0;
    --bg-card: #c0c0c0;
    --bg-card-hover: #d4d4d4;

    --text-primary: #000000;
    --text-secondary: #000080;
    --text-muted: #555555;

    --accent-primary: #000080;
    --border-subtle: #808080;
    --border-accent: #000000;

    --nav-font: 'Courier New', monospace;
    --heading-font: 'Courier New', monospace;
    --nav-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080;
}


/* =========================================
   RADICAL DASHBOARD LAYOUT OVERHAULS
   ========================================= */

/* HUMANE THEME: Soft, Clean, Standard SaaS */
[data-theme="default"] .bento-grid,
[data-theme="humane"] .bento-grid {
    gap: 1.75rem !important;
}

[data-theme="default"] .card,
[data-theme="humane"] .card {
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

[data-theme="default"] .card:hover,
[data-theme="humane"] .card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
        0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
    transform: translateY(-2px) !important;
}

/* SOC OPERATOR THEME: Industrial Command Center */
[data-theme="soco"] .dashboard-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
}

[data-theme="soco"] .bento-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 2px !important;
    margin-top: 0 !important;
}

[data-theme="soco"] .card {
    border-radius: 0 !important;
    border: 3px solid #333333 !important;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%) !important;
    box-shadow: inset 0 0 20px rgba(234, 179, 8, 0.05) !important;
    font-family: 'Chakra Petch', sans-serif !important;
}

[data-theme="soco"] .card:hover {
    transform: none !important;
    border-color: #eab308 !important;
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.3) !important;
}

[data-theme="soco"] .metric-card {
    background: repeating-linear-gradient(45deg,
            #0d0d0d,
            #0d0d0d 10px,
            #0a0a0a 10px,
            #0a0a0a 20px) !important;
    border-top: 4px solid #eab308 !important;
}

[data-theme="soco"] .metric-title {
    color: #eab308 !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

[data-theme="soco"] .metric-value {
    font-family: 'Orbitron', sans-serif !important;
    color: #fff !important;
    text-shadow: 0 0 10px #eab308 !important;
}

[data-theme="soco"] .action-row {
    position: fixed;
    left: 0;
    top: 100px;
    width: 280px;
    height: calc(100vh - 100px);
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10;
    overflow-y: auto;
}

[data-theme="soco"] .bento-grid {
    margin-left: 280px !important;
}

[data-theme="soco"] .action-card {
    border-radius: 0 !important;
    background: #000 !important;
    border: 2px solid #333 !important;
    border-left-width: 5px !important;
    padding: 1.5rem !important;
}

[data-theme="soco"] .action-card:hover {
    border-left-color: #eab308 !important;
    background: linear-gradient(90deg, #1a1a1a 0%, #000 100%) !important;
}

/* CYBER OPS THEME: Neon Terminal Glitch */
[data-theme="cyber"] body {
    background: radial-gradient(ellipse at bottom, #1b0033 0%, #090014 100%) !important;
    background-attachment: fixed !important;
}

[data-theme="cyber"] .dashboard-wrapper::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(217, 70, 239, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217, 70, 239, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

[data-theme="cyber"] .bento-grid {
    gap: 2rem !important;
    position: relative;
    z-index: 1;
}

[data-theme="cyber"] .card {
    background: rgba(36, 0, 70, 0.4) !important;
    border: 1px solid rgba(217, 70, 239, 0.3) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 30px rgba(217, 70, 239, 0.1),
        inset 0 0 20px rgba(96, 0, 160, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    font-family: 'Rajdhani', sans-serif !important;
}

[data-theme="cyber"] .card:hover {
    border-color: rgba(217, 70, 239, 0.6) !important;
    box-shadow: 0 0 40px rgba(217, 70, 239, 0.3),
        inset 0 0 30px rgba(96, 0, 160, 0.2) !important;
    transform: translateY(-4px) !important;
}

[data-theme="cyber"] .metric-value {
    color: #e0aaff !important;
    text-shadow: 0 0 20px #d946ef, 0 0 40px #d946ef !important;
    font-family: 'Orbitron', sans-serif !important;
}

[data-theme="cyber"] .metric-title {
    color: #d946ef !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
}

/* Asymmetric Grid for Cyber */
[data-theme="cyber"] .bento-grid .metric-card:nth-child(1) {
    transform: translateY(20px);
}

[data-theme="cyber"] .bento-grid .metric-card:nth-child(2) {
    transform: translateY(-10px);
}

[data-theme="cyber"] .bento-grid .metric-card:nth-child(3) {
    transform: translateY(15px);
}

[data-theme="cyber"] .bento-grid .metric-card:nth-child(4) {
    transform: translateY(-5px);
}

/* AURORA THEME: Fluid Glassmorphic Layers */
[data-theme="aurora"] .bento-grid {
    gap: 2rem !important;
}

[data-theme="aurora"] .card {
    background: rgba(20, 20, 40, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
}

[data-theme="aurora"] .card:hover {
    background: rgba(20, 20, 40, 0.6) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    transform: scale(1.02) !important;
}

[data-theme="aurora"] .metric-card:nth-child(odd) {
    transform: translateX(10px);
}

[data-theme="aurora"] .metric-card:nth-child(even) {
    transform: translateX(-10px);
}

/* DIAMOND THEME: Grand Focus Gallery */
[data-theme="diamond"] .dashboard-wrapper {
    max-width: 1800px !important;
    padding: 3rem 4rem !important;
}

/* =========================================
   THEME-SPECIFIC RADICAL LAYOUTS (Extra Rules)
   ========================================= */

/* SOC OPERATOR (Side-Nav Command) */
[data-theme="soco"] .dashboard-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
}

[data-theme="soco"] .bento-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    margin-left: 280px !important;
}

[data-theme="soco"] .action-row {
    position: fixed;
    left: 0;
    top: 80px;
    width: 280px;
    height: calc(100vh - 80px);
    grid-template-columns: 1fr !important;
    background: #000;
    border-right: 2px solid var(--border-accent);
    padding: 10px !important;
    z-index: 100;
}

[data-theme="soco"] .card {
    border-radius: 0 !important;
    border-width: 2px !important;
}

/* CYBER OPS (Neon Floating) */
[data-theme="cyber"] .bento-grid {
    gap: 2.5rem !important;
}

[data-theme="cyber"] .card {
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 0 20px rgba(217, 70, 239, 0.1), inset 0 0 15px rgba(217, 70, 239, 0.05) !important;
}

/* ZEN FOCUS (Minimalist Spacing) */
[data-theme="zen"] .dashboard-wrapper {
    max-width: 1200px !important;
}

[data-theme="zen"] .card {
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

/* DIAMOND (Grand Gallery) */
[data-theme="diamond"] .dashboard-wrapper {
    max-width: 1800px !important;
    padding: 4rem !important;
}

[data-theme="diamond"] .card {
    border-radius: 30px !important;
}

/* MATRIX (Terminal Stream) */
[data-theme="matrix"] .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

[data-theme="matrix"] .card {
    border-radius: 0 !important;
    border-bottom: none !important;
    background: #000 !important;
}

[data-theme="matrix"] .card:last-child {
    border-bottom: 1px solid var(--border-subtle) !important;
}

[data-theme="matrix"] body::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 9999;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

[data-theme="matrix"] .metric-card {
    grid-column: span 1 !important;
    padding: 2rem !important;
}

[data-theme="matrix"] .chart-section,
[data-theme="matrix"] .feed-section {
    grid-column: span 1 !important;
}

/* MAINFRAME THEME: Cascading Windows */
[data-theme="mainframe"] .dashboard-wrapper {
    background: #008080 !important;
    padding: 0.5rem !important;
}

[data-theme="mainframe"] .bento-grid {
    gap: 1.5rem !important;
}

[data-theme="mainframe"] .card {
    background: #c0c0c0 !important;
    border: 2px outset #ffffff !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 #000000 !important;
    color: #000000 !important;
    font-family: 'Courier New', monospace !important;
    position: relative !important;
    padding-top: 3rem !important;
}

[data-theme="mainframe"] .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(180deg, #000080 0%, #0000aa 100%);
    border-bottom: 2px solid #ffffff;
}

[data-theme="mainframe"] .card::after {
    content: "■";
    position: absolute;
    top: 2px;
    right: 6px;
    color: #ffffff;
    font-size: 14px;
    z-index: 10;
}

[data-theme="mainframe"] .metric-title,
[data-theme="mainframe"] .feed-header {
    color: #000080 !important;
    font-weight: bold !important;
}

[data-theme="mainframe"] .metric-value {
    color: #000000 !important;
    text-shadow: 1px 1px #ffffff !important;
}

/* Cascade effect for mainframe */
[data-theme="mainframe"] .metric-card:nth-child(1) {
    transform: translate(0, 0);
}

[data-theme="mainframe"] .metric-card:nth-child(2) {
    transform: translate(10px, 10px);
}

[data-theme="mainframe"] .metric-card:nth-child(3) {
    transform: translate(20px, 20px);
}

[data-theme="mainframe"] .metric-card:nth-child(4) {
    transform: translate(30px, 30px);
}