/* Theme: Nexus — futuristic agency command center. Dark by default. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

[data-theme-skin="nexus"] {
    --font-sans: "IBM Plex Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Space Grotesk", "IBM Plex Sans", sans-serif;
    --radius: 0.75rem;
    --glow: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Dark (default) */
[data-theme-skin="nexus"][data-theme="dark"],
[data-theme-skin="nexus"]:not([data-theme]) {
    --bg-primary: #070b14;
    --bg-secondary: #0e1524;
    --bg-sidebar: #05080f;
    --text-primary: #eef2ff;
    --text-secondary: #8b9bb8;
    --text-sidebar: #c7d2fe;
    --border-color: #1c2740;
    --accent: #22d3ee;
    --accent-hover: #67e8f9;
    --accent-soft: rgba(34, 211, 238, 0.12);
    --input-bg: #0b1220;
    --nav-bg: #0e1524;
    --nav-border: #1c2740;
    --chart-grid: rgba(148, 163, 184, 0.12);
    --widget-shine: linear-gradient(135deg, rgba(34,211,238,0.08), transparent 50%);
}

/* Mid / dusk */
[data-theme-skin="nexus"][data-theme="mid"] {
    --bg-primary: #121826;
    --bg-secondary: #1a2234;
    --bg-sidebar: #0f1522;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-sidebar: #e2e8f0;
    --border-color: #2a3548;
    --accent: #38bdf8;
    --accent-hover: #7dd3fc;
    --accent-soft: rgba(56, 189, 248, 0.14);
    --input-bg: #151d2e;
    --nav-bg: #1a2234;
    --nav-border: #2a3548;
    --chart-grid: rgba(148, 163, 184, 0.15);
    --widget-shine: linear-gradient(135deg, rgba(56,189,248,0.1), transparent 55%);
}

/* Light */
[data-theme-skin="nexus"][data-theme="light"] {
    --bg-primary: #eef2f7;
    --bg-secondary: #ffffff;
    --bg-sidebar: #0b1220;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-sidebar: #e2e8f0;
    --border-color: #dbe3ef;
    --accent: #0891b2;
    --accent-hover: #0e7490;
    --accent-soft: rgba(8, 145, 178, 0.1);
    --input-bg: #ffffff;
    --nav-bg: #ffffff;
    --nav-border: #dbe3ef;
    --chart-grid: rgba(100, 116, 139, 0.15);
    --widget-shine: linear-gradient(135deg, rgba(8,145,178,0.06), transparent 50%);
}

[data-theme-skin="nexus"] body {
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
    background-image:
        radial-gradient(ellipse 80% 50% at 10% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(99, 102, 241, 0.08), transparent);
    background-attachment: fixed;
}

[data-theme-skin="nexus"] h1,
[data-theme-skin="nexus"] h2,
[data-theme-skin="nexus"] .nexus-display {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

[data-theme-skin="nexus"] .sidebar-bg {
    border-right: 1px solid var(--border-color);
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--accent) 8%, transparent);
}

[data-theme-skin="nexus"] .nav-link.active {
    background: var(--accent-soft) !important;
    border-right: 2px solid var(--accent);
    color: var(--accent) !important;
}

[data-theme-skin="nexus"] .dash-widget {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background-image: var(--widget-shine);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

[data-theme-skin="nexus"] .dash-widget:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color));
}

/* Editor mode teach animations */
[data-theme-skin="nexus"] .dash-edit-mode .dash-widget {
    cursor: grab;
    animation: nexus-orbit 2.4s ease-in-out infinite, nexus-glow 1.6s ease-in-out infinite;
}

[data-theme-skin="nexus"] .dash-edit-mode .dash-widget:nth-child(2n) {
    animation-delay: 0.2s, 0.1s;
}
[data-theme-skin="nexus"] .dash-edit-mode .dash-widget:nth-child(3n) {
    animation-delay: 0.4s, 0.2s;
}

