/* BG DIGITAL HUB — Component library
   Every property references a token. No hardcoded hex, radius, or spacing. */

/* ===== TOPBAR ===== */
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s6);
  background: var(--glass-fill), var(--surface-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-hi);
  letter-spacing: -0.01em;
}

.topbar-brand span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-left: var(--s2);
}

.cost-indicator {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-lo);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-1);
}

.cost-indicator.warning { color: var(--warn); border-color: rgba(255,180,84,.3); background: rgba(255,180,84,.06); }
.cost-indicator.capped  { color: var(--fail); border-color: rgba(255,92,122,.3);  background: rgba(255,92,122,.06); }

/* ===== SIDEBAR ===== */
.sidebar {
  background: var(--glass-fill), var(--surface-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-right: 1px solid var(--line);
  padding: var(--s5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-lo);
  cursor: pointer;
  border-radius: 0;
  transition: color 0.15s, background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.nav-item:hover { color: var(--text-mid); background: var(--surface-1); }

.nav-item.active {
  color: var(--accent);
  background: var(--accent-dim);
  border-right: 2px solid var(--accent);
}

.nav-icon {
  font-family: var(--font-mono);
  font-size: 11px;
  width: 22px;
  text-align: center;
  opacity: 0.7;
}

.nav-badge {
  margin-left: auto;
  background: var(--fail);
  color: var(--bg-base);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}

.nav-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-lo);
  padding: var(--s4) var(--s5) var(--s2);
  opacity: 0.6;
}

/* ===== MAIN CONTENT ===== */
.main {
  overflow-y: auto;
  padding: var(--s8);
}

.view { display: none; }
.view.active { display: block; }

.view-header {
  margin-bottom: var(--s8);
}

.view-header .eyebrow { margin-bottom: var(--s3); }

/* ===== CARD — signature glass treatment ===== */
.card {
  background: var(--glass-fill), var(--surface-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--elev-2);
  padding: var(--s5);
  position: relative;
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), transparent 28%);
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* ===== STATUS PILLS ===== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  white-space: nowrap;
}

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

.pill.ok   { color: var(--ok);   border-color: rgba(61,220,151,.3);  background: rgba(61,220,151,.08); }
.pill.ok   .dot { background: var(--ok);   box-shadow: 0 0 8px var(--ok); }
.pill.warn { color: var(--warn); border-color: rgba(255,180,84,.3);  background: rgba(255,180,84,.08); }
.pill.warn .dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.pill.fail { color: var(--fail); border-color: rgba(255,92,122,.3);  background: rgba(255,92,122,.08); }
.pill.fail .dot { background: var(--fail); box-shadow: 0 0 8px var(--fail); }
.pill.idle { color: var(--idle); border-color: var(--line); }
.pill.idle .dot { background: var(--idle); }

/* ===== AGENT ROW ===== */
.agent-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-radius: var(--glass-radius-sm);
  background: var(--glass-fill), var(--surface-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-sheen);
}

.agent-row.disabled { opacity: 0.4; }

.agent-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  flex-shrink: 0;
  letter-spacing: 0;
}

.agent-icon.disabled-icon {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text-lo);
}

.agent-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-hi);
}

.agent-desc {
  font-size: 12px;
  color: var(--text-lo);
  margin-top: 2px;
}

.level-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-lo);
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.agent-stats {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-lo);
  text-align: right;
}

/* ===== DECISION / QUEUE ITEM ===== */
.queue-item {
  padding: var(--s5);
  border-radius: var(--glass-radius);
  background: var(--glass-fill), var(--surface-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-rim);
  border-left: 2px solid var(--fail);
  box-shadow: var(--elev-2);
}

.queue-item.approval {
  border-left-color: var(--ok);
}

.queue-item-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-hi);
}

.queue-fail-reason {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fail);
  margin: var(--s2) 0 var(--s4);
}

.queue-approval-reason {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ok);
  margin: var(--s2) 0 var(--s4);
}

.queue-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-lo);
}

/* ===== BUTTONS ===== */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-hi);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn:hover { background: var(--surface-3); }

.btn.primary {
  border: 1px solid var(--accent-line);
  background: linear-gradient(180deg, var(--accent-dim), rgba(0,114,255,.06));
  color: var(--accent);
  box-shadow: var(--glass-sheen), 0 0 0 1px rgba(0,240,255,.04);
}

