/* Command center additions — palette, KPI, hover cards, status pills */

/* Command palette */
.palette {
  background: var(--color-surface);
  border: 1px solid var(--color-border-h);
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  margin-top: 12vh;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: pop 200ms var(--ease-out);
}
.palette-input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
}
.palette-input svg { color: var(--color-text3); flex-shrink: 0; }
.palette-input input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font-size: 15px; color: var(--color-text1);
}
.palette-list { max-height: 50vh; overflow-y: auto; padding: 6px; }
.palette-h {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-text3);
  padding: 10px 10px 4px;
}
.palette-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--color-text1);
  font-size: 13px;
  text-align: left;
  transition: background 100ms var(--ease-out);
}
.palette-item:hover { background: rgba(255,255,255,0.04); }
.palette-item svg { color: var(--color-text3); width: 16px; height: 16px; }
.palette-foot {
  display: flex; justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
  font-size: 10px;
}

/* Hover card variant */
.card.hover { transition: all 160ms var(--ease-out); }
.card.hover:hover {
  border-color: var(--color-border-h);
  background: var(--color-surface2);
  transform: translateY(-1px);
}
.card-tight { padding: 12px !important; }

/* Chip extra */
.chip.green { color: var(--color-green); border-color: rgba(6,214,160,0.3); background: rgba(6,214,160,0.08); }

/* Stat delta colored */
.stat-delta.good { color: var(--color-green); }
.stat-delta.bad { color: var(--color-red); }

/* Health pill icon dot */
.health-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-green);
}
.health-pill.degraded .dot { background: var(--color-amber); }
.health-pill.down .dot { background: var(--color-red); }

/* Sidebar nav: align trailing chips */
.nav-item { position: relative; }
.nav-item .chip { margin-left: auto; }

/* Mobile bottom-nav badge */
.badge-dot {
  position: absolute; top: 6px; right: calc(50% - 18px);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-red);
}

/* Page header */
.page-header {
  display: flex; align-items: end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.page-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }
.page-sub { margin: 4px 0 0; font-size: 13px; color: var(--color-text2); }

/* Form inputs */
.input {
  display: block; width: 100%;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--color-text1);
  font-family: var(--font-ui);
  transition: border-color 150ms;
  box-sizing: border-box;
}
.input:focus { outline: none; border-color: var(--color-accent); }
.input::placeholder { color: var(--color-text3); }

textarea.input, .textarea {
  display: block; width: 100%;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--color-text1);
  font-family: var(--font-ui);
  resize: vertical;
  min-height: 80px;
  transition: border-color 150ms;
  box-sizing: border-box;
}
textarea.input:focus, .textarea:focus { outline: none; border-color: var(--color-accent); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11px; color: var(--color-text2); font-weight: 500; letter-spacing: 0.04em; }