/* =============================================================
   Vitz / VManNet — reusable component CSS
   Pair with colors_and_type.css
   ============================================================= */

/* ---------- Buttons ---------- */
.vz-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--vz-text);
  padding: 7px 14px;
  border-radius: var(--vz-r-sm);
  font: 500 13px/1 var(--vz-font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
}
.vz-btn:hover {
  background: rgba(30,138,122,0.15);
  border-color: rgba(30,138,122,0.40);
}
.vz-btn.is-primary {
  background: var(--vz-teal);
  border-color: var(--vz-teal);
  color: #fff;
  font-weight: 600;
}
.vz-btn.is-primary:hover { background: var(--vz-teal-bright); border-color: var(--vz-teal-bright); }
.vz-btn.is-danger { background: #c62828; border-color: #c62828; color: #fff; }
.vz-btn.is-ghost  { background: transparent; border-color: rgba(30,138,122,0.25); color: var(--vz-teal-bright); }
.vz-btn.is-ghost:hover { background: rgba(43,194,168,0.10); border-color: rgba(43,194,168,0.50); }
.vz-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Inputs ---------- */
.vz-input, .vz-select, .vz-textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--vz-text);
  font: 13px/1.4 var(--vz-font-mono);
  padding: 9px 12px;
  border-radius: var(--vz-r-sm);
  outline: none;
  color-scheme: dark;
  transition: background .12s, border-color .12s;
  width: 100%;
  box-sizing: border-box;
}
.vz-input:focus, .vz-select:focus, .vz-textarea:focus {
  border-color: rgba(30,138,122,0.60);
  background: rgba(30,138,122,0.06);
}
.vz-input::placeholder, .vz-textarea::placeholder { color: var(--vz-text-mute); }
.vz-field-label {
  font: 500 10.5px/1 var(--vz-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vz-text-mute);
  display: block;
  margin-bottom: 6px;
}

/* ---------- Pills / status chips ---------- */
.vz-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--vz-r-pill);
  font: 500 11px/1 var(--vz-font-sans);
  background: rgba(255,255,255,0.05);
  color: var(--vz-text-dim);
  border: 1px solid rgba(255,255,255,0.08);
}
.vz-pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vz-pill.is-online  { background: rgba(125,227,138,0.15); color: var(--vz-online);  border-color: rgba(125,227,138,0.25); }
.vz-pill.is-warn    { background: rgba(255,181,71,0.15);  color: var(--vz-warning); border-color: rgba(255,181,71,0.25); }
.vz-pill.is-offline { background: rgba(255,92,92,0.15);   color: var(--vz-offline); border-color: rgba(255,92,92,0.25); }
.vz-pill.is-info    { background: rgba(38,198,218,0.15);  color: var(--vz-info);    border-color: rgba(38,198,218,0.25); }

/* Role chips: bordered, more substantial */
.vz-role {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--vz-r-pill);
  font: 600 10.5px/1 var(--vz-font-sans);
  letter-spacing: 0.04em;
}
.vz-role.is-master  { background: rgba(25,118,210,0.35); color: var(--vz-master);  border: 1px solid rgba(66,165,245,0.40); }
.vz-role.is-managed { background: rgba(0,150,136,0.30);  color: var(--vz-managed); border: 1px solid rgba(38,166,154,0.40); }

/* ---------- Card / panel ---------- */
.vz-panel {
  background: var(--vz-panel);
  backdrop-filter: var(--vz-blur);
  border: var(--vz-border-1);
  border-radius: var(--vz-r-lg);
  padding: 18px 20px;
}
.vz-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.vz-panel-head .ic {
  color: var(--vz-teal-bright);
  width: 16px; height: 16px;
  display: inline-flex;
}

/* ---------- Stat tile ---------- */
.vz-stat {
  background: var(--vz-panel);
  backdrop-filter: var(--vz-blur);
  border: var(--vz-border-1);
  border-radius: var(--vz-r-md);
  padding: 12px 16px;
  min-width: 110px;
}
.vz-stat .k { font: 500 10px/1 var(--vz-font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--vz-text-mute); margin-bottom: 6px; }
.vz-stat .v { font: 600 22px/1.1 var(--vz-font-sans); color: var(--vz-text); font-variant-numeric: tabular-nums; }
.vz-stat .v.green { color: var(--vz-online); }
.vz-stat .v.amber { color: var(--vz-warning); }
.vz-stat .v.red   { color: var(--vz-offline); }
.vz-stat .u { font: 500 12px/1 var(--vz-font-mono); color: var(--vz-text-dim); margin-left: 6px; }

/* ---------- Table ---------- */
.vz-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.vz-table thead th {
  font: 600 10px/1 var(--vz-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vz-text-mute);
  text-align: left;
  padding: 12px 14px;
  background: rgba(10,14,13,0.98);
  border-bottom: var(--vz-border-1);
}
.vz-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: var(--vz-text);
}
.vz-table tbody tr:hover td { background: rgba(30,138,122,0.06); }
.vz-table .mono { font-family: var(--vz-font-mono); font-size: 11.5px; color: var(--vz-text-dim); }
.vz-table .ip   { font-family: var(--vz-font-mono); font-size: 11.5px; color: var(--vz-teal-bright); }

/* Group header row inside Estado-style tables */
.vz-table .group-hdr {
  background: rgba(30,138,122,0.08);
  border-top: var(--vz-border-1);
  border-bottom: var(--vz-border-1);
}
.vz-table .group-hdr td {
  padding: 10px 14px;
  font: 600 11px/1 var(--vz-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vz-teal-bright);
}

