/*
 * Orbitz Network - Mikhmon Modern UI
 * Presentation-only overrides. No RouterOS, authentication, or billing logic changed.
 * Compatible with the project's existing jQuery / Font Awesome and PHP 7.4 stack.
 */
:root {
  --mm-accent: #1677ff;
  --mm-accent-strong: #0d5ed7;
  --mm-bg: #f3f6fb;
  --mm-surface: #ffffff;
  --mm-surface-alt: #f8fafc;
  --mm-text: #182230;
  --mm-muted: #667085;
  --mm-border: #e4e9f0;
  --mm-shadow: 0 8px 24px rgba(18, 38, 63, .06);
  --mm-radius: 14px;
}
/* Each theme controls the whole application palette, not only the logo/accent. */
body.theme-green {
  --mm-bg: #e4f6ec; --mm-surface: #cdeedb; --mm-surface-alt: #b7e4cb;
  --mm-text: #123c2b; --mm-muted: #3c7258; --mm-border: #a6d9bc;
  --mm-accent: #16a36a; --mm-accent-strong: #0e8555;
}
body.theme-pink {
  --mm-bg: #fff0f7; --mm-surface: #fbd9e9; --mm-surface-alt: #f7c5dd;
  --mm-text: #4b1932; --mm-muted: #8b4b6c; --mm-border: #efb5d0;
  --mm-accent: #d9468f; --mm-accent-strong: #b92f74;
}
body.theme-blue {
  --mm-bg: #e2efff; --mm-surface: #cce2ff; --mm-surface-alt: #b5d5ff;
  --mm-text: #102f55; --mm-muted: #42658d; --mm-border: #a8c9f2;
  --mm-accent: #1677ff; --mm-accent-strong: #0d5ed7;
}
body.theme-light {
  --mm-bg: #f0f3ff; --mm-surface: #e0e7ff; --mm-surface-alt: #d0dbff;
  --mm-text: #202b52; --mm-muted: #5d6995; --mm-border: #c3cff5;
  --mm-accent: #5267df; --mm-accent-strong: #394cc1;
}
body.theme-dark {
  --mm-bg: #101722;
  --mm-surface: #182231;
  --mm-surface-alt: #202c3d;
  --mm-text: #e7edf5;
  --mm-muted: #a4b0c0;
  --mm-border: #2e3b4d;
  --mm-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  --mm-accent: #60a5fa;
  --mm-accent-strong: #3b82f6;
}

