/* ═══════════════════════════════════════════════════════════════
   KanbanCW — Chatwoot Dark Theme
   background #161619 | surface #1E1E23 | surfaceHover #252730
   surfaceActive #2C2E45 | border #313442 | primary #417BBF
   text #DFE0E1 | textSecondary #A2AAB1 | textMuted #7B8088
   ═══════════════════════════════════════════════════════════════ */

:root {
  --kb-bg: #161619;
  --kb-surface: #1E1E23;
  --kb-surface-hover: #252730;
  --kb-surface-active: #2C2E45;
  --kb-border: #313442;
  --kb-primary: #417BBF;
  --kb-text: #DFE0E1;
  --kb-text-2: #A2AAB1;
  --kb-text-muted: #7B8088;
  --kb-card: #1A1B22;
}

/* ── 1. ROOT ──────────────────────────────────────────────────── */
html, body, #root {
  background-color: var(--kb-bg) !important;
  color: var(--kb-text) !important;
}

/* ── 2. PAGE / BOARD WRAPPERS ─────────────────────────────────── */
.bg-gray-50,
.bg-gray-100,
.bg-gray-50\/50 {
  background-color: var(--kb-bg) !important;
}

[class*="h-screen"][class*="bg-gray"],
[class*="min-h-screen"][class*="bg-gray"],
.flex-1.bg-gray-100,
.flex.h-screen.bg-gray-100,
.h-screen.flex.flex-col.bg-gray-50,
.h-screen.flex.flex-col.bg-gray-100 {
  background-color: var(--kb-bg) !important;
}

/* Board horizontal scroll area */
.flex-1.overflow-x-auto,
.flex.gap-4.overflow-x-auto,
[class*="overflow-x-auto"][class*="p-"] {
  background-color: var(--kb-bg) !important;
}

/* ── 3. KANBAN COLUMNS (torres) ───────────────────────────────── */
/* Base: dark surface. Tint via dark-columns.js + data-kb-accent */
.kb-column,
[class*="min-w-[280px]"].flex.flex-col.rounded-lg {
  background-color: var(--kb-surface) !important;
  border: 1px solid var(--kb-border) !important;
  box-shadow: inset 3px 0 0 0 var(--kb-column-accent, var(--kb-primary)) !important;
}

.kb-column > .kb-column-header,
[class*="min-w-[280px]"] > div:first-child {
  background-color: var(--kb-surface-hover) !important;
  border-color: var(--kb-border) !important;
  border-bottom: 1px solid var(--kb-border) !important;
}

/* Drop zone (corpo da coluna) */
[class*="min-w-[280px]"] > div:last-child,
[class*="min-w-[280px]"] [class*="overflow-y-auto"] {
  background-color: transparent !important;
}

[class*="min-w-[280px]"] [class*="isDraggingOver"],
[class*="min-w-[280px]"] .bg-blue-100\/50 {
  background-color: color-mix(in srgb, var(--kb-primary) 22%, var(--kb-surface)) !important;
}

/* Título e textos do header da coluna */
[class*="min-w-[280px]"] h3,
[class*="min-w-[280px]"] .font-semibold,
[class*="min-w-[280px]"] .text-gray-800,
[class*="min-w-[280px]"] .text-gray-900,
[class*="min-w-[280px]"] .text-gray-700 {
  color: var(--kb-text) !important;
}

[class*="min-w-[280px]"] .text-gray-600,
[class*="min-w-[280px]"] .text-gray-500 {
  color: var(--kb-text-2) !important;
}

[class*="min-w-[280px]"] .text-gray-400 {
  color: var(--kb-text-muted) !important;
}

/* Badge contador de cards no header */
[class*="min-w-[280px]"] .bg-white.rounded-full,
[class*="min-w-[280px]"] span.bg-white {
  background-color: var(--kb-surface-active) !important;
  color: var(--kb-text) !important;
  border: 1px solid var(--kb-border) !important;
  box-shadow: none !important;
}

/* Estado vazio */
[class*="min-w-[280px]"] .border-dashed {
  border-color: var(--kb-border) !important;
  color: var(--kb-text-muted) !important;
  background-color: transparent !important;
}

