/* =============================================================
   MK-NGS Network Management — Custom UI/UX Enhancement Layer
   Senior Design Audit v2.0 | Mobile-first | Dark-mode ready
   ============================================================= */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --ngs-blue:          #435ebe;
  --ngs-blue-dark:     #2d3f85;
  --ngs-blue-soft:     rgba(67, 94, 190, 0.09);
  --ngs-blue-glow:     rgba(67, 94, 190, 0.35);
  --ngs-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ngs-fast:          150ms;
  --ngs-base:          260ms;
  --ngs-slow:          380ms;
  --ngs-shadow-xs:     0 1px 3px rgba(0,0,0,.07);
  --ngs-shadow-sm:     0 2px 8px rgba(0,0,0,.09);
  --ngs-shadow-md:     0 6px 20px rgba(0,0,0,.13);
  --ngs-shadow-lg:     0 12px 36px rgba(0,0,0,.18);
  --ngs-radius:        12px;
  --ngs-radius-sm:     8px;
  --ngs-radius-xs:     6px;
}

.theme-dark {
  --ngs-blue-soft:     rgba(67, 94, 190, 0.16);
  --ngs-shadow-xs:     0 1px 3px rgba(0,0,0,.25);
  --ngs-shadow-sm:     0 2px 8px rgba(0,0,0,.35);
  --ngs-shadow-md:     0 6px 20px rgba(0,0,0,.45);
  --ngs-shadow-lg:     0 12px 36px rgba(0,0,0,.55);
}

/* ── 2. GLOBAL BASE ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── 3. CUSTOM SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar               { width: 5px; height: 5px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: rgba(67,94,190,.28); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover   { background: rgba(67,94,190,.55); }
.theme-dark ::-webkit-scrollbar-thumb       { background: rgba(160,168,200,.25); }
.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(160,168,200,.5); }

/* ── 4. SMOOTH TRANSITIONS (targeted, not global `*`) ─────────── */
.card,
.btn,
.nav-link,
.form-control,
.form-select,
.sidebar-item .sidebar-link,
.sidebar-item > a,
a,
.badge,
.stats-icon,
.table tbody tr,
.page-link,
.dropdown-item,
input,
select,
textarea {
  transition:
    background-color var(--ngs-fast) var(--ngs-ease),
    border-color     var(--ngs-fast) var(--ngs-ease),
    color            var(--ngs-fast) var(--ngs-ease),
    box-shadow       var(--ngs-base) var(--ngs-ease),
    opacity          var(--ngs-fast) var(--ngs-ease),
    transform        var(--ngs-base) var(--ngs-ease) !important;
}

/* ── 5. CARDS ─────────────────────────────────────────────────── */
.card {
  border-radius: var(--ngs-radius) !important;
  border: 1px solid rgba(0,0,0,.055) !important;
  box-shadow: var(--ngs-shadow-xs);
  animation: ngs-fade-up .32s var(--ngs-ease) both;
}

.card:hover { box-shadow: var(--ngs-shadow-sm); }

.card-header {
  border-radius: var(--ngs-radius) var(--ngs-radius) 0 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.055) !important;
  padding: .9rem 1.25rem;
}

.card-title { font-size: .975rem; font-weight: 700; margin-bottom: 0; }

.theme-dark .card  { border-color: rgba(255,255,255,.065) !important; }
.theme-dark .card-header { border-bottom-color: rgba(255,255,255,.065) !important; }

/* Clickable / stats card lift */
.card.stats-card,
.stats-card-hover {
  cursor: default;
}
.card.stats-card:hover { transform: translateY(-3px); box-shadow: var(--ngs-shadow-md); }

/* ── 6. BUTTONS ───────────────────────────────────────────────── */
.btn {
  border-radius: var(--ngs-radius-sm) !important;
  font-weight: 600;
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
}

.btn:active { transform: scale(0.96) !important; }