html { scroll-behavior: smooth; }
body.mikhmon-modern {
  background: var(--mm-bg) !important;
  color: var(--mm-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.mikhmon-modern *, body.mikhmon-modern *::before, body.mikhmon-modern *::after { box-sizing: border-box; }
body.mikhmon-modern a { transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
body.mikhmon-modern .navbar {
  height: 62px !important;
  background: var(--mm-surface) !important;
  color: var(--mm-text) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mm-border) !important;
  box-shadow: 0 3px 16px rgba(16, 24, 40, .04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}
body.mikhmon-modern .navbar-left, body.mikhmon-modern .navbar-right { display: flex; align-items: center; min-width: 0; }
body.mikhmon-modern .navbar-left a, body.mikhmon-modern .navbar-right a {
  color: var(--mm-text) !important;
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px !important;
  border-radius: 10px;
  font-size: 14px;
}
body.mikhmon-modern #brand {
  color: var(--mm-accent-strong) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px;
  padding-left: 4px !important;
  padding-right: 18px !important;
}
body.mikhmon-modern #cpage { color: var(--mm-muted) !important; font-size: 13px !important; font-weight: 600; }
body.mikhmon-modern .navbar a:hover { background: var(--mm-surface-alt) !important; color: var(--mm-accent-strong) !important; }
body.mikhmon-modern .navbar-right { gap: 7px; }
body.mikhmon-modern .ses, body.mikhmon-modern .navbar select {
  float: none !important;
  height: 36px !important;
  padding: 0 30px 0 11px !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: 9px !important;
  background-color: var(--mm-surface-alt) !important;
  color: var(--mm-text) !important;
  font-size: 12px !important;
  max-width: 130px;
}
body.mikhmon-modern .sidenav {
  top: 62px !important;
  margin-top: 0 !important;
  padding: 14px 10px 22px;
  background: var(--mm-surface) !important;
  border: 0 !important;
  border-right: 1px solid var(--mm-border) !important;
  box-shadow: 4px 0 18px rgba(16, 24, 40, .025);
  scrollbar-width: thin;
}
body.mikhmon-modern .sidenav .menu, body.mikhmon-modern .sidenav .dropdown-btn {
  width: 100% !important;
  margin: 3px 0 !important;
  padding: 9px 10px !important;
  min-height: 40px;
  display: block;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--mm-muted) !important;
  font-size: 13px !important;
  font-weight: 550;
}
body.mikhmon-modern .sidenav .menu i, body.mikhmon-modern .sidenav .dropdown-btn i {
  display: inline-block;
  width: 25px;
  margin-right: 5px !important;
  padding: 0 !important;
  color: var(--mm-muted);
  font-size: 15px !important;
  text-align: center;
}
body.mikhmon-modern .sidenav .menu:hover, body.mikhmon-modern .sidenav .dropdown-btn:hover {
  background: var(--mm-surface-alt) !important;
  color: var(--mm-accent-strong) !important;
}
body.mikhmon-modern .sidenav .menu.active, body.mikhmon-modern .sidenav .dropdown-btn.active {
  background: color-mix(in srgb, var(--mm-accent) 11%, var(--mm-surface)) !important;
  color: var(--mm-accent-strong) !important;
  font-weight: 700 !important;
}
body.mikhmon-modern .sidenav .menu.active i, body.mikhmon-modern .sidenav .dropdown-btn.active i { color: var(--mm-accent-strong); }
body.mikhmon-modern .sidenav .dropdown-container { padding: 3px 0 5px 11px; }
body.mikhmon-modern .sidenav .dropdown-container a { width: 100% !important; font-size: 12px !important; }
body.mikhmon-modern .sidenav .spa { border-bottom: 1px solid var(--mm-border) !important; margin: 12px 4px !important; }
body.mikhmon-modern #MikhmonSession { color: var(--mm-text); font-size: 13px; font-weight: 750; overflow-wrap: anywhere; }
body.mikhmon-modern #main {
  margin-top: 78px !important;
  padding: 0 22px 28px;
  transition: margin-left .25s ease;
}
body.mikhmon-modern .main-container { max-width: 1600px; margin: 0 auto; padding: 0 !important; }
body.mikhmon-modern .row { margin-left: -8px; margin-right: -8px; }
body.mikhmon-modern [class*="col-"] { padding-left: 8px; padding-right: 8px; }
body.mikhmon-modern .card {
  background: var(--mm-surface) !important;
  color: var(--mm-text) !important;
  border: 1px solid var(--mm-border) !important;
  border-radius: var(--mm-radius) !important;
  box-shadow: var(--mm-shadow);
  overflow: hidden;
  margin-bottom: 16px;
}
body.mikhmon-modern .card-header {
  background: transparent !important;
  color: var(--mm-text) !important;
  border-bottom: 1px solid var(--mm-border) !important;
  padding: 15px 18px !important;
}
body.mikhmon-modern .card-header h3, body.mikhmon-modern .card-header h4 {
  margin: 0;
  color: var(--mm-text) !important;
  font-size: 15px;
  font-weight: 750;
}
body.mikhmon-modern .card-body { padding: 17px !important; }
body.mikhmon-modern .box {
  border-radius: 12px !important;
  border-color: var(--mm-border) !important;
  box-shadow: 0 3px 12px rgba(16, 24, 40, .035);
  overflow: hidden;
}
body.mikhmon-modern .box-bordered { border: 1px solid var(--mm-border) !important; }
body.mikhmon-modern .box-group { padding: 12px !important; }
body.mikhmon-modern .box-group-icon { color: var(--mm-accent-strong) !important; }
body.mikhmon-modern .box-group-area { color: var(--mm-text); }
body.mikhmon-modern .box h1 { font-size: clamp(22px, 2.5vw, 32px); font-weight: 800; letter-spacing: -.5px; }
body.mikhmon-modern .box a { text-decoration: none !important; }
body.mikhmon-modern .bg-blue, body.mikhmon-modern .bg-green, body.mikhmon-modern .bg-red, body.mikhmon-modern .bg-orange, body.mikhmon-modern .bg-purple {
  border-radius: 12px !important;
  box-shadow: 0 5px 15px rgba(16, 24, 40, .08);
}
body.mikhmon-modern table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  color: var(--mm-text) !important;
  background: var(--mm-surface) !important;
  border: 1px solid var(--mm-border);
  border-radius: 11px;
  overflow: hidden;
}
body.mikhmon-modern table th {
  background: var(--mm-surface-alt) !important;
  color: var(--mm-muted) !important;
  border-color: var(--mm-border) !important;
  padding: 11px 12px !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .045em;
  font-weight: 750;
}
body.mikhmon-modern table td {
  background: var(--mm-surface) !important;
  color: var(--mm-text) !important;
  border-color: var(--mm-border) !important;
  padding: 10px 12px !important;
  vertical-align: middle;
}
body.mikhmon-modern table tr:hover td { background: var(--mm-surface-alt) !important; }
body.mikhmon-modern input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body.mikhmon-modern select, body.mikhmon-modern textarea {
  max-width: 100%;
  border: 1px solid var(--mm-border) !important;
  border-radius: 9px !important;
  background: var(--mm-surface) !important;
  color: var(--mm-text) !important;
  min-height: 36px;
  padding: 7px 10px !important;
  outline: none;
  box-shadow: none !important;
}
body.mikhmon-modern input:focus, body.mikhmon-modern select:focus, body.mikhmon-modern textarea:focus {
  border-color: var(--mm-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mm-accent) 15%, transparent) !important;
}
body.mikhmon-modern .btn, body.mikhmon-modern button, body.mikhmon-modern input[type="submit"] {
  border-radius: 9px !important;
  font-weight: 650;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body.mikhmon-modern .btn:hover, body.mikhmon-modern button:hover, body.mikhmon-modern input[type="submit"]:hover {
  filter: brightness(.98);
  box-shadow: 0 4px 12px rgba(16, 24, 40, .10);
}
body.mikhmon-modern .btn:active, body.mikhmon-modern button:active { transform: translateY(1px); }
body.mikhmon-modern hr { border: 0; border-top: 1px solid var(--mm-border); }
body.mikhmon-modern .label, body.mikhmon-modern .badge { border-radius: 999px; padding: 4px 8px; font-weight: 700; }
body.mikhmon-modern #notify { border: 1px solid var(--mm-border) !important; border-radius: 12px !important; box-shadow: var(--mm-shadow); backdrop-filter: blur(12px); }
body.mikhmon-modern .modal-window, body.mikhmon-modern .modal-content { border-radius: 16px !important; box-shadow: 0 20px 55px rgba(0,0,0,.18); }
body.mikhmon-modern .modal-window header { border-radius: 16px 16px 0 0; }
body.mikhmon-modern .lds-dual-ring { margin-top: 10px; }
body.mikhmon-modern ::-webkit-scrollbar { width: 8px; height: 8px; }
body.mikhmon-modern ::-webkit-scrollbar-track { background: var(--mm-bg); border: 0; }
body.mikhmon-modern ::-webkit-scrollbar-thumb { background: #b8c2d0; border: 2px solid var(--mm-bg); border-radius: 999px; }
body.theme-dark.mikhmon-modern ::-webkit-scrollbar-thumb { background: #455468; border-color: var(--mm-bg); }

@media (max-width: 800px) {
  body.mikhmon-modern .navbar { padding: 0 8px; height: 58px !important; }
  body.mikhmon-modern .navbar-left a { padding: 7px 8px !important; }
  body.mikhmon-modern #brand { font-size: 15px !important; padding-right: 5px !important; }
  body.mikhmon-modern #cpage { display: none !important; }
  body.mikhmon-modern .navbar-right { gap: 3px; }
  body.mikhmon-modern .navbar-right .ses { max-width: 86px; padding: 0 4px !important; font-size: 11px !important; }
  body.mikhmon-modern #logout { font-size: 0 !important; padding: 8px !important; }
  body.mikhmon-modern #logout i { font-size: 16px; margin: 0 !important; }
  body.mikhmon-modern .sidenav { top: 58px !important; z-index: 20; max-width: 86vw; }
  body.mikhmon-modern #main { margin-top: 70px !important; padding: 0 10px 22px; }
  body.mikhmon-modern .card-header { padding: 12px 13px !important; }
  body.mikhmon-modern .card-body { padding: 12px !important; }
  body.mikhmon-modern table { display: block; overflow-x: auto; white-space: nowrap; }
  body.mikhmon-modern .row { margin-left: -5px; margin-right: -5px; }
  body.mikhmon-modern [class*="col-"] { padding-left: 5px; padding-right: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  body.mikhmon-modern *, body.mikhmon-modern *::before, body.mikhmon-modern *::after { transition: none !important; scroll-behavior: auto !important; }
}


/* Modern icon system (Lucide SVG) */
body.mikhmon-modern .mm-icon,
body.mikhmon-modern svg.lucide {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  stroke-width: 1.8;
  flex-shrink: 0;
  transition: color .15s ease, transform .15s ease, opacity .15s ease;
}
body.mikhmon-modern a .mm-icon,
body.mikhmon-modern button .mm-icon,
body.mikhmon-modern .btn .mm-icon { margin-right: .32em; }
body.mikhmon-modern .navbar .mm-icon,
body.mikhmon-modern .sidenav .mm-icon { width: 17px; height: 17px; }
body.mikhmon-modern .card-header .mm-icon,
body.mikhmon-modern h1 .mm-icon,
body.mikhmon-modern h2 .mm-icon,
body.mikhmon-modern h3 .mm-icon { width: 19px; height: 19px; margin-right: 5px; }
body.mikhmon-modern .mm-icon-spin { animation: mm-icon-rotate 1s linear infinite; }
body.mikhmon-modern a:hover .mm-icon,
body.mikhmon-modern button:hover .mm-icon,
body.mikhmon-modern .btn:hover .mm-icon { opacity: .92; }
@keyframes mm-icon-rotate { to { transform: rotate(360deg); } }

/* Stage 3: keep the selected navigation group open and prevent menu clipping. */
body.mikhmon-modern .sidenav { overflow-x: visible !important; overflow-y: auto; }
body.mikhmon-modern .sidenav .dropdown-container.menu-open { display: block; visibility: visible; overflow: visible !important; }
body.mikhmon-modern .sidenav .dropdown-btn.active + .dropdown-container { display: block; }
body.mikhmon-modern .sidenav .dropdown-container a.active { background: color-mix(in srgb, var(--mm-accent) 10%, var(--mm-surface)) !important; color: var(--mm-accent-strong) !important; font-weight: 700; border-radius: 8px; }
body.mikhmon-modern .dashboard-system-info { display: flex; align-items: stretch; flex-wrap: wrap; }
body.mikhmon-modern .dashboard-system-info > [class*="col-"] { display: flex; }
body.mikhmon-modern .dashboard-system-info .box { width: 100%; min-height: 100%; display: flex; align-items: center; }
body.mikhmon-modern .dashboard-system-info .box-group { display: flex; align-items: center; width: 100%; gap: 12px; }
body.mikhmon-modern .dashboard-system-info .box-group-area { min-width: 0; overflow-wrap: anywhere; }
body.mikhmon-modern .dashboard-income-log { width: 100%; display: flex; flex-direction: column; gap: 12px; }
body.mikhmon-modern .dashboard-income-log #r_4, body.mikhmon-modern .dashboard-income-log #r_3 { width: 100%; margin-left: 0; margin-right: 0; }
body.mikhmon-modern .dashboard-income-log #r_4 .box { width: 100%; }
body.mikhmon-modern .dashboard-income-log #r_3 .card { width: 100%; }
body.mikhmon-modern .monitor-script { min-width: 280px; min-height: 110px; font-family: Consolas, Monaco, monospace; font-size: 12px; white-space: pre; }
body.mikhmon-modern .netwatch-editor { background: var(--mm-surface-alt); border: 1px solid var(--mm-border); border-radius: 10px; padding: 14px; margin: 8px 0 14px; }
body.mikhmon-modern .netwatch-editor label { display: block; margin: 8px 0 5px; font-weight: 700; }
@media(max-width:800px){body.mikhmon-modern .dashboard-system-info .box-group{align-items:flex-start}.dashboard-income-log{gap:8px}}


/* Stage 4: compact dashboard side stack and consistent PPP traffic chart. */
body.mikhmon-modern .dashboard-system-info { margin-bottom: 14px; }
body.mikhmon-modern .dashboard-system-info .box { min-height: 72px; padding: 12px !important; }
body.mikhmon-modern .dashboard-system-info .box-group-icon { font-size: 24px; min-width: 28px; }
body.mikhmon-modern .dashboard-side-column { display: flex; flex-direction: column; gap: 10px; }
body.mikhmon-modern .dashboard-income-log { width: 100%; display: flex; flex-direction: column; gap: 10px; }
body.mikhmon-modern .dashboard-income-card .box { min-height: 78px; padding: 12px !important; margin-bottom: 0; }
body.mikhmon-modern .dashboard-income-card .box-group { align-items: flex-start; gap: 10px; }
body.mikhmon-modern .dashboard-income-card .box-group-icon { font-size: 22px; min-width: 24px; }
body.mikhmon-modern .dashboard-income-card .box-group-area { font-size: 12px; line-height: 1.6; min-width: 0; overflow-wrap: anywhere; }
body.mikhmon-modern .dashboard-log-card .card { margin-bottom: 0; }
body.mikhmon-modern .dashboard-log-card .card-header { padding: 11px 13px !important; }
body.mikhmon-modern .dashboard-log-card .card-header h3 { font-size: 14px; margin: 0; }
body.mikhmon-modern .dashboard-log-card .card-body { padding: 8px !important; }
body.mikhmon-modern .dashboard-log-card table { font-size: 11px !important; }
body.mikhmon-modern .dashboard-traffic-card { margin-top: 12px; }
body.mikhmon-modern #trafficMonitor { width: 100%; min-height: 290px; }
body.mikhmon-modern .dashboard-side-column .overflow { max-width: 100%; }
@media(max-width:800px) {
  body.mikhmon-modern .dashboard-side-column { margin-top: 10px; }
  body.mikhmon-modern .dashboard-income-card .box { min-height: 70px; }
  body.mikhmon-modern #trafficMonitor { min-height: 260px; }
}
@media(max-width:800px) {
  body.mikhmon-modern #reloadHome > .row > .col-8,
  body.mikhmon-modern #reloadHome > .row > .dashboard-side-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}


/* Stage 5: keep dashboard content in a true two-column grid and compact traffic chart. */
body.mikhmon-modern #reloadHome > .row { display: flex; flex-wrap: wrap; align-items: flex-start; }
body.mikhmon-modern #reloadHome > .row > .col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; min-width: 0; }
body.mikhmon-modern #reloadHome > .row > .dashboard-side-column { flex: 0 0 33.333333%; max-width: 33.333333%; min-width: 0; }
body.mikhmon-modern .dashboard-traffic-card { width: 100%; margin-top: 10px; }
body.mikhmon-modern .dashboard-traffic-card .card-body { padding: 8px 10px !important; }
body.mikhmon-modern #trafficMonitor { width: 100%; min-height: 250px; }
@media(max-width:800px) {
  body.mikhmon-modern #reloadHome > .row > .col-8,
  body.mikhmon-modern #reloadHome > .row > .dashboard-side-column { flex: 0 0 100%; max-width: 100%; width: 100%; }
}


/* Stage 8: centered mobile login, fully hidden collapsed sidebar, compact Netwatch table. */
body.mikhmon-modern .mm-login-box {
  width: min(520px, calc(100% - 32px));
  max-width: 520px;
  margin: clamp(22px, 6vh, 64px) auto 28px !important;
  padding: 0;
}
body.mikhmon-modern .mm-login-box > .card { width: 100%; margin: 0 auto; }
body.mikhmon-modern .mm-login-box .card-body { padding: clamp(16px, 4vw, 28px) !important; }
body.mikhmon-modern .mm-login-logo img { display: block; width: 120px; max-width: 38vw; height: auto; margin: 0 auto; }
body.mikhmon-modern .mm-login-form { width: 100%; max-width: 420px; margin: 0 auto; }
body.mikhmon-modern .mm-login-table { width: 100% !important; margin: 0 auto; table-layout: fixed; }
body.mikhmon-modern .mm-login-table td { padding: 8px !important; }
body.mikhmon-modern .mm-login-table input { width: 100% !important; }

/* The legacy navigation script leaves padding on a zero-width sidenav. Hide the
   collapsed panel completely so it cannot cover the left edge of any page. */
body.mikhmon-modern .sidenav { overflow-x: hidden !important; }
@media (max-width: 800px) {
  body.mikhmon-modern .sidenav[style*="width: 0"] {
    width: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }
  body.mikhmon-modern .mm-login-box {
    width: calc(100% - 28px);
    max-width: 480px;
    margin: 24px auto 22px !important;
  }
  body.mikhmon-modern .mm-login-box .card-header { padding: 13px 16px !important; }
  body.mikhmon-modern .mm-login-box .card-body { padding: 14px !important; }
  body.mikhmon-modern .mm-login-logo img { width: 108px; }
  body.mikhmon-modern .mm-login-table td { padding: 7px 4px !important; }
  body.mikhmon-modern .netwatch-table { display: table !important; width: 100% !important; min-width: 0 !important; table-layout: fixed; white-space: normal !important; }
  body.mikhmon-modern .netwatch-table th,
  body.mikhmon-modern .netwatch-table td { padding: 8px 7px !important; font-size: 11px !important; overflow-wrap: anywhere; }
  body.mikhmon-modern .netwatch-table th:nth-child(1), body.mikhmon-modern .netwatch-table td:nth-child(1) { width: 72px; }
  body.mikhmon-modern .netwatch-table th:nth-child(2), body.mikhmon-modern .netwatch-table td:nth-child(2) { width: 94px; }
  body.mikhmon-modern .netwatch-table th:nth-child(3), body.mikhmon-modern .netwatch-table td:nth-child(3) { width: 112px; }
  body.mikhmon-modern .netwatch-table th:nth-child(4), body.mikhmon-modern .netwatch-table td:nth-child(4) { width: 68px; }
  body.mikhmon-modern .netwatch-table th:nth-child(5), body.mikhmon-modern .netwatch-table td:nth-child(5) { width: 90px; }
  body.mikhmon-modern .netwatch-table th:nth-child(6), body.mikhmon-modern .netwatch-table td:nth-child(6) { width: 92px; }
  body.mikhmon-modern .netwatch-table .btn { padding: 5px 7px !important; font-size: 10px !important; }
  body.mikhmon-modern .netwatch-table td .label { display: inline-block; padding: 4px 6px; font-size: 10px; }
}


/* Stage 9: sidebar is always off-canvas by default; hamburger opens it as an overlay. */
body.mikhmon-modern .sidenav {
  position: fixed !important; top: 62px !important; left: 0 !important; bottom: 0 !important;
  width: 250px !important; max-width: 86vw !important; min-width: 0 !important;
  padding: 14px 10px 22px !important; margin: 0 !important;
  transform: translateX(-105%) !important; transition: transform .22s ease !important;
  z-index: 1005 !important; overflow-x: hidden !important; overflow-y: auto !important;
  border-right: 1px solid var(--mm-border) !important; box-shadow: 4px 0 22px rgba(0,0,0,.16) !important;
  visibility: hidden !important;
}
body.mikhmon-modern.mm-sidebar-open .sidenav { transform: translateX(0) !important; visibility: visible !important; }
body.mikhmon-modern #main { margin-left: 0 !important; width: 100% !important; }
body.mikhmon-modern #openNav { display: flex !important; cursor: pointer; }
body.mikhmon-modern #closeNav { display: none !important; }
body.mikhmon-modern .netwatch-status-table .label { border-radius: 5px !important; padding: 5px 9px !important; }
@media (max-width: 800px) {
  body.mikhmon-modern .sidenav { top: 58px !important; width: 250px !important; max-width: 86vw !important; }
  body.mikhmon-modern #main { margin-left: 0 !important; width: 100% !important; }
}

/* ================================================================
   STAGE 11 — ORBITZ NETWORK / MODERN ADMIN + NOC DESIGN SYSTEM
   Presentation layer only. Existing Mikhmon routes and API calls remain.
   ================================================================ */
:root {
  --mm-bg:#071321; --mm-surface:#101f32; --mm-surface-alt:#152941;
  --mm-text:#e8f1fb; --mm-muted:#91a7bf; --mm-border:#263d56;
  --mm-accent:#12a8ff; --mm-accent-strong:#087bd0;
  --mm-shadow:0 12px 30px rgba(0,0,0,.22); --mm-radius:15px;
  --mm-green:#19d77b; --mm-red:#ff6875; --mm-cyan:#12a8ff;
}
body.mikhmon-modern { background:var(--mm-bg)!important; color:var(--mm-text)!important; }
body.mikhmon-modern.theme-dark { --mm-bg:#071321;--mm-surface:#101f32;--mm-surface-alt:#152941;--mm-text:#e8f1fb;--mm-muted:#91a7bf;--mm-border:#263d56;--mm-accent:#12a8ff;--mm-accent-strong:#087bd0; }
body.mikhmon-modern.theme-blue { --mm-bg:#08182a;--mm-surface:#102944;--mm-surface-alt:#173654;--mm-text:#e9f4ff;--mm-muted:#9bb9d7;--mm-border:#294968;--mm-accent:#28a5ff;--mm-accent-strong:#087bd0; }
body.mikhmon-modern.theme-green { --mm-bg:#091a19;--mm-surface:#102b27;--mm-surface-alt:#183a34;--mm-text:#e9fff6;--mm-muted:#9bc8b8;--mm-border:#28564b;--mm-accent:#22c58b;--mm-accent-strong:#15996b; }
body.mikhmon-modern.theme-pink { --mm-bg:#1d1020;--mm-surface:#2a1930;--mm-surface-alt:#38213e;--mm-text:#fff0fb;--mm-muted:#d0a9c7;--mm-border:#583c5c;--mm-accent:#e879c2;--mm-accent-strong:#c34c9e; }
body.mikhmon-modern.theme-light { --mm-bg:#edf3fa;--mm-surface:#fff;--mm-surface-alt:#f4f7fb;--mm-text:#17283c;--mm-muted:#65788e;--mm-border:#dce5ef;--mm-accent:#087bd0;--mm-accent-strong:#075fa2;--mm-shadow:0 8px 24px rgba(25,55,90,.07); }

/* Header */
body.mikhmon-modern .navbar { position:sticky!important;top:0;z-index:1100;height:68px!important;padding:0 22px!important;background:#0c1b2d!important;color:#edf6ff!important;border-bottom:1px solid #263b53!important;box-shadow:0 5px 24px rgba(0,0,0,.18)!important; }
body.mikhmon-modern .navbar-left { gap:10px; }
body.mikhmon-modern #brand { color:#f2f8ff!important;font-size:22px!important;font-weight:850!important;letter-spacing:.4px;padding:0 12px 0 2px!important; }
body.mikhmon-modern #brand:after { content:'NETWORK MANAGEMENT';display:block;color:#829bb5;font-size:9px;letter-spacing:1.2px;font-weight:600;line-height:1.1;margin-top:2px; }
body.mikhmon-modern #openNav { width:42px;height:42px;justify-content:center;border:1px solid #2a415b;background:#132941!important;color:#dcecff!important;border-radius:11px; }
body.mikhmon-modern #cpage { color:#f1f7ff!important;font-size:16px!important;font-weight:750!important;padding-left:10px!important; }
body.mikhmon-modern .navbar-right { gap:9px; }
body.mikhmon-modern .navbar-right a { color:#eaf4ff!important; }
body.mikhmon-modern .navbar select { background:#14283e!important;color:#eaf4ff!important;border:1px solid #2c435d!important;border-radius:10px!important;height:38px!important; }
body.mikhmon-modern #logout { background:#17304a!important;border:1px solid #35516d!important;border-radius:10px!important;padding:8px 13px!important;font-weight:700; }

/* Sidebar drawer */
body.mikhmon-modern .sidenav { top:68px!important;bottom:0!important;width:280px!important;max-width:88vw!important;padding:16px 12px 22px!important;background:#0b1a2b!important;border-right:1px solid #263d56!important;box-shadow:18px 0 42px rgba(0,0,0,.3)!important; }
body.mikhmon-modern.mm-sidebar-open:after { content:'';position:fixed;inset:68px 0 0;background:rgba(2,8,16,.56);backdrop-filter:blur(2px);z-index:1000; }
body.mikhmon-modern.mm-sidebar-open .sidenav { z-index:1050!important; }
body.mikhmon-modern .orbitz-sidebar-brand { display:flex;align-items:center;gap:12px;padding:14px 10px 18px;margin:0 0 14px;border-bottom:1px solid #20364d;color:#f2f8ff; }
body.mikhmon-modern .orbitz-brand-mark { width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#0ea5e9,#1260c8);color:white;font-size:23px;box-shadow:0 7px 20px rgba(14,165,233,.25); }
body.mikhmon-modern .orbitz-sidebar-brand strong { display:block;font-size:16px;letter-spacing:.1px; }
body.mikhmon-modern .orbitz-sidebar-brand small { display:block;margin-top:3px;color:#9bb0c6;font-size:10px;line-height:1.45; }
body.mikhmon-modern .orbitz-router-label { display:flex;align-items:center;gap:8px;padding:8px 12px;color:#9fb4ca;font-size:11px;font-weight:750;letter-spacing:.7px;text-transform:uppercase; }
body.mikhmon-modern .orbitz-live-dot { width:8px;height:8px;border-radius:50%;background:#20d783;box-shadow:0 0 0 4px rgba(32,215,131,.12); }
body.mikhmon-modern .sidenav .menu,body.mikhmon-modern .sidenav .dropdown-btn { color:#c8d8e9!important;border-radius:10px!important;margin:3px 0!important;padding:11px 12px!important;min-height:43px;border:1px solid transparent; }
body.mikhmon-modern .sidenav .menu.active,body.mikhmon-modern .sidenav .dropdown-btn.active { background:linear-gradient(100deg,#087be9,#075fc7)!important;color:#fff!important;border-color:#168cf5!important;box-shadow:0 6px 18px rgba(0,111,220,.2); }
body.mikhmon-modern .sidenav .menu:hover,body.mikhmon-modern .sidenav .dropdown-btn:hover { background:#162e47!important;color:#fff!important; }
body.mikhmon-modern .sidenav .dropdown-container { background:rgba(12,29,47,.8)!important;border-left:1px solid #29435d;margin-left:12px;padding-left:8px; }
body.mikhmon-modern .sidenav .dropdown-container a { color:#a9bfd5!important;border-radius:8px;padding:9px 10px!important; }
body.mikhmon-modern .sidenav .dropdown-container a.active { color:#fff!important;background:#183b5c!important; }

/* Main canvas and generic page components */
body.mikhmon-modern #main { margin:0!important;width:100%!important;padding:0!important;background:var(--mm-bg)!important; }
body.mikhmon-modern .main-container { max-width:1800px;margin:0 auto!important;padding:22px 22px 34px!important; }
body.mikhmon-modern .card,body.mikhmon-modern .box,body.mikhmon-modern .well,body.mikhmon-modern .panel { background:var(--mm-surface)!important;color:var(--mm-text)!important;border:1px solid var(--mm-border)!important;border-radius:var(--mm-radius)!important;box-shadow:var(--mm-shadow)!important; }
body.mikhmon-modern .card { overflow:hidden;margin-bottom:14px; }
body.mikhmon-modern .card-header { background:linear-gradient(100deg,var(--mm-surface-alt),var(--mm-surface))!important;color:var(--mm-text)!important;border-bottom:1px solid var(--mm-border)!important;padding:14px 17px!important; }
body.mikhmon-modern .card-header h3 { color:var(--mm-text)!important;font-size:15px!important;font-weight:750!important;margin:0!important; }
body.mikhmon-modern .card-body { padding:15px!important; }
body.mikhmon-modern table.table { color:var(--mm-text)!important;border-color:var(--mm-border)!important; }
body.mikhmon-modern table.table th { background:var(--mm-surface-alt)!important;color:var(--mm-muted)!important;border-color:var(--mm-border)!important;text-transform:uppercase;font-size:10px;letter-spacing:.6px; }
body.mikhmon-modern table.table td { background:transparent!important;color:var(--mm-text)!important;border-color:var(--mm-border)!important; }
body.mikhmon-modern .form-control,body.mikhmon-modern input,body.mikhmon-modern select,body.mikhmon-modern textarea { background:var(--mm-surface-alt)!important;color:var(--mm-text)!important;border:1px solid var(--mm-border)!important;border-radius:9px!important; }
body.mikhmon-modern .btn { border-radius:9px!important;font-weight:650; }

/* Dashboard — real MikroTik values only */
body.mikhmon-modern #reloadHome { display:block;width:100%; }
body.mikhmon-modern .orbitz-kpi-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:0 0 16px; }
body.mikhmon-modern .orbitz-kpi { min-width:0;min-height:108px;display:flex;align-items:center;gap:13px;padding:16px;border-radius:15px;text-decoration:none!important;color:#eff7ff!important;background:linear-gradient(135deg,#122b45,#102238)!important;border:1px solid #294865!important;box-shadow:0 10px 25px rgba(0,0,0,.18)!important;position:relative;overflow:hidden; }
body.mikhmon-modern .orbitz-kpi:before { content:'';position:absolute;right:-28px;top:-42px;width:110px;height:110px;border-radius:50%;background:rgba(30,155,255,.08); }
body.mikhmon-modern .orbitz-kpi .kpi-icon { width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:13px;background:rgba(12,143,240,.18);color:#39b4ff;font-size:21px; }
body.mikhmon-modern .orbitz-kpi .kpi-copy { min-width:0;display:flex;flex-direction:column;gap:2px; }
body.mikhmon-modern .orbitz-kpi small { color:#a9bfd5;font-size:11px;font-weight:650; }
body.mikhmon-modern .orbitz-kpi strong { color:#f5faff;font-size:25px;line-height:1.2;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
body.mikhmon-modern .orbitz-kpi em { color:#92abc4;font-size:10px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
body.mikhmon-modern .kpi-pppoe .kpi-icon { background:rgba(151,83,255,.18);color:#bd91ff; }
body.mikhmon-modern .kpi-income { background:linear-gradient(135deg,#103b35,#102d2d)!important;border-color:#236b5d!important; }
body.mikhmon-modern .kpi-income .kpi-icon { background:rgba(25,215,123,.17);color:#35e39a; }
body.mikhmon-modern .kpi-cpu .kpi-icon { background:rgba(28,181,211,.16);color:#43d1e8; }
body.mikhmon-modern .kpi-ring { width:42px;height:42px;flex:0 0 42px;margin-left:auto;border-radius:50%;background:conic-gradient(#19d77b var(--kpi-value),#2b4862 0);position:relative; }
body.mikhmon-modern .kpi-ring:after { content:'';position:absolute;inset:6px;border-radius:50%;background:#12273d; }
body.mikhmon-modern .dashboard-system-info { display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:0 0 16px!important; }
body.mikhmon-modern .dashboard-system-info>[class*="col-"] { width:auto!important;max-width:none!important;flex:none!important;padding:0!important; }
body.mikhmon-modern .dashboard-system-info .box { min-height:84px!important;height:100%;padding:13px!important;margin:0!important;background:var(--mm-surface)!important;border-color:var(--mm-border)!important; }
body.mikhmon-modern .dashboard-system-info .box-group { gap:12px; }
body.mikhmon-modern .dashboard-system-info .box-group-icon { color:#36aaff!important;font-size:23px!important; }
body.mikhmon-modern .dashboard-system-info .box-group-area { color:var(--mm-text)!important;font-size:11px;line-height:1.65; }
body.mikhmon-modern #reloadHome > .row:not(.dashboard-system-info) { display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:14px;margin:0!important;align-items:start; }
body.mikhmon-modern #reloadHome > .row:not(.dashboard-system-info) > .col-8 { width:auto!important;max-width:none!important;flex:none!important;padding:0!important;min-width:0; }
body.mikhmon-modern #reloadHome > .row:not(.dashboard-system-info) > .dashboard-side-column { width:auto!important;max-width:none!important;flex:none!important;padding:0!important;min-width:0; }
body.mikhmon-modern #reloadHome #r_2 { display:block!important;margin:0!important; }
body.mikhmon-modern #reloadHome #r_2 > .card { margin-bottom:13px!important; }
body.mikhmon-modern #reloadHome .dashboard-traffic-card { margin-top:0!important; }
body.mikhmon-modern #reloadHome .dashboard-traffic-card .card-body { padding:10px 14px!important; }
body.mikhmon-modern #trafficMonitor { min-height:260px!important;width:100%!important; }
body.mikhmon-modern .dashboard-side-column { display:flex!important;flex-direction:column;gap:13px; }
body.mikhmon-modern .dashboard-income-card .box { min-height:88px!important;margin:0!important;padding:15px!important;background:linear-gradient(135deg,#103b35,#102d2d)!important;border-color:#236b5d!important; }
body.mikhmon-modern .dashboard-income-card .box-group-icon { color:#38dc9a!important; }
body.mikhmon-modern .dashboard-income-card .box-group-area { color:#eafff6!important;font-size:11px; }
body.mikhmon-modern .dashboard-log-card .card { margin:0!important; }
body.mikhmon-modern .dashboard-log-card .card-body { padding:10px!important; }
body.mikhmon-modern .dashboard-log-card .overflow { height:300px!important;max-height:300px; }
body.mikhmon-modern .dashboard-log-card table { font-size:10px!important; }
body.mikhmon-modern .highcharts-background { fill:transparent!important; }
body.mikhmon-modern .highcharts-title,body.mikhmon-modern .highcharts-axis-labels text,body.mikhmon-modern .highcharts-legend-item text { fill:var(--mm-muted)!important;color:var(--mm-muted)!important; }
body.mikhmon-modern .highcharts-grid-line { stroke:var(--mm-border)!important; }
body.mikhmon-modern .highcharts-axis-line,body.mikhmon-modern .highcharts-tick { stroke:var(--mm-border)!important; }
body.mikhmon-modern .highcharts-tooltip-box { fill:var(--mm-surface)!important;stroke:var(--mm-border)!important; }

/* Mobile/tablet */
@media(max-width:1100px) { body.mikhmon-modern .orbitz-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) {
  body.mikhmon-modern .navbar { height:60px!important;padding:0 10px!important; }
  body.mikhmon-modern #brand { font-size:17px!important;padding-right:4px!important; }
  body.mikhmon-modern #brand:after { font-size:7px;letter-spacing:.8px; }
  body.mikhmon-modern #cpage { display:none!important; }
  body.mikhmon-modern .navbar-right { gap:4px; }
  body.mikhmon-modern .navbar-right select { max-width:94px!important;height:34px!important;font-size:10px!important;padding-left:6px!important;padding-right:18px!important; }
  body.mikhmon-modern .navbar-right a { min-height:34px!important;padding:6px 8px!important;font-size:11px!important; }
  body.mikhmon-modern .sidenav { top:60px!important;width:270px!important; }
  body.mikhmon-modern.mm-sidebar-open:after { top:60px; }
  body.mikhmon-modern .main-container { padding:12px 10px 24px!important; }
  body.mikhmon-modern .orbitz-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px; }
  body.mikhmon-modern .orbitz-kpi { min-height:88px;padding:10px;gap:8px;border-radius:12px!important; }
  body.mikhmon-modern .orbitz-kpi .kpi-icon { width:36px;height:36px;flex-basis:36px;font-size:16px;border-radius:10px; }
  body.mikhmon-modern .orbitz-kpi strong { font-size:19px; }
  body.mikhmon-modern .orbitz-kpi small { font-size:9px; }
  body.mikhmon-modern .orbitz-kpi em { font-size:8px; }
  body.mikhmon-modern .kpi-ring { width:28px;height:28px;flex-basis:28px; }
  body.mikhmon-modern .kpi-ring:after { inset:4px; }
  body.mikhmon-modern .dashboard-system-info { grid-template-columns:1fr!important;gap:8px;margin-bottom:10px!important; }
  body.mikhmon-modern .dashboard-system-info .box { min-height:70px!important;padding:10px!important; }
  body.mikhmon-modern #reloadHome > .row:not(.dashboard-system-info) { grid-template-columns:minmax(0,1fr)!important;gap:10px; }
  body.mikhmon-modern #reloadHome > .row:not(.dashboard-system-info) > .col-8,body.mikhmon-modern #reloadHome > .row:not(.dashboard-system-info) > .dashboard-side-column { width:100%!important; }
  body.mikhmon-modern #reloadHome .card-header { padding:11px 12px!important; }
  body.mikhmon-modern #reloadHome .card-body { padding:10px!important; }
  body.mikhmon-modern #trafficMonitor { min-height:230px!important; }
  body.mikhmon-modern .dashboard-log-card .overflow { height:240px!important;max-height:240px; }
}
@media(max-width:390px) {
  body.mikhmon-modern .orbitz-kpi { padding:8px;gap:6px; }
  body.mikhmon-modern .orbitz-kpi .kpi-icon { width:30px;height:30px;flex-basis:30px;font-size:14px; }
  body.mikhmon-modern .orbitz-kpi strong { font-size:17px; }
  body.mikhmon-modern .navbar-right select.ses { max-width:78px!important; }
}

/* Stage 11 dashboard refinement: turn the overview into a useful live NOC workspace. */
body.mikhmon-modern .orbitz-monitor-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:0 0 16px; }
body.mikhmon-modern .orbitz-monitor-card { min-width:0;margin:0!important;background:var(--mm-surface)!important;border:1px solid var(--mm-border)!important; }
body.mikhmon-modern .orbitz-monitor-card .card-header { display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px 15px!important; }
body.mikhmon-modern .orbitz-monitor-card .card-header h3 { display:flex;align-items:center;gap:9px;min-width:0; }
body.mikhmon-modern .orbitz-monitor-card .card-header h3 > i { color:#38bdf8; }
body.mikhmon-modern .orbitz-monitor-card .card-header h3 small { margin-left:4px;color:var(--mm-muted);font-size:10px;font-weight:500; }
body.mikhmon-modern .orbitz-monitor-card .card-header h3 a { margin-left:auto;color:#38bdf8!important;font-size:11px;text-decoration:none;white-space:nowrap; }
body.mikhmon-modern .orbitz-monitor-card .card-body { padding:8px 14px 10px!important; }
body.mikhmon-modern .orbitz-interface-row,body.mikhmon-modern .orbitz-netwatch-row { display:flex;align-items:center;gap:10px;min-height:48px;padding:7px 2px;border-bottom:1px solid var(--mm-border); }
body.mikhmon-modern .orbitz-interface-row:last-child,body.mikhmon-modern .orbitz-netwatch-row:last-child { border-bottom:0; }
body.mikhmon-modern .orbitz-status-dot { width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:#64748b; }
body.mikhmon-modern .orbitz-status-dot.running,body.mikhmon-modern .orbitz-status-dot.up { background:#18d783;box-shadow:0 0 0 4px rgba(24,215,131,.12); }
body.mikhmon-modern .orbitz-status-dot.down { background:#fb6572;box-shadow:0 0 0 4px rgba(251,101,114,.12); }
body.mikhmon-modern .orbitz-status-dot.disabled,body.mikhmon-modern .orbitz-status-dot.unknown { background:#94a3b8; }
body.mikhmon-modern .orbitz-interface-name,body.mikhmon-modern .orbitz-netwatch-host { min-width:0;flex:1;display:flex;flex-direction:column;gap:2px; }
body.mikhmon-modern .orbitz-interface-name strong,body.mikhmon-modern .orbitz-netwatch-host strong { color:var(--mm-text);font-size:12px;font-weight:700;overflow-wrap:anywhere; }
body.mikhmon-modern .orbitz-interface-name small,body.mikhmon-modern .orbitz-netwatch-host small { color:var(--mm-muted);font-size:10px;overflow-wrap:anywhere; }
body.mikhmon-modern .orbitz-status-pill { display:inline-flex;align-items:center;justify-content:center;min-width:58px;padding:5px 8px;border-radius:5px;font-size:9px;line-height:1;font-weight:800;letter-spacing:.35px;white-space:nowrap; }
body.mikhmon-modern .orbitz-status-pill.running,body.mikhmon-modern .orbitz-status-pill.up { background:rgba(22,190,117,.16);color:#35df9a; }
body.mikhmon-modern .orbitz-status-pill.down { background:rgba(239,68,68,.16);color:#ff858d; }
body.mikhmon-modern .orbitz-status-pill.disabled,body.mikhmon-modern .orbitz-status-pill.unknown { background:rgba(148,163,184,.14);color:#aebdce; }
body.mikhmon-modern .orbitz-netwatch-interval { color:var(--mm-muted);font-size:10px;white-space:nowrap; }
body.mikhmon-modern .orbitz-panel-foot { padding-top:8px;color:var(--mm-muted);font-size:9px;border-top:1px solid var(--mm-border); }
body.mikhmon-modern .orbitz-empty-state { padding:22px 10px;text-align:center;color:var(--mm-muted);font-size:11px;line-height:1.6; }
/* The traffic graph is the primary dashboard visualization, above service shortcuts. */
body.mikhmon-modern #reloadHome #r_2 { display:flex!important;flex-direction:column;gap:13px;margin:0!important; }
body.mikhmon-modern #reloadHome #r_2 > .dashboard-traffic-card { order:-1;margin:0 0 2px!important; }
body.mikhmon-modern #reloadHome #r_2 > .card:not(.dashboard-traffic-card) { margin:0!important; }
body.mikhmon-modern #reloadHome .dashboard-traffic-card .card-header h3:before { content:'NETWORK ';color:#38bdf8;font-weight:800; }
body.mikhmon-modern #reloadHome .dashboard-traffic-card .card-body { padding:10px 14px 12px!important; }
body.mikhmon-modern #trafficMonitor { min-height:300px!important; }
body.mikhmon-modern .dashboard-system-info .box { min-height:78px!important; }
@media(max-width:1000px) {
  body.mikhmon-modern .orbitz-monitor-grid { grid-template-columns:minmax(0,1fr);gap:10px; }
  body.mikhmon-modern #trafficMonitor { min-height:270px!important; }
}
@media(max-width:800px) {
  body.mikhmon-modern .orbitz-monitor-grid { margin-bottom:10px; }
  body.mikhmon-modern .orbitz-monitor-card .card-body { padding:7px 10px 9px!important; }
  body.mikhmon-modern .orbitz-interface-row,body.mikhmon-modern .orbitz-netwatch-row { min-height:44px; }
  body.mikhmon-modern #trafficMonitor { min-height:245px!important; }
}

/* STAGE 13 — NOC DASHBOARD COMPOSITION */
body.mikhmon-modern .main-container{max-width:1900px!important;padding:18px 18px 30px!important}
body.mikhmon-modern .orbitz-dashboard{display:flex;flex-direction:column;gap:14px;min-width:0}
body.mikhmon-modern .orbitz-kpi-grid{margin:0!important}
body.mikhmon-modern .orbitz-primary-grid{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(330px,1fr);gap:14px;align-items:stretch}
body.mikhmon-modern .orbitz-primary-chart{min-width:0}
body.mikhmon-modern .orbitz-primary-chart .dashboard-traffic-card{height:100%;margin:0!important}
body.mikhmon-modern #trafficMonitor{width:100%;height:260px;min-height:220px}
body.mikhmon-modern .orbitz-system-card{margin:0!important;min-width:0}
body.mikhmon-modern .orbitz-system-rows{padding:8px 16px!important}
body.mikhmon-modern .orbitz-system-rows>div{display:grid;grid-template-columns:22px minmax(105px,.85fr) minmax(0,1.35fr);align-items:center;gap:9px;min-height:39px;border-bottom:1px solid var(--mm-border);font-size:12px}
body.mikhmon-modern .orbitz-system-rows>div:last-child{border-bottom:0}
body.mikhmon-modern .orbitz-system-rows i{color:#42b8ff;font-size:15px}
body.mikhmon-modern .orbitz-system-rows span{color:var(--mm-muted)}
body.mikhmon-modern .orbitz-system-rows strong{color:var(--mm-text);font-weight:650;overflow-wrap:anywhere}
body.mikhmon-modern .orbitz-secondary-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr) minmax(0,1.22fr);gap:14px;align-items:stretch}
body.mikhmon-modern .orbitz-secondary-grid>.card{min-width:0;margin:0!important}
body.mikhmon-modern .orbitz-secondary-grid .card-header{min-height:44px;padding:11px 14px!important}
body.mikhmon-modern .orbitz-secondary-grid .card-body{padding:8px 13px 10px!important}
body.mikhmon-modern .orbitz-interface-row,body.mikhmon-modern .orbitz-netwatch-row{min-height:40px;padding:5px 2px}
body.mikhmon-modern .orbitz-resource-content{display:flex;align-items:center;gap:14px;min-height:140px}
body.mikhmon-modern .orbitz-cpu-donut{width:112px;height:112px;flex:0 0 112px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,var(--mm-surface) 58%,transparent 60%),conic-gradient(#19d77b var(--cpu),#304d69 0)}
body.mikhmon-modern .orbitz-cpu-donut strong{font-size:24px;line-height:1.1;color:var(--mm-text)}
body.mikhmon-modern .orbitz-cpu-donut small{color:var(--mm-muted);font-size:10px}
body.mikhmon-modern .orbitz-resource-lines{flex:1;min-width:0}
body.mikhmon-modern .orbitz-resource-lines>div{display:grid;grid-template-columns:17px minmax(0,1fr) auto;gap:7px;align-items:center;padding:8px 0;border-bottom:1px solid var(--mm-border);font-size:11px}
body.mikhmon-modern .orbitz-resource-lines>div:last-child{border-bottom:0}
body.mikhmon-modern .orbitz-resource-lines i{color:#b9cce0}
body.mikhmon-modern .orbitz-resource-lines span{color:var(--mm-muted)}
body.mikhmon-modern .orbitz-resource-lines strong{color:var(--mm-text);font-weight:700;white-space:nowrap}
body.mikhmon-modern .orbitz-bottom-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);gap:14px;align-items:stretch}
body.mikhmon-modern .orbitz-bottom-grid>.card{min-width:0;margin:0!important}
body.mikhmon-modern .orbitz-bottom-grid .card-header{min-height:44px;padding:11px 15px!important}
body.mikhmon-modern .orbitz-bottom-grid .card-header a{color:inherit!important;text-decoration:none}
body.mikhmon-modern .orbitz-log-scroll{max-height:205px;overflow:auto}
body.mikhmon-modern .orbitz-log-scroll table{margin:0;font-size:11px!important}
body.mikhmon-modern .orbitz-pppoe-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
body.mikhmon-modern .orbitz-pppoe-summary>div{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--mm-border);border-radius:10px;background:var(--mm-surface-alt)}
body.mikhmon-modern .orbitz-pppoe-summary small{color:var(--mm-muted);font-size:10px}
body.mikhmon-modern .orbitz-pppoe-summary strong{color:var(--mm-text);font-size:22px}
body.mikhmon-modern .orbitz-pppoe-traffic-card p{color:var(--mm-muted);font-size:11px;margin:12px 0 8px}
body.mikhmon-modern .orbitz-open-monitor{display:inline-flex;align-items:center;gap:7px;color:#35b8ff!important;font-size:11px;font-weight:750;text-decoration:none}
body.mikhmon-modern .orbitz-shortcuts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body.mikhmon-modern .orbitz-shortcuts-grid>.card{margin:0!important;min-width:0}
body.mikhmon-modern .orbitz-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
body.mikhmon-modern .orbitz-shortcuts>a{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--mm-border);border-radius:10px;color:var(--mm-text)!important;text-decoration:none;background:var(--mm-surface-alt)}
body.mikhmon-modern .orbitz-shortcuts>a strong{font-size:20px}
body.mikhmon-modern .orbitz-shortcuts>a span{color:var(--mm-muted);font-size:10px}
/* Orbitz sidebar branding and router footer */
body.mikhmon-modern .sidenav{display:flex!important;flex-direction:column!important}
body.mikhmon-modern .orbitz-sidebar-brand{min-height:100px;padding:15px 10px 18px!important}
body.mikhmon-modern .orbitz-brand-mark{width:50px;height:50px;flex:0 0 50px;border-radius:50%;background:linear-gradient(145deg,#0bdbd6,#087bd0)!important;font-size:25px}
body.mikhmon-modern .orbitz-sidebar-brand strong{font-size:17px!important}
body.mikhmon-modern .orbitz-sidebar-brand small{font-size:11px!important}
body.mikhmon-modern .orbitz-sidebar-footer{margin-top:auto;padding-top:16px}
body.mikhmon-modern .orbitz-footer-device{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid #294661;border-radius:13px;background:linear-gradient(135deg,#112a43,#0d2034);color:#eaf5ff}
body.mikhmon-modern .orbitz-footer-icon{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:11px;background:#183a57;color:#9edcff;font-size:19px}
body.mikhmon-modern .orbitz-footer-device strong{display:block;font-size:12px}
body.mikhmon-modern .orbitz-footer-device small{display:block;color:#a5bad0;font-size:10px;margin-top:3px}
body.mikhmon-modern .orbitz-live-dot-inline{color:#19d77b;font-size:9px;margin-right:4px}
@media(max-width:1120px){body.mikhmon-modern .orbitz-primary-grid{grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr)}body.mikhmon-modern .orbitz-secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.mikhmon-modern .orbitz-netwatch-card{grid-column:1/-1}}
@media(max-width:760px){body.mikhmon-modern .main-container{padding:12px 10px 24px!important}body.mikhmon-modern .orbitz-dashboard{gap:10px}body.mikhmon-modern .orbitz-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}body.mikhmon-modern .orbitz-primary-grid,body.mikhmon-modern .orbitz-secondary-grid,body.mikhmon-modern .orbitz-bottom-grid,body.mikhmon-modern .orbitz-shortcuts-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}body.mikhmon-modern #trafficMonitor{height:230px;min-height:210px}body.mikhmon-modern .orbitz-system-rows>div{grid-template-columns:20px minmax(95px,.8fr) minmax(0,1.2fr);font-size:11px}body.mikhmon-modern .orbitz-resource-content{justify-content:center}body.mikhmon-modern .orbitz-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}body.mikhmon-modern .orbitz-bottom-grid .card-body{padding:10px!important}}
@media(max-width:380px){body.mikhmon-modern .orbitz-kpi{min-height:78px;padding:8px;gap:6px}body.mikhmon-modern .orbitz-kpi strong{font-size:17px}body.mikhmon-modern .orbitz-kpi em{white-space:normal}body.mikhmon-modern .orbitz-cpu-donut{width:90px;height:90px;flex-basis:90px}}

/* STAGE 14 — sidebar pushes desktop workspace; mobile remains an overlay drawer. */
@media (min-width:801px) {
  body.mikhmon-modern .sidenav {
    position:fixed!important;left:0!important;top:68px!important;bottom:0!important;
    width:280px!important;max-width:280px!important;height:auto!important;
    margin:0!important;padding:16px 12px 22px!important;
    transform:translateX(0)!important;visibility:visible!important;
    z-index:1050!important;overflow-x:hidden!important;overflow-y:auto!important;
    border-right:1px solid #263d56!important;
  }
  body.mikhmon-modern.mm-sidebar-closed .sidenav {
    transform:translateX(-102%)!important;visibility:hidden!important;
  }
  body.mikhmon-modern #main {
    margin:0 0 0 280px!important;width:calc(100% - 280px)!important;
    transition:margin-left .24s ease,width .24s ease!important;
  }
  body.mikhmon-modern.mm-sidebar-closed #main {
    margin-left:0!important;width:100%!important;
  }
  body.mikhmon-modern.mm-sidebar-open:after { content:none!important;display:none!important; }
}

@media (max-width:800px) {
  body.mikhmon-modern .sidenav {
    position:fixed!important;left:0!important;top:68px!important;bottom:0!important;
    width:280px!important;max-width:88vw!important;height:auto!important;
    margin:0!important;transform:translateX(-102%)!important;visibility:hidden!important;
    z-index:1050!important;overflow-x:hidden!important;overflow-y:auto!important;
  }
  body.mikhmon-modern.mm-sidebar-open .sidenav {
    transform:translateX(0)!important;visibility:visible!important;
  }
  body.mikhmon-modern #main { margin:0!important;width:100%!important; }
  body.mikhmon-modern.mm-sidebar-open:after {
    content:''!important;display:block!important;position:fixed!important;
    inset:68px 0 0!important;background:rgba(2,8,16,.58)!important;
    backdrop-filter:blur(2px);z-index:1000!important;
  }
}

/* Consistent breathing room between dashboard panels and cards. */
body.mikhmon-modern .main-container { padding:20px 22px 34px!important; }
body.mikhmon-modern .orbitz-dashboard { gap:18px!important; }
body.mikhmon-modern .orbitz-kpi-grid { gap:16px!important;margin:0!important; }
body.mikhmon-modern .orbitz-primary-grid,
body.mikhmon-modern .orbitz-secondary-grid,
body.mikhmon-modern .orbitz-bottom-grid,
body.mikhmon-modern .orbitz-shortcuts-grid { gap:18px!important; }
body.mikhmon-modern .orbitz-dashboard .card { margin:0!important; }
body.mikhmon-modern .orbitz-kpi { min-width:0;margin:0!important; }
body.mikhmon-modern .orbitz-monitor-card { min-width:0; }
@media (max-width:800px) {
  body.mikhmon-modern .main-container { padding:14px 12px 28px!important; }
  body.mikhmon-modern .orbitz-dashboard { gap:13px!important; }
  body.mikhmon-modern .orbitz-kpi-grid { gap:10px!important; }
  body.mikhmon-modern .orbitz-primary-grid,
  body.mikhmon-modern .orbitz-secondary-grid,
  body.mikhmon-modern .orbitz-bottom-grid,
  body.mikhmon-modern .orbitz-shortcuts-grid { gap:13px!important; }
}


/* STAGE 15 — fix responsive drawer, spacing, income KPI and admin session access. */
body.mikhmon-modern .orbitz-dashboard { gap:22px!important; }
body.mikhmon-modern .orbitz-kpi-grid { gap:18px!important; }
body.mikhmon-modern .orbitz-primary-grid,
body.mikhmon-modern .orbitz-secondary-grid,
body.mikhmon-modern .orbitz-bottom-grid,
body.mikhmon-modern .orbitz-shortcuts-grid { column-gap:20px!important; row-gap:20px!important; }
body.mikhmon-modern .orbitz-primary-grid > *,
body.mikhmon-modern .orbitz-secondary-grid > *,
body.mikhmon-modern .orbitz-bottom-grid > *,
body.mikhmon-modern .orbitz-kpi-grid > * { min-width:0!important; }
body.mikhmon-modern .orbitz-dashboard .card { margin:0!important; }
body.mikhmon-modern .navbar-right .admin-router-session { max-width:150px!important; }
@media (max-width:800px) {
  body.mikhmon-modern .orbitz-dashboard { gap:16px!important; }
  body.mikhmon-modern .orbitz-kpi-grid { gap:12px!important; }
  body.mikhmon-modern .orbitz-primary-grid,
  body.mikhmon-modern .orbitz-secondary-grid,
  body.mikhmon-modern .orbitz-bottom-grid,
  body.mikhmon-modern .orbitz-shortcuts-grid { gap:14px!important; }
  body.mikhmon-modern.mm-sidebar-open .sidenav {
    display:flex!important; visibility:visible!important; opacity:1!important;
    transform:translate3d(0,0,0)!important; pointer-events:auto!important;
    z-index:1205!important; width:280px!important; max-width:88vw!important;
  }
  body.mikhmon-modern.mm-sidebar-open .sidenav .menu,
  body.mikhmon-modern.mm-sidebar-open .sidenav .dropdown-btn { display:block!important; visibility:visible!important; }
  body.mikhmon-modern.mm-sidebar-open .sidenav .dropdown-container:not(.menu-open) { display:none!important; }
  body.mikhmon-modern.mm-sidebar-open:after { z-index:1190!important; }
  body.mikhmon-modern .navbar-right .admin-router-session { max-width:90px!important; }
}


/* STAGE 16 — consistent dashboard spacing and visible router creation action. */
body.mikhmon-modern .orbitz-dashboard { gap:24px!important; }
body.mikhmon-modern .orbitz-kpi-grid { gap:20px!important; }
body.mikhmon-modern .orbitz-primary-grid,
body.mikhmon-modern .orbitz-secondary-grid,
body.mikhmon-modern .orbitz-bottom-grid,
body.mikhmon-modern .orbitz-shortcuts-grid { column-gap:22px!important; row-gap:22px!important; }
body.mikhmon-modern .orbitz-dashboard .card, body.mikhmon-modern .orbitz-kpi { border-radius:15px!important; }
body.mikhmon-modern .orbitz-dashboard > section { min-width:0; }
body.mikhmon-modern .orbitz-router-list-header { display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; flex-wrap:wrap!important; }
body.mikhmon-modern .orbitz-add-router-btn { display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; padding:8px 13px!important; border-radius:8px!important; background:#0878e8!important; color:#fff!important; font-size:12px!important; font-weight:700!important; text-decoration:none!important; border:1px solid #278cf0!important; }
body.mikhmon-modern .orbitz-add-router-btn:hover { background:#0867c8!important; color:#fff!important; }
@media(max-width:800px) {
 body.mikhmon-modern .orbitz-dashboard { gap:17px!important; }
 body.mikhmon-modern .orbitz-kpi-grid { gap:13px!important; }
 body.mikhmon-modern .orbitz-primary-grid, body.mikhmon-modern .orbitz-secondary-grid, body.mikhmon-modern .orbitz-bottom-grid, body.mikhmon-modern .orbitz-shortcuts-grid { gap:15px!important; }
 body.mikhmon-modern .orbitz-router-list-header { align-items:flex-start!important; }
 body.mikhmon-modern .orbitz-add-router-btn { width:100%; }
}


/* STAGE 17 — stronger dashboard spacing and reliable Admin Sessions visibility. */
body.mikhmon-modern #main > .main-container {
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  box-sizing:border-box!important;
  width:100%!important;
}
body.mikhmon-modern .orbitz-dashboard {
  display:flex!important;
  flex-direction:column!important;
  gap:28px!important;
  padding:0 4px 12px!important;
  box-sizing:border-box!important;
}
body.mikhmon-modern .orbitz-kpi-grid {
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  column-gap:24px!important;
  row-gap:24px!important;
  margin:0!important;
}
body.mikhmon-modern .orbitz-primary-grid,
body.mikhmon-modern .orbitz-secondary-grid,
body.mikhmon-modern .orbitz-bottom-grid,
body.mikhmon-modern .orbitz-shortcuts-grid {
  column-gap:26px!important;
  row-gap:26px!important;
  margin:0!important;
  align-items:stretch!important;
}
body.mikhmon-modern .orbitz-primary-grid > *,
body.mikhmon-modern .orbitz-secondary-grid > *,
body.mikhmon-modern .orbitz-bottom-grid > *,
body.mikhmon-modern .orbitz-shortcuts-grid > *,
body.mikhmon-modern .orbitz-kpi-grid > * {
  min-width:0!important;
  box-sizing:border-box!important;
  margin:0!important;
}
body.mikhmon-modern .orbitz-dashboard .card,
body.mikhmon-modern .orbitz-dashboard .orbitz-kpi {
  margin:0!important;
}
/* Admin Settings: keep Router List and Add Router visible even if legacy JS fails. */
body.mikhmon-modern #main > .main-container .orbitz-router-list-header {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:14px!important;
}
body.mikhmon-modern #main > .main-container .orbitz-add-router-btn {
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:38px!important;
  padding:9px 15px!important;
  white-space:nowrap!important;
  border-radius:9px!important;
  background:#0878e8!important;
  color:#fff!important;
  font-weight:750!important;
  text-decoration:none!important;
}
body.mikhmon-modern .navbar-right .admin-router-session {
  display:inline-block!important;
  visibility:visible!important;
  min-width:142px!important;
  max-width:170px!important;
  opacity:1!important;
}
@media(max-width:800px) {
  body.mikhmon-modern .orbitz-dashboard { gap:20px!important;padding:0 2px 10px!important; }
  body.mikhmon-modern .orbitz-kpi-grid { column-gap:13px!important;row-gap:15px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  body.mikhmon-modern .orbitz-primary-grid,
  body.mikhmon-modern .orbitz-secondary-grid,
  body.mikhmon-modern .orbitz-bottom-grid,
  body.mikhmon-modern .orbitz-shortcuts-grid { column-gap:0!important;row-gap:18px!important; }
  body.mikhmon-modern #main > .main-container .orbitz-router-list-header { align-items:stretch!important; }
  body.mikhmon-modern #main > .main-container .orbitz-add-router-btn { width:100%!important; }
  body.mikhmon-modern .navbar-right .admin-router-session { min-width:0!important;max-width:112px!important; }
}


/* STAGE 18 — restore native router/session workflow; avoid nested Hotspot Log card. */
body.mikhmon-modern .navbar-right .admin-router-session { display:inline-block!important;visibility:visible!important;opacity:1!important;min-width:160px!important;max-width:220px!important; }
body.mikhmon-modern .orbitz-router-list-header { display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;flex-wrap:wrap!important; }
body.mikhmon-modern .orbitz-add-router-btn { display:inline-flex!important;visibility:visible!important;opacity:1!important; }
body.mikhmon-modern .orbitz-hotspot-log-card #r_3 { width:100%;min-width:0; }
body.mikhmon-modern .orbitz-hotspot-log-card #r_3 .card-header { display:none!important; }
@media(max-width:800px) {
  body.mikhmon-modern .navbar-right .admin-router-session { min-width:115px!important;max-width:145px!important; }
  body.mikhmon-modern .orbitz-router-list-header { align-items:stretch!important; }
  body.mikhmon-modern .orbitz-add-router-btn { width:100%!important; }
}

/* STAGE 19 — live WAN rates beside each ISP/interface. */
body.mikhmon-modern .orbitz-wan-row{display:grid;grid-template-columns:10px minmax(110px,1fr) minmax(105px,auto) auto;gap:10px;align-items:center;min-height:58px;padding:8px 2px;border-bottom:1px solid var(--mm-border)}
body.mikhmon-modern .orbitz-wan-rates{display:flex;flex-direction:column;gap:3px;min-width:105px;font-size:11px;line-height:1.25;white-space:nowrap}
body.mikhmon-modern .orbitz-wan-rates .wan-rx{color:#19d77b;font-weight:750}
body.mikhmon-modern .orbitz-wan-rates .wan-tx{color:#20aaff;font-weight:750}
body.mikhmon-modern .orbitz-wan-row .wan-status{min-width:58px}
@media(max-width:520px){body.mikhmon-modern .orbitz-wan-row{grid-template-columns:9px minmax(0,1fr) minmax(88px,auto);gap:8px;min-height:60px}body.mikhmon-modern .orbitz-wan-rates{min-width:88px;font-size:10px}body.mikhmon-modern .orbitz-wan-row .wan-status{grid-column:2/4;justify-self:start;margin-top:-3px}}


/* STAGE 20 — BILNET identity, compact primary row, scrollable interface and Netwatch lists, theme-aware surfaces. */
body.mikhmon-modern #brand { color:var(--mm-text)!important; }
body.mikhmon-modern #brand:after { content:'NETWORK MANAGEMENT';color:var(--mm-muted)!important; }
body.mikhmon-modern .bilnet-sidebar-brand { display:flex;flex-direction:column;gap:0;padding:16px 12px 18px;margin:0 0 12px;border-bottom:1px solid var(--mm-border); }
body.mikhmon-modern .bilnet-sidebar-brand strong { color:var(--mm-text);font-size:25px;line-height:1.05;font-weight:900;letter-spacing:.5px; }
body.mikhmon-modern .bilnet-sidebar-brand small { color:var(--mm-muted);font-size:10px;letter-spacing:1.15px;text-transform:uppercase;margin-top:4px; }
body.mikhmon-modern .orbitz-router-label { display:none!important; }
body.mikhmon-modern .orbitz-sidebar-footer { margin-top:auto;padding-top:14px; }
body.mikhmon-modern .orbitz-footer-device { background:var(--mm-surface-alt)!important;border-color:var(--mm-border)!important;color:var(--mm-text)!important; }
body.mikhmon-modern .orbitz-footer-icon { background:color-mix(in srgb,var(--mm-accent) 16%,var(--mm-surface))!important;color:var(--mm-accent)!important; }
body.mikhmon-modern .orbitz-footer-device small { color:var(--mm-muted)!important; }

/* Keep the main traffic graph and System Information compact but equal-height. */
body.mikhmon-modern .orbitz-primary-grid { gap:22px!important;align-items:stretch!important; }
body.mikhmon-modern .orbitz-primary-chart,
body.mikhmon-modern .orbitz-system-card { min-width:0;height:100%; }
body.mikhmon-modern .orbitz-primary-chart .dashboard-traffic-card,
body.mikhmon-modern .orbitz-system-card { height:100%;margin:0!important; }
body.mikhmon-modern .orbitz-primary-chart .card-header,
body.mikhmon-modern .orbitz-system-card .card-header { min-height:46px!important;padding:11px 15px!important; }
body.mikhmon-modern .orbitz-primary-chart .card-body { padding:7px 12px 9px!important; }
body.mikhmon-modern #trafficMonitor { height:220px!important;min-height:220px!important;width:100%!important; }
body.mikhmon-modern .orbitz-system-rows { padding:6px 14px!important; }
body.mikhmon-modern .orbitz-system-rows>div { min-height:34px!important;grid-template-columns:20px minmax(100px,.8fr) minmax(0,1.2fr)!important;font-size:11px!important; }

/* Show all interfaces/Netwatch records, while keeping only about three rows visible initially. */
body.mikhmon-modern .orbitz-scroll-list { max-height:190px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--mm-accent) var(--mm-surface-alt);padding-right:5px; }
body.mikhmon-modern .orbitz-scroll-list::-webkit-scrollbar { width:7px; }
body.mikhmon-modern .orbitz-scroll-list::-webkit-scrollbar-track { background:var(--mm-surface-alt);border-radius:8px; }
body.mikhmon-modern .orbitz-scroll-list::-webkit-scrollbar-thumb { background:var(--mm-border);border-radius:8px; }
body.mikhmon-modern .orbitz-wan-row { grid-template-columns:10px minmax(90px,1fr) minmax(100px,auto) auto!important;min-height:57px!important; }
body.mikhmon-modern .orbitz-wan-row .orbitz-interface-name strong { font-size:12px; }
body.mikhmon-modern .orbitz-wan-row .orbitz-interface-name small { font-size:10px; }
body.mikhmon-modern .orbitz-netwatch-list { max-height:190px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--mm-accent) var(--mm-surface-alt);padding-right:5px; }
body.mikhmon-modern .orbitz-netwatch-list::-webkit-scrollbar { width:7px; }
body.mikhmon-modern .orbitz-netwatch-list::-webkit-scrollbar-track { background:var(--mm-surface-alt);border-radius:8px; }
body.mikhmon-modern .orbitz-netwatch-list::-webkit-scrollbar-thumb { background:var(--mm-border);border-radius:8px; }

/* Theme selection must recolor all dashboard surfaces, not just text and navbar. */
body.mikhmon-modern .orbitz-kpi { background:linear-gradient(135deg,var(--mm-surface-alt),var(--mm-surface))!important;border-color:var(--mm-border)!important;color:var(--mm-text)!important; }
body.mikhmon-modern .orbitz-kpi:before { background:color-mix(in srgb,var(--mm-accent) 9%,transparent)!important; }
body.mikhmon-modern .orbitz-kpi small,body.mikhmon-modern .orbitz-kpi em { color:var(--mm-muted)!important; }
body.mikhmon-modern .orbitz-kpi strong { color:var(--mm-text)!important; }
body.mikhmon-modern .orbitz-kpi .kpi-icon { background:color-mix(in srgb,var(--mm-accent) 17%,var(--mm-surface))!important;color:var(--mm-accent)!important; }
body.mikhmon-modern .orbitz-kpi.kpi-income { background:linear-gradient(135deg,color-mix(in srgb,#16a36a 15%,var(--mm-surface)),var(--mm-surface))!important;border-color:var(--mm-border)!important; }
body.mikhmon-modern .orbitz-kpi.kpi-income .kpi-icon { background:color-mix(in srgb,#16a36a 18%,var(--mm-surface))!important;color:#16a36a!important; }
body.mikhmon-modern .orbitz-kpi .kpi-ring:after { background:var(--mm-surface)!important; }
body.mikhmon-modern .navbar { background:var(--mm-surface)!important;color:var(--mm-text)!important;border-color:var(--mm-border)!important; }
body.mikhmon-modern .navbar #brand,body.mikhmon-modern .navbar #cpage,body.mikhmon-modern .navbar a { color:var(--mm-text)!important; }
body.mikhmon-modern .navbar #brand:after { color:var(--mm-muted)!important; }
body.mikhmon-modern .navbar #openNav { background:var(--mm-surface-alt)!important;border-color:var(--mm-border)!important;color:var(--mm-text)!important; }
body.mikhmon-modern .navbar select,body.mikhmon-modern .navbar .ses { background:var(--mm-surface-alt)!important;color:var(--mm-text)!important;border-color:var(--mm-border)!important; }
body.mikhmon-modern #logout { background:var(--mm-surface-alt)!important;color:var(--mm-text)!important;border-color:var(--mm-border)!important; }
body.mikhmon-modern .sidenav { background:var(--mm-surface)!important;border-color:var(--mm-border)!important; }
body.mikhmon-modern .sidenav .menu,body.mikhmon-modern .sidenav .dropdown-btn { color:var(--mm-muted)!important; }
body.mikhmon-modern .sidenav .menu:hover,body.mikhmon-modern .sidenav .dropdown-btn:hover { background:var(--mm-surface-alt)!important;color:var(--mm-text)!important; }
body.mikhmon-modern .sidenav .dropdown-container { background:var(--mm-surface-alt)!important;border-color:var(--mm-border)!important; }
body.mikhmon-modern .orbitz-status-pill.running,body.mikhmon-modern .orbitz-status-pill.up { background:color-mix(in srgb,#16a36a 17%,var(--mm-surface))!important;color:#16a36a!important; }
body.mikhmon-modern .orbitz-status-pill.down { background:color-mix(in srgb,#dc3545 16%,var(--mm-surface))!important;color:#dc3545!important; }

@media(max-width:760px) {
  body.mikhmon-modern .orbitz-primary-grid { gap:14px!important; }
  body.mikhmon-modern #trafficMonitor { height:220px!important;min-height:220px!important; }
  body.mikhmon-modern .orbitz-system-rows>div { min-height:36px!important;grid-template-columns:20px minmax(90px,.85fr) minmax(0,1.15fr)!important; }
  body.mikhmon-modern .orbitz-scroll-list,body.mikhmon-modern .orbitz-netwatch-list { max-height:190px!important; }
  body.mikhmon-modern .orbitz-wan-row { grid-template-columns:9px minmax(0,1fr) minmax(90px,auto)!important;gap:7px!important; }
  body.mikhmon-modern .orbitz-wan-rates { min-width:90px!important;font-size:10px!important; }
  body.mikhmon-modern .orbitz-wan-row .wan-status { grid-column:auto!important;justify-self:end!important;margin:0!important; }
}

/* STAGE 22 — BILNET header lockup and router identity at the top of the sidebar. */
body.mikhmon-modern #brand {
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  justify-content:center!important;line-height:1!important;min-width:112px;
  color:var(--mm-text)!important;font-size:22px!important;font-weight:900!important;
  letter-spacing:.45px!important;padding:0 10px 0 2px!important;
}
body.mikhmon-modern #brand:after {
  content:'Network Management'!important;display:block!important;
  color:var(--mm-muted)!important;font-size:9px!important;font-weight:600!important;
  letter-spacing:1.05px!important;text-transform:uppercase!important;
  line-height:1.2!important;margin-top:5px!important;
}
body.mikhmon-modern .navbar-left { align-items:center!important;gap:10px!important; }
body.mikhmon-modern .bilnet-router-card {
  display:flex!important;align-items:center!important;gap:11px!important;
  padding:12px 10px!important;margin:0 0 13px!important;
  background:var(--mm-surface-alt)!important;border:1px solid var(--mm-border)!important;
  border-radius:13px!important;color:var(--mm-text)!important;min-width:0!important;
}
body.mikhmon-modern .bilnet-router-icon {
  flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;
  border-radius:11px;background:color-mix(in srgb,var(--mm-accent) 17%,var(--mm-surface))!important;
  color:var(--mm-accent)!important;font-size:17px;
}
body.mikhmon-modern .bilnet-router-meta { display:flex!important;flex:1 1 auto!important;flex-direction:column!important;gap:4px!important;min-width:0!important; }
body.mikhmon-modern .bilnet-router-meta strong { display:block!important;color:var(--mm-text)!important;font-size:12px!important;font-weight:800!important;line-height:1.25!important;overflow-wrap:anywhere; }
body.mikhmon-modern .bilnet-router-meta small { display:block!important;color:var(--mm-muted)!important;font-size:10px!important;line-height:1.25!important;overflow-wrap:anywhere; }
body.mikhmon-modern .bilnet-router-dot { color:var(--mm-green)!important;font-size:9px!important;margin-right:5px; }
body.mikhmon-modern .orbitz-sidebar-footer { display:none!important; }
/* Use the original Mikhmon session selector on connected-router pages; admin session management stays native. */
body.mikhmon-modern .navbar-right select.connect { display:inline-block!important;visibility:visible!important;opacity:1!important; }
body.mikhmon-modern .navbar-right .admin-router-session { display:none!important; }
@media(max-width:800px) {
  body.mikhmon-modern #brand { min-width:98px;font-size:20px!important;padding-right:6px!important; }
  body.mikhmon-modern #brand:after { font-size:8px!important;letter-spacing:.8px!important; }
  body.mikhmon-modern .bilnet-router-card { margin-bottom:11px!important;padding:10px!important; }
}


/* STAGE 23 — mobile navbar layout, visible theme loader, and router info reliability. */
@media (max-width: 800px) {
  body.mikhmon-modern .navbar {
    min-height: 96px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 7px 10px !important;
    overflow: visible !important;
  }
  body.mikhmon-modern .navbar .navbar-left {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  body.mikhmon-modern .navbar .navbar-left #brand {
    flex: 0 0 auto !important;
    min-width: 88px !important;
    max-width: 104px !important;
    font-size: 18px !important;
    padding: 0 4px 0 0 !important;
  }
  body.mikhmon-modern .navbar .navbar-left #openNav,
  body.mikhmon-modern .navbar .navbar-left #closeNav {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    margin: 0 !important;
  }
  body.mikhmon-modern .navbar .navbar-left #cpage {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.mikhmon-modern .navbar .navbar-right {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  body.mikhmon-modern .navbar .navbar-right select {
    min-width: 0 !important;
    max-width: 118px !important;
    width: auto !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
  }
  body.mikhmon-modern .navbar .navbar-right a[title="Idle Timeout"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }
  body.mikhmon-modern .navbar .navbar-right #logout {
    flex: 0 0 auto !important;
    min-width: 34px !important;
    width: 34px !important;
    height: 32px !important;
    padding: 6px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 0 !important;
    text-align: center !important;
  }
  body.mikhmon-modern .navbar .navbar-right #logout i {
    font-size: 14px !important;
    margin: 0 !important;
  }
}

/* Theme/loading notice must stay above cards, charts, sidebar and navbar. */
body.mikhmon-modern #notify {
  position: fixed !important;
  z-index: 2147483000 !important;
  top: 76px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: min(92vw, 420px) !important;
  pointer-events: none !important;
}
body.mikhmon-modern #notify .message {
  position: relative !important;
  z-index: 2147483001 !important;
  background: var(--mm-surface-alt, #14253a) !important;
  color: var(--mm-text, #fff) !important;
  border: 1px solid var(--mm-accent, #1688ef) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.38) !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
}
body.mikhmon-modern .pace,
body.mikhmon-modern .pace .pace-progress {
  z-index: 2147483002 !important;
}

/* BILNET Stage 24: on phones keep only the hamburger in the page-title slot. */
@media (max-width: 800px) {
  /* Specificity intentionally exceeds the Stage 23 #cpage flex rule. */
  body.mikhmon-modern .navbar .navbar-left a#cpage {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  body.mikhmon-modern .navbar .navbar-left {
    justify-content: flex-start !important;
  }
}

/* Stage 35 — BILNET login identity and submenu alignment */
body.mikhmon-modern .sidenav .dropdown-container a { display:flex!important; align-items:center; gap:8px; padding:10px 12px!important; min-height:38px; line-height:1.35; }
body.mikhmon-modern .sidenav .dropdown-container a i { display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px; width:22px; margin:0!important; padding:0!important; text-align:center; }
body.mikhmon-modern:has(.mm-login-box) { min-height:100vh; background:radial-gradient(ellipse at 15% 15%,rgba(22,119,255,.22),transparent 38%),radial-gradient(ellipse at 85% 80%,rgba(0,198,180,.16),transparent 34%),linear-gradient(135deg,#071321 0%,#0c1e33 52%,#071321 100%)!important; }
body.mikhmon-modern:has(.mm-login-box) .mm-login-box { max-width:460px; margin:clamp(28px,8vh,90px) auto!important; }
body.mikhmon-modern .mm-login-box > .card { overflow:hidden; border:1px solid rgba(116,177,230,.25)!important; background:rgba(15,32,52,.94)!important; box-shadow:0 24px 80px rgba(0,0,0,.35)!important; backdrop-filter:blur(16px); }
body.mikhmon-modern .mm-login-box .card-header { background:rgba(28,54,82,.8)!important; border-bottom:1px solid rgba(116,177,230,.2)!important; }
body.mikhmon-modern .mm-login-logo { padding:12px 0 4px!important; }
body.mikhmon-modern .bilnet-login-mark { width:100px;height:100px;margin:0 auto 12px;filter:drop-shadow(0 12px 22px rgba(0,130,255,.25)); }
body.mikhmon-modern .bilnet-login-mark svg { display:block;width:100%;height:100%; }
body.mikhmon-modern .bilnet-login-name { color:#f3f8ff;font-size:29px;font-weight:900;letter-spacing:.12em;line-height:1.1; }
body.mikhmon-modern .bilnet-login-tagline { color:#8eabc8;font-size:10px;font-weight:800;letter-spacing:.2em;margin-top:6px; }
body.mikhmon-modern .mm-login-table { border:1px solid rgba(116,177,230,.2);border-radius:12px;overflow:hidden;padding:8px; }
body.mikhmon-modern .mm-login-table input.form-control { background:#eaf2ff!important;color:#10243a!important;border:1px solid #c5d8ed!important;border-radius:8px!important; }
body.mikhmon-modern .mm-login-table .btn-login { border-radius:8px!important;min-height:42px!important; }

/* BILNET supplied brand mark */
.mm-login-logo .bilnet-login-image{display:block;width:min(230px,72%);max-height:170px;object-fit:contain;margin:0 auto 10px;filter:drop-shadow(0 10px 24px rgba(0,140,255,.18));}


/* Stage51 — mobile login centering and custom accent picker */
.bilnet-color-picker{display:inline-flex!important;align-items:center;justify-content:center;gap:5px;margin:0 8px;min-width:34px;height:36px;color:var(--mm-text);cursor:pointer}
.bilnet-color-picker input[type=color]{width:25px!important;height:25px!important;min-height:25px!important;padding:2px!important;border:1px solid var(--mm-border)!important;border-radius:50%!important;background:var(--mm-surface)!important;cursor:pointer}
@media(max-width:650px){
 body.mikhmon-modern:has(.mm-login-box) .mm-login-box{width:calc(100% - 28px)!important;max-width:460px!important;margin:28px auto!important;}
 body.mikhmon-modern:has(.mm-login-box) .mm-login-table{width:100%!important;max-width:100%!important;table-layout:fixed!important;margin:0 auto!important;}
 body.mikhmon-modern:has(.mm-login-box) .mm-login-table td{width:auto!important;text-align:center!important;padding:7px 4px!important;}
 body.mikhmon-modern:has(.mm-login-box) .mm-login-table input,body.mikhmon-modern:has(.mm-login-box) .mm-login-table .btn-login{display:block!important;width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;}
}

/* Stage52: compact mobile navbar, keep only hamburger before the controls. */
@media(max-width:800px){
 body.mikhmon-modern .navbar{padding:0 8px!important;gap:6px!important;height:58px!important}
 body.mikhmon-modern .navbar .navbar-left{flex:0 0 auto!important;gap:4px!important}
 body.mikhmon-modern .navbar #brand{display:none!important;width:0!important;padding:0!important;margin:0!important;overflow:hidden!important}
 body.mikhmon-modern .navbar #openNav{display:flex!important;width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;margin:0!important}
 body.mikhmon-modern .navbar #closeNav{display:none!important}
 body.mikhmon-modern .navbar .navbar-right{flex:1 1 auto!important;justify-content:flex-end!important;gap:5px!important;min-width:0!important}
 body.mikhmon-modern .navbar .navbar-right select{max-width:100px!important;min-width:0!important;height:34px!important;padding:0 5px!important;font-size:10px!important}
 body.mikhmon-modern .navbar #logout{min-height:34px!important;padding:5px 7px!important;font-size:10px!important;white-space:nowrap}
 body.mikhmon-modern .navbar #timer{font-size:10px!important}
}

/* Stage52: readable contrast for every light/pastel theme. */
body.mikhmon-modern.theme-light,body.mikhmon-modern.theme-blue,body.mikhmon-modern.theme-green,body.mikhmon-modern.theme-pink{
 --mm-text:#172033;--mm-muted:#526176;--mm-accent-contrast:#ffffff;
}
body.mikhmon-modern.theme-light .card,body.mikhmon-modern.theme-light .box,body.mikhmon-modern.theme-light .well,body.mikhmon-modern.theme-light .panel,
body.mikhmon-modern.theme-blue .card,body.mikhmon-modern.theme-blue .box,body.mikhmon-modern.theme-blue .well,body.mikhmon-modern.theme-blue .panel,
body.mikhmon-modern.theme-green .card,body.mikhmon-modern.theme-green .box,body.mikhmon-modern.theme-green .well,body.mikhmon-modern.theme-green .panel,
body.mikhmon-modern.theme-pink .card,body.mikhmon-modern.theme-pink .box,body.mikhmon-modern.theme-pink .well,body.mikhmon-modern.theme-pink .panel{color:var(--mm-text)!important}
body.mikhmon-modern.theme-light .card :is(h1,h2,h3,h4,h5,p,span,label,small,strong,td,th,a),
body.mikhmon-modern.theme-blue .card :is(h1,h2,h3,h4,h5,p,span,label,small,strong,td,th,a),
body.mikhmon-modern.theme-green .card :is(h1,h2,h3,h4,h5,p,span,label,small,strong,td,th,a),
body.mikhmon-modern.theme-pink .card :is(h1,h2,h3,h4,h5,p,span,label,small,strong,td,th,a){color:inherit}
body.mikhmon-modern.theme-light .main-container,body.mikhmon-modern.theme-blue .main-container,body.mikhmon-modern.theme-green .main-container,body.mikhmon-modern.theme-pink .main-container{color:var(--mm-text)!important}
body.mikhmon-modern.theme-light .main-container :is(label,p,small,td,th),body.mikhmon-modern.theme-blue .main-container :is(label,p,small,td,th),body.mikhmon-modern.theme-green .main-container :is(label,p,small,td,th),body.mikhmon-modern.theme-pink .main-container :is(label,p,small,td,th){color:var(--mm-text)}
body.mikhmon-modern.theme-light .main-container input,body.mikhmon-modern.theme-light .main-container select,body.mikhmon-modern.theme-light .main-container textarea,
body.mikhmon-modern.theme-blue .main-container input,body.mikhmon-modern.theme-blue .main-container select,body.mikhmon-modern.theme-blue .main-container textarea,
body.mikhmon-modern.theme-green .main-container input,body.mikhmon-modern.theme-green .main-container select,body.mikhmon-modern.theme-green .main-container textarea,
body.mikhmon-modern.theme-pink .main-container input,body.mikhmon-modern.theme-pink .main-container select,body.mikhmon-modern.theme-pink .main-container textarea{color:#172033!important}
body.mikhmon-modern.theme-light .btn,body.mikhmon-modern.theme-light button,body.mikhmon-modern.theme-blue .btn,body.mikhmon-modern.theme-blue button,body.mikhmon-modern.theme-green .btn,body.mikhmon-modern.theme-green button,body.mikhmon-modern.theme-pink .btn,body.mikhmon-modern.theme-pink button{color:#fff}
body.mikhmon-modern.theme-dark{--mm-text:#eef4fb;--mm-muted:#a9b8c9}


/* ================================================================
   STAGE 53 — MOBILE NAVBAR / SIDEBAR CONTRAST / LOGIN CENTERING
   Presentation-only overrides; preserves existing routes and logic.
   ================================================================ */

/* Keep the hamburger in the same single row as theme/session/clock/logout. */
@media (max-width:800px) {
  body.mikhmon-modern .navbar {
    height:60px!important;
    min-height:60px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    padding:0 8px!important;
  }
  body.mikhmon-modern .navbar .navbar-left {
    display:flex!important;
    flex:0 0 40px!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:60px!important;
    min-height:60px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:visible!important;
    margin:0!important;
  }
  body.mikhmon-modern .navbar .navbar-left #openNav {
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    padding:0!important;
  }
  body.mikhmon-modern .navbar .navbar-left #brand,
  body.mikhmon-modern .navbar .navbar-left #cpage,
  body.mikhmon-modern .navbar .navbar-left #closeNav {
    display:none!important;
  }
  body.mikhmon-modern .navbar .navbar-right {
    display:flex!important;
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    height:60px!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    overflow:visible!important;
  }
  body.mikhmon-modern .navbar .navbar-right select {
    max-width:clamp(62px,18vw,96px)!important;
    min-width:0!important;
    height:34px!important;
    padding:0 4px!important;
    font-size:10px!important;
  }
  body.mikhmon-modern .navbar .navbar-right #timer,
  body.mikhmon-modern .navbar .navbar-right a {
    flex:0 0 auto!important;
    white-space:nowrap!important;
    font-size:10px!important;
  }
  body.mikhmon-modern .navbar .navbar-right #logout {
    min-height:34px!important;
    padding:5px 6px!important;
  }

  /* Drawer starts below the 60px navbar so it never covers the hamburger row. */
  body.mikhmon-modern .sidenav {
    top:76px!important;
    padding-top:14px!important;
    height:calc(100dvh - 76px)!important;
    max-height:calc(100dvh - 76px)!important;
  }
  body.mikhmon-modern.mm-sidebar-open:after {
    inset:60px 0 0!important;
  }
}

/* Sidebar contrast: blue/green/pink/dark use a deep surface and white text. */
body.mikhmon-modern.theme-blue .sidenav,
body.mikhmon-modern.theme-green .sidenav,
body.mikhmon-modern.theme-pink .sidenav,
body.mikhmon-modern.theme-dark .sidenav {
  background:#10243a!important;
  color:#f4f8ff!important;
  border-right-color:#29435f!important;
}
body.mikhmon-modern.theme-blue .sidenav :is(a,button,.menu,.dropdown-btn),
body.mikhmon-modern.theme-green .sidenav :is(a,button,.menu,.dropdown-btn),
body.mikhmon-modern.theme-pink .sidenav :is(a,button,.menu,.dropdown-btn),
body.mikhmon-modern.theme-dark .sidenav :is(a,button,.menu,.dropdown-btn),
body.mikhmon-modern.theme-blue .sidenav :is(i,span),
body.mikhmon-modern.theme-green .sidenav :is(i,span),
body.mikhmon-modern.theme-pink .sidenav :is(i,span),
body.mikhmon-modern.theme-dark .sidenav :is(i,span) {
  color:#eaf3ff!important;
}
body.mikhmon-modern.theme-blue .sidenav .menu:hover,
body.mikhmon-modern.theme-blue .sidenav .dropdown-btn:hover,
body.mikhmon-modern.theme-green .sidenav .menu:hover,
body.mikhmon-modern.theme-green .sidenav .dropdown-btn:hover,
body.mikhmon-modern.theme-pink .sidenav .menu:hover,
body.mikhmon-modern.theme-pink .sidenav .dropdown-btn:hover,
body.mikhmon-modern.theme-dark .sidenav .menu:hover,
body.mikhmon-modern.theme-dark .sidenav .dropdown-btn:hover {
  background:#1b3855!important;
  color:#ffffff!important;
}
body.mikhmon-modern.theme-blue .sidenav .active,
body.mikhmon-modern.theme-green .sidenav .active,
body.mikhmon-modern.theme-pink .sidenav .active,
body.mikhmon-modern.theme-dark .sidenav .active {
  color:#ffffff!important;
}

/* Light theme keeps a light drawer with dark readable labels. */
body.mikhmon-modern.theme-light .sidenav {
  background:#f8fafc!important;
  color:#172033!important;
  border-right-color:#d7e0eb!important;
}
body.mikhmon-modern.theme-light .sidenav :is(a,button,.menu,.dropdown-btn),
body.mikhmon-modern.theme-light .sidenav :is(i,span) {
  color:#172033!important;
}
body.mikhmon-modern.theme-light .sidenav .menu:hover,
body.mikhmon-modern.theme-light .sidenav .dropdown-btn:hover {
  background:#e8eef6!important;
  color:#101828!important;
}

/* Mobile login: remove legacy table/floats that shift fields to one side. */
body.mikhmon-modern .mm-login-box {
  float:none!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  width:min(520px,calc(100% - 32px))!important;
  max-width:520px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.mikhmon-modern .mm-login-box .card,
body.mikhmon-modern .mm-login-box .card-body,
body.mikhmon-modern .mm-login-form {
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.mikhmon-modern .mm-login-table {
  display:table!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  table-layout:fixed!important;
}
body.mikhmon-modern .mm-login-table tr,
body.mikhmon-modern .mm-login-table td {
  width:100%!important;
  max-width:100%!important;
}
body.mikhmon-modern .mm-login-table td {
  display:table-cell!important;
  padding-left:6px!important;
  padding-right:6px!important;
  text-align:center!important;
}
body.mikhmon-modern .mm-login-table input.form-control,
body.mikhmon-modern .mm-login-table input.btn-login {
  display:block!important;
  float:none!important;
  position:static!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
@media(max-width:650px) {
  body.mikhmon-modern .mm-login-box {
    width:calc(100% - 28px)!important;
    max-width:460px!important;
    margin:22px auto!important;
  }
  body.mikhmon-modern .mm-login-box .card-body {
    padding:14px!important;
  }
  body.mikhmon-modern .mm-login-form {
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.mikhmon-modern .mm-login-table {
    width:100%!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }
  body.mikhmon-modern .mm-login-table td {
    padding:7px 5px!important;
  }
}

/* ================================================================
   STAGE 54 — COLORED THEME CONTRAST FIX
   Blue / Green / Pink use dark surfaces + bright text. Their accent
   colors remain distinct. Dark and Light themes are intentionally
   untouched.
   ================================================================ */
body.mikhmon-modern.theme-blue,
body.mikhmon-modern.theme-green,
body.mikhmon-modern.theme-pink {
  --mm-bg:#091625;
  --mm-surface:#122338;
  --mm-surface-alt:#1a3048;
  --mm-text:#f4f8ff;
  --mm-muted:#b8c8da;
  --mm-border:#29435f;
  --mm-shadow:0 8px 24px rgba(0,0,0,.20);
  color:var(--mm-text)!important;
}
body.mikhmon-modern.theme-blue { --mm-accent:#2787ff; --mm-accent-strong:#55a2ff; }
body.mikhmon-modern.theme-green { --mm-accent:#20b978; --mm-accent-strong:#45d69a; }
body.mikhmon-modern.theme-pink { --mm-accent:#df55a4; --mm-accent-strong:#f17abd; }

/* Main surfaces and legacy Mikhmon panels/cards. */
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) #main,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .main-container,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .card,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .card-body,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .card-header,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .box,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .well,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .panel,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .panel-heading,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .panel-body,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .modal-content,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .modal-window,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .dropdown-menu {
  background-color:var(--mm-surface)!important;
  color:var(--mm-text)!important;
  border-color:var(--mm-border)!important;
}

/* Make ordinary text readable across legacy widgets and generated cards. */
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) #main,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .main-container,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .card,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .box,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .well,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .panel,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .modal-content,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .dropdown-menu {
  color:var(--mm-text)!important;
}
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) #main :is(h1,h2,h3,h4,h5,h6,p,label,small,strong,b,span,legend,dt,dd,li,td,th),
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .card :is(h1,h2,h3,h4,h5,h6,p,label,small,strong,b,span,legend,dt,dd,li,td,th),
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .box :is(h1,h2,h3,h4,h5,h6,p,label,small,strong,b,span,legend,dt,dd,li,td,th),
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .panel :is(h1,h2,h3,h4,h5,h6,p,label,small,strong,b,span,legend,dt,dd,li,td,th),
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .modal-content :is(h1,h2,h3,h4,h5,h6,p,label,small,strong,b,span,legend,dt,dd,li,td,th) {
  color:var(--mm-text)!important;
}
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) #main a,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .card a,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .box a,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .panel a {
  color:#8fc5ff;
}
body.mikhmon-modern.theme-green #main a,
body.mikhmon-modern.theme-green .card a,
body.mikhmon-modern.theme-green .box a { color:#72e5b2; }
body.mikhmon-modern.theme-pink #main a,
body.mikhmon-modern.theme-pink .card a,
body.mikhmon-modern.theme-pink .box a { color:#ff9bd0; }

/* Tables: consistent dark header/body and bright readable content. */
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) table,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) table tbody,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) table tr,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) table td {
  background-color:var(--mm-surface)!important;
  color:var(--mm-text)!important;
  border-color:var(--mm-border)!important;
}
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) table th,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) thead,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .table thead th {
  background-color:var(--mm-surface-alt)!important;
  color:#f4f8ff!important;
  border-color:var(--mm-border)!important;
}

/* Form controls and placeholders. */
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) input:not([type=checkbox]):not([type=radio]),
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) select,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) textarea,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .form-control {
  background-color:#0d1c2d!important;
  color:#f4f8ff!important;
  border-color:var(--mm-border)!important;
}
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) input::placeholder,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) textarea::placeholder {
  color:#9fb1c5!important;
  opacity:1!important;
}
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) select option {
  background:#122338!important;
  color:#f4f8ff!important;
}

/* Buttons retain their own accent/background, but never inherit dark text. */
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .btn,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) button,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) input[type=submit],
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .btn :is(i,span),
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) button :is(i,span) {
  color:#ffffff!important;
}
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .bg-white,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .well[style*="background"],
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) [class*="bg-light"] {
  background-color:var(--mm-surface-alt)!important;
  color:var(--mm-text)!important;
}
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .text-dark,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .text-muted,
body.mikhmon-modern:is(.theme-blue,.theme-green,.theme-pink) .text-secondary {
  color:var(--mm-muted)!important;
}


/* STAGE 58 — clean router identity card: no secondary resource labels */
body.mikhmon-modern .bilnet-router-card {
  min-height:64px!important;
  padding:11px 12px!important;
}
body.mikhmon-modern .bilnet-router-meta {
  gap:0!important;
  justify-content:center!important;
}
body.mikhmon-modern .bilnet-router-meta strong {
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:850!important;
  letter-spacing:.15px!important;
}
body.mikhmon-modern .bilnet-router-dot {
  font-size:10px!important;
  margin-right:7px!important;
}

/* STAGE 62 — PPPoE customer live monitor styled like Ether Status. */
body.mikhmon-modern .orbitz-pppoe-traffic-card .card-body{display:flex;flex-direction:column;min-height:310px}
body.mikhmon-modern .orbitz-ppp-search-label{display:block;margin:0 0 7px;color:var(--mm-muted);font-size:11px;font-weight:650}
body.mikhmon-modern .orbitz-ppp-search{height:38px;margin-bottom:9px;border:1px solid var(--mm-border);border-radius:9px;background:var(--mm-surface-alt);color:var(--mm-text);font-size:12px}
body.mikhmon-modern .orbitz-ppp-interface-list{height:126px;max-height:126px;min-height:126px;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin}
body.mikhmon-modern .orbitz-ppp-row{grid-template-columns:9px minmax(0,1fr) minmax(92px,auto) auto;gap:8px;min-height:53px;padding:6px 2px}
body.mikhmon-modern .orbitz-ppp-row .orbitz-interface-name{min-width:0}
body.mikhmon-modern .orbitz-ppp-row .orbitz-interface-name strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mm-text);font-size:11px}
body.mikhmon-modern .orbitz-ppp-row .orbitz-interface-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mm-muted);font-size:10px}
body.mikhmon-modern .orbitz-ppp-row .orbitz-wan-rates{min-width:92px;font-size:10px}
body.mikhmon-modern .orbitz-ppp-row .orbitz-status-pill{min-width:55px;text-align:center;font-size:9px}
body.mikhmon-modern .orbitz-pppoe-traffic-card .orbitz-panel-foot{margin-top:8px}
@media(max-width:520px){body.mikhmon-modern .orbitz-ppp-row{grid-template-columns:9px minmax(0,1fr) minmax(82px,auto);gap:7px}body.mikhmon-modern .orbitz-ppp-row .orbitz-wan-rates{min-width:82px;font-size:9px}body.mikhmon-modern .orbitz-ppp-row .orbitz-status-pill{grid-column:2/4;justify-self:start;margin-top:-3px}}


/* BILNET FIX2 — equal three monitoring cards on desktop/tablet widths.
   Keep the three cards in one row from 761px upward; stack on small phones. */
@media (min-width:761px) {
  body.mikhmon-modern .orbitz-secondary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
  body.mikhmon-modern .orbitz-secondary-grid > .card {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (max-width:760px) {
  body.mikhmon-modern .orbitz-secondary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.mikhmon-modern .orbitz-secondary-grid > .card {
    grid-column: auto !important;
  }
}


/* BILNET 3UP FINAL — equal-width monitoring cards; override older responsive rules. */
@media screen and (min-width: 761px) {
  body.mikhmon-modern #reloadHome.orbitz-dashboard .orbitz-secondary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
  }
  body.mikhmon-modern #reloadHome.orbitz-dashboard .orbitz-secondary-grid > .card {
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
  }
}
@media screen and (max-width: 760px) {
  body.mikhmon-modern #reloadHome.orbitz-dashboard .orbitz-secondary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.mikhmon-modern #reloadHome.orbitz-dashboard .orbitz-secondary-grid > .card {
    grid-column: auto !important;
  }
}


/* BILNET FIX — align the three monitoring panel footers.
   PPPoE has a search field above its scroll list, so its list is shorter
   by the search-field height to keep all three footnotes on one baseline. */
@media screen and (min-width:761px) {
  body.mikhmon-modern #reloadHome.orbitz-dashboard .orbitz-secondary-grid > .orbitz-pppoe-traffic-card {
    display:flex !important;
    flex-direction:column !important;
  }
  body.mikhmon-modern #reloadHome.orbitz-dashboard .orbitz-secondary-grid > .orbitz-pppoe-traffic-card > .card-body {
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
  }
  body.mikhmon-modern #reloadHome.orbitz-dashboard .orbitz-pppoe-interface-list {
    height:126px !important;
    min-height:126px !important;
    max-height:126px !important;
    flex:0 0 126px !important;
  }
  body.mikhmon-modern #reloadHome.orbitz-dashboard .orbitz-pppoe-traffic-card .orbitz-panel-foot {
    margin-top:8px !important;
  }
}
@media screen and (max-width:760px) {
  body.mikhmon-modern #reloadHome.orbitz-dashboard .orbitz-pppoe-interface-list {
    height:190px !important;
    min-height:190px !important;
    max-height:190px !important;
  }
}


/* BILNET FIX3 — match PPPoE list/footer baseline with Ether and Netwatch. */
@media screen and (min-width:761px) {
  #reloadHome #orbitzPppList.orbitz-ppp-interface-list {
    height:126px !important;
    min-height:126px !important;
    max-height:126px !important;
    flex:0 0 126px !important;
  }
}
@media screen and (max-width:760px) {
  #reloadHome #orbitzPppList.orbitz-ppp-interface-list {
    height:190px !important;
    min-height:190px !important;
    max-height:190px !important;
  }
}