:root {
  --bs-primary: #6366f1;
  --bs-primary-rgb: 99, 102, 241;
  --bs-body-bg: #fafafa;
  --bs-body-color: #18181b;
  --bs-secondary-color: #71717a;
  --bs-border-color: #e4e4e7;
  --bs-border-radius: .75rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-primary);
  --bs-primary-bg-subtle: #eef2ff;
  --bs-primary-border-subtle: #c7d2fe;
  --bs-primary-text-emphasis: #4338ca;
}
.app-nav {
  position: sticky; top: 0; z-index: 1020;
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bs-border-color);
}
.host-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.07) !important; transform: translateY(-1px); }
.host-card { transition: box-shadow .15s, transform .15s; }
[data-period-toggle] button.active {
  background: var(--bs-primary); border-color: var(--bs-primary); color: #fff;
}
.graph-img { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); width: 100%; height: auto; display: block; }
.search-wrap { width: 260px; }
.search-results { width: 100%; max-height: 320px; overflow-y: auto; }
.host-card .card-spark { width: 100%; height: 36px; display: block; margin: 6px 0; }
.host-card .metrics { font-size: 12px; color: var(--bs-secondary-color); }
.host-card .metrics b { color: var(--bs-body-color); }
.host-card .metrics-row { display: flex; flex-wrap: wrap; gap: 10px; }
.vm-entity .ip { font-size: 12px; font-weight: 400; color: var(--bs-secondary-color); margin-left: 8px; }
/* navbar-expand-lg 미만에서는 메뉴가 접혀서 세로로 쌓이므로 검색창도 꽉 채움 */
@media (max-width: 991.98px) {
  .search-wrap { width: 100%; margin-top: .5rem; }
}