/* Realto Xperts — App styles */
body { font-family: 'Inter', system-ui, sans-serif; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Kanban */
.kanban-col { min-width: 280px; max-width: 320px; }
.kanban-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kanban-card:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -4px rgba(0,0,0,0.1); }
.kanban-card.dragging { opacity: 0.4; transform: rotate(2deg); }

/* Unit map */
.unit-cell { transition: all 0.15s; }
.unit-cell:hover { transform: scale(1.08); z-index: 10; }

/* Status pills */
.pill { @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium border; }
.pill-emerald { @apply bg-emerald-50 text-emerald-700 border-emerald-200; }
.pill-rose { @apply bg-rose-50 text-rose-700 border-rose-200; }
.pill-amber { @apply bg-amber-50 text-amber-700 border-amber-200; }
.pill-blue { @apply bg-blue-50 text-blue-700 border-blue-200; }
.pill-indigo { @apply bg-indigo-50 text-indigo-700 border-indigo-200; }
.pill-violet { @apply bg-violet-50 text-violet-700 border-violet-200; }
.pill-slate { @apply bg-slate-50 text-slate-700 border-slate-200; }
.pill-orange { @apply bg-orange-50 text-orange-700 border-orange-200; }
.pill-purple { @apply bg-purple-50 text-purple-700 border-purple-200; }
.pill-green { @apply bg-green-50 text-green-700 border-green-200; }
.pill-teal { @apply bg-teal-50 text-teal-700 border-teal-200; }
.pill-sky { @apply bg-sky-50 text-sky-700 border-sky-200; }
.pill-zinc { @apply bg-zinc-50 text-zinc-700 border-zinc-200; }

/* Stage progress */
.stage-pill { @apply px-2 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wider; }

.gradient-mesh {
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(63, 99, 255, 0.15), transparent),
              radial-gradient(ellipse 60% 50% at 80% 110%, rgba(99, 137, 255, 0.1), transparent);
}

.shadow-card { box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.04); }

table.crm thead th { @apply text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500 px-3 py-2.5 border-b border-slate-200 bg-slate-50/50; }
table.crm tbody td { @apply px-3 py-3 text-sm text-slate-700 border-b border-slate-100; }
table.crm tbody tr:hover { background: rgba(63, 99, 255, 0.025); }

.btn { @apply inline-flex items-center gap-1.5 text-sm font-medium px-3 py-1.5 rounded-lg transition-all; }
.btn-primary { @apply bg-brand-600 text-white hover:bg-brand-700 shadow-sm; }
.btn-secondary { @apply bg-white border border-slate-300 text-slate-700 hover:bg-slate-50; }
.btn-ghost { @apply text-slate-600 hover:bg-slate-100; }
.btn-danger { @apply bg-rose-600 text-white hover:bg-rose-700; }
.btn-sm { @apply text-xs px-2.5 py-1; }

.input { @apply w-full text-sm bg-white border border-slate-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-500/30 focus:border-brand-500; }
.label { @apply block text-xs font-medium text-slate-600 mb-1.5; }

.card { @apply bg-white border border-slate-200 rounded-xl shadow-card; }
.card-pad { @apply p-5; }
.card-header { @apply px-5 py-3.5 border-b border-slate-200 flex items-center justify-between; }

/* Marketing landing */
.hero-grid {
  background-image: linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 60px 60px;
}