/* ============================================================
   UniversalTech Tactical RMM - NeoGrid 2026 UI
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --ut-bg-0: #070b14;
  --ut-bg-1: #0b1426;
  --ut-bg-2: #111d34;
  --ut-surface: rgba(14, 24, 44, 0.78);
  --ut-surface-strong: #12213d;
  --ut-surface-soft: #162946;
  --ut-border: rgba(123, 160, 212, 0.22);
  --ut-border-strong: rgba(123, 160, 212, 0.4);
  --ut-accent: #16c7a1;
  --ut-accent-2: #2f7bff;
  --ut-text: #eaf1ff;
  --ut-muted: #9ab0d8;
  --ut-danger: #ff5a6f;
  --ut-warning: #ffb84d;
  --ut-success: #2ad48f;
  --ut-radius-sm: 10px;
  --ut-radius: 14px;
  --ut-radius-lg: 18px;
  --ut-shadow: 0 16px 40px rgba(2, 7, 18, 0.5);
  --ut-shadow-soft: 0 8px 24px rgba(2, 7, 18, 0.35);
  --ut-font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ut-font-display: 'Space Grotesk', 'Manrope', 'Segoe UI', sans-serif;
  --ut-transition: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html,
body,
#q-app {
  background: var(--ut-bg-0) !important;
}

body,
.q-body--dark,
.q-layout {
  font-family: var(--ut-font-body) !important;
  color: var(--ut-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(1200px 760px at 5% -18%, rgba(47, 123, 255, 0.26), transparent 62%),
    radial-gradient(1000px 640px at 96% -12%, rgba(22, 199, 161, 0.2), transparent 62%),
    linear-gradient(180deg, var(--ut-bg-1) 0%, var(--ut-bg-0) 74%) !important;
}

.q-layout,
.q-page,
.q-page-container {
  position: relative;
}

.q-layout::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, #000 38%, transparent 100%);
  z-index: 0;
}

.q-page-container,
.q-page {
  z-index: 1;
}

.q-header,
.q-header .q-toolbar {
  background: linear-gradient(180deg, rgba(18, 33, 61, 0.96) 0%, rgba(12, 23, 43, 0.92) 100%) !important;
  border-bottom: 1px solid var(--ut-border) !important;
  box-shadow: 0 8px 30px rgba(0, 8, 23, 0.45) !important;
  backdrop-filter: blur(10px);
}

.q-toolbar {
  min-height: 52px !important;
}

.q-toolbar__title {
  font-family: var(--ut-font-display) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: transparent !important;
  background: linear-gradient(92deg, #f4f8ff 0%, #9dc3ff 45%, #75f2d2 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.q-header .q-icon,
.q-toolbar .q-icon {
  color: #d5e6ff !important;
}

.q-drawer,
.q-drawer__content {
  background: linear-gradient(180deg, rgba(14, 24, 44, 0.98) 0%, rgba(10, 19, 35, 0.98) 100%) !important;
  border-right: 1px solid var(--ut-border) !important;
}

.q-item {
  border-radius: var(--ut-radius-sm) !important;
  margin: 2px 8px !important;
  color: var(--ut-text) !important;
  transition: background var(--ut-transition), transform var(--ut-transition), color var(--ut-transition) !important;
}

.q-item__label {
  color: var(--ut-text) !important;
}

.q-item__label--caption,
.text-caption {
  color: var(--ut-muted) !important;
}

.q-item:hover,
.q-item--active {
  background: linear-gradient(90deg, rgba(47, 123, 255, 0.2), rgba(22, 199, 161, 0.16)) !important;
  transform: translateX(2px);
}

.q-item--active .q-item__label,
.q-item--active .q-icon {
  color: #dff3ff !important;
}

.q-card,
.q-table__container,
.q-menu,
.q-dialog__inner > div,
.q-dialog__inner .q-card {
  background: var(--ut-surface) !important;
  border: 1px solid var(--ut-border) !important;
  border-radius: var(--ut-radius) !important;
  box-shadow: var(--ut-shadow) !important;
  backdrop-filter: blur(8px);
}

.q-card {
  transition: border-color var(--ut-transition), box-shadow var(--ut-transition), transform var(--ut-transition) !important;
}

.q-card:hover {
  border-color: rgba(113, 175, 255, 0.42) !important;
  box-shadow: 0 18px 48px rgba(2, 7, 18, 0.62) !important;
  transform: translateY(-2px);
}

.q-card__section {
  border-bottom: 1px solid rgba(123, 160, 212, 0.14);
}

.q-card__section:last-child {
  border-bottom: none;
}

.q-table,
.q-table__middle,
.q-table tbody {
  background: transparent !important;
}

.q-table thead tr {
  background: linear-gradient(180deg, rgba(27, 45, 81, 0.86), rgba(20, 35, 64, 0.92)) !important;
}

.q-table thead th {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--ut-border) !important;
  color: #c4d7f8 !important;
  font-size: 0.71rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-family: var(--ut-font-display) !important;
}

.q-table tbody td {
  color: var(--ut-text) !important;
  font-size: 0.845rem !important;
  padding: 9px 16px !important;
  border: none !important;
}

.q-table tbody tr {
  border-bottom: 1px solid rgba(123, 160, 212, 0.12) !important;
  transition: background var(--ut-transition) !important;
}

.q-table tbody tr:nth-child(2n) {
  background: rgba(30, 50, 85, 0.24) !important;
}

.q-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(47, 123, 255, 0.14), rgba(22, 199, 161, 0.14)) !important;
}

.q-btn {
  border-radius: 10px !important;
  font-family: var(--ut-font-display) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.03em !important;
  font-weight: 600 !important;
  transition: transform var(--ut-transition), box-shadow var(--ut-transition), filter var(--ut-transition) !important;
}

.q-btn:hover {
  transform: translateY(-1px);
}

.q-btn--standard.bg-primary,
.q-btn[color='primary'].q-btn--standard,
.bg-primary {
  background: linear-gradient(135deg, var(--ut-accent-2) 0%, var(--ut-accent) 100%) !important;
  border: 1px solid rgba(176, 228, 255, 0.28) !important;
  box-shadow: 0 8px 18px rgba(20, 136, 255, 0.35) !important;
}

.q-btn--standard.bg-primary:hover,
.q-btn[color='primary'].q-btn--standard:hover {
  filter: brightness(1.06);
  box-shadow: 0 12px 24px rgba(20, 136, 255, 0.44) !important;
}

.q-btn--outline,
.q-btn--flat {
  border-color: var(--ut-border) !important;
  color: #d2e6ff !important;
}

.q-btn--outline:hover,
.q-btn--flat:hover {
  background: rgba(47, 123, 255, 0.14) !important;
}

.q-field__control {
  border-radius: var(--ut-radius-sm) !important;
  border: 1px solid var(--ut-border) !important;
  background: rgba(15, 28, 52, 0.84) !important;
  transition: border-color var(--ut-transition), box-shadow var(--ut-transition), background var(--ut-transition) !important;
}

.q-field--focused .q-field__control,
.q-field__control:focus-within {
  border-color: rgba(125, 206, 255, 0.82) !important;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.2) !important;
  background: rgba(20, 35, 65, 0.96) !important;
}

.q-field__label,
.q-field__messages,
.q-field__counter {
  color: var(--ut-muted) !important;
  font-size: 0.8rem !important;
}

.q-field--focused .q-field__label {
  color: #b9dbff !important;
}

.q-field__native,
.q-field__input {
  color: var(--ut-text) !important;
  font-family: var(--ut-font-body) !important;
}

.q-tabs {
  border-bottom: 1px solid var(--ut-border) !important;
  background: transparent !important;
}

.q-tab {
  color: var(--ut-muted) !important;
  text-transform: none !important;
  font-family: var(--ut-font-display) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border-radius: 9px 9px 0 0 !important;
  transition: color var(--ut-transition), background var(--ut-transition) !important;
}

.q-tab:hover {
  color: #d6e8ff !important;
}

.q-tab--active {
  color: #e9f4ff !important;
  background: linear-gradient(180deg, rgba(47, 123, 255, 0.2), rgba(47, 123, 255, 0.05)) !important;
}

.q-tabs__indicator {
  background: linear-gradient(90deg, var(--ut-accent-2), var(--ut-accent)) !important;
  height: 3px !important;
  border-radius: 999px !important;
}

.q-badge,
.q-chip {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  border: 1px solid rgba(160, 210, 255, 0.24) !important;
}

.q-tooltip,
.q-notification {
  background: rgba(8, 16, 32, 0.95) !important;
  border: 1px solid var(--ut-border) !important;
  color: var(--ut-text) !important;
  box-shadow: var(--ut-shadow-soft) !important;
}

.q-notification {
  border-left: 3px solid var(--ut-accent-2) !important;
  border-radius: var(--ut-radius) !important;
}

.q-notification__message {
  color: var(--ut-text) !important;
}

.q-expansion-item__container,
.q-list--bordered {
  border: 1px solid var(--ut-border) !important;
  border-radius: var(--ut-radius-sm) !important;
  background: rgba(17, 31, 57, 0.55) !important;
}

.q-tree__node--selected > .q-tree__node-header {
  border-radius: 8px !important;
  background: rgba(47, 123, 255, 0.16) !important;
}

.q-separator,
.q-splitter__separator {
  background: rgba(123, 160, 212, 0.28) !important;
}

.q-breadcrumbs__el {
  color: var(--ut-muted) !important;
  font-size: 0.78rem !important;
}

.q-breadcrumbs__el--last {
  color: var(--ut-text) !important;
  font-weight: 600 !important;
}

.q-breadcrumbs__separator {
  color: #6f8cbe !important;
}

.text-positive,
.text-green-4 {
  color: var(--ut-success) !important;
}

.text-warning {
  color: var(--ut-warning) !important;
}

.text-negative,
.text-red-4 {
  color: var(--ut-danger) !important;
}

.bg-positive {
  background: var(--ut-success) !important;
}

.bg-warning {
  background: var(--ut-warning) !important;
}

.bg-negative {
  background: var(--ut-danger) !important;
}

.bg-image {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 12%, rgba(47, 123, 255, 0.28), transparent 48%),
    radial-gradient(circle at 88% 16%, rgba(22, 199, 161, 0.24), transparent 48%),
    linear-gradient(160deg, #081225 0%, #0b1a31 44%, #060c17 100%) !important;
}

.bg-image .q-card {
  background: rgba(12, 23, 42, 0.82) !important;
  border: 1px solid rgba(149, 196, 255, 0.24) !important;
  border-radius: var(--ut-radius-lg) !important;
  box-shadow: 0 24px 80px rgba(2, 7, 18, 0.7) !important;
  backdrop-filter: blur(16px);
}

.bg-image .text-h4,
.text-h4,
.text-h5,
.text-h6 {
  font-family: var(--ut-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

.bg-image .text-h4 {
  font-size: 1.65rem !important;
  color: transparent !important;
  background: linear-gradient(90deg, #ffffff 0%, #a7d2ff 48%, #8bf5da 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center;
}

.text-overline {
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  color: #9bb5de !important;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: rgba(7, 13, 24, 0.85);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(47, 123, 255, 0.65), rgba(22, 199, 161, 0.65));
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(47, 123, 255, 0.9), rgba(22, 199, 161, 0.9));
}

@media (max-width: 900px) {
  .q-layout::before {
    opacity: 0.13;
  }

  .q-card,
  .q-table__container,
  .q-menu,
  .q-dialog__inner > div,
  .q-dialog__inner .q-card {
    border-radius: 12px !important;
  }

  .q-item {
    margin: 2px 6px !important;
  }

  .q-table thead th,
  .q-table tbody td {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ============================================================
   UniversalTech Tactical RMM - Desaturation Patch (2026-04-21)
   ============================================================ */

