/* CNC Dashboard — Theme Variables, Base Styles & Animations */

:root {
    --bg-primary: #1e222d;
    --bg-secondary: #2B2F3A;
    --bg-card: rgba(43, 47, 58, 0.7);
    --bg-card-hover: rgba(55, 60, 75, 0.7);
    --border: rgba(224, 229, 236, 0.08);
    --text-primary: #F4F7FA;
    --text-secondary: #959DA9;
    --text-muted: #6b7580;
    --accent: #5ABFEC;
    --accent-glow: rgba(90, 191, 236, 0.2);
    --green: #89E185;
    --green-text: #89E185;
    --green-bg: rgba(137, 225, 133, 0.12);
    --red: #f87171;
    --red-bg: rgba(248, 113, 113, 0.12);
    --orange: #FBB300;
    --orange-bg: rgba(251, 179, 0, 0.12);
    --teal: #87E2FF;
    --teal-bg: rgba(135, 226, 255, 0.12);
    --purple: #F5CE7F;
    --purple-bg: rgba(245, 206, 127, 0.12);
    --gray: #959DA9;
    --gray-bg: rgba(149, 157, 169, 0.12);
    /* Glassmorphism */
    --glass-bg: rgba(43, 47, 58, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(16px);
    --surface: rgba(43, 47, 58, 0.5);
    --card-bg: rgba(43, 47, 58, 0.7);
    /* Glow shadows */
    --glow-green: 0 0 18px rgba(137, 225, 133, 0.35);
    --glow-amber: 0 0 18px rgba(251, 179, 0, 0.35);
    --glow-red: 0 0 18px rgba(248, 113, 113, 0.35);
    --glow-indigo: 0 0 18px rgba(90, 191, 236, 0.35);
    --glow-teal: 0 0 18px rgba(135, 226, 255, 0.30);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.light-theme {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.75);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --border: rgba(99, 102, 241, 0.1);
    --text-primary: #0f172a;
    --text-secondary: #2B2F3A;
    --text-muted: #2B2F3A;
    --accent: #6366f1;
    --accent-glow: rgba(99, 102, 241, 0.15);
    --green: #89E185;
    --green-text: #267A25;
    --green-bg: rgba(137, 225, 133, 0.10);
    --red: #ef4444;
    --red-bg: rgba(239, 68, 68, 0.08);
    --orange: #f59e0b;
    --orange-bg: rgba(245, 158, 11, 0.08);
    --teal: #06b6d4;
    --teal-bg: rgba(6, 182, 212, 0.08);
    --purple: #F5CE7F;
    --purple-bg: rgba(245, 206, 127, 0.08);
    --gray-bg: rgba(100, 116, 139, 0.06);
    /* Glassmorphism light */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.6);
    --surface: rgba(255, 255, 255, 0.7);
    --card-bg: rgba(255, 255, 255, 0.85);
    --shadow-glass: 0 8px 32px rgba(31, 38, 135, 0.07);
    /* Glow shadows */
    --glow-green: 0 0 18px rgba(137, 225, 133, 0.28);
    --glow-amber: 0 0 18px rgba(245, 158, 11, 0.25);
    --glow-red: 0 0 18px rgba(239, 68, 68, 0.25);
    --glow-indigo: 0 0 18px rgba(99, 102, 241, 0.25);
    --glow-teal: 0 0 18px rgba(6, 182, 212, 0.20);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(at 40% 20%, hsla(228, 100%, 74%, 0.18) 0px, transparent 50%),
        radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.14) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 0.10) 0px, transparent 50%),
        radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 0.10) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 0.10) 0px, transparent 50%),
        radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 0.14) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 0.08) 0px, transparent 50%);
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    /* always reserve scrollbar space — prevents layout shift between tabs */
}


/* Light theme: clean white with subtle top-right blue hint */
.light-theme,
.light-theme body {
    background-color: #F4F7FA;
    background-image:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(186, 224, 248, 0.55) 0%, transparent 65%);
    background-attachment: fixed;
}

/* Light theme: no pseudo-element orbs — keep background clean */
.light-theme body::before,
.light-theme body::after,
.light-theme .bg-watermark::after {
    display: none;
}

body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}

body::before {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #5ABFEC, #A7D5F0);
    top: -200px;
    right: -150px;
    animation: floatOrb1 20s ease-in-out infinite;
}

body::after {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #F4F7FA, #e2e8f0);
    bottom: -150px;
    left: -100px;
    animation: floatOrb2 25s ease-in-out infinite;
}

.light-theme::before,
.light-theme::after {
    opacity: 0.08;
}

.light-theme .header-logo {
    filter: none !important;
}

@keyframes floatOrb1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-60px, 80px) scale(1.1);
    }

    66% {
        transform: translate(40px, -40px) scale(0.95);
    }
}

@keyframes floatOrb2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, -60px) scale(1.05);
    }

    66% {
        transform: translate(-70px, 30px) scale(0.9);
    }
}

/* Background watermark logo */
.bg-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    max-width: 900px;
    opacity: 0.025;
    z-index: 0;
    pointer-events: none;
    filter: brightness(0) invert(1);
}

.light-theme .bg-watermark {
    filter: brightness(0);
    opacity: 0.02;
}