/* ---------- Topbar ---------- */
.vz-topbar {
  position: sticky; top: 0; z-index: 10;
  height: var(--vz-topbar-h);
  display: flex; align-items: center; gap: 22px;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(10,14,13,0.95), rgba(10,14,13,0.55));
  border-bottom: var(--vz-border-1);
  backdrop-filter: var(--vz-blur-strong);
}
.vz-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; color: var(--vz-text); }
.vz-brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vz-green); box-shadow: var(--vz-glow-green);
  animation: vz-pulse 1.8s ease-in-out infinite;
}
.vz-brand .name { font-size: 14px; }
.vz-brand .name .sep { color: var(--vz-text-mute); }
.vz-crumb { font: 500 13px/1 var(--vz-font-sans); color: var(--vz-text-dim); display:flex; align-items:center; gap: 8px; }
.vz-crumb .sep { color: var(--vz-text-mute); }
.vz-crumb b { color: var(--vz-text); font-weight: 600; }

@keyframes vz-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.92); }
}

/* ---------- Tab nav inside topbar ---------- */
.vz-tabs { display:flex; align-items:center; gap: 2px; }
.vz-tab {
  padding: 6px 14px;
  border-radius: var(--vz-r-sm);
  font: 500 13px/1 var(--vz-font-sans);
  color: var(--vz-text-dim);
  text-decoration: none;
  cursor: pointer;
  transition: all .12s;
  background: transparent;
  border: 0;
}
.vz-tab:hover { color: var(--vz-text); background: rgba(255,255,255,0.04); }
.vz-tab.is-active {
  color: var(--vz-text);
  background: rgba(30,138,122,0.18);
  box-shadow: inset 0 0 0 1px rgba(30,138,122,0.35);
}

/* ---------- Side rail ---------- */
.vz-siderail {
  background: linear-gradient(180deg, rgba(15,21,19,0.6), rgba(10,14,13,0.2));
  border-right: var(--vz-border-1);
  padding: 18px 16px;
  overflow-y: auto;
}
.vz-siderail h4 {
  font: 500 10.5px/1 var(--vz-font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vz-text-mute);
  margin: 18px 0 8px;
}
.vz-siderail h4:first-child { margin-top: 0; }

/* ---------- Search input (with leading icon) ---------- */
.vz-search { position: relative; display: inline-block; }
.vz-search input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--vz-text);
  font: 13px/1 var(--vz-font-mono);
  padding: 8px 12px 8px 32px;
  border-radius: var(--vz-r-sm);
  width: 280px;
  outline: none;
}
.vz-search input:focus {
  border-color: rgba(30,138,122,0.5);
  background: rgba(30,138,122,0.06);
}
.vz-search .ic {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--vz-text-mute);
}

/* ---------- Modal ---------- */
.vz-modal-bg {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.vz-modal {
  background: #001a1a;
  border: var(--vz-border-1);
  border-radius: var(--vz-r-lg);
  min-width: 460px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--vz-shadow-modal);
}
.vz-modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: rgba(30,138,122,0.12);
  border-bottom: var(--vz-border-1);
}
.vz-modal-head .ic { color: var(--vz-teal-bright); width: 16px; height: 16px; }
.vz-modal-head h4 { margin: 0; font: 600 14px/1 var(--vz-font-sans); color: var(--vz-text); }
.vz-modal-body { padding: 18px; overflow: auto; color: var(--vz-text); }
.vz-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  background: rgba(0,0,0,0.30);
  border-top: var(--vz-border-1);
}

/* ---------- Toast ---------- */
.vz-toast {
  background: #0f2020;
  border: 1px solid var(--vz-teal);
  color: var(--vz-text);
  padding: 11px 18px;
  border-radius: var(--vz-r-md);
  font: 500 13px/1.4 var(--vz-font-sans);
  box-shadow: var(--vz-shadow-toast);
  display: inline-flex; align-items: center; gap: 10px;
}
.vz-toast .ic { color: var(--vz-teal-bright); width: 14px; height: 14px; }

/* ---------- Log / terminal ---------- */
.vz-log {
  background: #04090a;
  border: 1px solid rgba(30,138,122,0.15);
  border-radius: var(--vz-r-lg);
  padding: 14px 16px;
  font: 12.5px/1.6 var(--vz-font-mono);
  color: #b8d4cd;
  white-space: pre-wrap;
  word-break: break-word;
}
.vz-log .ok  { color: var(--vz-online); }
.vz-log .err { color: var(--vz-offline); }
.vz-log .hdr { color: var(--vz-teal-bright); font-weight: 600; border-bottom: 1px dashed rgba(30,138,122,0.25); padding-bottom: 4px; margin-bottom: 6px; }

/* ---------- Signal bars ---------- */
.vz-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.vz-bars span { width: 3px; background: var(--vz-text-mute); border-radius: 1px; display: block; }
.vz-bars span:nth-child(1){height:25%}
.vz-bars span:nth-child(2){height:50%}
.vz-bars span:nth-child(3){height:75%}
.vz-bars span:nth-child(4){height:100%}
.vz-bars.s4 span        { background: var(--vz-online); }
.vz-bars.s3 span:nth-child(-n+3) { background: var(--vz-online); }
.vz-bars.s2 span:nth-child(-n+2) { background: var(--vz-warning); }
.vz-bars.s1 span:nth-child(-n+1) { background: var(--vz-offline); }