/*
 * Rig theme overlay for Chatwoot dashboard / login
 * Tokens mirror packages/brand + apps/web/public/rig.css
 * Served from https://userig.app/brand/chatwoot-theme.css
 */

:root {
  --rig-canvas: #f2f2ec;
  --rig-surface: #ffffff;
  --rig-surface-2: #f8f8f3;
  --rig-ink: #12171f;
  --rig-ink-soft: #2a323d;
  --rig-muted: #5f6772;
  --rig-line: #e0e2da;
  --rig-line-strong: #cfd2c7;
  --rig-lime: #c9ef35;
  --rig-lime-border: #b3d52e;
  --rig-lime-ink: #26350a;
  --rig-pink: #bd35b3;
  --rig-sans: "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rig-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --rig-radius: 18px;
  --rig-grid: rgba(18, 23, 31, 0.045);

  /* Remap Chatwoot design tokens (rgb triplets) */
  --blue-9: 201 239 53;
  --n-brand: 201 239 53;
}

/* -------------------------------------------------------------------------- */
/* Global brand colour remap (dashboard + auth)                               */
/* -------------------------------------------------------------------------- */

html,
body,
body.text-slate-600,
main.bg-n-brand\/5 {
  background-color: var(--rig-canvas) !important;
  font-family: var(--rig-sans) !important;
  color: var(--rig-ink) !important;
  letter-spacing: -0.01em;
}

.bg-woot-500,
.bg-woot-600,
.bg-woot-700,
.hover\:bg-woot-500:hover,
.hover\:bg-woot-600:hover,
.hover\:bg-woot-700:hover,
button.bg-woot-500,
.bg-n-brand,
.bg-\[\#2781F6\],
.bg-\[\#1f93ff\],
.bg-\[\#3b9eff\] {
  background-color: var(--rig-lime) !important;
  color: var(--rig-lime-ink) !important;
}

.text-woot-500,
.text-woot-600,
.text-woot-700,
.hover\:text-woot-500:hover,
.hover\:text-woot-600:hover,
.hover\:text-woot-700:hover,
.text-n-brand,
.text-n-blue-11 {
  color: var(--rig-ink) !important;
}

.border-woot-500,
.border-woot-600,
.border-n-brand,
.outline-n-brand,
.\!outline-n-brand {
  border-color: var(--rig-lime-border) !important;
  outline-color: var(--rig-lime-border) !important;
}

.ring-woot-500,
.focus\:ring-woot-500:focus,
.focus-visible\:outline-woot-500:focus-visible,
.ring-n-brand {
  --tw-ring-color: var(--rig-lime-border) !important;
  outline-color: var(--rig-lime-border) !important;
}

.text-link,
a.text-link,
a.text-n-brand,
#app a.text-link {
  color: var(--rig-pink) !important;
}

.text-link:hover,
a.text-link:hover,
a.text-n-brand:hover,
#app a.text-link:hover {
  color: var(--rig-ink) !important;
}

a.text-woot-500,
a.text-woot-600,
a.text-woot-700 {
  color: var(--rig-pink) !important;
}

[style*="#1f93ff"],
[style*="#2781F6"],
[style*="#2781f6"],
[style*="#3b9eff"] {
  background-color: var(--rig-lime) !important;
  border-color: var(--rig-lime-border) !important;
  color: var(--rig-lime-ink) !important;
}

#app button[type="submit"],
#app button.button--primary,
#app button.bg-n-brand,
main form button[type="submit"] {
  background-color: var(--rig-lime) !important;
  border-color: var(--rig-lime-border) !important;
  color: var(--rig-lime-ink) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

#app button[type="submit"]:hover,
#app button.button--primary:hover,
#app button.bg-n-brand:hover,
main form button[type="submit"]:hover {
  background-color: color-mix(in srgb, var(--rig-lime) 88%, var(--rig-ink)) !important;
  border-color: var(--rig-lime-border) !important;
}

/* Left nav / agent chrome — ink, not Chatwoot navy */
aside.bg-slate-900,
aside.bg-navy-900,
.bg-slate-900,
.bg-navy-900 {
  background-color: var(--rig-ink) !important;
}

.bg-woot-50,
.bg-woot-25,
.bg-n-brand\/5,
.bg-n-brand\/10 {
  background-color: color-mix(in srgb, var(--rig-lime) 14%, white) !important;
}

#app input:focus,
#app textarea:focus,
#app select:focus {
  border-color: var(--rig-lime-border) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rig-lime) 32%, transparent) !important;
}

/* -------------------------------------------------------------------------- */
/* Auth split-card layout (login / password reset / signup)                   */
/* -------------------------------------------------------------------------- */

body:has(main.flex.flex-col.w-full.min-h-screen),
#app:has(main.flex.flex-col.w-full.min-h-screen),
#app:has(main.flex.flex-col.w-full.min-h-screen) > div,
#app:has(main.flex.flex-col.w-full.min-h-screen) > div > div {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body:has(main.flex.flex-col.w-full.min-h-screen),
#app:has(main.flex.flex-col.w-full.min-h-screen) {
  background-color: var(--rig-canvas) !important;
  background-image:
    linear-gradient(var(--rig-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rig-grid) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  background-position: -1px -1px !important;
  font-family: var(--rig-sans) !important;
}

main.flex.flex-col.w-full.min-h-screen {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  align-content: stretch !important;
  justify-content: stretch !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  width: min(920px, calc(100vw - 2.5rem)) !important;
  max-width: 920px !important;
  min-height: 560px !important;
  height: auto !important;
  margin: 1.5rem auto !important;
  padding: 0 !important;
  background-color: var(--rig-surface) !important;
  border-radius: var(--rig-radius) !important;
  border: 1.5px solid var(--rig-line-strong) !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 2px rgba(18, 23, 31, 0.05),
    0 34px 64px -24px rgba(18, 23, 31, 0.34) !important;
  box-sizing: border-box !important;
  position: relative !important;
  font-family: var(--rig-sans) !important;
  color: var(--rig-ink) !important;
}

/* Left hero — control-deck ink panel with lime accents + grid */
main.flex.flex-col.w-full.min-h-screen::before {
  content: "" !important;
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  min-height: 100% !important;
  background-color: var(--rig-ink) !important;
  background-image:
    radial-gradient(ellipse 70% 50% at 30% 20%, color-mix(in srgb, var(--rig-lime) 22%, transparent), transparent),
    radial-gradient(ellipse 50% 40% at 80% 85%, color-mix(in srgb, var(--rig-pink) 18%, transparent), transparent),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: auto, auto, 28px 28px, 28px 28px !important;
  background-position: center, center, 0 0, 0 0 !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat !important;
}

/* Hero eyebrow + title via CSS (no photo dependency) */
main.flex.flex-col.w-full.min-h-screen::after {
  content: "// helpdesk\A Get your support under control." !important;
  white-space: pre-wrap !important;
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  align-self: end !important;
  justify-self: start !important;
  z-index: 1 !important;
  margin: 0 0 2.5rem 2.25rem !important;
  max-width: 16rem !important;
  font-family: var(--rig-sans) !important;
  font-size: clamp(1.65rem, 2.4vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
  color: #f3f5ef !important;
}

main.flex.flex-col.w-full.min-h-screen > section:first-child {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 3.5rem 2.75rem 0 !important;
  overflow: visible !important;
  text-align: left !important;
}

main.flex.flex-col.w-full.min-h-screen > section:first-child h2,
main.flex.flex-col.w-full.min-h-screen > section:first-child > p {
  display: none !important;
}

main.flex.flex-col.w-full.min-h-screen > section:first-child::after {
  content: "Nice to see you" !important;
  display: block !important;
  margin-top: 1.25rem !important;
  font-family: var(--rig-sans) !important;
  font-size: clamp(1.65rem, 2.2vw, 2rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--rig-ink) !important;
  letter-spacing: -0.04em !important;
}

main.flex.flex-col.w-full.min-h-screen > section:first-child a,
main.flex.flex-col.w-full.min-h-screen > section:first-child > div,
main.flex.flex-col.w-full.min-h-screen > section:first-child > div > div {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  line-height: normal !important;
}

main.flex.flex-col.w-full.min-h-screen > section:first-child img.h-8:not(.hidden):not([src*="dark"]),
main.flex.flex-col.w-full.min-h-screen > section:first-child img.block:not(.hidden):not([src*="dark"]),
main.flex.flex-col.w-full.min-h-screen > section:first-child img[alt*="Rig"]:not(.hidden):not([src*="dark"]),
main.flex.flex-col.w-full.min-h-screen > section:first-child img[src*="brand-assets"]:not(.hidden):not([src*="dark"]),
main.flex.flex-col.w-full.min-h-screen > section:first-child img[src*="logo"]:not(.hidden):not([src*="dark"]) {
  display: block !important;
  height: 2.75rem !important;
  width: auto !important;
  max-width: min(220px, 100%) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  overflow: visible !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
}

main.flex.flex-col.w-full.min-h-screen > section:first-child img.hidden,
main.flex.flex-col.w-full.min-h-screen > section:first-child img[src*="logo_dark"],
main.flex.flex-col.w-full.min-h-screen > section:first-child img[src*="logo-dark"],
main.flex.flex-col.w-full.min-h-screen > section:first-child img[src*="dark"] {
  display: none !important;
}

main.flex.flex-col.w-full.min-h-screen > section.bg-white,
main.flex.flex-col.w-full.min-h-screen > section.shadow,
main.flex.flex-col.w-full.min-h-screen > section.sm\:mx-auto {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 1.5rem 2.75rem 2.75rem !important;
  background: var(--rig-surface) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  align-self: stretch !important;
}

main.flex.flex-col.w-full.min-h-screen form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.15rem !important;
}

main.flex.flex-col.w-full.min-h-screen form.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
}

main.flex.flex-col.w-full.min-h-screen label,
main.flex.flex-col.w-full.min-h-screen .text-sm {
  font-family: var(--rig-sans) !important;
  color: var(--rig-muted) !important;
}

main.flex.flex-col.w-full.min-h-screen input[type="text"],
main.flex.flex-col.w-full.min-h-screen input[type="email"],
main.flex.flex-col.w-full.min-h-screen input[type="password"] {
  background-color: var(--rig-surface-2) !important;
  border-color: var(--rig-line-strong) !important;
  border-radius: 10px !important;
  font-family: var(--rig-sans) !important;
  color: var(--rig-ink) !important;
}

main.flex.flex-col.w-full.min-h-screen button[type="submit"] {
  margin-top: 0.35rem !important;
  border-radius: 999px !important;
  font-family: var(--rig-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  min-height: 2.85rem !important;
}

main.flex.flex-col.w-full.min-h-screen a[href*="google"],
main.flex.flex-col.w-full.min-h-screen [data-testid="google-oauth"],
main.flex.flex-col.w-full.min-h-screen .flex.flex-col.gap-4:has(a[href*="google"]) {
  display: none !important;
}

@media (max-width: 768px) {
  main.flex.flex-col.w-full.min-h-screen {
    grid-template-columns: 1fr !important;
    grid-template-rows: 160px auto auto !important;
    width: min(420px, calc(100vw - 1.5rem)) !important;
    min-height: 0 !important;
    margin: 1.25rem auto !important;
  }

  main.flex.flex-col.w-full.min-h-screen::before {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 160px !important;
  }

  main.flex.flex-col.w-full.min-h-screen::after {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 0 1.25rem 1.5rem !important;
    font-size: 1.35rem !important;
    max-width: 14rem !important;
  }

  main.flex.flex-col.w-full.min-h-screen > section:first-child {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 2rem 1.75rem 0 !important;
  }

  main.flex.flex-col.w-full.min-h-screen > section.bg-white,
  main.flex.flex-col.w-full.min-h-screen > section.shadow,
  main.flex.flex-col.w-full.min-h-screen > section.sm\:mx-auto {
    grid-column: 1 !important;
    grid-row: 3 !important;
    padding: 1.25rem 1.75rem 1.75rem !important;
  }
}

/* Hide Chatwoot “Powered by” where visible in dashboard chrome */
.branding--link {
  display: none !important;
}