:root{
  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-2:#f1f5f9;
  --sidebar:#0f172a;
  --sidebar-2:#111827;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --success:#16a34a;
  --success-bg:#dcfce7;
  --danger:#dc2626;
  --danger-bg:#fee2e2;
  --warning:#d97706;
  --warning-bg:#fef3c7;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);color:var(--text)}
a{text-decoration:none}
pre{white-space:pre-wrap;word-break:break-word}
code,textarea.code{font-family:Consolas,Monaco,monospace}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:270px;min-width:270px;background:linear-gradient(180deg,var(--sidebar) 0%,var(--sidebar-2) 100%);color:#e5eefb;padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar-brand{display:flex;flex-direction:column;gap:6px;padding:8px 10px 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:18px}
.sidebar-brand-title{font-size:20px;font-weight:700;color:#fff}
.sidebar-brand-sub{font-size:12px;color:#93c5fd;text-transform:uppercase;letter-spacing:.08em}
.sidebar-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:16px 10px 8px}
.sidebar-link{display:flex;align-items:center;gap:10px;color:#dbeafe;padding:11px 12px;border-radius:14px;margin-bottom:6px;transition:background .15s ease,transform .15s ease}
.sidebar-link:hover,.sidebar-link.active{background:rgba(59,130,246,.16);color:#fff;transform:translateX(2px)}
.sidebar-link.secondary{color:#cbd5e1}
.sidebar-dot,.status-dot{width:10px;height:10px;border-radius:999px;display:inline-block;flex:0 0 10px}
.dot-up,.badge-up .status-dot,.status-up .status-dot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.dot-down,.badge-down .status-dot,.status-down .status-dot{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.15)}
.dot-muted,.badge-muted .status-dot{background:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.16)}
.sidebar-empty{color:#94a3b8;padding:0 12px 12px;font-size:14px}
.main-shell{flex:1;min-width:0;padding:22px 22px 28px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border:1px solid rgba(226,232,240,.9);box-shadow:var(--shadow);padding:16px 20px;border-radius:22px;position:sticky;top:14px;z-index:50}
.topbar-title{font-size:24px;font-weight:700;line-height:1.15}
.topbar-sub{font-size:13px;color:var(--muted);margin-top:4px}
.topbar-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn,.btn-link,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;padding:10px 14px;font-weight:700;font-size:14px;cursor:pointer;transition:transform .15s ease,filter .15s ease,background .15s ease;text-decoration:none}
.btn:hover,.btn-link:hover,button.btn:hover{transform:translateY(-1px);filter:brightness(.98)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-2)}
.btn-success{background:var(--success);color:#fff}
.btn-secondary{background:#e2e8f0;color:#0f172a}
.btn-dark{background:#334155;color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-ghost{background:#fff;color:#0f172a;border:1px solid var(--border)}
.content-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.card{background:var(--surface);border:1px solid rgba(226,232,240,.95);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.card-title{font-size:20px;font-weight:700;margin:0}
.card-subtitle{font-size:13px;color:var(--muted);margin-top:6px}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.metric{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);border:1px solid var(--border);border-radius:16px;padding:16px}
.metric-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.metric-value{font-size:24px;font-weight:700}
.metric-note{font-size:12px;color:var(--muted);margin-top:6px}
.list-cards{display:grid;gap:18px}
.iface-card{padding:22px}
.iface-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.iface-title a{color:#0f172a}
.iface-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.kv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.kv{background:#f8fafc;border:1px solid var(--border);border-radius:16px;padding:14px}
.kv-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.kv-value{font-size:15px;font-weight:700;word-break:break-word}
.actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.notice,.flash{padding:14px 16px;border-radius:16px;border:1px solid transparent;margin-bottom:16px}
.notice.ok,.flash.ok{background:var(--success-bg);border-color:#bbf7d0;color:#166534}
.notice.err,.flash.err{background:var(--danger-bg);border-color:#fecaca;color:#991b1b}
.notice.warn,.flash.warn{background:var(--warning-bg);border-color:#fde68a;color:#92400e}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.search-input,input[type=text],input[type=password],select,textarea{width:100%;padding:11px 13px;border-radius:14px;border:1px solid #cbd5e1;background:#fff;font-size:14px;color:var(--text);outline:none}
input[type=text]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
textarea{min-height:120px;resize:vertical}
.table-card{padding:0;overflow:hidden}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:14px 16px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
th{background:#f8fafc;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#475569;position:sticky;top:0}
tbody tr:hover{background:#f8fafc}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:700}
.badge-up{background:#dcfce7;color:#166534}
.badge-down{background:#fee2e2;color:#991b1b}
.badge-muted{background:#e2e8f0;color:#475569}
.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.25)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.row{margin-bottom:14px}
label{display:block;font-weight:700;margin-bottom:7px}
.muted,.help-text,.small{font-size:13px;color:var(--muted)}
.meta-grid{display:grid;grid-template-columns:160px 1fr;gap:8px 14px}
.qrbox img{max-width:320px;width:100%;height:auto;border:1px solid var(--border);border-radius:16px;background:#fff;padding:8px}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(100%,430px)}
.login-brand{margin-bottom:18px}
.login-brand h1{margin:0 0 8px;font-size:28px}
.login-brand p{margin:0;color:var(--muted)}
.empty{padding:24px;border:1px dashed #cbd5e1;border-radius:18px;background:#fff;color:var(--muted);text-align:center}
.hidden-row{display:none}
@media (max-width:1200px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.kv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.app-shell{display:block}.sidebar{position:relative;height:auto;width:auto;min-width:0;border-radius:0}.main-shell{padding:16px}.topbar{position:relative;top:0}.form-grid{grid-template-columns:1fr}.content-grid{grid-template-columns:1fr}.metrics,.kv-grid{grid-template-columns:1fr}.iface-title-row,.card-head{flex-direction:column;align-items:flex-start}.topbar{flex-direction:column;align-items:flex-start}.topbar-actions{justify-content:flex-start}}

.sidebar-brand-note{font-size:12px;color:#94a3b8}
.sidebar-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 10px}
.sidebar-stat span{display:block;font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em}
.sidebar-stat strong{display:block;margin-top:4px;color:#fff;font-size:16px}
.sidebar-peer-count{margin-left:auto;display:inline-flex;min-width:24px;justify-content:center;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;color:#cbd5e1}
.filter-row,.toolbar-split{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.segmented{display:inline-flex;gap:8px;flex-wrap:wrap}
.seg-btn{border:1px solid var(--border);background:#fff;color:#334155;border-radius:999px;padding:9px 14px;font-weight:700;cursor:pointer}
.seg-btn.active{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}
.compact-table td,.compact-table th{padding:10px 12px}
.mono{font-family:Consolas,Monaco,monospace}
.metric-note strong{color:var(--text)}
.table-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:13px}
.view-switch{display:flex;gap:10px;flex-wrap:wrap}
.view-switch .btn{padding:8px 12px}
.small-pill{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:12px;font-weight:700}
@media (max-width:980px){.sidebar-stats{grid-template-columns:1fr 1fr 1fr}.filter-row,.toolbar-split{align-items:flex-start}}

.tenant-chip-row{display:flex;gap:10px;flex-wrap:wrap}
.tenant-chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;margin-left:6px;padding:1px 6px;border-radius:999px;background:rgba(15,23,42,.08);font-size:11px;font-weight:700}


/* WG TABLE PRO FIX */
html, body { height: 100%; overflow: hidden; }
body { overflow: hidden; }
.app-shell { height: 100vh; min-height: 100vh; overflow: hidden; }
.sidebar { height: 100vh; overflow-y: auto; overflow-x: hidden; }
.main-shell.wg-dashboard-shell {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wg-dashboard-top {
  flex: 0 0 auto;
}
.table-card.table-card-pro {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.table-card.table-card-pro .card-head {
  flex: 0 0 auto;
}
.table-wrap.table-wrap-pro {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: auto;
  border-top: 1px solid var(--border);
}
.table-wrap.table-wrap-pro table {
  min-width: 1250px;
}
.table-wrap.table-wrap-pro thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #eef2f7;
}
.table-wrap.table-wrap-pro tbody td {
  white-space: nowrap;
}



/* ===== Actions + Delete restore patch ===== */
.actions-cell {
  white-space: nowrap;
  padding-left: 6px !important;
  padding-right: 10px !important;
}
.actions-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.inline-op {
  display: inline-flex;
  gap: 4px;
  margin: 0;
}
.btn-mini {
  min-height: 26px;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 1;
  border-radius: 9px;
  font-weight: 700;
}
.btn-light {
  background: #fff;
  border: 1px solid #d9e0ea;
  color: #334155;
}
.btn-light:hover { background: #f8fafc; }



/* Compact WG table columns */
#ifaceTable thead th {
  font-size: 11px !important;
  line-height: 1.2;
}
#ifaceTable tbody td {
  font-size: 13px !important;
  line-height: 1.25;
}
#ifaceTable tbody td:nth-child(4),
#ifaceTable tbody td:nth-child(5),
#ifaceTable tbody td:nth-child(6),
#ifaceTable tbody td:nth-child(7) {
  font-size: 12px !important;
}


/* Smaller WG columns */
#ifaceTable thead th:nth-child(4),
#ifaceTable thead th:nth-child(5),
#ifaceTable thead th:nth-child(6),
#ifaceTable thead th:nth-child(7) { font-size: 10px !important; }
#ifaceTable tbody td:nth-child(4),
#ifaceTable tbody td:nth-child(5),
#ifaceTable tbody td:nth-child(6),
#ifaceTable tbody td:nth-child(7) { font-size: 11px !important; }



/* FINAL WG polish */
.card-head{
  padding:16px 20px !important;
}
.card-head > div{
  padding-left:4px;
}
.card-title{
  margin:0 !important;
  line-height:1.2;
}
.card-subtitle{
  margin-top:4px !important;
  line-height:1.35;
  color:#64748b !important;
  font-size:13px !important;
}

#ifaceTable thead th{
  font-size:11px !important;
  line-height:1.2;
}
#ifaceTable tbody td{
  font-size:13px !important;
  line-height:1.25;
}
#ifaceTable thead th:nth-child(4),
#ifaceTable thead th:nth-child(5),
#ifaceTable thead th:nth-child(6),
#ifaceTable thead th:nth-child(7){
  font-size:10px !important;
}
#ifaceTable tbody td:nth-child(4),
#ifaceTable tbody td:nth-child(5),
#ifaceTable tbody td:nth-child(6),
#ifaceTable tbody td:nth-child(7){
  font-size:11px !important;
}

/* Toasts */
#wg-toast-container{
  position:fixed;
  top:20px;
  right:20px;
  z-index:9999;
}
.wg-toast{
  min-width:260px;
  margin-bottom:10px;
  padding:12px 16px;
  border-radius:12px;
  color:#fff;
  font-size:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  opacity:1;
  transform:translateY(0);
  transition:opacity .3s ease, transform .3s ease;
}
.wg-toast.success{background:#16a34a}
.wg-toast.error{background:#dc2626}


/* SAFE alert paket */
.safe-alert-badges{
  display:inline-flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-left:12px;
}
.safe-alert-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  border:1px solid transparent;
}
.safe-alert-chip-ok{background:#ecfdf3;color:#166534;border-color:#bbf7d0}
.safe-alert-chip-warn{background:#fffbeb;color:#b45309;border-color:#fde68a}
.safe-alert-chip-stale{background:#fff1f2;color:#be123c;border-color:#fecdd3}
.safe-alert-chip-none{background:#f8fafc;color:#475467;border-color:#e5e7eb}

.safe-handshake-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  margin-left:8px;
  vertical-align:middle;
  border:1px solid transparent;
}
.safe-handshake-badge-fresh{background:#ecfdf3;color:#166534;border-color:#bbf7d0}
.safe-handshake-badge-warn{background:#fffbeb;color:#b45309;border-color:#fde68a}
.safe-handshake-badge-stale{background:#fff1f2;color:#be123c;border-color:#fecdd3}
.safe-handshake-badge-none{background:#f8fafc;color:#475467;border-color:#e5e7eb}


/* FORCE REAL HORIZONTAL SCROLL FOR DASHBOARD TABLE */
.table-wrap.table-wrap-pro{
  overflow-x:auto !important;
  overflow-y:auto !important;
  scrollbar-gutter: stable both-edges;
}

.table-wrap.table-wrap-pro table,
#ifaceTable{
  min-width: 1700px !important;
  width: 1700px !important;
  table-layout: fixed !important;
}

/* keep body cells stable, but do not clip action column */
#ifaceTable th,
#ifaceTable td{
  white-space: nowrap;
}

#ifaceTable th:not(:last-child),
#ifaceTable td:not(:last-child){
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Actions must stay fully visible */
#ifaceTable th:last-child,
#ifaceTable td:last-child,
.actions-cell{
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Explicit widths so right side cannot collapse invisibly */
#ifaceTable th:nth-child(1), #ifaceTable td:nth-child(1) { width: 120px; } /* Interface */
#ifaceTable th:nth-child(2), #ifaceTable td:nth-child(2) { width: 110px; } /* Status */
#ifaceTable th:nth-child(3), #ifaceTable td:nth-child(3) { width: 140px; } /* IP */
#ifaceTable th:nth-child(4), #ifaceTable td:nth-child(4) { width: 90px; }  /* Port */
#ifaceTable th:nth-child(5), #ifaceTable td:nth-child(5) { width: 140px; } /* Tenant */
#ifaceTable th:nth-child(6), #ifaceTable td:nth-child(6) { width: 160px; } /* Tenant status */
#ifaceTable th:nth-child(7), #ifaceTable td:nth-child(7) { width: 60px; }  /* Peers */
#ifaceTable th:nth-child(8), #ifaceTable td:nth-child(8) { width: 150px; } /* Latest handshake */
#ifaceTable th:nth-child(9), #ifaceTable td:nth-child(9) { width: 170px; } /* Transfer */
#ifaceTable th:nth-child(10), #ifaceTable td:nth-child(10) { width: 560px; } /* Actions */

#ifaceTable td:nth-child(9){
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
}

.actions-inline{
  flex-wrap: nowrap !important;
  min-width: 540px !important;
}




/* ===== FINAL UI MATCH: SFTP sidebar + font reference ===== */
:root{
  --wg-font-main: Arial, Helvetica, sans-serif;
}

html, body, button, input, select, textarea {
  font-family: var(--wg-font-main) !important;
}

body{
  font-family: var(--wg-font-main) !important;
  background:#f3f5f7 !important;
  color:#1f2937 !important;
  letter-spacing:0 !important;
}

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

.sidebar{
  width:228px !important;
  min-width:228px !important;
  background:#16243a !important;
  color:#fff !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  overflow:hidden !important;
  padding:0 !important;
  border-right:none !important;
}

.sidebar-brand{
  padding:18px 16px 14px 16px !important;
  margin-bottom:0 !important;
  border-bottom:none !important;
  gap:0 !important;
  display:block !important;
}

.sidebar-brand-title{
  font-size:21px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  margin-bottom:4px !important;
  letter-spacing:.2px !important;
  color:#ffffff !important;
}

.sidebar-brand-sub,
.sidebar-brand-note{
  font-size:12px !important;
  color:rgba(255,255,255,.72) !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.sidebar-group{
  padding:0 16px !important;
}

.sidebar-group-title{
  font-size:12px !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
  color:rgba(255,255,255,.65) !important;
  margin:8px 0 10px 2px !important;
  font-weight:700 !important;
}

.sidebar-link{
  position:relative !important;
  display:block !important;
  color:rgba(255,255,255,.92) !important;
  text-decoration:none !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  padding:10px 12px 10px 14px !important;
  border-radius:8px !important;
  transition:background .15s ease,color .15s ease !important;
  transform:none !important;
  margin-bottom:4px !important;
  text-align:left !important;
}

.sidebar-link:hover{
  background:rgba(255,255,255,.08) !important;
  color:#ffffff !important;
  text-decoration:none !important;
}

.sidebar-link.active{
  background:#223754 !important;
  color:#ffffff !important;
  font-weight:700 !important;
  box-shadow: inset 3px 0 0 #6fb1ff !important;
}

.sidebar-link::before{
  content:"" !important;
  position:absolute !important;
  left:-16px !important;
  top:8px !important;
  bottom:8px !important;
  width:4px !important;
  background:transparent !important;
  border-radius:0 3px 3px 0 !important;
}

.sidebar-link.active::before{
  background:#6fb1ff !important;
}

.sidebar-link.secondary{
  color:#ffffff !important;
  background:rgba(255,255,255,.04) !important;
}

.sidebar-dot, .status-dot{
  display:none !important;
}

.sidebar-empty{
  color:rgba(255,255,255,.65) !important;
  padding:0 16px 12px !important;
  font-size:14px !important;
}

.main-shell{
  margin-left:0 !important;
  min-height:100vh !important;
  padding:20px 18px !important;
}

.topbar{
  background:#fff !important;
  border:1px solid #d9dee5 !important;
  border-radius:12px !important;
  box-shadow:none !important;
  padding:12px 14px !important;
  top:10px !important;
}

.topbar-title{
  font-size:28px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:#111827 !important;
}

.topbar-sub{
  font-size:13px !important;
  color:#64748b !important;
  line-height:1.2 !important;
  margin-top:4px !important;
}

.btn, .btn-link, button.btn{
  padding:7px 12px !important;
  border:1px solid #c7ced8 !important;
  background:#f8fafc !important;
  color:#111827 !important;
  border-radius:4px !important;
  font-size:13px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

.btn:hover, .btn-link:hover, button.btn:hover{
  background:#eef2f7 !important;
  transform:none !important;
  filter:none !important;
}

.card, .metric, .kv, .table-card{
  border:1px solid #d9dee5 !important;
  border-radius:12px !important;
  box-shadow:none !important;
  background:#fff !important;
}

.card{
  padding:16px !important;
}

.card-title{
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  color:#111827 !important;
}

.card-subtitle, .metric-note, .kv-subtitle{
  font-size:12px !important;
  color:#6b7280 !important;
  line-height:1.25 !important;
  font-weight:400 !important;
}

.metric-label, .kv-label, label{
  font-size:12px !important;
  font-weight:700 !important;
  color:#475569 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.metric-value, .kv-value{
  font-size:16px !important;
  font-weight:700 !important;
  color:#111827 !important;
  line-height:1.2 !important;
}

.table-wrap table, table{
  width:100% !important;
  border-collapse:collapse !important;
  background:#fff !important;
}

.table-wrap table th, .table-wrap table td, table th, table td{
  border:1px solid #d9dee5 !important;
  padding:8px 10px !important;
  text-align:left !important;
  vertical-align:top !important;
  font-size:13px !important;
  line-height:1.25 !important;
}

.table-wrap table th, table th{
  background:#eef2f6 !important;
  font-weight:700 !important;
  color:#111827 !important;
}

input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
textarea,
select{
  font-family:var(--wg-font-main) !important;
  font-size:14px !important;
  font-weight:400 !important;
  border:1px solid #c7ced8 !important;
  border-radius:4px !important;
  background:#fff !important;
  color:#111827 !important;
  min-height:38px !important;
}

textarea{
  min-height:92px !important;
}

input:focus, textarea:focus, select:focus{
  outline:none !important;
  border-color:#6fb1ff !important;
  box-shadow:0 0 0 3px rgba(111,177,255,.16) !important;
}

.health-badge, .small-pill, .badge, .count-pill, .guess-pill{
  font-family:var(--wg-font-main) !important;
}




/* ===== SIDEBAR RECOVERY + FORM COLOR RESTORE ===== */

/* Sidebar should feel like the older WG version, only with cleaner hover */
.sidebar{
  width: 210px !important;
  min-width: 210px !important;
  background:#16243a !important;
  color:#ffffff !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

.sidebar-brand{
  padding:16px 14px 14px 14px !important;
  margin-bottom:10px !important;
  display:block !important;
}

.sidebar-group{
  padding:0 0 8px 0 !important;
  margin:0 !important;
}

.sidebar-group-title{
  margin:10px 14px 8px 14px !important;
  font-size:11px !important;
  line-height:1.2 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.72) !important;
  font-weight:700 !important;
}

.sidebar-link{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  margin:0 0 2px 0 !important;
  padding:10px 14px 10px 16px !important;
  min-height:40px !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,.95) !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  text-align:left !important;
  box-shadow:none !important;
}

.sidebar-link::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:8px !important;
  bottom:8px !important;
  width:3px !important;
  border-radius:0 3px 3px 0 !important;
  background:transparent !important;
  opacity:1 !important;
}

.sidebar-link:hover{
  background:rgba(255,255,255,.06) !important;
  color:#ffffff !important;
  transform:none !important;
}

.sidebar-link.active{
  background:#223754 !important;
  color:#ffffff !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

.sidebar-link.active::before{
  background:#6fb1ff !important;
}

.sidebar-dot,
.status-dot{
  display:inline-block !important;
  width:10px !important;
  height:10px !important;
  flex:0 0 10px !important;
  border-radius:999px !important;
  margin-right:0 !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.08) !important;
}

.dot-up{
  background:#22c55e !important;
}
.dot-down{
  background:#ef4444 !important;
}
.dot-unknown{
  background:#94a3b8 !important;
}

.sidebar-link .count-pill,
.sidebar-link .badge,
.sidebar-link .sidebar-count{
  margin-left:auto !important;
  flex:0 0 auto !important;
  min-width:18px !important;
  height:18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  padding:0 6px !important;
  font-size:11px !important;
  line-height:1 !important;
  background:rgba(255,255,255,.10) !important;
  color:#e2e8f0 !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

.sidebar-empty{
  padding:0 14px 10px 16px !important;
  color:rgba(255,255,255,.65) !important;
}

/* stop the sidebar from visually hanging lower than content */
.main-shell{
  min-height:100vh !important;
}
.app-shell{
  align-items:stretch !important;
}

/* restore cleaner WG card/form colors on Add Interface / Add Peer left forms */
.page-add-interface .card,
.page-add-peer .card,
.page-peer-add .card{
  background:#ffffff !important;
  border:1px solid #dbe3ef !important;
}

.page-add-interface .ownership-box,
.page-add-peer .ownership-box,
.page-peer-add .ownership-box{
  background:#f8fafc !important;
  border:1px solid #dbe3ef !important;
}

.page-add-interface input[type="text"],
.page-add-interface textarea,
.page-add-interface select,
.page-add-peer input[type="text"],
.page-add-peer textarea,
.page-add-peer select,
.page-peer-add input[type="text"],
.page-peer-add textarea,
.page-peer-add select{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;
}

.page-add-interface .combo-input,
.page-add-peer .combo-input,
.page-peer-add .combo-input{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;
}

.page-add-interface .combo-toggle,
.page-add-peer .combo-toggle,
.page-peer-add .combo-toggle{
  background:#ffffff !important;
  color:#334155 !important;
  border:1px solid #cbd5e1 !important;
}

.page-add-interface .combo-panel,
.page-add-peer .combo-panel,
.page-peer-add .combo-panel{
  background:#ffffff !important;
  border:1px solid #cbd5e1 !important;
}

.page-add-interface .combo-option,
.page-add-peer .combo-option,
.page-peer-add .combo-option{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid #e2e8f0 !important;
}

.page-add-interface .combo-option:hover,
.page-add-interface .combo-option.active,
.page-add-peer .combo-option:hover,
.page-add-peer .combo-option.active,
.page-peer-add .combo-option:hover,
.page-peer-add .combo-option.active{
  background:#eff6ff !important;
  border-color:#bfdbfe !important;
}

.page-add-interface .tenant-pill.policy-none,
.page-add-peer .tenant-pill.policy-none,
.page-peer-add .tenant-pill.policy-none{
  background:#f8fafc !important;
  color:#475569 !important;
  border:1px solid #cbd5e1 !important;
}




/* ===== Restore old WG button colors (safe append) ===== */
.btn,
.btn-link,
button.btn{
  background:#f8fafc !important;
  color:#111827 !important;
  border:1px solid #c7ced8 !important;
}

.btn:hover,
.btn-link:hover,
button.btn:hover{
  background:#eef2f7 !important;
  color:#111827 !important;
  border-color:#b8c2cf !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary{
  background:#2563eb !important;
  color:#ffffff !important;
  border:1px solid #2563eb !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover{
  background:#1d4ed8 !important;
  color:#ffffff !important;
  border-color:#1d4ed8 !important;
}

.btn-success,
button.btn-success,
a.btn-success{
  background:#16a34a !important;
  color:#ffffff !important;
  border:1px solid #16a34a !important;
}

.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover{
  background:#15803d !important;
  color:#ffffff !important;
  border-color:#15803d !important;
}

.btn-danger,
button.btn-danger,
a.btn-danger{
  background:#dc2626 !important;
  color:#ffffff !important;
  border:1px solid #dc2626 !important;
}

.btn-danger:hover,
button.btn-danger:hover,
a.btn-danger:hover{
  background:#b91c1c !important;
  color:#ffffff !important;
  border-color:#b91c1c !important;
}




/* ===== FINAL LOCK STYLE PATCH (safe merged) ===== */
:root{
  --wg-lock-bg:#f3f5f7;
  --wg-lock-card:#ffffff;
  --wg-lock-border:#dbe3ef;
  --wg-lock-sidebar:#16243a;
  --wg-lock-sidebar-active:#223754;
  --wg-lock-accent:#6fb1ff;
  --wg-lock-text:#1f2937;
  --wg-lock-muted:#64748b;
  --wg-lock-blue:#2563eb;
  --wg-lock-blue-hover:#1d4ed8;
  --wg-lock-green:#16a34a;
  --wg-lock-green-hover:#15803d;
  --wg-lock-red:#dc2626;
  --wg-lock-red-hover:#b91c1c;
  --wg-lock-neutral:#f8fafc;
  --wg-lock-neutral-hover:#eef2f7;
  --wg-lock-neutral-border:#c7ced8;
}

html, body{
  background:var(--wg-lock-bg) !important;
  color:var(--wg-lock-text) !important;
}

.app-shell{
  min-height:100vh !important;
  align-items:stretch !important;
}

.main-shell{
  min-height:100vh !important;
  background:transparent !important;
}

.sidebar{
  width:210px !important;
  min-width:210px !important;
  background:var(--wg-lock-sidebar) !important;
  color:#fff !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:0 !important;
}

.sidebar-brand{
  padding:16px 14px 14px 14px !important;
  display:block !important;
}

.sidebar-brand-title{ color:#fff !important; }
.sidebar-brand-sub,
.sidebar-brand-note,
.sidebar-group-title{ color:rgba(255,255,255,.72) !important; }

.sidebar-link{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  text-align:left !important;
  background:transparent !important;
  color:rgba(255,255,255,.95) !important;
  min-height:40px !important;
  padding:10px 14px 10px 16px !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.sidebar-link:hover{
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
}

.sidebar-link.active{
  background:var(--wg-lock-sidebar-active) !important;
  color:#fff !important;
  box-shadow:none !important;
}

.sidebar-link.active::before{
  background:var(--wg-lock-accent) !important;
}

.sidebar-dot,
.status-dot{
  display:inline-block !important;
}

.card,
.metric,
.kv,
.table-card{
  background:var(--wg-lock-card) !important;
  border:1px solid var(--wg-lock-border) !important;
  box-shadow:none !important;
}

input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
textarea,
select{
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--wg-lock-accent) !important;
  box-shadow:0 0 0 3px rgba(111,177,255,.16) !important;
}

.page-add-interface .card,
.page-add-peer .card,
.page-peer-add .card{
  background:#fff !important;
  border:1px solid var(--wg-lock-border) !important;
}

.page-add-interface .ownership-box,
.page-add-peer .ownership-box,
.page-peer-add .ownership-box{
  background:#f8fafc !important;
  border:1px solid var(--wg-lock-border) !important;
}

.page-add-interface .combo-input,
.page-add-peer .combo-input,
.page-peer-add .combo-input,
.page-add-interface .combo-toggle,
.page-add-peer .combo-toggle,
.page-peer-add .combo-toggle,
.page-add-interface .combo-panel,
.page-add-peer .combo-panel,
.page-peer-add .combo-panel{
  background:#fff !important;
}

.btn,
.btn-link,
button.btn{
  background:var(--wg-lock-neutral) !important;
  color:#111827 !important;
  border:1px solid var(--wg-lock-neutral-border) !important;
}

.btn:hover,
.btn-link:hover,
button.btn:hover{
  background:var(--wg-lock-neutral-hover) !important;
  color:#111827 !important;
  border-color:#b8c2cf !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary{
  background:var(--wg-lock-blue) !important;
  color:#fff !important;
  border:1px solid var(--wg-lock-blue) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover{
  background:var(--wg-lock-blue-hover) !important;
  color:#fff !important;
  border-color:var(--wg-lock-blue-hover) !important;
}

.btn-success,
button.btn-success,
a.btn-success{
  background:var(--wg-lock-green) !important;
  color:#fff !important;
  border:1px solid var(--wg-lock-green) !important;
}

.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover{
  background:var(--wg-lock-green-hover) !important;
  color:#fff !important;
  border-color:var(--wg-lock-green-hover) !important;
}

.btn-danger,
button.btn-danger,
a.btn-danger{
  background:var(--wg-lock-red) !important;
  color:#fff !important;
  border:1px solid var(--wg-lock-red) !important;
}

.btn-danger:hover,
button.btn-danger:hover,
a.btn-danger:hover{
  background:var(--wg-lock-red-hover) !important;
  color:#fff !important;
  border-color:var(--wg-lock-red-hover) !important;
}

.table-wrap .btn,
.table-wrap button,
.table-wrap a{
  border-radius:8px !important;
}

.badge-up,
.status-pill.badge-up{
  background:#dcfce7 !important;
  color:#166534 !important;
  border-color:#bbf7d0 !important;
}
.badge-down,
.status-pill.badge-down{
  background:#fee2e2 !important;
  color:#991b1b !important;
  border-color:#fecaca !important;
}