/* ABC native Twenty theme. Loaded after the upstream stylesheet.
 * Keep data/status palettes and virtualized row dimensions owned by Twenty.
 * Only public CSS tokens and semantic component hooks are used here. */

.light,
.dark {
  --abc-brand: #c81738;
  --abc-brand-hover: #aa102e;
  --abc-brand-active: #8e0d28;
  --abc-nav: #101d30;
  --abc-nav-hover: #1c2c44;
  --abc-nav-selected: #2d2b41;
  --abc-focus: #3874cc;
  --t-font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-border-radius-xs: 3px;
  --t-border-radius-sm: 6px;
  --t-border-radius-md: 10px;
  --t-border-radius-sm-round: 6px;
  --t-border-radius-md-round: 10px;
  --t-border-radius-lg-round: 14px;
  --t-border-radius-lg: 16px;
  --t-border-radius-xl: 20px;
}

.light {
  --abc-surface: #ffffff;
  --abc-canvas: #f4f6fa;
  --abc-card-shadow: 0 3px 14px #18294406, 0 1px 3px #18294405;
  --abc-brand-text: #aa102e;
  --t-background-primary: #ffffff;
  --t-background-secondary: #f4f6fa;
  --t-background-tertiary: #edf1f6;
  --t-background-quaternary: #e5ebf3;
  --t-background-noisy: #f4f6fa;
  --t-background-inverted-primary: #17263c;
  --t-background-inverted-secondary: #465974;
  --t-background-transparent-primary: #ffffffcc;
  --t-background-transparent-secondary: #ffffff99;
  --t-background-transparent-strong: #17263c24;
  --t-background-transparent-medium: #17263c12;
  --t-background-transparent-light: #17263c08;
  --t-background-transparent-lighter: #17263c04;
  --t-background-overlay-primary: #101d30b8;
  --t-background-overlay-secondary: #101d3066;
  --t-background-overlay-tertiary: #101d3012;
  --t-border-color-strong: #bdc9da;
  --t-border-color-medium: #dfe5ee;
  --t-border-color-light: #edf1f6;
  --t-border-color-secondary-inverted: #61718a;
  --t-border-color-inverted: #17263c;
  --t-border-color-transparent-strong: #17263c14;
  --t-font-color-primary: #17263c;
  --t-font-color-secondary: #4e6079;
  --t-font-color-tertiary: #5d6b7f;
  --t-font-color-light: #627187;
  --t-font-color-extra-light: #9aa9bd;
  --t-font-color-inverted: #ffffff;
  --t-font-color-on-accent: #ffffff;
  --t-accent-primary: #f2c6d0;
  --t-accent-secondary: #f8dbe2;
  --t-accent-tertiary: #fff0f3;
  --t-accent-quaternary: #fff7f9;
  --t-accent-accent3570: #df8196;
  --t-accent-accent4060: #d56580;
  --t-accent-accent1: #fffafb;
  --t-accent-accent2: #fff7f9;
  --t-accent-accent3: #fff0f3;
  --t-accent-accent4: #fbe4ea;
  --t-accent-accent5: #f8dbe2;
  --t-accent-accent6: #f2c6d0;
  --t-accent-accent7: #eaa6b7;
  --t-accent-accent8: #df8196;
  --t-accent-accent9: #c81738;
  --t-accent-accent10: #aa102e;
  --t-accent-accent11: #9b1630;
  --t-accent-accent12: #57172a;
  --t-buttons-secondary-text-color: #aa102e;
  --t-box-shadow-color: #17263c0a;
  --t-box-shadow-light: 0 2px 8px #17263c08, 0 1px 2px #17263c08;
  --t-box-shadow-sidebar: -3px 0 14px #17263c05;
  --t-box-shadow-bottom-panel: 0 -4px 24px #17263c12;
  --t-box-shadow-strong: 0 12px 36px #17263c12, 0 2px 8px #17263c08;
  --t-box-shadow-super-heavy: 0 24px 72px #101d302e, 0 4px 16px #101d3014;
}

