/* Reslvd look for Twenty (v2.50). Loaded after Twenty's own CSS by the
   switcher template, see twenty/theme/README.md.

   Look and feel only: colours, corners, shadows and type follow
   ../../design-system/tokens.css (Stratify-inspired: airy, soft, one sky-blue
   accent). Layout and spacing tokens are left alone on purpose.

   Twenty keeps its theme in `@layer twenty-ui` on `.light` / `.dark`.
   Unlayered rules beat layered ones, so redefining the same variables here
   wins without !important. Remove this file to get stock Twenty back. */

/* ---------- Shared (both themes) ---------- */

.light,
.dark {
  /* Plain round corners like Stratify, not Twenty's squircles. */
  --t-corner-shape: round;
  --t-border-radius-xs: 6px;
  --t-border-radius-sm: 8px;
  --t-border-radius-md: 12px;
  --t-border-radius-sm-round: 6px;
  --t-border-radius-md-round: 10px;
  --t-border-radius-lg: 20px;
  --t-border-radius-xl: 26px;
  --t-border-radius-xxl: 40px;

  --t-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --t-text-line-height-lg: 1.55;

  --t-table-horizontal-cell-padding: 10px;
  --t-clickable-element-background-transition: background 0.16s cubic-bezier(0.22, 1, 0.36, 1);

  /* Thinner outline icons, closer to Stratify's. */
  --t-icon-stroke-sm: 1.4;
  --t-icon-stroke-md: 1.6;
  --t-icon-stroke-lg: 1.9;
}

/* ---------- Bigger interface ----------
   Twenty's own "Scale" setting (Settings › Experience) zooms text, icons and
   spacing together without moving the layout. Raise the base by 10% (13px
   text becomes ~14.3px), the same as Twenty's "Large"; each person's own
   Scale choice still multiplies on top. */

html {
  --t-zoom: calc(var(--t-scale-user, 1) * 1.1);
}

@media (max-width: 768px) {
  html {
    --t-zoom: calc(var(--t-scale-user, 1) * 1.1846);
  }
}

/* ---------- Light ---------- */

