/* FlexiAgent — FlexiFunnels Light Theme (Forced)
   Colors matched to FlexiFunnels Apps page palette */

/* Force light mode — override dark class */
html.dark { color-scheme: light !important; }

/* ═══ Page Background — #f4f5f7 ═══ */
html body { background-color: #f4f5f7 !important; color: #1e293b !important; }

/* ═══ Sidebar — white ═══ */
html aside { background-color: #ffffff !important; border-color: #e5e7eb !important; }

/* ═══ Header / Topbar — white ═══ */
html header, html [class*="topbar"] { background-color: #ffffff !important; border-color: #e5e7eb !important; }

/* ═══ Cards — white with subtle border ═══ */
html [class*="bg-card"], html [class*="rounded-lg"][class*="border"] {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #1e293b !important;
}

/* ═══ All borders — #e5e7eb ═══ */
html [class*="border-border"], html [class*="border-b"], html [class*="border-r"], html [class*="border-l"], html [class*="border-t"] {
  border-color: #e5e7eb !important;
}

/* ═══ Text colors ═══ */
html .text-foreground, html [class*="card-foreground"] { color: #1e293b !important; }
html .text-muted-foreground { color: #64748b !important; }
html h1, html h2, html h3, html h4 { color: #111827 !important; }
html p { color: #4b5563 !important; }
html label { color: #374151 !important; }
html span { color: inherit; }

/* ═══ Sidebar text ═══ */
html .text-sidebar-foreground, html aside a, html aside span { color: #4b5563 !important; }
html aside .text-xs { color: #9ca3af !important; }

/* Sidebar active — green highlight on white */
html aside a[data-active="true"],
html aside a[aria-current="page"] {
  background-color: rgba(34, 197, 94, 0.08) !important;
  color: #16a34a !important;
}
html aside a[data-active="true"] span,
html aside a[aria-current="page"] span {
  color: #16a34a !important;
}
html aside a[data-active="true"] svg,
html aside a[aria-current="page"] svg {
  color: #16a34a !important;
}

/* Sidebar hover */
html aside a:hover {
  background-color: #f4f5f7 !important;
}

/* ═══ Primary — FlexiFunnels Green #22c55e ═══ */
html .bg-primary { background-color: #22c55e !important; color: #ffffff !important; }
html .bg-primary:hover { background-color: #16a34a !important; }
html .text-primary { color: #16a34a !important; }
html .text-sidebar-primary { color: #22c55e !important; }
html .bg-sidebar-primary { background-color: #22c55e !important; color: #ffffff !important; }
html .bg-sidebar-accent { background-color: rgba(34, 197, 94, 0.08) !important; }

/* ═══ Secondary / Muted — #f1f5f9 ═══ */
html .bg-secondary { background-color: #f1f5f9 !important; color: #1e293b !important; }
html .bg-muted { background-color: #f1f5f9 !important; }
html .text-muted { color: #64748b !important; }

/* ═══ Input fields — white with #e5e7eb border ═══ */
html input, html textarea, html select {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #1e293b !important;
}
html input::placeholder, html textarea::placeholder {
  color: #9ca3af !important;
}

/* ═══ Buttons ═══ */
html button[class*="bg-primary"], html a[class*="bg-primary"] {
  background-color: #22c55e !important;
  color: #ffffff !important;
}
html button[class*="bg-primary"]:hover, html a[class*="bg-primary"]:hover {
  background-color: #16a34a !important;
}
html button[class*="bg-secondary"], html a[class*="bg-secondary"] {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
}
html button[class*="bg-secondary"]:hover, html a[class*="bg-secondary"]:hover {
  background-color: #e2e8f0 !important;
}

/* ═══ Popover / Dropdown — white ═══ */
html [class*="bg-popover"] { background-color: #ffffff !important; color: #1e293b !important; }
html [role="listbox"], html [role="menu"] { background-color: #ffffff !important; }
html [role="option"]:hover, html [role="menuitem"]:hover { background-color: #f4f5f7 !important; }

/* ═══ Dialog / Modal ═══ */
html [role="dialog"] { background-color: #ffffff !important; color: #1e293b !important; }
html [class*="bg-background"] { background-color: #f4f5f7 !important; }

/* ═══ Connected badge ═══ */
html .bg-green-500\/20 { background-color: rgba(34, 197, 94, 0.12) !important; }
html .text-green-400, html .text-green-500 { color: #16a34a !important; }

/* ═══ Tab buttons ═══ */
html [role="tab"][data-state="active"] {
  background-color: #22c55e !important;
  color: #ffffff !important;
}
html [role="tab"] {
  color: #64748b !important;
}
html [role="tab"]:hover {
  color: #1e293b !important;
}

/* ═══ System health cards inner ═══ */
html [class*="bg-card"] [class*="text-muted"] { color: #64748b !important; }
html [class*="bg-card"] [class*="font-bold"], html [class*="bg-card"] [class*="font-semibold"] { color: #111827 !important; }

/* ═══ Admin badge ═══ */
html .bg-green-600 { background-color: #22c55e !important; }

/* ═══ Connected status footer ═══ */
html aside .border-t { border-color: #e5e7eb !important; background-color: #ffffff !important; }

/* ═══ Tables ═══ */
html table { background-color: #ffffff !important; }
html th { background-color: #f9fafb !important; color: #374151 !important; border-color: #e5e7eb !important; }
html td { color: #1e293b !important; border-color: #e5e7eb !important; }
html tr:hover td { background-color: #f4f5f7 !important; }

/* ═══ Scrollbar (webkit) ═══ */
html ::-webkit-scrollbar { width: 8px; }
html ::-webkit-scrollbar-track { background: #f4f5f7; }
html ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
html ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ═══ Logo replacement ═══ */
aside img[alt="GoClaw"], aside img[alt="FlexiClaw"], aside img[alt="FlexiAgent"] {
  content: url('/custom/flexiclaw-icon.svg') !important;
}

/* ═══ Brand name ═══ */
aside .text-lg.font-bold.tracking-tight {
  font-size: 0 !important;
  line-height: 0 !important;
}
aside .text-lg.font-bold.tracking-tight::after {
  content: 'FlexiAgent';
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #22c55e !important;
}

/* ═══ Ring / focus — green ═══ */
html *:focus-visible { outline-color: #22c55e !important; }

/* ═══ Links ═══ */
html a:not([class]) { color: #16a34a; }
html a:not([class]):hover { color: #15803d; }

/* ═══ Badges / Tags ═══ */
html [class*="badge"][class*="default"] { background-color: #f1f5f9 !important; color: #64748b !important; }
html [class*="badge"][class*="success"], html [class*="badge"][class*="green"] { background-color: rgba(34, 197, 94, 0.12) !important; color: #16a34a !important; }

/* ═══ Tooltip ═══ */
html [role="tooltip"] { background-color: #111827 !important; color: #ffffff !important; }

/* ═══ Code blocks ═══ */
html pre, html code { background-color: #f1f5f9 !important; color: #1e293b !important; }

/* ═══ Skeleton loaders ═══ */
html [class*="skeleton"], html [class*="animate-pulse"] { background-color: #e5e7eb !important; }

/* ═══ Hide dark mode toggle (force light) ═══ */
button[class*="theme"], [aria-label*="theme"], [aria-label*="Theme"] {
  display: none !important;
}