/* Gaglani brand theme for Tactical RMM (Quasar overlay) — matches portal.gaglani.com
   Injected via <link> in index.html; overrides only, no rebuild. Best in Dark mode. */
:root {
  /* Quasar brand tokens */
  --q-primary:  #6d8bff;
  --q-secondary:#3fd0c9;
  --q-accent:   #6d8bff;
  --q-positive: #3ecf8e;
  --q-negative: #f0616d;
  --q-warning:  #e0a23c;
  --q-info:     #3fd0c9;
  --q-dark:      #141824;
  --q-dark-page: #0c0f16;
  /* Gaglani palette */
  --gg-bg:#0c0f16; --gg-surface:#141824; --gg-surface2:#1b2130;
  --gg-line:#262d3d; --gg-line2:#333c50; --gg-ink:#e8ecf4; --gg-muted:#8a93a6;
  --gg-radius:12px;
}

/* Type — match portal's system stack */
body, input, button, textarea, .q-field__native, .q-item__label, .text-body1, .text-body2 {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}

/* ---- Dark mode surfaces (portal look) ---- */
body.body--dark { background:var(--gg-bg) !important; color:var(--gg-ink) !important; }
.body--dark .q-layout, .body--dark .q-page-container, .body--dark .q-page { background:var(--gg-bg) !important; }
.body--dark .q-header, .body--dark .q-drawer, .body--dark .q-footer, .body--dark .q-toolbar {
  background:var(--gg-surface) !important; color:var(--gg-ink) !important;
}
.body--dark .q-header { border-bottom:1px solid var(--gg-line) !important; }
.body--dark .q-drawer { border-right:1px solid var(--gg-line) !important; }
.body--dark .q-card, .body--dark .q-menu, .body--dark .q-table__card,
.body--dark .q-dialog__inner > div, .body--dark .q-bar {
  background:var(--gg-surface) !important; color:var(--gg-ink) !important;
  border:1px solid var(--gg-line) !important; border-radius:var(--gg-radius) !important;
}
.body--dark .q-expansion-item, .body--dark .q-tab-panels { background:transparent !important; }

/* ---- Tables ---- */
.body--dark .q-table th { color:var(--gg-muted) !important; font-weight:600 !important; }
.body--dark .q-table thead th { border-bottom:1px solid var(--gg-line) !important; }
.body--dark .q-table tbody td { border-bottom:1px solid var(--gg-line) !important; }
.body--dark .q-table tbody tr:hover { background:var(--gg-surface2) !important; }

/* ---- Inputs ---- */
.body--dark .q-field--outlined .q-field__control { border-radius:10px !important; }
.body--dark .q-field__control { background:var(--gg-surface2) !important; }

/* ---- Buttons: modern, no shouty caps ---- */
.q-btn { border-radius:10px !important; text-transform:none !important; font-weight:600 !important; letter-spacing:.2px !important; }
.q-btn.q-btn--rectangle { border-radius:10px !important; }

/* ---- Accents ---- */
a, .text-primary { color:var(--q-primary) !important; }
.body--dark .q-item.q-router-link--active, .body--dark .q-item--active {
  color:var(--q-primary) !important; background:rgba(109,139,255,.10) !important;
  border-radius:8px !important;
}
.q-drawer .q-item { border-radius:8px !important; margin:2px 8px !important; }

/* Scrollbar polish (dark) */
.body--dark ::-webkit-scrollbar { width:10px; height:10px; }
.body--dark ::-webkit-scrollbar-thumb { background:var(--gg-line2); border-radius:8px; }
.body--dark ::-webkit-scrollbar-track { background:transparent; }

/* ===================== LOGIN PAGE (scoped to .bg-image) ===================== */
.bg-image {
  background: radial-gradient(1100px 560px at 50% -8%, #1b2130 0%, #0c0f16 62%) !important;
}
.bg-image .q-card {
  width: 400px !important; max-width: 92vw !important;
  background: var(--gg-surface) !important;
  border: 1px solid var(--gg-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5) !important;
  padding: 10px 8px !important;
}
.bg-image .text-h4 {
  font-size: 1.55rem !important; font-weight: 700 !important;
  letter-spacing: .2px !important; color: var(--gg-ink) !important;
}
/* modern, appropriately-sized filled inputs on the login only */
.bg-image .q-field--filled .q-field__control {
  background: var(--gg-surface2) !important;
  border: 1px solid var(--gg-line) !important;
  border-radius: 10px !important; height: 52px !important;
}
.bg-image .q-field--filled .q-field__control::before,
.bg-image .q-field--filled .q-field__control::after { border: 0 !important; }
.bg-image .q-field__label { color: var(--gg-muted) !important; }
.bg-image .q-field__native, .bg-image .q-field__input { color: var(--gg-ink) !important; }
.bg-image .q-btn {
  border-radius: 10px !important; font-weight: 600 !important;
  letter-spacing: .3px !important; height: 46px !important;
}

/* Fix: browser autofill paints a white/yellow box over login inputs.
   The inset box-shadow trick is the only way to override the UA autofill bg. */
.bg-image input:-webkit-autofill,
.bg-image input:-webkit-autofill:hover,
.bg-image input:-webkit-autofill:focus,
.bg-image input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--gg-surface2) inset !important;
  box-shadow: 0 0 0 1000px var(--gg-surface2) inset !important;
  -webkit-text-fill-color: var(--gg-ink) !important;
  caret-color: var(--gg-ink) !important;
  transition: background-color 9999s ease-in-out 0s !important;
}
/* ensure Quasar's filled "tint" layer isn't a light box */
.bg-image .q-field--filled .q-field__control::before { background: transparent !important; }
.bg-image .q-field__control { box-shadow: none !important; }

/* Login: Gaglani logo above the title */
.bg-image .text-h4 { text-align:center !important; }
.bg-image .text-h4::before {
  content:""; display:block; width:86px; height:86px; margin:2px auto 12px;
  background:url("/gaglani-logo.png") center/contain no-repeat;
}

/* Mobile (phone) CSS tweaks were REVERTED 2026-08-26 — the overflow/splitter overrides
   made the Tactical console unusable on mobile. Left at Quasar defaults (usable, with
   some scrolling). If a genuinely mobile experience is wanted later, build a slim custom
   API-backed mobile view rather than restyling this desktop SPA from the outside. */