/* SETXMesh MeshDash-inspired makeover — 2026-09-24 */
:root {
  color-scheme: dark;
  --setx-bg: #000000;
  --setx-surface: #241c42;
  --setx-surface-2: #2d2456;
  --setx-border: #4a3a72;
  --setx-text: #f3f8ff;
  --setx-muted: #b3c9dd;
  --setx-cyan: #35d9f0;
  --setx-green: #a78bfa;
  --setx-yellow: #ffd16a;
  --setx-purple: #bba1fa;
  --setx-red: #ff8190;
  --bs-body-color: #f3f8ff;
  --bs-body-bg: #000000;
  --bs-border-color: #4a3a72;
  --bs-secondary-color: #b3c9dd;
  --bs-link-color: #54e2f5;
  --bs-link-hover-color: #a78bfa;
}

html body {
  background:
    radial-gradient(circle at 92% -8%, rgba(53, 217, 240, .10), transparent 34rem),
    radial-gradient(circle at -8% 22%, rgba(167, 139, 250, .08), transparent 27rem),
    #000000 !important;
  color: #f3f8ff !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 15px;
  line-height: 1.5;
}

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .card-title {
  color: #f3f8ff !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
}

html body h1 { font-size: clamp(1.7rem, 2.6vw, 2.45rem); }
html body h2 { font-size: clamp(1.4rem, 2.1vw, 1.95rem); }
html body .text-muted, html body small.text-muted,
html body .form-text, html body .text-secondary {
  color: #b3c9dd !important;
}

