/* Imbi Design System — shared component CSS.
 * Include AFTER colors_and_type.css. */

/* ---------- Nav ---------- */
.imbi-nav {
  height: 56px; background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; padding: 0 20px; gap: 24px;
}
.imbi-nav-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-md);
  font-weight: 700; color: var(--fg-primary);
}
.imbi-nav-brand img { height: 22px; width: 22px; }
.imbi-nav-items { display: flex; align-items: center; gap: 2px; }
.imbi-nav-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--radius-md);
  font-size: 13.5px; color: var(--fg-secondary);
  transition: background 120ms, color 120ms;
  cursor: pointer; background: none; border: 0; white-space: nowrap;
  font-family: inherit;
}
.imbi-nav-item:hover { background: var(--bg-sunken); color: var(--fg-primary); }
.imbi-nav-item.is-active { background: var(--amber-100); color: var(--amber-700); }
.dark .imbi-nav-item.is-active { background: rgba(251,206,57,0.12); color: #fbce39; }
.imbi-nav-item svg { width: 15px; height: 15px; }
.imbi-nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 500; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; }
.btn-primary   { background: var(--action-bg); color: var(--action-fg); }
.btn-primary:hover   { background: var(--action-bg-hover); }
.btn-secondary { background: var(--bg-surface); color: var(--fg-primary); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--bg-sunken); }
.btn-ghost     { background: transparent; color: var(--fg-secondary); }
.btn-ghost:hover     { background: var(--bg-sunken); color: var(--fg-primary); }
.btn-sm  { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 6px; }
.btn-lg  { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-icon { width: 32px; padding: 0; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Input ---------- */
.field {
  height: 36px; width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 12px; font-size: 13.5px; color: var(--fg-primary);
  font-family: inherit;
  transition: border-color 120ms, box-shadow 120ms;
}
.field::placeholder { color: var(--fg-tertiary); }
.field:focus { outline: none; border-color: var(--amber-400); box-shadow: var(--ring); }
.field-with-icon { position: relative; }
.field-with-icon svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--fg-tertiary); pointer-events: none;
}
.field-with-icon .field { padding-left: 36px; }

/* ---------- Card ---------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color 120ms, box-shadow 120ms;
}
.card-interactive { cursor: pointer; }
.card-interactive:hover { border-color: var(--border-default); box-shadow: var(--shadow-sm); }

/* ---------- Segmented ---------- */
.segmented {
  display: inline-flex; background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 3px; gap: 2px;
}
.segmented button {
  height: 26px; padding: 0 10px; border-radius: 5px; border: 0;
  background: transparent; color: var(--fg-secondary);
  font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; transition: background 120ms, color 120ms;
}
.segmented button:hover { color: var(--fg-primary); }
.segmented button.is-active { background: var(--bg-sunken); color: var(--fg-primary); }
.dark .segmented button.is-active { background: var(--bg-app); }
.segmented button svg { width: 14px; height: 14px; }

/* ---------- Chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  font-size: 11.5px; font-weight: 500;
  border-radius: 5px; letter-spacing: 0.005em;
}
.chip-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.chip-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
.chip-neutral .chip-dot { background: var(--neutral-dot); }
.chip-success { background: var(--success-bg); color: var(--success-fg); }
.chip-success .chip-dot { background: var(--success-dot); }
.chip-warning { background: var(--warning-bg); color: var(--warning-fg); }
.chip-warning .chip-dot { background: var(--warning-dot); }
.chip-danger  { background: var(--danger-bg); color: var(--danger-fg); }
.chip-danger .chip-dot { background: var(--danger-dot); }
.chip-info    { background: var(--info-bg); color: var(--info-fg); }
.chip-info .chip-dot { background: var(--info-dot); }
.chip-accent  { background: var(--accent-bg); color: var(--accent-fg); }
.chip-accent .chip-dot { background: var(--accent-dot); }
.env-testing    { background: var(--env-testing-bg); color: var(--env-testing-fg); }
.env-staging    { background: var(--env-staging-bg); color: var(--env-staging-fg); }
.env-production { background: var(--env-production-bg); color: var(--env-production-fg); }

/* ---------- Health ring ---------- */
.health {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  position: relative; flex-shrink: 0;
}
.health::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0.3;
}
.health-ok   { background: var(--success-bg); color: var(--success-fg); }
.health-warn { background: var(--warning-bg); color: var(--warning-fg); }
.health-bad  { background: var(--danger-bg); color: var(--danger-fg); }

/* ---------- Misc ---------- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-secondary);
  background: var(--bg-sunken); border: 1px solid var(--border-default);
  border-radius: 4px;
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--neutral-bg); color: var(--fg-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}

/* Tabs (object nav) */
.tabs { display:flex; align-items:center; gap:2px; border-bottom:1px solid var(--border-subtle); padding:0 18px; }
.tab { background:none; border:0; font-family:inherit; padding:10px 14px; font-size:13.5px; color:var(--fg-secondary); cursor:pointer; position:relative; border-radius:6px 6px 0 0; display:inline-flex; align-items:center; gap:6px; }
.tab:hover { color:var(--fg-primary); background:var(--bg-sunken); }
.tab.is-active { color:var(--fg-primary); font-weight:500; }
.tab.is-active::after { content:''; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; background:var(--amber-500); border-radius:2px 2px 0 0; }
.dark .tab.is-active::after { background:#fbce39; }
.tab-count { font-size:11px; font-variant-numeric:tabular-nums; color:var(--fg-tertiary); background:var(--bg-sunken); padding:1px 6px; border-radius:9999px; }
.tab.is-active .tab-count { color: var(--amber-700); background: var(--amber-100); }
.dark .tab.is-active .tab-count { color:#fbce39; background:rgba(251,206,57,0.14); }