@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Sora:wght@600;700&display=swap');

.light,
.dark {
  --t-font-family: 'DM Sans', Inter, sans-serif !important;
}

.light {
  --t-accent-primary: color(display-p3 0.948 0.645 0.422) !important;
  --t-accent-secondary: color(display-p3 0.948 0.645 0.422) !important;
  --t-accent-tertiary: color(display-p3 0.974 0.845 0.737) !important;
  --t-accent-quaternary: color(display-p3 0.987 0.928 0.870) !important;
  --t-accent-accent3570: color(display-p3 0.850 0.490 0.230) !important;
  --t-accent-accent4060: color(display-p3 0.850 0.490 0.230) !important;
  --t-accent-accent1: color(display-p3 0.995 0.970 0.944) !important;
  --t-accent-accent2: color(display-p3 0.987 0.928 0.870) !important;
  --t-accent-accent3: color(display-p3 0.974 0.845 0.737) !important;
  --t-accent-accent4: color(display-p3 0.959 0.741 0.576) !important;
  --t-accent-accent5: color(display-p3 0.948 0.645 0.422) !important;
  --t-accent-accent6: color(display-p3 0.923 0.571 0.306) !important;
  --t-accent-accent7: color(display-p3 0.880 0.530 0.260) !important;
  --t-accent-accent8: color(display-p3 0.850 0.490 0.230) !important;
  --t-accent-accent9: #F28C28 !important;
  --t-accent-accent10: color(display-p3 0.768 0.402 0.163) !important;
  --t-accent-accent11: color(display-p3 0.510 0.247 0.098) !important;
  --t-accent-accent12: color(display-p3 0.335 0.168 0.061) !important;
  --t-buttons-secondary-text-color: color(display-p3 0.974 0.845 0.688) !important;
  --t-background-primary: color(display-p3 1 1 1) !important;
  --t-background-secondary: #F4F5FB !important;
  --t-background-tertiary: #ECEDF3 !important;
  --t-background-quaternary: #E6E8F0 !important;
  --t-border-color-strong: #D5D7E2 !important;
  --t-border-color-medium: #E6E8F0 !important;
  --t-border-color-light: #ECEDF3 !important;
  --t-font-color-primary: #141A33 !important;
  --t-font-color-secondary: #3A4060 !important;
  --t-font-color-tertiary: #5B6180 !important;
  --jai-table: color(display-p3 1 1 1);
  --jai-row: #ECEDF3;
}

html.light,
html.light body {
  background-color: #010B53 !important;
}

/* Dark text on the orange: white on #F28C28 is too faint to read comfortably. */
button[data-color='accent'][data-variant='solid'] {
  --tw-button-background: #F28C28 !important;
  --tw-button-hover: #E07B17 !important;
  --tw-button-active: #C9690C !important;
  --tw-button-color: #1A0E00 !important;
  background-image: linear-gradient(180deg, #FFB35C, #F28C28) !important;
  box-shadow: 0 2px 8px rgba(242, 140, 40, 0.35) !important;
}

button[data-color='accent'][data-variant='solid']:hover {
  background-image: linear-gradient(180deg, #FFA845, #E07B17) !important;
}

button[data-color='accent']:focus-visible {
  outline-color: #F28C28 !important;
}

.dark {
  --t-accent-primary: color(display-p3 0.410 0.260 0.249) !important;
  --t-accent-secondary: color(display-p3 0.410 0.260 0.249) !important;
  --t-accent-tertiary: color(display-p3 0.205 0.148 0.278) !important;
  --t-accent-quaternary: color(display-p3 0.132 0.107 0.291) !important;
  --t-accent-accent3570: color(display-p3 0.765 0.451 0.230) !important;
  --t-accent-accent4060: color(display-p3 0.765 0.451 0.230) !important;
  --t-accent-accent1: color(display-p3 0.082 0.079 0.301) !important;
  --t-accent-accent2: color(display-p3 0.132 0.107 0.291) !important;
  --t-accent-accent3: color(display-p3 0.205 0.148 0.278) !important;
  --t-accent-accent4: color(display-p3 0.292 0.194 0.263) !important;
  --t-accent-accent5: color(display-p3 0.410 0.260 0.249) !important;
  --t-accent-accent6: color(display-p3 0.527 0.322 0.235) !important;
  --t-accent-accent7: color(display-p3 0.651 0.389 0.229) !important;
  --t-accent-accent8: color(display-p3 0.765 0.451 0.230) !important;
  --t-accent-accent9: #F28C28 !important;
  --t-accent-accent10: color(display-p3 0.955 0.703 0.412) !important;
  --t-accent-accent11: color(display-p3 0.974 0.845 0.688) !important;
  --t-accent-accent12: color(display-p3 0.995 0.970 0.944) !important;
  --t-buttons-secondary-text-color: color(display-p3 0.974 0.845 0.688) !important;
  --t-background-primary: #141A36 !important;
  --t-background-secondary: #0B0F24 !important;
  --t-background-tertiary: #1C2347 !important;
  --t-background-quaternary: #262D52 !important;
  --t-border-color-strong: #3A4270 !important;
  --t-border-color-medium: #262D52 !important;
  --t-border-color-light: #1C2347 !important;
  --t-font-color-primary: #ECEEF8 !important;
  --t-font-color-secondary: #C5CAE3 !important;
  --t-font-color-tertiary: #A3A9C7 !important;
  --jai-table: #141A36;
  --jai-row: #1C2347;
}

html.dark,
html.dark body {
  background-color: #010B53 !important;
}

html.light #root > div,
html.dark #root > div {
  background-color: #010B53 !important;
}

#root > div > div > div:first-child {
  background-image: linear-gradient(180deg, #010B53 0%, #101E7A 100%) !important;
}

#root > div > div > div:first-child,
#root > div > div > div:first-child button,
#root > div > div > div:first-child a,
#root > div > div > div:first-child span,
#root > div > div > div:first-child .navigation-drawer-item {
  color: #fff !important;
}