html body a:not(.btn):not(.nav-link) {
  color: #54e2f5;
  text-decoration-color: rgba(84, 226, 245, .45);
}
html body a:not(.btn):not(.nav-link):hover { color: #a78bfa; }
html body :focus-visible {
  outline: 2px solid #a78bfa !important;
  outline-offset: 2px;
}
::selection { background: #a78bfa; color: #140f28; }

/* Header: bright identifiers against a quiet dark surface. */
html body .navbar.bg-primary {
  background: linear-gradient(100deg, #190f30, #241c42) !important;
  border-bottom: 1px solid #5c4a8a !important;
  box-shadow: 0 8px 25px rgba(0, 6, 15, .28) !important;
}
html body .navbar-brand {
  color: #f3f8ff !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 800;
  letter-spacing: -.045em;
  text-transform: none;
  text-shadow: none;
}
html body .navbar-brand::after {
  color: #b3c9dd !important;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .11em;
}
html body .navbar-dark .navbar-nav .nav-link {
  color: #d3e4f2 !important;
  font-family: Inter, system-ui, sans-serif;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  text-shadow: none;
  border-radius: .5rem;
}
html body .navbar-dark .navbar-nav .nav-link:hover,
html body .navbar-dark .navbar-nav .nav-link.active {
  color: #c4b5fd !important;
  background: rgba(167, 139, 250, .14);
  text-shadow: none;
}
html body .navbar-dark .navbar-nav .nav-link.active {
  box-shadow: inset 0 -2px #a78bfa;
}

/* Panels and information surfaces throughout Malla. */
html body .card,
html body .modal-content,
html body .offcanvas {
  background: linear-gradient(145deg, #241c42, #1c1438) !important;
  color: #f3f8ff !important;
  border: 1px solid #4a3a72 !important;
  border-radius: .8rem !important;
  box-shadow: 0 9px 25px rgba(0, 7, 15, .20) !important;
}
html body .card {
  border-top: 2px solid #35d9f0 !important;
}
html body .card-header,
html body .modal-header,
html body .modal-footer {
  background: rgba(45, 36, 86, .65) !important;
  color: #f3f8ff !important;
  border-color: #4a3a72 !important;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .015em;
  text-transform: none;
}
html body .card:nth-of-type(3n + 1) { border-top-color: #a78bfa !important; }
html body .card:nth-of-type(3n + 2) { border-top-color: #35d9f0 !important; }
html body .card:nth-of-type(3n) { border-top-color: #bba1fa !important; }

/* Tables, including the Node List and packet lists. */
html body .table {
  --bs-table-color: #f3f8ff;
  --bs-table-bg: transparent;
  --bs-table-border-color: #4a3a72;
  --bs-table-striped-color: #f3f8ff;
  --bs-table-striped-bg: rgba(53, 217, 240, .055);
  --bs-table-hover-color: #ffffff;
  --bs-table-hover-bg: rgba(167, 139, 250, .11);
  color: #f3f8ff !important;
  font-family: Inter, system-ui, sans-serif;
}
html body .table thead th {
  background: #2d2456 !important;
  color: #dcf6ff !important;
  border-bottom: 2px solid #35d9f0 !important;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: none;
  vertical-align: middle;
}
html body .table tbody td {
  color: #ecf5ff;
  border-color: #4a3a72 !important;
  vertical-align: middle;
}
html body .table tbody tr:hover td {
  background: rgba(167, 139, 250, .1) !important;
}
html body .table .font-monospace,
html body code, html body pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
}

/* Forms and navigation controls. */
html body .form-control,
html body .form-select,
html body .input-group-text,
html body textarea,
html body select {
  background-color: #1d1638 !important;
  border: 1px solid #6a54a8 !important;
  color: #f3f8ff !important;
  border-radius: .5rem;
}
html body .form-control::placeholder,
html body textarea::placeholder { color: #b3c9dd !important; opacity: 1; }
html body .form-control:focus,
html body .form-select:focus,
html body textarea:focus {
  border-color: #a78bfa !important;
  box-shadow: 0 0 0 .2rem rgba(167, 139, 250, .2) !important;
}
html body .form-select option { background: #241c42; color: #f3f8ff; }
html body .form-check-input { background-color: #1d1638; border-color: #8aa8bc; }
html body .form-check-input:checked {
  background-color: #a78bfa;
  border-color: #a78bfa;
}
html body .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(167, 139, 250, .22);
}

html body .btn {
  border-radius: .55rem !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
html body .btn-primary, html body .btn-success {
  color: #140f28 !important;
  background: #a78bfa !important;
  border-color: #a78bfa !important;
}
html body .btn-primary:hover, html body .btn-success:hover {
  background: #c4b5fd !important;
  border-color: #c4b5fd !important;
}
html body .btn-outline-primary {
  color: #55dff2 !important;
  border-color: #55dff2 !important;
}
html body .btn-outline-primary:hover {
  color: #140f28 !important;
  background: #55dff2 !important;
}
html body .btn-secondary {
  color: #f3f8ff !important;
  background: #4a3a72 !important;
  border-color: #6a54a8 !important;
}
html body .btn:disabled, html body .btn.disabled { opacity: .6; }

html body .dropdown-menu {
  background: #241c42 !important;
  border: 1px solid #6a54a8 !important;
  border-radius: .65rem;
}
html body .dropdown-item { color: #f3f8ff !important; }
html body .dropdown-item:hover,
html body .dropdown-item:focus {
  background: #3a2d66 !important;
  color: #c4b5fd !important;
}
html body .pagination .page-link,
html body .nav-tabs .nav-link {
  color: #d3e4f2;
  background: #241c42;
  border-color: #4a3a72;
}
html body .pagination .active .page-link,
html body .nav-tabs .nav-link.active {
  color: #140f28 !important;
  background: #a78bfa !important;
  border-color: #a78bfa !important;
}
html body .pagination .page-link:hover,
html body .nav-tabs .nav-link:hover {
  color: #140f28;
  background: #55dff2;
}

/* Semantic colors remain clear on dark panels. */
html body .badge.bg-success,
html body .bg-success.badge {
  color: #140f28 !important;
  background: #a78bfa !important;
}
html body .badge.bg-info,
html body .bg-info.badge {
  color: #140f28 !important;
  background: #55dff2 !important;
}
html body .badge.bg-warning,
html body .bg-warning.badge {
  color: #140f28 !important;
  background: #ffd16a !important;
}
html body .badge.bg-danger,
html body .bg-danger.badge {
  color: #250911 !important;
  background: #ff8190 !important;
}
html body .alert {
  color: #f3f8ff;
  background: #2d2456;
  border-color: #6a54a8;
}
html body .alert-success { border-left: 4px solid #a78bfa; }
html body .alert-warning { border-left: 4px solid #ffd16a; }
html body .alert-danger { border-left: 4px solid #ff8190; }

/* Maps: style their controls without obscuring map tiles or data. */
html body .leaflet-container { background: #241c42; }
html body .leaflet-popup-content-wrapper,
html body .leaflet-popup-tip {
  background: #241c42;
  color: #f3f8ff;
}
html body .leaflet-control-zoom a {
  background: #241c42;
  color: #f3f8ff;
  border-color: #6a54a8;
}
html body .leaflet-control-zoom a:hover {
  background: #3a2d66;
  color: #a78bfa;
}

@media (max-width: 767px) {
  html body { font-size: 14px; }
  html body .card { border-radius: .65rem !important; }
  html body .table thead th { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after {
    scroll-behavior: auto !important;
  }
}


/* SETXMesh narrow header alignment v1
   Give branding, live data, radio controls, and navigation distinct rows. */
@media (max-width: 1100px) {
  html:not(.setx-ipad) body nav.navbar.bg-primary > .container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "brand toggle"
      "data data"
      "radios radios"
      "navigation navigation" !important;
    align-items: center !important;
    gap: .4rem .65rem !important;
    width: 100% !important;
    max-width: none !important;
    padding: .5rem .75rem .35rem !important;
    overflow: hidden !important;
  }

  html:not(.setx-ipad) body nav.navbar.bg-primary .navbar-brand {
    grid-area: brand !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:not(.setx-ipad) body nav.navbar.bg-primary .navbar-toggler {
    grid-area: toggle !important;
    justify-self: end !important;
    margin: 0 !important;
  }

  html:not(.setx-ipad) body nav.navbar.bg-primary #setx-data-status {
    grid-area: data !important;
    justify-self: center !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: .65rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: .1rem 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html:not(.setx-ipad) body nav.navbar.bg-primary #setx-data-status > div {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html:not(.setx-ipad) body nav.navbar.bg-primary .setx-radio-status-group {
    grid-area: radios !important;
    justify-self: center !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    gap: .45rem !important;
  }

  html:not(.setx-ipad) body nav.navbar.bg-primary #navbarNav {
    grid-area: navigation !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 520px) {
  html:not(.setx-ipad) body nav.navbar.bg-primary #setx-data-status {
    justify-content: flex-start !important;
  }
}


/* SETXMesh iPad header alignment v1
   Do not let the two-line brand occupy the live-data row. */
html.setx-ipad body nav.navbar.bg-primary > .container {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) auto !important;
  grid-template-areas:
    "brand radios"
    "data data"
    "navigation navigation" !important;
  align-items: center !important;
  gap: .38rem .8rem !important;
  width: 100% !important;
  max-width: none !important;
  padding: .45rem .8rem .3rem !important;
  overflow: hidden !important;
}

html.setx-ipad body nav.navbar.bg-primary .navbar-brand {
  grid-area: brand !important;
  align-self: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.setx-ipad body nav.navbar.bg-primary #setx-data-status {
  grid-area: data !important;
  justify-self: center !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: .08rem 0 !important;
  overflow: hidden !important;
}

html.setx-ipad body nav.navbar.bg-primary #setx-data-status > div {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html.setx-ipad body nav.navbar.bg-primary .setx-radio-status-group {
  grid-area: radios !important;
  justify-self: end !important;
  align-self: center !important;
  width: auto !important;
  margin: 0 !important;
}

html.setx-ipad body nav.navbar.bg-primary #navbarNav {
  grid-area: navigation !important;
  width: 100% !important;
  margin: 0 !important;
}


/* SETXMesh normalized data status row v1 */
html body nav.navbar.bg-primary #setx-data-status {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: .8rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body nav.navbar.bg-primary #setx-data-status > .setx-data-site {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1 !important;
  vertical-align: top !important;
}

html body nav.navbar.bg-primary .setx-data-label {
  display: block !important;
  min-height: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #b9d8e9 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  line-height: 10px !important;
  text-align: center !important;
}

html body nav.navbar.bg-primary .setx-data-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid #3d2f66 !important;
  border-radius: 7px !important;
  background: #140a28 !important;
  color: #00ff66 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 14px !important;
  vertical-align: top !important;
}

html body nav.navbar.bg-primary .setx-data-dot {
  display: inline-block !important;
  flex: 0 0 8px !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #777;
}


/* SETXMesh iPad responsive layout v2 */
html.setx-ipad body nav.navbar.bg-primary > .container {
  grid-template-columns: minmax(180px, 1fr) auto !important;
  grid-template-areas:
    "brand radios"
    "data data"
    "navigation navigation" !important;
  overflow: visible !important;
}

html.setx-ipad body nav.navbar.bg-primary #navbarNav {
  min-width: 0 !important;
  overflow: visible !important;
}

html.setx-ipad body nav.navbar.bg-primary #navbarNav .navbar-nav {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  align-items: stretch !important;
  gap: 2px 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html.setx-ipad body nav.navbar.bg-primary #navbarNav .nav-item,
html.setx-ipad body nav.navbar.bg-primary #navbarNav .nav-link {
  min-width: 0 !important;
  width: 100% !important;
}

html.setx-ipad body nav.navbar.bg-primary #navbarNav .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .3rem !important;
  padding: .45rem .35rem !important;
  font-size: .82rem !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: normal !important;
}

html body .table-container {
  top: var(--setx-navbar-height, 56px) !important;
}

html.setx-ipad body #packetsTable.modern-table-container {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

html.setx-ipad body #packetsTable .modern-table {
  min-width: 980px !important;
}

@media (max-width: 900px) {
  html.setx-ipad body nav.navbar.bg-primary > .container {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "brand"
      "data"
      "radios"
      "navigation" !important;
    gap: .35rem !important;
  }

  html.setx-ipad body nav.navbar.bg-primary .navbar-brand,
  html.setx-ipad body nav.navbar.bg-primary .setx-radio-status-group {
    justify-self: center !important;
  }

  html.setx-ipad body nav.navbar.bg-primary #setx-data-status {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-bottom: 3px !important;
  }

  html.setx-ipad body nav.navbar.bg-primary #navbarNav .navbar-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html.setx-ipad body #packetsTable .modern-table {
    min-width: 900px !important;
  }
}

/* SETXMesh compact tablet header v3 */
@media (min-width: 768px) and (max-width: 1194px) {
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary { position: relative !important; padding: 0 !important; }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary > .container {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    grid-template-areas: "brand brand toggle" "data radios radios" !important;
    align-items: center !important; gap: .22rem .55rem !important;
    width: 100% !important; max-width: none !important;
    padding: .35rem .65rem .3rem !important; overflow: visible !important;
  }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary .navbar-brand {
    grid-area: brand !important; justify-self: start !important; align-self: center !important;
    margin: 0 !important; font-size: 1rem !important; line-height: 1.1 !important; white-space: nowrap !important;
  }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary .navbar-toggler {
    display: block !important; grid-area: toggle !important; justify-self: end !important;
    margin: 0 !important; padding: .25rem .45rem !important;
  }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary #setx-data-status {
    grid-area: data !important; justify-self: start !important; width: 100% !important;
    max-width: 100% !important; min-height: 0 !important; margin: 0 !important;
    padding: 0 !important; gap: .55rem !important; overflow-x: auto !important; overflow-y: hidden !important;
  }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary .setx-data-label {
    font-size: 8px !important; line-height: 9px !important; min-height: 9px !important;
  }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary .setx-data-pill {
    min-height: 22px !important; padding: 3px 6px !important; font-size: 9px !important; line-height: 12px !important;
  }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary .setx-radio-status-group {
    grid-area: radios !important; justify-self: end !important; display: flex !important;
    flex-wrap: nowrap !important; justify-content: flex-end !important; align-items: center !important;
    gap: .45rem !important; width: 100% !important; max-width: 100% !important;
    margin: 0 !important; overflow-x: auto !important; overflow-y: hidden !important;
  }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary .setx-radio-status-group > div { flex: 0 0 auto !important; }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary .setx-admin-gateway {
    font-size: .62rem !important; padding: 2px 5px !important; margin: 0 !important;
  }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary #navbarNav {
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    z-index: 1100 !important; width: 100% !important; max-height: 62vh !important;
    margin: 0 !important; padding: .45rem .65rem .65rem !important; overflow-y: auto !important;
    background: #140f28 !important; border-top: 1px solid #3d2f66 !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .45) !important;
  }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary #navbarNav.collapse:not(.show) { display: none !important; }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary #navbarNav.collapse.show,
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary #navbarNav.collapsing { display: block !important; }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary #navbarNav .navbar-nav {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .25rem !important; width: 100% !important; margin: 0 !important;
  }
  html:is(.setx-ipad, :not(.setx-ipad)) body nav.navbar.bg-primary #navbarNav .nav-link {
    justify-content: flex-start !important; padding: .48rem .55rem !important;
    font-size: .82rem !important; text-align: left !important;
  }
}


/* SETXMesh iPad packet column slider v1 */
@media (min-width: 768px) and (max-width: 1194px) {
  html:is(.setx-ipad, :not(.setx-ipad)) body .table-container {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  html:is(.setx-ipad, :not(.setx-ipad)) body .table-main,
  html:is(.setx-ipad, :not(.setx-ipad)) body .table-content {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:is(.setx-ipad, :not(.setx-ipad)) body #packetsTable.modern-table-container,
  html:is(.setx-ipad, :not(.setx-ipad)) body #packetsTable > .modern-table-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html:is(.setx-ipad, :not(.setx-ipad)) body #packetsTable .table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable !important;
  }

  html:is(.setx-ipad, :not(.setx-ipad)) body .packet-column-slider {
    display: flex !important;
    flex: 0 0 30px !important;
    align-items: center !important;
    gap: .6rem !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 3px 10px !important;
    border-top: 1px solid #3d2f66 !important;
    border-bottom: 1px solid #3d2f66 !important;
    background: #140a28 !important;
    color: #b9d8e9 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
  }

  html:is(.setx-ipad, :not(.setx-ipad)) body .packet-column-slider input[type="range"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 22px !important;
    margin: 0 !important;
    accent-color: #a78bfa !important;
  }
}

@media (max-width: 767px), (min-width: 1195px) {
  html body .packet-column-slider { display: none !important; }
}


/* ==========================================================================
   SETXMesh theme v2 - a real LIGHT theme next to the existing DARK one.
   Loaded AFTER setxmesh-makeover.css (whose dark colours stay exactly as they were).
   Everything below only applies when the page is in light mode (data-bs-theme="light"),
   except the two small variable fixes at the top that make both themes consistent.
   ========================================================================== */

/* --- both themes: give Bootstrap's "-rgb" variables the matching values, so overlays
       that use rgba(var(--bs-body-bg-rgb), .8) read correctly in either theme ------------ */
html[data-bs-theme="dark"] {
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color-rgb: 243, 248, 255;
  --bs-secondary-color-rgb: 179, 201, 221;
}

/* --- LIGHT palette ------------------------------------------------------------------- */
html[data-bs-theme="light"] {
  color-scheme: light;
  --sx-page:        #eef3f8;
  --sx-surface:     #ffffff;
  --sx-surface-2:   #e6eff7;
  --sx-border:      #c5d6e5;
  --sx-border-strong: #9db6c9;
  --sx-text:        #10263a;
  --sx-heading:     #0a1a2b;
  --sx-muted:       #4a6378;
  --sx-link:        #0a6f82;
  --sx-link-hover:  #6d28d9;
  --sx-cyan:        #19b8d4;
  --sx-lime:        #8b5cf6;
  --sx-purple:      #8f6fe0;

  --setx-bg: #eef3f8;
  --setx-surface: #ffffff;
  --setx-surface-2: #e6eff7;
  --setx-border: #c5d6e5;
  --setx-text: #10263a;
  --setx-muted: #4a6378;

  --bs-body-bg: #eef3f8;
  --bs-body-bg-rgb: 238, 243, 248;
  --bs-body-color: #10263a;
  --bs-body-color-rgb: 16, 38, 58;
  --bs-secondary-color: #4a6378;
  --bs-secondary-color-rgb: 74, 99, 120;
  --bs-border-color: #c5d6e5;
  --bs-link-color: #0a6f82;
  --bs-link-hover-color: #6d28d9;
  --bs-tertiary-bg: #e6eff7;
  --bs-emphasis-color: #0a1a2b;
}

html[data-bs-theme="light"] body {
  background:
    radial-gradient(circle at 92% -8%, rgba(25, 184, 212, .13), transparent 34rem),
    radial-gradient(circle at -8% 22%, rgba(139, 92, 246, .11), transparent 27rem),
    #eef3f8 !important;
  color: #10263a !important;
}

html[data-bs-theme="light"] body h1, html[data-bs-theme="light"] body h2,
html[data-bs-theme="light"] body h3, html[data-bs-theme="light"] body h4,
html[data-bs-theme="light"] body h5, html[data-bs-theme="light"] body h6,
html[data-bs-theme="light"] body .card-title {
  color: #0a1a2b !important;
}

html[data-bs-theme="light"] body .text-muted, html[data-bs-theme="light"] body small.text-muted,
html[data-bs-theme="light"] body .form-text, html[data-bs-theme="light"] body .text-secondary {
  color: #4a6378 !important;
}

html[data-bs-theme="light"] body a:not(.btn):not(.nav-link) {
  color: #0a6f82;
  text-decoration-color: rgba(10, 111, 130, .4);
}
html[data-bs-theme="light"] body a:not(.btn):not(.nav-link):hover { color: #6d28d9; }
html[data-bs-theme="light"] body :focus-visible { outline: 2px solid #0e8aa0 !important; }
html[data-bs-theme="light"] ::selection { background: #a78bfa; color: #081625; }

/* Header stays the dark branded banner in both themes, so it needs nothing here. */

/* Panels */
html[data-bs-theme="light"] body .card,
html[data-bs-theme="light"] body .modal-content,
html[data-bs-theme="light"] body .offcanvas {
  background: linear-gradient(145deg, #ffffff, #f5f9fc) !important;
  color: #10263a !important;
  border: 1px solid #c5d6e5 !important;
  box-shadow: 0 6px 18px rgba(16, 38, 58, .09) !important;
}
html[data-bs-theme="light"] body .card { border-top: 2px solid #19b8d4 !important; }
html[data-bs-theme="light"] body .card-header,
html[data-bs-theme="light"] body .modal-header,
html[data-bs-theme="light"] body .modal-footer {
  background: #e6eff7 !important;
  color: #0a1a2b !important;
  border-color: #c5d6e5 !important;
}
html[data-bs-theme="light"] body .card:nth-of-type(3n + 1) { border-top-color: #8b5cf6 !important; }
html[data-bs-theme="light"] body .card:nth-of-type(3n + 2) { border-top-color: #19b8d4 !important; }
html[data-bs-theme="light"] body .card:nth-of-type(3n)     { border-top-color: #8f6fe0 !important; }

/* Tables */
html[data-bs-theme="light"] body .table {
  --bs-table-color: #10263a;
  --bs-table-bg: transparent;
  --bs-table-border-color: #cfdce8;
  --bs-table-striped-color: #10263a;
  --bs-table-striped-bg: rgba(14, 138, 160, .06);
  --bs-table-hover-color: #06121f;
  --bs-table-hover-bg: rgba(139, 92, 246, .16);
  color: #10263a !important;
}
html[data-bs-theme="light"] body .table thead th {
  background: #dfeaf4 !important;
  color: #0a2a3f !important;
  border-bottom: 2px solid #19b8d4 !important;
}
html[data-bs-theme="light"] body .table tbody td {
  color: #12293d;
  border-color: #cfdce8 !important;
}
html[data-bs-theme="light"] body .table tbody tr:hover td {
  background: rgba(139, 92, 246, .16) !important;
}

/* Forms */
html[data-bs-theme="light"] body .form-control,
html[data-bs-theme="light"] body .form-select,
html[data-bs-theme="light"] body .input-group-text,
html[data-bs-theme="light"] body textarea,
html[data-bs-theme="light"] body select {
  background-color: #ffffff !important;
  border: 1px solid #9db6c9 !important;
  color: #10263a !important;
}
html[data-bs-theme="light"] body .form-control::placeholder,
html[data-bs-theme="light"] body textarea::placeholder { color: #5f7a8f !important; opacity: 1; }
html[data-bs-theme="light"] body .form-control:focus,
html[data-bs-theme="light"] body .form-select:focus,
html[data-bs-theme="light"] body textarea:focus {
  border-color: #0e8aa0 !important;
  box-shadow: 0 0 0 .2rem rgba(14, 138, 160, .2) !important;
}
html[data-bs-theme="light"] body .form-select option { background: #ffffff; color: #10263a; }
html[data-bs-theme="light"] body .form-check-input { background-color: #ffffff; border-color: #7d98ac; }
html[data-bs-theme="light"] body .form-check-input:checked { background-color: #8b5cf6; border-color: #7c3aed; }
html[data-bs-theme="light"] body .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(14, 138, 160, .2); }

/* Buttons: lime primary keeps the brand; the rest get light-theme colours */
html[data-bs-theme="light"] body .btn-primary,
html[data-bs-theme="light"] body .btn-success { color: #081625 !important; background: #a78bfa !important; border-color: #7c3aed !important; }
html[data-bs-theme="light"] body .btn-primary:hover,
html[data-bs-theme="light"] body .btn-success:hover { background: #a78bfa !important; border-color: #7c3aed !important; }
html[data-bs-theme="light"] body .btn-outline-primary { color: #0a6f82 !important; border-color: #0a6f82 !important; }
html[data-bs-theme="light"] body .btn-outline-primary:hover { color: #ffffff !important; background: #0a6f82 !important; }
html[data-bs-theme="light"] body .btn-secondary { color: #10263a !important; background: #dfeaf4 !important; border-color: #b5c9d9 !important; }
html[data-bs-theme="light"] body .btn-outline-secondary { color: #3d566b; border-color: #8fa8bb; }
html[data-bs-theme="light"] body .btn-outline-secondary:hover { color: #10263a; background: #dfeaf4; }
html[data-bs-theme="light"] body .btn-outline-light { color: #10263a; border-color: #6f8aa0; }
html[data-bs-theme="light"] body .btn-outline-light:hover { color: #10263a; background: #dfeaf4; border-color: #6f8aa0; }
/* ...but on the dark header those two buttons must stay light */
html[data-bs-theme="light"] body .navbar .btn-outline-light { color: #ffffff; border-color: rgba(255, 255, 255, .55); }
html[data-bs-theme="light"] body .navbar .btn-outline-light:hover { color: #081625; background: #ffffff; }

/* Menus, tabs, paging */
html[data-bs-theme="light"] body .dropdown-menu { background: #ffffff !important; border: 1px solid #9db6c9 !important; box-shadow: 0 8px 22px rgba(16, 38, 58, .16); }
html[data-bs-theme="light"] body .dropdown-item { color: #10263a !important; }
html[data-bs-theme="light"] body .dropdown-item:hover,
html[data-bs-theme="light"] body .dropdown-item:focus { background: #e3f0f8 !important; color: #0a6f82 !important; }
html[data-bs-theme="light"] body .pagination .page-link,
html[data-bs-theme="light"] body .nav-tabs .nav-link { color: #2b4358; background: #ffffff; border-color: #c5d6e5; }
html[data-bs-theme="light"] body .pagination .active .page-link,
html[data-bs-theme="light"] body .nav-tabs .nav-link.active { color: #081625 !important; background: #a78bfa !important; border-color: #7c3aed !important; }
html[data-bs-theme="light"] body .pagination .page-link:hover,
html[data-bs-theme="light"] body .nav-tabs .nav-link:hover { color: #06323f; background: #cdeff6; }

/* Alerts */
html[data-bs-theme="light"] body .alert { color: #10263a; background: #e8f2f9; border-color: #b3cbdc; }
html[data-bs-theme="light"] body .alert-success { border-left: 4px solid #7c3aed; }
html[data-bs-theme="light"] body .alert-warning { border-left: 4px solid #e0a100; }
html[data-bs-theme="light"] body .alert-danger { border-left: 4px solid #d6364a; }

/* Code */
html[data-bs-theme="light"] body code, html[data-bs-theme="light"] body pre { color: #7a1f5c; }
html[data-bs-theme="light"] body pre { background: #eaf1f7; border: 1px solid #c5d6e5; }

/* Maps */
html[data-bs-theme="light"] body .leaflet-container { background: #dde7ee; }
html[data-bs-theme="light"] body .leaflet-popup-content-wrapper,
html[data-bs-theme="light"] body .leaflet-popup-tip { background: #ffffff; color: #10263a; }
html[data-bs-theme="light"] body .leaflet-control-zoom a { background: #ffffff; color: #10263a; border-color: #9db6c9; }
html[data-bs-theme="light"] body .leaflet-control-zoom a:hover { background: #e3f0f8; color: #0a6f82; }

/* --- polish found while reviewing every page in light mode ------------------------------------ */
/* Bootstrap's pale text colours (yellow/cyan) vanish on white: deepen them for light mode */
html[data-bs-theme="light"] body .text-info    { color: #0a7f93 !important; }
html[data-bs-theme="light"] body .text-warning { color: #9a6200 !important; }
html[data-bs-theme="light"] body .text-success { color: #157347 !important; }

/* Packets / Nodes / Traceroute tables: soft header like the other panels, not bright blue */
html[data-bs-theme="light"] body .modern-table thead th,
html[data-bs-theme="light"] body .modern-table thead th.sortable {
  background: #dfeaf4 !important;
  color: #0a2a3f !important;
  border-bottom: 2px solid #19b8d4 !important;
}
html[data-bs-theme="light"] body .modern-table thead th:hover { background: #cfe2f0 !important; }

/* The "columns" slider strip under the packets table */
html[data-bs-theme="light"] body .packet-column-slider {
  background: #e6eff7 !important;
  color: #0a2a3f !important;
  border-top: 1px solid #c5d6e5 !important;
}

/* Traceroute graph: the page colours links/nodes with a scale that is pale on white */
html[data-bs-theme="light"] body svg g.links line,
html[data-bs-theme="light"] body svg line.link { filter: brightness(.68) saturate(1.9); stroke-opacity: 1; }
html[data-bs-theme="light"] body svg g.nodes circle { filter: brightness(.82) saturate(1.5); }

/* ── SETX Mesh navbar brand: Meshtastic-green shimmer wordmark ── */
@keyframes setxBrandShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes setxBrandUnderline {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
@keyframes setxWaveProject {
  0%   { opacity: 0; transform: scale(.55); }
  35%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

html body a.navbar-brand.setx-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-bottom: 4px;
}

.setx-brand-icon {
  display: inline-flex;
  align-items: center;
  width: 22px;
  height: 22px;
  color: #67ea94;
  flex-shrink: 0;
}
.setx-wave-icon { width: 22px; height: 22px; display: block; overflow: visible; }
.setx-wave-icon .setx-wave-dot { fill: currentColor; }
.setx-wave-icon .setx-wave-arc { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.setx-wave-icon .setx-wave-arc {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: setxWaveProject 1.8s ease-out infinite;
}
.setx-wave-icon .setx-wave-arc-1 { animation-delay: 0s; }
.setx-wave-icon .setx-wave-arc-2 { animation-delay: .35s; }
.setx-wave-icon .setx-wave-arc-3 { animation-delay: .7s; }

html body .navbar-brand .setx-brand-text {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .03em;
  background: linear-gradient(90deg, #2f8f5b 0%, #67ea94 25%, #e9fff2 50%, #67ea94 75%, #2f8f5b 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: setxBrandShimmer 4.5s linear infinite;
}

.setx-brand-underline {
  position: absolute;
  left: 30px; right: 0; bottom: 0;
  height: 2px;
  background: #1c3a2b;
  overflow: hidden;
  border-radius: 2px;
}
.setx-brand-flare {
  position: absolute;
  top: 0; bottom: 0;
  width: 55%;
  background: linear-gradient(90deg, transparent, #2f8f5b, #67ea94, transparent);
  animation: setxBrandUnderline 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .setx-brand-text,
  .setx-brand-flare,
  .setx-wave-icon .setx-wave-arc { animation: none !important; }
  .setx-brand-text { color: #67ea94 !important; -webkit-text-fill-color: #67ea94; }
}

/* SETXMesh compact navbar for normal desktop/laptop widths and up (1400px+).
   Below 1400px the nav already wraps onto its own row. At 1400px+ the brand
   + RF/DATA pills + GATEWAY STATUS pills + radio status + ~13 nav links (3
   of them external, with full text labels) were all fighting for one
   unwrapped row, forcing a horizontal scrollbar to reach "Tools" -- made
   worse at 2200px+ by a separate rule that actively enlarged the same
   elements (bigger root font, transform:scale on the status boxes). This
   block uses fixed px (not rem) so it stays compact regardless of root
   font-size, drops the redundant per-site text labels (the pills already
   carry the abbreviation + a dot, and every wrapper still has a full-text
   title tooltip), and makes the 3 external links (Discord/Facebook/SHK1)
   icon-only to free up the most space for the lowest-value items. */
@media (min-width: 1400px) {
  html body nav.navbar.bg-primary > .container {
    gap: 4px !important;
  }

  html body nav.navbar.bg-primary #navbarNav .navbar-nav {
    gap: 0 !important;
  }

  html body nav.navbar.bg-primary #navbarNav .nav-link {
    padding: 8px 10px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }

  html body nav.navbar.bg-primary #navbarNav .nav-link i {
    font-size: 15px !important;
    margin-right: 2px !important;
  }

  html body nav.navbar.bg-primary #navbarNav .nav-link.nav-link-ext {
    padding: 8px 8px !important;
  }

  html body nav.navbar.bg-primary #navbarNav .nav-link-ext .setx-nav-label {
    display: none !important;
  }

  html body nav.navbar.bg-primary .dropdown-menu {
    font-size: 15px !important;
  }

  html body nav.navbar.bg-primary #setx-data-status {
    gap: 6px !important;
    padding: 2px 8px 4px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  html body nav.navbar.bg-primary .setx-gw-label {
    display: none !important;
  }

  html body nav.navbar.bg-primary .setx-data-pill {
    padding: 3px 6px !important;
    font-size: 9px !important;
    min-height: 20px !important;
  }

  html body nav.navbar.bg-primary .setx-radio-status-group {
    gap: 6px !important;
    margin-left: 10px !important;
  }

  html body nav.navbar.bg-primary .setx-radio-status-group > div[style*="flex-direction:column"] {
    padding: 3px 8px 4px !important;
  }

  html body nav.navbar.bg-primary .setx-admin-gateway {
    font-size: 10px !important;
    padding: 2px 5px !important;
    margin-right: 0 !important;
  }

  html body nav.navbar.bg-primary .setx-header-controls .btn {
    padding: 3px 7px !important;
    font-size: 12px !important;
  }
}

/* SETXMesh: GATEWAY STATUS moved out of .setx-radio-status-group into a new
   .setx-status-stack wrapper shared with RF/DATA, so the two boxes can stack
   vertically instead of sitting side by side (saves a lot of horizontal
   room). display:contents keeps every narrower-width rule working exactly
   as before (those rules target #setx-data-status directly, which still
   behaves as a direct flex/grid child of the navbar container); only at
   1400px+ do we actually turn the wrapper into a real flex column. The
   grid-area rule is a safe no-op outside the three tablet grid layouts that
   use named areas -- there it just groups the gateway box with the existing
   "radios" cell instead of leaving it unplaced. */
.setx-status-stack { display: contents; }

.setx-gateway-box { grid-area: radios !important; }

@media (min-width: 1400px) {
  html body nav.navbar.bg-primary .setx-status-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }

  html body nav.navbar.bg-primary .setx-gateway-box {
    padding: 3px 10px 4px !important;
  }
}

@media (max-width: 1399.98px) {
  html:not(.setx-ipad) body nav.navbar.bg-primary .setx-gateway-box {
    order: 4 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 4px 0 !important;
  }
}