/*
 * Flow High CRM - global theme.
 * Loaded from <head> on every page.
 *
 *  1. In-app palette: the app's blue/accent scale becomes Flow High blue, in light and dark.
 *  2. Sign-in screens: light/dark appearance (Auto by default), brand panel beside the
 *     form, 44px controls, entrance motion.
 *
 * Selectors use elements, attributes and the classes set by flowhigh.js, never the app's
 * generated class names, so they survive upgrades. `.light.light` / `.dark.dark` out-rank
 * the app's own `.light` / `.dark` rules (including display-p3 variants).
 */

/* ------------------------------------------------------- 1. light theme -- */
.light.light {
  --t-color-blue: #0071e3;
  --t-color-blue1: #fbfdff;
  --t-color-blue2: #f4f9ff;
  --t-color-blue3: #e6f1ff;
  --t-color-blue4: #d5e8ff;
  --t-color-blue5: #c2ddff;
  --t-color-blue6: #a9cfff;
  --t-color-blue7: #86bbff;
  --t-color-blue8: #4f9cf9;
  --t-color-blue9: #0071e3;
  --t-color-blue10: #0068d1;
  --t-color-blue11: #0058b0;
  --t-color-blue12: #0b2a52;

  --t-accent-accent1: #fbfdff;
  --t-accent-accent2: #f4f9ff;
  --t-accent-accent3: #e6f1ff;
  --t-accent-accent4: #d5e8ff;
  --t-accent-accent5: #c2ddff;
  --t-accent-accent6: #a9cfff;
  --t-accent-accent7: #86bbff;
  --t-accent-accent8: #4f9cf9;
  --t-accent-accent9: #0071e3;
  --t-accent-accent10: #0068d1;
  --t-accent-accent11: #0058b0;
  --t-accent-accent12: #0b2a52;
  --t-accent-accent3570: #86bbff;
  --t-accent-accent4060: #86bbff;
  --t-accent-primary: #d5e8ff;
  --t-accent-secondary: #d5e8ff;
  --t-accent-tertiary: #e6f1ff;
  --t-accent-quaternary: #f4f9ff;

  --t-border-color-blue: #86bbff;
  --t-background-transparent-blue: #0071e314;
}

/* -------------------------------------------------------- 1. dark theme -- */
.dark.dark {
  --t-color-blue: #0a84ff;
  --t-color-blue1: #0b1118;
  --t-color-blue2: #0f1620;
  --t-color-blue3: #0c2240;
  --t-color-blue4: #0a2c55;
  --t-color-blue5: #0d3767;
  --t-color-blue6: #13457c;
  --t-color-blue7: #1a5596;
  --t-color-blue8: #1f68bb;
  --t-color-blue9: #0a84ff;
  --t-color-blue10: #3a9bff;
  --t-color-blue11: #6cb6ff;
  --t-color-blue12: #d6e9ff;

  --t-accent-accent1: #0b1118;
  --t-accent-accent2: #0f1620;
  --t-accent-accent3: #0c2240;
  --t-accent-accent4: #0a2c55;
  --t-accent-accent5: #0d3767;
  --t-accent-accent6: #13457c;
  --t-accent-accent7: #1a5596;
  --t-accent-accent8: #1f68bb;
  --t-accent-accent9: #0a84ff;
  --t-accent-accent10: #3a9bff;
  --t-accent-accent11: #6cb6ff;
  --t-accent-accent12: #d6e9ff;
  --t-accent-accent3570: #1a5596;
  --t-accent-accent4060: #1a5596;
  --t-accent-primary: #123f73;
  --t-accent-secondary: #123f73;
  --t-accent-tertiary: #0d2d52;
  --t-accent-quaternary: #0d1a2b;

  --t-border-color-blue: #1f68bb;
  --t-background-transparent-blue: #0a84ff2e;
}

::selection {
  background: rgba(10, 132, 255, 0.3);
}

/* ------------------------------------------------- vendor links (hidden) -- */
a[href*="twenty.com"],
a[href*="twentyhq."],
a[href*="github.com/twentyhq"],
[data-fh-hidden] {
  display: none !important;
}

/* ---------------------------------------------- 2. sign-in: appearance -- */
/* flowhigh.js copies the app's own light or dark variables onto the sign-in screens
   (html.fh-auth-route.fh-scheme-*); the brand values below sit on top of them.
   Contrast figures are against the screen background. */