.navigation-drawer-item {
  border-radius: 10px !important;
  --jai-hue: #AEB9CA;
}

.navigation-drawer-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.navigation-drawer-item[aria-current='page'] {
  background-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 3px 0 0 #F28C28 !important;
  color: #fff !important;
  font-weight: 600;
}

/* Each section gets its own hue on a soft tile, as in the reference design. jai-brand.js sets data-jai-hue. */
.navigation-drawer-item > div > div:first-child:has(> svg) {
  background-color: color-mix(in srgb, var(--jai-hue) 22%, transparent);
  border-radius: 7px;
  color: var(--jai-hue) !important;
  height: 22px;
  width: 22px;
}

.navigation-drawer-item > div > div:first-child:has(> svg) svg {
  color: var(--jai-hue) !important;
  stroke: var(--jai-hue) !important;
}

[data-jai-hue='violet'] { --jai-hue: #B79CFF; }
[data-jai-hue='blue'] { --jai-hue: #8FA6FF; }
[data-jai-hue='teal'] { --jai-hue: #4FD1C5; }
[data-jai-hue='pink'] { --jai-hue: #F57BB3; }
[data-jai-hue='green'] { --jai-hue: #5AD68A; }
[data-jai-hue='orange'] { --jai-hue: #FF9A5C; }
[data-jai-hue='gold'] { --jai-hue: #F2C35B; }
[data-jai-hue='sky'] { --jai-hue: #5DC2F5; }
[data-jai-hue='rose'] { --jai-hue: #FF7A93; }
[data-jai-hue='slate'] { --jai-hue: #AEB9CA; }

[data-jai-header='true'] {
  background-color: #010B53 !important;
  background-image: linear-gradient(135deg, #010B53 0%, #1B2A8C 55%, #3B2A9C 100%) !important;
  box-shadow: inset 0 -3px 0 #F28C28 !important;
  color: #fff !important;
}

[data-jai-header='true'] span,
[data-jai-header='true'] a,
[data-jai-header='true'] div,
[data-jai-header='true'] button:not([data-color='accent']) {
  color: #fff !important;
}

[data-jai-header='true'] span {
  font-family: Sora, 'DM Sans', sans-serif;
  font-weight: 600;
}

[data-jai-header='true'] button[data-color='accent'][data-variant='solid'] span {
  color: #1A0E00 !important;
  font-family: inherit;
}

[class*='table-cell'] {
  background-color: var(--jai-table) !important;
}

div:hover > [class*='table-cell'] {
  background-color: var(--jai-row) !important;
}

/* ---------- Data screens: tables, board, record pages ---------- */

.light {
  --jai-page: #F4F5FB;
  --jai-card: #FFFFFF;
  --jai-lane: #ECEDF3;
  --jai-ink: #141A33;
  --jai-muted: #5B6180;
  --jai-shadow: 0 1px 2px rgba(1, 11, 83, 0.04), 0 6px 20px rgba(1, 11, 83, 0.06);
  --jai-shadow-lift: 0 2px 4px rgba(1, 11, 83, 0.06), 0 14px 30px rgba(1, 11, 83, 0.12);
  --jai-violet: #7C3AED; --jai-violet-soft: #F1EAFE;
  --jai-blue: #3B5BDB; --jai-blue-soft: #E8EDFF;
  --jai-teal: #0F9488; --jai-teal-soft: #DDF5F2;
  --jai-pink: #DB2777; --jai-pink-soft: #FCE7F2;
  --jai-green: #16A34A; --jai-green-soft: #DFF6E7;
  --jai-orange: #EA580C; --jai-orange-soft: #FFEDE0;
  --jai-gold: #B7791F; --jai-gold-soft: #FDF3D8;
  --jai-sky: #0284C7; --jai-sky-soft: #E0F2FE;
  --jai-rose: #E11D48; --jai-rose-soft: #FFE4E9;
}

.dark {
  --jai-page: #0B0F24;
  --jai-card: #141A36;
  --jai-lane: #111633;
  --jai-ink: #ECEEF8;
  --jai-muted: #A3A9C7;
  --jai-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --jai-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 34px rgba(0, 0, 0, 0.5);
  --jai-violet: #B79CFF; --jai-violet-soft: #2A1D4D;
  --jai-blue: #8FA6FF; --jai-blue-soft: #1B2452;
  --jai-teal: #4FD1C5; --jai-teal-soft: #0F3432;
  --jai-pink: #F57BB3; --jai-pink-soft: #3D1628;
  --jai-green: #5AD68A; --jai-green-soft: #11331F;
  --jai-orange: #FF9A5C; --jai-orange-soft: #3A1F0E;
  --jai-gold: #F2C35B; --jai-gold-soft: #36290C;
  --jai-sky: #5DC2F5; --jai-sky-soft: #0C2A3D;
  --jai-rose: #FF7A93; --jai-rose-soft: #3B1119;
}

[data-jai-tint='violet'] { --jai-tint: var(--jai-violet); --jai-tint-soft: var(--jai-violet-soft); }
[data-jai-tint='blue'] { --jai-tint: var(--jai-blue); --jai-tint-soft: var(--jai-blue-soft); }
[data-jai-tint='teal'] { --jai-tint: var(--jai-teal); --jai-tint-soft: var(--jai-teal-soft); }
[data-jai-tint='pink'] { --jai-tint: var(--jai-pink); --jai-tint-soft: var(--jai-pink-soft); }
[data-jai-tint='green'] { --jai-tint: var(--jai-green); --jai-tint-soft: var(--jai-green-soft); }
[data-jai-tint='orange'] { --jai-tint: var(--jai-orange); --jai-tint-soft: var(--jai-orange-soft); }
[data-jai-tint='gold'] { --jai-tint: var(--jai-gold); --jai-tint-soft: var(--jai-gold-soft); }
[data-jai-tint='sky'] { --jai-tint: var(--jai-sky); --jai-tint-soft: var(--jai-sky-soft); }
[data-jai-tint='rose'] { --jai-tint: var(--jai-rose); --jai-tint-soft: var(--jai-rose-soft); }

/* The list or board sits on a raised card over the lavender page, as in the reference. */
[data-page-surface='main'] > div > div {
  background-color: var(--jai-page) !important;
}

[data-page-surface='main'] .record-index-container-gater-for-drag-select {
  background-color: var(--jai-card) !important;
  border-radius: 16px;
  box-shadow: var(--jai-shadow);
  margin: 0 12px 12px;
  overflow: hidden;
  width: auto !important;
}

/* Table header: a tinted band with small caps, each column icon in its own colour. */
.header-cell,
.header-cell .record-table-cell-content {
  background-color: var(--jai-lane) !important;
  color: var(--jai-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.header-cell.record-table-column-field-0 svg,
.header-cell.record-table-column-field-9 svg { color: var(--jai-violet) !important; }
.header-cell.record-table-column-field-1 svg,
.header-cell.record-table-column-field-10 svg { color: var(--jai-blue) !important; }
.header-cell.record-table-column-field-2 svg,
.header-cell.record-table-column-field-11 svg { color: var(--jai-teal) !important; }
.header-cell.record-table-column-field-3 svg { color: var(--jai-pink) !important; }
.header-cell.record-table-column-field-4 svg { color: var(--jai-green) !important; }
.header-cell.record-table-column-field-5 svg { color: var(--jai-orange) !important; }
.header-cell.record-table-column-field-6 svg { color: var(--jai-gold) !important; }
.header-cell.record-table-column-field-7 svg { color: var(--jai-sky) !important; }
.header-cell.record-table-column-field-8 svg { color: var(--jai-rose) !important; }

.footer-cell {
  background-color: var(--jai-lane) !important;
  color: var(--jai-muted) !important;
}

/* Record names read as the row's title. */
.record-table-column-field-0 [class*='_chip_'] {
  background-color: transparent !important;
  font-weight: 600;
}

/* Initials avatars become round pastel badges, as in the reference contacts list. */
[data-jai-tint][class*='_root_'],
[data-jai-tint][class*='_root_'] [class*='_fallback_'] {
  background-color: var(--jai-tint-soft) !important;
  color: var(--jai-tint) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

/* Record-name avatars read a little larger and bolder, closer to the reference rows. */
.record-table-cell-content [data-jai-tint][class*='_root_'] [class*='_fallback_'] {
  font-size: 11px !important;
}

/* Contact details as coloured pills. */
a[href^='mailto:'] {
  background-color: var(--jai-blue-soft) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  color: var(--jai-blue) !important;
  font-weight: 500;
}

a[href^='tel:'] {
  background-color: var(--jai-green-soft) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  color: var(--jai-green) !important;
  font-weight: 500;
}

.table-cell a[href^='http'],
.widget a[href^='http'] {
  background-color: var(--jai-sky-soft) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  color: var(--jai-sky) !important;
  font-weight: 500;
}

[class*='_chip_'][data-variant='soft'] {
  border-radius: 999px !important;
}

/* Select values (stage, status) as round pills with a dot. */
[class*='_tag_'] {
  border-radius: 999px !important;
  border-style: solid !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  padding-left: 8px !important;
  padding-right: 10px !important;
}

[class*='_tag_']::before {
  background-color: currentColor;
  border-radius: 999px;
  content: '';
  display: inline-block;
  flex-shrink: 0;
  height: 6px;
  margin-right: 6px;
  width: 6px;
}

/* Board: each lane tinted in its stage colour under a solid header. jai-brand.js sets data-jai-lane. */
[data-jai-lane] {
  --jai-lane-solid: var(--t-tag-text-gray);
  --jai-lane-soft: var(--t-tag-background-gray);
}
[data-jai-lane='red'] { --jai-lane-solid: var(--t-tag-text-red); --jai-lane-soft: var(--t-tag-background-red); }
[data-jai-lane='orange'] { --jai-lane-solid: var(--t-tag-text-orange); --jai-lane-soft: var(--t-tag-background-orange); }
[data-jai-lane='yellow'] { --jai-lane-solid: var(--t-tag-text-yellow); --jai-lane-soft: var(--t-tag-background-yellow); }
[data-jai-lane='green'] { --jai-lane-solid: var(--t-tag-text-green); --jai-lane-soft: var(--t-tag-background-green); }
[data-jai-lane='turquoise'] { --jai-lane-solid: var(--t-tag-text-turquoise); --jai-lane-soft: var(--t-tag-background-turquoise); }
[data-jai-lane='sky'] { --jai-lane-solid: var(--t-tag-text-sky); --jai-lane-soft: var(--t-tag-background-sky); }
[data-jai-lane='blue'] { --jai-lane-solid: var(--t-tag-text-blue); --jai-lane-soft: var(--t-tag-background-blue); }
[data-jai-lane='purple'] { --jai-lane-solid: var(--t-tag-text-purple); --jai-lane-soft: var(--t-tag-background-purple); }
[data-jai-lane='pink'] { --jai-lane-solid: var(--t-tag-text-pink); --jai-lane-soft: var(--t-tag-background-pink); }

/* Dark mode: same hue, made dark, so the lane headers are not bright. */
.dark [data-jai-lane='gray'] { --jai-lane-solid: #334155; }
.dark [data-jai-lane='red'] { --jai-lane-solid: #7F1D2E; }
.dark [data-jai-lane='orange'] { --jai-lane-solid: #7C2D12; }
.dark [data-jai-lane='yellow'] { --jai-lane-solid: #713F12; }
.dark [data-jai-lane='green'] { --jai-lane-solid: #14532D; }
.dark [data-jai-lane='turquoise'] { --jai-lane-solid: #134E4A; }
.dark [data-jai-lane='sky'] { --jai-lane-solid: #0C4A6E; }
.dark [data-jai-lane='blue'] { --jai-lane-solid: #1E3A8A; }
.dark [data-jai-lane='purple'] { --jai-lane-solid: #4C1D95; }
.dark [data-jai-lane='pink'] { --jai-lane-solid: #831843; }

[data-record-board-column-id][data-jai-lane] {
  background-color: color-mix(in srgb, var(--jai-lane-soft) 45%, transparent) !important;
  border-radius: 0 0 16px 16px;
}

[data-jai-lane-head] {
  background-color: var(--jai-lane-solid) !important;
  border-radius: 14px 14px 0 0;
  color: #fff !important;
}

[data-jai-lane-head] * {
  background-color: transparent !important;
}

[data-jai-lane-head] [class*='_tag_'] {
  background-color: transparent !important;
  color: #fff !important;
  font-family: Sora, 'DM Sans', sans-serif;
  font-size: 13px !important;
}

[data-jai-lane-head] [class*='_tag_']::before {
  background-color: #fff !important;
}

[data-jai-lane-head],
[data-jai-lane-head] span,
[data-jai-lane-head] div {
  color: #fff !important;
}

/* Dark headers are deep hues now, so their text and dot stay light. */
.dark [data-jai-lane-head],
.dark [data-jai-lane-head] span,
.dark [data-jai-lane-head] div,
.dark [data-jai-lane-head] [class*='_tag_'] {
  color: #ECEEF8 !important;
}

.dark [data-jai-lane-head] [class*='_tag_']::before {
  background-color: #ECEEF8 !important;
}

/* The lane total reads as a frosted count pill, without the stage dot. */
[data-jai-lane-head] [class*='_tag_']:not([style*='tag-background-']) {
  background-color: rgba(255, 255, 255, 0.24) !important;
  font-family: inherit;
  font-size: 12px !important;
  padding-left: 10px !important;
}

[data-jai-lane-head] [class*='_tag_']:not([style*='tag-background-'])::before {
  display: none;
}

[data-click-outside-id='record-board-card'] [data-selected] {
  background-color: var(--jai-card) !important;
  border-color: transparent !important;
  border-radius: 14px !important;
  box-shadow: var(--jai-shadow) !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

[data-click-outside-id='record-board-card'] [data-selected]:hover {
  box-shadow: var(--jai-shadow-lift) !important;
  transform: translateY(-2px);
}

[data-click-outside-id='record-board-card'] [data-selected='true'] {
  box-shadow: 0 0 0 2px #F28C28, var(--jai-shadow) !important;
}

[data-click-outside-id='record-board-card'] [data-selected] [class*='_chip_'][data-variant='ghost'] {
  font-weight: 700;
}

/* Record page widgets float as separate soft cards on the page colour. */
[data-page-surface='main'] :has(> .widget) {
  background-color: var(--jai-page) !important;
}

.widget {
  background-color: var(--jai-card) !important;
  border-radius: 16px !important;
  box-shadow: var(--jai-shadow);
  margin: 0 10px 10px;
}

.widget-card-header {
  color: var(--jai-ink) !important;
  font-family: Sora, 'DM Sans', sans-serif;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  [data-click-outside-id='record-board-card'] [data-selected]:hover {
    transform: none;
  }
}

/* ---------- Settings: each section as a card with a coloured accent ---------- */

[data-jai-page='settings'] [class*='_section_'][class*='_primary_'] {
  background-color: var(--jai-card);
  border-radius: 16px;
  box-shadow: var(--jai-shadow);
  box-sizing: border-box;
  margin-bottom: 4px;
  padding: 20px 24px;
}

[data-jai-page='settings'] h2[class*='_title_'] {
  align-items: center;
  color: var(--jai-ink) !important;
  display: inline-flex;
  font-family: Sora, 'DM Sans', sans-serif;
  font-size: 14px !important;
  font-weight: 700 !important;
  gap: 8px;
}

[data-jai-page='settings'] h2[class*='_title_']::before {
  background-color: var(--jai-accent-bar, #F28C28);
  border-radius: 999px;
  content: '';
  display: inline-block;
  height: 14px;
  width: 4px;
}

[data-jai-page='settings'] [class*='_section_'][class*='_primary_']:nth-child(6n + 1) { --jai-accent-bar: var(--jai-violet); }
[data-jai-page='settings'] [class*='_section_'][class*='_primary_']:nth-child(6n + 2) { --jai-accent-bar: var(--jai-blue); }
[data-jai-page='settings'] [class*='_section_'][class*='_primary_']:nth-child(6n + 3) { --jai-accent-bar: var(--jai-teal); }
[data-jai-page='settings'] [class*='_section_'][class*='_primary_']:nth-child(6n + 4) { --jai-accent-bar: var(--jai-pink); }
[data-jai-page='settings'] [class*='_section_'][class*='_primary_']:nth-child(6n + 5) { --jai-accent-bar: var(--jai-orange); }
[data-jai-page='settings'] [class*='_section_'][class*='_primary_']:nth-child(6n + 6) { --jai-accent-bar: var(--jai-green); }

[data-jai-page='settings'] [class*='_cardContent_'] {
  background-color: var(--jai-lane) !important;
}

[data-jai-page='settings'] [class*='_card_'][data-rounded] {
  border-radius: 12px !important;
}