/* Botão selecionar todos na coluna */
[class*="min-w-[280px]"] .text-purple-700.bg-purple-100 {
  background-color: color-mix(in srgb, #8B5CF6 18%, var(--kb-surface)) !important;
  color: #c4b5fd !important;
}
[class*="min-w-[280px]"] .hover\:bg-purple-200:hover {
  background-color: color-mix(in srgb, #8B5CF6 28%, var(--kb-surface-hover)) !important;
}

/* ── 4. CARDS DE CONVERSA (dentro das colunas) ────────────────── */
[class*="min-w-[280px]"] .bg-white.rounded-lg,
[class*="min-w-[280px]"] [class*="rounded-lg"].border,
[class*="min-w-[280px]"] [class*="rounded-lg"][class*="border-gray"] {
  background-color: var(--kb-card) !important;
  border-color: var(--kb-border) !important;
}

[class*="min-w-[280px]"] .bg-white.rounded-lg:hover,
[class*="min-w-[280px]"] [class*="rounded-lg"].border:hover {
  background-color: var(--kb-surface-hover) !important;
  border-color: color-mix(in srgb, var(--kb-column-accent, var(--kb-primary)) 35%, var(--kb-border)) !important;
}

[class*="min-w-[280px]"] .text-sm.font-medium,
[class*="min-w-[280px]"] p.text-sm {
  color: var(--kb-text) !important;
}

[class*="min-w-[280px]"] .text-xs,
[class*="min-w-[280px]"] span.text-xs {
  color: var(--kb-text-2) !important;
}

/* Avatar fallback */
[class*="min-w-[280px]"] .bg-blue-500.rounded-full {
  background-color: var(--kb-primary) !important;
}

/* ── 5. bg-white GLOBAL (exceto colunas já tratadas) ──────────── */
.bg-white {
  background-color: var(--kb-surface) !important;
}

/* ── 6. TOP BAR / HEADER DO BOARD ─────────────────────────────── */
.border-b.border-gray-200,
[class*="border-gray-200"][class*="bg-white"],
header.bg-white,
.bg-white.border-b {
  background-color: var(--kb-surface) !important;
  border-color: var(--kb-border) !important;
}

/* ── 7. MODAIS ────────────────────────────────────────────────── */
.fixed.inset-0.bg-black\/50,
.fixed.inset-0[class*="bg-black"] {
  background-color: rgba(0, 0, 0, 0.72) !important;
}

[class*="shadow-xl"][class*="rounded"],
[class*="shadow-2xl"][class*="rounded"],
[class*="shadow-lg"][class*="rounded-lg"],
[class*="shadow-lg"][class*="rounded-xl"] {
  background-color: var(--kb-surface) !important;
  border: 1px solid var(--kb-border) !important;
  color: var(--kb-text) !important;
}

[class*="shadow-xl"] [class*="border-b"],
[class*="shadow-2xl"] [class*="border-b"],
[class*="shadow-lg"] [class*="border-b"] {
  background-color: var(--kb-surface) !important;
  border-color: var(--kb-border) !important;
}

[class*="shadow-xl"] [class*="p-3"][class*="border"],
[class*="shadow-xl"] [class*="p-4"][class*="border"],
[class*="shadow-2xl"] [class*="p-3"][class*="border"],
[class*="shadow-2xl"] [class*="p-4"][class*="border"] {
  background-color: var(--kb-bg) !important;
  border-color: var(--kb-border) !important;
}

/* ── 8. DROPDOWNS / MENUS ─────────────────────────────────────── */
[class*="absolute"][class*="bg-white"],
[class*="absolute"][class*="rounded"][class*="shadow"],
[class*="absolute"][class*="border"][class*="shadow"] {
  background-color: var(--kb-surface) !important;
  border-color: var(--kb-border) !important;
}

[class*="absolute"] button,
[class*="absolute"] a,
[class*="absolute"] li,
[class*="absolute"] span {
  color: var(--kb-text) !important;
}

[class*="absolute"] button:hover,
[class*="absolute"] a:hover,
[class*="absolute"] .hover\:bg-blue-50:hover,
[class*="absolute"] .hover\:bg-gray-50:hover,
[class*="absolute"] .hover\:bg-gray-100:hover {
  background-color: var(--kb-surface-hover) !important;
}

/* ── 9. INPUTS ─────────────────────────────────────────────────── */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background-color: var(--kb-card) !important;
  color: var(--kb-text) !important;
  border-color: var(--kb-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--kb-text-muted) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--kb-primary) !important;
  box-shadow: 0 0 0 2px rgba(65, 123, 191, 0.25) !important;
  outline: none !important;
}

/* ── 10. TEXTO GLOBAL ─────────────────────────────────────────── */
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-black {
  color: var(--kb-text) !important;
}

.text-gray-600,
.text-gray-300 {
  color: var(--kb-text-2) !important;
}

.text-gray-500,
.text-gray-400 {
  color: var(--kb-text-muted) !important;
}