.light {
  /* Sky-blue accent scale (replaces Twenty's indigo). Buttons, links,
     selection and focus all read from blue / accent. */
  --t-color-blue: #3e9df2;
  --t-color-blue1: #fbfdff;
  --t-color-blue2: #f3f8fe;
  --t-color-blue3: #e7f2fd;
  --t-color-blue4: #d7eafb;
  --t-color-blue5: #c6e0f9;
  --t-color-blue6: #b0d4f6;
  --t-color-blue7: #93c4f2;
  --t-color-blue8: #6cafee;
  --t-color-blue9: #3e9df2;
  --t-color-blue10: #2288e6;
  --t-color-blue11: #2d6596;
  --t-color-blue12: #163754;

  --t-accent-primary: #d7eafb;
  --t-accent-secondary: #d7eafb;
  --t-accent-tertiary: #e7f2fd;
  --t-accent-quaternary: #f3f8fe;
  --t-accent-accent3570: #6cafee;
  --t-accent-accent4060: #6cafee;
  --t-accent-accent1: #fbfdff;
  --t-accent-accent2: #f3f8fe;
  --t-accent-accent3: #e7f2fd;
  --t-accent-accent4: #d7eafb;
  --t-accent-accent5: #c6e0f9;
  --t-accent-accent6: #b0d4f6;
  --t-accent-accent7: #93c4f2;
  --t-accent-accent8: #6cafee;
  --t-accent-accent9: #3e9df2;
  --t-accent-accent10: #2288e6;
  --t-accent-accent11: #2d6596;
  --t-accent-accent12: #163754;
  --t-buttons-secondary-text-color: #93c4f2;
  --t-border-color-blue: #b0d4f6;
  --t-background-transparent-blue: rgba(62, 157, 242, 0.1);
  --t-tag-background-blue: #e3f0fd;
  --t-tag-text-blue: #2565a4;
  --t-illustration-icon-color-blue: #6cafee;
  --t-illustration-icon-fill-blue: #d7eafb;

  /* Surfaces: white work area on a pale, cool frame. */
  --t-background-primary: #ffffff;
  --t-background-secondary: #f4f7fb;
  --t-background-tertiary: #edf1f6;
  --t-background-quaternary: #e5eaf1;
  --t-background-noisy: none;
  --t-background-transparent-lighter: rgba(30, 60, 100, 0.025);
  --t-background-transparent-light: rgba(30, 60, 100, 0.045);
  --t-background-transparent-medium: rgba(30, 60, 100, 0.08);
  --t-background-transparent-strong: rgba(30, 60, 100, 0.15);
  --t-background-overlay-secondary: rgba(16, 28, 44, 0.32);
  --t-background-overlay-tertiary: rgba(16, 28, 44, 0.06);
  --t-background-primary-inverted: #16191f;
  --t-background-primary-inverted-hover: #3a404a;
  --t-background-inverted-primary: #16191f;
  --t-background-inverted-secondary: #3a404a;

  /* Cool neutral greys instead of flat grey. */
  --t-gray-scale-gray1: #ffffff;
  --t-gray-scale-gray2: #fafbfd;
  --t-gray-scale-gray3: #eff5fb; /* also the app frame: a faint sky wash */
  --t-gray-scale-gray4: #eef1f5;
  --t-gray-scale-gray5: #e8ebf0;
  --t-gray-scale-gray6: #d7dce4;
  --t-gray-scale-gray7: #c6ccd5;
  --t-gray-scale-gray8: #aab1bc;
  --t-gray-scale-gray9: #959daa;
  --t-gray-scale-gray10: #7b8390;
  --t-gray-scale-gray11: #5d6673;
  --t-gray-scale-gray12: #1d2128;

  /* Fewer, lighter lines. */
  --t-border-color-light: #f0f2f6;
  --t-border-color-medium: #e8ebf0;
  --t-border-color-strong: #d7dce4;
  --t-border-color-transparent-strong: rgba(30, 60, 100, 0.08);

  --t-font-color-primary: #16191f;
  --t-font-color-secondary: #5d6673;
  --t-font-color-tertiary: #8a92a0;
  --t-font-color-light: #aab1bc;
  --t-font-color-extra-light: #c6ccd5;

  /* Soft, blue-tinted shadows for menus, dialogs and floating panels. */
  --t-box-shadow-color: rgba(22, 32, 52, 0.04);
  --t-box-shadow-light: 0 1px 2px rgba(22, 32, 52, 0.04), 0 4px 14px -6px rgba(30, 60, 100, 0.12);
  --t-box-shadow-strong: 0 2px 6px rgba(22, 32, 52, 0.06), 0 24px 56px -14px rgba(30, 60, 100, 0.26);
  --t-box-shadow-super-heavy: 0 0 0 1px rgba(30, 60, 100, 0.05), 0 32px 80px -20px rgba(30, 60, 100, 0.34);
  --t-box-shadow-sidebar: none;
  --t-box-shadow-bottom-panel: 0 -8px 30px -12px rgba(30, 60, 100, 0.16);

  --t-tooltip-background: rgba(18, 20, 24, 0.9);

  /* Menus are frosted glass in Twenty; keep them nearly solid so colours
     behind a menu do not bleed through. */
  --t-background-transparent-primary: rgba(255, 255, 255, 0.9);
  --t-background-transparent-secondary: rgba(255, 255, 255, 0.82);

  /* Select/stage tags use the design system's pastel tints. */
  --t-tag-background-green: #e7f7ee;   --t-tag-text-green: #1b7a4c;
  --t-tag-background-yellow: #fdf6df;  --t-tag-text-yellow: #8a5d0a;
  --t-tag-background-amber: #fdf6df;   --t-tag-text-amber: #8a5d0a;
  --t-tag-background-orange: #fdeee3;  --t-tag-text-orange: #a24b17;
  --t-tag-background-red: #fdeceb;     --t-tag-text-red: #c0362c;
  --t-tag-background-purple: #f0ecfd;  --t-tag-text-purple: #5b45bd;
  --t-tag-background-violet: #f0ecfd;  --t-tag-text-violet: #5b45bd;
  --t-tag-background-pink: #fde9f2;    --t-tag-text-pink: #b02f6b;
  --t-tag-background-sky: #e3f0fd;     --t-tag-text-sky: #2565a4;
  --t-tag-background-turquoise: #e3f6f3; --t-tag-text-turquoise: #13756a;
  --t-tag-background-gray: #f1f3f6;    --t-tag-text-gray: #5d6673;

  /* Status colours from the design system's tints. */
  --t-snack-bar-info-color: #2565a4;
  --t-snack-bar-info-background-color: #e3f0fd;
  --t-snack-bar-success-color: #1b7a4c;
  --t-snack-bar-success-background-color: #e7f7ee;
  --t-snack-bar-warning-color: #8a5d0a;
  --t-snack-bar-warning-background-color: #fdf6df;
  --t-snack-bar-error-color: #c0362c;
  --t-snack-bar-error-background-color: #fdeceb;
}

