/* ============================================================
   GovLens AI Studio — modern login (v3 — DOM-correct)
   Card root is .flex.w-72 (not <form>, which is page wrapper).
   ============================================================ */

/* === SHADCN VARS — split by page ===
   Login page (form.h-screen present):   LIGHT theme + GovLens green
   In-app (no auth form):                DARK theme + GovLens green accents */

html:has(form.h-screen),
html:has(form.h-screen) body,
html:has(form.h-screen) .light,
html:has(form.h-screen) .dark {
  --background: 0 0% 100% !important;
  --foreground: 165 30% 14% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 165 30% 14% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 165 30% 14% !important;
  --primary: 165 76% 24% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 159 30% 94% !important;
  --secondary-foreground: 165 30% 14% !important;
  --muted: 158 25% 96% !important;
  --muted-foreground: 158 12% 40% !important;
  --accent: 159 69% 36% !important;
  --accent-foreground: 0 0% 100% !important;
  --border: 158 25% 88% !important;
  --input: 158 25% 88% !important;
  --ring: 165 76% 24% !important;
}

html:not(:has(form.h-screen)),
html:not(:has(form.h-screen)) body,
html:not(:has(form.h-screen)) .light,
html:not(:has(form.h-screen)) .dark {
  --background: 220 13% 9% !important;            /* near-black */
  --foreground: 0 0% 95% !important;              /* near-white */
  --card: 220 13% 12% !important;
  --card-foreground: 0 0% 95% !important;
  --popover: 220 13% 12% !important;
  --popover-foreground: 0 0% 95% !important;
  --primary: 159 69% 45% !important;              /* brighter green for dark bg */
  --primary-foreground: 0 0% 100% !important;
  --secondary: 220 13% 16% !important;
  --secondary-foreground: 0 0% 95% !important;
  --muted: 220 13% 14% !important;
  --muted-foreground: 220 9% 60% !important;
  --accent: 159 69% 36% !important;
  --accent-foreground: 0 0% 100% !important;
  --border: 220 13% 20% !important;
  --input: 220 13% 20% !important;
  --ring: 159 69% 45% !important;
}

/* In-app body bg explicit (some Tailwind utilities ignore --background) */
html:not(:has(form.h-screen)) body {
  background-color: hsl(220 13% 9%) !important;
  color: hsl(0 0% 95%) !important;
}

/* === LOGIN PAGE — dark gradient hero === */
body:has(form input[type="password"]) {
  background: linear-gradient(135deg, #052e23 0%, #0F6E56 45%, #052e23 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}
body:has(form input[type="password"]) .bg-muted,
body:has(form input[type="password"]) [class*="bg-muted"] { background: transparent !important; }

/* Animated glow blobs */
body:has(form input[type="password"])::before {
  content: ''; position: fixed; width: 800px; height: 800px;
  top: -300px; left: -200px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(29,158,117,0.35) 0%, transparent 60%);
  animation: gl-float-1 18s ease-in-out infinite;
}
body:has(form input[type="password"])::after {
  content: ''; position: fixed; width: 700px; height: 700px;
  bottom: -250px; right: -200px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(159,225,203,0.18) 0%, transparent 60%);
  animation: gl-float-2 22s ease-in-out infinite;
}
@keyframes gl-float-1 { 0%,100% { transform: translate(0,0);} 50% { transform: translate(60px,40px);} }
@keyframes gl-float-2 { 0%,100% { transform: translate(0,0);} 50% { transform: translate(-50px,-30px);} }

/* Hide Langflow chevron */
svg.mb-4.h-10.w-10,
svg.mb-4.h-10.w-10.scale-\[1\.5\],
.flex.w-72 > svg:first-child {
  display: none !important;
}

/* === THE CARD (.flex.w-72 is the actual card column) === */
body:has(form input[type="password"]) .flex.w-72 {
  width: 420px !important;
  max-width: 92vw !important;
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-radius: 24px !important;
  padding: 44px 40px 36px !important;
  box-shadow: 0 32px 64px -16px rgba(5,46,35,0.5), 0 0 0 1px rgba(15,110,86,0.08) !important;
  position: relative !important;
  z-index: 1 !important;
  gap: 12px !important;
}

/* GovLens wordmark at top of card */
body:has(form input[type="password"]) .flex.w-72::before {
  content: 'GovLens';
  display: block;
  text-align: center;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #0F6E56 0%, #1D9E75 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 4px;
  width: 100%;
}

