/*
 * Progbiz Connect branding override for Chatwoot 4.13.
 * Loaded by Caddy's replace-response injection just before </head>,
 * so it lands AFTER Chatwoot's own bundled CSS and wins on cascade.
 *
 * Chatwoot 4.13 uses Tailwind CSS with custom design tokens prefixed
 * `n-*` (e.g. `n-brand`, `n-solid-2`, `n-alpha-black2`). The login
 * card's stable class fragment is `dark:bg-n-solid-2`. We target it
 * via attribute substring selectors so a Tailwind class reordering
 * upstream doesn't break the override.
 *
 * Color brand: deep blue primary scale. Auth screen layered with
 * cyan + violet accents for the modern voice-tech aesthetic.
 */

:root {
  --blue-1:  #f5f8fc;
  --blue-2:  #eef2f9;
  --blue-3:  #dbe5f3;
  --blue-4:  #c2d1e9;
  --blue-5:  #a4bcdd;
  --blue-6:  #82a3cf;
  --blue-7:  #5d83bf;
  --blue-8:  #3f63b3;
  --blue-9:  #1e40af; /* primary */
  --blue-10: #1d3fa8; /* primary hover */
  --blue-11: #1f3b9b;
  --blue-12: #0f1f4a;

  /* Legacy variable names some Chatwoot pages still reference. */
  --button-color: #1e40af;
  --button-hover-color: #1d3fa8;
}

/* ====================================================================
 * AUTH SCREENS — premium dark glassmorphism with cyan accents.
 *
 * Hari's design brief (2026-06-08): the Chat Console should feel like
 * the Admin Console's "premium sibling" — same visual language and
 * spacing, but cyan-accented and dark-glassmorphism instead of the
 * admin's clean white card. The two read as different products in the
 * same family.
 *
 * Approach:
 *
 *   - Body: dark navy → slate gradient (always dark on chat side,
 *     even when the user's system is in light mode).
 *   - Wordmark + footer text injected via pseudo-elements since the
 *     SPA's rendered text is fixed by Chatwoot's i18n.
 *   - Card: rgba(24, 38, 58, 0.9) glass, soft shadow, 20px radius.
 *   - Inputs: dark, 48px height, focused glow uses cyan (#22d3ee).
 *   - Button: cyan-blue gradient + lift hover.
 *
 * The cyan "Chat Console" pill below this section keeps doing role
 * identity work, with the new wordmark sitting between the pill and
 * the card.
 *
 * Scoped via ``body:has(form input[type="password"])`` so the
 * dashboard pages stay untouched.
 * ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Page background — dark navy → slate gradient. Always dark on chat
 * side (no @media prefers-color-scheme branch since the design brief
 * is "premium dark glassmorphism"). */