/* ---------- Dark: neutral charcoal, not navy ---------- */

.dark {
  --t-color-blue: #4ea6f4;
  --t-color-blue1: #0e141b;
  --t-color-blue2: #111a24;
  --t-color-blue3: #142436;
  --t-color-blue4: #172d44;
  --t-color-blue5: #1b3753;
  --t-color-blue6: #204264;
  --t-color-blue7: #275179;
  --t-color-blue8: #2f6496;
  --t-color-blue9: #4ea6f4;
  --t-color-blue10: #6db6f7;
  --t-color-blue11: #8fc8f9;
  --t-color-blue12: #d5eafd;

  --t-accent-primary: #1b3753;
  --t-accent-secondary: #1b3753;
  --t-accent-tertiary: #142436;
  --t-accent-quaternary: #111a24;
  --t-accent-accent3570: #2f6496;
  --t-accent-accent4060: #2f6496;
  --t-accent-accent1: #0e141b;
  --t-accent-accent2: #111a24;
  --t-accent-accent3: #142436;
  --t-accent-accent4: #172d44;
  --t-accent-accent5: #1b3753;
  --t-accent-accent6: #204264;
  --t-accent-accent7: #275179;
  --t-accent-accent8: #2f6496;
  --t-accent-accent9: #4ea6f4;
  --t-accent-accent10: #6db6f7;
  --t-accent-accent11: #8fc8f9;
  --t-accent-accent12: #d5eafd;
  --t-buttons-secondary-text-color: #8fc8f9;
  --t-border-color-blue: #275179;
  --t-background-transparent-blue: rgba(78, 166, 244, 0.12);
  --t-tag-background-blue: rgba(78, 166, 244, 0.12);
  --t-tag-text-blue: #93c8f8;

  --t-background-primary: #16171a;
  --t-background-secondary: #111214;
  --t-background-tertiary: #1d1e23;
  --t-background-quaternary: #25262c;
  --t-background-noisy: none;
  --t-background-primary-inverted: #ececef;
  --t-background-primary-inverted-hover: #c4c6cc;
  --t-background-inverted-primary: #ececef;
  --t-background-inverted-secondary: #c4c6cc;

  --t-border-color-light: #1f2025;
  --t-border-color-medium: #26282e;
  --t-border-color-strong: #33353c;

  --t-font-color-primary: #ececef;
  --t-font-color-secondary: #a3a6af;
  --t-font-color-tertiary: #7d818b;
  --t-font-color-light: #5f636c;
  --t-font-color-extra-light: #474a52;

  --t-box-shadow-light: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
  --t-box-shadow-strong: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 56px -14px rgba(0, 0, 0, 0.75);
  --t-box-shadow-super-heavy: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 32px 80px -20px rgba(0, 0, 0, 0.85);
  --t-box-shadow-sidebar: none;

  --t-background-transparent-primary: rgba(22, 23, 26, 0.92);
  --t-background-transparent-secondary: rgba(22, 23, 26, 0.84);

  /* No yellow on charcoal: attention tags become a muted sand. */
  --t-tag-background-yellow: rgba(214, 196, 164, 0.1); --t-tag-text-yellow: #d8cbb2;
  --t-tag-background-amber: rgba(214, 196, 164, 0.1);  --t-tag-text-amber: #d8cbb2;
  --t-tag-background-green: rgba(52, 199, 123, 0.12);  --t-tag-text-green: #74dca5;
  --t-tag-background-sky: rgba(78, 166, 244, 0.13);    --t-tag-text-sky: #93c8f8;
  --t-tag-background-purple: rgba(160, 136, 250, 0.13); --t-tag-text-purple: #c2b3fd;
  --t-tag-background-violet: rgba(160, 136, 250, 0.13); --t-tag-text-violet: #c2b3fd;
  --t-tag-background-red: rgba(244, 108, 98, 0.12);    --t-tag-text-red: #f6a19a;
  --t-tag-background-pink: rgba(240, 110, 170, 0.12);  --t-tag-text-pink: #f4a8cb;
  --t-tag-background-gray: rgba(255, 255, 255, 0.06);  --t-tag-text-gray: #a3a6af;

  --t-snack-bar-info-color: #93c8f8;
  --t-snack-bar-info-background-color: rgba(78, 166, 244, 0.11);
  --t-snack-bar-success-color: #74dca5;
  --t-snack-bar-success-background-color: rgba(52, 199, 123, 0.1);
  --t-snack-bar-warning-color: #d8cbb2;
  --t-snack-bar-warning-background-color: rgba(214, 196, 164, 0.07);
  --t-snack-bar-error-color: #f6a19a;
  --t-snack-bar-error-background-color: rgba(244, 108, 98, 0.1);
}

