/* =========================================================
   NAVBAR-ONLY OVERRIDES (Header + Sidebar)
   ========================================================= */

/* Tokens */
:root {
  --primary: #0f65ef;

  --text: #0b1220;
  --nav-bg: #111827;          /* dark slate sidebar */
  --nav-text: #e5e7eb;
  --nav-text-muted: #9ca3af;
  --nav-hover: rgba(255,255,255,.06);
  --nav-active-bg: rgba(255,255,255,.08);
  --nav-active-bar: #60a5fa;

  --surface: #ffffff;         /* header background */
  --line: #e7e9ee;            /* header bottom border */

  --radius-item: 8px;
}

/* Optional dark-mode token tweaks (navbar only) */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #e6eaf2;
    --surface: #0f1629;
    --line: rgba(255,255,255,.10);
    --nav-bg: #0b1323;
    --nav-text: #e5e7eb;
    --nav-text-muted: #9aa4bf;
    --nav-hover: rgba(255,255,255,.06);
    --nav-active-bg: rgba(255,255,255,.10);
  }
}

/* ================= Header (flat, bright) ================= */
#page-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--surface);

}
#page-header .content-header { padding-top: .6rem; padding-bottom: .6rem; }
#page-header .content-header .fw-bold,
#page-header .content-header .fs-4 { color: var(--text); }
#page-header .btn, #page-header .dropdown-toggle { border-radius: 999px; }

/* ================= Sidebar (flat, dark) ================= */
#sidebar {
  width: 260px;
  background: var(--nav-bg);
  border-right: none; /* flat edge */
}

/* Nav list layout */
#sidebar .nav-main {
  padding: 12px;
  display: grid;
  gap: 8px;
}

/* Section headings */
#sidebar .nav-main-heading {
  margin: 8px 8px 4px;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nav-text-muted);
}

/* Items */
#sidebar .nav-main-item > a,
#sidebar .nav-main-link {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: var(--nav-text);
  border-radius: var(--radius-item);
  background: transparent;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
#sidebar .nav-main-item > a:hover,
#sidebar .nav-main-link:hover { background: var(--nav-hover); }

/* Icons */
#sidebar .nav-main-link .nav-main-link-icon,
#sidebar .nav-main-item > a .nav-main-link-icon {
  color: #cbd5e1;
  font-size: 1.05rem;
}

/* Active state: subtle pill + left bar */
#sidebar .nav-main-item.active > a,
#sidebar .nav-main-link.active {
  background: var(--nav-active-bg);
  color: #fff;
  font-weight: 600;
  position: relative;
}
#sidebar .nav-main-item.active > a::before,
#sidebar .nav-main-link.active::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: var(--nav-active-bar);
}

/* Submenu (indented) */
#sidebar .nav-main-submenu {
  margin-left: 10px;
  padding-left: 8px;
  border-left: 2px solid rgba(255,255,255,.08);
  display: grid;
  gap: 6px;
}
#sidebar .nav-main-submenu a {
  padding: 8px 10px;
  border-radius: var(--radius-item);
  color: var(--nav-text);
}
#sidebar .nav-main-submenu a:hover { background: var(--nav-hover); }

/* Scrollbar (subtle) */
#sidebar ::-webkit-scrollbar { width: 8px; }
#sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }

/* Smooth shift for main container if your layout moves it */
#page-container #main-container { transition: margin-left .2s ease; }

/* =========================================================
   DASHBOARD — restrained, modern, high-contrast
   Replace the previous dashboard CSS with this.
   ========================================================= */

/* Base canvas just for main content area */
#main-container .content {
  background: transparent; /* keep OneUI spacing; no banding */
}

/* ---------- Headings ---------- */
.content h1.h3.fw-bold { margin: .25rem 0 .75rem; letter-spacing:.2px; }
.content .text-muted { opacity: .85; }

