/* ==========================================================================
   369 Platform — Premium Workspace Background (CSS-only, no images)
   Light luxury canvas: white + off-white + gold + charcoal accents
   Scope: authenticated app (excludes POS lockscreen, HRM premium, auth)
   ========================================================================== */

:root {
    --ws-off-white: #F7F5EF;
    --ws-white: #FFFFFF;
    --ws-warm-gray: #EAE6DC;
    --ws-gold: #C9A227;
    --ws-gold-light: #D4AF37;
    --ws-gold-soft: rgba(201, 162, 39, 0.10);
    --ws-gold-glow: rgba(212, 175, 55, 0.07);
    --ws-charcoal: #222222;
    --ws-charcoal-soft: #3A3A3A;
    --ws-charcoal-whisper: rgba(34, 34, 34, 0.035);
    --ws-glass-surface: rgba(255, 255, 255, 0.88);
    --ws-glass-border: rgba(201, 162, 39, 0.18);
}

/* ── Main shell background ── */
body:not(.lockscreen):not(.hrm-premium-theme):not(.auth2-body) .gradient-box {
    background-color: var(--ws-off-white);
    background-image:
        radial-gradient(ellipse 90% 55% at 100% 0%, var(--ws-gold-glow) 0%, transparent 58%),
        radial-gradient(ellipse 70% 50% at 0% 100%, var(--ws-charcoal-whisper) 0%, transparent 52%),
        radial-gradient(circle 420px at 50% 40%, rgba(255, 255, 255, 0.95) 0%, transparent 70%),
        linear-gradient(
            165deg,
            var(--ws-white) 0%,
            var(--ws-off-white) 38%,
            #FAFAF8 68%,
            var(--ws-warm-gray) 100%
        );
    background-attachment: fixed;
    min-height: 100vh;
}

/* ── Content scroll area — transparent so shell gradient shows through ── */
body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme {
    position: relative;
    background: transparent !important;
    color: var(--ws-charcoal);
}

/* Subtle ambient glow layers (pure CSS, no images) */
body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme::before,
body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme::before {
    top: -8%;
    right: -6%;
    width: min(520px, 45vw);
    height: min(520px, 45vw);
    background: radial-gradient(circle, rgba(212, 175, 55, 0.09) 0%, transparent 68%);
}

body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme::after {
    bottom: -10%;
    left: -8%;
    width: min(480px, 42vw);
    height: min(480px, 42vw);
    background: radial-gradient(circle, rgba(34, 34, 34, 0.04) 0%, transparent 65%);
}

body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme > * {
    position: relative;
    z-index: 1;
}

/* ── Page sections inherit calm white canvas ── */
body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme .content,
body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme section.content {
    background: transparent;
}

body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme .content-header {
    background: transparent;
}

/* ── Cards float on glass-white panels (readability on soft bg) ── */
body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme .box,
body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme .box.box-solid {
    background: var(--ws-glass-surface) !important;
    border-color: var(--ws-glass-border) !important;
    box-shadow:
        0 1px 2px rgba(34, 34, 34, 0.04),
        0 8px 28px rgba(34, 34, 34, 0.06) !important;
}

body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme .box .box-header,
body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme .box.box-solid .box-header {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(201, 162, 39, 0.06) 100%
    ) !important;
    border-bottom-color: rgba(201, 162, 39, 0.14) !important;
}

body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme .app-widget-card {
    background: var(--ws-glass-surface) !important;
    border-color: var(--ws-glass-border) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme .app-widget-card:hover {
    border-color: rgba(201, 162, 39, 0.32) !important;
    box-shadow: 0 12px 32px rgba(180, 130, 20, 0.10) !important;
}

/* ── Footer blends into canvas ── */
body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme .main-footer {
    background: rgba(255, 255, 255, 0.55);
    border-top: 1px solid rgba(201, 162, 39, 0.12);
    color: var(--ws-charcoal-soft);
}

/* ── Body base ── */
body:not(.lockscreen):not(.hrm-premium-theme):not(.auth2-body) {
    background-color: var(--ws-off-white);
    color: var(--ws-charcoal);
}

@media (prefers-reduced-motion: reduce) {
    body:not(.lockscreen):not(.hrm-premium-theme):not(.auth2-body) .gradient-box {
        background-attachment: scroll;
    }
}

@media print {
    body:not(.lockscreen):not(.hrm-premium-theme) .gradient-box,
    body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme::before,
    body:not(.lockscreen):not(.hrm-premium-theme) #scrollable-container.sysadv-m3-theme::after {
        background: #fff !important;
    }
}