html.fh-auth-route.fh-auth-route.fh-scheme-dark {
  --fh-bg: #000000;
  --fh-label: #f5f5f7;        /* 19.3:1 */
  --fh-secondary: #a1a1a6;    /*  8.1:1 */
  --fh-field: #1c1c1e;
  --fh-field-border: #5a5a5e; /*  3.0:1 */
  --fh-placeholder: #8e8e93;  /*  5.2:1 on the field */
  --fh-focus: #0a84ff;
  --fh-focus-ring: rgba(10, 132, 255, 0.35);
  --fh-divider: rgba(255, 255, 255, 0.08);
  --fh-track: rgba(118, 118, 128, 0.24);
  --fh-thumb: #636366;

  color-scheme: dark;
  --t-background-primary: #1c1c1e;
  --t-color-blue: #0a84ff;
  --t-border-color-blue: #0a84ff;
  --t-accent-accent9: #0a84ff;
  --t-accent-accent10: #3a9bff;
}

html.fh-auth-route.fh-auth-route.fh-scheme-light {
  --fh-bg: #ffffff;
  --fh-label: #1d1d1f;        /* 16.8:1 */
  --fh-secondary: #6e6e73;    /*  5.1:1 */
  --fh-field: #ffffff;
  --fh-field-border: #8e8e93; /*  3.3:1 */
  --fh-placeholder: #6e6e73;  /*  5.1:1 */
  --fh-focus: #0071e3;
  --fh-focus-ring: rgba(0, 113, 227, 0.25);
  --fh-divider: rgba(0, 0, 0, 0.08);
  --fh-track: rgba(118, 118, 128, 0.12);
  --fh-thumb: #ffffff;

  color-scheme: light;
  --t-background-primary: #ffffff;
  --t-color-blue: #0071e3;
  --t-border-color-blue: #0071e3;
  --t-accent-accent9: #0071e3;
  --t-accent-accent10: #0068d1;
}

/* One class more than the copied theme variables (html.fh-auth-route.fh-scheme-*). */
html.fh-auth-route.fh-auth-route.fh-auth-route {
  --fh-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, sans-serif;
  --fh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fh-action: #0071e3;       /* white label 4.7:1 */

  --t-font-family: var(--fh-font);
  --t-background-secondary: var(--fh-bg);
  --t-font-color-primary: var(--fh-label);
  --t-font-color-secondary: var(--fh-secondary);
  --t-font-color-tertiary: var(--fh-secondary);
  --t-background-primary-inverted: var(--fh-action);
  --t-background-primary-inverted-hover: #0077ed;
  --t-font-color-inverted: #ffffff;
}

html.fh-auth-route,
html.fh-auth-route body {
  background: var(--fh-bg) !important;
  transition: background-color 0.35s ease;
}

html.fh-auth-route #root {
  color: var(--fh-label);
  font-family: var(--fh-font);
  -webkit-font-smoothing: antialiased;
}

/* The brand panel carries the logo; the form's logo (and workspace badge) would repeat it. */
html.fh-auth-route #root div:has(> div > a[href="/welcome"]) {
  display: none !important;
}

/* Form title ("Welcome, ...") */
html.fh-auth-route #root div:has(> div > a[href="/welcome"]) + div,
html.fh-auth-route #root div:has(> div > a[href="/welcome"]) + div div {
  color: var(--fh-label);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Text fields: 44px tall, 17px text */
html.fh-auth-route #root input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  box-sizing: border-box;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--fh-field-border);
  border-radius: 12px;
  background: var(--fh-field);
  color: var(--fh-label);
  font-family: var(--fh-font);
  font-size: 17px;
  letter-spacing: -0.01em;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.35s ease;
}

html.fh-auth-route #root input::placeholder {
  color: var(--fh-placeholder);
}

html.fh-auth-route #root input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--fh-focus);
  box-shadow: 0 0 0 4px var(--fh-focus-ring);
  outline: none;
}

html.fh-auth-route #root input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--fh-field) inset;
  -webkit-text-fill-color: var(--fh-label);
  caret-color: var(--fh-label);
}

/* Primary action: one blue button per view */
html.fh-auth-route #root button[type="submit"] {
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--fh-action);
  box-shadow: none;
  color: #ffffff;
  font-family: var(--fh-font);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color 0.15s ease, transform 0.15s var(--fh-ease), opacity 0.2s ease;
}

html.fh-auth-route #root button[type="submit"] * {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

html.fh-auth-route #root button[type="submit"]:hover:not(:disabled) {
  background: #0077ed;
}

html.fh-auth-route #root button[type="submit"]:active:not(:disabled) {
  background: #0062c4;
  transform: scale(0.985);
}

html.fh-auth-route #root button[type="submit"]:disabled {
  background: var(--fh-action);
  opacity: 0.4;
}

html.fh-auth-route #root button[type="submit"]:focus-visible {
  outline: 2px solid var(--fh-focus);
  outline-offset: 3px;
}

/* --------------------------------------------- 2. sign-in: split layout -- */
html.fh-split {
  --fh-panel-width: min(52vw, 820px);
}

#fh-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: var(--fh-panel-width);
  border-right: 1px solid var(--fh-divider);
}

html.fh-split #root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--fh-panel-width);
  overflow-y: auto;
}

/* Compact widths: the form gets the whole screen; the panel keeps only the logo. */
@media (max-width: 899px) {
  #fh-panel {
    right: 0;
    bottom: auto;
    width: auto;
    border-right: 0;
    pointer-events: none;
  }

  html.fh-split #root {
    left: 0;
  }
}

/* ------------------------------------- 2. sign-in: appearance control -- */
/* Auto / Light / Dark, top right. Auto follows the system setting. */
#fh-appearance {
  --fh-segment: 34px;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 3;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--fh-segment);
  padding: 3px;
  border: 1px solid var(--fh-track-border, transparent);
  border-radius: 999px;
  background: var(--fh-track);
  box-shadow: inset 0 1px 0 var(--fh-track-highlight, transparent), 0 8px 24px var(--fh-track-shadow, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* The selected segment: a capsule that springs to the new choice. */
.fh-appearance__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: var(--fh-segment);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: var(--fh-thumb);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.06), inset 0 1px 0 var(--fh-thumb-highlight, transparent);
  transform: translateX(calc(var(--fh-thumb-index, 0) * var(--fh-segment)));
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.35s ease;
}

#fh-appearance button {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--fh-segment);
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fh-secondary);
  cursor: pointer;
  transition: color 0.25s ease;
}

#fh-appearance button svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--fh-ease);
}

#fh-appearance button:hover,
#fh-appearance button[aria-checked="true"] {
  color: var(--fh-label);
}

#fh-appearance button:hover:not([aria-checked="true"]) svg {
  transform: scale(1.1);
}

#fh-appearance button:active svg {
  transform: scale(0.85);
}

#fh-appearance button:focus-visible {
  outline: 2px solid var(--fh-focus);
  outline-offset: 1px;
}

/* Twenty gives every element a squircle corner shape; capsules need true round ends. */
#fh-appearance,
#fh-appearance button,
.fh-appearance__thumb {
  corner-shape: round;
}

@media (pointer: coarse) {
  #fh-appearance {
    --fh-segment: 44px;
  }

  #fh-appearance button {
    height: 36px;
  }
}

/* ------------------------------------------------- 2. sign-in: motion -- */
@media (prefers-reduced-motion: no-preference) {
  /* The form slides in just after the headline starts. */
  html.fh-split #root > * {
    animation: fh-form-in 0.9s var(--fh-ease) 0.35s both;
  }

  #fh-appearance {
    animation: fh-fade-in 0.6s ease 0.9s both;
  }

  /* Switching appearance cross-fades the whole screen. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.45s;
    animation-timing-function: ease;
  }
}

@keyframes fh-form-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes fh-fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.fh-auth-route #root input,
  html.fh-auth-route #root button[type="submit"],
  html.fh-auth-route body,
  .fh-appearance__thumb {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  html.fh-auth-route.fh-auth-route.fh-scheme-dark {
    --fh-field-border: #8e8e93;
    --fh-divider: rgba(255, 255, 255, 0.3);
  }

  html.fh-auth-route.fh-auth-route.fh-scheme-light {
    --fh-field-border: #48484a;
    --fh-divider: rgba(0, 0, 0, 0.3);
  }
}

/* -------------------------------------------------- 2. sign-in: glass -- */
/* Split screens: a slowly drifting brand backdrop fills the screen, the brand panel sits
   directly on it, and the form floats on a frosted-glass sheet. Text contrast is checked
   against the brightest part of the backdrop behind each surface. */
html.fh-split.fh-split.fh-scheme-dark {
  --fh-bg: #03060f;
  --fh-glow-1: rgba(10, 132, 255, 0.5);
  --fh-glow-2: rgba(0, 192, 240, 0.32);
  --fh-glow-3: rgba(46, 64, 180, 0.5);
  --fh-glass: rgba(20, 22, 30, 0.52);
  --fh-glass-solid: #15171e;
  --fh-glass-sheen: rgba(255, 255, 255, 0.06);
  --fh-glass-border: rgba(255, 255, 255, 0.14);
  --fh-glass-highlight: rgba(255, 255, 255, 0.1);
  --fh-glass-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
  --fh-field: rgba(255, 255, 255, 0.07);
  --fh-field-border: rgba(255, 255, 255, 0.32); /* 3.1:1 */
  --fh-placeholder: #9a9aa0;
  --fh-track: rgba(255, 255, 255, 0.07);
  --fh-track-border: rgba(255, 255, 255, 0.12);
  --fh-track-highlight: rgba(255, 255, 255, 0.08);
  --fh-track-shadow: rgba(0, 0, 0, 0.3);
  --fh-thumb: rgba(255, 255, 255, 0.2);
  --fh-thumb-highlight: rgba(255, 255, 255, 0.25);
}

html.fh-split.fh-split.fh-scheme-light {
  --fh-bg: #e8edf6;
  --fh-glow-1: rgba(0, 113, 227, 0.3);
  --fh-glow-2: rgba(0, 192, 240, 0.32);
  --fh-glow-3: rgba(110, 130, 255, 0.28);
  --fh-glass: rgba(255, 255, 255, 0.58);
  --fh-glass-solid: #ffffff;
  --fh-glass-sheen: rgba(255, 255, 255, 0.5);
  --fh-glass-border: rgba(255, 255, 255, 0.8);
  --fh-glass-highlight: rgba(255, 255, 255, 0.95);
  --fh-glass-shadow: 0 40px 100px rgba(20, 40, 90, 0.16);
  --fh-secondary: #55555a;                      /* 6.1:1 on the glass */
  --fh-placeholder: #5f5f64;
  --fh-field: rgba(255, 255, 255, 0.72);
  --fh-field-border: rgba(0, 0, 0, 0.32);       /* 3.2:1 */
  --fh-track: rgba(255, 255, 255, 0.45);
  --fh-track-border: rgba(255, 255, 255, 0.85);
  --fh-track-highlight: #ffffff;
  --fh-track-shadow: rgba(20, 40, 90, 0.1);
  --fh-thumb: #ffffff;
  --fh-thumb-highlight: #ffffff;
}

/* The form's own full-screen backgrounds give way to the glass. */
html.fh-split #root {
  --t-background-secondary: transparent;
}

/* The backdrop: three soft brand-colored light fields that drift very slowly. */
html.fh-split body::before {
  content: "";
  position: fixed;
  inset: -15vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 22% 18%, var(--fh-glow-3), transparent 70%),
    radial-gradient(42vmax 42vmax at 80% 28%, var(--fh-glow-1), transparent 70%),
    radial-gradient(40vmax 40vmax at 62% 88%, var(--fh-glow-2), transparent 70%);
  transition: opacity 0.35s ease;
}

html.fh-split #fh-panel {
  border-right: 0;
}

html.fh-split #root,
#fh-skeleton {
  top: 16px;
  right: 16px;
  bottom: 16px;
  left: var(--fh-panel-width);
  border-radius: 28px;
}

html.fh-split #root {
  z-index: 1;
  overflow-x: hidden;
  border: 1px solid var(--fh-glass-border);
  background: linear-gradient(140deg, var(--fh-glass-sheen), transparent 45%), var(--fh-glass);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--fh-glass-shadow), inset 0 1px 0 var(--fh-glass-highlight);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

html.fh-split #fh-appearance {
  top: 30px;
  right: 30px;
}

/* Twenty sizes its layout to the window height (100dvh); inside the inset glass sheet that
   would always overflow by a few pixels and show a scrollbar. Cap the layout layers to the
   sheet, and keep a slim scrollbar for when the content really is taller. */
