:root {
  --bg: #0d1117;
  --bg-sidebar: #10151f;
  --bg-card: #161d2b;
  --bg-card-alt: #1c2536;
  --bg-hover: #1e2739;
  --border: #263042;
  --text: #e6e9ef;
  --text-muted: #8b95a7;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  --gray: #6b7280;
}

* { box-sizing: border-box; }
#page-loading-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--accent); z-index: 9999; opacity: 0;
  transition: width 2s ease-out, opacity 0.2s ease-out;
  pointer-events: none;
}
#page-loading-bar.active { opacity: 1; width: 80%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0; background: var(--bg); color: var(--text);
}
a { color: var(--accent); }
hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px; flex-shrink: 0; background: var(--bg-sidebar);
  border-right: 1px solid var(--border); padding: 20px 0; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-org { padding: 0 20px 20px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.sidebar-org-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.sidebar-org-name { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.sidebar-nav a {
  display: block; padding: 9px 12px; border-radius: 6px; color: var(--text-muted);
  text-decoration: none; font-size: 14px; font-weight: 500;
}
.sidebar-nav a:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-nav a.active { background: var(--accent); color: #fff; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 14px 24px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30; background: var(--bg);
}
.topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar-link { font-size: 13px; color: var(--text-muted); text-decoration: none; font-weight: 500; }
.topbar-link:hover, .topbar-link.active { color: var(--text); }
button.topbar-link { background: none; border: none; padding: 0; cursor: pointer; font-size: 15px; line-height: 1; }
.topbar-divider { width: 1px; height: 16px; background: var(--border); }
.topbar-user-name { font-size: 13px; font-weight: 500; color: var(--text); }
.topbar-logout-form { display: inline-flex; }
.topbar-logout { color: var(--text-muted); padding: 0; }
.topbar-logout:hover { color: var(--text); }
main { max-width: 1100px; margin: 0 auto; padding: 28px 24px; width: 100%; }

table { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { font-weight: 500; color: var(--text-muted); background: var(--bg-card-alt); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover { background: var(--bg-hover); }
tbody tr:last-child td { border-bottom: none; }
.actions a, .link-btn { color: var(--accent); text-decoration: none; margin-right: 10px; font-size: 13px; }
.link-btn { background: none; border: none; padding: 0; cursor: pointer; font-size: 13px; font-family: inherit; }

.toolbar { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); text-decoration: none; cursor: pointer; font-size: 14px;
}
.btn:hover { background: var(--bg-hover); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-success { background: #16803c; color: #fff; border-color: #16803c; }

.form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.form label { display: flex; flex-direction: column; font-size: 13px; color: var(--text-muted); gap: 4px; }
.form input[type=text], .form input[type=password], .form input[type=number], .form select {
  padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
  background: var(--bg-card); color: var(--text);
}
.form label.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.form-actions { display: flex; gap: 8px; margin-top: 8px; }
.password-with-generate { display: flex; gap: 6px; }
.password-with-generate input { flex: 1; min-width: 0; }

.flashes { margin-bottom: 16px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; font-size: 14px; }
.flash-success { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
.flash-error { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.acting-tenant-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acting-tenant-banner .link-btn { color: #f87171; text-decoration: underline; }

.script {
  background: #05070c; color: #d7e0e5; padding: 14px 16px; border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; overflow-x: auto; border: 1px solid var(--border);
}
.hint { color: var(--text-muted); font-size: 13px; }

.markdown-body { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 24px 20px; }
.markdown-body h1 { display: none; }
.markdown-body h2 { font-size: 17px; font-weight: 600; margin: 24px 0 4px; }
.markdown-body h2:first-child { margin-top: 20px; }
.markdown-body p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.markdown-body ul { margin: 8px 0; padding-left: 20px; }
.markdown-body li { font-size: 14px; line-height: 1.6; margin-bottom: 4px; }
.markdown-body strong { color: var(--text); }
.markdown-body code { background: var(--bg-card-alt); border-radius: 4px; padding: 1px 5px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.markdown-body hr { margin: 16px 0; }

.chart-block { margin-bottom: 28px; }
.chart-wrap { background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border); padding: 12px; }
.chart-wrap-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.chart-wrap-header h3 { margin: 0; font-size: 15px; font-weight: 500; color: var(--text); }
.chart-select {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
  background: var(--bg-card-alt); color: var(--text);
}
.chart-canvas-holder { position: relative; height: 380px; }

.site-group { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.site-group summary { padding: 12px 16px; cursor: pointer; font-weight: 500; list-style: revert; color: var(--text); }
.site-group summary:hover { background: var(--bg-hover); }
.site-group table { margin-top: 0; border-radius: 0; }
.site-group[open] summary { border-bottom: 1px solid var(--border); }

/* Dashboard */
h2 { font-weight: 600; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-header h1 { margin: 0; font-size: 22px; font-weight: 600; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.kpi-value { font-size: 26px; font-weight: 700; line-height: 1.1; }
.kpi-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }
.kpi-card.kpi-online .kpi-value { color: var(--green); }
.kpi-card.kpi-offline .kpi-value { color: var(--red); }
.kpi-card.kpi-degraded .kpi-value { color: var(--amber); }
.kpi-card.kpi-disabled .kpi-value { color: var(--gray); }

.offline-banner {
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.offline-banner-title { color: #f87171; font-weight: 600; font-size: 14px; margin-right: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.35); color: #fca5a5; border-radius: 20px; padding: 4px 6px 4px 12px; font-size: 13px;
}
.chip button {
  background: none; border: none; color: #fca5a5; cursor: pointer; font-size: 14px; line-height: 1;
  padding: 2px 6px; border-radius: 50%;
}
.chip button:hover { background: rgba(239,68,68,.3); }
.offline-banner-actions { margin-left: auto; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.pill-online { background: rgba(34,197,94,.15); color: var(--green); }
.pill-offline { background: rgba(239,68,68,.15); color: var(--red); }
.pill-degraded { background: rgba(245,158,11,.15); color: var(--amber); }
.pill-disabled { background: rgba(107,114,128,.2); color: var(--gray); }
.pill-role-admin { background: rgba(239,68,68,.15); color: #f87171; }
.pill-role-operator { background: rgba(59,130,246,.15); color: #60a5fa; }
.pill-role-viewer { background: rgba(107,114,128,.2); color: var(--gray); }
.pill-role-super_admin { background: rgba(168,85,247,.18); color: #c084fc; }
.pill-medium-fiber { background: rgba(234,179,8,.18); color: #eab308; }
.pill-medium-copper { background: rgba(184,115,51,.2); color: #d08a4f; }

.bar-cell { display: flex; align-items: center; gap: 8px; }
.bar { width: 60px; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; flex-shrink: 0; }
.bar-fill { height: 100%; background: var(--accent); }
.bar-fill.bar-warn { background: var(--amber); }
.bar-fill.bar-crit { background: var(--red); }

.collapsible { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.collapsible summary { padding: 12px 16px; cursor: pointer; font-weight: 500; list-style: revert; color: var(--text); }
.collapsible summary:hover { background: var(--bg-hover); }
.collapsible table { margin-top: 0; border-radius: 0; }
.collapsible[open] summary { border-bottom: 1px solid var(--border); }
.nested-row td { padding: 4px 14px 10px 34px; border-bottom: none; background: var(--bg-card-alt); }
.onu-nest { background: var(--bg-card); margin-bottom: 0; }
.onu-nest summary { padding: 8px 12px; font-size: 13px; color: var(--text-muted); }
.onu-nest table { font-size: 13px; }
.kv-table td:first-child { color: var(--text-muted); }
.kv-table td:last-child { text-align: right; }

.bar-split { display: inline-flex; width: 180px; height: 20px; border-radius: 4px; overflow: hidden; }
.bar-split span { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.bar-split-used { background: var(--amber); color: #2b1c00; }
.bar-split-free { background: var(--green); color: #06280f; }

/* Mobile */
.mobile-topbar {
  display: none; align-items: center; gap: 12px; background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border); padding: 12px 16px; position: sticky; top: 0; z-index: 40;
}
.mobile-topbar button {
  background: none; border: none; color: var(--text); font-size: 22px; line-height: 1;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.mobile-topbar button:hover { background: var(--bg-hover); }
.mobile-topbar-title { font-size: 15px; font-weight: 600; }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 45; }
.sidebar-backdrop.open { display: block; }

@media (max-width: 768px) {
  .mobile-topbar { display: flex; }
  .topbar { padding: 10px 12px; }
  .topbar-right { gap: 8px; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 50; width: 260px;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); }
  main { padding: 16px 12px; }
  .page-header { flex-wrap: wrap; gap: 8px; }
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .kpi-card { padding: 12px; }
  .kpi-value { font-size: 22px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .chart-wrap { padding: 10px; }
  .form { max-width: 100%; }
}

/* Auth pages (login / first-run setup) */
.auth-body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0;
  position: relative; overflow: hidden;
}
/* Original network-graph background (nodes + connecting lines), not
   sourced from anywhere - drawn entirely in SVG so there's no copyright
   concern and it matches the app's own topology-map visual language. */
.auth-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.auth-bg-worldmap { opacity: .55; }
.auth-bg-lines line { opacity: .45; }
.auth-node { fill: var(--accent); }
.auth-node-a { fill: #3b82f6; opacity: .85; }
.auth-node-b { fill: #60a5fa; opacity: .7; }
.auth-node-c { fill: var(--green); opacity: .8; }
.auth-node { animation: authNodePulse 4.5s ease-in-out infinite; }
.auth-node:nth-of-type(3n) { animation-delay: -1.2s; }
.auth-node:nth-of-type(5n) { animation-delay: -2.6s; }
.auth-node:nth-of-type(7n) { animation-delay: -3.4s; }
@keyframes authNodePulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.auth-wrap { width: 100%; max-width: 380px; padding: 20px; position: relative; z-index: 1; }
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-brand-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.auth-brand-name { display: block; font-size: 22px; font-weight: 700; margin-top: 2px; }
.auth-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.auth-card h1 { margin: 0 0 16px; font-size: 18px; font-weight: 600; }
.auth-card .form { max-width: 100%; }
.auth-card .form-actions { margin-top: 4px; }
.auth-card .form-actions .btn { width: 100%; text-align: center; }

/* Inline per-row user edit (Users page). Positioned via JS as position:
   fixed (not absolute) - the table has overflow:hidden for its rounded
   corners, which would otherwise clip this popup whenever the table is
   too short to give it room below the row (e.g. only one user). Fixed
   positioning escapes any ancestor's overflow clipping entirely. */
.user-edit { display: inline-block; position: relative; }
.user-edit summary { list-style: none; }
.user-edit summary::-webkit-details-marker { display: none; }
.user-edit-form {
  position: fixed; z-index: 50;
  background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; width: 220px; max-width: 80vw;
}

/* Topology map */
.topo-viewport {
  overflow: auto; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); height: 70vh; min-height: 360px;
}
.topo-canvas { position: relative; width: 100%; height: 100%; min-width: 900px; }
.topo-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.topo-line { stroke-width: 3; pointer-events: none; }
.topo-line-hit { stroke: transparent; stroke-width: 16px; pointer-events: stroke; cursor: pointer; }
.topo-line-ok { stroke: var(--green); }
.topo-line-degraded { stroke: var(--amber); }
.topo-line-hot { stroke: #f97316; }
.topo-line-no_data { stroke: var(--gray); stroke-dasharray: 6 4; }
.topo-line-medium-fiber { stroke: #eab308; }
.topo-line-medium-copper { stroke: #b87333; }
.topo-node {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; gap: 4px; user-select: none;
}
.topo-node-draggable { cursor: grab; }
.topo-node-dragging { cursor: grabbing; z-index: 20; }
.topo-node-dot {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--border);
}
.topo-status-online { background: var(--green); }
.topo-status-degraded { background: var(--amber); }
.topo-status-offline { background: var(--red); }
.topo-status-disabled, .topo-status-no_main_device { background: var(--gray); }
.topo-node-label {
  font-size: 12px; color: var(--text); background: var(--bg-card-alt); padding: 2px 8px;
  border-radius: 10px; white-space: nowrap; border: 1px solid var(--border);
}
.topo-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.topo-legend-group { display: flex; align-items: center; gap: 8px; }
.topo-legend-group .topo-node-dot { width: 10px; height: 10px; margin-left: 8px; }
.topo-legend-group .topo-node-dot:first-child { margin-left: 0; }
.topo-line-sample { display: inline-block; width: 20px; height: 3px; margin-left: 8px; }
.topo-line-sample:first-child { margin-left: 0; }
.topo-line-sample.topo-line-ok { background: var(--green); }
.topo-line-sample.topo-line-degraded { background: var(--amber); }
.topo-line-sample.topo-line-hot { background: #f97316; }
.topo-line-sample.topo-line-no_data { background: var(--gray); }
.topo-line-sample.topo-line-medium-fiber { background: #eab308; }
.topo-line-sample.topo-line-medium-copper { background: #b87333; }
.topo-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topo-mode-toggle { display: flex; gap: 8px; }
.topo-mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.topo-mode-btn:disabled { opacity: .4; cursor: not-allowed; }
.topo-share-toggle { margin: 0; }
.topo-gmap { height: 70vh; min-height: 360px; }
.topo-share-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px;
}
.topo-share-row { display: flex; gap: 8px; margin-top: 6px; }
.topo-share-row input {
  flex: 1; background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 6px 10px; font-size: 13px; font-family: monospace;
}
.invite-link-input {
  width: 100%; min-width: 260px; background: var(--bg-card-alt); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); padding: 6px 10px; font-size: 13px; font-family: monospace;
}
.topo-tooltip {
  position: fixed; z-index: 1000; background: #f8f9fb; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #12161f; pointer-events: none;
  max-width: 260px; box-shadow: 0 4px 12px rgba(0,0,0,.4); line-height: 1.6;
}

#notification-toasts {
  position: fixed; bottom: 16px; right: 16px; z-index: 10000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  max-width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.notif-toast {
  pointer-events: auto; position: relative; width: 100%;
  background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--gray);
  border-radius: 8px; padding: 10px 30px 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  font-size: 13px; line-height: 1.5; color: var(--text);
  opacity: 0; transform: translateX(24px); transition: opacity .2s ease-out, transform .2s ease-out;
}
.notif-toast-in { opacity: 1; transform: translateX(0); }
.notif-toast-leaving { opacity: 0; transform: translateX(24px); }
.notif-toast-alert { border-left-color: var(--red); }
.notif-toast-ok { border-left-color: var(--green); }
.notif-toast-close {
  position: absolute; top: 6px; right: 8px; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 16px; line-height: 1; padding: 2px 4px;
}
.notif-toast-close:hover { color: var(--text); }
.notif-toast-body { word-break: break-word; }
/* Sits at the top of the stack (first child of a bottom-anchored column) and
   only appears once toasts pile up - a bulk control above a single toast is
   itself clutter. */
.notif-clear-all {
  pointer-events: auto; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 12px;
  color: var(--text-muted); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.notif-clear-all:hover { color: var(--text); border-color: var(--text-muted); }
.notif-clear-all:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 2px; }