/*
 * Components. Every interactive component defines six states (S14):
 * rest · hover · focus (focus-visible ring) · active (pressed / selected) · disabled · loading.
 * Selected state uses .active, [aria-pressed="true"] or [aria-selected="true"].
 * Loading uses .is-loading or [aria-busy="true"]. Disabled uses [disabled] or [aria-disabled="true"].
 */

/* ---------- Button (default for every <button>) ---------- */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
button:hover {
  background: var(--state-hover-bg);
  border-color: var(--state-hover-border);
}
button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
button:active {
  transform: scale(var(--state-pressed-scale));
}
button.active,
button[aria-pressed='true'] {
  background: var(--state-active-bg);
  border-color: var(--state-active-bg);
  color: var(--state-active-text);
}
button:disabled,
button[aria-disabled='true'] {
  opacity: var(--state-disabled-opacity);
  cursor: not-allowed;
  transform: none;
  background: var(--surface-2);
  border-color: var(--border);
}
button.is-loading,
button[aria-busy='true'] {
  position: relative;
  color: transparent;
  pointer-events: none;
}
button.is-loading::after,
button[aria-busy='true']::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--brand-500);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Variants */
.btn-primary {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--neutral-0);
}
.btn-primary:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--state-hover-bg);
  border-color: transparent;
}
.btn-inverse {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.22);
  color: var(--text-inverse);
}
.btn-inverse:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.4);
}
.btn-inverse:focus-visible {
  box-shadow: var(--focus-ring-inverse);
}
.wide {
  width: 100%;
  margin-top: var(--space-3);
}

/* ---------- Tabs ---------- */
.tabbar {
  display: flex;
  gap: var(--space-1);
  align-items: stretch;
}
.tab {
  min-height: 100%;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  padding: 0 var(--space-4);
  font-size: var(--text-md);
}
.tab:hover {
  background: var(--state-hover-bg);
  color: var(--text);
  border-bottom-color: var(--border-strong);
}
.tab:focus-visible {
  box-shadow: inset var(--focus-ring);
}
.tab[aria-selected='true'] {
  background: transparent;
  color: var(--brand-700);
  border-bottom-color: var(--brand-700);
  font-weight: var(--weight-bold);
}
.tab:disabled {
  background: transparent;
}

/* ---------- Segmented filters ---------- */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.segmented button {
  min-height: 28px;
  border-color: transparent;
  background: transparent;
}
.segmented button:hover {
  background: var(--surface);
}
.segmented button.active {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--brand-700);
  box-shadow: var(--shadow-sm);
}

/* ---------- Inputs ---------- */
input[type='search'],
input[type='text'],
input[type='number'],
.search {
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.search:hover {
  border-color: var(--state-hover-border);
}
.search:focus-visible {
  outline: none;
  border-color: var(--focus-ring-color);
  box-shadow: var(--focus-ring);
}
.search:disabled {
  opacity: var(--state-disabled-opacity);
  background: var(--surface-2);
}
input[type='range'] {
  accent-color: var(--brand-700);
  width: 100%;
}
input[type='checkbox'] {
  accent-color: var(--brand-700);
  width: 16px;
  height: 16px;
}

/* ---------- Switch (component controls) ---------- */
.toggle {
  min-width: 92px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
}
.toggle.on {
  background: var(--status-running);
  border-color: var(--status-running);
  color: var(--neutral-0);
}

/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-interactive {
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.card-interactive:hover {
  border-color: var(--state-hover-border);
  box-shadow: var(--shadow-md);
}
.card-interactive:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.card-interactive:active {
  transform: scale(0.995);
}

/* ---------- Status badge and LED ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  background: var(--status-info-bg);
  color: var(--status-info);
}
.badge.running {
  background: var(--status-running-bg);
  color: var(--status-running);
}
.badge.stopped {
  background: var(--status-stopped-bg);
  color: var(--status-stopped);
}
.badge.unknown {
  background: var(--status-unknown-bg);
  color: var(--status-unknown);
}
.dot,
.led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-stopped);
  flex: none;
}
.led.on,
.dot.on {
  background: var(--status-running);
  box-shadow: 0 0 0 3px var(--status-running-bg);
}
.led.unknown,
.dot.unknown {
  background: var(--status-unknown);
}

/* ---------- Status pill (header) ---------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(255 255 255 / 0.22);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-inverse);
}
.status-pill .dot {
  background: var(--status-sample);
}

/* ---------- Tag ---------- */
.tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--brand-100);
  color: var(--brand-700);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

/* ---------- Alert box ---------- */
.alertbox {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--status-info-bg);
  color: var(--brand-800);
  font-size: var(--text-sm);
}
.alertbox.warn {
  background: var(--status-unknown-bg);
  color: var(--status-unknown-text);
}

/* ---------- Popover (layers) ---------- */
.popover {
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  max-height: calc(100% - 110px);
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 6;
  display: none;
}
.popover.open {
  display: block;
}
.layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 7px 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--neutral-100);
  cursor: pointer;
}
.layer-row:hover {
  color: var(--brand-700);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translate(-50%, 20px);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--neutral-900);
  color: var(--text-inverse);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--transition-med),
    transform var(--transition-med);
  z-index: 50;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Dialog ---------- */
dialog {
  width: min(720px, 94vw);
  max-height: 90vh;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
dialog::backdrop {
  background: rgb(0 35 61 / 0.45);
  backdrop-filter: blur(2px);
}
.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.dialog-head h2 {
  font-size: var(--text-lg);
}
.dialog-body {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-md);
  line-height: 1.6;
}
.dialog-body code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}
.close {
  width: 34px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

/* ---------- Loading panel ---------- */
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100% - 2 * var(--space-5)));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  z-index: 4;
}
.loading::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: var(--space-2);
  vertical-align: -2px;
  border: 2px solid var(--brand-500);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading.failed {
  border-color: var(--status-unknown);
  color: var(--status-unknown-text);
}
.loading.failed::before {
  display: none;
}
.loading-text {
  display: inline;
}
.loading-bar {
  height: 6px;
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.loading-bar::after {
  content: '';
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: var(--brand-700);
  transition: width var(--transition-fast);
}
.loading-bar[hidden] {
  display: none;
}