/*
 * BP login skin for Chatwoot v4.11.1 operator console (chat.<domain>/app/login).
 *
 * Injected via nginx sub_filter (see deploy/nginx-chatwoot.conf). The companion
 * bp-login.js adds `body.bp-login-skin` + the left brand panel ONLY on /app/login.
 * EVERYTHING here is scoped under body.bp-login-skin so the rest of Chatwoot
 * (dashboard, conversations, settings) is untouched — the <link> is injected on
 * every page, the class is not.
 *
 * Design mirrors the client portal login (apps/ui-main/src/pages/ClientLoginPage.tsx):
 * navy split-screen panel + Droid Serif headings + Montserrat body + blue primary.
 * Color values come from the ui-main design tokens (apps/ui-main/src/index.css);
 * centralized here as --bp-* custom properties (no scattered hex).
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Droid+Serif:wght@400;700&display=swap');

body.bp-login-skin {
  --bp-navy: hsl(216 78% 9%);        /* #051328 — ui-main --sidebar-bg */
  --bp-primary: hsl(213 94% 52%);    /* ui-main --primary */
  --bp-primary-hover: hsl(213 94% 45%);
  --bp-border: hsl(220 13% 91%);     /* ui-main --border / --input */
  --bp-panel-w: 44%;
}

/* ── Right side: recolor Chatwoot's own login markup ───────────────────── */

/* Chatwoot's <main> has w-full (width:100%); the fixed panel takes the left 44%.
   Without shrinking the width, margin-left:44% + width:100% = 144% -> horizontal
   scroll. Cap width to the remaining 56% so it never overflows the viewport. */
body.bp-login-skin {
  overflow-x: hidden;
}

/* <main> is the login root (flex flex-col min-h-screen bg-n-brand/5). Push it
   past the fixed brand panel and center the card vertically in the remaining space. */
body.bp-login-skin main {
  margin-left: var(--bp-panel-w);
  width: calc(100% - var(--bp-panel-w)) !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
  justify-content: center;
  background: #fff !important;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* Login title (h2) + any serif headings */
body.bp-login-skin h2 {
  font-family: 'Droid Serif', Georgia, serif;
}

/* Primary submit button (stable data-testid anchor) */
body.bp-login-skin [data-testid='submit_button'] {
  background-color: var(--bp-primary) !important;
  border-color: var(--bp-primary) !important;
  color: #fff !important;
}
body.bp-login-skin [data-testid='submit_button']:hover:not(:disabled) {
  background-color: var(--bp-primary-hover) !important;
  border-color: var(--bp-primary-hover) !important;
}

/* Links (forgot password, signup, etc.) */
body.bp-login-skin a.text-link,
body.bp-login-skin .text-n-brand,
body.bp-login-skin a[class*='text-link'] {
  color: var(--bp-primary) !important;
}

/* Inputs — align focus accent with brand blue */
body.bp-login-skin input:focus {
  border-color: var(--bp-primary) !important;
  outline-color: var(--bp-primary) !important;
}

/* ── Left side: brand panel (fully owned, built by bp-login.js) ────────── */

.bp-brand-panel {
  position: fixed;
  inset: 0 auto 0 0;            /* top:0 right:auto bottom:0 left:0 */
  width: var(--bp-panel-w);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 2.25rem;
  background: var(--bp-navy);
  overflow: hidden;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* Dot-grid overlay (was inline style in the LK component; moved to CSS for CSP-safety) */
.bp-brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.5) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}

.bp-brand-panel > * {
  position: relative;
  z-index: 1;
}

.bp-brand-logo {
  font-family: 'Droid Serif', Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 3rem;
}

.bp-brand-headline {
  font-family: 'Droid Serif', Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  color: #fff;
  margin: 0 0 0.75rem;
}

.bp-brand-tagline {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.bp-brand-features {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.bp-feature {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.bp-feature .bp-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.3);
}

.bp-feature span:last-child {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.bp-brand-copy {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
}

/* ── Mobile: hide the panel, restore full-width form ───────────────────── */
@media (max-width: 767px) {
  .bp-brand-panel {
    display: none !important;
  }
  body.bp-login-skin main {
    margin-left: 0;
    width: 100% !important;
  }
}