/* Rotating Proxy dashboard — overrides on top of Bootstrap 5.3 dark */

html, body { height: 100%; min-height: 100%; }
body { background: #0f1319; color: #e0e6ed; margin: 0; }

/* ---------- Sidebar layout ---------- */
/* On lg+ screens the sidebar is a fixed-position rail always filling 100vh,
   and the main content is offset by the sidebar's width. This guarantees
   the sidebar never "hangs" on tall pages and looks identical across routes. */
@media (min-width: 992px) {
  #sidebar {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    overflow-y: auto;
    z-index: 1040;
  }
  .main-content {
    margin-left: 260px;
    min-height: 100vh;
  }
}
@media (max-width: 991.98px) {
  /* Below lg the sidebar behaves as a Bootstrap offcanvas drawer.
     It needs a width when it slides in. */
  #sidebar {
    width: 280px !important;
    max-width: 85vw;
  }
  .main-content {
    min-height: calc(100vh - 56px);
  }
}

aside#sidebar {
  background: #161b22 !important;
}
aside#sidebar .nav-link {
  color: #b3bac4;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
aside#sidebar .nav-link:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}
aside#sidebar .nav-link.active {
  background: #2563eb;
  color: #fff;
}
aside#sidebar .nav-link.disabled {
  opacity: 0.5;
}

/* ---------- Cards ---------- */
.card {
  background: #161b22;
  border: 1px solid #2a2f36;
  border-radius: 12px;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid #2a2f36;
}

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: #d4dae3;
  --bs-table-hover-bg: rgba(255,255,255,0.03);
  --bs-table-hover-color: #fff;
}
.table thead th {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8b94a4;
  border-bottom: 1px solid #2a2f36;
  white-space: nowrap;
}

/* Smoother horizontal scroll for mobile + a visible scrollbar hint */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-thumb {
  background: #2a2f36;
  border-radius: 3px;
}
.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- Stat cards ---------- */
.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b94a4;
}
.stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}
.stat-sub {
  font-size: 0.8rem;
  color: #8b94a4;
}

/* ---------- Mono ---------- */
.font-monospace, .font-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Log stream ---------- */
pre#log {
  background: #0a0d12;
  color: #cdd9e5;
  border-radius: 8px;
  border: 1px solid #2a2f36;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 576px) {
  .stat-value { font-size: 1.4rem; }
  .main-content { padding: 0.75rem !important; }
  .table { font-size: 0.85rem; }
}

/* Prevent long IPs / errors from breaking layout */
.text-wrap-any { word-break: break-word; overflow-wrap: anywhere; }

/* ---------- Badges ---------- */
.badge { font-weight: 500; letter-spacing: 0.02em; }

/* ---------- Dot indicators ---------- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot.ok  { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.6); }
.dot.warn{ background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.6); }
.dot.off { background: #6b7280; }

/* ---------- Form switches — green when on ---------- */
.form-check-input:checked {
  background-color: #22c55e !important;
  border-color: #22c55e !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(34, 197, 94, 0.25);
  border-color: #22c55e;
}
.form-switch .form-check-input {
  cursor: pointer;
  width: 2.25em;
  height: 1.25em;
}

/* Larger tap target on small screens */
@media (max-width: 576px) {
  .form-switch .form-check-input {
    width: 2.5em;
    height: 1.4em;
  }
}