/* ---------- Page as a floating card (Stratify's white shell) ----------
   Uses the stable data-page-surface hook from Twenty's PageCardLayout; the
   card is its grandchild (StyledMainCardWrapper > StyledCard). Desktop only. */

@media (min-width: 768px) {
  [data-page-surface="main"] {
    padding: 8px 8px 8px 0;
  }

  [data-page-surface="main"] > div > div {
    border: 1px solid var(--t-border-color-medium);
    border-radius: var(--t-border-radius-lg);
    box-shadow: 0 1px 2px rgba(22, 32, 52, 0.04), 0 12px 32px -18px rgba(30, 60, 100, 0.18);
  }

  /* The record side panel (SidePanelForDesktop) floats as a matching card. */
  [data-click-outside-id="side-panel"] > aside {
    background: transparent;
    border-left: none;
    padding: 8px 8px 8px 0;
  }

  /* The first child is an absolute overlay for modals; the panel body is last. */
  [data-click-outside-id="side-panel"] > aside > div:last-child {
    background: var(--t-background-primary);
    border: 1px solid var(--t-border-color-medium);
    border-radius: var(--t-border-radius-lg);
    box-shadow: 0 1px 2px rgba(22, 32, 52, 0.04), 0 6px 16px -10px rgba(30, 60, 100, 0.18);
    overflow: hidden;
  }

  .dark [data-page-surface="main"] > div > div,
  .dark [data-click-outside-id="side-panel"] > aside > div:last-child {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 12px 32px -18px rgba(0, 0, 0, 0.7);
  }
}

/* ---------- Sidebar (Stratify style) ----------
   Stable class names from Twenty's NavigationDrawerItem / section titles.
   Element selectors add specificity over Linaria's lazily loaded CSS. */

:is(a, div).navigation-drawer-item {
  border-radius: var(--t-border-radius-md);
  min-height: 32px;
  height: auto;
  padding-block: 6px;
  padding-inline: 10px;
}

a.navigation-drawer-item[aria-current="page"] {
  background: var(--t-background-primary);
  box-shadow: 0 1px 2px rgba(22, 32, 52, 0.06), 0 4px 12px -6px rgba(30, 60, 100, 0.18);
  font-weight: var(--t-font-weight-semi-bold);
}

.dark a.navigation-drawer-item[aria-current="page"] {
  background: var(--t-background-quaternary);
  box-shadow: none;
}

