/* Fleet Watch — Websites (uptime) view. Reuses the glass/brand tokens from
   styles.css; only adds the tab bar + site rows. */

.tabs {
  display: flex;
  gap: 8px;
  margin: 0 auto 18px;
  max-width: 1400px;
  padding: 0 4px;
}
.tab {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.6);
  font: 600 13px/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: 0.03em;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab:hover { color: #fff; }
.tab.active {
  color: #05070a;
  background: #00d9ff;
  border-color: #00d9ff;
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.35);
}

.sites { max-width: 1400px; margin: 0 auto; padding: 0 4px; }
.sites.hidden { display: none; }

.site-group { margin-bottom: 22px; }
.site-group h3 {
  font: 600 12px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 10px 2px;
}
.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.site-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
  transition: transform 0.12s, border-color 0.12s;
}
.site-row:hover { transform: translateY(-1px); }
.site-row.up   { border-left-color: #2ee6a6; }
.site-row.warn { border-left-color: #ffcf5c; }
.site-row.down { border-left-color: #ff5c7a; }

.site-led {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto;
  background: #666;
}
.site-row.up   .site-led { background: #2ee6a6; box-shadow: 0 0 10px #2ee6a6; }
.site-row.warn .site-led { background: #ffcf5c; box-shadow: 0 0 10px #ffcf5c; }
.site-row.down .site-led { background: #ff5c7a; box-shadow: 0 0 10px #ff5c7a;
  animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.site-main { min-width: 0; flex: 1 1 auto; }
.site-name {
  font: 600 15px/1.2 "Space Grotesk", system-ui, sans-serif;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-host {
  font: 400 12px/1.3 "JetBrains Mono", monospace;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-meta {
  flex: 0 0 auto;
  text-align: right;
  font: 400 11px/1.4 "JetBrains Mono", monospace;
  color: rgba(255, 255, 255, 0.55);
}
.site-code { font-weight: 600; }
.site-row.up   .site-code { color: #2ee6a6; }
.site-row.warn .site-code { color: #ffcf5c; }
.site-row.down .site-code { color: #ff5c7a; }
.site-ssl.soon { color: #ffcf5c; }
.site-ssl.crit { color: #ff5c7a; }

.sites-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  padding: 60px 0;
  font: 500 14px "Inter", system-ui, sans-serif;
}