/* The SPAN heading "Sign in to GovLens AI Studio" — repurpose for AI STUDIO + subtitle */
body:has(form input[type="password"]) .flex.w-72 > span {
  font-size: 0 !important;
  color: transparent !important;
  margin: 0 0 24px 0 !important;
  display: block !important;
  position: relative !important;
  width: 100% !important;
  text-align: center !important;
  line-height: 1 !important;
}
body:has(form input[type="password"]) .flex.w-72 > span::before {
  content: 'AI STUDIO';
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.45em !important;
  color: #1D9E75 !important;
  text-transform: uppercase;
  margin-bottom: 14px;
}
body:has(form input[type="password"]) .flex.w-72 > span::after {
  content: 'Sign in to your data intelligence workspace';
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px !important;
  color: #5A7A6E !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Card footer */
body:has(form input[type="password"]) .flex.w-72::after {
  content: 'Malinaw ang datos. Malinaw ang desisyon.\A by Origin3 Solutions';
  white-space: pre;
  display: block;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  line-height: 1.6;
  color: #9AAFA6;
  text-align: center;
  letter-spacing: 0.02em;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,110,86,0.08);
}

/* === FORM FIELDS === */
body:has(form input[type="password"]) .flex.w-72 label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #1A2E26 !important;
  margin-bottom: 6px !important;
}
body:has(form input[type="password"]) .flex.w-72 input[type="text"],
body:has(form input[type="password"]) .flex.w-72 input[type="email"],
body:has(form input[type="password"]) .flex.w-72 input[type="password"],
body:has(form input[type="password"]) .flex.w-72 input:not([type]) {
  background: #F7FAF8 !important;
  border: 1.5px solid #E0ECE8 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: #1A2E26 !important;
  font-size: 14px !important;
  height: 44px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
body:has(form input[type="password"]) .flex.w-72 input:focus {
  border-color: #0F6E56 !important;
  box-shadow: 0 0 0 4px rgba(15,110,86,0.12) !important;
  outline: none !important;
  background: white !important;
}

/* === BUTTONS — high specificity to beat Langflow's noflow util class === */
/* Sign In primary */
body:has(form input[type="password"]) .flex.w-72 button[type="submit"],
.flex.w-72 button[type="submit"].noflow {
  background-image: linear-gradient(135deg, #0F6E56 0%, #1D9E75 100%) !important;
  background-color: #0F6E56 !important;
  border: none !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  height: 48px !important;
  border-radius: 12px !important;
  margin-top: 8px !important;
  box-shadow: 0 8px 20px rgba(15,110,86,0.3) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
body:has(form input[type="password"]) .flex.w-72 button[type="submit"]:hover,
.flex.w-72 button[type="submit"].noflow:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(15,110,86,0.4) !important;
}

/* Sign Up secondary (Don't have an account?) — outlined */
body:has(form input[type="password"]) .flex.w-72 button[type="button"]:not(.input-component-false-button),
.flex.w-72 button[type="button"]:not(.input-component-false-button).noflow {
  background-image: none !important;
  background-color: white !important;
  border: 1.5px solid #E0ECE8 !important;
  color: #0F6E56 !important;
  font-weight: 500 !important;
  height: 44px !important;
  border-radius: 12px !important;
}

/* Footer */
footer, [class*="footer"]:not(form) { display: none !important; }

/* Catch hardcoded blues */
[style*="#2563eb"], [style*="#6366f1"] { color: #0F6E56 !important; background-color: #0F6E56 !important; }

/* === Playground session sidebar + any bg-white containers in-app === */
html:not(:has(form.h-screen)) aside,
html:not(:has(form.h-screen)) [class*="playground"] aside,
html:not(:has(form.h-screen)) [class*="sessions"],
html:not(:has(form.h-screen)) [class*="session-sidebar"],
html:not(:has(form.h-screen)) [class*="bg-white"],
html:not(:has(form.h-screen)) .bg-white,
html:not(:has(form.h-screen)) [role="complementary"] {
  background-color: hsl(220 13% 12%) !important;
  color: hsl(0 0% 95%) !important;
  border-color: hsl(220 13% 20%) !important;
}

/* Session list items — bring contrast back */
html:not(:has(form.h-screen)) aside button,
html:not(:has(form.h-screen)) aside [role="button"],
html:not(:has(form.h-screen)) [class*="session-item"],
html:not(:has(form.h-screen)) [class*="session"] li {
  color: hsl(0 0% 85%) !important;
}
html:not(:has(form.h-screen)) aside button:hover,
html:not(:has(form.h-screen)) aside [role="button"]:hover {
  background-color: hsl(220 13% 16%) !important;
}

/* Make sure dropdown menu items (•••) stay readable */
html:not(:has(form.h-screen)) aside [class*="dropdown"],
html:not(:has(form.h-screen)) aside [class*="menu"] {
  color: hsl(0 0% 85%) !important;
}
/dev/null <<CSSEOF
sudo chown 1000:1000 /opt/govlens-langflow-frontend/govlens-overrides.css
echo "CSS size: $(wc -c < /opt/govlens-langflow-frontend/govlens-overrides.css) bytes"

/* === Playground session sidebar + any bg-white containers in-app === */
html:not(:has(form.h-screen)) aside,
html:not(:has(form.h-screen)) [class*="playground"] aside,
html:not(:has(form.h-screen)) [class*="sessions"],
html:not(:has(form.h-screen)) [class*="session-sidebar"],
html:not(:has(form.h-screen)) [class*="bg-white"],
html:not(:has(form.h-screen)) .bg-white,
html:not(:has(form.h-screen)) [role="complementary"] {
  background-color: hsl(220 13% 12%) !important;
  color: hsl(0 0% 95%) !important;
  border-color: hsl(220 13% 20%) !important;
}

/* Session list items — bring contrast back */
html:not(:has(form.h-screen)) aside button,
html:not(:has(form.h-screen)) aside [role="button"],
html:not(:has(form.h-screen)) [class*="session-item"] {
  color: hsl(0 0% 85%) !important;
}
html:not(:has(form.h-screen)) aside button:hover,
html:not(:has(form.h-screen)) aside [role="button"]:hover {
  background-color: hsl(220 13% 16%) !important;
}

/* Dropdown menu items (•••) */
html:not(:has(form.h-screen)) aside [class*="dropdown"],
html:not(:has(form.h-screen)) aside [class*="menu"] {
  color: hsl(0 0% 85%) !important;
}

/* === Playground modal — more aggressive coverage === */
/* The Playground opens as a dialog/modal; its session sidebar is usually
   inside a panel that doesn't use the bg-card/bg-popover Tailwind utility */
html:not(:has(form.h-screen)) [role="dialog"],
html:not(:has(form.h-screen)) [role="dialog"] aside,
html:not(:has(form.h-screen)) [role="dialog"] [class*="sidebar"],
html:not(:has(form.h-screen)) [role="dialog"] [class*="left"],
html:not(:has(form.h-screen)) [class*="Playground"] [class*="bg-"],
html:not(:has(form.h-screen)) [class*="SessionSelector"],
html:not(:has(form.h-screen)) [class*="session-list"],
html:not(:has(form.h-screen)) [class*="SessionList"],
html:not(:has(form.h-screen)) div[class*="modal"] aside,
html:not(:has(form.h-screen)) div[class*="modal"] [class*="panel"] {
  background-color: hsl(220 13% 12%) !important;
  color: hsl(0 0% 90%) !important;
  border-color: hsl(220 13% 20%) !important;
}

/* Any visible text inside Playground that's still dark on white needs lightening */
html:not(:has(form.h-screen)) [role="dialog"] *,
html:not(:has(form.h-screen)) [class*="Playground"] *,
html:not(:has(form.h-screen)) [class*="playground"] * {
  border-color: hsl(220 13% 20%) !important;
}

/* "Sessions" header + items */
html:not(:has(form.h-screen)) [role="dialog"] h1,
html:not(:has(form.h-screen)) [role="dialog"] h2,
html:not(:has(form.h-screen)) [role="dialog"] h3,
html:not(:has(form.h-screen)) [role="dialog"] label,
html:not(:has(form.h-screen)) [role="dialog"] span:not([class*="badge"]):not([class*="bubble"]) {
  color: hsl(0 0% 90%) !important;
}

/* === Playground session sidebar — DOM-verified DevTools selectors === */
/* The sidebar has data-simple-sidebar="sidebar"; its background panel uses
   .bg-primary-foreground (white in our scheme — meant for button text), which
   looks wrong as a panel background. Target it contextually, not the utility. */
html:not(:has(form.h-screen)) [data-simple-sidebar="sidebar"],
html:not(:has(form.h-screen)) [data-simple-sidebar="sidebar"] .bg-primary-foreground,
html:not(:has(form.h-screen)) [data-simple-sidebar="sidebar"] .bg-background,
html:not(:has(form.h-screen)) .w-218.bg-primary-foreground,
html:not(:has(form.h-screen)) [data-testid="session-selector"],
html:not(:has(form.h-screen)) [data-testid^="session-"] {
  background-color: hsl(220 13% 12%) !important;
  color: hsl(0 0% 90%) !important;
  border-color: hsl(220 13% 20%) !important;
}

/* Session row text (the "pgo.viewer@apayac..." entries) */
html:not(:has(form.h-screen)) [data-simple-sidebar="sidebar"] span,
html:not(:has(form.h-screen)) [data-simple-sidebar="sidebar"] .text-mmd,
html:not(:has(form.h-screen)) [data-simple-sidebar="sidebar"] .text-muted-foreground {
  color: hsl(0 0% 85%) !important;
}

/* Hover state for session rows */
html:not(:has(form.h-screen)) [data-simple-sidebar="sidebar"] .hover\:bg-accent:hover,
html:not(:has(form.h-screen)) [data-simple-sidebar="sidebar"] [class*="hover"]:hover {
  background-color: hsl(220 13% 18%) !important;
}