/* ── 11. BORDAS ───────────────────────────────────────────────── */
.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: var(--kb-border) !important;
}

/* ── 12. PASTÉIS → VERSÕES ESCURAS (fallback sem cor custom) ─── */
[class*="min-w-[280px]"].bg-gray-50,
[class*="min-w-[280px]"].bg-blue-50,
[class*="min-w-[280px]"].bg-yellow-50,
[class*="min-w-[280px]"].bg-green-50 {
  background-color: var(--kb-surface) !important;
}

[class*="min-w-[280px]"] .bg-gray-100,
[class*="min-w-[280px]"] .bg-blue-100,
[class*="min-w-[280px]"] .bg-yellow-100,
[class*="min-w-[280px]"] .bg-green-100 {
  background-color: var(--kb-surface-hover) !important;
}

.bg-blue-50    { background-color: color-mix(in srgb, #417BBF 12%, var(--kb-bg)) !important; }
.bg-blue-100   { background-color: color-mix(in srgb, #417BBF 20%, var(--kb-surface)) !important; }
.bg-green-50   { background-color: color-mix(in srgb, #22C55E 12%, var(--kb-bg)) !important; }
.bg-green-100  { background-color: color-mix(in srgb, #22C55E 18%, var(--kb-surface)) !important; }
.bg-yellow-50  { background-color: color-mix(in srgb, #F59E0B 12%, var(--kb-bg)) !important; }
.bg-yellow-100 { background-color: color-mix(in srgb, #F59E0B 18%, var(--kb-surface)) !important; }
.bg-red-50     { background-color: color-mix(in srgb, #EF4444 12%, var(--kb-bg)) !important; }
.bg-red-100    { background-color: color-mix(in srgb, #EF4444 18%, var(--kb-surface)) !important; }
.bg-orange-50  { background-color: color-mix(in srgb, #F97316 12%, var(--kb-bg)) !important; }
.bg-orange-100 { background-color: color-mix(in srgb, #F97316 18%, var(--kb-surface)) !important; }
.bg-purple-50  { background-color: color-mix(in srgb, #8B5CF6 12%, var(--kb-bg)) !important; }
.bg-purple-100 { background-color: color-mix(in srgb, #8B5CF6 18%, var(--kb-surface)) !important; }
.bg-purple-200 { background-color: color-mix(in srgb, #8B5CF6 24%, var(--kb-surface-hover)) !important; }
.bg-indigo-50  { background-color: color-mix(in srgb, #6366F1 12%, var(--kb-bg)) !important; }
.bg-indigo-100 { background-color: color-mix(in srgb, #6366F1 18%, var(--kb-surface)) !important; }
.bg-gray-50    { background-color: var(--kb-bg) !important; }
.bg-gray-100   { background-color: var(--kb-surface) !important; }
.bg-gray-200   { background-color: var(--kb-surface-hover) !important; }
.bg-gray-300   { background-color: var(--kb-surface-active) !important; }

.text-blue-700, .text-blue-600   { color: #7eb3e8 !important; }
.text-green-700, .text-green-600 { color: #4ade80 !important; }
.text-red-700, .text-red-600     { color: #f87171 !important; }
.text-orange-700, .text-orange-600 { color: #fb923c !important; }
.text-purple-700, .text-purple-600 { color: #c4b5fd !important; }
.text-indigo-700, .text-indigo-600 { color: #a5b4fc !important; }
.text-yellow-700, .text-yellow-600 { color: #facc15 !important; }

/* ── 13. BOTÕES SECUNDÁRIOS ───────────────────────────────────── */
.bg-white.border.border-gray-300,
[class*="bg-white"][class*="border-gray-300"],
[class*="bg-gray-100"][class*="text-gray-700"] {
  background-color: var(--kb-surface-hover) !important;
  border-color: var(--kb-border) !important;
  color: var(--kb-text) !important;
}

.hover\:bg-white:hover,
.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover {
  background-color: var(--kb-surface-hover) !important;
}

/* ── 14. TABELAS ────────────────────────────────────────────────── */
th, thead tr {
  background-color: var(--kb-surface) !important;
  color: var(--kb-text-2) !important;
  border-color: var(--kb-border) !important;
}

td {
  border-color: var(--kb-border) !important;
}

tr:hover {
  background-color: var(--kb-surface-hover) !important;
}

/* ── 15. SOMBRAS E SCROLLBAR ────────────────────────────────────── */
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

* {
  scrollbar-color: var(--kb-border) var(--kb-bg);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--kb-bg); }
::-webkit-scrollbar-thumb { background: var(--kb-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--kb-primary); }