/* ============================================================
   Maitha AI — LangFlow Custom Theme
   Formato: HSL sem wrapper hsl() (padrão Tailwind v3 / shadcn)
   ============================================================ */

/* ---- Light Mode ---- */
:root {
  --primary: 200 98% 39%;
  --primary-hover: 200 98% 33%;
  --primary-foreground: 0 0% 100%;
  --accent: 38 92% 50%;
  --accent-foreground: 0 0% 100%;
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 200 98% 39%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --sidebar-background: 217 33% 17%;
  --sidebar-foreground: 210 40% 92%;
  --sidebar-primary: 200 98% 39%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 215 28% 22%;
  --sidebar-accent-foreground: 210 40% 92%;
  --sidebar-border: 215 25% 25%;
  --sidebar-ring: 200 98% 39%;
  --radius: 0.625rem;
}

/* ---- Dark Mode ---- */
.dark {
  --primary: 198 93% 60%;
  --primary-hover: 198 93% 54%;
  --primary-foreground: 0 0% 100%;
  --background: 222 47% 11%;
  --foreground: 210 40% 92%;
  --card: 217 33% 17%;
  --card-foreground: 210 40% 92%;
  --muted: 215 28% 22%;
  --muted-foreground: 215 20% 65%;
  --border: 215 25% 25%;
  --input: 215 25% 25%;
  --ring: 198 93% 60%;
  --secondary: 215 28% 22%;
  --secondary-foreground: 210 40% 92%;
  --sidebar-background: 222 47% 9%;
  --sidebar-foreground: 210 40% 92%;
  --sidebar-primary: 198 93% 60%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 217 33% 17%;
  --sidebar-accent-foreground: 210 40% 92%;
  --sidebar-border: 215 25% 20%;
  --sidebar-ring: 198 93% 60%;
}

/* ---- Typography ---- */
body, html, * {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700;
}

/* ---- Page title ---- */
head title { content: "Maitha AI"; }

/* ---- Primary buttons ---- */
[class*="bg-primary"]:not([class*="foreground"]) {
  background-color: hsl(200, 98%, 39%) !important;
}
.dark [class*="bg-primary"]:not([class*="foreground"]) {
  background-color: hsl(198, 93%, 60%) !important;
}

/* ---- Sidebar ---- */
[class*="sidebar"]:not([class*="foreground"]):not([class*="text"]) {
  background-color: hsl(217, 33%, 17%) !important;
}
.dark [class*="sidebar"]:not([class*="foreground"]):not([class*="text"]) {
  background-color: hsl(222, 47%, 9%) !important;
}

/* ---- Focus ring ---- */
:focus-visible {
  outline-color: hsl(200, 98%, 39%) !important;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: hsl(217, 33%, 17%); }
::-webkit-scrollbar-thumb {
  background: hsl(215, 25%, 30%);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: hsl(200, 98%, 39%); }

/* ============================================================
   Login Page — Logo Replacement
   The LangFlow login logo SVG has classes: mb-4 h-10 w-10 scale-[1.5]
   The container has classes: w-72 flex-col items-center justify-center gap-2
   ============================================================ */

/* Hide the LangFlow wave/swoosh SVG logo on the login page */
/* The JS MutationObserver in index.html will replace it with the Maitha logo PNG */
.w-72.flex-col svg.h-10,
.w-72.flex-col svg.w-10,
.w-72 > svg {
  display: none !important;
  visibility: hidden !important;
}