/* Ergänzungen für das Cockpit, aufbauend auf dem Stylesheet der Website. */
.vb-nav-items { display: flex; align-items: center; gap: 1.25rem; }

@media (max-width: 1023px) {
  .vb-nav-items {
    position: fixed; top: 60px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgb(10, 14, 16);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 8px 0;
    transform: translateY(-150%); transition: transform .2s ease; z-index: 50;
  }
  body.vb-nav-open .vb-nav-items { transform: translateY(0); }
  .vb-nav-items > a { padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .vb-nav-items > a:last-child { border-bottom: 0; }
}

.vb-avatar.is-online::after {
  content: ''; position: absolute; right: 0; bottom: 0;
  width: 30%; height: 30%; min-width: 8px; min-height: 8px;
  background: #4ade80; border: 2px solid #13181C; border-radius: 9999px;
}

.vb-card { background: #1B2125; border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; }
.vb-card:hover { border-color: rgba(111,189,184,0.4); }

.vb-field { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.15);
  padding: 10px 14px; color: #F2F4F3; font-size: 14px; border-radius: 3px; }
.vb-field:focus { outline: none; border-color: #6FBDB8; }

.vb-label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242,244,243,0.55); margin-bottom: 6px; }

.vb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vb-table th { text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(242,244,243,0.5); padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.vb-table td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.vb-table tr:hover td { background: rgba(255,255,255,0.02); }

.vb-badge { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 3px;
  background: rgba(255,255,255,0.08); color: rgba(242,244,243,0.8); }
.vb-badge--ok { background: rgba(74,222,128,0.15); color: #86efac; }
.vb-badge--warn { background: rgba(251,191,36,0.15); color: #fcd34d; }
.vb-badge--err { background: rgba(248,113,113,0.15); color: #fca5a5; }