[data-theme-skin="nexus"] .dash-edit-mode .dash-widget:active {
    cursor: grabbing;
    animation: none;
    box-shadow: var(--glow);
    transform: scale(1.02);
}

@keyframes nexus-glow {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent); }
    50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 45%, transparent); }
}

@keyframes nexus-orbit {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(3px, -2px) rotate(0.3deg); }
    50% { transform: translate(0, -4px) rotate(0deg); }
    75% { transform: translate(-3px, -2px) rotate(-0.3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

[data-theme-skin="nexus"] .tone-chip {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: transparent;
}
[data-theme-skin="nexus"] .tone-chip.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Status badges: readable on dark + mid (Active / Pending / Rejected, etc.) */
[data-theme-skin="nexus"][data-theme="dark"] .bg-green-50,
[data-theme-skin="nexus"][data-theme="mid"] .bg-green-50,
[data-theme-skin="nexus"][data-theme="dark"] .bg-green-100,
[data-theme-skin="nexus"][data-theme="mid"] .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.18) !important;
}
[data-theme-skin="nexus"][data-theme="dark"] .text-green-600,
[data-theme-skin="nexus"][data-theme="mid"] .text-green-600,
[data-theme-skin="nexus"][data-theme="dark"] .text-green-700,
[data-theme-skin="nexus"][data-theme="mid"] .text-green-700,
[data-theme-skin="nexus"][data-theme="dark"] .text-green-800,
[data-theme-skin="nexus"][data-theme="mid"] .text-green-800 {
    color: #86efac !important;
}

[data-theme-skin="nexus"][data-theme="dark"] .bg-yellow-50,
[data-theme-skin="nexus"][data-theme="mid"] .bg-yellow-50,
[data-theme-skin="nexus"][data-theme="dark"] .bg-yellow-100,
[data-theme-skin="nexus"][data-theme="mid"] .bg-yellow-100 {
    background-color: rgba(234, 179, 8, 0.18) !important;
}
[data-theme-skin="nexus"][data-theme="dark"] .text-yellow-600,
[data-theme-skin="nexus"][data-theme="mid"] .text-yellow-600,
[data-theme-skin="nexus"][data-theme="dark"] .text-yellow-700,
[data-theme-skin="nexus"][data-theme="mid"] .text-yellow-700,
[data-theme-skin="nexus"][data-theme="dark"] .text-yellow-800,
[data-theme-skin="nexus"][data-theme="mid"] .text-yellow-800 {
    color: #fde047 !important;
}

[data-theme-skin="nexus"][data-theme="dark"] .bg-red-50,
[data-theme-skin="nexus"][data-theme="mid"] .bg-red-50,
[data-theme-skin="nexus"][data-theme="dark"] .bg-red-100,
[data-theme-skin="nexus"][data-theme="mid"] .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.18) !important;
}
[data-theme-skin="nexus"][data-theme="dark"] .text-red-600,
[data-theme-skin="nexus"][data-theme="mid"] .text-red-600,
[data-theme-skin="nexus"][data-theme="dark"] .text-red-700,
[data-theme-skin="nexus"][data-theme="mid"] .text-red-700,
[data-theme-skin="nexus"][data-theme="dark"] .text-red-800,
[data-theme-skin="nexus"][data-theme="mid"] .text-red-800 {
    color: #fca5a5 !important;
}

[data-theme-skin="nexus"][data-theme="dark"] .bg-blue-50,
[data-theme-skin="nexus"][data-theme="mid"] .bg-blue-50,
[data-theme-skin="nexus"][data-theme="dark"] .bg-blue-100,
[data-theme-skin="nexus"][data-theme="mid"] .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.18) !important;
}
[data-theme-skin="nexus"][data-theme="dark"] .text-blue-600,
[data-theme-skin="nexus"][data-theme="mid"] .text-blue-600,
[data-theme-skin="nexus"][data-theme="dark"] .text-blue-700,
[data-theme-skin="nexus"][data-theme="mid"] .text-blue-700 {
    color: #93c5fd !important;
}