/* ========================================================================== APP V4 — atmospheric overlay for the logged-in user UI (app.html) Activation: Strategy: shell-level overlay only. Targets body backdrop, top nav, primary card surfaces, primary CTAs, focus halos, headings. Does NOT touch calendar/customer/finance/POS/forms internals — those keep their existing CSS modules intact. ========================================================================== */ /* ─────────── BODY — V4 atmospheric backdrop ─────────── */ html[data-design="v2"] body.app-v4 { background: radial-gradient(1100px 800px at 12% -6%, rgba(52,211,153,.14), transparent 65%), radial-gradient(900px 700px at 96% 6%, rgba(94,234,212,.11), transparent 65%), radial-gradient(800px 600px at 85% 78%, rgba(167,139,250,.11), transparent 65%), radial-gradient(700px 700px at 18% 88%, rgba(110,231,183,.07), transparent 65%), var(--mb-premium-bg) !important; position: relative; } html[data-design="v2"][data-theme="light"] body.app-v4 { background: radial-gradient(1100px 800px at 12% -6%, rgba(20,184,166,.09), transparent 65%), radial-gradient(900px 700px at 96% 6%, rgba(94,234,212,.08), transparent 65%), radial-gradient(800px 600px at 85% 80%, rgba(124,108,200,.07), transparent 65%), radial-gradient(700px 700px at 18% 88%, rgba(212,183,136,.05), transparent 65%), #FAFCF8 !important; } /* ─────────── TOP NAV — V4 luxe glass paint (layout-neutral) ─────────── */ html[data-design="v2"] body.app-v4 nav.nav { background: linear-gradient(180deg, rgba(2,17,13,.86), rgba(2,17,13,.58)) !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; border-bottom: 1px solid var(--mb-premium-line) !important; box-shadow: 0 14px 40px rgba(0,0,0,.30) !important; } html[data-design="v2"][data-theme="light"] body.app-v4 nav.nav { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)) !important; box-shadow: 0 14px 36px rgba(6,55,42,.10) !important; } /* Mobile-only: V4 confirms sticky behaviour (the base in 03-nav.css already does this). On desktop (≥641px) the fixed sidebar layout from 03-nav.css must stay intact, so no position override here — earlier !important caused nav.nav to render as a 228/248 px × 100vh sticky block in #app's flex column, pushing page content below the fold. */ @media (max-width: 640px) { html[data-design="v2"] body.app-v4 nav.nav { position: sticky !important; top: 0; z-index: 200; } } /* ─────────── PRIMARY CARDS / PANELS — V4 glass treatment ─────────── */ html[data-design="v2"] body.app-v4 .card, html[data-design="v2"] body.app-v4 .panel, html[data-design="v2"] body.app-v4 .mb-dash__card, html[data-design="v2"] body.app-v4 .mb-card, html[data-design="v2"] body.app-v4 .stat-card, html[data-design="v2"] body.app-v4 .info-card { background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--mb-premium-line) !important; border-radius: 18px !important; box-shadow: 0 14px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } html[data-design="v2"][data-theme="light"] body.app-v4 .card, html[data-design="v2"][data-theme="light"] body.app-v4 .panel, html[data-design="v2"][data-theme="light"] body.app-v4 .mb-dash__card, html[data-design="v2"][data-theme="light"] body.app-v4 .mb-card, html[data-design="v2"][data-theme="light"] body.app-v4 .stat-card, html[data-design="v2"][data-theme="light"] body.app-v4 .info-card { background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(244,251,246,.82)) !important; box-shadow: 0 14px 36px rgba(6,55,42,.10), inset 0 1px 0 rgba(255,255,255,.6) !important; } /* ─────────── INPUTS — V4 focus halo ─────────── */ html[data-design="v2"] body.app-v4 input:focus, html[data-design="v2"] body.app-v4 textarea:focus, html[data-design="v2"] body.app-v4 select:focus { outline: none; border-color: var(--mb-premium-blue-2) !important; box-shadow: 0 0 0 3px rgba(52,211,153,.18), 0 0 22px rgba(94,234,212,.24), 0 0 44px rgba(167,139,250,.10) !important; } /* ─────────── PRIMARY CTAs — V4 emerald-cyan-violet gradient ─────────── */ html[data-design="v2"] body.app-v4 .btn-primary, html[data-design="v2"] body.app-v4 .btn-cta, html[data-design="v2"] body.app-v4 .btn-submit, html[data-design="v2"] body.app-v4 button.primary, html[data-design="v2"] body.app-v4 .mb-btn-primary { background: linear-gradient(135deg, var(--mb-premium-blue), var(--mb-premium-blue-2) 70%, var(--mb-cyan-soft)) !important; color: #02110C !important; border: 0 !important; border-radius: 999px !important; font-family: "Inter", system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: .015em !important; box-shadow: 0 8px 22px rgba(16,185,129,.26), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 22px rgba(52,211,153,.28) !important; transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .26s ease !important; } html[data-design="v2"] body.app-v4 .btn-primary:hover, html[data-design="v2"] body.app-v4 .btn-cta:hover, html[data-design="v2"] body.app-v4 .btn-submit:hover, html[data-design="v2"] body.app-v4 button.primary:hover, html[data-design="v2"] body.app-v4 .mb-btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 12px 32px rgba(16,185,129,.36), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 36px rgba(52,211,153,.40) !important; } /* ─────────── HEADINGS — Inter premium typography ─────────── */ html[data-design="v2"] body.app-v4 h1, html[data-design="v2"] body.app-v4 h2, html[data-design="v2"] body.app-v4 .h1, html[data-design="v2"] body.app-v4 .h2 { font-family: "Inter", system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; }