.app-shell{display:flex;min-height:100%;margin-left:220px;}
.main{flex:1;padding:8px 14px 16px;display:flex;flex-direction:column;gap:12px;}

/* Materialize's .row .col.sN/.row .col.mN/.row .col.lN rules all set
   margin-left:auto (meant to pair with its .push/.offset system); on a
   floated element that shoves each column toward the right and makes
   multi-column rows collapse/center instead of filling the row
   left-to-right. Reset it at matching specificity (.row .col.sN etc.) so
   it beats Materialize's own rule regardless of source order, restoring
   normal float-grid behavior for every breakpoint class. */
.row .col.s1,.row .col.s2,.row .col.s3,.row .col.s4,.row .col.s5,.row .col.s6,
.row .col.s7,.row .col.s8,.row .col.s9,.row .col.s10,.row .col.s11,.row .col.s12,
.row .col.m1,.row .col.m2,.row .col.m3,.row .col.m4,.row .col.m5,.row .col.m6,
.row .col.m7,.row .col.m8,.row .col.m9,.row .col.m10,.row .col.m11,.row .col.m12,
.row .col.l1,.row .col.l2,.row .col.l3,.row .col.l4,.row .col.l5,.row .col.l6,
.row .col.l7,.row .col.l8,.row .col.l9,.row .col.l10,.row .col.l11,.row .col.l12{
  margin-left:0;
}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;padding:0 24px;background:var(--bg);
  border-bottom:1px solid var(--border);box-shadow:none;position:sticky;top:0;z-index:40;
  margin:-8px -14px 0 -14px;
}
.topbar-title{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap;font-size:14px;font-weight:700;letter-spacing:.2px;color:var(--text);}
.topbar-title-brand{font-size:15px;font-weight:700;letter-spacing:.1px;margin-right:2px;color:var(--text);}
.topbar-title-crumb{display:inline-flex;align-items:center;gap:4px;min-width:0;color:var(--text-3);}
.topbar-title-sep{color:var(--text-3);font-weight:600;}
.topbar-title-page{color:var(--text-3);font-weight:600;white-space:nowrap;}
.topbar-title-page.active{color:#f05a28;}
.topbar-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-shrink:0;}
.topbar-hamburger{
  display:none;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-2);
  box-shadow:none;cursor:pointer;flex-shrink:0;
}
.topbar-hamburger i{font-size:20px;}
.topbar-hamburger:hover{border-color:var(--nw-accent);color:var(--nw-accent);}
@media(max-width:900px){.topbar-hamburger{display:inline-flex;}}
.user-chip{display:inline-flex;align-items:center;gap:8px;padding:0;border-radius:999px;background:transparent;border:none;box-shadow:none;color:var(--text);}
.user-chip-avatar{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:#f05a28;}
.user-chip-avatar.role-admin{background:#f05a28;}
.user-chip-avatar.role-user{background:#8892a6;}
.user-chip-name{font-size:14px;font-weight:700;line-height:1;color:var(--text);}
.theme-pill{display:inline-flex;align-items:center;padding:0;background:transparent;border:none;border-radius:999px;box-shadow:none;gap:4px;}
.theme-pill-btn{width:28px;height:28px;border-radius:999px;border:none;background:transparent;color:var(--text-3);display:inline-grid;place-items:center;cursor:pointer;transition:background 120ms,color 120ms,transform 120ms;}
.theme-pill-btn:hover{color:var(--text);}
.theme-pill-btn--on{background:rgba(0,0,0,.05);color:var(--text);}
[data-theme="dark"] .theme-pill-btn--on{background:rgba(255,255,255,.08);color:var(--text);}
.theme-pill-btn svg{width:15px;height:15px;display:block;}
.theme-cycle-btn{width:30px;height:30px;padding:0;background:transparent;border:1px solid var(--border);box-shadow:none;color:var(--text-3);}
.theme-cycle-btn:hover{background:rgba(148,163,184,.08);color:var(--text);}
.theme-cycle-icon{display:inline-flex;align-items:center;justify-content:center;}

aside.sidebar{
  width:220px;height:100vh;background:#1a1c1e !important;color:#e8edf7 !important;
  border-right:1px solid #333639;position:fixed;top:0;left:0;bottom:0;
  display:flex;flex-direction:column;flex-shrink:0;
}
aside.sidebar .logo-area{display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid #333639;flex-shrink:0;height:56px;}
aside.sidebar .logo-img{display:block;flex-shrink:0;object-fit:contain;image-rendering:-webkit-optimize-contrast;}
aside.sidebar .logo-img-wordmark{height:28px;width:auto;max-width:188px;}
aside.sidebar .logo-img-icon{display:none;height:30px;width:30px;}
aside.sidebar.collapsed .logo-img-wordmark{display:none;}
aside.sidebar.collapsed .logo-img-icon{display:block;}
aside.sidebar .sidebar-nav{padding-top:6px;flex:1 1 0;overflow:hidden;display:flex;flex-direction:column;background:#1a1c1e !important;}
aside.sidebar .snav-section{display:flex;flex-direction:column;background:#1a1c1e !important;}
aside.sidebar .snav-section-btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:8px 12px;background:transparent !important;border:none;border-left:4px solid transparent;
  color:#b0b3b8 !important;font-size:13px;font-weight:500;font-family:var(--font-sans);
  cursor:pointer;text-align:left;user-select:none;text-decoration:none;
  transition:background 120ms,color 120ms;box-shadow:none;
  min-height:unset;line-height:1.4;margin:0;height:auto;
}
aside.sidebar a,aside.sidebar button,aside.sidebar li{margin:0;padding:0;min-height:unset;line-height:unset;}
aside.sidebar .snav-section-btn:hover{background:#25282b !important;color:#fff !important;}
aside.sidebar .snav-section-btn.open{background:#222528 !important;color:#e0e0e0 !important;}
aside.sidebar .snav-section-btn.active{background:#23262a !important;color:#f05a28 !important;border-left-color:#f05a28;padding-left:8px;}
aside.sidebar .snav-section-label{display:flex;align-items:center;gap:10px;flex:1;font-size:13.5px;}
aside.sidebar .snav-section-label .nav-icon{width:16px;height:16px;opacity:.75;flex-shrink:0;}
aside.sidebar .snav-section-btn.active .snav-section-label .nav-icon{opacity:1;color:#f05a28;}
aside.sidebar .snav-chevron{width:13px;height:13px;flex-shrink:0;opacity:.4;transition:transform 180ms ease,opacity 180ms;}
aside.sidebar .snav-chevron.open{transform:rotate(180deg);opacity:.7;}
aside.sidebar .snav-items{display:flex;flex-direction:column;background:#1a1c1e !important;}
aside.sidebar .snav-item,aside.sidebar .snav-group-btn,aside.sidebar .snav-sub-item{
  display:flex;align-items:center;
  color:#7a7e85 !important;text-decoration:none;font-family:var(--font-sans);
  background:transparent !important;border:none;border-left:3px solid transparent;
  transition:color 150ms,background 150ms,border-color 150ms;
  white-space:nowrap;overflow:hidden;cursor:pointer;text-align:left;width:100%;
  box-shadow:none;
}
aside.sidebar .snav-item,aside.sidebar .snav-group-btn{padding:8px 12px 8px 40px;font-size:13px;font-weight:400;min-height:unset;line-height:1.4;margin:0;}
aside.sidebar .snav-sub-item{padding:7px 12px 7px 56px;font-size:12.5px;color:#666b73 !important;min-height:unset;line-height:1.4;margin:0;}
aside.sidebar .snav-item:hover,aside.sidebar .snav-group-btn:hover,aside.sidebar .snav-sub-item:hover{color:#e8e8e8 !important;background:#23262a !important;}
aside.sidebar .snav-group-btn:disabled,aside.sidebar .snav-item.disabled,aside.sidebar .snav-sub-item.disabled{opacity:.28;cursor:not-allowed;pointer-events:none;}
aside.sidebar .snav-item[aria-disabled="true"],aside.sidebar .snav-group-btn.disabled,aside.sidebar .snav-sub-item.disabled{opacity:.28;cursor:not-allowed;pointer-events:none;}
aside.sidebar .sidebar-logout{width:100%;}
aside.sidebar .snav-item.active,aside.sidebar .snav-group-btn.active{color:#f05a28 !important;font-weight:600;border-left-color:#f05a28;}
aside.sidebar .snav-sub-item.active{color:#f05a28 !important;font-weight:600;background:rgba(240,90,40,.14) !important;border-left-color:#f05a28;}
aside.sidebar .snav-item.rail,aside.sidebar .snav-group-btn.rail,aside.sidebar .snav-sub-item.rail{border-left-color:#3a3d42;}
aside.sidebar .snav-item.active.rail,aside.sidebar .snav-group-btn.active.rail,aside.sidebar .snav-sub-item.active.rail{border-left-color:#f05a28;}
aside.sidebar .snav-group{display:flex;flex-direction:column;background:#1a1c1e !important;}
aside.sidebar .snav-group-btn .snav-chevron{margin-left:auto;}
aside.sidebar .snav-sub{display:flex;flex-direction:column;background:#1a1c1e !important;}
aside.sidebar .snav-label{flex:1;min-width:0;}
.nav-icon{width:16px;min-width:16px;height:16px;display:block;flex-shrink:0;color:currentColor;}
aside.sidebar .sidebar-bottom{margin-top:auto;border-top:1px solid #333639;padding:12px;display:flex;flex-direction:column;gap:8px;}
aside.sidebar .sidebar-bottom form{display:block;}
aside.sidebar .sidebar-logout{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:9px 16px;background:transparent !important;border:1px solid #3d4044;border-radius:999px;
  color:#f05a28 !important;font-size:13px;font-family:var(--font-sans);cursor:pointer;
  transition:border-color 150ms,color 150ms,background 150ms;box-shadow:none;
}
aside.sidebar .sidebar-logout:hover{border-color:#f05a28;background:rgba(240,90,40,.06) !important;}

@media(max-width:900px){
  aside.sidebar{transform:translateX(-100%);transition:transform 180ms ease;z-index:50;}
  body.sidebar-open aside.sidebar{transform:translateX(0);}
  .app-shell{margin-left:0;}
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:45;}
  body.sidebar-open .sidebar-backdrop{display:block;}
}

[data-sidebar-theme="light"] aside.sidebar { background:#f8fafc !important; color:#162033 !important; border-right-color:#dfe6ef; }
[data-sidebar-theme="light"] aside.sidebar .sidebar-nav,
[data-sidebar-theme="light"] aside.sidebar .snav-section,
[data-sidebar-theme="light"] aside.sidebar .snav-items,
[data-sidebar-theme="light"] aside.sidebar .snav-group,
[data-sidebar-theme="light"] aside.sidebar .snav-sub { background:#f8fafc !important; }
[data-sidebar-theme="light"] aside.sidebar .snav-section-btn { color:#5b6677 !important; border-left-color:transparent; }
[data-sidebar-theme="light"] aside.sidebar .snav-section-btn:hover { background:rgba(0,0,0,.04) !important; color:#162033 !important; }
[data-sidebar-theme="light"] aside.sidebar .snav-section-btn.active { color:var(--nw-accent) !important; border-left-color:var(--nw-accent); background:rgba(0,210,138,.08) !important; }
[data-sidebar-theme="light"] aside.sidebar .snav-section-label { color:#5b6677; }
[data-sidebar-theme="light"] aside.sidebar .snav-sub-item { color:#5b6677; }
[data-sidebar-theme="light"] aside.sidebar .snav-sub-item:hover { background:rgba(0,0,0,.04) !important; color:#162033; }
[data-sidebar-theme="light"] aside.sidebar .snav-sub-item.active { color:var(--nw-accent); background:rgba(0,210,138,.08) !important; }
[data-sidebar-theme="light"] aside.sidebar .logo-area { border-color:#dfe6ef; }
[data-sidebar-theme="light"] aside.sidebar .snav-footer { border-color:#dfe6ef; }
[data-sidebar-theme="light"] aside.sidebar .snav-item,
[data-sidebar-theme="light"] aside.sidebar .snav-group-btn { color:#5b6677 !important; }
[data-sidebar-theme="light"] aside.sidebar .snav-item:hover,
[data-sidebar-theme="light"] aside.sidebar .snav-group-btn:hover { color:#162033 !important; background:rgba(0,0,0,.04) !important; }
[data-sidebar-theme="light"] aside.sidebar .snav-item.active,
[data-sidebar-theme="light"] aside.sidebar .snav-group-btn.active { color:var(--nw-accent) !important; border-left-color:var(--nw-accent); }
[data-sidebar-theme="light"] aside.sidebar .snav-item.rail,
[data-sidebar-theme="light"] aside.sidebar .snav-group-btn.rail,
[data-sidebar-theme="light"] aside.sidebar .snav-sub-item.rail { border-left-color:#dfe6ef; }
[data-sidebar-theme="light"] aside.sidebar .snav-item.active.rail,
[data-sidebar-theme="light"] aside.sidebar .snav-group-btn.active.rail,
[data-sidebar-theme="light"] aside.sidebar .snav-sub-item.active.rail { border-left-color:var(--nw-accent); }
[data-sidebar-theme="light"] aside.sidebar .nav-icon { color:inherit; }
[data-sidebar-theme="light"] aside.sidebar .sidebar-bottom { border-top-color:#dfe6ef; }
[data-sidebar-theme="light"] aside.sidebar .sidebar-logout { border-color:#dfe6ef; color:#f05a28 !important; }
[data-sidebar-theme="light"] aside.sidebar .sidebar-logout:hover { border-color:#f05a28; background:rgba(240,90,40,.06) !important; }

/* ============================================================
   Global card / grid primitives (Materialize skin)
   ============================================================ */

.row.nw-row{display:flex;flex-wrap:wrap;margin:0 -8px 8px;}
.row.nw-row > .col{padding:0 8px;margin-bottom:16px;box-sizing:border-box;width:100%;}
.row.nw-row > .col.s12{width:100%;}
/* Stat-card KPI tiles (col s12 m6 l3/l4): 2-per-row on phones (real
   Materialize `s6` behavior — a single KPI stretched edge-to-edge on a
   phone reads as sparse), 2-per-row on tablets (m6), and all 4 in one row
   on laptop/desktop (l3/l4). Each rule is scoped to its own breakpoint so
   they don't compete at larger widths. */
@media(max-width:600px){
  .row.nw-row > .col.s12.m6.l3,.row.nw-row > .col.s12.m6.l4{width:50%;}
}
@media(min-width:601px){
  .row.nw-row > .col.m6{width:50%;}
}
@media(min-width:993px){
  .row.nw-row > .col.l3{width:25%;}
  .row.nw-row > .col.l4{width:33.3333%;}
  .row.nw-row > .col.l6{width:50%;}
  .row.nw-row > .col.l8{width:66.6667%;}
}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,.03);margin:0;overflow:hidden;
  display:flex;flex-direction:column;position:relative;
}
.card .card-content{padding:20px;flex:1;}
.card .card-title{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--text);margin:0;}

.nw-card-hd{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.nw-card-hd .card-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);}
.nw-card-sub{font-size:11px;color:var(--text-3);font-family:var(--font-mono,monospace);margin-left:2px;}

button.card{border:1px solid var(--border);background:var(--card);text-align:left;cursor:pointer;width:100%;padding:0;font:inherit;}
button.card:hover{border-color:var(--nw-accent);}

/* Stat tiles (status row). .card-action is always present (empty) on these
   for markup consistency with the standard Materialize card structure, but
   the vendored Materialize CSS gives .card-action an unconditional
   padding + border-top even when empty — collapse it back down here. */
.nw-stat-card .card-content{padding:16px 18px;display:flex;flex-direction:column;gap:6px;overflow:hidden;}
.nw-stat-card .card-action,.rules-stat-card .card-action{padding:0;border-top:none;min-height:0;}
.nw-stat-card .card-action:empty,.rules-stat-card .card-action:empty{display:none;}
.hero-stats-label{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-3);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-stats-value{font-size:26px;font-weight:700;line-height:1.1;color:var(--text);font-family:var(--font-mono,monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-stats-value.overview-ok{color:var(--nw-accent);}
.hero-stats-value.overview-bad{color:#ff4d6d;}
.hero-stats-meta{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text-3);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Cards sit 2-per-row on phones (col s12 m6 l3/l4) — scale down to stay
   compact in a half-width column instead of overflowing/wrapping. */
@media(max-width:600px){
  .nw-stat-card .card-content{padding:14px 14px;}
  .hero-stats-label{font-size:10.5px;}
  .hero-stats-value{font-size:20px;}
  .hero-stats-meta{font-size:10.5px;}
}
@media(max-width:400px){
  .nw-stat-card .card-content{padding:12px 12px;}
  .hero-stats-value{font-size:18px;}
}

/* Refresh / flat button */
.btn-flat.nw-refresh{
  background:transparent;border:1px solid var(--border);color:var(--text-2);
  box-shadow:none;border-radius:6px;text-transform:none;font-weight:600;
  height:30px;line-height:30px;padding:0 12px;font-size:12px;
}
.btn-flat.nw-refresh:hover{border-color:var(--nw-accent);color:var(--nw-accent);background:var(--nw-accent-dim);}

/* "More Info" pill CTA (.nw-more-info) — accent-filled, distinct from the
   plain outlined .nw-refresh so it reads as a clickable next-step action */
.nw-more-info{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 16px;
  border-radius:999px;background:var(--nw-accent);color:#031a10;
  font-size:12px;font-weight:700;text-transform:none;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(0,229,160,.25);border:none;
}
.nw-more-info svg{flex-shrink:0;}
.nw-more-info:hover{opacity:.9;color:#031a10;}

/* ============================================================
   Overview page widgets (resources / throughput / traffic flow /
   interfaces) — dashboard_page.go
   ============================================================ */

.overview-card{
  margin-bottom:0;
  flex:1;
  height:100%;
}
.overview-split-row > .col{
  display:flex;
  align-items:stretch;
}

/* Radial donut resource rings */
.overview-resource-grid{display:flex;justify-content:space-around;flex-wrap:wrap;text-align:center;gap:16px;padding:4px 0 0;}
.overview-radial{display:flex;flex-direction:column;align-items:center;gap:8px;}
.overview-ring{
  --pct:0;width:96px;height:96px;border-radius:50%;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--ring,var(--nw-accent)) calc(var(--pct)*1%),var(--border) 0);
}
.overview-ring::before{content:"";position:absolute;inset:10px;background:var(--card);border-radius:50%;}
.overview-ring span{position:relative;font-size:15px;font-weight:700;color:var(--text);font-family:var(--font-mono,monospace);}
.overview-radial-label{font-size:11px;font-weight:700;color:var(--text-2);letter-spacing:.02em;margin:0;}
.overview-radial-sub{font-size:11px;color:var(--text-3);font-family:var(--font-mono,monospace);}
.overview-resource-foot{
  width:100%;font-family:var(--font-mono,monospace);font-size:12px;color:var(--text-3);
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border);text-align:left;
}
.overview-resource-loads{margin-left:14px;}

/* Throughput legend */
.overview-legend,.overview-throughput-legend,.ov-tp-legend{display:flex;gap:16px;font-family:var(--font-mono,monospace);font-size:12px;margin-bottom:8px;color:var(--text-2);}
.ov-tp-in,.ov-tp-out{display:inline-flex;align-items:center;gap:6px;}
.ov-tp-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

/* Traffic Flow diagram */
.tf-card{margin-bottom:0;}
.tf-icon{color:var(--nw-accent);display:inline-flex;}
.tf-rates{display:flex;gap:14px;margin-left:auto;font-family:var(--font-mono,monospace);font-size:12px;}
.tf-rate-in{color:#4da6ff;}
.tf-rate-out{color:#ff4d6d;}
.tf-canvas-wrap{padding:8px 16px 20px;}
.tf-canvas{width:100%;height:180px;display:block;}

/* Interfaces list */
.ov-iface-groups{display:flex;flex-direction:column;gap:18px;}
.iface-group-title{
  display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-2);
}
.iface-group-count{
  background:var(--bg3,rgba(148,163,184,.14));color:var(--text-3);border-radius:10px;
  padding:1px 8px;font-size:11px;font-weight:700;
}
.iface-empty{padding:14px 0;color:var(--text-3);font-size:12px;}
.iface-card{
  background:var(--bg3,rgba(148,163,184,.06));border:1px solid var(--border);
  border-radius:8px;padding:14px 16px;margin-top:10px;position:relative;
}
.iface-card-top{display:flex;flex-direction:column;gap:8px;}
.iface-name-row{display:flex;align-items:center;gap:8px;}
.iface-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.iface-status-up{background:var(--nw-accent);}
.iface-status-down{background:#ff4d6d;}
.iface-name{font-family:var(--font-mono,monospace);font-weight:700;color:var(--text);font-size:14px;}
.iface-type-chip{
  font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--text-3);
  background:var(--bg3,rgba(148,163,184,.14));border-radius:6px;padding:2px 6px;
}
.iface-status-chip{
  font-family:var(--font-mono,monospace);font-size:10px;font-weight:700;
  border-radius:12px;padding:2px 8px;margin-left:auto;
}
.iface-status-chip.iface-status-up{background:rgba(0,229,160,.15);color:var(--nw-accent);}
.iface-status-chip.iface-status-down{background:rgba(255,77,109,.15);color:#ff4d6d;}
.iface-addresses{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-left:16px;
}
.iface-address{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.iface-address-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-3);
}
.iface-address-value{
  font-family:var(--font-mono,monospace);
  color:var(--text-2);
  font-size:12px;
  overflow-wrap:anywhere;
}
.iface-stats{display:flex;align-items:center;gap:20px;margin-top:14px;font-family:var(--font-mono,monospace);font-size:12px;}
.iface-stat{display:flex;align-items:center;gap:6px;color:var(--text-2);}
.iface-stat-icon{font-weight:700;}
.iface-tx{color:var(--nw-accent);}
.iface-rx{color:#4da6ff;}
.iface-stat-label{color:var(--text-3);}
.iface-stat-val{color:var(--text);font-weight:700;}
.iface-stat-sep{width:1px;height:16px;background:var(--border);}

@media(max-width:700px){
  .iface-addresses{grid-template-columns:1fr;margin-left:0;}
}

/* ============================================================
   Global card shell (.au-card) — used by list pages
   (routing, services, audit, rules, whitelists, …)
   ============================================================ */

.au-card,.table-card{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,.03);overflow:hidden;
}
.au-card-hd,.table-title-area{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--border);justify-content:space-between;
}
.au-card-title{font-size:13px;font-weight:700;color:var(--text);letter-spacing:.02em;display:flex;align-items:center;gap:8px;}
.au-card-sub,.wl-count-badge{font-size:12px;color:var(--text-3);font-family:var(--font-mono,monospace);}

/* ============================================================
   Page header (.au-header / .au-title / .au-subtitle / .au-controls)
   ============================================================ */

.au-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.au-title{margin:0;font-weight:700;color:var(--text);font-size:1.8rem}
.au-subtitle{margin:4px 0 0;font-family:var(--font-mono,monospace);color:var(--text-3);font-size:.9rem}
.au-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.au-audit-controls{align-items:flex-start}
.au-date-inline{position:relative;display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.au-date-btn{min-width:88px;height:48px}
.au-date-panel{
  display:none;position:absolute;top:56px;right:0;left:auto;z-index:25;
  width:min(340px,calc(100vw - 32px));padding:16px;border:1px solid var(--border);
  border-radius:14px;background:var(--card);box-shadow:0 18px 42px rgba(0,0,0,.12)
}
.au-date-panel.is-open{display:block}
.au-date-form{display:flex;flex-direction:column;gap:12px}
.au-date-panel-row{display:flex;flex-direction:column;gap:6px}
.au-date-label{font-size:.82rem;font-weight:600;color:var(--text-2)}
.au-date-panel-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:4px}
.is-page-refresh{
  width:48px;height:48px;min-width:48px;min-height:48px;padding:0!important;border-radius:50%!important;
  display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto
}
.is-page-refresh i{margin:0!important;line-height:1!important;font-size:20px}
@media(max-width:600px){
  .au-header{align-items:flex-start}
  .au-controls{width:100%;justify-content:flex-end}
  .au-controls form{width:auto;display:inline-flex;justify-content:flex-end}
  .au-controls .cfg-input{min-width:0;width:124px;max-width:124px;flex:0 0 124px}
  .au-controls .is-page-refresh{width:42px;height:42px;min-width:42px;min-height:42px}
}

/* ============================================================
   Global table (.au-table / .au-table-wrap)
   ============================================================ */

.au-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.au-table,table.highlight.responsive-table{
  width:100%;border-collapse:collapse;font-size:13px;background:transparent;
}
.au-table th,table.highlight.responsive-table th{
  padding:10px 16px;text-align:left;font-size:11px;font-weight:700;
  color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--border);background:var(--card);white-space:nowrap;
  box-shadow:none;
}
.au-table td,table.highlight.responsive-table td{
  padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text);
  vertical-align:middle;
}
.au-table tbody tr:hover td,table.highlight.responsive-table tbody tr:hover td{background:var(--bg3,rgba(148,163,184,.05));}
.au-table tbody tr:nth-child(even) td,table.highlight.responsive-table tbody tr:nth-child(even) td{background:var(--bg3,rgba(148,163,184,.03));}
.au-table tbody tr:last-child td,table.highlight.responsive-table tbody tr:last-child td{border-bottom:none;}

/* Filter row (column-header search inputs) */
.sv-filter-row th,.rl-filter-row th{padding:8px 16px;background:var(--card);}
.sv-col-input,.minimal-filter{
  width:100%;height:30px;padding:0 8px;border:none;border-bottom:1px solid var(--border);
  background:transparent;color:var(--text);font-size:12px;box-shadow:none;margin:0;
}
.sv-col-input:focus,.minimal-filter:focus{border-bottom-color:var(--nw-accent);outline:none;box-shadow:none;}
.sv-col-select,.minimal-select{
  height:30px;padding:0 6px;border:1px solid var(--border);border-radius:6px;
  background:var(--card);color:var(--text-2);font-size:12px;display:block;width:100%;
}
.sv-col-clear{
  border:1px solid var(--border);background:transparent;color:var(--text-2);
  border-radius:6px;font-size:11px;font-weight:600;padding:4px 8px;cursor:pointer;
}
.sv-col-clear:hover{border-color:var(--nw-accent);color:var(--nw-accent);}

/* ============================================================
   Pagination (.wl-pagination / .wl-pg-*)
   ============================================================ */

.wl-pagination,.table-footer-controls{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;border-top:1px solid var(--border);flex-wrap:wrap;
}
.rows-per-page{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);}
.table-page-select{width:auto;min-width:60px;}
.table-range{margin-left:6px;}

/* ============================================================
   Global "Sort by time" control (.nw-sort-group / .nw-sort-select)
   Reusable across any table's footer/toolbar — newest/oldest first.
   ============================================================ */
.nw-sort-group{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);}
.nw-sort-select{
  height:30px;padding:0 24px 0 8px;border:1px solid var(--border);border-radius:6px;
  background:var(--card);color:var(--text-2);font-size:12px;width:auto;min-width:130px;
}
.nw-sort-select:focus{border-color:var(--nw-accent);outline:none;}
.wl-pg-btn{
  height:30px;padding:0 10px;border-radius:6px;border:1px solid var(--border);
  background:var(--card);color:var(--text-2);font-size:12px;font-weight:600;cursor:pointer;
}
.wl-pg-btn:hover:not(:disabled){border-color:var(--nw-accent);color:var(--nw-accent);}
.wl-pg-btn:disabled{opacity:.4;cursor:not-allowed;}
.wl-pg-info{font-size:12px;color:var(--text-2);margin:0 4px;}
.wl-pg-size{height:30px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text-2);font-size:12px;}
.wl-pg-left,.wl-pg-right{display:flex;align-items:center;gap:8px;}
.wl-pg-center{display:flex;align-items:center;gap:6px;}
.wl-pg-cur{font-size:12px;font-weight:700;color:var(--text);}
.wl-pg-of{font-size:12px;color:var(--text-3);}
.wl-pg-sep{font-size:12px;color:var(--text-3);}
.wl-pg-count{font-size:12px;color:var(--text-3);}
.sv-pg-size-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);}
.sv-pg-size-select{height:28px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text-2);font-size:12px;padding:0 6px;}

/* Stat-tile value tone helpers */
.no-tile--green .hero-stats-value,.no-tile--green .gl-stat-value{color:var(--nw-accent);}
.no-tile--red .hero-stats-value,.no-tile--red .gl-stat-value{color:#ff4d6d;}
.no-tile--yellow .hero-stats-value,.no-tile--yellow .gl-stat-value{color:#ffb547;}
ul.pagination{font-family:var(--font-sans,'Inter',system-ui,sans-serif);}
ul.pagination li{background:transparent;}
ul.pagination li a{color:var(--text-2);font-family:inherit;font-size:13px;}
ul.pagination li.active{background:transparent;}
ul.pagination li.active.blue{background-color:transparent!important;}
ul.pagination li.active a{color:var(--nw-accent);font-weight:700;font-family:inherit;}
ul.pagination li.disabled a{color:var(--text-3);}

/* Per-page "Easy mode" toggle (.em-page-toggle) — native Materialize .switch/.lever markup */
.em-page-toggle{margin:0;}

/* ============================================================
   Chips / rounded buttons / icon buttons
   ============================================================ */

.chip{
  display:inline-flex;align-items:center;padding:0 12px;height:28px;line-height:28px;
  border-radius:14px;background:var(--bg3,rgba(148,163,184,.14));color:var(--text-2);
  font-size:12px;font-weight:600;
}
.chip.small{height:24px;line-height:24px;font-size:11px;padding:0 10px;border-radius:12px;margin:0;}
.chip-success{background:rgba(0,229,160,.15);color:var(--nw-accent);}
.chip-danger{background:rgba(255,77,109,.15);color:#ff4d6d;}
.chip .close{
  cursor:pointer;font-size:16px!important;margin-left:8px;color:inherit;opacity:.65;
  line-height:inherit;
}
.chip .close:hover{opacity:1;}

/* ============================================================
   Table filter modal + active-filter chip row (.tf-filter-btn /
   .tf-filter-chips) — replaces the old in-table filter row
   (.*-grid-filters) with a Filter button + popup modal, matching
   the /firewall/trace-style control layout, and shows the applied
   filters as closable .chip tags under the table title.
   ============================================================ */
.tf-filter-btn{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:8px;
  border:1px solid var(--border);background:var(--card);color:var(--text-2);font-size:.85rem;
  font-weight:600;cursor:pointer;
}
.tf-filter-btn:hover{border-color:rgba(0,229,160,.45);color:var(--nw-accent);}
.tf-filter-btn.has-active{border-color:rgba(0,229,160,.6);color:var(--nw-accent);background:var(--nw-accent-dim);}
.tf-filter-btn i{font-size:18px;}
.tf-filter-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;background:var(--nw-accent);color:#031a10;font-size:10px;font-weight:700;
}
.tf-filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.tf-filter-chips{display:flex;flex-wrap:wrap;gap:8px;}
.tf-filter-chips:empty{display:none;}
.tf-filter-modal-body{display:flex;flex-direction:column;gap:14px;padding:20px 22px;max-height:70vh;overflow-y:auto;}
.tf-filter-field{display:flex;align-items:center;gap:14px;}
.tf-filter-field label{flex:0 0 110px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--text-3);text-transform:uppercase;}
.tf-filter-field .custom-input,.tf-filter-field .custom-select{flex:1;min-width:0;width:auto;}
@media(max-width:560px){
  .tf-filter-field{flex-direction:column;align-items:stretch;gap:6px;}
  .tf-filter-field label{flex:none;}
}
.tf-filter-actions{display:flex;justify-content:space-between;gap:10px;padding:14px 22px;border-top:1px solid var(--border);}

/* Soft rounded icon action buttons (info / edit / delete) */
.rl-actions-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;}
.custom-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:40px;height:40px;border-radius:8px;box-shadow:none;padding:0;
  cursor:pointer;transition:background-color .2s ease;margin:0;vertical-align:middle;
}
.custom-icon-btn i{font-size:20px;}
.rl-page .rl-actions-row .custom-icon-btn{
  width:auto;height:auto;padding:0 4px;border:none;border-radius:0;background:transparent;
  color:var(--text-2);box-shadow:none;
}
.rl-page .rl-actions-row .custom-icon-btn:hover{background:transparent;color:var(--text);}
.rl-page .rl-actions-row .btn-delete{color:#ef4444;}
.rl-page .rl-actions-row .btn-delete:hover{color:#dc2626;}
.rl-page .rl-actions-row .btn-edit{color:#3b82f6;}
.rl-page .rl-actions-row .btn-info{color:var(--text-2);}
.pf-page .rl-actions-row .custom-icon-btn{
  width:auto;height:auto;padding:0 4px;border:none;border-radius:0;background:transparent;
  color:var(--text-2);box-shadow:none;
}
.pf-page .rl-actions-row .custom-icon-btn:hover{background:transparent;color:var(--text);}
.pf-page .rl-actions-row .btn-delete{color:#ef4444;}
.pf-page .rl-actions-row .btn-delete:hover{color:#dc2626;}
.pf-page .rl-actions-row .btn-edit{color:#3b82f6;}
.pf-page .rl-actions-row .btn-info{color:var(--text-2);}
.dn-page .rl-actions-row .custom-icon-btn{
  width:auto;height:auto;padding:0 4px;border:none;border-radius:0;background:transparent;
  color:var(--text-2);box-shadow:none;
}
.dn-page .rl-actions-row .custom-icon-btn:hover{background:transparent;color:var(--text);}
.dn-page .rl-actions-row .btn-delete{color:#ef4444;}
.dn-page .rl-actions-row .btn-delete:hover{color:#dc2626;}
.dn-page .rl-actions-row .btn-info{color:var(--text-2);}
.sv-page .rl-actions-row .custom-icon-btn{
  width:auto;height:auto;padding:0 4px;border:none;border-radius:0;background:transparent;
  color:var(--text-2);box-shadow:none;
}
.sv-page .rl-actions-row .custom-icon-btn:hover{background:transparent;color:var(--text);}
.sv-page .rl-actions-row .btn-delete{color:#ef4444;}
.sv-page .rl-actions-row .btn-delete:hover{color:#dc2626;}
.sv-page .rl-actions-row .btn-edit{color:#3b82f6;}
.th-page .rl-actions-row .custom-icon-btn{
  width:auto;height:auto;padding:0 4px;border:none;border-radius:0;background:transparent;
  color:var(--text-2);box-shadow:none;
}
.th-page .rl-actions-row .custom-icon-btn:hover{background:transparent;color:var(--text);}
.th-page .rl-actions-row .btn-delete{color:#ef4444;}
.th-page .rl-actions-row .btn-delete:hover{color:#dc2626;}
.sv-page .rl-actions-row .btn-info{color:var(--text-2);}
.um2-page .rl-actions-row .custom-icon-btn{
  width:auto;height:auto;padding:0 4px;border:none;border-radius:0;background:transparent;
  color:var(--text-2);box-shadow:none;
}
.um2-page .rl-actions-row .custom-icon-btn:hover{background:transparent;color:var(--text);}
.um2-page .rl-actions-row .btn-delete{color:#ef4444;}
.um2-page .rl-actions-row .btn-delete:hover{color:#dc2626;}
.um2-page .rl-actions-row .btn-edit{color:#3b82f6;}
.um2-page .rl-actions-row .btn-info{color:var(--text-2);}
.conn-overview-page .rl-actions-row .custom-icon-btn{
  width:auto;height:auto;padding:0 4px;border:none;border-radius:0;background:transparent;
  color:var(--text-2);box-shadow:none;
}
.conn-overview-page .rl-actions-row .custom-icon-btn:hover{background:transparent;color:var(--text);}
.conn-overview-page .rl-actions-row .btn-info{color:var(--text-2);}
.sv-page .custom-icon-btn{
  width:auto;height:auto;min-width:0;padding:0;border:none;border-radius:0;background:transparent;
  color:var(--text-2);box-shadow:none;line-height:1;display:inline-flex;
}
.sv-page .custom-icon-btn:hover{background:transparent;color:var(--text);}
.sv-page .custom-icon-btn i{font-size:22px;line-height:1;}
.sv-page .btn-delete{color:#ef4444;}
.sv-page .btn-delete:hover{color:#dc2626;}
.sv-page .btn-edit{color:#3b82f6;}
.sv-page .sv-col-clear{
  border:none;background:transparent;color:var(--text-2);padding:0 6px;font-weight:600;
  box-shadow:none;cursor:pointer;
}
.sv-page .sv-col-clear:hover{color:var(--text);}
.vpn-page .custom-icon-btn{
  width:auto;height:auto;min-width:0;padding:0;border:none;border-radius:0;background:transparent;
  color:var(--text-2);box-shadow:none;line-height:1;display:inline-flex;
}
.vpn-page .custom-icon-btn:hover{background:transparent;color:var(--text);}
.vpn-page .custom-icon-btn i{font-size:22px;line-height:1;}
.btn-info{border:1px solid #cbd5e1;background-color:#fff;color:#0f172a;}
.btn-info:hover,.btn-info.is-open{background-color:#f8fafc;}
.btn-edit{border:1px solid #bfdbfe;background-color:#eff6ff;color:#2563eb;}
.btn-edit:hover{background-color:#dbeafe;}
.btn-delete{border:1px solid #fecaca;background-color:#fef2f2;color:#dc2626;}
.btn-delete:hover{background-color:#fee2e2;}

/* Rules table expandable detail row */
.rl-detail-row td,.dn-detail-row td,.pf-detail-row td{background:var(--bg3,rgba(148,163,184,.05));padding:14px 24px !important;}
.rl-detail-grid{display:flex;flex-wrap:wrap;gap:20px 32px;}
.rl-detail-item{display:flex;flex-direction:column;gap:4px;min-width:120px;}
.rl-detail-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);}
.rl-detail-value{font-size:13px;color:var(--text);}

.btn-flat-rounded{
  border-radius:8px!important;box-shadow:none!important;text-transform:none!important;font-weight:600;
}
.btn-icon-only{padding:0 8px;border-radius:50%;min-width:36px;}

/* ============================================================
   Whitelist summary tiles (custom-card / summary-*)
   ============================================================ */

.custom-card{
  background:var(--card);border-radius:10px!important;border:1px solid var(--border);
  box-shadow:0 2px 4px rgba(0,0,0,.02)!important;padding:24px;margin-bottom:20px;
}
.custom-card.card-no-padding{padding:0;}
.rules-stat-card{padding:16px 18px;margin-bottom:16px;}
.rules-stat-card .card-content{padding:0;display:flex;flex-direction:column;gap:6px;overflow:hidden;}
.rules-stat-card .summary-title{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rules-stat-card .summary-value{font-size:24px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Cards sit 2-per-row on phones (col s12 m6 l3/l4 — see .row.nw-row rules),
   so tiles need to stay compact and truncate rather than wrap/overflow in
   a half-width column at narrow widths, not scale up as if full-width. */
@media(max-width:600px){
  .rules-stat-card{padding:14px 14px;}
  .rules-stat-card .summary-title{font-size:10.5px;}
  .rules-stat-card .summary-value{font-size:17px;line-height:1.05;}
  .rules-stat-card .hero-stats-meta{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@media(max-width:400px){
  .rules-stat-card{padding:12px 12px;}
  .rules-stat-card .summary-value{font-size:15px;}
}
.ha-page .rules-stat-card .summary-value,
.au-page .rules-stat-card .summary-value{
  overflow-wrap:anywhere;
}
.au-page .iface-summary-value{
  min-width:0;
}
@media(max-width:600px){
  .au-page .iface-summary-value{font-size:13px;line-height:1.08;letter-spacing:-.02em;}
  .au-page .iface-summary-mono{font-size:12px;word-break:break-all;}
  .au-page .iface-summary-traffic{font-size:12px;word-break:break-word;}
}
@media(max-width:400px){
  .au-page .iface-summary-value{font-size:11px;}
}
.summary-title,.stat-label{
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-3);
  text-transform:uppercase;margin-bottom:5px;display:block;
}
.summary-value,.stat-number{font-size:24px;font-weight:700;margin:0;color:var(--text);font-family:var(--font-mono,monospace);}
.stat-number{font-size:2.2rem;line-height:1;}
.stat-label{margin-top:8px;margin-bottom:0;}

/* Generic tone text helpers (pair with .stat-number, .summary-card h4, etc.) */
.text-green{color:var(--nw-accent)!important;}
.text-orange{color:#ffb547!important;}
.text-red{color:#ff4d6d!important;}
.text-dark{color:var(--text)!important;}

/* ============================================================
   Generic card header (.card-header) — used with .custom-card
   ============================================================ */

.card-header{
  padding:16px 24px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
}
.card-header-title{font-weight:600;font-size:.95rem;display:flex;align-items:center;color:var(--text);}
.card-header-icon{color:var(--nw-accent);font-size:20px;margin-right:10px;}
.card-body{padding:24px;}

/* ============================================================
   Generic outlined / accent buttons (.btn-outline / .btn-mint)
   ============================================================ */

.btn-outline{
  background-color:var(--card)!important;border:1px solid var(--border);border-radius:8px;
  color:var(--text-2)!important;box-shadow:none!important;text-transform:none;font-weight:500;
  height:38px;line-height:36px;padding:0 16px;display:inline-flex;align-items:center;
  transition:background-color .2s;
}
.btn-outline:hover{background-color:var(--bg3,rgba(148,163,184,.08))!important;}
.btn-outline i{font-size:18px;margin-right:6px;}
.btn-mint{
  background-color:var(--accent-dim,rgba(0,229,160,.18))!important;color:var(--nw-accent)!important;
  box-shadow:none!important;border-radius:6px;text-transform:none;font-weight:600;
  height:42px;line-height:42px;width:100%;display:flex;align-items:center;justify-content:center;
}
.btn-mint i{font-size:18px;margin-right:6px;}
.btn-mint.btn-auto{width:auto;padding:0 20px;}
.btn-outline-red{
  background-color:var(--card)!important;border:1px solid rgba(255,77,109,.35);color:#ff4d6d!important;
  border-radius:20px;height:32px;line-height:30px;padding:0 16px;font-size:.8rem;box-shadow:none!important;
  text-transform:uppercase;font-weight:700;letter-spacing:.03em;
}
.btn-outline-red:hover{background-color:rgba(255,77,109,.08)!important;}

/* Generic card padding helper (pairs with .custom-card) */
.custom-card.card-padding{padding:24px;}

/* Section header pair used inside cards (.section-subtitle / .section-title) */
.section-subtitle{font-size:11px;font-family:var(--font-mono,monospace);color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px;}
.section-title{font-size:1.1rem;font-weight:700;margin:0;color:var(--text);}
.config-row{display:flex;align-items:center;margin-top:24px;gap:16px;flex-wrap:wrap;}

/* ============================================================
   Generic form primitives (.custom-input / .input-label / .search-wrapper)
   ============================================================ */

.input-label{
  font-size:11px;font-weight:600;color:var(--text-2);letter-spacing:.03em;
  margin-bottom:6px;display:block;text-transform:uppercase;
}
.input-label span{font-weight:400;color:var(--text-3);text-transform:lowercase;}
.custom-input{
  width:100%;background-color:var(--card);border:1px solid var(--border);border-radius:6px;
  padding:0 14px;height:42px;font-size:.9rem;color:var(--text);outline:none;
  transition:border-color .2s;box-sizing:border-box;
}
.custom-input:focus{border-color:var(--nw-accent);}
.custom-input::placeholder{color:var(--text-3);}
.search-wrapper{position:relative;width:300px;max-width:100%;flex:1 1 220px;min-width:0;}
.search-wrapper i{position:absolute;left:12px;top:10px;color:var(--text-3);font-size:18px;}
.custom-select{
  background-color:var(--card);border:1px solid var(--border);border-radius:6px;
  height:40px;padding:0 14px;font-size:.9rem;color:var(--text);outline:none;cursor:pointer;
  width:300px;box-sizing:border-box;
}

/* ============================================================
   Table filter panel (.filter-section / .filter-grid / .filter-group)
   ============================================================ */

.filter-section{padding:24px;border-bottom:1px solid var(--border);}
.filter-grid{display:flex;gap:20px;margin-top:8px;flex-wrap:wrap;}
.filter-group{flex:1;min-width:180px;}
.filter-label{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:8px;display:block;}
.filter-group .custom-select,.filter-group .custom-input{width:100%;}

/* ============================================================
   Table pagination footer (.pagination-footer / .page-show-ctrl /
   .page-nav-ctrl) — simple text-link pager, distinct from the
   numbered .wl-pagination component
   ============================================================ */

.pagination-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 24px;background-color:var(--card);flex-wrap:wrap;gap:12px;
}
.page-show-ctrl{display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:500;color:var(--text-2);}
.page-show-ctrl select{width:60px;height:32px;padding:0 8px;}
.page-nav-ctrl{display:flex;align-items:center;gap:15px;font-size:.85rem;font-weight:500;flex-wrap:wrap;}
.page-nav-ctrl a{color:var(--text);cursor:pointer;}
.page-nav-ctrl a:hover{color:var(--text-3);}
.page-nav-ctrl a.disabled{color:var(--text-3);cursor:not-allowed;pointer-events:none;}
.page-nav-text{color:var(--text-3);}

/* Confidence percentage badge (.badge-confidence) */
.badge-confidence{
  background-color:rgba(255,77,109,.15);color:#ff4d6d;font-size:.8rem;font-weight:700;
  padding:4px 12px;border-radius:12px;
}
.badge-confidence.badge-medium{background-color:rgba(255,181,71,.15);color:#ffb547;}
.badge-confidence.badge-low{background-color:rgba(0,229,160,.15);color:var(--nw-accent);}
.search-wrapper input{padding-left:44px;height:38px;}
.form-flex-row{display:flex;align-items:flex-end;gap:20px;margin-bottom:16px;flex-wrap:wrap;}
.form-col-5{flex:5;min-width:200px;}
.form-col-2{flex:2;min-width:140px;}

/* ============================================================
   Generic empty state (.empty-state)
   ============================================================ */

.empty-state{padding:80px 20px;text-align:center;}
.empty-state i{font-size:42px;color:var(--text-3);margin-bottom:12px;}
.empty-state h6{margin:0 0 8px;font-weight:600;color:var(--text);font-size:1rem;}
.empty-state p{margin:0;color:var(--text-3);font-family:var(--font-mono,monospace);font-size:.85rem;}

/* ============================================================
   Generic page header row (.header-row / .page-title / .page-subtitle)
   ============================================================ */

.header-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;gap:12px;flex-wrap:wrap;}
.page-title{font-weight:700;font-size:1.5rem;margin:0 0 4px;color:var(--text);}
.page-subtitle{font-family:var(--font-mono,monospace);color:var(--text-3);font-size:.85rem;margin:0;}

/* ============================================================
   Outline button color variants (.btn-outline.green-text / .red-text)
   and solid accent button (.btn-solid-green)
   ============================================================ */

.btn-outline.green-text{border-color:rgba(0,229,160,.35);color:var(--nw-accent)!important;}
.btn-outline.red-text{border-color:rgba(255,77,109,.35);color:#ff4d6d!important;}
.btn-solid-green{
  background-color:var(--nw-accent)!important;color:#031a10!important;border-radius:6px;
  box-shadow:none!important;text-transform:none;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn-solid-green:hover{opacity:.9;}

/* ============================================================
   Global toast notifications (.nw-toast / nwToast)
   ============================================================ */

.nw-toast-stack{
  --nw-toast-bottom-offset:96px;
  position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom, 0px) + var(--nw-toast-bottom-offset));
  display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 32px));
  z-index:10000;
}
.nw-toast{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  box-shadow:0 12px 30px rgba(15,23,42,.18);font-weight:600;font-size:.95rem;
  color:#fff;animation:nw-toast-in .18s ease-out;
}
.nw-toast-ok{background:#10b981;}
.nw-toast-err{background:#ff4d6d;}
.nw-toast span{flex:1;min-width:0;}
.nw-toast-close{
  border:none;background:transparent;color:inherit;cursor:pointer;font-size:18px;
  line-height:1;padding:0 2px;opacity:.85;
}
.nw-toast-close:hover{opacity:1;}
@keyframes nw-toast-in{
  from{transform:translateY(8px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

@media (max-width: 640px){
  .nw-toast-stack{
    right:16px;
    --nw-toast-bottom-offset:104px;
    max-width:calc(100vw - 32px);
  }
}

.ddos-modal-backdrop{z-index:220;align-items:center;justify-content:center;}
.ddos-modal{
  width:min(760px,calc(100vw - 32px));
  max-height:calc(100vh - 64px);
  overflow:auto;
  padding:0;background:var(--card);border:1px solid var(--border);box-shadow:0 24px 60px rgba(15,23,42,.28);
}
.ddos-modal-hd{padding:20px 24px 12px;border-bottom:1px solid var(--border);}
.ddos-modal-body{display:grid;gap:16px;padding:20px 24px 24px;}
.ddos-modal-desc{margin:0;color:var(--text-3);font-size:.9rem;line-height:1.5;}

.ddos-number-input::-webkit-outer-spin-button,
.ddos-number-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.ddos-number-input{
  -moz-appearance:textfield;
  appearance:textfield;
}

.ddos-pipeline-card{margin-top:16px;}
.ddos-pipeline-section{
  margin-top:18px;
  padding:0 18px 18px;
}
.ddos-pipeline-hd{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 0 14px;
  font-size:1rem;
  font-weight:800;
  color:var(--text);
}
.ddos-pipeline-body{
  padding:0;
}
.ddos-section-break{
  height:22px;
  margin:10px 0 0;
  border-top:1px dashed rgba(148,163,184,.35);
}
.ddos-card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  margin-right:8px;
  color:var(--nw-accent);
  font-size:18px;
  font-weight:800;
  line-height:1;
}
.ddos-slider-wrap{
  padding:6px 2px 0;
}
.ddos-slider{
  width:100%;
  height:38px;
  appearance:auto;
  -webkit-appearance:slider-horizontal;
  cursor:pointer;
}
.ddos-slider::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--nw-accent),rgba(16,185,129,.35));
}
.ddos-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  margin-top:-6px;
  border-radius:50%;
  background:var(--card);
  border:2px solid var(--nw-accent);
  box-shadow:0 2px 8px rgba(16,185,129,.25);
}
.ddos-slider::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--nw-accent),rgba(16,185,129,.35));
}
.ddos-slider::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--card);
  border:2px solid var(--nw-accent);
  box-shadow:0 2px 8px rgba(16,185,129,.25);
}
.ddos-pipeline-form{
  display:flex;
  align-items:center;
  gap:12px;
}
.ddos-profile-select{
  min-width:260px;
  height:38px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  color:var(--text);
  font-size:.95rem;
}
.ddos-profile-apply{
  height:38px;
  line-height:36px;
  padding:0 16px;
  white-space:nowrap;
}

/* ============================================================
   Summary grid (.summary-grid / .summary-card) — simple flex row
   of stat cards, distinct from the .custom-card/.stat-number pair
   ============================================================ */

.summary-grid{display:flex;gap:20px;margin-bottom:30px;flex-wrap:wrap;}
.summary-card{
  flex:1;min-width:160px;background:var(--card);border-radius:10px;border:1px solid var(--border);
  padding:16px 18px;box-shadow:0 2px 4px rgba(0,0,0,.02);
}
.summary-card h4{margin:0 0 8px;font-weight:700;font-size:24px;line-height:1.1;color:var(--text);}
.summary-card h4.text-green{color:var(--nw-accent);}
.summary-card p{margin:0;font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;}

/* ============================================================
   Card header with title+icon and a right-aligned meta slot
   (.card-title-flex / .card-header-right) — pairs with .card-header
   ============================================================ */

.card-title-flex{display:flex;align-items:center;font-weight:700;font-size:.95rem;color:var(--text);}
.card-title-flex i{color:var(--nw-accent);margin-right:10px;font-size:20px;}
.card-header-right{font-family:var(--font-mono,monospace);font-size:.85rem;color:#f59e0b;font-weight:600;}
.card-body-no-pad{padding:0;}

/* ============================================================
   Checkbox label row (.checkbox-label) and module list
   (.module-list-item, used by DDoS protection modules etc.)
   ============================================================ */

.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;}
.checkbox-label span{color:var(--text-2);font-weight:600;font-size:.9rem;}
.checkbox-label input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  flex:0 0 auto;
}

.module-list-item{display:flex;align-items:flex-start;padding:16px 24px;border-bottom:1px solid var(--border);gap:16px;}
.module-list-item:last-child{border-bottom:none;}
.module-list-item > label{margin-top:2px;flex-shrink:0;}
.module-content{flex-grow:1;min-width:0;}
.module-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;gap:8px;}
.module-title{font-weight:600;font-size:.95rem;color:var(--text);}
.module-desc{font-size:.85rem;color:var(--text-3);margin:0;line-height:1.5;}

.badge-critical{
  background-color:rgba(255,77,109,.15);color:#ff4d6d;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:4px;letter-spacing:.04em;white-space:nowrap;
}
.badge-on{color:var(--nw-accent);font-size:11px;font-weight:700;letter-spacing:.04em;}

/* ============================================================
   Generic data table (.custom-table / .td-mono / .table-input)
   ============================================================ */

.custom-table{width:100%;border-collapse:collapse;}
.custom-table th{
  background-color:var(--bg3,rgba(148,163,184,.06));color:var(--text-3);font-size:11px;font-weight:600;
  letter-spacing:.04em;padding:12px 24px;text-transform:uppercase;border-bottom:1px solid var(--border);text-align:left;
}
.custom-table td{padding:12px 24px;border-bottom:1px solid var(--border);font-size:.9rem;color:var(--text);}
.custom-table tr:last-child td{border-bottom:none;}
.td-mono{font-family:var(--font-mono,monospace);color:var(--text-3);font-size:.85rem;}
.table-input{
  background-color:var(--bg3,rgba(148,163,184,.06))!important;border:1px solid var(--border)!important;
  border-radius:4px!important;height:28px!important;margin:0!important;padding:0 8px!important;width:100px!important;
  text-align:right;font-family:var(--font-mono,monospace);color:var(--text)!important;font-size:.85rem!important;
  box-shadow:none!important;
}
.table-input:focus{border-color:var(--nw-accent)!important;}

/* ============================================================
   Policy option cards (.policy-grid / .policy-card) — selectable
   segmented option tiles
   ============================================================ */

.policy-grid{display:flex;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.policy-card{flex:1;min-width:140px;border:1px solid var(--border);border-radius:8px;padding:16px;cursor:pointer;}
.policy-card.active{border:2px solid var(--nw-accent);background-color:var(--accent-dim,rgba(0,229,160,.08));padding:15px;}
.policy-card h6{margin:0 0 4px;font-weight:700;font-size:.9rem;color:var(--text);}
.policy-card.active h6{color:var(--nw-accent);}
.policy-card p{margin:0;font-size:.8rem;color:var(--text-3);}

.check-list{list-style:none;padding:0;margin:0;}
.check-list li{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-2);margin-bottom:8px;}
.check-list i{color:var(--nw-accent);font-size:16px;}

/* Simple domain list rows (dns-blocklist, similar list-style pages) */
.dns-domain-head{
  display:flex;align-items:center;gap:10px;padding:10px 24px;
  background:#1e293b;color:#cbd5e1;font-size:12px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;
}
.dns-domain-head-name{min-width:212px;flex-shrink:0;}
.dns-domain-head-reason{flex:1;}
.dns-domain-head-actions{margin-left:auto;flex-shrink:0;}
.dns-domain-list{display:flex;flex-direction:column;}
.dns-domain-row{
  display:flex;align-items:center;gap:10px;padding:12px 24px;
  border-bottom:1px solid var(--border);color:var(--text-2);flex-wrap:wrap;
}
.dns-domain-row:last-child{border-bottom:none;}
.dns-row-icon{color:var(--nw-accent);flex-shrink:0;}
.dns-domain-name{font-family:var(--font-mono,monospace);font-size:13px;color:var(--text);word-break:break-all;min-width:190px;}
.dns-row-action{margin-left:auto;display:flex;align-items:center;}
.dns-row-delete{
  background:transparent;border:0;padding:0;margin:0;display:flex;align-items:center;justify-content:center;
  color:#ef4444;cursor:pointer;
}
.dns-row-delete:hover{color:#dc2626;}
.dns-row-delete i{font-size:18px;line-height:1;}
.sv-page{padding-bottom:80px;}

/* ============================================================
   Circular / pill action buttons (.btn-circular / .btn-pill-disabled)
   ============================================================ */

.btn-circular{
  background-color:var(--card)!important;border:1px solid var(--border);color:var(--text)!important;
  box-shadow:none!important;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  transition:background-color .2s;padding:0;
}
.btn-circular:hover{background-color:var(--bg3,rgba(148,163,184,.08))!important;}
.btn-circular i{font-size:20px;line-height:40px;}
.btn-pill-disabled{
  background-color:var(--bg3,rgba(148,163,184,.06))!important;border:1px solid var(--border);
  color:var(--text-3)!important;border-radius:20px;box-shadow:none!important;text-transform:none;
  font-weight:600;height:40px;line-height:38px;padding:0 20px;display:inline-flex;align-items:center;
  cursor:not-allowed;
}
.btn-pill-disabled i{font-size:18px;margin-right:6px;color:var(--text-3);}

/* ============================================================
   Detail card header + 2-column info grid (.detail-header /
   .detail-title / .status-badge-green / .status-badge-orange /
   .info-grid / .info-cell / .info-label / .info-value)
   ============================================================ */

.detail-header{
  padding:16px 24px;border-bottom:1px solid var(--border);display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
}
.detail-title{font-weight:700;font-size:.95rem;display:flex;align-items:center;color:var(--text);}
.detail-title i{font-size:18px;margin-right:8px;color:var(--nw-accent);}
.status-badge-green{color:var(--nw-accent);font-weight:700;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;}
.status-badge-orange{color:#d97706;font-weight:700;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;}
[data-theme="dark"] .status-badge-orange{color:#ffb547;}
.status-badge-red{color:#ff4d6d;font-weight:700;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;}

.info-grid{display:grid;grid-template-columns:1fr 1fr;}
.info-cell{padding:16px 24px;border-bottom:1px solid var(--border);}
.info-cell:nth-child(odd){border-right:1px solid var(--border);}
.info-label{
  font-family:var(--font-mono,monospace);font-size:11px;color:var(--text-3);margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.03em;
}
.info-value{font-size:.95rem;font-weight:500;color:var(--text);}
.info-value.text-green{color:var(--nw-accent);}
@media(max-width:600px){
  .info-grid{grid-template-columns:1fr;}
  .info-cell:nth-child(odd){border-right:none;}
  .info-cell{padding:14px 16px;}
  .info-value{font-size:.88rem;word-break:break-word;}
}

/* Empty-state stacked icon pair (.empty-icons) — pairs with .empty-state */
.empty-icons{display:flex;justify-content:center;gap:4px;margin-bottom:16px;}
.empty-icons i{font-size:28px;color:var(--text-3);border:2px solid var(--border);border-radius:4px;padding:4px;}

/* ============================================================
   Records card header with inline title + search (.records-header
   / .records-title) — pairs with .card-no-padding
   ============================================================ */

.records-header{
  padding:16px 24px;border-bottom:1px solid var(--border);display:flex;
  justify-content:flex-start;align-items:center;gap:20px;flex-wrap:wrap;
}
.records-title{font-weight:700;font-size:.95rem;display:flex;align-items:center;color:var(--text);white-space:nowrap;}
.records-title i{font-size:18px;margin-right:8px;color:var(--nw-accent);}

/* ============================================================
   Fixed bottom-right error toast (.custom-toast)
   ============================================================ */

.custom-toast{
  position:fixed;bottom:24px;right:24px;background-color:#ff4d6d;color:#fff;padding:12px 16px;
  border-radius:8px;display:flex;align-items:center;gap:12px;font-weight:600;font-size:.95rem;
  box-shadow:0 4px 12px rgba(255,77,109,.35);z-index:9999;
}
.custom-toast i{font-size:18px;cursor:pointer;opacity:.8;transition:opacity .2s;}
.custom-toast i:hover{opacity:1;}

/* ============================================================
   Segmented control (.segmented-control / .segment-btn) — pill
   group of mutually-exclusive toggle buttons
   ============================================================ */

.segmented-control{
  display:inline-flex;background-color:var(--bg3,rgba(148,163,184,.1));border-radius:8px;
  padding:3px;border:1px solid var(--border);gap:2px;
}
.segment-btn{
  background:transparent;border:none;border-radius:6px;padding:5px 9px;font-size:.76rem;
  font-weight:600;color:var(--text-3);cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:5px;white-space:nowrap;flex:1;min-width:0;
  transition:all .2s;font-family:inherit;
}
.segment-btn i{font-size:14px;margin-right:5px;}
.segment-btn svg{flex-shrink:0;}
.segment-btn.active{background:var(--card);color:var(--nw-accent);box-shadow:0 1px 3px rgba(0,0,0,.1);}
.segment-btn.active-text{color:var(--text);}
.segment-btn.tr-kind-opt--active{background:var(--card);color:var(--nw-accent);box-shadow:0 1px 3px rgba(0,0,0,.1);}
.segment-btn.active-text.tr-kind-opt--active{color:var(--text);}

/* ============================================================
   Trace-style search row (.control-row-1 / .search-input-wrapper /
   .search-input) and filter row (.control-row-2 / .filter-item)
   ============================================================ */

.control-row-1{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap;align-items:center;}
.tr-target-group{display:flex;gap:12px;align-items:center;flex:1 1 520px;min-width:320px;}
.search-input-wrapper{position:relative;flex-grow:1;min-width:200px;}
.search-input-wrapper i{position:absolute;left:14px;top:10px;color:var(--text-2);font-size:18px;pointer-events:none;z-index:1;}
.search-input{
  width:100%;height:42px;border:1px solid var(--nw-accent);border-radius:8px;
  padding:0 12px 0 46px;font-size:.95rem;font-family:var(--font-mono,monospace);color:var(--text);
  outline:none;background-color:var(--card);box-sizing:border-box;
  box-shadow:0 0 0 1px var(--nw-accent);
}
.trace-page .tr-controls .btn{
  min-height:40px;height:40px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;
}
.trace-page .tr-controls .tr-refresh-btn{
  width:40px;height:40px;padding:0;background:#10b7c8;color:#fff!important;box-shadow:none;
}
.trace-page .tr-controls .tr-refresh-btn:hover{background:#0fb0c0;color:#fff!important;}
.trace-page .tr-controls .tr-refresh-btn i{font-size:19px;margin:0;}
.trace-page .tr-reference-btn{
  background:var(--nw-accent)!important;color:#031a10!important;
  width:auto!important;min-width:176px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.trace-page .tr-reference-btn:hover{opacity:.95;}
.trace-page .tr-reference-btn i,
.trace-page .tr-run-btn i{font-size:17px;margin:0;}
.trace-page .tr-run-btn{
  min-height:40px;height:40px;padding:0 16px;gap:8px;justify-content:center;
  flex:0 0 auto;width:auto!important;min-width:0;white-space:nowrap;display:inline-flex;
}
.trace-page .tr-run-btn span,
.trace-page .tr-refresh-btn span,
.trace-page .tr-reference-btn span{line-height:1;}
.trace-page .tr-port-input::-webkit-outer-spin-button,
.trace-page .tr-port-input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.trace-page .tr-port-input{
  -moz-appearance:textfield;appearance:textfield;
}
.trace-page .search-input-wrapper i{left:18px!important;top:11px!important;}
.trace-page .search-input{padding-left:58px!important;}
.trace-page .tr-run-btn{background-color:var(--nw-accent)!important;color:#031a10!important;}
.control-row-2{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.filter-item{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--text-2);}
.custom-input-sm{
  height:32px;border:1px solid var(--border);border-radius:6px;padding:0 8px;font-size:.85rem;
  color:var(--text);outline:none;background:var(--card);width:80px;box-sizing:border-box;
}
.custom-input-sm::placeholder{color:var(--text-3);}
.custom-select.custom-select-sm{height:32px;width:140px;}

/* ============================================================
   Outcome / verdict card (.outcome-card / .outcome-header /
   .outcome-title / .badge-pill)
   ============================================================ */

.outcome-card{
  background-color:var(--accent-dim,rgba(0,229,160,.1));border:1px solid rgba(0,229,160,.35);
  border-radius:12px;padding:24px;margin-bottom:20px;
}
.outcome-card.is-block{background-color:rgba(255,77,109,.08);border-color:rgba(255,77,109,.35);}
.outcome-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px;}
.outcome-title{display:flex;align-items:center;font-size:1.4rem;font-weight:700;color:var(--nw-accent);margin:0;}
.outcome-title i{font-size:28px;margin-right:12px;}
.outcome-card.is-block .outcome-title{color:#ff4d6d;}
.badge-pill{
  background-color:var(--accent-dim,rgba(0,229,160,.18));color:var(--nw-accent);padding:4px 12px;
  border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.03em;margin-left:8px;
}

/* ============================================================
   Reasoning chain timeline (.reasoning-label / .reasoning-chain /
   .reasoning-item)
   ============================================================ */

.reasoning-label{font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;}
.reasoning-chain{border-left:2px solid var(--border);margin-left:8px;padding-left:24px;position:relative;}
.reasoning-item{position:relative;margin-bottom:16px;font-size:.9rem;}
.reasoning-item:last-child{margin-bottom:0;}
.reasoning-item::before{
  content:"";position:absolute;left:-31px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2px solid var(--text-3);
}
.reasoning-item.success::before{background:var(--nw-accent);border-color:var(--nw-accent);}
.reasoning-item .text-muted{color:var(--text-3);}
.reasoning-item .text-bold{font-weight:600;color:var(--text);font-family:var(--font-mono,monospace);}

/* ============================================================
   Warning / notice banners (.warning-banner)
   ============================================================ */

.warning-banner{
  background-color:rgba(255,181,71,.1);border:1px solid rgba(255,181,71,.35);border-radius:8px;
  padding:12px 16px;display:flex;align-items:center;color:#d97706;font-size:.85rem;font-weight:500;
  margin-bottom:12px;
}
[data-theme="dark"] .warning-banner{color:#ffb547;}
.warning-banner i{font-size:18px;margin-right:12px;flex-shrink:0;}
.warning-banner.is-error{background-color:rgba(255,77,109,.1);border-color:rgba(255,77,109,.35);color:#ff4d6d;}

/* ============================================================
   Small card header + list rows (.card-header-sm / .match-list-item
   / .badge-match-green / .badge-match-gray)
   ============================================================ */

.card-header-sm{
  padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;
  font-weight:700;font-size:.95rem;color:var(--text);
}
.card-header-sm i{color:var(--nw-accent);margin-right:10px;font-size:18px;}
.match-list-item{
  display:flex;justify-content:space-between;align-items:center;padding:16px 24px;
  border-bottom:1px solid var(--border);font-weight:600;font-size:.9rem;color:var(--text);cursor:pointer;
}
.match-list-item:last-child{border-bottom:none;}
.match-list-item i{color:var(--text-3);}
.match-list-item-body{padding:0 24px 16px;}
.badge-match-green{
  background-color:var(--accent-dim,rgba(0,229,160,.18));color:var(--nw-accent);padding:4px 10px;
  border-radius:12px;font-size:11px;font-family:var(--font-mono,monospace);margin-right:10px;
}
.badge-match-gray{
  background-color:var(--bg3,rgba(148,163,184,.12));color:var(--text-3);padding:4px 10px;
  border-radius:12px;font-size:11px;font-family:var(--font-mono,monospace);margin-right:10px;
}
.badge-match-warn{
  background-color:rgba(255,181,71,.15);color:#ffb547;padding:4px 10px;border-radius:12px;
  font-size:11px;font-weight:700;margin-left:8px;
}

/* ============================================================
   Easy-mode guided stepper (.em-stepper / .em-step / .em-field)
   Used by: masquerading, port-forwarding, routing, users,
   whitelists guided forms.
   ============================================================ */

.em-stepper{max-width:640px;}
.em-step{display:flex;align-items:stretch;gap:20px;}
.em-step-col-left{display:flex;flex-direction:column;align-items:center;width:24px;flex-shrink:0;}
.em-step-dot{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--text-3);
  border:2px solid var(--border);background:var(--card);
}
.em-step-dot.completed{
  background:var(--nw-danger,#dc2626);border-color:var(--nw-danger,#dc2626);color:#fff;font-size:0;
}
.em-step-dot.completed::before{content:"\2713";font-size:14px;}
.em-step-dot.pending{background:transparent;border-color:var(--border);color:transparent;}
.em-step-dot.is-active{
  background:var(--nw-danger,#dc2626);border-color:var(--nw-danger,#dc2626);color:#fff;font-size:0;
}
.em-step-dot.is-active::before{content:"\2713";font-size:14px;}
.em-step-line{
  flex:1;width:0;min-height:40px;margin:6px 0;
  border-left:1px dotted var(--nw-danger,#dc2626);
}
.em-step-line.hidden{border-left-color:transparent;}
.em-step-body{flex:1;padding-bottom:32px;}
.em-step-last .em-step-body{padding-bottom:0;}
.em-step-title{font-size:15px;font-weight:600;color:var(--text);margin:0 0 4px;}
.em-step-desc{font-size:13px;color:var(--text-3);margin:0 0 14px;}

.em-row{display:flex;gap:16px;flex-wrap:wrap;}
.em-field{flex:1;min-width:220px;}

/* Fields dropped directly into .em-step-body (not wrapped in an .em-row)
   auto-flow 2-per-row, with a lone trailing field spanning the full row —
   matches the mockup's per-step field grid without requiring every caller
   to hand-pair fields into .em-row wrappers. */
.em-step-body{display:flex;flex-wrap:wrap;gap:12px;}
.em-step-body > .em-step-title,.em-step-body > .em-step-desc{flex:1 0 100%;}
.em-step-body > .em-field.em-field-box{flex:1 1 260px;}
.em-step-body > .em-actions{flex:1 0 100%;}
.em-step-body > .em-ebpf-only-notice,.em-step-body > .em-ebpf-dest-notice{flex:1 0 100%;}
.em-step-body > #em-nft-action-row,.em-step-body > #em-dest-fields,.em-step-body > #em-chain-priority-row{
  display:flex;flex-wrap:wrap;gap:12px;flex:1 0 100%;
}
#em-nft-action-row > .em-field.em-field-box{flex:1 1 260px;}
#em-nft-action-row > #em-chain-priority-row{
  display:flex;flex-wrap:wrap;gap:12px;flex:1 0 100%;
}
#em-chain-priority-row > .em-field.em-field-box{flex:1 1 260px;}
#em-dest-fields > .em-field.em-field-box{flex:1 1 260px;}

.em-field.em-field-box{
  border:1px solid var(--border);border-radius:8px;padding:10px 14px;
  background:var(--card);transition:border-color .15s;
}
.em-field.em-field-box:focus-within{border-color:var(--text-3);}
.em-label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--text-3);text-transform:uppercase;margin-bottom:5px;
}
.em-label-hint{text-transform:none;font-weight:400;letter-spacing:0;}
.em-input,.em-select{
  width:100%;font-size:14px;color:var(--text);background:transparent;
  border:1px solid var(--border);border-radius:8px;height:42px;padding:0 12px;box-sizing:border-box;
}
.em-field-box .em-input,.em-field-box .em-select{
  border:none!important;outline:none!important;box-shadow:none!important;
  height:auto!important;padding:0!important;margin:0!important;
}
.em-switch-field{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap!important;
}
.em-switch-copy{min-width:0;display:flex;flex-direction:column;gap:4px;flex:1 1 auto;}
.em-switch-hint{font-size:.82rem;color:var(--text-3);}
.em-password-wrap{display:flex;align-items:center;gap:6px;width:100%;}
.em-password-wrap .em-input{flex:1 1 auto;}
.em-password-toggle{
  flex:0 0 auto;background:transparent;border:none;padding:0;width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-3);
  border-radius:6px;transition:color .15s,background-color .15s;
}
.em-password-toggle:hover{color:var(--text-2);background:var(--bg3,rgba(148,163,184,.08));}
.em-password-toggle i{font-size:19px;}
.em-switch-toggle{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;}
.em-switch-toggle .lever{margin-left:0!important;}
.em-input:focus,.em-select:focus{border-color:var(--nw-accent);outline:none;}
.em-input::placeholder{color:var(--text-3);}

.em-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}
.em-actions-indent{margin-left:44px;}

/* ============================================================
   Easy-mode two-column layout with backend selector sidebar
   Used by: firewall rules guided form (em-layout / em-form-area /
   em-sidebar).
   ============================================================ */

.em-layout{display:flex;flex-direction:column;gap:18px;align-items:stretch;}
.em-form-area{flex:1;min-width:0;}
.em-sidebar{flex:1;max-width:none;width:100%;}
.em-summary-card{
  position:sticky;top:20px;border:1px solid var(--border);border-radius:10px;
  background:var(--card);overflow:hidden;
}
.em-sidebar-toggle-row{display:flex;flex-wrap:wrap;gap:8px;padding:14px 14px 12px;border-bottom:1px solid var(--border);}
.em-sb-opt{
  flex:1;min-width:88px;display:flex;align-items:center;justify-content:center;gap:6px;
  height:34px;border-radius:8px;border:1px solid var(--border);background:transparent;
  color:var(--text-3);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.em-section-label{
  margin:16px 14px 6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-3);
}
.em-sidebar-title{
  margin:0 14px 4px;
  font-size:18px;
  font-weight:700;
  color:var(--text);
}
.em-sidebar-subtitle{
  margin:0 14px 4px;
  font-size:13px;
  color:var(--text-2);
}
.em-sidebar-section-note{
  margin:10px 14px 0;
  font-size:12px;
  line-height:1.45;
  color:var(--text-3);
}
.em-plain-summary{
  flex:0 0 260px;
  position:sticky;
  top:84px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  padding:18px;
}
.em-summary-kicker{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:8px;
}
.em-summary-title{
  font-size:18px;
  font-weight:700;
  color:var(--text);
  margin-bottom:14px;
}
.em-summary-section{
  font-size:12px;
  font-weight:600;
  color:var(--text-3);
  margin-bottom:14px;
}
.em-live-summary{display:flex;flex-direction:column;gap:14px;}
.em-summary-item{display:flex;flex-direction:column;gap:4px;}
.em-summary-item-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-3);
}
.em-summary-item-value{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  word-break:break-word;
}
.em-summary-item-value.is-empty{
  font-weight:500;
  color:var(--text-3);
}
.em-summary-empty{
  font-size:13px;
  color:var(--text-3);
}
.em-summary-footer{padding:14px;border-top:1px solid var(--border);}
.em-create-footer{margin-top:12px;}
.em-sidebar-section{
  padding-bottom:14px;
}
.em-notice-row{
  display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:8px;
  background:var(--bg3,rgba(148,163,184,.08));font-size:12px;color:var(--text-2,var(--text-3));margin-bottom:10px;
}
.em-ebpf-only-notice,.em-ebpf-dest-notice{margin-bottom:10px;}
.is-active{color:var(--nw-accent)!important;border-color:var(--nw-accent)!important;}
.is-btn-ml-auto{margin-left:auto;}

/* ============================================================
   Easy-mode plain forms (.em-plain-*) — shared left section rail for
   the guided pages that do not use the rules summary sidebar.
   ============================================================ */

.em-plain-shell{display:flex;flex-direction:column;gap:16px;}
.em-plain-layout{display:flex;gap:24px;align-items:flex-start;}
.em-plain-rail{
  flex:0 0 220px;position:sticky;top:84px;padding:4px 0 0 2px;
}
.em-plain-rail-kicker{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:8px;
}
.em-plain-rail-title{font-size:20px;font-weight:700;color:var(--text);line-height:1.2;}
.em-plain-form{flex:1;min-width:0;}

@media(max-width:1100px){
  .em-plain-layout{flex-direction:column;}
  .em-plain-rail{position:static;flex:1 1 auto;width:100%;}
  .em-plain-summary{position:static;flex:1 1 auto;width:100%;}
}

/* ============================================================
   Global buttons (.btn-primary / .btn-secondary / .btn-danger)
   ============================================================ */

.btn{border-radius:8px;box-shadow:none;text-transform:none;font-weight:600;height:40px;line-height:40px;padding:0 18px;}
.btn-primary{background-color:var(--nw-accent)!important;color:#031a10;}
.btn-primary:hover{opacity:.9;}
.btn-secondary{background-color:transparent!important;border:1px solid var(--border);color:var(--text-2);}
.btn-secondary:hover{border-color:var(--nw-accent);color:var(--nw-accent);}
.btn-danger{background-color:#dc2626!important;color:#fff;}
.btn-danger:hover{opacity:.9;}

/* ============================================================
   Config form page (.cfg-*) — used by /vpn/config style
   settings pages: card-header with right-aligned action,
   label/description/control rows, mono key block, collapsible
   advanced section
   ============================================================ */

.card-header-between{justify-content:space-between;}
.btn-outline-sm{
  background-color:transparent;border:1px solid var(--border);border-radius:6px;
  color:var(--text-2);font-weight:600;font-size:.8rem;padding:4px 12px;
  display:inline-flex;align-items:center;cursor:pointer;transition:background-color .15s,border-color .15s;
}
.btn-outline-sm:hover{border-color:var(--nw-accent);color:var(--nw-accent);}
.btn-outline-sm i{font-size:14px;margin-right:6px;}

.cfg-mono-block{padding:24px;font-family:var(--font-mono,monospace);font-size:.9rem;color:var(--text-2);word-break:break-all;}

.cfg-row{display:flex;padding:20px 24px;border-bottom:1px solid var(--border);align-items:flex-start;flex-wrap:wrap;gap:12px;}
.cfg-row:last-child{border-bottom:none;}
.cfg-row-label{flex:0 0 320px;max-width:100%;padding-right:20px;}
.cfg-row-title{font-weight:600;font-size:.95rem;color:var(--text);margin-bottom:4px;display:block;}
.cfg-row-desc{font-size:.8rem;color:var(--text-3);line-height:1.4;display:block;}
.cfg-row-control{flex:1;display:flex;align-items:center;justify-content:flex-end;min-width:220px;}

/* Single-line variant (title + description inline, switch flush right) */
.cfg-row-inline{align-items:center;justify-content:space-between;flex-wrap:nowrap;}
.cfg-row-inline .cfg-row-label{flex:0 1 auto;padding-right:20px;display:flex;align-items:baseline;gap:8px;}
.cfg-row-inline .cfg-row-title{margin-bottom:0;}
.cfg-row-inline .cfg-row-control{flex:0 0 auto;min-width:0;}
.sidecar-page .card-header{position:sticky;top:0;z-index:5;background:var(--card);padding:16px 20px;border-bottom:1px solid var(--border);}
.sidecar-page .custom-card{overflow:visible;}
.sidecar-page #ramen-config-form{
  align-items:flex-start;
}
.sidecar-page #ramen-config-form .ddos-sections-nav{
  position:sticky;
  top:84px;
  align-self:flex-start;
  max-height:calc(100vh - 116px);
  overflow:auto;
}

/* ============================================================
   DDoS Guard page layout (.ddos-layout / .ddos-sections-nav /
   .ddos-navitem / .ddos-content) — sidebar tab nav + panel content.
   Scoped under .ddos-layout so it doesn't affect the sidecar/ramen
   and neuro-cfg pages, which reuse the .ddos-sections-nav/.ddos-navitem
   class names with their own inline styles.
   ============================================================ */
.ddos-layout{display:flex;min-height:0;gap:0;}
.ddos-layout .ddos-sections-nav{
  width:240px;background-color:transparent;padding:30px 20px;flex-shrink:0;
  border-right:1px solid var(--border);
  position:sticky;top:84px;align-self:flex-start;max-height:calc(100vh - 84px);overflow:auto;
}
.ddos-layout .ddos-nav-label{
  font-size:11px;font-weight:700;color:var(--text-2);letter-spacing:.06em;
  margin-bottom:16px;padding-left:12px;
}
.ddos-layout .ddos-sections-list{list-style:none;padding:0;margin:0;}
.ddos-layout .ddos-sections-list li{margin-bottom:4px;}
.ddos-layout .ddos-navitem{
  display:flex;align-items:center;padding:10px 12px;color:var(--text-2);
  font-weight:600;font-size:.9rem;border-radius:6px;white-space:nowrap;
}
.ddos-layout .ddos-navitem i{margin-right:10px;font-size:18px;}
.ddos-layout .ddos-navitem.is-active{
  color:var(--nw-accent);background-color:var(--accent-dim,rgba(0,229,160,.1));
}
.ddos-content{flex-grow:1;min-width:0;padding:0 0 0 40px;max-width:1200px;}
.neuro-cfg-page .ncfg-layout .ddos-sections-nav{
  position:sticky;top:84px;align-self:flex-start;max-height:calc(100vh - 84px);overflow:auto;
}

/* ddos-layout stays the desktop sidebar+single-panel view above 900px.
   Below 900px it's hidden entirely in favor of .ddos-mobile-accordion
   (see below) on pages that supply one (DDoS Guard still uses the
   horizontal scrollable tab-strip fallback, since it has no accordion). */
@media(max-width:900px){
  .ddos-layout{flex-direction:column;}
  .ddos-layout .ddos-sections-nav{
    width:100%;padding:16px 4px;border-right:none;border-bottom:1px solid var(--border);
  }
  .ddos-layout .ddos-nav-label{padding-left:8px;}
  .ddos-layout .ddos-sections-list{
    display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .ddos-layout .ddos-sections-list li{margin-bottom:0;flex-shrink:0;}
  .ddos-content{padding:20px 0 0;max-width:100%;}
  .sidecar-page #ramen-config-form .ddos-sections-nav{
    position:static;top:auto;max-height:none;overflow:visible;
  }
  .neuro-cfg-page .ncfg-layout .ddos-sections-nav{
    position:static;top:auto;max-height:none;overflow:visible;
  }
  .has-mobile-accordion > .ddos-layout{display:none;}
}
/* ============================================================
   Mobile section accordion (.ddos-mobile-accordion /
   .ddos-accordion-item) — used by /sidecar/ramen and
   /system/neuro-cfg below 900px in place of the desktop sidebar:
   every section renders as a collapsible card (reusing the
   .cfg-collapsible-header/.cfg-collapsible-body pattern), one open
   at a time. Hidden by default (desktop); the ≤900px media query
   below is the only thing that turns it on, so source order can't
   accidentally let the unconditional base rule win over the
   min-width:901px query (that bug previously left the accordion
   visible on desktop alongside the sidebar).
   ============================================================ */
.ddos-mobile-accordion{display:none;flex-direction:column;gap:12px;margin-top:14px;}
.ddos-accordion-item{overflow:hidden;}
.ddos-accordion-item .cfg-collapsible-header{padding:14px 18px;}
@media(max-width:900px){
  .ddos-mobile-accordion{display:flex;}
}
@media(max-width:600px){
  .ddos-layout .ddos-navitem{padding:8px 10px;font-size:.85rem;}
  .ddos-layout .ddos-navitem i{margin-right:6px;font-size:16px;}
}
.sidecar-subtab-footer{
  position:sticky;bottom:0;z-index:6;display:flex;flex-wrap:wrap;gap:10px;
  padding:14px 20px;background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 88%,var(--bg) 12%));
  border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(15,23,42,.06);
}
.ramen-subtab-footer{
  position:static;
  bottom:auto;
  z-index:auto;
  box-shadow:none;
}
.sidecar-subtab-footer-chip{
  display:inline-flex;align-items:flex-start;gap:6px;padding:8px 12px;border-radius:999px;
  font-size:12px;line-height:1.35;font-weight:600;border:1px solid transparent;
}
.sidecar-subtab-footer-chip-blue{background:rgba(59,130,246,.10);color:#2563eb;border-color:rgba(59,130,246,.22);}
.sidecar-subtab-footer-chip-green{background:rgba(16,185,129,.10);color:#059669;border-color:rgba(16,185,129,.22);}
.sidecar-subtab-footer-chip-amber{background:rgba(245,158,11,.10);color:#b45309;border-color:rgba(245,158,11,.22);}
.sidecar-subtab-footer-chip-red{background:rgba(239,68,68,.10);color:#dc2626;border-color:rgba(239,68,68,.22);}
.sidecar-subtab-footer-chip-slate{background:rgba(100,116,139,.10);color:#475569;border-color:rgba(100,116,139,.22);}
.sidecar-subtab-footer-mono{font-family:var(--font-mono,monospace);font-weight:700;}

.cfg-input{
  width:100%;max-width:450px;background-color:var(--bg3,transparent);border:1px solid var(--border);
  border-radius:6px;padding:0 12px;height:42px;font-size:.9rem;color:var(--text);outline:none;
  box-sizing:border-box;transition:border-color .15s,background-color .15s;
}
.cfg-input:focus{border-color:var(--nw-accent);}
.cfg-input::placeholder{color:var(--text-3);opacity:.7;}
.cfg-input[type="number"]::-webkit-outer-spin-button,
.cfg-input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.cfg-input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
}
.cpn-select{
  display:block;
  width:100%;
  max-width:450px;
  padding-right:36px;
  appearance:auto;
  -webkit-appearance:auto;
  -moz-appearance:auto;
  background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394a3b8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:right 12px top 50%;
  background-size:9px auto;
}

.cfg-switch-row{display:flex;align-items:center;gap:12px;}
.cfg-switch-text{font-weight:600;font-size:.9rem;color:var(--text-2);}

.cfg-collapsible-header{
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:16px 24px;border-bottom:1px solid transparent;background:none;border-top:none;border-left:none;border-right:none;
  font-weight:600;font-size:.95rem;color:var(--text);
  -webkit-tap-highlight-color:transparent;outline:none;
}
.cfg-collapsible-header:focus,.cfg-collapsible-header:active{background:none;}
.cfg-collapsible-header i:last-child{color:var(--text-3);font-size:20px;transition:transform .15s;}
.cfg-collapsible-header[aria-expanded="true"]{border-bottom-color:var(--border);}
.cfg-collapsible-header[aria-expanded="true"] i:last-child{transform:rotate(180deg);}
.cfg-collapsible-body{display:none;}
.cfg-collapsible-body.is-open{display:block;}

.cfg-footer-action{display:flex;justify-content:flex-end;margin-top:24px;}

/* ============================================================
   Data grid page (.data-group / .btn-pill / .error-text) — used
   by /sidecar/nats style status cards: key/value stacks inside
   a .custom-card, pill action buttons, inline error text
   ============================================================ */

.data-group{margin-bottom:18px;}
.data-group:last-child{margin-bottom:0;}
.data-label{
  font-size:.75rem;font-weight:600;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:4px;display:block;
}
.data-value{
  font-family:var(--font-mono,monospace);font-size:.9rem;color:var(--text);
  word-break:break-word;line-height:1.4;
}

.action-buttons{display:flex;gap:10px;margin-top:10px;margin-bottom:20px;flex-wrap:wrap;}
.btn-pill{
  background-color:var(--bg3,rgba(148,163,184,.08));color:var(--text-2);border:1px solid var(--border);
  border-radius:20px;padding:4px 16px;font-size:.8rem;font-weight:500;cursor:pointer;
  transition:background-color .15s;outline:none;
}
.btn-pill:hover{background-color:var(--border);}

.error-text{color:#d97706;font-size:.9rem;line-height:1.5;margin-top:15px;}

/* ============================================================
   Stat/health/policy-list cards (.stats-container / .health-grid
   / .policy-list) — used by /sidecar/vaanvil style dashboards
   ============================================================ */

.stats-container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.stat-block{flex:1;min-width:80px;}
.stat-block .data-label{margin-bottom:8px;}
.stat-value{font-size:2.2rem;font-weight:700;line-height:1;margin:0;font-family:var(--font-mono,monospace);}

.health-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.health-item{display:flex;flex-direction:column;}
.health-value{font-size:1.05rem;font-weight:600;color:var(--text);}

.policy-list{list-style:none;margin:0;padding:0;}
.policy-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap;
}
.policy-item:first-child{padding-top:0;}
.policy-item:last-child{border-bottom:none;padding-bottom:0;}
.policy-name{font-family:var(--font-mono,monospace);font-size:.9rem;color:var(--text);}
.policy-name span{color:var(--text-3);margin-right:8px;}

/* ============================================================
   Key-value data grid (.data-grid) and nav action cards
   (.action-card-content / .action-icon-box / .btn-pill-outline)
   — used by /firewall/dns-sink style status + navigation pages
   ============================================================ */

.data-grid{display:grid;grid-template-columns:140px 1fr;gap:12px;margin-bottom:8px;align-items:center;}
.data-key{color:var(--text-3);font-size:.9rem;}
.data-grid .data-value{margin-bottom:0;}

.action-card-content{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;cursor:pointer;}
.action-left{display:flex;align-items:center;gap:16px;}
.action-icon-box{
  width:48px;height:48px;border-radius:8px;background:rgba(0,229,160,.12);color:var(--nw-accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.action-icon-box i{font-size:22px;}
.action-text h6{margin:0 0 4px 0;font-weight:700;font-size:.95rem;color:var(--text);}
.action-text p{margin:0;font-size:.85rem;color:var(--text-3);font-weight:500;}

.btn-pill-outline{
  background-color:transparent;border:1px solid var(--border);border-radius:20px;color:var(--text-2);
  font-size:.85rem;font-weight:600;padding:4px 10px 4px 16px;display:inline-flex;align-items:center;
  cursor:pointer;transition:background-color .15s;flex-shrink:0;
}
.btn-pill-outline:hover{background-color:var(--bg3,rgba(148,163,184,.08));}
.btn-pill-outline i{font-size:16px;margin-left:4px;color:var(--text-3);}

/* ============================================================
   Secret input with view-toggle (.cfg-secret-row) — password
   input plus a "View" icon button that reveals the typed value
   before it's saved
   ============================================================ */

.cfg-secret-row{display:flex;align-items:center;gap:8px;width:100%;max-width:450px;}
.cfg-secret-row .cfg-input{max-width:none;}
.cfg-view-btn{
  flex-shrink:0;width:38px;height:38px;border-radius:6px;border:1px solid var(--border);
  background:transparent;color:var(--text-2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .15s,color .15s;
}
.cfg-view-btn:hover{border-color:var(--nw-accent);color:var(--nw-accent);}
.cfg-view-btn i{font-size:18px;}

/* ============================================================
   Modal backdrop + panel (.modal-backdrop / .modal / .au-modal-*)
   — self-contained overlay toggled via inline style="display:..",
   NOT Materialize's own JS-driven .modal (which fights a plain
   display toggle via its own opacity/transform transitions)
   ============================================================ */

.modal-backdrop{
  display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);
  align-items:center;justify-content:center;padding:20px;
}
.modal-backdrop .modal{
  display:block!important;position:relative;top:auto;left:auto;width:100%;max-width:480px;max-height:85vh;
  background:var(--card);border-radius:10px;border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:auto;opacity:1;transform:none;margin:0;
}
.modal-backdrop .modal.modal-wide{max-width:540px;}
.au-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:1100;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.52);
  backdrop-filter:blur(2px);
}
.au-modal-overlay .au-modal{
  width:min(560px,100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  display:block;
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 20px 70px rgba(15,23,42,.28);
}
.au-modal-overlay .au-modal.au-modal-sm{width:min(460px,100%);}

.au-modal-hd{
  padding:18px 22px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.au-modal-title{font-size:1.05rem;font-weight:700;color:var(--text);}
.au-modal-close{
  background:none;border:none;font-size:22px;line-height:1;color:var(--text-3);
  cursor:pointer;padding:0 4px;
}
.au-modal-close:hover{color:var(--text);}
.au-modal-body{padding:20px 22px;}

/* ============================================================
   Quick-reference sections inside a modal (.tr-ref-*) — used by
   the Policy Trace "Reference" popup: heading + key/desc rows
   ============================================================ */

.tr-ref-section{margin-bottom:18px;}
.tr-ref-section:last-child{margin-bottom:0;}
.tr-ref-heading{
  font-size:.75rem;font-weight:700;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:8px;
}
.tr-ref-row{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);}
.tr-ref-row:last-child{border-bottom:none;}
.tr-ref-key{
  flex:0 0 70px;font-family:var(--font-mono,monospace);font-size:.8rem;font-weight:700;
  color:var(--text);
}
.tr-ref-key-green{color:var(--nw-accent);}
.tr-ref-key-orange{color:#ffb547;}
.tr-ref-key-red{color:#ff4d6d;}
.tr-ref-desc{font-size:.85rem;color:var(--text-2);line-height:1.4;}

/* ============================================================
   Help page (.help-*) and generic solid-blue button / table
   yes-no cells (.btn-solid-blue / .td-yes / .td-no) — used by
   /system/help
   ============================================================ */

.btn-solid-blue{
  background-color:#4f46e5!important;color:#fff!important;border-radius:8px;
  box-shadow:none!important;text-transform:none;font-weight:600;
}
.btn-solid-blue:hover{background-color:#4338ca!important;}

.help-card{padding:24px;}
.help-card-title{font-size:1.1rem;font-weight:700;color:var(--text);margin:0 0 8px 0;}
.help-card-desc{font-size:.9rem;color:var(--text-2);margin:0 0 16px 0;line-height:1.5;}
.help-pill{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:600;}
.help-pill-blue{background:rgba(59,130,246,.12);color:#3b82f6;}
.help-pill-orange{background:rgba(234,88,12,.12);color:#ea580c;}
.help-link-group{display:flex;flex-wrap:wrap;gap:12px 16px;}
.help-link{color:var(--nw-accent);font-weight:600;font-size:.9rem;text-decoration:none;transition:opacity .2s;}
.help-link:hover{opacity:.8;}

.help-bottom-card{padding:30px;}
.help-section-title{font-size:1.3rem;font-weight:700;margin:0 0 4px 0;color:var(--text);}
.help-section-desc{font-size:.95rem;color:var(--text-3);margin:0 0 24px 0;}
.help-table-title{font-size:1.1rem;font-weight:700;margin:0 0 4px 0;color:var(--text);}
.help-table-desc{font-size:.9rem;color:var(--text-3);margin:0 0 16px 0;}
.help-best-practices{margin:12px 0 0;padding-left:20px;color:var(--text-2);font-size:.9rem;line-height:1.7;}
.help-best-practices strong{color:var(--text);}

.td-yes{color:var(--nw-accent);font-weight:700;}
.td-no{color:#ff4d6d;font-weight:700;}

/* ============================================================
   System info sections (.info-section / .data-row / .progress-*)
   — used by /system/config: label/value rows with optional
   inline progress bar (memory/storage usage)
   ============================================================ */

.info-section{padding:24px 32px;border-bottom:1px solid var(--border);}
.info-section:last-child{border-bottom:none;}
.data-row{display:grid;grid-template-columns:200px 1fr;gap:16px;margin-bottom:20px;align-items:start;}
.data-row:last-child{margin-bottom:0;}
.data-row .data-label{padding-top:2px;}
.data-row .data-value{font-size:.95rem;color:var(--text);font-weight:500;line-height:1.5;}

.progress-container{
  width:100%;max-width:300px;height:6px;background:var(--border);border-radius:4px;
  margin-top:8px;overflow:hidden;
}
.progress-fill{height:100%;background:var(--text);border-radius:4px;}
[data-theme="dark"] .progress-fill{background:var(--nw-accent);}

/* ============================================================
   Preferences page (.pref-card / .option-* / .color-* / .font-*
   / .bottom-card-flex) — used by /system/preferences
   ============================================================ */

.pref-card{display:flex;flex-direction:column;height:100%;}
.pref2-page{width:100%;max-width:none;margin:0;padding:0 0 24px;}
.pref2-page .au-header{margin-bottom:22px;}
.pref-page{width:100%;max-width:none;margin:0;padding:0 0 24px;}
.pref-page .au-header{margin-bottom:22px;}
.pref2-card{width:100%;}
.pref2-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.pref2-section{margin-top:8px;}
.pref2-section-label{font-size:.95rem;font-weight:700;margin:0 0 14px;color:var(--text);}
.pref2-option-card{min-height:96px;border:1px solid var(--border);border-radius:14px;background:var(--card);padding:18px 16px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:border-color .15s,box-shadow .15s,transform .15s;}
.pref2-option-card:hover{border-color:var(--nw-accent);box-shadow:0 8px 18px rgba(0,0,0,.04);transform:translateY(-1px);}
.pref2-option-card.pref2-selected{border-color:var(--nw-accent);background:var(--nw-accent-dim);box-shadow:0 0 0 1px rgba(0,0,0,.02) inset;}
.pref2-option-label{font-weight:700;font-size:1rem;}
.pref2-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin-top:4px;}
.pref2-toggle-info{display:flex;align-items:center;gap:12px;min-width:0;}
.section-label{font-weight:700;font-size:.95rem;color:var(--text);margin:0 0 16px 0;}

.option-grid{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:32px;}
.option-grid:last-child{margin-bottom:0;}
.option-card{
  border:1px solid var(--border);border-radius:8px;padding:16px;cursor:pointer;position:relative;
  text-align:center;transition:border-color .2s,background-color .2s;flex:1;min-width:100px;
  background-color:var(--card);
}
.option-card:hover{border-color:var(--text-3);}
.option-card.active{
  border:1.5px solid var(--nw-accent);background-color:var(--accent-dim,rgba(0,229,160,.1));padding:15.5px;
}
.option-card.active .option-text,
.option-card.active .font-name{color:var(--nw-accent);}
.option-card .check-icon{display:none;position:absolute;top:8px;right:8px;color:var(--nw-accent);font-size:18px;}
.option-card.active .check-icon{display:block;}
.option-text{font-size:.9rem;font-weight:600;color:var(--text);}

.mode-grid .option-card{padding:20px 16px 16px 16px;}
.mode-mockup{width:100%;height:40px;border-radius:4px;margin-bottom:12px;border:1px solid var(--border);display:flex;overflow:hidden;}
.mockup-sidebar{width:20%;height:100%;}
.mockup-content{flex:1;padding:6px;}
.mockup-line{height:4px;background:var(--border);border-radius:2px;width:60%;}
.mockup-light{background:#f8fafc;}
.mockup-light .mockup-sidebar{background:#f1f5f9;border-right:1px solid #e2e8f0;}
.mockup-semi-dark{background:#f8fafc;}
.mockup-semi-dark .mockup-sidebar{background:#0f172a;}
.mockup-dark{background:#0f172a;border-color:#1e293b;}
.mockup-dark .mockup-sidebar{background:#020617;border-right:1px solid #1e293b;}
.mockup-dark .mockup-line{background:#334155;}

.color-grid{display:flex;gap:20px;flex-wrap:wrap;}
.color-wrapper{display:flex;flex-direction:column;align-items:center;cursor:pointer;gap:8px;}
.color-ring{
  width:44px;height:44px;border-radius:50%;border:2px solid transparent;
  display:flex;justify-content:center;align-items:center;transition:border-color .2s;
}
.color-wrapper.active .color-ring{border-color:var(--border);}
.color-circle{width:32px;height:32px;border-radius:50%;}
.color-name{font-size:.8rem;color:var(--text-3);font-weight:500;}
.color-wrapper.active .color-name{color:var(--nw-accent);font-weight:600;}

.font-grid{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:16px;}
.font-grid .option-card{
  min-width:0;padding:16px 12px;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
}
.font-preview{
  color:var(--text);font-weight:500;margin-bottom:8px;line-height:1;
  max-height:32px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.option-card.active .font-preview{color:var(--nw-accent);}
.font-name{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:4px;white-space:nowrap;}
.font-px{font-size:.75rem;color:var(--text-3);font-weight:500;}
.bottom-card-flex{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;flex-wrap:wrap;gap:16px;}
.bottom-card-info{display:flex;align-items:center;}
.bottom-card-info i{color:var(--text-3);font-size:24px;margin-right:16px;}
.bottom-card-title{font-weight:700;font-size:.95rem;color:var(--text);margin:0 0 4px 0;}
.bottom-card-subtitle{font-size:.85rem;color:var(--text-3);margin:0;}

/* ============================================================
   Change password page (.cpn-*) — used by /lobby/change-password
   ============================================================ */

.cpn-page .cpn-header-row{margin-bottom:8px;}
.cpn-page .cpn-header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.cpn-mode-switch{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:0;margin:0;
}
.cpn-page .cpn-main-row{justify-content:center;}
.cpn-page .cpn-centered-col{
  display:flex;
  justify-content:center;
}
.cpn-page .cpn-centered-col .cpn-card{
  width:min(100%,720px);
}
.cpn-page #cpn-admin-col{
  justify-content:center;
}
.cpn-mode-label{font-size:.9rem;font-weight:600;color:var(--text-3);transition:color .15s;}
.cpn-mode-switch:has(#cpn-mode-toggle:checked) .cpn-mode-label--others,
.cpn-mode-switch:not(:has(#cpn-mode-toggle:checked)) .cpn-mode-label--self{color:var(--text);}
.cpn-card{display:flex;flex-direction:column;height:100%;}
.cpn-profile-header{
  background:var(--bg3,rgba(148,163,184,.08));padding:20px 24px;display:flex;align-items:center;gap:16px;
  border-bottom:1px solid var(--border);
}
.cpn-avatar{
  width:44px;height:44px;border-radius:50%;background:rgba(0,229,160,.15);color:var(--nw-accent);
  display:flex;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;flex-shrink:0;
}
.cpn-who-info{display:flex;flex-direction:column;}
.cpn-who-name{font-weight:700;font-size:1.05rem;color:var(--text);line-height:1.2;}
.cpn-who-role{font-size:.85rem;color:var(--text-3);margin-top:2px;text-transform:capitalize;}

.cpn-form-body{padding:24px;flex-grow:1;display:flex;flex-direction:column;}
.cpn-admin-header{padding:24px 24px 0 24px;}
.cpn-admin-title{display:flex;align-items:center;font-size:1.1rem;font-weight:700;color:var(--text);margin:0 0 12px 0;}
.cpn-admin-title i{margin-right:10px;font-size:22px;color:var(--text);}
.cpn-admin-subtitle{font-size:.9rem;color:var(--text-3);margin:0;}

.cpn-field{margin-bottom:20px;}
.cpn-label{display:block;font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:8px;}
.cpn-input-wrap{position:relative;}
.cpn-input{padding-right:40px!important;}
.cpn-eye{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--text-3);cursor:pointer;padding:0;display:flex;align-items:center;
}
.cpn-eye:hover{color:var(--text-2);}

.cpn-strength{display:flex;align-items:center;gap:10px;margin-top:8px;}
.cpn-strength-bars{display:flex;gap:3px;flex:1;max-width:140px;}
.cpn-strength-bar{height:4px;flex:1;background:var(--border);border-radius:2px;}
.cpn-strength-label{font-size:.75rem;font-weight:600;}

.cpn-hints{display:flex;gap:30px;margin-top:8px;flex-wrap:wrap;}
.cpn-hint-col{display:flex;flex-direction:column;gap:4px;}
.cpn-hint-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-3);}
.cpn-hint-dot{width:6px;height:6px;border-radius:50%;background:var(--border);flex-shrink:0;}
.cpn-hint-item.is-ok{color:var(--nw-accent);}
.cpn-hint-item.is-ok .cpn-hint-dot{background:var(--nw-accent);}

.cpn-field-msg{display:block;font-size:.8rem;margin-top:6px;min-height:16px;}
.cpn-field-msg.cpn-field-ok{color:var(--nw-accent);}
.cpn-field-msg.cpn-field-err{color:#ff4d6d;}

.cpn-banner{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:.9rem;font-weight:600;}
.cpn-banner-ok{background:rgba(0,229,160,.12);color:var(--nw-accent);}
.cpn-banner-err{background:rgba(255,77,109,.12);color:#ff4d6d;}

.btn-full-green{
  width:100%;background-color:#00d68f!important;color:#031a10!important;border-radius:6px;
  box-shadow:none!important;text-transform:none;font-weight:600;font-size:1rem;height:46px;
  line-height:46px;margin-top:auto;
}
.btn-full-green:hover{background-color:#00c080!important;}

/* ============================================================
   Setup Wizard (/system/wizard) — stepper, mode cards, interface
   cards, setting rows, review sections.
   ============================================================ */

.wiz-page-header{margin-bottom:20px;}
.wizard-card{
  background:var(--card);border-radius:12px;border:1px solid var(--border);
  box-shadow:0 4px 15px rgba(0,0,0,.04);margin:0;
  display:flex;flex-direction:column;min-height:600px;
}

.stepper-container{
  padding:30px 40px 10px 40px;display:flex;align-items:flex-start;justify-content:space-between;
  border-bottom:1px solid var(--border);position:relative;flex-wrap:wrap;gap:4px;
}
.step-item{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;width:60px;}
.step-circle{
  width:32px;height:32px;border-radius:50%;background:var(--card);border:2px solid var(--border);
  display:flex;justify-content:center;align-items:center;font-weight:600;font-size:.85rem;
  color:var(--text-3);margin-bottom:8px;transition:all .3s;
}
.step-label{font-size:.75rem;color:var(--text-3);font-weight:500;}
.step-item.active .step-circle{border-color:var(--nw-accent);color:var(--nw-accent);}
.step-item.active .step-label{color:var(--nw-accent);font-weight:600;}
.step-item.completed .step-circle{background:var(--nw-accent);border-color:var(--nw-accent);color:#031a10;}
.step-item.completed .step-label{color:var(--text-2);}
.step-line{flex-grow:1;height:2px;background:var(--border);margin-top:15px;z-index:1;transition:background-color .3s;}
.step-line.completed{background:var(--nw-accent);}

.wizard-content{padding:40px;flex-grow:1;}
.step-view{display:none;}
.step-view.active{display:block;}
.step-title{font-size:1.4rem;font-weight:700;color:var(--text);margin:0 0 8px 0;}
.step-subtitle{font-size:.95rem;color:var(--text-3);margin:0 0 30px 0;}

.wizard-footer{
  padding:20px 40px;border-top:1px solid var(--border);display:flex;justify-content:space-between;
  align-items:center;background:var(--bg3,rgba(148,163,184,.04));border-radius:0 0 12px 12px;
  margin:24px -40px -40px -40px;
}
.btn-green{
  background:var(--nw-accent)!important;color:#031a10!important;box-shadow:none!important;border-radius:6px;
  text-transform:none;font-weight:600;height:42px;line-height:42px;padding:0 24px;display:inline-flex;
  align-items:center;gap:6px;
}
.btn-green:hover{opacity:.9;}
.btn-outline{
  background:transparent!important;border:1px solid var(--border);color:var(--text)!important;
  box-shadow:none!important;border-radius:6px;text-transform:none;font-weight:500;height:42px;
  line-height:40px;padding:0 20px;display:inline-flex;align-items:center;gap:6px;
}
.btn-outline:hover{background:var(--bg3,rgba(148,163,184,.08))!important;}

/* Step 1: Welcome */
.welcome-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:40px;}
.big-check{
  width:60px;height:60px;border-radius:50%;border:2px solid var(--nw-accent);
  display:flex;justify-content:center;align-items:center;margin-bottom:24px;
}
.big-check i{font-size:36px;color:var(--nw-accent);}
.welcome-center h4{font-weight:700;font-size:1.8rem;margin:0 0 16px 0;color:var(--text);}
.welcome-center p{font-size:1.05rem;color:var(--text-3);margin:0 0 24px 0;}
.welcome-center h6{font-weight:700;font-size:1.1rem;margin:0 0 24px 0;color:var(--text);}
.info-banner{
  border:1px solid var(--border);border-radius:8px;padding:12px 20px;display:inline-flex;
  align-items:center;gap:10px;font-size:.9rem;color:var(--text-3);
}
.info-banner i{color:var(--nw-accent);font-size:18px;}

/* Step 2: Mode cards */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.mode-card{
  border:1px solid var(--border);border-radius:8px;padding:24px;cursor:pointer;position:relative;
  background:var(--card);transition:border-color .2s,background-color .2s;display:block;
}
.mode-card.active{border:2px solid var(--nw-accent);background:var(--accent-dim,rgba(0,229,160,.08));padding:23px;}
.mode-header{display:flex;align-items:center;gap:12px;margin-bottom:24px;font-size:1.1rem;font-weight:600;color:var(--text);}
.mode-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);display:flex;justify-content:center;align-items:center;flex-shrink:0;}
.mode-card.active .mode-radio{border-color:var(--nw-accent);background:var(--nw-accent);position:relative;}
.mode-card.active .mode-radio::after{content:"check";font-family:"Material Icons";color:#031a10;font-size:14px;}
.diagram-box{display:flex;align-items:center;gap:10px;margin-bottom:24px;font-size:.8rem;font-family:var(--font-mono,monospace);color:var(--text-3);flex-wrap:wrap;}
.d-node{border:1px dashed var(--border);border-radius:20px;padding:4px 12px;text-align:center;}
.d-node.main{border:1px solid var(--nw-accent);background:var(--accent-dim,rgba(0,229,160,.1));color:var(--nw-accent);font-weight:700;border-radius:4px;}
.d-stack{display:flex;flex-direction:column;gap:4px;}
.mode-list{margin:0;padding-left:20px;font-size:.9rem;color:var(--text);font-weight:500;}
.mode-list li{margin-bottom:8px;}

/* Step 3: Interfaces */
.iface-card{border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:24px;}
.iface-title{font-size:.95rem;font-weight:600;color:var(--nw-accent);margin-bottom:16px;display:flex;justify-content:space-between;}
.iface-option{border:1px solid var(--nw-accent);border-radius:6px;padding:12px 16px;display:inline-flex;flex-direction:column;background:var(--card);}
.iface-name{font-weight:700;color:var(--nw-accent);display:flex;align-items:center;gap:8px;font-family:var(--font-mono,monospace);}
.iface-mac{font-family:var(--font-mono,monospace);color:var(--text-3);font-size:.8rem;margin-top:4px;}
.badge-up{background:var(--accent-dim,rgba(0,229,160,.15));color:var(--nw-accent);padding:2px 6px;border-radius:4px;font-size:.7rem;font-weight:700;}

/* Steps 4-6: setting rows */
.setting-list-header{font-size:.75rem;font-weight:700;color:var(--text-3);letter-spacing:1px;text-transform:uppercase;margin:24px 0 12px 0;}
.setting-row{
  border:1px solid var(--border);border-bottom:none;padding:20px 24px;display:flex;justify-content:space-between;
  align-items:center;background:var(--card);gap:16px;flex-wrap:wrap;
}
.setting-row:first-child{border-radius:8px 8px 0 0;}
.setting-row:last-child{border-bottom:1px solid var(--border);border-radius:0 0 8px 8px;}
.setting-row.rounded-all{border-bottom:1px solid var(--border);border-radius:8px;margin-bottom:16px;}
.setting-row.highlight-green{background:var(--accent-dim,rgba(0,229,160,.06));}
.setting-text h6{margin:0 0 6px 0;font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:8px;color:var(--text);}
.setting-text p{margin:0;font-size:.85rem;color:var(--text-3);line-height:1.4;}
.tag-rec{color:var(--nw-accent);font-size:.7rem;font-weight:700;text-transform:uppercase;}
.switch-label{font-weight:600;font-size:.9rem;margin-left:12px;}
.switch-label.text-green{color:var(--nw-accent);}
.switch-label.text-3{color:var(--text-3);}
.input-wrapper{display:flex;align-items:center;gap:12px;width:100%;max-width:500px;margin-top:12px;flex-wrap:wrap;}
.btn-small-outline{
  border:1px solid var(--border);background:var(--card);border-radius:6px;height:38px;line-height:36px;
  padding:0 12px;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--text);
}
.rate-limit-panel{background:var(--bg3,rgba(148,163,184,.06));border:1px solid var(--border);border-top:none;padding:16px 24px;border-radius:0 0 8px 8px;margin-top:-16px;}

/* Step 7: Review */
.review-section{border:1px solid var(--border);border-radius:8px;margin-bottom:20px;overflow:hidden;}
.review-header{
  background:var(--bg3,rgba(148,163,184,.08));padding:12px 16px;font-size:.8rem;font-weight:700;
  color:var(--text-3);letter-spacing:.5px;display:flex;align-items:center;gap:8px;
}
.review-header i{font-size:16px;}
.review-row{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-size:.9rem;flex-wrap:wrap;gap:8px;}
.review-row:last-child{border-bottom:none;}
.review-val{font-weight:600;color:var(--text);}
.review-grid{display:grid;grid-template-columns:1fr 1fr;padding:16px;gap:16px;}
.review-list-item{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--text);}
.review-list-item.text-grey{color:var(--text-3);}
.dot-green{color:var(--nw-accent);}
.dot-grey{color:var(--text-3);}

/* ============================================================
   Users management table (.um2-*) — avatar cell, role/status
   text, self badge, clear-filters button — used by /system/users
   ============================================================ */

.um2-user-cell{display:flex;align-items:center;gap:12px;}
.um2-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;background:rgba(255,77,109,.15);color:#ff4d6d;
}
.um2-avatar[data-role="admin"]{background:rgba(255,77,109,.15);color:#ff4d6d;}
.um2-avatar[data-role="operator"]{background:rgba(255,181,71,.15);color:#ffb547;}
.um2-avatar[data-role="viewer"]{background:var(--accent-dim,rgba(0,229,160,.15));color:var(--nw-accent);}
.um2-user-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.um2-username{font-weight:600;color:var(--text);}

.au-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;}
.au-badge-yellow{background:rgba(255,181,71,.15);color:#ffb547;}

.um2-role-text{font-size:.85rem;font-weight:600;color:var(--text-2);}
.um2-role-text--admin{color:#ff4d6d;}
.um2-role-text--operator{color:#ffb547;}
.um2-role-text--viewer{color:var(--nw-accent);}

.um2-status-cell{display:flex;align-items:center;}
.um2-status-text{font-size:.85rem;font-weight:600;}
.um2-status-text--active{color:var(--nw-accent);}
.um2-status-text--locked{color:#ff4d6d;}
.um2-status-text--disabled{color:var(--text-3);}

.um2-row-self{background:var(--bg3,rgba(148,163,184,.04));}
.um2-email{color:var(--text-2);}

.wl-clear-btn{
  background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-2);
  font-size:.8rem;font-weight:600;padding:6px 12px;cursor:pointer;transition:border-color .15s,color .15s;
}
.wl-clear-btn:hover{border-color:var(--nw-accent);color:var(--nw-accent);}

/* ============================================================
   Interface Statistics page (.is-kpi / .metric-* / .activity-*
   / .kv-* / .badge-off) — used by /monitor/interface-stats
   ============================================================ */

.metric-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.metric-title{font-size:.75rem;font-weight:700;color:var(--text-3);letter-spacing:.5px;text-transform:uppercase;}
.metric-icon{color:var(--text-3);font-size:18px;}
.metric-value-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px;gap:8px;}
.metric-value{font-size:2rem;font-weight:800;color:var(--text);line-height:1;font-family:var(--font-mono,monospace);}
.metric-pct{font-size:.85rem;font-weight:600;margin-bottom:2px;}
.is-kpi-green .metric-pct{color:var(--nw-accent);}
.is-kpi-blue .metric-pct{color:#4da6ff;}
.is-kpi-red .metric-pct{color:#ff4d6d;}
.is-kpi-purple .metric-pct{color:#a78bfa;}
.is-kpi-chart{display:block;}

.activity-card{padding:24px;}
.activity-header{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:24px;display:flex;align-items:baseline;gap:12px;}
.activity-meta{font-family:var(--font-mono,monospace);font-size:.8rem;color:var(--text-3);font-weight:500;}
.activity-row{margin-bottom:28px;}
.activity-row:last-child{margin-bottom:8px;}
.activity-labels{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px;}
.activity-title{font-size:.75rem;font-weight:700;color:var(--text-3);letter-spacing:.5px;text-transform:uppercase;}
.activity-val{font-size:.95rem;font-weight:700;}

.detail-card-title{font-size:.95rem;font-weight:700;color:var(--text);margin:0 0 16px 0;}
.kv-list{list-style:none;padding:0;margin:0;}
.kv-item{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);gap:12px;}
.kv-item:last-child{border-bottom:none;padding-bottom:0;}
.kv-key{font-size:.85rem;color:var(--text-3);font-weight:500;}
.kv-val{font-size:.85rem;color:var(--text);font-weight:700;font-family:var(--font-mono,monospace);}
.kv-val.val-red{color:#ff4d6d;}
.kv-val.val-green{color:var(--nw-accent);}
.badge-off{
  background:var(--bg3,rgba(148,163,184,.1));color:var(--text-3);font-size:.7rem;font-weight:700;
  padding:4px 10px;border-radius:4px;letter-spacing:.5px;
}
.badge-off.is-badge-on{background:var(--accent-dim,rgba(0,229,160,.15));color:var(--nw-accent);}

/* ============================================================
   NIC Diagnostics page (.details-table* / .metric-grid /
   .metric-card / .pill-container / .offload-pill) — used by
   /monitor/nic-diagnostics
   ============================================================ */

.details-table-wrapper{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:32px;}
.details-table{width:100%;border-collapse:collapse;}
.details-table td{padding:14px 24px;border-bottom:1px solid var(--border);font-size:.95rem;color:var(--text);}
.details-table tr:last-child td{border-bottom:none;}
.details-table tr:nth-child(even){background:var(--bg3,rgba(148,163,184,.04));}
.details-table td:nth-child(odd){font-weight:700;color:var(--text-2);width:25%;}
.details-table td:nth-child(even){color:var(--text);width:25%;}

.nic-diag-panels{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-bottom:24px;
}
.nic-diag-panel{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
}
.nic-diag-panel-head{
  padding:12px 14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
  background:var(--bg3,rgba(148,163,184,.08));
  border-bottom:1px solid var(--border);
}
@media (max-width: 900px) {
  .nic-diag-panels {
    grid-template-columns: 1fr;
  }
}

.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.section-title{font-size:1.1rem;font-weight:700;color:var(--text);margin:0;}

.metric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:32px;}
.metric-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:16px 20px;display:flex;flex-direction:column;}
.metric-card.hw-card{background:rgba(255,181,71,.06);border-color:rgba(255,181,71,.35);}
.metric-label{font-size:.8rem;font-weight:600;color:var(--text-3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px;}
.metric-value{font-size:1.4rem;font-weight:700;color:var(--text);}
.metric-meta{
  margin-top:8px;font-size:.78rem;line-height:1.25;color:var(--text-3);
  font-family:var(--font-mono,monospace);letter-spacing:.01em;
}

.pill-container{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;}
.offload-pill{
  background:var(--bg3,rgba(148,163,184,.1));color:var(--text-3);font-family:var(--font-mono,monospace);
  font-size:.85rem;padding:6px 14px;border-radius:20px;font-weight:500;
}
.offload-pill.on{background:var(--accent-dim,rgba(0,229,160,.15));color:var(--nw-accent);font-weight:600;}

/* ============================================================
   Interface IP Configuration page (.custom-table-wrapper /
   .actions-cell / .btn-icon / .number-input-wrapper / .val-*)
   — used by /network/interface-ip
   ============================================================ */

.custom-table-wrapper{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:32px;}
.custom-table-wrapper .table-input{
  border:none!important;background:transparent!important;box-shadow:none!important;height:32px!important;
  margin:0!important;padding:0!important;width:100%!important;text-align:left;font-size:.9rem!important;
  color:var(--text)!important;font-weight:500;font-family:inherit;
}
.custom-table-wrapper .table-input::placeholder{color:var(--text-3);}
.custom-table-wrapper tr.row-disabled .table-input{color:var(--text-3)!important;}

.actions-cell{display:flex;gap:8px;justify-content:flex-end;}
.btn-icon{
  width:32px;height:32px;border-radius:6px;border:1px solid var(--border);background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0;
}
.btn-icon i{font-size:16px;}
.btn-icon.btn-check{color:var(--text-3);}
.btn-icon.btn-check.active{color:var(--text);border-color:var(--text-2);}
.btn-icon.btn-delete{color:#ef4444;border-color:rgba(239,68,68,.4);}
.btn-icon.btn-delete:hover{background:rgba(239,68,68,.1);}
.btn-icon.btn-add{background:var(--nw-accent);border-color:var(--nw-accent);color:#031a10;}
.btn-icon.btn-add:hover{opacity:.9;}

.number-input-wrapper{display:flex;align-items:center;gap:4px;}
.number-input-wrapper .metric-input{
  width:56px!important;max-width:56px!important;min-width:56px!important;text-align:center!important;
}
.number-input-wrapper .metric-input::-webkit-outer-spin-button,
.number-input-wrapper .metric-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.number-input-wrapper .metric-input[type=number]{
  -moz-appearance:textfield;
  appearance:textfield;
}
@media(max-width:600px){
  .rt-section-header{display:none;}
  .ip-grid-head{display:none;}
  .number-input-wrapper .metric-input{
    width:44px!important;max-width:44px!important;min-width:44px!important;font-size:.8rem!important;
  }
}

.val-green{color:var(--nw-accent);}
.val-orange{color:#f59e0b;}
.val-teal{color:#00d68f;}
.val-blue{color:#3b82f6;}
.mono{font-family:var(--font-mono,monospace);}

/* ============================================================
   Row/col responsive list grid
   (.rl-grid-* / .dn-grid-* / .pf-grid-* / .sv-grid-* / .rt-grid-* /
   .ip-grid-* / .mq-grid-* / .dnr-grid-* / .vpn-grid-* / .um2-grid-* /
   .wl-grid-* / .co-grid-* / .ch-grid-* / .tsn-grid-* / .l3v-grid-* /
   .l7v-grid-* / .nd-grid-* / .th-grid-* / .au-grid-* / .hp-grid-*)
   — replaces row-based <table>s on /firewall/rules,
   /vaanvil/domains, /firewall/port-forwarding, /services/list,
   /services/profiles, /firewall/routing, /network/interface-ip,
   /firewall/masquerading, /firewall/dns-local-records, /vpn/peers,
   /system/users, /firewall/whitelists, /monitor/connections-overview,
   /monitor/connections-history, /monitor/telemetry (top talker details),
   /monitor/telemetry/network, /monitor/telemetry/l7,
   /monitor/nic-diagnostics, /firewall/threats, /system/audit, and
   /system/help with a Materialize 12-col grid that stacks per-field
   on mobile instead of scrolling horizontally
   ============================================================ */

.tr-grid-wrap .row,.sl-grid-wrap .row,.vp-grid-wrap .row,.hn-grid-wrap .row,.dd-grid-wrap .row,.rl-grid-wrap .row,.dn-grid-wrap .row,.pf-grid-wrap .row,.sv-grid-wrap .row,.rt-grid-wrap .row,.ip-grid-wrap .row,.mq-grid-wrap .row,.dnr-grid-wrap .row,.vpn-grid-wrap .row,.um2-grid-wrap .row,.wl-grid-wrap .row,.co-grid-wrap .row,.ch-grid-wrap .row,.tsn-grid-wrap .row,.l3v-grid-wrap .row,.l7v-grid-wrap .row,.nd-grid-wrap .row,.th-grid-wrap .row,.au-grid-wrap .row,.hp-grid-wrap .row{margin:0;}
.tr-grid-row,.sl-grid-row,.vp-grid-row,.hn-grid-row,.dd-grid-row,.rl-grid-row,.dn-grid-row,.pf-grid-row,.sv-grid-row,.rt-grid-row,.ip-grid-row,.mq-grid-row,.dnr-grid-row,.vpn-grid-row,.um2-grid-row,.wl-grid-row,.co-grid-row,.ch-grid-row,.tsn-grid-row,.l3v-grid-row,.l7v-grid-row,.nd-grid-row,.th-grid-row,.au-grid-row,.hp-grid-row{align-items:center;padding:8px 16px;border-bottom:1px solid var(--border);}
.tr-grid-row > .col,.sl-grid-row > .col,.vp-grid-row > .col,.hn-grid-row > .col,.dd-grid-row > .col,.rl-grid-row > .col,.dn-grid-row > .col,.pf-grid-row > .col,.sv-grid-row > .col,.rt-grid-row > .col,.ip-grid-row > .col,.mq-grid-row > .col,.dnr-grid-row > .col,.vpn-grid-row > .col,.um2-grid-row > .col,.wl-grid-row > .col,.co-grid-row > .col,.ch-grid-row > .col,.tsn-grid-row > .col,.l3v-grid-row > .col,.l7v-grid-row > .col,.nd-grid-row > .col,.th-grid-row > .col,.au-grid-row > .col,.hp-grid-row > .col{padding:4px 8px;font-size:13px;color:var(--text);}
.tr-grid-head,.sl-grid-head,.vp-grid-head,.hn-grid-head,.dd-grid-head,.rl-grid-head,.dn-grid-head,.pf-grid-head,.sv-grid-head,.rt-grid-head,.ip-grid-head,.mq-grid-head,.dnr-grid-head,.vpn-grid-head,.um2-grid-head,.wl-grid-head,.co-grid-head,.ch-grid-head,.tsn-grid-head,.l3v-grid-head,.l7v-grid-head,.nd-grid-head,.th-grid-head,.au-grid-head,.hp-grid-head{background:var(--card);}
.tr-grid-head > .col,.sl-grid-head > .col,.vp-grid-head > .col,.hn-grid-head > .col,.dd-grid-head > .col,.rl-grid-head > .col,.dn-grid-head > .col,.pf-grid-head > .col,.sv-grid-head > .col,.rt-grid-head > .col,.ip-grid-head > .col,.mq-grid-head > .col,.dnr-grid-head > .col,.vpn-grid-head > .col,.um2-grid-head > .col,.wl-grid-head > .col,.co-grid-head > .col,.ch-grid-head > .col,.tsn-grid-head > .col,.l3v-grid-head > .col,.l7v-grid-head > .col,.nd-grid-head > .col,.th-grid-head > .col,.au-grid-head > .col,.hp-grid-head > .col{
  padding:10px 8px;font-size:11px;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.04em;
}
.tr-grid-filters > .col,.sl-grid-filters > .col,.vp-grid-filters > .col,.hn-grid-filters > .col,.dd-grid-filters > .col,.rl-grid-filters > .col,.dn-grid-filters > .col,.pf-grid-filters > .col,.sv-grid-filters > .col,.rt-grid-filters > .col,.ip-grid-filters > .col,.mq-grid-filters > .col,.dnr-grid-filters > .col,.vpn-grid-filters > .col,.um2-grid-filters > .col,.wl-grid-filters > .col,.co-grid-filters > .col,.ch-grid-filters > .col,.tsn-grid-filters > .col,.l3v-grid-filters > .col,.l7v-grid-filters > .col,.nd-grid-filters > .col,.th-grid-filters > .col,.au-grid-filters > .col,.hp-grid-filters > .col{padding:8px 8px;}
/* Zebra striping — rendering code adds "is-odd" to every other
   .*-grid-body-row (index-based, since some tables interleave a
   sibling .*-detail-row after each body row, which would throw off
   a pure :nth-child(even) selector). */
[class*="-grid-body-row"].is-odd{background:var(--bg3,rgba(148,163,184,.035));}
.tr-grid-body-row:hover,.sl-grid-body-row:hover,.vp-grid-body-row:hover,.hn-grid-body-row:hover,.dd-grid-body-row:hover,.rl-grid-body-row:hover,.dn-grid-body-row:hover,.pf-grid-body-row:hover,.sv-grid-body-row:hover,.rt-grid-body-row:hover,.ip-grid-body-row:hover,.mq-grid-body-row:hover,.dnr-grid-body-row:hover,.vpn-grid-body-row:hover,.um2-grid-body-row:hover,.wl-grid-body-row:hover,.co-grid-body-row:hover,.ch-grid-body-row:hover,.tsn-grid-body-row:hover,.l3v-grid-body-row:hover,.l7v-grid-body-row:hover,.nd-grid-body-row:hover,.th-grid-body-row:hover,.au-grid-body-row:hover,.hp-grid-body-row:hover{background:var(--bg4,rgba(148,163,184,.08));}
.tr-grid-body-row:last-child,.sl-grid-body-row:last-child,.vp-grid-body-row:last-child,.hn-grid-body-row:last-child,.dd-grid-body-row:last-child,.rl-grid-body-row:last-child,.dn-grid-body-row:last-child,.pf-grid-body-row:last-child,.sv-grid-body-row:last-child,.rt-grid-body-row:last-child,.ip-grid-body-row:last-child,.mq-grid-body-row:last-child,.dnr-grid-body-row:last-child,.vpn-grid-body-row:last-child,.um2-grid-body-row:last-child,.wl-grid-body-row:last-child,.co-grid-body-row:last-child,.ch-grid-body-row:last-child,.tsn-grid-body-row:last-child,.l3v-grid-body-row:last-child,.l7v-grid-body-row:last-child,.nd-grid-body-row:last-child,.th-grid-body-row:last-child,.au-grid-body-row:last-child,.hp-grid-body-row:last-child{border-bottom:none;}
.rl-cell-label{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--text-3);text-transform:uppercase;margin-bottom:2px;}

/* ============================================================
   Dark header bar + stronger zebra striping for the whitelists,
   rules, domains, port-forwarding, threats, DDoS Guard, services
   (list + profiles), interface-ip, routing, masquerading,
   dns-local-records, vpn/peers, users, and audit grids
   (.wl-grid-*, .rl-grid-*, .dn-grid-*, .pf-grid-*, .th-grid-*,
   .dd-grid-*, .sv-grid-*, .ip-grid-*, .rt-grid-*, .mq-grid-*,
   .dnr-grid-*, .vpn-grid-*, .um2-grid-*, .au-grid-*) and the
   DNS Blocklist chip-row list (.dns-domain-row). Overrides the
   shared --card header background and the default .035-opacity
   zebra above with an explicit dark navy bar + visible alternating
   row tint, in both themes.

   Sidecar/Vaanvil's Firewall Policies grid (.vp-grid-*) and the
   System Help grid (.hp-grid-*) only get the stronger zebra tint,
   not the dark header bar (left as the shared --card background).
   ============================================================ */
.wl-grid-head,.rl-grid-head,.dn-grid-head,.pf-grid-head,.th-grid-head,.dd-grid-head,.sv-grid-head,
.ip-grid-head,.rt-grid-head,.mq-grid-head,.dnr-grid-head,.vpn-grid-head,.um2-grid-head,.au-grid-head,.co-grid-head,.tsn-grid-head,.l3v-grid-head,.l7v-grid-head{
  background:#1e293b!important;
}
.wl-grid-head > .col,.rl-grid-head > .col,.dn-grid-head > .col,.pf-grid-head > .col,.th-grid-head > .col,.dd-grid-head > .col,.sv-grid-head > .col,
.ip-grid-head > .col,.rt-grid-head > .col,.mq-grid-head > .col,.dnr-grid-head > .col,.vpn-grid-head > .col,.um2-grid-head > .col,.au-grid-head > .col,.co-grid-head > .col,.tsn-grid-head > .col,.l3v-grid-head > .col,.l7v-grid-head > .col{
  color:#cbd5e1!important;
}
.dns-domain-row{background:transparent;}
.wl-grid-body-row.is-odd,.rl-grid-body-row.is-odd,.dn-grid-body-row.is-odd,.pf-grid-body-row.is-odd,
.th-grid-body-row.is-odd,.dd-grid-body-row.is-odd,.sv-grid-body-row.is-odd,
.ip-grid-body-row.is-odd,.rt-grid-body-row.is-odd,.mq-grid-body-row.is-odd,.dnr-grid-body-row.is-odd,.vpn-grid-body-row.is-odd,
.um2-grid-body-row.is-odd,.au-grid-body-row.is-odd,.vp-grid-body-row.is-odd,.hp-grid-body-row.is-odd,.co-grid-body-row.is-odd,
.dns-domain-row:nth-child(even){
  background:var(--bg4,rgba(148,163,184,.07));
}
@media(max-width:600px){
  .tr-grid-row,.sl-grid-row,.vp-grid-row,.hn-grid-row,.dd-grid-row,.rl-grid-row,.dn-grid-row,.pf-grid-row,.sv-grid-row,.rt-grid-row,.ip-grid-row,.mq-grid-row,.dnr-grid-row,.vpn-grid-row,.um2-grid-row,.wl-grid-row,.co-grid-row,.ch-grid-row,.tsn-grid-row,.l3v-grid-row,.l7v-grid-row,.nd-grid-row,.th-grid-row,.au-grid-row,.hp-grid-row{padding:12px 16px;row-gap:4px;}
  .tr-grid-row > .col,.sl-grid-row > .col,.vp-grid-row > .col,.hn-grid-row > .col,.dd-grid-row > .col,.rl-grid-row > .col,.dn-grid-row > .col,.pf-grid-row > .col,.sv-grid-row > .col,.rt-grid-row > .col,.ip-grid-row > .col,.mq-grid-row > .col,.dnr-grid-row > .col,.vpn-grid-row > .col,.um2-grid-row > .col,.wl-grid-row > .col,.co-grid-row > .col,.ch-grid-row > .col,.tsn-grid-row > .col,.l3v-grid-row > .col,.l7v-grid-row > .col,.nd-grid-row > .col,.th-grid-row > .col,.au-grid-row > .col,.hp-grid-row > .col{padding:6px 8px;}
}
.rl-detail-row,.dn-detail-row,.pf-detail-row,.sv-detail-row,.rt-detail-row,.ip-detail-row,.mq-detail-row,.dnr-detail-row,.vpn-detail-row,.co-detail-row{border-bottom:1px solid var(--border);}
.rl-detail-row:last-child,.dn-detail-row:last-child,.pf-detail-row:last-child,.sv-detail-row:last-child,.rt-detail-row:last-child,.ip-detail-row:last-child,.mq-detail-row:last-child,.dnr-detail-row:last-child,.vpn-detail-row:last-child,.co-detail-row:last-child{border-bottom:none;}
.rl-detail-grid{display:flex;gap:24px;padding:12px 16px;flex-wrap:wrap;}
.rl-detail-item{display:flex;flex-direction:column;gap:2px;}
.rl-detail-label{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--text-3);text-transform:uppercase;}
.rl-detail-value{font-size:13px;color:var(--text);}

/* ============================================================
   RecordsTable (.rec-grid-*) — generic templ component with a
   caller-supplied column count, so it uses CSS grid with an inline
   grid-template-columns instead of the fixed Materialize col s*
   layout the other *-grid-* tables use.
   ============================================================ */
.rec-grid-wrap{width:100%;}
.rec-grid-row{display:grid;gap:8px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--border);}
.rec-grid-row > div{padding:4px 8px;font-size:13px;color:var(--text);}
.rec-grid-head{background:var(--card);}
.rec-grid-head > div{padding:10px 8px;font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;}
.rec-grid-body-row.is-odd{background:var(--bg3,rgba(148,163,184,.035));}
.rec-grid-body-row:hover{background:var(--bg4,rgba(148,163,184,.08));}
.rec-grid-body-row:last-child{border-bottom:none;}
.rec-grid-empty{text-align:center;padding:18px;color:var(--text-3);}
@media(max-width:600px){
  .rec-grid-row:not(.rec-grid-head){grid-template-columns:1fr!important;row-gap:4px;padding:12px 16px;}
}

/* ============================================================
   Connections History (/monitor/connections-history) —
   header/back button, time-range pills, top-talkers/recent/
   all-hosts 3-way toggle, panel headers, empty state, proto
   badges. Also shared by Connections Overview's live table.
   ============================================================ */

.ch-hist-page .au-header{margin-bottom:20px;}
.ch-hist-page .row.nw-row{margin-bottom:20px;}
.ch-hist-header{align-items:center;flex-wrap:wrap;gap:14px;}
.ch-hist-back{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;text-decoration:none;
}
.ch-hist-back i{font-size:18px;line-height:1;}
.ch-hist-header-left{display:flex;align-items:center;gap:14px;}
.ch-hist-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto;}
.ch-hist-updated{font-size:11px;color:var(--text-3);font-family:var(--font-mono,monospace);white-space:nowrap;}
.ch-hist-card .card-content{padding:16px 18px 12px;}

.mon-panel-hd{display:flex;flex-direction:column;gap:2px;}
.mon-panel-eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-3);text-transform:uppercase;}
.mon-panel-title{font-size:15px;font-weight:700;color:var(--text);}

.no-topbar-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.no-topbar-pill{
  display:inline-flex;align-items:center;height:30px;padding:0 14px;
  border-radius:999px;border:1px solid var(--border);background:var(--card);
  color:var(--text-2);font-size:12px;font-weight:600;text-decoration:none;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s,box-shadow .15s;
  white-space:nowrap;
}
.no-topbar-pill:hover{border-color:rgba(0,229,160,.45);color:var(--nw-accent);background:var(--nw-accent-dim);}
.no-topbar-pill.is-active{
  background:var(--card);border-color:rgba(0,229,160,.6);color:var(--nw-accent);
  box-shadow:0 0 0 1px rgba(0,229,160,.08) inset;
}
.no-topbar-pill.is-active:hover{color:var(--nw-accent);background:var(--nw-accent-dim);}

.au-empty{padding:32px 16px;text-align:center;color:var(--text-3);font-size:13px;}

/* Table cell helpers shared by the connections history/overview tables */
.ch-rank{color:var(--text-3);font-family:var(--font-mono,monospace);width:32px;}
.ch-ip{font-family:var(--font-mono,monospace);font-weight:600;color:var(--text);}
.conn-mono{font-family:var(--font-mono,monospace);}
.conn-dim{color:var(--text-3);}
.conn-ip-bold{font-family:var(--font-mono,monospace);font-weight:600;color:var(--text);}
.conn-proto-badge{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.02em;background:var(--bg3,rgba(148,163,184,.12));color:var(--text-2);
}
.conn-proto-badge.conn-proto-tcp{background:rgba(59,130,246,.15);color:#3b82f6;}
.conn-proto-badge.conn-proto-udp{background:rgba(0,229,160,.15);color:var(--nw-accent);}
.conn-proto-badge.conn-proto-tls{background:rgba(139,92,246,.15);color:#8b5cf6;}
.conn-proto-badge.conn-proto-icmp,.conn-proto-badge.conn-proto-ipv6icmp{background:rgba(245,158,11,.15);color:#f59e0b;}
.conn-proto-badge.conn-proto-igmp,.conn-proto-badge.conn-proto-hopopt,.conn-proto-badge.conn-proto-other{background:var(--bg3,rgba(148,163,184,.12));color:var(--text-2);}

.rl-table th{white-space:nowrap;}
.conn-history-table td{font-size:12px;}

/* Connections Overview live-connections table + pagination */
.conn-col-num{text-align:right;}
.conn-col-total{font-weight:700;color:var(--text);}
.conn-total-wrap{cursor:help;}
.is-ml-auto{margin-left:auto;}
.mon-pagination-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--border);flex-wrap:wrap;}
.mon-pagination-info{font-size:12px;color:var(--text-3);}
.mon-pagination-btns{display:flex;align-items:center;gap:4px;}
.mon-pg-btn{
  height:28px;min-width:28px;padding:0 8px;border-radius:6px;border:1px solid var(--border);
  background:var(--card);color:var(--text-2);font-size:12px;font-weight:600;cursor:pointer;
}
.mon-pg-btn:hover:not(:disabled){border-color:var(--nw-accent);color:var(--nw-accent);}
.mon-pg-btn:disabled{opacity:.4;cursor:not-allowed;}
.mon-pg-btn--active{background:var(--nw-accent);border-color:var(--nw-accent);color:#031a10;}
.mon-pg-ellipsis{color:var(--text-3);font-size:12px;padding:0 4px;}

@media(max-width:700px){
  .ch-hist-header{flex-direction:column;align-items:flex-start;}
  .ch-hist-controls{margin-left:0;width:100%;justify-content:flex-start;}
}

/* ============================================================
   Telemetry Summary (/monitor/telemetry) — KPI row, traffic
   distribution donut, top-talkers bar chart, details table.
   Layout/palette adapted from the "Network Traffic & Security
   Dashboard" mockup, using this app's card/border/text tokens
   so it still themes correctly in light/dark mode.
   ============================================================ */

.tsn-summary-root{display:flex;flex-direction:column;gap:20px;}

.summary-value.tsn-blue{color:#6eb0d9;}

.tsn-charts-row{display:grid;grid-template-columns:minmax(240px,1fr) 3fr;gap:20px;align-items:stretch;}
.tsn-card{
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.02);padding:24px;
}
.tsn-card-title{font-size:.85rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.05em;margin:0 0 20px 0;}
.tsn-card-sub{
  font-size:11px;
  color:var(--text-3);
  font-family:var(--font-mono,monospace);
  margin:-12px 0 16px 0;
}

.conn-card-title-wrap{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.tsn-donut-card{display:flex;flex-direction:column;}
.tsn-donut-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px;}
.tsn-donut-canvas{width:220px;height:220px;max-width:100%;}
.tsn-donut-legend{display:flex;gap:20px;align-items:center;font-size:.85rem;font-weight:600;color:var(--text-2);}
.tsn-leg-dot{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:middle;}

.tsn-bar-card{overflow-x:auto;}
.tsn-hbar-canvas{width:100%;display:block;}

.tsn-tables-row .tsn-card{padding:24px;}
.conn-overview-page .card-content{
  padding:24px;
}
.conn-overview-page .conn-table{
  margin-top:8px;
}
.tsn-td-empty{padding:32px 16px;text-align:center;color:var(--text-3);}
.tsn-mono{font-family:var(--font-mono,monospace);font-size:.85rem;}
.tsn-muted{color:var(--text-3);}
.tsn-tr{text-align:right;font-family:var(--font-mono,monospace);font-size:.85rem;}
.tsn-bold{font-weight:700;color:var(--text);}

@media(max-width:900px){
  .tsn-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tsn-charts-row{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .tsn-kpi-row{grid-template-columns:1fr;}
}

/* ============================================================
   L3/L4 IP Events (/monitor/telemetry/network) — panel shell,
   events-over-time + calendar row, time scrubber, recent-events
   table, top-destinations/blocked-sources row, event detail modal.
   .mon-panel-hd/.mon-panel-eyebrow/.mon-panel-title, .mon-pagination-*
   and .mon-pg-btn are shared with Connections History; .conn-proto-badge
   variants are shared with Connections Overview/History and Telemetry
   Summary — reuse them rather than redefining per-page equivalents.
   ============================================================ */

.l3-mon-page,.l7-mon-page{display:flex;flex-direction:column;gap:20px;}

/* ANCHOR: Distinct header background + stronger zebra striping for the
   L3/L4 and L7 telemetry tables — the shared [class*="-grid-head"]/
   [class*="-grid-body-row"].is-odd rules use var(--card), the same
   background as the surrounding panel, so the header row didn't read as
   a header and the zebra stripe was barely visible. Scoped to these two
   pages (higher specificity than the shared rule) so no other table's
   striping is affected. */
.l3v-grid-head,.l7v-grid-head{font-weight:700;}
.l3v-grid-body-row.is-odd,.l7v-grid-body-row.is-odd{background:var(--bg3,rgba(148,163,184,.07))!important;}

.mon-panel{margin:0;}
.mon-panel .card-content.mon-panel-content{padding:20px;}
.mon-panel-hd{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;}
.mon-panel-hd-left{display:flex;flex-direction:column;gap:2px;}
.mon-panel-hd-right{flex-shrink:0;}
.mon-panel-body{min-width:0;}
.mon-panel-subtitle{font-size:11px;color:var(--text-3);margin:-6px 0 10px;}

.l7-row-chart{display:grid;grid-template-columns:3fr 1fr;gap:20px;align-items:stretch;}
.l7-row-chart .mon-panel{display:flex;flex-direction:column;}
.l7-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

/* ANCHOR: standalone Filter row — sits in its own padded space between the
   Time Filters panel and the Data/Recent-Events (or L7 Events) panel,
   instead of being glued into either panel's header bar. */
.mon-filter-standalone{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  /* .l3-mon-page/.l7-mon-page already applies a 20px flex gap between every
     direct child section — no margin needed here or it doubles up. */
  padding:0 4px;
}
.mon-filter-standalone > .tf-filter-btn{margin-left:auto;}
@media(max-width:900px){
  .l7-row-chart,.l7-row-2col{grid-template-columns:1fr;}
}

/* Mini calendar */
.mon-cal-wrap{display:flex;flex-direction:column;gap:12px;}
.mon-cal-nav{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.9rem;color:var(--text);}
.mon-cal-nav-btn{
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:6px;color:var(--text-3);text-decoration:none;background:transparent;border:none;cursor:pointer;
}
.mon-cal-nav-btn:hover{background:var(--bg3,rgba(148,163,184,.08));color:var(--text);}
.mon-cal-month-label{font-size:.9rem;font-weight:700;color:var(--text);}
.mon-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:.8rem;row-gap:8px;}
.mon-cal-dow{font-weight:600;color:var(--text);font-size:.72rem;margin-bottom:4px;color:var(--text-3);}
.mon-cal-day{
  color:var(--text-2);padding:4px 0;position:relative;text-decoration:none;
  display:block;border-radius:50%;width:26px;height:26px;line-height:26px;margin:0 auto;
}
.mon-cal-day--empty{visibility:hidden;}
.mon-cal-day--future.mon-cal-day--no-data{color:var(--text-3);opacity:.4;cursor:not-allowed;}
/* ANCHOR: calendar day styling.
   Keep selectable days lightly highlighted, but do not render data dots
   under the numbers. Selected day uses a pill shape instead of a tight
   circle so the highlight reads more clearly. */
.mon-cal-day--has-data{cursor:pointer;position:relative;}
.mon-cal-day--has-data:hover{background:var(--bg3,rgba(148,163,184,.1));}
.mon-cal-day--today{font-weight:700;color:var(--nw-accent);}
.mon-cal-day--selected{
  background:var(--nw-accent)!important;
  color:#031a10!important;
  font-weight:700;
  border-radius:999px;
  width:34px;
  height:26px;
  line-height:26px;
}

/* ANCHOR: Hourly time scrubber — ported from web/preact's TimeFilterPanel.
   Per-slot background intensity is now set inline per-segment by Go
   (rgba(60,130,200,alpha)); this base rule is only the fallback/transition
   for segments (all currently get an inline style) and the hover state.
   Selected slot keeps the intensity fill and adds a green selection ring,
   so the grade remains visible when a slot is active. */
.mon-scrubber-wrap{display:flex;flex-direction:column;gap:8px;}
.mon-scrubber-bar{display:flex;gap:4px;height:28px;}
.mon-scrubber-seg{
  flex:1;background:rgba(60,130,200,.2);border-radius:2px;text-decoration:none;transition:background .15s;
}
.mon-scrubber-seg:hover{background:rgba(60,130,200,.55)!important;}
.mon-scrubber-seg--active{
  box-shadow:inset 0 0 0 2px #27ae60;
  transform:translateY(-1px);
}
.mon-scrubber-labels{display:flex;justify-content:space-between;font-family:var(--font-mono,monospace);font-size:.7rem;color:var(--text-3);padding:0 2px;}
.mon-scrubber-clear-btn{font-size:.75rem;color:var(--text-3);text-decoration:underline;}
.mon-scrubber-clear-btn:hover{color:var(--nw-accent);}

/* Selected-slot label row ("▶ 17:00 – 18:00" + "✕ clear"), shown above the
   scrubber only when a slot is selected — ported from web/preact's
   Panel headerRight markup for TimeFilterPanel. */
.mon-panel-slot-info{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.mon-panel-slot-label{font-family:var(--font-mono,monospace);font-size:.8rem;font-weight:700;color:var(--nw-accent);}

/* Recent events table */
.mon-table-scroll{overflow-x:auto;}
.mon-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.mon-table thead tr:first-child{background:var(--table-header-bg,#2d3748);color:#fff;}
.mon-table thead tr:first-child th{padding:12px 16px;font-weight:600;text-transform:uppercase;font-size:.72rem;letter-spacing:.03em;text-align:left;white-space:nowrap;}
.mon-table thead tr.sv-filter-row{background:var(--bg3,rgba(148,163,184,.06));}
.mon-table thead tr.sv-filter-row th{padding:8px 10px;border-bottom:1px solid var(--border);}
.mon-table tbody tr{border-bottom:1px solid var(--border);}
.mon-table tbody tr:nth-child(even) td{background:var(--bg3,rgba(148,163,184,.03));}
.mon-table tbody tr:last-child{border-bottom:none;}

.l7v-table tbody tr:nth-child(even) td{background:var(--bg3,rgba(148,163,184,.03));}
.mon-table tbody td{padding:12px 16px;color:var(--text);}
.mon-tr-clickable{cursor:pointer;}
.mon-tr-clickable:hover{background:var(--bg3,rgba(148,163,184,.05));}
.l3v-td-mono,.l7v-td-mono{font-family:var(--font-mono,monospace);font-size:.8rem;}
.l3v-td-time,.l7v-td-time{white-space:nowrap;}
.l3v-td-total,.l7v-td-total{font-weight:700;}
.l3v-td-proto,.l7v-td-proto{text-transform:uppercase;font-size:.8rem;color:var(--text-2);}
.l3v-td-empty,.l7v-td-empty,.l7v-empty{padding:32px 16px;text-align:center;color:var(--text-3);}
.l3v-addr-ip,.l7v-addr-ip{font-family:var(--font-mono,monospace);font-size:.8rem;}
.l3v-addr-port,.l7v-addr-port{font-family:var(--font-mono,monospace);font-size:.8rem;color:#8b5cf6;}
.l3v-verdict-badge,.l7v-verdict-badge{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  border:1px solid;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;background:transparent;
}
.l3v-filter-chip,.l7v-filter-chip{transition:opacity .15s;}
.l3v-filter-chip:hover,.l7v-filter-chip:hover{opacity:.8;}
.l7v-td-sni{font-family:var(--font-mono,monospace);font-size:.8rem;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.l7v-td-share{text-align:right;font-family:var(--font-mono,monospace);font-size:.8rem;}
.l7v-eyebrow{display:block;font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;}

/* L7 KPI row (Allow % / Block % / Total / Events per minute) */
.l7v-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.l7v-kpi-card{
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.02);padding:20px 24px;
}
.l7v-kpi-label{font-size:.72rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.l7v-kpi-value{font-size:2.1rem;font-weight:700;color:var(--text);line-height:1.1;font-family:var(--font-mono,monospace);}
.l7v-kpi-green{color:var(--nw-accent);}
.l7v-kpi-red{color:#ef4444;}

/* L7 side tables (Verdict Distribution / Top SNI) */
.l7v-table-wrap{overflow-x:auto;}
.l7v-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.l7v-table th{padding:10px 8px;text-align:left;font-size:.72rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);}
.l7v-table th:not(:first-child){text-align:right;}
.l7v-table td{padding:10px 8px;border-bottom:1px solid var(--border);color:var(--text);}
.l7v-table tr:last-child td{border-bottom:none;}

@media(max-width:900px){
  .l7v-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:600px){
  .l7v-kpi-row{grid-template-columns:1fr;}
}

/* Event detail modal */
.mon-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:center;justify-content:center;}
.evd-modal{
  width:min(560px,92vw);max-height:80vh;overflow-y:auto;background:var(--card);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.evd-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.evd-header-left{display:flex;align-items:center;gap:10px;}
.evd-type-badge{font-size:.85rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.03em;}
.evd-verdict-badge{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  border:1px solid;font-size:.72rem;font-weight:700;text-transform:uppercase;background:transparent;
}
.evd-close{
  background:transparent;border:none;color:var(--text-3);font-size:22px;line-height:1;cursor:pointer;padding:0 4px;
}
.evd-close:hover{color:var(--text);}
.evd-body{padding:20px;}
.evd-section-title{font-size:.72rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;}
.evd-table{width:100%;}
.evd-row{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--border);}
.evd-row:nth-child(even){background:var(--bg3,rgba(148,163,184,.03));}
.evd-row:last-child{border-bottom:none;}
.evd-key{padding:8px 0;font-size:.8rem;font-weight:600;color:var(--text-2);flex:0 0 35%;max-width:35%;}
.evd-value{padding:8px 0;font-size:.8rem;font-family:var(--font-mono,monospace);color:var(--text);word-break:break-word;flex:1 1 60%;min-width:0;}
@media(max-width:480px){
  .evd-key,.evd-value{flex:1 1 100%;max-width:100%;}
}

/* Refresh button used by the telemetry pages' header (utm-refresh-btn) */
.utm-refresh-btn{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;min-height:36px;
  padding:0!important;line-height:36px;border-radius:50%;border:1px solid var(--border);
  background:var(--card);color:var(--text-2);box-shadow:none;text-decoration:none;overflow:hidden;
  transition:border-color .15s,color .15s,background .15s;
}
.utm-refresh-btn:hover{border-color:var(--nw-accent);color:var(--nw-accent);background:var(--nw-accent-dim);}
.utm-refresh-btn i{font-size:20px;line-height:1;margin:0;}

/* ============================================================
   Create Firewall Rule — flowchart layout (/firewall/rules/create)
   .rc-page / .rc-topbar / .rc-basic-info / .rc-flow / .rc-flow-node /
   .rc-footer. Source -> Neurowall action -> Destination, connected
   by arrows, matching the "Create Rule" flowchart mockup.
   ============================================================ */

.rc-page{padding-bottom:90px;}
.rc-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.rc-topbar-sub{font-family:var(--font-mono,monospace);font-size:.85rem;color:var(--text-3);margin-right:auto;}
.rc-tips-btn{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text-2);
  font-size:.8rem;font-weight:600;cursor:pointer;
}
.rc-tips-btn:hover{border-color:var(--nw-accent);color:var(--nw-accent);}

.nw-btn-refresh{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text-2);
  font-size:.8rem;font-weight:600;text-decoration:none;
}
.nw-btn-refresh:hover{border-color:var(--nw-accent);color:var(--nw-accent);}

.rc-basic-info{margin-bottom:20px;}
.rc-section-label{font-size:.72rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;}
.rc-basic-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.rc-field{display:flex;flex-direction:column;gap:4px;}
.rc-label{font-size:.8rem;font-weight:700;color:var(--text);}
.rc-label-hint{font-size:.72rem;font-weight:400;color:var(--text-3);margin-bottom:2px;}
.rc-input,.rc-select{
  width:100%;height:40px;border:1px solid var(--border);border-radius:6px;padding:0 12px;
  font-size:.9rem;color:var(--text);background:var(--card);outline:none;box-sizing:border-box;font-family:inherit;
}
.rc-input:focus,.rc-select:focus{border-color:var(--nw-accent);}
.rc-input::placeholder{color:var(--text-3);}
.rc-select{appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394a3b8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right 10px top 50%;background-size:9px auto;padding-right:28px;}

/* Source / Neurowall / Destination vertical flow layout, ported from
   web/preact/src/styles.css (.rl-flow-*) so /firewall/rules/create matches
   the original Preact "packet flowing through Neurowall" visual: stacked
   boxes connected by arrows, with a floating pill badge over the controls
   box, instead of three flat side-by-side cards. */
.rl-flow{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;max-width:540px;margin:0 auto;}
.rl-flow-box{
  width:100%;border:1.5px solid var(--border);border-radius:calc(14px * var(--nw-scale,1));
  padding:calc(18px * var(--nw-scale,1));background:var(--card);display:flex;flex-direction:column;
  gap:calc(14px * var(--nw-scale,1));box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.rl-flow-src{border-color:rgba(251,146,60,.45);background:linear-gradient(135deg,var(--card) 0%,rgba(251,146,60,.03) 100%);}
.rl-flow-dst{border-color:rgba(0,229,160,.4);background:linear-gradient(135deg,var(--card) 0%,rgba(0,229,160,.03) 100%);}
.rl-flow-box-hd{display:flex;align-items:center;gap:calc(8px * var(--nw-scale,1));}
.rl-flow-src .rl-flow-box-hd{color:#f97316;}
.rl-flow-dst .rl-flow-box-hd{color:#059669;}
.rl-flow-box-icon{
  width:calc(34px * var(--nw-scale,1));height:calc(34px * var(--nw-scale,1));border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rl-flow-src .rl-flow-box-icon{background:rgba(249,115,22,.15);color:#f97316;}
.rl-flow-dst .rl-flow-box-icon{background:rgba(5,150,105,.15);color:#059669;}
.rl-flow-box-label{display:flex;flex-direction:column;gap:1px;}
.rl-flow-box-title{font-size:calc(13px * var(--nw-scale,1));font-weight:700;color:var(--text);line-height:1;}
.rl-flow-box-sub{font-size:calc(11px * var(--nw-scale,1));color:var(--text-3);}
.rl-flow-box-fields{display:flex;flex-direction:column;gap:calc(12px * var(--nw-scale,1));}
.rl-flow-box-fields-row{display:grid;grid-template-columns:1fr 1fr;gap:calc(12px * var(--nw-scale,1));}
.rl-flow-box-fields-row-3{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:500px){.rl-flow-box-fields-row,.rl-flow-box-fields-row-3{grid-template-columns:1fr;}}

/* Compact single-line variant: icon + title + subtitle inline on one row
   (instead of icon-in-circle above a stacked title/subtitle), used by
   simpler flow pages (e.g. port-forwarding create) where the flowchart
   doesn't need the taller Source/Neurowall/Destination card treatment. */
.rl-flow-box-hd-inline{gap:calc(6px * var(--nw-scale,1));margin-bottom:calc(2px * var(--nw-scale,1));flex-wrap:wrap;}
.rl-flow-box-hd-inline .rl-flow-box-title{font-size:calc(14px * var(--nw-scale,1));}
.rl-flow-box-hd-inline .rl-flow-box-sub{font-weight:400;}
.rl-flow-box-icon-plain{font-size:calc(17px * var(--nw-scale,1))!important;}

/* Standalone Neurowall badge with no controls box beneath — for flows
   (like NAT/DNAT) that don't need an editable middle step. */
.rl-flow-nw-badge{
  display:inline-flex;align-items:center;gap:calc(8px * var(--nw-scale,1));align-self:center;
  padding:calc(10px * var(--nw-scale,1)) calc(22px * var(--nw-scale,1));background:var(--nw-accent);color:#041810;
  border-radius:calc(40px * var(--nw-scale,1));font-size:calc(13px * var(--nw-scale,1));font-weight:800;
  letter-spacing:.04em;box-shadow:0 4px 16px rgba(0,229,160,.35);
}

.rl-flow-arrow{display:flex;flex-direction:column;align-items:center;gap:0;height:calc(36px * var(--nw-scale,1));position:relative;z-index:0;}
.rl-flow-arrow-line{flex:1;width:2px;background:linear-gradient(to bottom,rgba(0,229,160,.5),rgba(0,229,160,.2));}
.rl-flow-arrow-head{display:block;margin-top:-1px;}
.rl-flow-nw{width:100%;max-width:540px;display:flex;flex-direction:column;align-items:center;gap:0;position:relative;}
.rl-flow-nw-inner{
  display:inline-flex;align-items:center;gap:calc(9px * var(--nw-scale,1));
  padding:calc(11px * var(--nw-scale,1)) calc(28px * var(--nw-scale,1));background:var(--nw-accent);color:#041810;
  border-radius:calc(40px * var(--nw-scale,1));font-size:calc(13px * var(--nw-scale,1));font-weight:800;
  letter-spacing:.04em;box-shadow:0 4px 20px rgba(0,229,160,.4),0 0 0 4px rgba(0,229,160,.1);
  position:relative;z-index:1;margin-bottom:calc(-18px * var(--nw-scale,1));
}
.rl-flow-nw-controls{
  width:100%;display:grid;grid-template-columns:1fr 1.6fr .8fr 1fr;gap:calc(10px * var(--nw-scale,1));
  background:rgba(0,229,160,.04);border:1.5px solid var(--nw-accent);border-radius:calc(14px * var(--nw-scale,1));
  padding:calc(20px * var(--nw-scale,1));padding-top:calc(32px * var(--nw-scale,1));
  box-shadow:0 0 0 4px rgba(0,229,160,.06),inset 0 1px 0 rgba(0,229,160,.08);
}
.rl-flow-nw-controls .rl-field{min-width:0;}
.rl-flow-nw-controls-rules{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:calc(14px * var(--nw-scale,1));}
.rl-flow-nw-controls-rules .rl-field-action{grid-column:span 4;}
.rl-flow-nw-controls-rules .rl-field-protocol{grid-column:span 4;}
.rl-flow-nw-controls-rules .rl-field-interface{grid-column:span 4;}
.rl-flow-nw-controls-rules .rl-advanced-grid{grid-column:span 12;}
.rl-advanced-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:calc(10px * var(--nw-scale,1));
  border:1px solid var(--border);border-radius:calc(9px * var(--nw-scale,1));
  background:var(--bg2,var(--card));padding:calc(14px * var(--nw-scale,1));width:100%;
}
@media (max-width:500px){
  .rl-flow-nw-controls{grid-template-columns:repeat(2,1fr);}
  .rl-flow-nw-controls-rules .rl-field-action,.rl-flow-nw-controls-rules .rl-field-protocol,.rl-flow-nw-controls-rules .rl-field-interface{grid-column:span 1;}
  .rl-advanced-grid{grid-template-columns:1fr;}
}

.rc-field-group{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.rc-field-group-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

.rc-advanced{margin-top:16px;}
.rc-advanced-toggle{
  display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--text-2);
  cursor:pointer;list-style:none;
}
.rc-advanced-toggle::-webkit-details-marker{display:none;}
.rc-advanced[open] .rc-advanced-toggle svg{transform:rotate(180deg);}
.rc-advanced-body{margin-top:14px;}

.rc-ebpf-dest-notice{
  margin-top:12px;padding:10px 12px;border-radius:8px;font-size:12px;
  background:var(--bg3,rgba(148,163,184,.08));color:var(--text-2,var(--text-3));
}

.rc-log-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;border-top:1px solid var(--border);margin-top:24px;
}
.rc-log-title{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:2px;}
.rc-log-sub{font-size:.82rem;color:var(--text-3);}

.rc-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:16px;}

/* ============================================================
   Create Firewall Rule / Create Port Forward — Materialize-based
   layout (.custom-card + row/col, replacing the old bespoke
   .rc-flow-node cards for these two /create pages only). The edit
   pages (rule_edit_page.go, firewall_port_forwarding_edit.templ)
   still use the .rc-flow-node markup above — left untouched.
   ============================================================ */
.rc-flow-card{height:100%;}
.rc-flow-card .card-body{display:flex;flex-direction:column;}
.rc-flow-card-sub{margin:0 0 14px;font-size:.82rem;color:var(--text-3);}
.rc-flow-card.rc-flow-source .card-header-icon{color:#f97316;}
.rc-flow-card.rc-flow-dest .card-header-icon{color:var(--nw-accent);}
.rc-nat-summary{
  display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:8px;
  background:var(--bg3,rgba(148,163,184,.08));color:var(--nw-accent);font-weight:700;font-size:.85rem;
}

/* Visually-locked <select> for the create-rule form's eBPF mode (action/
   protocol are force-set and shouldn't be edited) — pointer-events:none
   instead of the disabled attribute, since a disabled field is excluded
   from form submission entirely. */
.rc-select-locked{opacity:.6;pointer-events:none;background-color:var(--bg3,rgba(148,163,184,.06));}

/* Generic pill toggle switch (.dd-toggle / .rt-toggle) used by the log row
   and the manual-eBPF advanced option */
.dd-toggle,.rt-toggle{position:relative;display:inline-flex;cursor:pointer;}
.dd-toggle input,.rt-toggle input{position:absolute;opacity:0;width:0;height:0;}
.dd-toggle-track,.rt-toggle-track{
  width:40px;height:22px;border-radius:999px;background:var(--border);transition:background .15s;position:relative;
}
.dd-toggle-thumb,.rt-toggle-thumb{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.dd-toggle input:checked + .dd-toggle-track,.rt-toggle input:checked + .rt-toggle-track{background:var(--nw-accent);}
.dd-toggle input:checked + .dd-toggle-track .dd-toggle-thumb,
.rt-toggle input:checked + .rt-toggle-track .rt-toggle-thumb{transform:translateX(18px);}

/* Generic pill button (.is-btn / .is-btn-accent / .is-btn-danger) used by
   form footers. .is-btn-accent stays on the "Normal Mode" flowchart pages
   (rules/port-forwarding create+edit); .is-btn-danger is used by the
   easy-mode guided forms' primary submit button. */
.is-btn{
  display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;
  border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);
  font-size:.85rem;font-weight:600;cursor:pointer;transition:background .12s,transform .08s,opacity .12s;
}
.is-btn:hover{background:var(--bg3,rgba(148,163,184,.06));}
.is-btn:active{transform:scale(.97);opacity:.85;}
.is-btn-accent{background:var(--nw-accent);border-color:var(--nw-accent);color:#031a10;}
.is-btn-accent:hover{opacity:.9;background:var(--nw-accent);}
.is-btn-accent:active{opacity:.8;}
.is-btn-danger{background:#dc2626;border-color:#dc2626;color:#fff;}
.is-btn-danger:hover{opacity:.9;background:#dc2626;}
.is-btn-danger:active{opacity:.8;}

@media(max-width:700px){
  .rc-basic-row,.rc-field-group,.rc-field-group-3{grid-template-columns:1fr;}
}

/* ============================================================
   Network Overview (/monitor/network-overview) — header controls,
   panel head/legend, chart-stats footer row, tall equal-height cards.
   Reuses .no-topbar-pill (shared with Connections History) and
   .utm-refresh-btn (shared with the L3/L7 telemetry pages).
   ============================================================ */

.no-header{align-items:center;flex-wrap:wrap;gap:14px;}
.no-header-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto;}
.no-updated-at{font-size:11px;color:var(--text-3);font-family:var(--font-mono,monospace);white-space:nowrap;}

.no-page .row.nw-row{margin-bottom:20px;}
.is-tall{height:100%;}
.is-tall .card-content{display:flex;flex-direction:column;height:100%;}

.no-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.no-panel-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;}
.no-panel-meta{
  font-size:11px;
  color:var(--text-3);
  font-family:var(--font-mono,monospace);
  margin:-2px 0 6px;
}
.no-legend{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--text-3);text-transform:uppercase;}
.no-legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;}

.no-panel-body{flex:1;min-height:0;}

.no-chart-stats{display:flex;gap:32px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.no-cstat{display:flex;flex-direction:column;gap:2px;}
.no-cstat-l{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--text-3);text-transform:uppercase;}
.no-cstat-v{font-size:15px;font-weight:700;color:var(--text);font-family:var(--font-mono,monospace);}
.no-cstat-v--in{color:#3b82f6;}
.no-cstat-v--out{color:#ef4444;}

@media(max-width:700px){
  .no-header{flex-direction:column;align-items:flex-start;}
  .no-header-controls{margin-left:0;width:100%;justify-content:flex-start;}
}

/* ============================================================
   Neuro Config page (.ncfg-*) — /system/neuro-cfg section list
   ============================================================ */
.ncfg-empty{padding:40px 20px;text-align:center;color:var(--text-3);font-family:var(--font-mono,monospace);font-size:.9rem;}
.ncfg-add-bar{display:flex;justify-content:flex-end;margin-bottom:14px;}