.dark {
  --abc-surface: #16243a;
  --abc-canvas: #101a2b;
  --abc-card-shadow: 0 3px 14px #0000001f, 0 1px 3px #0000001a;
  --abc-brand-text: #ff9caf;
  --abc-focus: #8db7ff;
  --t-background-primary: #16243a;
  --t-background-secondary: #101a2b;
  --t-background-tertiary: #1e3049;
  --t-background-quaternary: #293d58;
  --t-background-noisy: #101a2b;
  --t-background-inverted-primary: #e8eef8;
  --t-background-inverted-secondary: #bdcbe0;
  --t-background-transparent-primary: #16243acc;
  --t-background-transparent-secondary: #16243a99;
  --t-background-transparent-strong: #dfeaff26;
  --t-background-transparent-medium: #dfeaff17;
  --t-background-transparent-light: #dfeaff0d;
  --t-background-transparent-lighter: #dfeaff07;
  --t-background-overlay-primary: #060b14d1;
  --t-background-overlay-secondary: #060b148c;
  --t-background-overlay-tertiary: #060b142e;
  --t-border-color-strong: #536986;
  --t-border-color-medium: #31435d;
  --t-border-color-light: #25364e;
  --t-border-color-secondary-inverted: #bdcbe0;
  --t-border-color-inverted: #e8eef8;
  --t-border-color-transparent-strong: #dfeaff1c;
  --t-font-color-primary: #e8eef8;
  --t-font-color-secondary: #c0cde0;
  --t-font-color-tertiary: #a9bad2;
  --t-font-color-light: #98abc7;
  --t-font-color-extra-light: #7085a3;
  --t-font-color-inverted: #101d30;
  --t-font-color-on-accent: #ffffff;
  --t-accent-primary: #6b2e43;
  --t-accent-secondary: #57283c;
  --t-accent-tertiary: #352238;
  --t-accent-quaternary: #292235;
  --t-accent-accent3570: #b95673;
  --t-accent-accent4060: #d47089;
  --t-accent-accent1: #1c1b2b;
  --t-accent-accent2: #292235;
  --t-accent-accent3: #352238;
  --t-accent-accent4: #46243a;
  --t-accent-accent5: #57283c;
  --t-accent-accent6: #6b2e43;
  --t-accent-accent7: #954259;
  --t-accent-accent8: #b95673;
  --t-accent-accent9: #ee647f;
  --t-accent-accent10: #ff819a;
  --t-accent-accent11: #ff9caf;
  --t-accent-accent12: #ffe0e7;
  --t-buttons-secondary-text-color: #ff9caf;
  --t-box-shadow-color: #0000002e;
  --t-box-shadow-light: 0 2px 8px #0000001f, 0 1px 2px #0000001a;
  --t-box-shadow-sidebar: -3px 0 14px #00000014;
  --t-box-shadow-bottom-panel: 0 -4px 24px #00000033;
  --t-box-shadow-strong: 0 12px 36px #0000003d, 0 2px 8px #00000029;
  --t-box-shadow-super-heavy: 0 24px 72px #00000066, 0 4px 16px #0000003d;
}

html body {
  font-family: var(--t-font-family);
  background: var(--abc-canvas);
  color: var(--t-font-color-primary);
}

/* Button-level tokens keep semantic data colors and editor highlights intact. */
html :is(button, a, [role="button"])[data-variant="solid"]:is(
    [data-color="neutral"],
    [data-color="accent"]
  ) {
  --tw-button-background: var(--abc-brand);
  --tw-button-border: var(--abc-brand);
  --tw-button-color: #ffffff;
  --tw-button-hover: var(--abc-brand-hover);
  --tw-button-active: var(--abc-brand-active);
}

html :is(button, a, [role="button"])[data-color="accent"]:not(
    [data-variant="solid"]
  ) {
  --tw-button-color: var(--abc-brand-text);
}

/* The drawer remains navy in either mode. Portals inherit the root theme. */
html [data-click-outside-id="navigation-drawer"] {
  --t-background-primary: #18283f;
  --t-background-secondary: #101d30;
  --t-background-tertiary: #243751;
  --t-background-quaternary: #30435f;
  --t-background-noisy: #101d30;
  --t-background-transparent-primary: #18283fcc;
  --t-background-transparent-secondary: #18283f99;
  --t-background-transparent-strong: #e0eaff24;
  --t-background-transparent-medium: #e0eaff17;
  --t-background-transparent-light: #e0eaff0e;
  --t-background-transparent-lighter: #e0eaff08;
  --t-border-color-strong: #415573;
  --t-border-color-medium: #2e3d53;
  --t-border-color-light: #26364e;
  --t-border-color-transparent-strong: #e0eaff1a;
  --t-font-color-primary: #f0f4fb;
  --t-font-color-secondary: #c0cee0;
  --t-font-color-tertiary: #a5b7d0;
  --t-font-color-light: #9eafc7;
  --t-font-color-extra-light: #7a90af;
  --t-accent-quaternary: #2d2b41;
  --t-accent-tertiary: #382d45;
  background: var(--abc-nav);
  color: #f0f4fb;
  box-shadow: inset -1px 0 0 #223249;
  scrollbar-color: #41516a transparent;
  scrollbar-width: thin;
}

