:root {
  --bg:       #f2f2f2;
  --surface:  #ffffff;
  --surface2: #dfebf6;
  --text:     #1a1a1a;
  --muted:    #999999;
  --border:   #cccccc;
  --accent:   #2178c0;
  --navy:     #152f58;
  --success:  #076409;
  --warning:  #ff8e00;
  --danger:   #aa0020;
  --shadow:   rgba(0,0,0,.06);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Ubuntu', sans-serif;
  background: var(--bg); color: var(--text); min-height: 100vh;
  font-size: 14px;
}

/* ── Header ── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1.25rem;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 1px 4px var(--shadow);
}
header h1 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.badge {
  background: var(--accent); color: #fff;
  border-radius: 9999px; padding: .2rem .65rem;
  font-size: .75rem; font-weight: 600;
}
.toolbar {
  margin-left: auto;
  display: flex; align-items: center; gap: .6rem;
}
#status-msg {
  font-size: .8rem; color: var(--muted);
  display: flex; align-items: center; gap: .4rem;
}
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: .8rem; font-weight: 500;
  cursor: pointer; transition: opacity .15s, background .15s;
  text-decoration: none;
}
.btn:hover:not(:disabled) { background: var(--bg); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) { background: var(--accent); opacity: .85; }
.btn-sm { padding: .25rem .6rem; font-size: .75rem; }

/* ── Spinner ── */
.spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .65s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Tabs ── */
.tabs-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 1.25rem;
  display: flex; gap: 0; overflow-x: auto;
  box-shadow: 0 1px 4px var(--shadow);
}
.tab-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1rem;
  border: none; border-bottom: 2px solid transparent;
  background: none; color: var(--muted);
  font-family: inherit; font-size: .82rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 600;
}
.tab-count {
  font-size: .7rem; padding: .1rem .4rem;
  border-radius: 9999px; background: var(--surface2);
  color: var(--muted);
}
.tab-btn.active .tab-count { background: var(--accent); color: #fff; }

/* ── Main content ── */
main { padding: 1.25rem; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.project-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}

/* ── Cards ── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: .85rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .85rem;
  box-shadow: 0 1px 4px var(--shadow);
  display: flex; flex-direction: column; gap: .5rem;
}
.card-hostname {
  font-weight: 600; font-size: .88rem;
  word-break: break-all; line-height: 1.3;
}
.tags {
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.tag {
  font-size: .7rem; padding: .1rem .45rem;
  border-radius: 9999px; border: 1px solid var(--border);
  color: var(--muted); white-space: nowrap;
}
.tag-ns    { border-color: var(--navy); color: var(--navy); }
.tag-route { border-color: var(--muted); }

/* health / sync colours */
.tag-Healthy    { border-color: var(--success); color: var(--success); }
.tag-Degraded,
.tag-Missing    { border-color: var(--danger);  color: var(--danger);  }
.tag-Progressing{ border-color: var(--warning); color: var(--warning); }

.sync-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 3px; vertical-align: middle;
}
.sync-Synced    { background: var(--success); }
.sync-OutOfSync { background: var(--warning); }
.sync-Unknown   { background: var(--muted);   }

.card-actions {
  margin-top: auto; padding-top: .4rem;
  display: flex; gap: .4rem; flex-wrap: wrap;
}

/* ── Empty / loading states ── */
.splash {
  text-align: center; padding: 5rem 1rem; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.splash .big-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}