/* ============================================================ NEX RMM Theme — dark-mode-aware, Quasar-safe Do NOT set a global html/body background. Quasar toggles .body--light / .body--dark on ; we scope to those. ============================================================ */ /* ---- Brand tokens (high specificity wins Quasar defaults) ---- */ :root:root{ --q-primary:#6366f1; --q-secondary:#14b8a6; --q-accent:#8b5cf6; --q-dark:#0f172a; --q-positive:#10b981; --q-negative:#ef4444; --q-warning:#f59e0b; --q-info:#3b82f6; --nex-radius-card:14px; --nex-radius-btn:10px; --nex-radius-field:10px; --nex-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } /* ---- Typography (color stays mode-driven; no bg here) ---- */ html,body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-family:var(--nex-font)!important; } /* ============================================================ LIGHT MODE (default + .body--light) ============================================================ */ body.body--light, body:not(.body--dark){ background:#f8fafc; color:#0f172a; } body.body--light .q-page, body:not(.body--dark) .q-page{ background:#f8fafc; color:#0f172a; } /* Cards */ body.body--light .q-card, body:not(.body--dark) .q-card{ background:#ffffff; color:#0f172a; border:1px solid rgba(15,23,42,.06); box-shadow:0 1px 3px rgba(15,23,42,.05),0 10px 30px -12px rgba(15,23,42,.12); } /* Drawer / sidebar */ body.body--light .q-drawer, body:not(.body--dark) .q-drawer{ background:#ffffff!important; color:#334155; border-right:1px solid #e2e8f0; } body.body--light .q-drawer .q-item, body:not(.body--dark) .q-drawer .q-item{ color:#475569; border-radius:10px; margin:4px 8px; } body.body--light .q-drawer .q-item.q-router-link--active, body:not(.body--dark) .q-drawer .q-item.q-router-link--active{ background:rgba(99,102,241,.12); color:#4f46e5; } /* Inputs */ body.body--light .q-field--outlined .q-field__control{ border-radius:var(--nex-radius-field); background:#ffffff; } /* Scrollbar */ body.body--light::-webkit-scrollbar, body:not(.body--dark)::-webkit-scrollbar{width:10px;height:10px;} body.body--light::-webkit-scrollbar-track, body:not(.body--dark)::-webkit-scrollbar-track{background:#f1f5f9;} body.body--light::-webkit-scrollbar-thumb, body:not(.body--dark)::-webkit-scrollbar-thumb{ background:#c7d2fe;border-radius:8px;border:2px solid #f1f5f9; } body.body--light::-webkit-scrollbar-thumb:hover, body:not(.body--dark)::-webkit-scrollbar-thumb:hover{background:#a5b4fc;} /* ============================================================ DARK MODE (.body--dark — Quasar toggles this) ============================================================ */ body.body--dark{ background:#0f172a; color:#e2e8f0; } body.body--dark .q-page{ background:#0f172a; color:#e2e8f0; } /* Cards */ body.body--dark .q-card{ background:#1e293b; color:#e2e8f0; border:1px solid rgba(148,163,184,.12); box-shadow:0 1px 3px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.55); } /* Drawer / sidebar */ body.body--dark .q-drawer{ background:#0f172a!important; color:#cbd5e1; border-right:1px solid rgba(148,163,184,.12); } body.body--dark .q-drawer .q-item{ color:#cbd5e1; border-radius:10px; margin:4px 8px; } body.body--dark .q-drawer .q-item.q-router-link--active{ background:rgba(99,102,241,.22); color:#c7d2fe; } /* Inputs */ body.body--dark .q-field--outlined .q-field__control{ border-radius:var(--nex-radius-field); background:#1e293b; } body.body--dark .q-field--outlined .q-field__control:before{ border-color:rgba(148,163,184,.25)!important; } /* Scrollbar */ body.body--dark::-webkit-scrollbar{width:10px;height:10px;} body.body--dark::-webkit-scrollbar-track{background:#0f172a;} body.body--dark::-webkit-scrollbar-thumb{ background:#475569;border-radius:8px;border:2px solid #0f172a; } body.body--dark::-webkit-scrollbar-thumb:hover{background:#64748b;} /* ============================================================ HEADER — branded gradient, works in both modes ============================================================ */ .q-header.bg-grey-9, .q-header.bg-grey-8, .q-header.bg-grey-10{ background:linear-gradient(90deg,#4f46e5 0%,#6366f1 45%,#8b5cf6 100%)!important; box-shadow:0 4px 20px -8px rgba(79,70,229,.55); } .q-header .q-toolbar__title{ font-weight:800!important; letter-spacing:-.02em; font-size:1.15rem; color:#ffffff; } .q-header .q-toolbar__title::before{ content:"◆ "; color:#a5b4fc; font-weight:400; margin-right:.1em; } /* ============================================================ BUTTONS — primary gradient + glow ============================================================ */ .q-btn{ border-radius:var(--nex-radius-btn)!important; font-weight:600; letter-spacing:.01em; } .q-btn.q-btn--unelevated.bg-primary{ background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%)!important; box-shadow:0 4px 14px -4px rgba(99,102,241,.5); color:#ffffff!important; } .q-btn.q-btn--unelevated.bg-primary:hover{ box-shadow:0 6px 20px -4px rgba(99,102,241,.65); } .q-btn--flat.text-primary{ border-radius:var(--nex-radius-btn)!important; font-weight:600; } /* ============================================================ TABS / CHIPS / FIELD SHARED ============================================================ */ .q-card{border-radius:var(--nex-radius-card)!important;} .q-tab--active{color:#6366f1!important;} .q-tab__indicator{color:#6366f1!important;} .q-chip{border-radius:8px!important;font-weight:500;} .q-field--outlined .q-field__control{border-radius:var(--nex-radius-field)!important;} /* ============================================================ BRAND WORDMARK HELPER ============================================================ */ .nex-brand{ font-weight:800; letter-spacing:-.02em; background:linear-gradient(135deg,#8b5cf6 0%,#14b8a6 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }