/*
 * Demo Tenant branding override for Chatwoot 4.x.
 * 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.x uses Radix-style colour scales (--blue-*, --gray-*)
 * directly — there is no semantic --primary-* alias layer. Primary
 * buttons, links, and active states all reference var(--blue-9) /
 * var(--blue-10). So the leverage point is to replace the blue scale
 * with our deep-blue palette.
 */

: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;

  /* Chatwoot also references a couple of legacy variable names on
     pages that haven't been migrated to Radix yet. Keep them aligned. */
  --button-color: #1e40af;
  --button-hover-color: #1d3fa8;
}

/* ====================================================================
 * MODERN LOGIN SCREEN — split-screen, dark mode, glassmorphism.
 *
 * Chatwoot 4.13 renders the login at /app/login inside the
 * `.app-wrapper` shell. The auth form sits in a `.row` > `.column`
 * grid with the form card itself in a `.column.medium-4` (Chatwoot
 * uses Foundation classes). The illustrated right column is added
 * via a body::before pseudo-element so we don't depend on Chatwoot
 * shipping a sibling DOM node.
 *
 * Scoped to login-only via body:has(.login-box, .signup--page,
 * .auth-form-wrapper, [data-route*="login"]) so the rest of the
 * dashboard is untouched.
 * ==================================================================== */

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

body:has(.login-box),
body:has(.signup--page),
body:has(.auth-form-wrapper),
body[data-route*="login"],
body:has([class*="signup-"]) {
  /* Reset Chatwoot's default light auth background. */
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(124, 58, 237, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(6, 182, 212, 0.18) 0%, transparent 65%),
    linear-gradient(135deg, #0b0f1c 0%, #131829 50%, #0b0f1c 100%)
    !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  color: #e6e9f2 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  overflow-x: hidden !important;
}

/* Right-side decorative panel — fixed to the right half of the viewport.
 * Inline SVG: layered soundwave + neural-net nodes using CSS gradient
 * masks. The animation gently breathes (opacity pulse) to feel alive
 * without being distracting. */
body:has(.login-box)::before,
body:has(.signup--page)::before,
body:has(.auth-form-wrapper)::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Concentric soundwave rings */
    radial-gradient(circle at 50% 50%, transparent 22%, rgba(6, 182, 212, 0.10) 22.5%, transparent 23%),
    radial-gradient(circle at 50% 50%, transparent 32%, rgba(6, 182, 212, 0.08) 32.5%, transparent 33%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(6, 182, 212, 0.06) 42.5%, transparent 43%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(124, 58, 237, 0.05) 52.5%, transparent 53%),
    /* Neural-net node glow points */
    radial-gradient(circle at 30% 25%, rgba(124, 58, 237, 0.45) 0%, transparent 5%),
    radial-gradient(circle at 70% 35%, rgba(6, 182, 212, 0.45) 0%, transparent 4%),
    radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.8) 0%, transparent 3%),
    radial-gradient(circle at 25% 65%, rgba(6, 182, 212, 0.4) 0%, transparent 4%),
    radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.4) 0%, transparent 4%),
    radial-gradient(circle at 50% 20%, rgba(6, 182, 212, 0.3) 0%, transparent 3%),
    radial-gradient(circle at 60% 85%, rgba(124, 58, 237, 0.3) 0%, transparent 3%);
  animation: breathe 8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.02); }
}

/* Optional second pseudo-element layer — animated vertical soundwave bars
 * on the right panel, positioned over the rings. */
body:has(.login-box)::after,
body:has(.signup--page)::after,
body:has(.auth-form-wrapper)::after {
  content: "";
  position: fixed;
  top: 50%;
  right: 25vw;
  transform: translate(50%, -50%);
  width: 280px;
  height: 80px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      transparent 30%, rgba(6, 182, 212, 0.7) 30%, rgba(6, 182, 212, 0.7) 70%, transparent 70%) 0%   center / 8px 100% no-repeat,
    linear-gradient(to bottom,
      transparent 15%, rgba(6, 182, 212, 0.7) 15%, rgba(6, 182, 212, 0.7) 85%, transparent 85%) 20%  center / 8px 100% no-repeat,
    linear-gradient(to bottom,
      transparent 40%, rgba(124, 58, 237, 0.7) 40%, rgba(124, 58, 237, 0.7) 60%, transparent 60%) 40%  center / 8px 100% no-repeat,
    linear-gradient(to bottom,
      transparent 10%, rgba(124, 58, 237, 0.7) 10%, rgba(124, 58, 237, 0.7) 90%, transparent 90%) 60%  center / 8px 100% no-repeat,
    linear-gradient(to bottom,
      transparent 25%, rgba(6, 182, 212, 0.7) 25%, rgba(6, 182, 212, 0.7) 75%, transparent 75%) 80%  center / 8px 100% no-repeat,
    linear-gradient(to bottom,
      transparent 35%, rgba(124, 58, 237, 0.7) 35%, rgba(124, 58, 237, 0.7) 65%, transparent 65%) 100% center / 8px 100% no-repeat;
  filter: blur(0.5px) drop-shadow(0 0 12px rgba(124, 58, 237, 0.4));
  animation: equalize 1.6s ease-in-out infinite;
}

@keyframes equalize {
  0%, 100% { transform: translate(50%, -50%) scaleY(1);   }
  25%      { transform: translate(50%, -50%) scaleY(1.4); }
  50%      { transform: translate(50%, -50%) scaleY(0.7); }
  75%      { transform: translate(50%, -50%) scaleY(1.2); }
}

/* Form column — push to left half, vertically center.
 * Chatwoot's auth wrapper class names vary by version. Target broad. */
body:has(.login-box) .signup--page,
body:has(.login-box) .auth-form-wrapper,
.row.signup-wrapper,
.signup--container {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh !important;
  width: 50vw !important;
  max-width: 50vw !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Glassmorphism login card. */
.login-box,
.signup--login-box,
.column.medium-4 > .login-box,
.signup--login-box-wrapper {
  background: rgba(20, 26, 48, 0.55) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  padding: 48px 44px !important;
  margin: 0 auto !important;
  max-width: 460px !important;
  width: 92% !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(124, 58, 237, 0.08) inset,
    0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
  color: #e6e9f2 !important;
}

/* Headings inside the card. */
.login-box h1,
.login-box h2,
.signup--login-box h1,
.signup--login-box h2,
.signup--page h1,
.signup--page h2 {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.65rem !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px 0 !important;
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.login-box .subtitle,
.signup--login-box .subtitle,
.signup--page p {
  color: rgba(230, 233, 242, 0.65) !important;
  font-size: 0.95rem !important;
  margin-bottom: 28px !important;
}

/* Input fields. */
.login-box input[type="email"],
.login-box input[type="password"],
.login-box input[type="text"],
.signup--login-box input,
.signup--page input,
input.input--email,
input.input--password {
  background: rgba(11, 15, 28, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  padding: 14px 16px !important;
  font-size: 0.95rem !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.18s ease !important;
  width: 100% !important;
  box-shadow: none !important;
}

.login-box input::placeholder,
.signup--login-box input::placeholder,
input.input--email::placeholder,
input.input--password::placeholder {
  color: rgba(230, 233, 242, 0.35) !important;
}

.login-box input:focus,
.signup--login-box input:focus,
input.input--email:focus,
input.input--password:focus {
  outline: none !important;
  border-color: rgba(6, 182, 212, 0.6) !important;
  background: rgba(11, 15, 28, 0.9) !important;
  box-shadow:
    0 0 0 3px rgba(6, 182, 212, 0.15),
    0 0 24px rgba(6, 182, 212, 0.15) !important;
}

/* Field labels. */
.login-box label,
.signup--login-box label,
.signup--page label {
  color: rgba(230, 233, 242, 0.85) !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  margin-bottom: 8px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Primary login button — vibrant blue with subtle gradient + glow. */
.login-box button[type="submit"],
.login-box button.button,
.signup--login-box button,
.signup--page button[type="submit"],
button.button.large.expanded {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.01em !important;
  padding: 14px 24px !important;
  border-radius: 12px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow:
    0 4px 14px rgba(37, 99, 235, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
  margin-top: 8px !important;
}

.login-box button[type="submit"]:hover,
.login-box button.button:hover,
.signup--login-box button:hover,
button.button.large.expanded:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2547c4 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 8px 24px rgba(37, 99, 235, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
}

.login-box button[type="submit"]:active,
button.button.large.expanded:active {
  transform: translateY(0) !important;
}

/* Secondary links (forgot password, signup). */
.login-box a,
.signup--login-box a,
.signup--page a,
.forgot--password a {
  color: rgba(6, 182, 212, 0.85) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  transition: color 0.15s ease !important;
}

.login-box a:hover,
.signup--login-box a:hover,
.signup--page a:hover {
  color: #06b6d4 !important;
  text-decoration: underline !important;
}

/* "PROGBIZ" wordmark / logo at the top of the card — boost it. */
body:has(.login-box) .logo img,
body:has(.signup--page) .logo img,
.auth-form-wrapper .logo img,
.signup--login-box img[alt*="logo" i] {
  filter: brightness(1.15) drop-shadow(0 4px 24px rgba(124, 58, 237, 0.35)) !important;
  margin-bottom: 12px !important;
}

/* Responsive: collapse to single column on narrow viewports. */
@media (max-width: 900px) {
  body:has(.login-box)::before,
  body:has(.signup--page)::before,
  body:has(.auth-form-wrapper)::before,
  body:has(.login-box)::after,
  body:has(.signup--page)::after,
  body:has(.auth-form-wrapper)::after {
    display: none !important;
  }
  body:has(.login-box) .signup--page,
  body:has(.login-box) .auth-form-wrapper,
  .row.signup-wrapper,
  .signup--container {
    width: 100vw !important;
    max-width: 100vw !important;
    justify-content: center !important;
  }
}