/* =============================================================
   PGE HR Agent -- custom theme overrides for Chainlit 2.x
   ============================================================= */



/*
 * Chainlit 2.x uses shadcn/Radix UI theming.  Their CSS variables
 * are in HSL format (no hex, no commas):
 *     --primary: 209 100% 41%;   (HSL: hue saturation% lightness%)
 *
 * Hex doesn't work because the variables are consumed inside
 * Tailwind classes like `bg-primary` which expand to
 * `hsl(var(--primary) / <alpha>)` -- that requires HSL components.
 *
 * To pick a colour:
 *   1. Convert your hex → HSL (any online tool works)
 *   2. Drop the `hsl()` wrapper, just keep "H S% L%"
 *
 * PGE blue (#0073CF) → HSL(209, 100%, 41%) → "209 100% 41%"
 * PGE blue dark (#4FA3DD) → HSL(207, 67%, 59%) → "207 67% 59%"
 *
 * Edit the HSL strings below, save, rebuild image, redeploy.
 */

/*
 * IMPORTANT: !important is REQUIRED here.  Chainlit's bundled CSS
 * (/assets/index-XXXXX.css) loads AFTER our /public/pge-theme.css,
 * so without !important the cascade rule means Chainlit's defaults
 * win and our overrides are silently ignored.  This was the root
 * cause of "theme didn't change" debugging on 2026-05-08.
 *
 * !important on CSS custom property declarations is valid CSS spec
 * (https://www.w3.org/TR/css-variables-1/#using-variables).
 */

/* Light theme overrides */
:root {
  /* Primary colour (PGE blue) -- buttons, send arrow, focus rings */
  --primary: 209 100% 41% !important;
  --primary-foreground: 0 0% 100% !important;

  /* Ring (focus outline) -- soft PGE blue */
  --ring: 209 100% 41% !important;

  /* Subtle accent used in highlights */
  --accent: 209 80% 95% !important;
  --accent-foreground: 209 80% 25% !important;
}

/* Dark theme overrides -- PGE blue lifted slightly so it doesn't
   disappear against slate backgrounds */
.dark,
[data-theme="dark"],
html.dark,
html[data-theme="dark"] {
  --primary: 207 67% 59% !important;
  --primary-foreground: 211 60% 14% !important;

  --ring: 207 67% 59% !important;

  --accent: 209 80% 20% !important;
  --accent-foreground: 209 80% 80% !important;
}

/*
 * AGGRESSIVE OVERRIDES -- target Chainlit's Tailwind classes directly.
 *
 * Chainlit defines utility classes like .bg-primary, .border-primary,
 * .text-primary, .ring-primary that compile to hsl(var(--primary)).
 * Even if the var override is somehow ignored, overriding the class
 * itself is bulletproof.  This is the "burn it to the ground" approach.
 */

/* Anything with bg-primary class: PGE blue background */
.bg-primary {
  background-color: hsl(209 100% 41%) !important;
}
.dark .bg-primary,
[data-theme="dark"] .bg-primary {
  background-color: hsl(207 67% 59%) !important;
}

/* Anything with text-primary class: PGE blue text */
.text-primary {
  color: hsl(209 100% 41%) !important;
}
.dark .text-primary,
[data-theme="dark"] .text-primary {
  color: hsl(207 67% 59%) !important;
}

/* Anything with border-primary or ring-primary class: PGE blue */
.border-primary {
  border-color: hsl(209 100% 41%) !important;
}
.dark .border-primary,
[data-theme="dark"] .border-primary {
  border-color: hsl(207 67% 59%) !important;
}

.ring-primary,
.focus\:ring-primary:focus,
.focus-visible\:ring-primary:focus-visible {
  --tw-ring-color: hsl(209 100% 41%) !important;
}

/* Hover state on any bg-primary element: slightly lighter PGE blue */
.hover\:bg-primary\/80:hover,
.hover\:bg-primary\/90:hover,
.hover\:bg-primary:hover {
  background-color: hsl(207 67% 59%) !important;
}

/* Send button (the round circle in the message composer).  Multiple
   selectors to catch every variant Chainlit might use. */
button[aria-label*="Send" i],
button[aria-label*="Submit" i],
.message-composer button[type="submit"],
form button[type="submit"][class*="rounded"] {
  background-color: hsl(209 100% 41%) !important;
}

button[aria-label*="Send" i]:hover,
button[aria-label*="Submit" i]:hover,
.message-composer button[type="submit"]:hover {
  background-color: hsl(207 67% 59%) !important;
}

/* Fill / stroke for SVG icons inside primary-coloured buttons */
.bg-primary svg,
.text-primary-foreground {
  color: white !important;
  fill: currentColor !important;
}

/*
 * Banner image inside chat messages -- ensure it doesn't blow up to
 * the full chat width on small screens.  Cap at 480px.
 */
.markdown-body img[alt*="PGE" i],
.markdown-body img[src*="pge-banner"],
.markdown-body img[src*="pge-logo"] {
  max-width: 480px;
  height: auto;
  display: block;
  margin: 0.5rem 0 1rem 0;
}

/*
 * Starter-prompt cards on the welcome screen -- give them a subtle
 * PGE tint on hover.
 */
.starter-card:hover,
[data-testid*="starter" i]:hover {
  border-color: hsl(var(--primary)) !important;
}

/*
 * Hide the big "Chainlit" wordmark in the empty chat state.
 * Chainlit 2.x renders this as a watermark when no messages exist.
 * If you want PGE branding instead, use a logo file at
 * public/logo_light.png and public/logo_dark.png (Chainlit auto-loads).
 */
[class*="watermark" i],
[data-testid*="watermark" i] {
  display: none !important;
}