.btn.primary:hover { background: linear-gradient(180deg, rgba(0,240,255,.18), rgba(0,114,255,.10)); }

.btn.danger {
  border-color: rgba(255,92,122,.3);
  background: rgba(255,92,122,.08);
  color: var(--fail);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-lo);
}

.btn.ghost:hover { color: var(--text-mid); background: var(--surface-1); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.sign-out { margin-left: var(--s2); }
.integration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.integration-card { min-height: 210px; display: flex; flex-direction: column; gap: var(--s3); }
.integration-card h2 { color: var(--text-hi); padding: 0; border: 0; font-size: 17px; letter-spacing: -0.02em; text-transform: none; }
.integration-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.integration-category { color: var(--accent); font-family: var(--font-mono); font-size: 11px; }
.workspace-tag { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--text-lo); font: 10px var(--font-mono); }
.workspace-tag.legacy-live { color: var(--ok); }
.status-pill { border: 1px solid var(--line); border-radius: 99px; color: var(--text-lo); font: 10px var(--font-mono); padding: 4px 8px; text-transform: uppercase; }
.status-pill.not_connected { color: var(--warn); border-color: rgba(255,180,84,.25); }
.status-pill.awaiting_approval { color: var(--accent); border-color: var(--accent-line); }
.status-pill.queued, .status-pill.running { color: var(--warn); }
.status-pill.done, .status-pill.approved { color: var(--ok); }

@media (max-width: 960px) { .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .integration-grid { grid-template-columns: 1fr; } .sign-out { padding: 7px 8px; } }

/* ===== AUDIT LOG TABLE ===== */
.log-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
}

.log-table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-lo);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

.log-table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-mid);
  vertical-align: top;
}

.log-table tr:hover td { background: var(--surface-1); }

.log-table .actor   { color: var(--accent); }
.log-table .action  { color: var(--text-hi); }
.log-table .ts      { color: var(--text-lo); white-space: nowrap; }
.log-table .cost    { color: var(--warn); }

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: var(--s16) var(--s8);
  color: var(--text-lo);
  font-size: 13px;
}

.empty-state .empty-icon {
  font-family: var(--font-mono);
  font-size: 28px;
  margin-bottom: var(--s4);
  opacity: 0.3;
}

/* ===== SUMMARY BAR ===== */
.summary-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s8);
}

.stat-card {
  background: var(--glass-fill), var(--surface-1);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: var(--glass-border);
  border-radius: var(--glass-radius-sm);
  padding: var(--s4) var(--s5);
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--text-hi);
  line-height: 1;
  margin-bottom: var(--s2);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-lo);
}

/* ===== TASK TRIGGER FORM ===== */
.trigger-form {
  background: var(--glass-fill), var(--surface-1);
  border: var(--glass-border);
  border-radius: var(--glass-radius-sm);
  padding: var(--s5);
}

.form-field { margin-bottom: var(--s4); }
.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-lo);
  margin-bottom: var(--s2);
}

.form-input, .form-select {
  width: 100%;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--s3) var(--s4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-hi);
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus, .form-select:focus { border-color: var(--accent-line); }
.form-select option { background: var(--bg-sunken); }

/* ===== LOADING / SPINNER ===== */
.loading {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--text-lo);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: var(--s8);
}

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ===== TOAST / NOTIFICATION ===== */
.toast-container {
  position: fixed;
  bottom: var(--s6);
  right: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  z-index: 999;
}

