/* ============================================================
   Zain OS — shared design tokens
   Source of truth for button / pill / badge geometry.
   Variants change color, never size.
   ============================================================ */

:root {
  /* ---- Button heights ---- */
  --btn-sm: 26px;   /* row-level actions (in-table, in-queue) */
  --btn-md: 32px;   /* secondary page actions, card actions */
  --btn-lg: 38px;   /* primary page headers (Add unit, Add lead) */

  /* ---- Button min-widths (Decline = Approve) ---- */
  --btn-w-sm: 84px;
  --btn-w-md: 104px;
  --btn-w-lg: 120px;

  /* ---- Pill sizing (status / stage / meta) ---- */
  --pill-h: 22px;
  --pill-px: 10px;
  --pill-fs: 11px;
  --pill-fw: 600;
  --pill-radius: 999px;

  /* ---- Score / avatar circles ---- */
  --badge-sm: 22px;  /* avatars in dense rows */
  --badge-md: 28px;  /* conversation list */
  --badge-lg: 36px;  /* detail panels */

  /* ---- Input heights (match button scale) ---- */
  --input-sm: 28px;
  --input-md: 34px;

  /* ---- Icon-only buttons (squares) ---- */
  --iconbtn-sm: 26px;
  --iconbtn-md: 32px;

  /* ---- Shared radii ---- */
  --btn-radius: 6px;
  --btn-radius-sm: 4px;
}

/* ============================================================
   .btn — base geometry, default = md ghost
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--btn-md);
  min-width: var(--btn-w-md);
  padding: 0 14px;
  border-radius: var(--btn-radius);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;

  /* Default: ghost / outline */
  background: var(--card, transparent);
  color: var(--text, #111);
  border: 1px solid var(--border, #ddd);
}
.btn:hover { border-color: var(--text-secondary, #888); }

/* ---- Sizes ---- */
.btn.sm { height: var(--btn-sm); min-width: var(--btn-w-sm); padding: 0 10px; font-size: 11px; border-radius: var(--btn-radius-sm); }
.btn.lg { height: var(--btn-lg); min-width: var(--btn-w-lg); padding: 0 18px; font-size: 13px; }

/* ---- Variants: color only ---- */
.btn.primary {
  background: var(--brand, #e8613a);
  color: #fff;
  border-color: var(--brand, #e8613a);
}
.btn.primary:hover { filter: brightness(1.08); border-color: var(--brand, #e8613a); }

.btn.dark {
  background: var(--text, #111);
  color: var(--bg, #fff);
  border-color: var(--text, #111);
}
.btn.dark:hover { filter: brightness(1.15); border-color: var(--text, #111); }

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text, #111);
}
.btn.ghost:hover { background: var(--hover, rgba(0,0,0,0.05)); border-color: transparent; }

.btn.danger { color: #c85c5c; }
.btn.danger:hover { border-color: #c85c5c; }

.btn.danger-solid {
  background: #c85c5c;
  color: #fff;
  border-color: #c85c5c;
}

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Remove min-width when explicitly not wanted (e.g. long-label CTAs) */
.btn.auto { min-width: 0; }

/* ============================================================
   .iconbtn — icon-only square buttons
   ============================================================ */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--iconbtn-md);
  height: var(--iconbtn-md);
  padding: 0;
  border-radius: var(--btn-radius);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary, #666);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.iconbtn:hover { background: var(--hover, rgba(0,0,0,0.05)); color: var(--text, #111); }
.iconbtn.sm { width: var(--iconbtn-sm); height: var(--iconbtn-sm); }
.iconbtn svg { width: 16px; height: 16px; }
.iconbtn.sm svg { width: 14px; height: 14px; }

/* ============================================================
   .pill — status / stage / meta chips
   Color comes from .pill.status-* variants.
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--pill-h);
  padding: 0 var(--pill-px);
  border-radius: var(--pill-radius);
  font-size: var(--pill-fs);
  font-weight: var(--pill-fw);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;

  /* Default: neutral */
  background: var(--hover, rgba(0,0,0,0.05));
  color: var(--text-secondary, #666);
  border: 1px solid transparent;
}

/* ---- Status variants ---- */
.pill.status-hot,
.pill.status-today,
.pill.status-urgent      { background: rgba(232,97,58,0.14);  color: #e8613a; }

.pill.status-confirmed,
.pill.status-paid,
.pill.status-available,
.pill.status-won         { background: rgba(122,178,143,0.14); color: #7ab28f; }

.pill.status-pending,
.pill.status-upcoming,
.pill.status-qualifying  { background: rgba(212,165,116,0.14); color: #d4a574; }

.pill.status-reserved,
.pill.status-negotiating { background: rgba(122,150,200,0.14); color: #7a96c8; }

.pill.status-sold,
.pill.status-dead,
.pill.status-lost        { background: rgba(120,120,120,0.14); color: #888; }

.pill.status-new,
.pill.status-contacted   { background: rgba(180,140,200,0.14); color: #b48cc8; }

/* Dot prefix option */
.pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ============================================================
   .badge-score — orange score circles / avatar initials
   ============================================================ */
.badge-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--badge-sm);
  height: var(--badge-sm);
  border-radius: 50%;
  background: var(--brand, #e8613a);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, monospace);
  flex-shrink: 0;
}
.badge-score.md { width: var(--badge-md); height: var(--badge-md); font-size: 12px; }
.badge-score.lg { width: var(--badge-lg); height: var(--badge-lg); font-size: 14px; }

/* Neutral avatar (initials without score) */
.badge-score.neutral { background: var(--hover, rgba(0,0,0,0.08)); color: var(--text-secondary, #666); }

/* ============================================================
   .card-row — multi-column card rows with equal-height stretch
   ============================================================ */
.card-row {
  display: grid;
  gap: 14px;
  align-items: stretch;
}
.card-row > * { min-width: 0; height: 100%; }
.card-row.cols-2 { grid-template-columns: 1fr 1fr; }
.card-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.card-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

.inp {
  height: var(--input-md);
  padding: 0 12px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--border, #ddd);
  background: var(--card, #fff);
  color: var(--text, #111);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.12s;
}
.inp:focus { border-color: var(--brand, #e8613a); }
.inp.sm { height: var(--input-sm); font-size: 12px; padding: 0 10px; }