/* Primary */
.btn-primary,
.btn-primary:focus {
  background: linear-gradient(135deg, #435ebe 0%, #5a72d1 100%);
  border-color: #435ebe;
  box-shadow: 0 2px 10px rgba(67,94,190,.35);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #3a51a9 0%, #4f66c1 100%);
  box-shadow: 0 4px 18px rgba(67,94,190,.5);
  transform: translateY(-1px);
}

/* Success */
.btn-success:hover  { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(25,135,84,.4); }
/* Danger */
.btn-danger:hover   { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(220,53,69,.4); }
/* Warning */
.btn-warning:hover  { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,193,7,.4); }
/* Outline variants */
.btn-outline-primary:hover,
.btn-outline-danger:hover { transform: translateY(-1px); }

/* Fix Bootstrap 4 btn-block deprecation */
.btn-block { display: block !important; width: 100% !important; }

/* Better icon buttons */
.btn.icon {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ngs-radius-sm) !important;
}

/* Extra-small buttons */
.btn-xs {
  font-size: .73rem;
  padding: .2rem .52rem;
  border-radius: var(--ngs-radius-xs) !important;
}

/* ── 7. FORMS ─────────────────────────────────────────────────── */
.form-control,
.form-select {
  border-radius: var(--ngs-radius-sm) !important;
  border-width: 1.5px;
  font-size: .875rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ngs-blue) !important;
  box-shadow: 0 0 0 3px var(--ngs-blue-soft) !important;
}

.form-group { margin-bottom: 1rem; }

.form-group > label,
.form-group label:first-child {
  font-size: .82rem;
  font-weight: 600;
  color: #607080;
  margin-bottom: .35rem;
  display: block;
}

.theme-dark .form-group label { color: #9aa4be; }

/* ── 8. TABLES ────────────────────────────────────────────────── */
.table {
  font-size: .865rem;
}

/* Gradient header */
.table thead.table-primary th,
.table thead th.table-primary,
.table > thead.table-primary > tr > th,
table.table > thead > tr.table-primary > th,
thead.table-primary th {
  background: linear-gradient(135deg, #435ebe 0%, #5571d4 100%) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  padding: .75rem .85rem;
}

/* Make table-primary header work regardless of where thead is used */
.table .table-primary th {
  background: linear-gradient(135deg, #435ebe 0%, #5571d4 100%) !important;
  color: #fff !important;
}

.theme-dark thead.table-primary th,
.theme-dark .table thead.table-primary th,
.theme-dark .table-primary th {
  background: linear-gradient(135deg, #2d3f85 0%, #3a4fb0 100%) !important;
}

/* Row hover */
.table tbody tr:hover {
  background-color: var(--ngs-blue-soft) !important;
}

/* Striped rows */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(67,94,190,.03);
  --bs-table-accent-bg: rgba(67,94,190,.03);
}

.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,.025);
  --bs-table-accent-bg: rgba(255,255,255,.025);
}

/* Table action spacing */
.table td .btn + .btn { margin-left: 3px; }

/* Table cells vertical align */
.table tbody td { vertical-align: middle; }

/* ── 9. MOBILE TABLE (hide columns on small screens) ──────────── */
@media (max-width: 767.98px) {
  .col-hide-md { display: none !important; }
}

@media (max-width: 575.98px) {
  .col-hide-sm { display: none !important; }
  /* Classes to add to <th> and <td> for optional columns */
  .col-mobile-hide { display: none !important; }

  .table thead th {
    font-size: .7rem;
    padding: .55rem .5rem;
  }

  .table tbody td {
    font-size: .8rem;
    padding: .45rem .5rem;
  }
}

/* ── 10. FILTER TABS (voucher status tabs) ────────────────────── */
#voucherTabs.nav-tabs,
.ngs-tabs.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 2px solid rgba(67,94,190,.15);
  gap: 2px;
  padding-bottom: 0;
}

#voucherTabs.nav-tabs::-webkit-scrollbar,
.ngs-tabs.nav-tabs::-webkit-scrollbar { display: none; }

#voucherTabs .nav-link,
.ngs-tabs .nav-link {
  white-space: nowrap;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: .82rem;
  font-weight: 600;
  color: #607080;
  padding: .55rem .9rem;
  margin-bottom: -2px;
}

