/* WCT TECNOLOGIA v4 — harmonized light/dark, WCAG AA, unified red.
html.dark (specificity 0,1,1) beats :root (0,1,0) so dark tokens
always win when the JS adds class="dark" to <html>. */

/* ── Light mode (default) ─────────────────────────────────────────────── */
:root {
  --background: #ffffff !important;
  --foreground: #18181b !important;
  --card: #ffffff !important;
  --card-foreground: #18181b !important;
  --popover: #ffffff !important;
  --popover-foreground: #18181b !important;
  --primary: #c91b15 !important;
  --primary-foreground: #ffffff !important;
  --secondary: #f4f4f5 !important;
  --secondary-foreground: #18181b !important;
  --muted: #f4f4f5 !important;
  --muted-foreground: #71717a !important;
  --accent: #fff1f0 !important;
  --accent-foreground: #991b1b !important;
  --destructive: #c91b15 !important;
  --destructive-foreground: #ffffff !important;
  --border: #e4e4e7 !important;
  --input: #e4e4e7 !important;
  --ring: #c91b15 !important;
  --chart-1: #c91b15 !important;
  --chart-2: #2563eb !important;
  --chart-3: #059669 !important;
  --chart-4: #d97706 !important;
  --chart-5: #7c3aed !important;
  --sidebar: #18181b !important;
  --sidebar-foreground: #fafafa !important;
  --sidebar-primary: #ef4444 !important;
  --sidebar-primary-foreground: #ffffff !important;
  --sidebar-accent: #27272a !important;
  --sidebar-accent-foreground: #fafafa !important;
  --sidebar-border: rgba(255,255,255,0.08) !important;
  --sidebar-ring: #ef4444 !important;
}

/* ── Dark mode — html.dark beats :root in specificity ─────────────────── */
html.dark {
  --background: #09090b !important;
  --foreground: #fafafa !important;
  --card: #18181b !important;
  --card-foreground: #fafafa !important;
  --popover: #27272a !important;
  --popover-foreground: #fafafa !important;
  --primary: #f87171 !important;
  --primary-foreground: #1a0504 !important;
  --secondary: #27272a !important;
  --secondary-foreground: #fafafa !important;
  --muted: #27272a !important;
  --muted-foreground: #a1a1aa !important;
  --accent: #2a1213 !important;
  --accent-foreground: #fecaca !important;
  --destructive: #f87171 !important;
  --destructive-foreground: #1a0504 !important;
  --border: #3f3f46 !important;
  --input: #3f3f46 !important;
  --ring: #f87171 !important;
  --chart-1: #f87171 !important;
  --chart-2: #60a5fa !important;
  --chart-3: #34d399 !important;
  --chart-4: #fbbf24 !important;
  --chart-5: #a78bfa !important;
  --sidebar: #09090b !important;
  --sidebar-foreground: #fafafa !important;
  --sidebar-primary: #f87171 !important;
  --sidebar-primary-foreground: #1a0504 !important;
  --sidebar-accent: #2a1213 !important;
  --sidebar-accent-foreground: #fecaca !important;
  --sidebar-border: #3f3f46 !important;
  --sidebar-ring: #f87171 !important;
}

/* ── Force dark background on root elements ───────────────────────────── */
html.dark,
html.dark body,
html.dark #root {
  background-color: #09090b !important;
  color: #fafafa !important;
}

/* ── Sidebar internal context (always dark regardless of mode) ────────── */
.bg-sidebar {
  --muted-foreground: #a1a1aa !important;
  --foreground: #fafafa !important;
  --primary: #f87171 !important;
  --accent: #2a1213 !important;
  --accent-foreground: #ffffff !important;
}

img[src$="/wct-logo.svg"] { object-fit: contain; max-width: 100%; }

/* ── Dark-mode hard overrides for Tailwind hardcoded classes ──────────── */

/* bg-background is used 120 times — force dark background */
html.dark .bg-background { background-color: var(--background) !important; }
html.dark .bg-background\/50 { background-color: color-mix(in oklab, var(--background) 50%, transparent) !important; }
html.dark .bg-background\/60 { background-color: color-mix(in oklab, var(--background) 60%, transparent) !important; }
html.dark .bg-background\/80 { background-color: color-mix(in oklab, var(--background) 80%, transparent) !important; }
html.dark .bg-background\/95 { background-color: color-mix(in oklab, var(--background) 95%, transparent) !important; }

/* bg-card is used 83 times */
html.dark .bg-card { background-color: var(--card) !important; }
html.dark .bg-card\/50 { background-color: color-mix(in oklab, var(--card) 50%, transparent) !important; }

/* bg-white is used 76 times — force dark card color */
html.dark .bg-white { background-color: var(--card) !important; }
html.dark .bg-white\/60 { background-color: color-mix(in oklab, var(--card) 60%, transparent) !important; }
html.dark .bg-white\/80 { background-color: color-mix(in oklab, var(--card) 80%, transparent) !important; }

/* bg-muted */
html.dark .bg-muted { background-color: var(--muted) !important; }

