/* ==========================================================================
   MD CRM — Humanized Clean Theme v4
   Approach: Only override what's visually broken.
   Do NOT touch --color-accent (it controls sidebar active state correctly).
   Focus on: fonts, background, border, button style, sidebar structure.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700&display=swap');

/* ============================================================
   1. TYPOGRAPHY — Replace "Atkinson Hyperlegible" with Inter
   ============================================================ */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body, button, input, select, textarea, h1, h2, h3, h4, h5, p, span, a, li, label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif !important;
}

/* ============================================================
   2. BACKGROUND — Remove bege/vintage, use clean neutral
   The app default is #faf9f6 (warm beige). We want neutral gray.
   ============================================================ */
:root:root:root {
  --color-bg: #F4F6F9 !important;
  --color-surface: #FFFFFF !important;
  --color-surface-elevated: #EEF1F6 !important;
  --color-border: #DDE2EC !important;
  --color-border-strong: #B6C0D3 !important;
  --color-text: #1C2333 !important;
  --color-text-muted: #5C697E !important;
  --color-text-subtle: #8C99AE !important;

  /* RADIUS — Apple style, slightly softer */
  --radius-sm: 5px !important;
  --radius-md: 8px !important;
  --radius-lg: 11px !important;
  --radius-xl: 14px !important;

  /* SHADOWS — Neutral (remove warm brown tint) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04) !important;
  --shadow-lg: 0 12px 32px -6px rgba(0, 0, 0, 0.10), 0 4px 12px -2px rgba(0, 0, 0, 0.06) !important;
}

/* Override Tailwind bg-background class */
html body, .bg-background, [class*="bg-background"] {
  background-color: #F4F6F9 !important;
}
.bg-surface, [class*="bg-surface"] {
  background-color: #FFFFFF !important;
}
.bg-muted, .bg-secondary {
  background-color: #EEF1F6 !important;
}

/* ============================================================
   3. SIDEBAR — Override bege to clean white with slate divider
   The sidebar uses: nav[aria-label="Navegação principal"] inside a parent aside
   ============================================================ */

/* Outer sidebar wrapper */
aside,
[class*="sidebar"],
div:has(> nav[aria-label="Navegação principal"]) {
  background-color: #FFFFFF !important;
  border-right: 1px solid #DDE2EC !important;
}

/* Nav container inside sidebar */
nav[aria-label="Navegação principal"] {
  background-color: #FFFFFF !important;
}

/* Inactive link items in sidebar */
nav[aria-label="Navegação principal"] a.text-muted-foreground {
  color: #5C697E !important;
  background-color: transparent !important;
}
nav[aria-label="Navegação principal"] a.text-muted-foreground:hover {
  background-color: #EEF1F6 !important;
  color: #1C2333 !important;
}

/* Active link (Inbox, etc) */
nav[aria-label="Navegação principal"] a.bg-accent {
  background-color: var(--color-accent) !important;
  color: var(--color-accent-fg, #fff) !important;
  font-weight: 600 !important;
}

/* Section buttons (Atendimento, CRM, Agente de IA, Canais) */
nav[aria-label="Navegação principal"] button.text-muted-foreground {
  color: #8C99AE !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background-color: transparent !important;
}
nav[aria-label="Navegação principal"] button.text-muted-foreground:hover {
  background-color: transparent !important;
  color: #5C697E !important;
}

/* ============================================================
   4. TOPBAR / HEADER — White, subtle bottom border
   ============================================================ */
header,
[data-testid="header"],
.sticky.top-0 {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #DDE2EC !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Top announcement/alert bar */
div[class*="bg-destructive"],
div[class*="bg-warning"],
[class*="alert-bar"],
.fixed.top-0.left-0.right-0,
.fixed.inset-x-0.top-0 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
}

/* ============================================================
   5. INPUTS — Apple Human Interface
   ============================================================ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 7px !important;
  color: #1C2333 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  box-shadow: none !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
}
input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select:focus,
textarea:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent) !important;
  outline: none !important;
}

/* ============================================================
   6. BUTTONS — Clean, no robotic effects
   ============================================================ */
button, [role="button"] {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease !important;
}

button:active:not([disabled]) {
  transform: scale(0.985) !important;
}

/* Kill any pulsing/animation effects */
[class*="animate-pulse"], [class*="animate-ping"], [class*="animate-spin"]:not(.loading-spinner) {
  animation: none !important;
}

/* ============================================================
   7. CARDS & PANELS
   ============================================================ */
.rounded-xl.border,
.rounded-lg.border {
  background-color: #FFFFFF !important;
  border-color: #DDE2EC !important;
}

/* Right panel (contact detail, empty state) */
.flex.h-full.flex-col.items-center.justify-center,
.flex.flex-1.items-center.justify-center,
[class*="empty-state"],
[class*="h-full"][class*="flex"][class*="items-center"] {
  background-color: #F4F6F9 !important;
}

/* ============================================================
   8. KANBAN
   ============================================================ */
[draggable="true"] {
  background-color: #FFFFFF !important;
  border-color: #DDE2EC !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  transition: box-shadow 0.15s, transform 0.15s !important;
}
[draggable="true"]:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   9. TABLES
   ============================================================ */
thead th, th {
  background-color: #F4F6F9 !important;
  color: #8C99AE !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-bottom-color: #DDE2EC !important;
}
tbody tr:hover td {
  background-color: #F8FAFC !important;
}
td { border-bottom-color: #EEF1F5 !important; }

/* ============================================================
   10. LOGO
   ============================================================ */
[data-testid="logo-da-fachada"],
img[src*="logo.png"] {
  filter: none !important;
  max-height: 72px !important;
  object-fit: contain !important;
}

/* ============================================================
   11. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ============================================================
   12. FOCUS VISIBLE — Clean ring, no huge glow
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 15%, transparent) !important;
}

/* ============================================================
   ALERT / NOTIFICATION BARS — Make them prominent & visible
   App uses: .bg-red-50\/80 .border-red-200 for disconnect alerts
   ============================================================ */

/* Red alert bar (WhatsApp disconnected, critical errors) */
.border-b.border-red-200.bg-red-50\/80,
div[class*='border-red-200'][class*='bg-red-50'],
div[class*='border-b'][class*='border-red-'] {
  background-color: #FEE2E2 !important; /* solid red-100 */
  border-bottom: 1px solid #FCA5A5 !important; /* red-300 */
  border-top: 2px solid #EF4444 !important; /* red-500 — strong top accent */
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Text inside alert bar */
.border-b.border-red-200.bg-red-50\/80 span,
div[class*='border-red-200'][class*='bg-red-50'] span,
div[class*='border-b'][class*='border-red-'] span {
  color: #991B1B !important; /* red-800 — strong readable red */
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
}

/* Alert bar icon if present */
.border-b.border-red-200.bg-red-50\/80 svg,
div[class*='border-red-200'][class*='bg-red-50'] svg {
  color: #DC2626 !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Ver conexões button inside alert bar */
.border-b.border-red-200.bg-red-50\/80 a,
div[class*='border-red-200'][class*='bg-red-50'] a[class*='border-red'],
div[class*='border-b'][class*='border-red-'] a {
  background-color: #FFFFFF !important;
  border: 1.5px solid #EF4444 !important;
  color: #DC2626 !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  transition: background-color 0.12s ease, color 0.12s ease !important;
}
.border-b.border-red-200.bg-red-50\/80 a:hover,
div[class*='border-red-200'][class*='bg-red-50'] a[class*='border-red']:hover,
div[class*='border-b'][class*='border-red-'] a:hover {
  background-color: #FEF2F2 !important;
  border-color: #DC2626 !important;
  color: #991B1B !important;
}

/* General warning/amber alert bars */
div[class*='border-yellow-'][class*='bg-yellow-'],
div[class*='border-amber-'][class*='bg-amber-'] {
  background-color: #FEF9C3 !important;
  border-bottom: 1px solid #FCD34D !important;
  border-top: 2px solid #F59E0B !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12) !important;
}

/* General info/blue alert bars */
div[class*='border-blue-'][class*='bg-blue-'],
div[class*='border-sky-'][class*='bg-sky-'] {
  background-color: #DBEAFE !important;
  border-bottom: 1px solid #93C5FD !important;
  border-top: 2px solid #3B82F6 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12) !important;
}

/* ============================================================
   ALERT / BANNER BAR — High-visibility disconnect/error alerts
   Targets: div.border-b.border-red-200.bg-red-50\/80.px-4.py-2.text-xs
   ============================================================ */

/* Match any top-level alert bar that has border-red-200 AND border-b */
.border-b.border-red-200,
div.border-b.border-red-200 {
  background-color: #FECACA !important;  /* red-200 — visível, impactante */
  border-bottom: 2px solid #F87171 !important;  /* red-400 */
  border-top: 3px solid #DC2626 !important;  /* red-600 strong accent top */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  box-shadow: 0 3px 12px rgba(220, 38, 38, 0.18) !important;
  color: #7F1D1D !important;  /* red-900 — legível */
}

/* Text inside the alert */
.border-b.border-red-200 span,
div.border-b.border-red-200 span {
  color: #7F1D1D !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
}

/* Strong text inside the alert */
.border-b.border-red-200 strong,
div.border-b.border-red-200 strong {
  color: #991B1B !important;
  font-weight: 700 !important;
}

/* Ver conexões link/button inside alert */
.border-b.border-red-200 a,
div.border-b.border-red-200 a {
  background-color: #DC2626 !important;
  border: 1.5px solid #B91C1C !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  padding: 4px 14px !important;
  border-radius: 6px !important;
  font-size: 0.8125rem !important;
  transition: background-color 0.12s ease !important;
}

.border-b.border-red-200 a:hover,
div.border-b.border-red-200 a:hover {
  background-color: #B91C1C !important;
}