body:has(form input[type="password"]) {
  background:
    radial-gradient(900px 600px at 70% 5%, rgba(34, 211, 238, 0.06), transparent),
    radial-gradient(700px 500px at 15% 95%, rgba(45, 140, 255, 0.05), transparent),
    linear-gradient(180deg, #0a0e1c 0%, #0d1224 50%, #0a0e1c 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  color: #e6e9f2 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: normal !important;
}

/* Kill the old animated soundwave / floating-dot ::before layer. The
 * pill at the bottom uses ::after; ::before is just off. */
body:has(form input[type="password"])::before {
  content: none !important;
  background-image: none !important;
  animation: none !important;
}

/* Constrain the card width — admin's 384px is too narrow for the
 * design brief's 380-420px target; settle at ~400px. */
body:has(form input[type="password"]) [class*="max-w-lg"],
body:has(form input[type="password"]) [class*="max-w-md"],
body:has(form input[type="password"]) [class*="w-full"][class*="rounded-lg"] {
  max-width: 25rem !important;  /* 400px */
}

/* Inject the "progbiz · CONNECT" wordmark above the card via the auth
 * wrapper's ::before. Single-element rendering: same font / size /
 * weight throughout. The brand "·" between the two words gives the
 * mark some character without needing two separate spans. */
body:has(form input[type="password"]) [class*="max-w-lg"]::before,
body:has(form input[type="password"]) [class*="max-w-md"]::before {
  content: "progbiz · CONNECT";
  display: block;
  text-align: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: #f1f5f9 !important;
  margin-bottom: 8px !important;
  margin-top: 8px !important;
}

/* Login card — dark glassmorphism per the design brief. */
body:has(form input[type="password"]) [class*="dark:bg-n-solid-2"][class*="rounded-lg"],
body:has(form input[type="password"]) [class*="bg-white"][class*="rounded-lg"][class*="shadow"][class*="mt-15"],
body:has(form input[type="password"]) [class*="mt-11"][class*="max-w-lg"][class*="rounded-lg"] {
  background: rgba(24, 38, 58, 0.9) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
  padding: 2rem !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Inject the "Progbiz Connect · Staging" footer below the card via
 * the card's ::after. Small muted text — pure decoration. */
body:has(form input[type="password"]) [class*="dark:bg-n-solid-2"][class*="rounded-lg"]::after,
body:has(form input[type="password"]) [class*="bg-white"][class*="rounded-lg"][class*="shadow"][class*="mt-15"]::after,
body:has(form input[type="password"]) [class*="mt-11"][class*="max-w-lg"][class*="rounded-lg"]::after {
  content: "Progbiz Connect · Staging";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -36px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 400 !important;
  color: rgba(230, 233, 242, 0.4) !important;
  letter-spacing: 0.02em !important;
}

/* Hide the rendered "PROGBIZ" wordmark image — our injected wordmark
 * above the card replaces it. */
body:has(form input[type="password"]) img[alt*="logo" i],
body:has(form input[type="password"]) img[src*="branding"],
body:has(form input[type="password"]) img[src*="logo"] {
  display: none !important;
}

/* Hide the Chatwoot "Login to Progbiz Connect" heading — redundant
 * with our injected wordmark + pill identity. */
body:has(form input[type="password"]) [class*="text-2xl"],
body:has(form input[type="password"]) [class*="text-xl"],
body:has(form input[type="password"]) h1,
body:has(form input[type="password"]) h2,
body:has(form input[type="password"]) h3 {
  display: none !important;
}

/* Field labels — uppercase tracking-wider per the brief (EMAIL / PASSWORD). */
body:has(form input[type="password"]) label {
  color: rgba(230, 233, 242, 0.75) !important;
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.5rem !important;
}

/* Inputs — dark bg, 48px height, cyan focus glow. */
body:has(form input[type="password"]) input[type="email"],
body:has(form input[type="password"]) input[type="password"],
body:has(form input[type="password"]) input[type="text"] {
  background: rgba(10, 16, 30, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  height: 48px !important;
  padding: 0 1rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9375rem !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

body:has(form input[type="password"]) input::placeholder {
  color: rgba(230, 233, 242, 0.3) !important;
}

body:has(form input[type="password"]) input[type="email"]:hover,
body:has(form input[type="password"]) input[type="password"]:hover,
body:has(form input[type="password"]) input[type="text"]:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body:has(form input[type="password"]) input[type="email"]:focus,
body:has(form input[type="password"]) input[type="password"]:focus,
body:has(form input[type="password"]) input[type="text"]:focus {
  border-color: rgba(34, 211, 238, 0.7) !important;
  background: rgba(10, 16, 30, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12), 0 0 24px rgba(34, 211, 238, 0.08) !important;
}

/* Eye icon button — subtle, fades in on hover. */
body:has(form input[type="password"]) input[type="password"] + button,
body:has(form input[type="password"]) [class*="absolute"][class*="right-"] button {
  color: rgba(230, 233, 242, 0.4) !important;
  transition: color 0.15s ease !important;
}

body:has(form input[type="password"]) input[type="password"] + button:hover,
body:has(form input[type="password"]) [class*="absolute"][class*="right-"] button:hover {
  color: rgba(230, 233, 242, 0.8) !important;
}

/* Submit button — cyan-to-blue gradient with lift on hover.
 *
 * Note: Chatwoot's button text is "Login" via i18n; we can't change
 * the DOM text from CSS, but we use font-size:0 + ::before "Sign In"
 * to swap the *displayed* text without touching form behaviour. The
 * button still submits exactly the same way. */
body:has(form input[type="password"]) button[type="submit"] {
  background: linear-gradient(135deg, #2d8cff 0%, #4da3ff 100%) !important;
  border: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.02em !important;
  border-radius: 12px !important;
  height: 48px !important;
  padding: 0 1.5rem !important;
  font-size: 0 !important;   /* hide native "Login" text */
  box-shadow:
    0 8px 24px rgba(45, 140, 255, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

body:has(form input[type="password"]) button[type="submit"]::before {
  content: "Sign In";
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

body:has(form input[type="password"]) button[type="submit"]:hover {
  background: linear-gradient(135deg, #3b9aff 0%, #5db1ff 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 12px 32px rgba(45, 140, 255, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

body:has(form input[type="password"]) button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow:
    0 6px 16px rgba(45, 140, 255, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}

/* Links — cyan accent (forgot password etc.). Made small + less weighty
 * per the brief. */
body:has(form input[type="password"]) a {
  color: rgba(34, 211, 238, 0.85) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  transition: color 0.15s ease !important;
}

body:has(form input[type="password"]) a:hover {
  color: #67e8f9 !important;
  text-decoration: underline !important;
}

/* Autofill override — keep dark background on autofilled inputs. */
body:has(form input[type="password"]) input:-webkit-autofill,
body:has(form input[type="password"]) input:-webkit-autofill:hover,
body:has(form input[type="password"]) input:-webkit-autofill:focus,
body:has(form input[type="password"]) input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px rgba(10, 16, 30, 0.95) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #22d3ee !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* ====================================================================
 * CHAT CONSOLE identity pill
 *
 * Differentiates the Chatwoot auth pages from the Admin Console at
 * /admin/login (which carries a matching amber pill in
 * services/connect-app/app/templates/admin/login.html).
 *
 * The two pills use distinct palettes (Chat = cyan, Admin = amber) so
 * a user landing on either page recognises which portal they're on
 * before they've read anything else.
 *
 * Uses ``body::after`` because ``body::before`` is already claimed by
 * the soundwave background animation above. Pinned at
 * ``calc(50% - 290px)`` from the top so it sits ~50px above the
 * vertically-centred auth card on every viewport.
 *
 * Scoped via ``body:has(form input[type="password"])`` so it only
 * shows on the auth pages and never bleeds into the dashboard.
 * ==================================================================== */
body:has(form input[type="password"])::after {
  content: "Chat Console";
  position: fixed;
  top: calc(50% - 290px);
  left: 50%;
  transform: translateX(-50%);
  display: block;
  background: rgba(6, 182, 212, 0.10) !important;
  border: 1px solid rgba(6, 182, 212, 0.28) !important;
  border-radius: 9999px !important;
  padding: 5px 16px !important;
  color: #67e8f9 !important;
  font-size: 0.68rem !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.13em !important;
  white-space: nowrap !important;
  z-index: 100 !important;
  pointer-events: none !important;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.15) !important;
}