html.fh-split #root > div,
html.fh-split #root > div > div,
html.fh-split #root > div > div > div,
html.fh-split #root > div > div > div > div,
html.fh-split #root > div > div > div > div > div,
html.fh-split #root > div > div > div > div > div > div {
  max-height: 100%;
}

html.fh-split #root {
  scrollbar-width: thin;
  scrollbar-color: var(--fh-glass-border) transparent;
}

/* Shown in the glass sheet until the real form has loaded. */
#fh-skeleton {
  position: fixed;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#fh-skeleton.is-done {
  opacity: 0;
}

.fh-skeleton__column {
  display: grid;
  gap: 12px;
  width: min(440px, 100% - 80px);
}

.fh-skeleton__bar {
  height: 44px;
  border-radius: 12px;
  background: var(--fh-field);
  box-shadow: inset 0 0 0 1px var(--fh-glass-border);
  overflow: hidden;
}

.fh-skeleton__bar--title {
  justify-self: center;
  width: 62%;
  height: 30px;
  margin-bottom: 24px;
  border-radius: 8px;
}

.fh-skeleton__bar--action {
  background: var(--fh-action);
  opacity: 0.35;
}

@media (max-width: 899px) {
  html.fh-split #root,
  #fh-skeleton {
    top: 72px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border-radius: 24px;
  }

  html.fh-split #fh-appearance {
    top: 20px;
    right: 20px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.fh-split body::before {
    animation: fh-drift 30s ease-in-out infinite alternate;
  }

  .fh-skeleton__bar::after {
    content: "";
    display: block;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--fh-glass-highlight), transparent);
    transform: translateX(-100%);
    animation: fh-shimmer 1.4s ease-in-out infinite;
  }

  /* The real form replaces the placeholder quickly. */
  html.fh-split #root > * {
    animation-duration: 0.6s;
    animation-delay: 0s;
  }
}

@keyframes fh-drift {
  from {
    transform: translate3d(-3%, 2%, 0) rotate(0deg) scale(1);
  }
  to {
    transform: translate3d(3%, -2%, 0) rotate(6deg) scale(1.06);
  }
}

@keyframes fh-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* Reduce Transparency: solid surfaces, no backdrop. */
@media (prefers-reduced-transparency: reduce) {
  html.fh-split body::before {
    opacity: 0;
  }

  html.fh-split #root {
    background: var(--fh-glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  html.fh-split #root {
    background: var(--fh-glass-solid);
  }

  html.fh-split.fh-split.fh-scheme-dark {
    --fh-field-border: rgba(255, 255, 255, 0.55);
  }

  html.fh-split.fh-split.fh-scheme-light {
    --fh-field-border: rgba(0, 0, 0, 0.6);
  }
}

/* ---------------------------------------------------------------------------
   3. Sidebar: Log out, pinned over the bottom of the navigation (flowhigh.js)
   ------------------------------------------------------------------------- */
#fh-logout {
  position: fixed;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--t-border-radius-sm, 4px);
  background: var(--fh-logout-bg, transparent);
  color: var(--t-font-color-secondary, #666);
  font: inherit;
  font-family: var(--t-font-family, inherit);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#fh-logout:hover {
  background:
    linear-gradient(var(--t-background-transparent-light, rgba(0, 0, 0, 0.04)), var(--t-background-transparent-light, rgba(0, 0, 0, 0.04)))
    var(--fh-logout-bg, transparent);
  color: var(--t-font-color-danger, #e5484d);
}

#fh-logout:active {
  background:
    linear-gradient(var(--t-background-transparent-medium, rgba(0, 0, 0, 0.08)), var(--t-background-transparent-medium, rgba(0, 0, 0, 0.08)))
    var(--fh-logout-bg, transparent);
}

#fh-logout:focus-visible {
  outline: 2px solid var(--t-color-blue, #0071e3);
  outline-offset: 1px;
}

#fh-logout[hidden] {
  display: none;
}

#fh-logout svg {
  flex: none;
}

#fh-logout[aria-busy="true"] {
  opacity: 0.5;
  pointer-events: none;
}

#fh-logout.is-compact {
  justify-content: center;
  padding: 0;
}

#fh-logout.is-compact .fh-logout__label {
  display: none;
}

/* Room below the last navigation item, so the button never covers it. */
[data-fh-logout-room] {
  padding-bottom: 52px !important;
}