:root {
  --ut-bg-0: #0c1116;
  --ut-bg-1: #111922;
  --ut-bg-2: #17212c;
  --ut-surface: rgba(21, 30, 40, 0.82);
  --ut-surface-strong: #1a2734;
  --ut-surface-soft: #203243;
  --ut-border: rgba(149, 171, 186, 0.22);
  --ut-border-strong: rgba(149, 171, 186, 0.36);
  --ut-accent: #2bb497;
  --ut-accent-2: #3d8d7e;
  --ut-text: #ecf2f6;
  --ut-muted: #a6b5c2;
}

body,
.q-body--dark,
.q-layout {
  background:
    radial-gradient(1100px 700px at 8% -16%, rgba(61, 141, 126, 0.18), transparent 62%),
    radial-gradient(900px 620px at 96% -10%, rgba(66, 91, 117, 0.18), transparent 62%),
    linear-gradient(180deg, var(--ut-bg-1) 0%, var(--ut-bg-0) 74%) !important;
}

.q-header,
.q-header .q-toolbar {
  background: linear-gradient(180deg, rgba(28, 40, 53, 0.96) 0%, rgba(20, 31, 42, 0.94) 100%) !important;
}

.q-toolbar__title {
  background: linear-gradient(92deg, #f4f7fa 0%, #c4d0da 46%, #8edfc9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.q-item:hover,
.q-item--active {
  background: linear-gradient(90deg, rgba(63, 120, 108, 0.26), rgba(74, 97, 124, 0.20)) !important;
}

.q-table thead tr {
  background: linear-gradient(180deg, rgba(38, 53, 71, 0.90), rgba(30, 43, 58, 0.95)) !important;
}

.q-table tbody tr:nth-child(2n) {
  background: rgba(31, 43, 55, 0.34) !important;
}

.q-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(63, 120, 108, 0.16), rgba(74, 97, 124, 0.14)) !important;
}