div.section-title-label {
  color: var(--t-font-color-tertiary);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Tables: list rows, not a spreadsheet grid ----------
   Cells are `table-cell` (first column `table-cell-<row>-<col>`); only the
   column lines are hidden, kept transparent so widths do not change. */

div.table-cell,
div[class^="table-cell-"] {
  border-right-color: transparent;
}

div.header-cell {
  color: var(--t-font-color-tertiary);
}

/* ---------- Kanban cards: soft pastel tiles, no outline ----------
   The card is the element carrying data-selected/focused/active inside a
   board column. Selected and focused cards keep Twenty's own outline. */

[data-record-board-column-id] div[data-selected][data-focused][data-active] {
  border-radius: var(--t-border-radius-lg);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

[data-record-board-column-id] div[data-selected="false"][data-focused="false"] {
  background: #f2f6fb;
  border-color: transparent;
}

[data-record-board-column-id] div[data-selected="false"][data-focused="false"]:hover {
  background: var(--t-background-primary);
  box-shadow: 0 1px 2px rgba(22, 32, 52, 0.05), 0 10px 24px -12px rgba(30, 60, 100, 0.22);
}

.dark [data-record-board-column-id] div[data-selected="false"][data-focused="false"] {
  background: #1b1d22;
}

.dark [data-record-board-column-id] div[data-selected="false"][data-focused="false"]:hover {
  background: #23252b;
  box-shadow: none;
}

/* ---------- Sidebar icons: one calm grey, like Stratify ----------
   Twenty sets a colour per object through the SVG stroke attribute;
   a CSS stroke overrides it. */

.navigation-drawer-item svg {
  stroke: var(--t-font-color-tertiary);
}

.navigation-drawer-item[aria-current="page"] svg {
  stroke: var(--t-font-color-primary);
}

/* ---------- Tabs as soft pills (record pages, settings) ----------
   Twenty's Tabs read --tw-tabs-background; the underline is ::after. */

[class*="_tab_"][data-active] {
  --tw-tabs-background: var(--t-background-tertiary);
  font-weight: var(--t-font-weight-semi-bold);
}

[class*="_tab_"][data-active]::after {
  opacity: 0;
}

/* ---------- Tags and chips: pills with a same-hue border ---------- */

span[class*="_tag_"][data-variant="soft"] {
  border-radius: var(--t-border-radius-pill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  padding-inline: 8px;
}

a[class*="_chip_"][data-variant="soft"] {
  border-radius: var(--t-border-radius-pill);
}

/* ---------- Avatars: company logos in soft rounded tiles ----------
   People avatars are already circles (data-shape="circle"). */

span[data-shape="square"][data-size] {
  border-radius: 30%;
}

/* ---------- Record fields: grouped grey tiles with small labels ----------
   Each group (General, Contact, ...) is an accordion with data-align. */

/* --record-card-background-color is what a hovered field's overlay paints
   (white by default); match it to the tile so hovering stays seamless. */
[data-testid="record-fields-widget"] [data-align][data-color] {
  --reslvd-tile: #ebf2fa;
  --record-card-background-color: var(--reslvd-tile);
  background: var(--reslvd-tile);
  border-radius: var(--t-border-radius-lg);
  margin-bottom: 8px;
  padding: 4px 8px 6px;
}

.dark [data-testid="record-fields-widget"] [data-align][data-color] {
  --reslvd-tile: var(--t-background-tertiary);
}

[data-testid="record-fields-widget"] [data-align][data-color] header {
  color: var(--t-font-color-tertiary);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */

button[data-variant="solid"][data-color="accent"] {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  border-radius: var(--t-border-radius-pill);
  box-shadow: 0 1px 2px rgba(22, 32, 52, 0.08), 0 6px 14px -6px rgba(62, 157, 242, 0.6);
}

/* ---------- Sign-in page: sky backdrop, white card ----------
   Auth pages are the only ones whose logo links to /welcome. The card is the
   block holding the SSO button, the separator and the e-mail form. */

html:has(#root a[href="/welcome"]) body {
  background: radial-gradient(1100px 650px at 8% -8%, #cfe4f8 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #dbeaf8 0%, transparent 55%),
    radial-gradient(800px 500px at 60% 110%, #d8e8f7 0%, transparent 60%), #e6f0fa;
}

html.dark:has(#root a[href="/welcome"]) body {
  background: radial-gradient(1100px 650px at 8% -8%, rgba(62, 157, 242, 0.12) 0%, transparent 60%), #0c0d0f;
}

html:has(#root a[href="/welcome"]) #root {
  --t-background-secondary: transparent;
}

#root div:has(> [role="separator"]):has(> form) {
  background: var(--t-background-primary);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-xl);
  box-shadow: 0 40px 90px -40px rgba(40, 80, 130, 0.4), 0 0 0 1px rgba(40, 80, 130, 0.04);
  padding: 24px;
}

.dark #root div:has(> [role="separator"]):has(> form) {
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}

#root div:has(> [role="separator"]):has(> form) > form button {
  border-radius: var(--t-border-radius-pill);
}

/* Reslvd SSO is the team's way in, so it is the primary (sky) button. */
#root div:has(> [role="separator"]):has(> form) > div:first-child button[data-variant="outline"] {
  background: var(--t-color-blue) linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  border-color: transparent;
  border-radius: var(--t-border-radius-pill);
  box-shadow: 0 1px 2px rgba(22, 32, 52, 0.08), 0 8px 18px -8px rgba(62, 157, 242, 0.7);
  color: #ffffff;
  font-weight: var(--t-font-weight-semi-bold);
}

#root div:has(> [role="separator"]):has(> form) > div:first-child button[data-variant="outline"] * {
  color: inherit;
  stroke: currentColor;
}

/* The "Welcome, …" title: Stratify's big, light-weight headline. */
html:has(#root a[href="/welcome"]) #root div[data-duration]:not(:has(a)) {
  font-size: 2.1rem;
  font-weight: var(--t-font-weight-medium);
  letter-spacing: -0.02em;
}

/* ---------- Small global touches ---------- */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(62, 157, 242, 0.22);
}