/* ════════════════════════════════════════════════════
   COMPONENTS  —  css/components.css
════════════════════════════════════════════════════ */

/* ── Card ─────────────────────────────── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* ── Table ────────────────────────────── */
.data-table { width: 100%; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }

.data-table thead th {
  background: var(--brand-orange);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-fast);
}

.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--brand-orange-light); }

.data-table tbody td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink);
}

/* ── Badge ────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.badge--channel {
  background: var(--surface-raised);
  color: var(--ink-muted);
}

/* ── Button ───────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
  border: none;
}

.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--brand-orange);
  color: #fff;
  box-shadow: 0 2px 8px rgba(232,101,10,0.3);
}

.btn--primary:hover {
  background: #d45b09;
  box-shadow: 0 4px 12px rgba(232,101,10,0.4);
}

.btn--outline {
  background: transparent;
  border: 1.5px solid var(--brand-orange);
  color: var(--brand-orange);
}

.btn--outline:hover {
  background: var(--brand-orange-light);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-muted);
}

.btn--ghost:hover {
  background: var(--surface-raised);
  color: var(--ink);
}

.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

/* ── CEMM Grid ────────────────────────── */
.cemm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

@media (max-width: 700px) {
  .cemm-grid { grid-template-columns: 1fr 1fr; }
}

.cemm-col { display: flex; flex-direction: column; }

.cemm-col__header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.cemm-col--acquisition .cemm-col__header { background: var(--cemm-acquisition); }
.cemm-col--conversion  .cemm-col__header { background: var(--cemm-conversion); }
.cemm-col--adoption    .cemm-col__header { background: var(--cemm-adoption); }
.cemm-col--loyalty     .cemm-col__header { background: var(--cemm-loyalty); }

.cemm-col__body {
  flex: 1;
  padding: var(--space-4);
  background: var(--surface-card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cemm-col:first-child .cemm-col__body { border-left: none; }

.cemm-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.cemm-stat--overdue   { background: var(--overdue);   color: var(--overdue-text); }
.cemm-stat--pending   { background: var(--pending);   color: var(--pending-text); }
.cemm-stat--completed { background: var(--completed); color: var(--completed-text); }

.cemm-stat__count { font-weight: var(--weight-bold); font-size: var(--text-md); min-width: 22px; }
.cemm-stat__label { font-size: var(--text-xs); opacity: 0.85; }

/* ── Tag ──────────────────────────────── */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--surface-raised);
  color: var(--ink-muted);
}

/* ── Empty state ──────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  gap: var(--space-3);
  color: var(--ink-faint);
  text-align: center;
}

.empty-state__icon { font-size: 2.5rem; opacity: 0.4; }
.empty-state__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--ink-muted); }
.empty-state__desc { font-size: var(--text-sm); max-width: 260px; line-height: var(--leading-loose); }

/* ── Team table ───────────────────────── */
.team-table { }
.team-table th { background: var(--brand-orange); }

/* ── Divider line ─────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* ── Toast / notification placeholder ── */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 999;
}