.q-btn--standard.bg-primary,
.q-btn[color='primary'].q-btn--standard,
.bg-primary {
  background: linear-gradient(135deg, #406f66 0%, #2c8f79 100%) !important;
  border: 1px solid rgba(200, 230, 223, 0.24) !important;
  box-shadow: 0 8px 18px rgba(37, 77, 69, 0.34) !important;
}

.q-btn--standard.bg-primary:hover,
.q-btn[color='primary'].q-btn--standard:hover {
  box-shadow: 0 12px 24px rgba(37, 77, 69, 0.44) !important;
}

.q-badge.bg-primary,
.q-chip.bg-primary {
  background: linear-gradient(135deg, #3b6a60 0%, #2b826f 100%) !important;
  color: #eff9f6 !important;
  border-color: rgba(200, 230, 223, 0.30) !important;
  box-shadow: none !important;
}

.q-tab--active {
  background: linear-gradient(180deg, rgba(63, 120, 108, 0.24), rgba(63, 120, 108, 0.08)) !important;
}

.q-tree__node--selected > .q-tree__node-header {
  background: rgba(63, 120, 108, 0.18) !important;
}

.q-btn--outline:hover,
.q-btn--flat:hover {
  background: rgba(63, 120, 108, 0.16) !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(63, 120, 108, 0.68), rgba(74, 97, 124, 0.62));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(63, 120, 108, 0.90), rgba(74, 97, 124, 0.84));
}