.command-hero { align-items: end; display: flex; justify-content: space-between; gap: var(--s8); max-width: 920px; padding: var(--s4) 0 var(--s8); }
.command-hero h1 { font-size: clamp(34px, 4vw, 52px); max-width: 760px; }
.view-subtitle { color: var(--text-mid); font-size: 16px; margin-top: var(--s4); max-width: 640px; }
.hero-status { align-items: center; background: rgba(61,220,151,.08); border: 1px solid rgba(61,220,151,.22); border-radius: 999px; color: var(--ok); display: inline-flex; flex: none; font-family: var(--font-mono); font-size: 11px; gap: 8px; padding: 8px 11px; }
.signal-dot { background: var(--ok); border-radius: 50%; box-shadow: 0 0 12px var(--ok); height: 7px; width: 7px; }
.workspace-strip { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--s8); max-width: 920px; }
.workspace-card { align-items: center; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--glass-radius); display: flex; gap: var(--s4); min-height: 105px; overflow: hidden; padding: var(--s5); position: relative; }
.workspace-card::before { background: linear-gradient(130deg, var(--accent-dim), transparent 65%); content: ''; inset: 0; opacity: .8; pointer-events: none; position: absolute; }
.workspace-card-legacy::before { background: linear-gradient(130deg, rgba(255,180,84,.14), transparent 65%); }
.workspace-card > * { position: relative; }
.workspace-code { align-items: center; background: var(--accent-dim); border: 1px solid var(--accent-line); border-radius: 12px; color: var(--accent); display: flex; font-family: var(--font-mono); font-size: 13px; font-weight: 700; height: 42px; justify-content: center; width: 42px; }
.workspace-card-legacy .workspace-code { background: rgba(255,180,84,.10); border-color: rgba(255,180,84,.30); color: var(--warn); }
.workspace-card strong { color: var(--text-hi); display: block; font-family: var(--font-display); font-size: 16px; }
.workspace-card p { color: var(--text-lo); font-size: 12px; margin-top: 2px; }
.command-card { max-width: 920px; }
.command-card-heading { align-items: start; display: flex; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s6); }
.command-card-heading h2 { border: 0; color: var(--text-hi); font-size: 20px; letter-spacing: -.02em; padding: 0; text-transform: none; }
.command-note { color: var(--text-lo); font-family: var(--font-mono); font-size: 11px; max-width: 180px; text-align: right; }
.command-form { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.command-form label { display: grid; gap: 8px; color: var(--text-lo); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.command-form select, .command-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-sunken); color: var(--text-hi); font: inherit; padding: 12px; text-transform: none; letter-spacing: normal; }
.command-form textarea { resize: vertical; line-height: 1.5; }
.command-prompt { grid-column: 1 / -1; }
.command-submit { justify-self: start; }
.command-submit span { margin-left: 8px; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin: var(--s10) 0 var(--s4); max-width: 920px; }
.section-heading h2 { border: 0; color: var(--text-hi); font-size: 20px; letter-spacing: -.02em; padding: 0; text-transform: none; }
.section-heading > span { color: var(--text-lo); font-family: var(--font-mono); font-size: 10px; }
.eyebrow { color: var(--accent); font-size: 0.73rem; font-weight: 800; letter-spacing: 0.14em; margin: 0 0 8px; }
.task-list { display: grid; gap: 8px; max-width: 920px; }
.task-row { align-items: center; background: var(--surface-1); border: 1px solid var(--line); border-radius: 10px; display: flex; gap: var(--s3); justify-content: space-between; padding: 14px 16px; }
.task-mark { align-items: center; background: var(--accent-dim); border-radius: 7px; color: var(--accent); display: flex; flex: none; font-family: var(--font-mono); font-size: 10px; font-weight: 700; height: 30px; justify-content: center; width: 30px; }
.task-mark.legacy-live { background: rgba(255,180,84,.10); color: var(--warn); }
.task-copy { flex: 1; }
.task-row strong { display: block; }
.task-row span:not(.status-pill) { color: var(--text-secondary); display: block; font-size: 0.8rem; margin-top: 3px; }
.status-pill { border-radius: 999px; font-size: 0.72rem; font-weight: 800; padding: 6px 9px; text-transform: uppercase; }
.status-pill.queued, .status-pill.running { background: #e6f1ff; color: #1252a5; }
.status-pill.awaiting_approval { background: #fff1cf; color: #8a5900; }
.status-pill.done, .status-pill.approved { background: #ddf6e6; color: #18733a; }
.status-pill.error, .status-pill.rejected { background: #ffe1df; color: #a22820; }

@media (max-width: 640px) {
  .command-hero { align-items: start; flex-direction: column; gap: var(--s4); }
  .workspace-strip { grid-template-columns: 1fr; }
  .command-card-heading { flex-direction: column; }
  .command-note { max-width: none; text-align: left; }
  .command-form { grid-template-columns: 1fr; }
  .command-prompt { grid-column: auto; }
  .task-row { align-items: flex-start; gap: 12px; }
}

.toast {
  background: var(--glass-fill), var(--surface-3);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-rim);
  border-radius: var(--glass-radius-sm);
  padding: var(--s3) var(--s5);
  font-size: 13px;
  color: var(--text-hi);
  box-shadow: var(--elev-2);
  animation: slideIn 0.2s ease;
}

.toast.success { border-left: 2px solid var(--ok); }
.toast.error   { border-left: 2px solid var(--fail); }

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}