html [data-click-outside-id="navigation-drawer"] .navigation-drawer-item {
  min-height: 34px;
  border-radius: 10px;
  color: #c0cee0;
  transition: background-color 140ms ease, color 140ms ease;
}

html [data-click-outside-id="navigation-drawer"] .navigation-drawer-item:hover {
  background: var(--abc-nav-hover);
  color: #ffffff;
}

html [data-click-outside-id="navigation-drawer"] .navigation-drawer-item:is(
    [aria-current="page"],
    [aria-current="true"],
    :has(.navigation-drawer-item-label[aria-current])
  ) {
  background: var(--abc-nav-selected);
  border-color: #563042;
  box-shadow: inset 3px 0 0 #f04b68;
  color: #ffffff;
}

html [data-click-outside-id="navigation-drawer"] .section-title-container {
  letter-spacing: 0.025em;
  margin-top: 6px;
}

html [data-click-outside-id="navigation-drawer"] [data-testid="workspace-dropdown"] {
  color: #f0f4fb;
}

html [data-click-outside-id="navigation-drawer"] :is(
    .navigation-drawer-item,
    [data-testid="workspace-dropdown"]
  ) svg {
  color: inherit;
}

html [data-testid="top-bar-title"] {
  color: var(--t-font-color-primary);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Native record cards retain their active, selection and drag states. */
html [data-click-outside-id="record-board-card"] [data-selected][data-focused][data-active] {
  border-radius: 12px;
  box-shadow: var(--abc-card-shadow);
}

html [data-click-outside-id="record-board-card"]
  [data-selected="false"][data-focused="false"][data-active="false"] {
  --record-card-background-color: var(--abc-surface);
}

html .table-row:hover .table-cell:not([data-selected]):not([data-dragging]) {
  background-color: var(--t-background-transparent-lighter);
}

/* Explicit keyboard focus complements native cell and canvas focus handling. */
html :is(button, a, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--abc-focus);
  outline-offset: 2px;
}

html [data-click-outside-id="navigation-drawer"] :focus-visible {
  outline-color: #a9caff;
}

/* Mobile Home is a native page, separate from the desktop drawer. */
@media (max-width: 768px) {
  html {
    --abc-mobile-nav-extra: max(
      4px,
      calc(44px / var(--t-zoom, 1) - var(--t-spacing-10))
    );
  }

  html :is(
      div:has(> #scroll-wrapper-scroll-wrapper-navigation-drawer),
      nav[aria-hidden]:has(> button[data-variant="ghost"])
    ) {
    --t-background-primary: #18283f;
    --t-background-secondary: #101d30;
    --t-background-tertiary: #243751;
    --t-background-quaternary: #30435f;
    --t-background-noisy: #101d30;
    --t-background-transparent-primary: #101d30;
    --t-background-transparent-secondary: #18283f99;
    --t-background-transparent-strong: #e0eaff24;
    --t-background-transparent-medium: #e0eaff17;
    --t-background-transparent-light: #e0eaff0e;
    --t-background-transparent-lighter: #e0eaff08;
    --t-border-color-strong: #415573;
    --t-border-color-medium: #2e3d53;
    --t-border-color-light: #26364e;
    --t-border-color-transparent-strong: #e0eaff1a;
    --t-font-color-primary: #f0f4fb;
    --t-font-color-secondary: #c0cee0;
    --t-font-color-tertiary: #a5b7d0;
    --t-font-color-light: #9eafc7;
    --t-font-color-extra-light: #7a90af;
    --t-accent-quaternary: #2d2b41;
    --t-accent-tertiary: #382d45;
    background: var(--abc-nav);
    color: #f0f4fb;
    scrollbar-color: #41516a transparent;
    scrollbar-width: thin;
  }

  html :is(
      [data-click-outside-id="navigation-drawer"],
      div:has(> #scroll-wrapper-scroll-wrapper-navigation-drawer)
    ) .navigation-drawer-item {
    min-height: 44px;
    border-radius: 10px;
    color: #c0cee0;
  }

  html div:has(> #scroll-wrapper-scroll-wrapper-navigation-drawer)
    .navigation-drawer-item:hover {
    background: var(--abc-nav-hover);
    color: #ffffff;
  }

  html div:has(> #scroll-wrapper-scroll-wrapper-navigation-drawer)
    .navigation-drawer-item:is(
      [aria-current="page"],
      [aria-current="true"],
      :has(.navigation-drawer-item-label[aria-current])
    ) {
    background: var(--abc-nav-selected);
    border-color: #563042;
    box-shadow: inset 3px 0 0 #f04b68;
    color: #ffffff;
  }

  html div:has(> #scroll-wrapper-scroll-wrapper-navigation-drawer)
    [data-testid="workspace-dropdown"] {
    color: #f0f4fb;
  }

  html :is(
      div:has(> #scroll-wrapper-scroll-wrapper-navigation-drawer),
      nav[aria-hidden]:has(> button[data-variant="ghost"])
    ) :focus-visible {
    outline-color: #a9caff;
  }

  html nav[aria-hidden]:has(> button[data-variant="ghost"]) {
    border-color: #31435d;
    box-shadow: 0 6px 20px #060b142e;
  }

  html nav[aria-hidden] > button[data-variant="ghost"] {
    block-size: max(var(--t-spacing-10), calc(44px / var(--t-zoom, 1)));
    inline-size: max(var(--t-spacing-10), calc(44px / var(--t-zoom, 1)));
    color: #c0cee0;
  }

  html nav[aria-hidden] > button[data-variant="ghost"][aria-current="page"] {
    background: var(--abc-nav-selected);
    box-shadow: inset 0 0 0 1px #563042;
    color: #ff9caf;
  }

  /* Keep the final item above the floating bar, including the safe area.
   * Settings already reserves its native bar height outside the scroll area. */
  html #scroll-wrapper-scroll-wrapper-navigation-drawer > div > div::after {
    content: "";
    display: block;
    height: calc(
      var(--t-spacing-10) + 2 * var(--t-spacing-1) + 2px +
      2 * var(--t-spacing-3) + var(--abc-mobile-nav-extra) +
      env(safe-area-inset-bottom, 0px)
    );
    pointer-events: none;
  }

  html #scroll-wrapper-scroll-wrapper-settings-navigation-drawer > div > div::after {
    content: "";
    display: block;
    height: var(--abc-mobile-nav-extra);
    pointer-events: none;
  }
}

/* Keep view actions reachable on narrow phones; table rows retain native sizes. */
@media (max-width: 480px) {
  html div:has(> div > div > [aria-controls^="view-picker-"]):has(
      > div > div > [aria-controls^="object-options-dropdown-id-"]
    ) {
    flex-shrink: 0;
    min-height: max-content;
  }

  html div:has(> div > [aria-controls^="view-picker-"]):has(
      > div > [aria-controls^="object-options-dropdown-id-"]
    ) {
    flex-shrink: 0;
    flex-wrap: wrap;
    height: auto;
    min-height: 39px;
    padding-block: 4px;
    row-gap: 4px;
  }

  html div:has(> div > [aria-controls^="view-picker-"]):has(
      > div > [aria-controls^="object-options-dropdown-id-"]
    ) > div {
    flex: 0 0 100%;
    justify-content: flex-start;
    min-width: 0;
  }

  html div:has(> div > [aria-controls^="view-picker-"]):has(
      > div > [aria-controls^="object-options-dropdown-id-"]
    ) > div:has(> [aria-controls^="object-options-dropdown-id-"]) {
    justify-content: flex-end;
  }

  /* The legacy filter can outgrow its anchor. Keep its native inverse zoom
   * and scrolling while fitting the panel above the mobile navigation bar. */
  html [id^="view-bar-main-filter-dropdown-id-"][id$="-options"][data-floating-ui-viewport] {
    transform: none !important;
    top: auto !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto;
    max-height: calc(100dvh - 160px - env(safe-area-inset-bottom, 0px));
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: var(--t-border-radius-md);
  }

  html [id^="view-bar-main-filter-dropdown-id-"][id$="-options"][data-floating-ui-viewport]
    [data-select-disable] {
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (prefers-reduced-motion: reduce) {
  html [data-click-outside-id="navigation-drawer"] .navigation-drawer-item {
    transition: none;
  }
}

@media (forced-colors: active) {
  html [data-click-outside-id="navigation-drawer"] .navigation-drawer-item[aria-current] {
    outline: 1px solid Highlight;
  }
}
[data-abc-about] {
  background: linear-gradient(130deg, #101d30, #203551);
  border: 1px solid #2b405b;
  border-radius: 20px;
  color: #ffffff;
  padding: clamp(24px, 5vw, 44px);
}

[data-abc-about] h1 {
  font-size: clamp(28px, 4vw, 36px);
  letter-spacing: -0.04em;
  margin: 8px 0 16px;
}

[data-abc-about] p {
  color: #d0d9e6;
  line-height: 1.6;
  max-width: 44ch;
}

[data-abc-about] .abc-about-eyebrow {
  color: #f38aa0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: 24px;
}

.abc-about-credits {
  color: var(--t-font-color-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.abc-about-credits summary { cursor: pointer; }
.abc-about-credits a { color: var(--t-font-color-primary); }