/* ---------- Action tiles (3 quick links) ---------- */
.block-link-pop {
  background: #fff;

  box-shadow: 0 1px 0 rgba(2,6,23,.02);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.block-link-pop .block-content { padding: 1.1rem 1.2rem; }
.block-link-pop p.fs-4 { font-size: 1.02rem !important; margin: 0 0 .25rem; }
.block-link-pop p.fs-sm { margin: 0; color:#6b7280; }
.block-link-pop:hover {
  transform: translateY(-2px);
  border-color: rgba(15,101,239,.35);
  box-shadow: 0 8px 18px rgba(2,6,23,.08);
}
.row.mb-4 > [class*="col-"] > a.block-link-pop { display:block; height:100%; }

/* ---------- Announcement (compact, readable) ---------- */
.block.border-start.border-4.border-warning {
  border: 1px solid #f0d5b1 !important;   /* tighter */
  border-left: 4px solid #f59e0b !important;
  border-radius: 12px;
  overflow: hidden;
}
.block-header.bg-warning-light {
  background: #fff;
  border-bottom: 1px solid #f0d5b1;
  padding: .7rem 1rem;
}
.block-title.text-warning { color:#b45309 !important; font-weight:700; }
.block .btn.btn-warning {
  border-radius: 999px; border:none;
  background:#ef7e28; color:#fff;
  padding: .425rem .8rem;
}
.block .btn.btn-warning:hover { background:#cf6617; }

/* ---------- Cards / Blocks general ---------- */
.block, .block.block-rounded {
  background: #fff;
  box-shadow: 0 1px 0 rgba(2,6,23,.02);
}
.block-header-default {
  background: #fff;
  border-bottom: 1px solid #e7e9ee;
}
.block .block-title { font-weight:700; letter-spacing:.15px; }

/* ---------- Tables (calm, clear) ---------- */

.table thead th:first-child { border-top-left-radius:14px; }
.table thead th:last-child  { border-top-right-radius:14px; }

.table tbody tr:last-child td:first-child { border-bottom-left-radius:14px; }
.table tbody tr:last-child td:last-child  { border-bottom-right-radius:14px; }

/* Status chip */


/* In-row primary action as a chip */
.table td .btn {
  border-radius:999px;
  padding:.35rem .8rem;
  line-height:1;
}

/* ---------- Minor utilities ---------- */
.truncate { max-width:360px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tnum { text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- Dark mode guardrails (use your existing nav tokens) ---------- */
/* Hero */
.bg-body-light.py-4 {
  background: #f6f8fb !important;
  border-bottom: 1px solid #e7e9ee;
}
.breadcrumb.breadcrumb-alt .breadcrumb-item {
  color: #667085;
  text-decoration: none;
}
.breadcrumb.breadcrumb-alt .breadcrumb-item.active {
  color: #0b1220;
  font-weight: 600;
}

/* Small status chips in hero */
.badge.bg-danger-light.text-danger,
.badge.bg-success-light.text-success {
  border-radius: 999px;
  padding: .38rem .7rem;
  font-weight: 600;
  border: 1px solid #e7e9ee;
  background: #fff;
}

/* Info cards */
.row.g-4 .block.block-rounded {
  border: 1px solid #e7e9ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(2,6,23,.02);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.row.g-4 .block.block-rounded:hover {
  transform: translateY(-2px);
  border-color: rgba(15,101,239,.28);
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
}
.row.g-4 .block.block-rounded .fs-3.fw-bold { letter-spacing:.1px; }
.row.g-4 .block.block-rounded .text-muted { color:#667085 !important; }
.row.g-4 .block.block-rounded .fa { 
  opacity:.9;
  background: rgba(15,101,239,.08);
  color:#0f65ef;
  width: 40px; height: 40px; border-radius: 10px;
  display:grid; place-items:center;
}

/* Block headers */
.block.block-rounded { background:#fff; border:1px solid #e7e9ee; border-radius:14px; }
.block-header.block-header-default {
  background:#fff;
  border-bottom:1px solid #e7e9ee;
  padding:.85rem 1rem;
}
.block-title { font-weight:700; letter-spacing:.15px; }

/* Tabs: modern underline */
.nav.nav-tabs.nav-tabs-block {
  border-bottom:1px solid #e7e9ee;
  gap: 18px;
}
.nav.nav-tabs.nav-tabs-block .nav-link {
  border: none; background: transparent; color:#667085;
  padding:.8rem .25rem; font-weight:600; position:relative;
}
.nav.nav-tabs.nav-tabs-block .nav-link:hover,
.nav.nav-tabs.nav-tabs-block .nav-link.active { color:#0b1220; }
.nav.nav-tabs.nav-tabs-block .nav-link.active::after,
.nav.nav-tabs.nav-tabs-block .nav-link:hover::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:#0f65ef; border-radius:2px;
}

/* Chart surface */
#bandwidth-chart-container,
#pps-chart-container {
  height: 420px !important;           /* a bit shorter for balance */
}
.tab-content > .tab-pane {
  background:#fff;                /* header already has a border */
  padding: 12px;
}

/* Mobile spacing */
@media (max-width: 576px){
  .row.g-4 .block.block-rounded { padding: .75rem !important; }
}

.block,
.block.block-rounded,
.block .block,
.block .block.block-rounded {
  border: 0 !important;
  box-shadow: none !important;
}

/* OneUI sometimes draws hairlines with pseudo elements */
.block::before, .block::after,
.block-header::before, .block-header::after {
  display: none !important;
}

/* Block headers: remove that top/bottom hairline */
.block-header,
.block-header.block-header-default {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent; /* keep your dark surface showing through */
}

/* Remove the thin divider under the light hero bar */
.bg-body-light {
  border: 0 !important;
}

/* Tab panes: no framed box unless you explicitly opt in elsewhere */
.tab-content > .tab-pane {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Forms/buttons: avoid accidental focus outlines that look like borders */
.form-control,
.btn {
  box-shadow: none !important;
  outline: 0 !important;
}

/* If you ever want a card *with* a frame, opt-in with this helper */
.card-surface {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  border: 0 !important;
}