#voucherTabs .nav-link:hover,
.ngs-tabs .nav-link:hover {
  color: var(--ngs-blue);
  background: var(--ngs-blue-soft);
}

#voucherTabs .nav-link.active,
.ngs-tabs .nav-link.active {
  color: var(--ngs-blue) !important;
  background: var(--ngs-blue-soft) !important;
  border-bottom-color: var(--ngs-blue) !important;
  font-weight: 700;
}

.theme-dark #voucherTabs .nav-link,
.theme-dark .ngs-tabs .nav-link { color: #8a96b8; }

.theme-dark #voucherTabs .nav-link.active,
.theme-dark .ngs-tabs .nav-link.active {
  color: #7b97f5 !important;
  background: rgba(123,151,245,.14) !important;
  border-bottom-color: #7b97f5 !important;
}

/* ── 11. BADGES ───────────────────────────────────────────────── */
.badge {
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .32em .65em;
  border-radius: 6px !important;
}

/* Gradient badges */
.badge.bg-success   { background: linear-gradient(135deg, #2ecc71, #27ae60) !important; }
.badge.bg-danger    { background: linear-gradient(135deg, #e74c3c, #c0392b) !important; }
.badge.bg-warning   { background: linear-gradient(135deg, #f39c12, #d68910) !important; color: #fff !important; }
.badge.bg-info      { background: linear-gradient(135deg, #3498db, #2980b9) !important; }
.badge.bg-secondary { background: linear-gradient(135deg, #7f8c8d, #636e72) !important; }
.badge.bg-primary   { background: linear-gradient(135deg, #435ebe, #5571d4) !important; }

/* ── 12. PAGINATION ───────────────────────────────────────────── */
.pagination { flex-wrap: wrap; gap: 3px; }

.pagination .page-link {
  border-radius: var(--ngs-radius-sm) !important;
  border-width: 1.5px;
  font-size: .83rem;
  font-weight: 600;
  min-width: 36px;
  text-align: center;
  padding: .35rem .65rem;
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #435ebe, #5571d4);
  border-color: #435ebe;
  box-shadow: 0 2px 10px rgba(67,94,190,.4);
}

.pagination .page-link:hover {
  background: var(--ngs-blue-soft);
  border-color: var(--ngs-blue);
  color: var(--ngs-blue);
}

/* ── 13. STATS ICON CARDS (dashboard) ────────────────────────── */
.stats-icon {
  border-radius: 14px !important;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* ── 14. PAGE HEADING ─────────────────────────────────────────── */
.page-heading .page-title h3 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.page-heading .page-title p.text-subtitle {
  font-size: .85rem;
  margin-bottom: 0;
}

/* ── 15. NAVBAR ───────────────────────────────────────────────── */
header.mb-3 > .navbar,
#header > .navbar,
.navbar {
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* Dark mode toggle pill in navbar */
.dark-mode-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
  color: #607080;
  cursor: pointer;
  padding: .3rem .7rem;
  border-radius: 99px;
  background: rgba(0,0,0,.04);
  border: 1.5px solid rgba(0,0,0,.08);
  user-select: none;
}

.dark-mode-toggle:hover { background: var(--ngs-blue-soft); border-color: var(--ngs-blue); color: var(--ngs-blue); }
.theme-dark .dark-mode-toggle { color: #9aa4be; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.theme-dark .dark-mode-toggle:hover { color: #7b97f5; }

/* ── 16. MOBILE SIDEBAR OVERLAY ──────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 1040;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
}

@media (max-width: 767.98px) {
  /* Inject overlay via JS - see mk-ngs.js */
  .sidebar-open .sidebar-overlay { display: block !important; }
}

/* ── 17. DROPDOWN MENUS ───────────────────────────────────────── */
.dropdown-menu {
  border-radius: var(--ngs-radius) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: var(--ngs-shadow-md) !important;
  padding: .4rem;
  animation: ngs-fade-up .18s var(--ngs-ease) both;
}

.dropdown-item {
  border-radius: var(--ngs-radius-xs) !important;
  font-size: .875rem;
  font-weight: 500;
  padding: .5rem .8rem;
}

.dropdown-item:hover,
.dropdown-item:focus { background: var(--ngs-blue-soft); color: var(--ngs-blue); }

.theme-dark .dropdown-menu {
  border-color: rgba(255,255,255,.07) !important;
  background: #1f2034;
}

/* ── 18. SIDEBAR POLISH ───────────────────────────────────────── */
.sidebar-item .sidebar-link,
.sidebar-item > a {
  border-radius: var(--ngs-radius-sm) !important;
  margin: 1px 6px;
  padding-left: 1rem !important;
}

.sidebar-item.active > .sidebar-link,
.sidebar-item.active > a {
  border-left: 3px solid #fff !important;
  padding-left: calc(1rem - 3px) !important;
}

.submenu .submenu-item.active > a {
  color: var(--ngs-blue) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background: var(--ngs-blue-soft) !important;
  border-radius: var(--ngs-radius-sm) !important;
}

.sidebar-item .sidebar-link:hover,
.sidebar-item > a:hover {
  background: var(--ngs-blue-soft) !important;
  color: var(--ngs-blue) !important;
  transform: translateX(3px);
}

/* ── 19. CODE TAGS ────────────────────────────────────────────── */
code {
  background: rgba(67,94,190,.08);
  color: #435ebe;
  padding: .15em .45em;
  border-radius: 5px;
  font-size: .85em;
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
}

.theme-dark code { background: rgba(123,151,245,.14); color: #a0b9ff; }

/* ── 20. ACTIVE MONITOR RANK BADGES ──────────────────────────── */
.rank-badge {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 800;
  flex-shrink: 0;
}

.rank-1 {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color: #5a3e00;
  box-shadow: 0 2px 8px rgba(255,180,0,.45);
}
.rank-2 { background: linear-gradient(135deg, #d4d4d4, #b0b0b0); color: #2c2c2c; }
.rank-3 { background: linear-gradient(135deg, #cd7f32, #9a5f24); color: #fff; }
.rank-other { background: rgba(0,0,0,.06); color: #607080; }
.theme-dark .rank-other { background: rgba(255,255,255,.08); color: #9aa4be; }

/* ── 21. BANDWIDTH COLORS ─────────────────────────────────────── */
.bw-down { color: #2980b9; font-weight: 600; }
.bw-up   { color: #27ae60; font-weight: 600; }

/* ── 22. ALERTS & EMPTY STATE ─────────────────────────────────── */
.ngs-empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: #9aa4be;
}

.ngs-empty-state i { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.ngs-empty-state p { font-size: .9rem; }

/* ── 23. TOASTR OVERRIDE ──────────────────────────────────────── */
#toast-container > div {
  border-radius: var(--ngs-radius) !important;
  box-shadow: var(--ngs-shadow-lg) !important;
  opacity: .97 !important;
}

/* ── 24. DARK MODE REFINEMENTS ────────────────────────────────── */
.theme-dark .table-warning  { background-color: rgba(255,193,7,.07) !important; }
.theme-dark .table-light    { background-color: rgba(255,255,255,.03) !important; }
.theme-dark .table-secondary { background-color: rgba(108,117,125,.12) !important; }
.theme-dark .alert-warning  { background-color: rgba(255,193,7,.1); border-color: rgba(255,193,7,.2); color: #ffd454; }

/* ── 25. CARD ENTRANCE ANIMATION ─────────────────────────────── */
@keyframes ngs-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger for stat cards on dashboard */
.col-md-3 .card:nth-child(1),
.col-md-3:nth-child(1) .card { animation-delay: .04s; }
.col-md-3 .card:nth-child(2),
.col-md-3:nth-child(2) .card { animation-delay: .09s; }
.col-md-3 .card:nth-child(3),
.col-md-3:nth-child(3) .card { animation-delay: .14s; }
.col-md-3 .card:nth-child(4),
.col-md-3:nth-child(4) .card { animation-delay: .19s; }

/* Main content card */
.col-md-9 .card { animation-delay: .06s; }

/* ── 26. MOBILE RESPONSIVE ────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Full-width cards, reduce padding */
  .card-body { padding: 1rem; }
  .card-header { padding: .8rem 1rem; }

  /* Stack card headers on mobile */
  .card-header.d-flex { flex-wrap: wrap; gap: .5rem; }

  /* Page title smaller */
  .page-heading .page-title h3 { font-size: 1.2rem; }

  /* Filter form full-width fields */
  .filter-row .col-12 { margin-bottom: .5rem; }

  /* Button groups full-width on mobile */
  .row.g-2 .col-4 { padding: 0 3px; }

  /* Smaller icon buttons */
  .btn.icon { width: 28px; height: 28px; font-size: .8rem; }

  /* Compact badges */
  .badge { font-size: .67rem; }

  /* Action columns wrap */
  td[style*="white-space:nowrap"] { white-space: normal !important; }
  td .btn-xs + .btn-xs { margin-top: 2px; }
}

@media (max-width: 575.98px) {
  /* Table font smaller */
  .table { font-size: .8rem; }
  .table thead th { font-size: .68rem; padding: .55rem .45rem; }
  .table tbody td { padding: .45rem .45rem; }

  /* Filter form stacks */
  .card-body .row > [class*="col-sm"] { margin-bottom: .6rem; }

  /* Pagination compact */
  .pagination .page-link { min-width: 30px; padding: .3rem .5rem; font-size: .78rem; }
}

/* ── 27. PRINT STYLES ─────────────────────────────────────────── */
@media print {
  #sidebar, .navbar, .page-title .breadcrumb,
  .btn-sm, .btn-xs, .card-header a, .card-header button {
    display: none !important;
  }

  .card { box-shadow: none !important; border: 1px solid #ddd !important; animation: none !important; }
  body  { font-size: 12px; }
  .table thead th { background: #435ebe !important; -webkit-print-color-adjust: exact; }
}

/* ── 28. DARK MODE TOGGLE CHECKBOX STYLE ─────────────────────── */
input#toggle-dark.form-check-input {
  width: 2.6rem !important;
  height: 1.35rem !important;
  cursor: pointer;
  border-radius: 99px !important;
  transition: background-color var(--ngs-base) var(--ngs-ease) !important;
}

/* ── 29. ROUTER SELECT IN ACTIVE MONITOR ─────────────────────── */
#routerSelect {
  max-width: 200px;
  font-size: .855rem;
}

@media (max-width: 575.98px) {
  #routerSelect { max-width: 100%; }
}

/* ── 30. COUNTDOWN TIMER ──────────────────────────────────────── */
#countdown {
  display: inline-block;
  min-width: 20px;
  font-weight: 700;
  color: var(--ngs-blue);
}

/* ── 31. VOUCHER DETAIL IMPROVEMENTS ─────────────────────────── */
#dynamic-table1 code { font-size: .8rem; }

/* Hide secondary columns on mobile for voucher detail */
@media (max-width: 767.98px) {
  #dynamic-table1 .col-hide-md { display: none !important; }
}

@media (max-width: 575.98px) {
  #dynamic-table1 .col-hide-sm { display: none !important; }
  .ngs-action-cell { min-width: 80px; }
}

/* ── 32. SALES DOWNLOAD BUTTON GROUP ─────────────────────────── */
.voucher-actions .btn { font-size: .8rem; }

@media (max-width: 400px) {
  .voucher-actions { flex-direction: column !important; }
  .voucher-actions .col-4 { width: 100% !important; max-width: 100%; }
}

/* ── 33. ROUTER STATUS INDICATOR ─────────────────────────────── */
.router-status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.router-status-dot.online  { background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.2); }
.router-status-dot.offline { background: #e74c3c; box-shadow: 0 0 0 3px rgba(231,76,60,.2); }

/* ── 34. SCROLLABLE TABLE WRAPPER ────────────────────────────── */
.table-responsive {
  border-radius: 0 0 var(--ngs-radius) var(--ngs-radius);
  -webkit-overflow-scrolling: touch;
}

/* ── 35. SIDEBAR LOGO AREA ────────────────────────────────────── */
.sidebar-brand .logo-name,
.sidebar .sidebar-brand {
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ── 36. DARK MODE TOGGLE BUTTON ─────────────────────────────── */
.ngs-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(67,94,190,.25);
  background: transparent;
  color: var(--ngs-blue);
  cursor: pointer;
  transition: background var(--ngs-base) var(--ngs-ease),
              border-color var(--ngs-base) var(--ngs-ease),
              transform var(--ngs-base) var(--ngs-ease);
  font-size: 1rem;
  flex-shrink: 0;
}
.ngs-theme-btn:hover {
  background: var(--ngs-blue-soft);
  border-color: var(--ngs-blue);
  transform: rotate(22deg) scale(1.08);
}
.ngs-theme-btn:focus { outline: none; }

.theme-dark .ngs-theme-btn {
  border-color: rgba(160,185,255,.22);
  color: #a0b9ff;
}
.theme-dark .ngs-theme-btn:hover {
  background: rgba(67,94,190,.22);
  border-color: #a0b9ff;
}

/* ── 37. DARK MODE — CUSTOM COMPONENT OVERRIDES ──────────────── */

/* Bandwidth colors soften in dark */
.theme-dark .bw-down { color: #4fc3f7 !important; }
.theme-dark .bw-up   { color: #66bb6a !important; }

/* Table gradient header darkens */
.theme-dark table thead.table-primary,
.theme-dark table .table-primary thead,
.theme-dark .table thead.table-primary tr,
.theme-dark table > thead.table-primary > tr {
  background: linear-gradient(135deg, #263375 0%, #2f3f9b 100%) !important;
}

/* Rank badges: keep gold/silver/bronze but tone down glow */
.theme-dark .rank-1 {
  background: linear-gradient(135deg, #c9951a, #e6ac00);
  color: #2a1d00;
  box-shadow: 0 2px 8px rgba(220,165,0,.35);
}
.theme-dark .rank-2 { background: linear-gradient(135deg, #8a8a9e, #b0b0c8); color: #1a1a2e; }
.theme-dark .rank-3 { background: linear-gradient(135deg, #9a5f24, #c47a35); color: #fff; }

/* Router status dot in dark */
.theme-dark .router-status-dot.online  { box-shadow: 0 0 0 3px rgba(46,204,113,.25); }
.theme-dark .router-status-dot.offline { box-shadow: 0 0 0 3px rgba(231,76,60,.2); }

/* Code tags in dark */
.theme-dark code { background: rgba(123,151,245,.14) !important; color: #a0b9ff !important; }

/* Active submenu item in dark */
.theme-dark .submenu .submenu-item.active > a {
  background: rgba(67,94,190,.22) !important;
  color: #a0b9ff !important;
}

/* Empty state in dark */
.theme-dark .ngs-empty-state { color: #6c7a9c; }

/* Countdown timer in dark */
.theme-dark #countdown { color: #a0b9ff; }

/* Card headers in dark (gradient table headers) */
.theme-dark .card { border-color: rgba(255,255,255,.06) !important; }

/* Filter tabs in dark */
.theme-dark #voucherTabs .nav-link {
  color: #8fa3cc;
  border-color: rgba(255,255,255,.1);
}
.theme-dark #voucherTabs .nav-link.active {
  background: var(--ngs-blue) !important;
  color: #fff !important;
  border-color: var(--ngs-blue) !important;
}
.theme-dark #voucherTabs .nav-link:hover:not(.active) {
  background: rgba(67,94,190,.18);
  color: #c2d0f0;
}

/* Toastr in dark */
.theme-dark #toast-container .toast {
  box-shadow: 0 8px 24px rgba(0,0,0,.55) !important;
}

/* Form controls in dark — ensure consistent bg */
.theme-dark .form-control:focus,
.theme-dark .form-select:focus {
  box-shadow: 0 0 0 3px rgba(67,94,190,.3);
}

/* Sidebar scroll bar in dark */
.theme-dark #sidebar::-webkit-scrollbar-thumb { background: rgba(160,185,255,.18); }

/* Login card in dark mode */
.theme-dark .card.shadow {
  box-shadow: var(--ngs-shadow-lg) !important;
}