/* Tipsy AB-Config Console — minimal, dependency-free styling. */

:root {
  --fg: #1f2937;
  --muted: #6b7280;
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #e5e7eb;
  --primary: #2563eb;
  --primary-fg: #ffffff;
  --danger: #dc2626;
  --warn-bg: #fef3c7;
  --warn-border: #fcd34d;
  --status-draft: #6b7280;
  --status-running: #16a34a;
  --status-paused: #ca8a04;
  --status-completed: #6b7280;
  --status-archived: #6b7280;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { font-weight: 600; }
.nav-main { display: flex; gap: 16px; flex: 1; }
.nav-item {
  text-decoration: none;
  color: var(--fg);
  padding: 6px 10px;
  border-radius: 6px;
}
.nav-item:hover { background: #eef2ff; }
.nav-item.is-active { background: #e0e7ff; color: var(--primary); font-weight: 600; }
.user-box { display: flex; gap: 12px; align-items: center; }
.user-sub { color: var(--muted); font-size: 0.9em; }

.content { padding: 24px; max-width: 1200px; margin: 0 auto; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.page-header h1 { margin: 0; font-size: 1.4em; }

.btn {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95em;
}
.btn:hover { background: #f3f4f6; }
.btn-primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn-primary:hover { background: #1d4ed8; }
.btn-link { border: none; background: transparent; color: var(--primary); padding: 4px 8px; }
.btn-link:hover { text-decoration: underline; background: transparent; }
.btn.danger, .btn-link.danger { color: var(--danger); }
.btn.danger { background: #fee2e2; border-color: var(--danger); }

.data-table { width: 100%; border-collapse: collapse; background: var(--card); }
.data-table th, .data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table th { font-weight: 600; background: #f9fafb; }
.data-table .actions-col { white-space: nowrap; }

.muted { color: var(--muted); }
.msg { margin-top: 8px; color: var(--muted); font-size: 0.9em; }

.form { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.95em; }
.form input, .form select, .form textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  font-family: inherit;
  font-size: 1em;
}
.form-inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.form-inline label { flex: 0 0 auto; }
.actions-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

.filter-bar { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar label { display: flex; flex-direction: column; gap: 4px; }

.kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; background: var(--card); padding: 12px; border: 1px solid var(--border); border-radius: 6px; }
.kv dt { font-weight: 600; color: var(--muted); }
.kv dd { margin: 0; }

.value-box {
  background: #0f172a;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.85em;
  background: #e5e7eb;
  color: var(--fg);
}
.status-draft { background: #e5e7eb; }
.status-running { background: #dcfce7; color: #166534; }
.status-paused { background: #fef3c7; color: #854d0e; }
.status-completed { background: #e5e7eb; color: #374151; }
.status-archived { background: #e5e7eb; color: #6b7280; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.warn-card { background: var(--warn-bg); border-color: var(--warn-border); }

.edit-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.versions-col { background: var(--card); padding: 12px; border: 1px solid var(--border); border-radius: 6px; }
.version-list { list-style: none; padding: 0; margin: 0; }
.version-list li { padding: 4px 0; border-bottom: 1px dashed var(--border); }
.editor-col { background: var(--card); padding: 16px; border: 1px solid var(--border); border-radius: 6px; }
.editor-col h3 { margin-top: 24px; }

.group-row { border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-bottom: 12px; background: #fafafa; }
.group-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.group-head input { flex: 1 1 120px; }
.group-detail { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }

/* Login page */
.login-body { background: var(--bg); }
.login-wrap { max-width: 480px; margin: 80px auto; padding: 24px; background: var(--card); border-radius: 8px; border: 1px solid var(--border); }
.login-wrap form { display: flex; flex-direction: column; gap: 12px; }

code { background: #f3f4f6; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.9em; }

/* Topology (domains / layers / slots) — ST7 v2 console. */
.warn { background: var(--warn-bg); border: 1px solid var(--warn-border); color: #854d0e; padding: 10px 12px; border-radius: 6px; margin: 8px 0; }
.id-row { display: flex; gap: 8px; align-items: center; }
.id-row input { flex: 1 1 auto; }

/* layer_slot allocation bar: allocated experiment / domain ranges + gaps. */
.slot-bar { display: flex; width: 100%; height: 22px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin: 8px 0 12px; background: #fff; }
.slot-bar span { display: inline-block; height: 100%; }
.slot-exp { background: #93c5fd; }
.slot-dom { background: #c4b5fd; }
.slot-gap { background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 6px, #e5e7eb 6px, #e5e7eb 12px); }

/* config_version key/version selector rows in the experiment group editor. */
.kv-selector { display: flex; flex-direction: column; gap: 6px; }
.kv-row { display: flex; gap: 8px; align-items: center; }
.kv-row select { flex: 1 1 auto; }