/* Light gray backgrounds */
html.dark .bg-gray-50 { background-color: var(--muted) !important; }
html.dark .bg-slate-50 { background-color: var(--muted) !important; }
html.dark .bg-slate-100 { background-color: var(--secondary) !important; }
html.dark .bg-gray-100 { background-color: var(--secondary) !important; }
html.dark .bg-zinc-100 { background-color: var(--secondary) !important; }
html.dark .bg-slate-200 { background-color: var(--border) !important; }
html.dark .bg-gray-200 { background-color: var(--border) !important; }

/* Text colors in dark mode */
html.dark .text-foreground { color: var(--foreground) !important; }
html.dark .text-muted-foreground { color: var(--muted-foreground) !important; }
html.dark .text-card-foreground { color: var(--card-foreground) !important; }
html.dark .text-gray-700 { color: #d4d4d8 !important; }
html.dark .text-gray-600 { color: #a1a1aa !important; }
html.dark .text-gray-500 { color: #a1a1aa !important; }
html.dark .text-slate-600 { color: #a1a1aa !important; }
html.dark .text-slate-700 { color: #d4d4d8 !important; }
html.dark .text-slate-500 { color: #a1a1aa !important; }

/* Border colors in dark mode */
html.dark .border-slate-200 { border-color: var(--border) !important; }
html.dark .border-gray-300 { border-color: var(--border) !important; }
html.dark .border-border { border-color: var(--border) !important; }
html.dark .border-input { border-color: var(--input) !important; }

/* Main content area — the white panel visible in the screenshot */
html.dark main { background-color: var(--background) !important; }
html.dark .flex-1 { background-color: var(--background) !important; }
html.dark [class*="overflow-auto"] { background-color: var(--background) !important; }
html.dark [class*="overflow-y-auto"] { background-color: var(--background) !important; }

/* Table */
html.dark table { background-color: var(--card) !important; color: var(--card-foreground) !important; }
html.dark thead { background-color: var(--muted) !important; }
html.dark thead th {
  color: var(--muted-foreground) !important;
  border-color: var(--border) !important;
  background-color: var(--muted) !important;
}
html.dark tbody tr { border-color: var(--border) !important; background-color: var(--card) !important; }
html.dark tbody tr:hover { background-color: var(--accent) !important; }
html.dark td { color: var(--card-foreground) !important; }

/* Inputs */
html.dark input[type="text"],
html.dark input[type="search"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input:not([type]) {
  background-color: var(--input) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}
html.dark input::placeholder { color: var(--muted-foreground) !important; }
html.dark select {
  background-color: var(--input) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}

/* Outline / ghost buttons */
html.dark button[class*="outline"],
html.dark .border-input {
  border-color: var(--border) !important;
  color: var(--foreground) !important;
  background-color: transparent !important;
}
html.dark button[class*="outline"]:hover { background-color: var(--accent) !important; }

/* Badge gray pill */
html.dark .bg-gray-100,
html.dark .bg-slate-100,
html.dark .bg-zinc-100 {
  background-color: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
}

/* Badge green */
html.dark .bg-green-100,
html.dark .bg-emerald-100,
html.dark .bg-green-50,
html.dark .bg-emerald-50 {
  background-color: rgba(16,185,129,0.18) !important;
  color: #6ee7b7 !important;
}
html.dark .text-green-700,
html.dark .text-emerald-700 { color: #6ee7b7 !important; }

/* Pagination */
html.dark [class*="pagination"] button,
html.dark nav button {
  background-color: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
  border-color: var(--border) !important;
}
html.dark [class*="pagination"] [data-state="active"],
html.dark nav button[data-state="active"] {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

/* Header bar */
html.dark header,
html.dark [role="banner"] {
  background-color: var(--background) !important;
  border-color: var(--border) !important;
}

/* Primary CTA button */
html.dark .bg-red-600,
html.dark .bg-primary,
html.dark button[class*="bg-red"] {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

/* Sub-panel / aside */
html.dark [data-slot="sidebar"],
html.dark aside {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
}

/* Scrollbar */
html.dark ::-webkit-scrollbar { width: 8px; height: 8px; }
html.dark ::-webkit-scrollbar-track { background: var(--background); }
html.dark ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

/* Footer */
html.dark footer,
html.dark [class*="footer"] {
  color: var(--muted-foreground) !important;
  background-color: var(--background) !important;
}
html.dark footer a { color: var(--muted-foreground) !important; }
html.dark footer a:hover { color: var(--foreground) !important; }

/* ── Login shell ──────────────────────────────────────────────────────── */
.wct-login-shell {
  --background: #09090b !important;
  --foreground: #fafafa !important;
  --muted: #27272a !important;
  --muted-foreground: #a1a1aa !important;
  --border: rgba(255,255,255,0.10) !important;
  --input: rgba(255,255,255,0.12) !important;
  --card: #18181b !important;
  --card-foreground: #fafafa !important;
  --popover: #27272a !important;
  --popover-foreground: #fafafa !important;
  --secondary: #27272a !important;
  --secondary-foreground: #fafafa !important;
  --primary: #c91b15 !important;
  --primary-foreground: #ffffff !important;
  --ring: #f87171 !important;
  --accent: #2a1213 !important;
  --accent-foreground: #ffffff !important;
  color: #fafafa;
  background: #09090b;
  background-image:
    radial-gradient(ellipse at 50% 85%, rgba(201,27,21,0.07), transparent 65%),
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.wct-login-shell input {
  background: #18181b !important;
  color: #fafafa !important;
  border: 1px solid #3f3f46 !important;
}
.wct-login-shell input:focus {
  border-color: #c91b15 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(201,27,21,0.25) !important;
}
.wct-login-shell .text-primary { color: #f87171 !important; }
.wct-login-shell .max-w-md > .text-center:after {
  content: "WCT TECNOLOGIA";
  display: block;
  margin-top: 14px;
  color: #a1a1aa;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
}
.wct-login-shell .max-w-md > .text-center img { height: 45px; width: auto; max-width: 220px; }
.wct-login-shell .rounded-lg { border-radius: 16px; }
.wct-login-shell [data-state="active"][role="tab"] { background: #2a1213 !important; color: #fff !important; }
.wct-login-shell button[type="submit"] { background: #c91b15 !important; color: #fff !important; }
.wct-login-shell button[type="submit"]:hover { background: #a81611 !important; }
@media (prefers-reduced-motion: reduce) { .wct-login-shell * { animation: none !important; } }
/* ── NUCLEAR OVERRIDE: force dark bg on ALL elements in dark mode ─────── */
/* The compiled bundle uses dynamic class construction so static selectors
   miss some elements. This blanket rule catches any element that would
   otherwise render with a light background in dark mode. */
html.dark * {
  border-color: var(--border) !important;
}
html.dark [class*="bg-white"] { background-color: var(--card) !important; }
html.dark [class*="bg-gray-50"] { background-color: var(--muted) !important; }
html.dark [class*="bg-slate-50"] { background-color: var(--muted) !important; }
html.dark [class*="bg-slate-100"] { background-color: var(--secondary) !important; }
html.dark [class*="bg-gray-100"] { background-color: var(--secondary) !important; }
html.dark [class*="bg-zinc-100"] { background-color: var(--secondary) !important; }
html.dark [class*="text-gray-700"] { color: #d4d4d8 !important; }
html.dark [class*="text-gray-600"] { color: #a1a1aa !important; }
html.dark [class*="text-slate-600"] { color: #a1a1aa !important; }
html.dark [class*="text-slate-700"] { color: #d4d4d8 !important; }
html.dark [class*="border-slate-200"] { border-color: var(--border) !important; }
html.dark [class*="border-gray-300"] { border-color: var(--border) !important; }
/* The main content wrapper — catch it by its structural position */
html.dark > body > #root > div > div:nth-child(2) { background-color: var(--background) !important; }
html.dark > body > #root > div > div:nth-child(2) > div { background-color: var(--background) !important; }
/* Force all direct children of the app root to dark background */
html.dark #root > div { background-color: var(--background) !important; }
html.dark #root > div > div { background-color: var(--background) !important; }
/* ── TARGETED FIX: contacts page header and content area white bg ─────── */
/* The page header uses bg-background but the parent container may not.
Force dark on all structural divs inside #root that lack explicit dark bg. */
html.dark #root > div > div > div { background-color: var(--background) !important; }
html.dark #root > div > div > div > div { background-color: var(--background) !important; }
html.dark #root > div > div > div > div > div { background-color: var(--background) !important; }
/* The flex-1 content wrapper that holds the contacts table */
html.dark .flex-1.min-h-0 { background-color: var(--background) !important; }
html.dark .flex.flex-col.flex-1 { background-color: var(--background) !important; }
html.dark .flex.h-full.min-h-0.flex-1.flex-col { background-color: var(--background) !important; }
html.dark .flex.h-full.min-h-0.w-full.flex-col { background-color: var(--background) !important; }
/* Page header bar with bg-background */
html.dark .flex.flex-shrink-0.items-center.gap-3.border-b { background-color: var(--background) !important; }
html.dark .border-b.border-border.bg-background { background-color: var(--background) !important; }
/* The grow overflow-y-auto container */
html.dark .grow.min-h-0.overflow-y-auto { background-color: var(--background) !important; }
/* Any div with p-6 that is a content area */
html.dark .flex.flex-col.flex-1.w-full.p-6.overflow-y-auto { background-color: var(--background) !important; }
/* Catch-all: any element with bg-background class in dark mode */
html.dark [class*="bg-background"] { background-color: var(--background) !important; }
html.dark [class*="bg-card"] { background-color: var(--card) !important; }
html.dark [class*="bg-muted"] { background-color: var(--muted) !important; }
/* Text color fixes for header title and subtitle */
html.dark h1, html.dark h2, html.dark h3 { color: var(--foreground) !important; }
html.dark p { color: var(--muted-foreground) !important; }
html.dark span { color: inherit !important; }
/* The search input container */
html.dark .flex.items-center.gap-2 { background-color: transparent !important; }