/* Helm component primitives — shared by preview cards and ui_kits */
@import url("./colors_and_type.css");

* { box-sizing: border-box; }

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding: 0 16px;
  font-family:var(--font-sans); font-size:14px; font-weight:500;
  border-radius: var(--radius-md);
  border:1px solid transparent;
  cursor:pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.btn-primary { background: var(--grey-950); color:#fff; }
.btn-primary:hover { background: var(--grey-900); }
.btn-secondary { background: var(--white); color: var(--fg-primary); border-color: var(--border); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--grey-50); }
.btn-ghost { background: transparent; color: var(--fg-secondary); }
.btn-ghost:hover { background: var(--grey-100); color: var(--fg-primary); }
.btn-icon { width:36px; padding:0; justify-content:center; }
.btn-sm { height:30px; padding:0 12px; font-size:13px; border-radius: var(--radius-sm); }
.btn-lg { height:44px; padding:0 20px; font-size:15px; }

/* ─── Status pills ─────────────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family:var(--font-sans); font-size:12px; font-weight:400; line-height:1.4;
  white-space: nowrap;
}
.pill-success { background: var(--success-bg); color: var(--success-fg); }
.pill-info    { background: var(--info-bg);    color: var(--info-fg);    }
.pill-warn    { background: var(--warn-bg);    color: var(--warn-fg);    }
.pill-danger  { background: var(--danger-bg);  color: var(--danger-fg);  }
.pill-neutral { background: var(--grey-100);   color: var(--grey-600);   }

/* ─── Dashed status circles ────────────────────────────────────── */
.status-circle {
  width:24px; height:24px; border-radius:50%;
  border:1.5px dashed var(--grey-300);
  flex-shrink:0;
}
.status-circle.success { border-color: var(--success-fg); }
.status-circle.info    { border-color: var(--info-fg); }
.status-circle.warn    { border-color: var(--warn-fg); }
.status-circle.danger  { border-color: var(--danger-fg); }
.status-circle.neutral { border-color: var(--grey-400); }

/* ─── Cards ────────────────────────────────────────────────────── */
.helm-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ─── Inputs ───────────────────────────────────────────────────── */
.helm-input {
  display:flex; align-items:center; gap:10px;
  height:36px; padding: 0 12px;
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family:var(--font-sans); font-size:14px;
  color: var(--fg-primary);
}
.helm-input input { all:unset; flex:1; font:inherit; color:inherit; min-width:0; }
.helm-input input::placeholder { color: var(--fg-tertiary); }
.helm-input:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.kbd {
  display:inline-flex; align-items:center; justify-content:center;
  height:20px; min-width:20px; padding:0 5px;
  background: var(--grey-100); border-radius: var(--radius-xs);
  font-family:var(--font-mono); font-size:11px; color: var(--fg-secondary);
}

/* ─── Top app bar pills ───────────────────────────────────────── */
.app-pill {
  display:inline-flex; align-items:center; gap:10px;
  height:40px; padding: 0 14px;
  border:1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font-family:var(--font-sans); font-size:14px; color: var(--fg-primary);
  box-shadow: var(--shadow-xs);
}
.section-icon {
  width:32px; height:32px; border-radius: var(--radius-md);
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--white); border:1px solid var(--border);
  color: var(--fg-secondary);
}
.user-avatar {
  width:28px; height:28px; border-radius: var(--radius-sm);
  background: var(--grey-800); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-size:13px; font-weight:500;
}

/* ─── Sidebar items ────────────────────────────────────────────── */
.nav-item {
  display:flex; align-items:center; gap:12px;
  height:40px; padding:0 12px; margin:0 8px;
  border-radius: var(--radius-md);
  font-family:var(--font-sans); font-size:14px; color: var(--fg-secondary);
  cursor:pointer; transition: background var(--dur-fast);
}
.nav-item:hover { background: var(--grey-100); color: var(--fg-primary); }
.nav-item.selected { background: var(--grey-100); color: var(--fg-primary); }
.nav-item .icon { width:18px; height:18px; flex-shrink:0; color: var(--fg-secondary); }
.nav-item.selected .icon { color: var(--fg-primary); }