/*
 * IION Pulse theme.
 *
 * The CRM's visual system, rebuilt on the same design language as the other
 * IION web apps (deals-dashboard, iion-ss-dashboards, Ticketing_System,
 * QA_Process, SampleViewer, Leaves-Portal …): Midnight ink on Ice White
 * paper, a solid Midnight sidebar with Blue active states, white cards on
 * lavender hairlines, Poppins with Roboto Mono eyebrows, uppercase mono table
 * headers over a Midnight rule, navy-tinted shadows. Those apps are
 * light-only; "Midnight" below is the dark variant for users who pick dark
 * in Twenty's own settings.
 *
 * Injected into the fork-built frontend by docker/Dockerfile.final (see
 * apply-theme.mjs), so it needs no twenty-fork source changes.
 *
 * Mechanics worth knowing before editing:
 *  - Twenty v2.37.4 ships its theme as a static stylesheet on `.light.light`
 *    / `.dark.dark` (specificity 0,2,0). Token blocks here use
 *    `html.light.light` / `html.dark.dark` (0,2,1) so they always win —
 *    unlike v2.24.1's runtime-injected theme that defeated IION_PROJECT.md §25.
 *  - Structural rules target stable hooks Twenty renders (.table-cell,
 *    data-testid, data-click-outside-id, roles, data-* state) or CSS-module
 *    class prefixes ([class*='_modal_']). A few Linaria classes (.s9iz60d …)
 *    are used where nothing else exists; their hashes come from source paths
 *    and only change on a Twenty upgrade, which turns those rules into no-ops.
 *  - Never change record-table row heights: rows are virtualized and
 *    absolutely positioned at a height computed in JS.
 */

/* ════════════════════════════ Tokens ════════════════════════════ */

html.light.light,
html.dark.dark {
  --iion-blue: #ff0073;
  --iion-midnight: #720033;
  --iion-cyan: #ea00ff;
  --iion-magenta: #ff00a2;
  --iion-pink: #ffbae6;
  --iion-lilac: #ffa1cb;
  --iion-ok: #00b268;
  --iion-warn: #b26a00;
  --iion-danger: #c4008f;

  --t-font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  --t-code-font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo,
    monospace;
  --iion-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-border-radius-xs: 4px;
  --t-border-radius-sm: 6px;
  --t-border-radius-md: 8px;
  --t-border-radius-lg: 12px;
  --t-border-radius-xl: 12px;
  --t-border-radius-xxl: 16px;
  --t-border-radius-sm-round: 6px;
  --t-border-radius-md-round: 8px;

  --iion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Light: the IION paper system ── */
html.light.light {
  color-scheme: light;

  --iion-paper: #fff5fa;
  --iion-surface: #ffffff;
  --iion-surface-2: #feecf4;
  --iion-surface-3: #fbe1ed;
  --iion-rule: #f2d3e1;
  --iion-rule-soft: #fae6ef;
  --iion-ink: #720033;
  --iion-ink-soft: #803a5a;
  --iion-muted: #885f71;
  --iion-muted-2: #ab8a99;
  --iion-row-hover: rgba(225, 225, 251, 0.45);
  --iion-sidebar: #720033;
  --iion-topbar: rgba(245, 245, 255, 0.88);

  --t-background-primary: var(--iion-surface);
  --t-background-secondary: var(--iion-paper);
  --t-background-tertiary: var(--iion-surface-2);
  --t-background-quaternary: var(--iion-surface-3);
  --t-sidebar-background: var(--iion-sidebar);
  --t-background-transparent-primary: rgba(255, 255, 255, 0.8);
  --t-background-transparent-secondary: rgba(255, 255, 255, 0.55);
  --t-background-transparent-lighter: rgba(0, 0, 114, 0.025);
  --t-background-transparent-light: rgba(0, 0, 114, 0.045);
  --t-background-transparent-medium: rgba(0, 0, 114, 0.08);
  --t-background-transparent-strong: rgba(0, 0, 114, 0.14);
  --t-background-transparent-blue: rgba(0, 0, 255, 0.08);
  --t-background-transparent-danger: rgba(196, 0, 143, 0.08);
  --t-background-transparent-success: rgba(0, 178, 104, 0.12);
  --t-background-transparent-orange: rgba(178, 106, 0, 0.13);
  --t-background-danger: #fff0fb;
  --t-background-overlay-primary: rgba(0, 0, 114, 0.6);
  --t-background-overlay-secondary: rgba(0, 0, 114, 0.35);
  --t-background-overlay-tertiary: rgba(0, 0, 114, 0.08);
  --t-background-inverted-primary: var(--iion-ink);
  --t-background-inverted-secondary: var(--iion-ink-soft);
  --t-background-primary-inverted: var(--iion-ink);
  --t-background-primary-inverted-hover: var(--iion-blue);

  --t-font-color-primary: var(--iion-ink);
  --t-font-color-secondary: var(--iion-ink-soft);
  --t-font-color-tertiary: var(--iion-muted);
  --t-font-color-light: var(--iion-muted-2);
  --t-font-color-extra-light: #d0b4c1;
  --t-font-color-inverted: #ffffff;
  --t-font-color-danger: var(--iion-danger);

  --t-border-color-strong: #e6b9cd;
  --t-border-color-medium: var(--iion-rule);
  --t-border-color-light: var(--iion-rule-soft);
  --t-border-color-blue: var(--iion-lilac);
  --t-border-color-danger: #f4c8e5;
  --t-border-color-inverted: var(--iion-ink);
  --t-border-color-secondary-inverted: var(--iion-ink-soft);
  --t-border-color-transparent-strong: rgba(0, 0, 114, 0.08);

  --t-accent-accent1: #fffafc;
  --t-accent-accent2: #fff5fa;
  --t-accent-accent3: #feecf4;
  --t-accent-accent4: #fbe1ed;
  --t-accent-accent5: #fdc9e0;
  --t-accent-accent6: #ffa1cb;
  --t-accent-accent7: #ff7ab6;
  --t-accent-accent8: #ff4096;
  --t-accent-accent9: #ff0073;
  --t-accent-accent10: #cc005c;
  --t-accent-accent11: #9e0047;
  --t-accent-accent12: #720033;
  --t-accent-accent3570: #ff0073;
  --t-accent-accent4060: #ff0073;
  --t-accent-primary: #ff0073;
  --t-accent-secondary: #ff0073;
  --t-accent-tertiary: #ffa1cb;
  --t-accent-quaternary: #feecf4;
  --t-color-blue: #ff0073;

  --t-gray-scale-gray1: #ffffff;
  --t-gray-scale-gray2: #fffafc;
  --t-gray-scale-gray3: #fff5fa;
  --t-gray-scale-gray4: #feecf4;
  --t-gray-scale-gray5: #fbe1ed;
  --t-gray-scale-gray6: #f2d3e1;
  --t-gray-scale-gray7: #e0b9cb;
  --t-gray-scale-gray8: #c8a1b3;
  --t-gray-scale-gray9: #ab8a99;
  --t-gray-scale-gray10: #9a7485;
  --t-gray-scale-gray11: #885f71;
  --t-gray-scale-gray12: #720033;

  --t-box-shadow-color: rgba(0, 0, 114, 0.06);
  --t-box-shadow-light: 0 1px 2px rgba(0, 0, 114, 0.06),
    0 2px 8px rgba(0, 0, 114, 0.05);
  --t-box-shadow-strong: 0 4px 16px rgba(0, 0, 114, 0.08),
    0 1px 3px rgba(0, 0, 114, 0.06);
  --t-box-shadow-super-heavy: 0 12px 40px rgba(0, 0, 114, 0.12),
    0 2px 8px rgba(0, 0, 114, 0.06);
  --t-box-shadow-underline: 0 1px 0 0 var(--iion-rule);

  --t-snack-bar-success-color: #007c48;
  --t-snack-bar-success-background-color: #eefaf4;
  --t-snack-bar-error-color: #9a0069;
  --t-snack-bar-error-background-color: #fff0fb;
  --t-snack-bar-warning-color: #8a5200;
  --t-snack-bar-warning-background-color: #fff8ec;
  --t-snack-bar-info-color: #ff0073;
  --t-snack-bar-info-background-color: #feecf4;
  --t-snack-bar-default-color: var(--iion-ink);
  --t-snack-bar-default-background-color: #ffffff;

  /* Select-option tags: the brand hues where a Twenty colour maps onto one,
     Twenty's own tints for the rest so user-chosen colours stay distinct. */
  --t-tag-text-blue: #ff0073;
  --t-tag-background-blue: rgba(0, 0, 255, 0.1);
  --t-tag-text-iris: #9e0047;
  --t-tag-background-iris: #feecf4;
  --t-tag-text-violet: #d63a82;
  --t-tag-background-violet: rgba(161, 161, 255, 0.22);
  --t-tag-text-purple: #ba0460;
  --t-tag-background-purple: rgba(106, 4, 186, 0.1);
  --t-tag-text-pink: #a8006c;
  --t-tag-background-pink: rgba(255, 0, 255, 0.12);
  --t-tag-text-plum: #8a0058;
  --t-tag-background-plum: rgba(255, 186, 255, 0.35);
  --t-tag-text-cyan: #83008a;
  --t-tag-background-cyan: rgba(0, 255, 255, 0.16);
  --t-tag-text-sky: #9e0097;
  --t-tag-background-sky: rgba(9, 220, 220, 0.14);
  --t-tag-text-green: #007c48;
  --t-tag-background-green: rgba(0, 178, 104, 0.13);
  --t-tag-text-orange: #b83e00;
  --t-tag-background-orange: rgba(255, 87, 0, 0.12);
  --t-tag-text-amber: #8a5200;
  --t-tag-background-amber: rgba(178, 106, 0, 0.13);
  --t-tag-text-gray: var(--iion-muted);
  --t-tag-background-gray: var(--iion-surface-2);
}

/* ── Dark: "Midnight" ── */
html.dark.dark {
  color-scheme: dark;

  --iion-paper: #2b0416;
  --iion-surface: #3a0a20;
  --iion-surface-2: #49122b;
  --iion-surface-3: #581a36;
  --iion-rule: #6b2545;
  --iion-rule-soft: #5a1b37;
  --iion-ink: #fff5fa;
  --iion-ink-soft: #efc9da;
  --iion-muted: #d09ab2;
  --iion-muted-2: #a8718a;
  --iion-row-hover: rgba(161, 161, 255, 0.07);
  --iion-sidebar: #1f000e;
  --iion-topbar: rgba(4, 4, 43, 0.86);

  --t-background-primary: var(--iion-surface);
  --t-background-secondary: var(--iion-paper);
  --t-background-tertiary: var(--iion-surface-2);
  --t-background-quaternary: var(--iion-surface-3);
  --t-sidebar-background: var(--iion-sidebar);
  --t-background-transparent-primary: rgba(10, 10, 58, 0.8);
  --t-background-transparent-secondary: rgba(10, 10, 58, 0.55);
  --t-background-transparent-lighter: rgba(161, 161, 255, 0.035);
  --t-background-transparent-light: rgba(161, 161, 255, 0.07);
  --t-background-transparent-medium: rgba(161, 161, 255, 0.11);
  --t-background-transparent-strong: rgba(161, 161, 255, 0.18);
  --t-background-transparent-blue: rgba(77, 77, 255, 0.18);
  --t-background-transparent-danger: rgba(255, 0, 255, 0.12);
  --t-background-transparent-success: rgba(0, 178, 104, 0.18);
  --t-background-transparent-orange: rgba(255, 171, 64, 0.16);
  --t-background-danger: #360621;
  --t-background-overlay-primary: rgba(0, 0, 20, 0.75);
  --t-background-overlay-secondary: rgba(0, 0, 20, 0.5);
  --t-background-overlay-tertiary: rgba(0, 0, 20, 0.2);
  --t-background-inverted-primary: var(--iion-ink);
  --t-background-inverted-secondary: var(--iion-ink-soft);
  --t-background-primary-inverted: var(--iion-ink);
  --t-background-primary-inverted-hover: var(--iion-lilac);

  --t-font-color-primary: var(--iion-ink);
  --t-font-color-secondary: var(--iion-ink-soft);
  --t-font-color-tertiary: var(--iion-muted);
  --t-font-color-light: var(--iion-muted-2);
  --t-font-color-extra-light: #8a4f6a;
  --t-font-color-inverted: #720033;
  --t-font-color-danger: #ff6bcc;

  --t-border-color-strong: #7f3355;
  --t-border-color-medium: var(--iion-rule);
  --t-border-color-light: var(--iion-rule-soft);
  --t-border-color-blue: #ff4d9d;
  --t-border-color-danger: #70124c;
  --t-border-color-inverted: var(--iion-ink);
  --t-border-color-secondary-inverted: var(--iion-ink-soft);
  --t-border-color-transparent-strong: rgba(161, 161, 255, 0.12);

  --t-accent-accent1: #35071c;
  --t-accent-accent2: #450c26;
  --t-accent-accent3: #581232;
  --t-accent-accent4: #6e193f;
  --t-accent-accent5: #892250;
  --t-accent-accent6: #ad2c66;
  --t-accent-accent7: #d63a80;
  --t-accent-accent8: #ff4d9d;
  --t-accent-accent9: #ff5ca5;
  --t-accent-accent10: #ff7ab6;
  --t-accent-accent11: #ffa1cb;
  --t-accent-accent12: #ffe6f1;
  --t-accent-accent3570: #ff7ab6;
  --t-accent-accent4060: #ff7ab6;
  --t-accent-primary: #ff4d9d;
  --t-accent-secondary: #ff4d9d;
  --t-accent-tertiary: #ad2c66;
  --t-accent-quaternary: #581232;
  --t-color-blue: #ff7ab6;

  --t-gray-scale-gray1: #2b0416;
  --t-gray-scale-gray2: #3a0a20;
  --t-gray-scale-gray3: #49122b;
  --t-gray-scale-gray4: #581a36;
  --t-gray-scale-gray5: #6b2545;
  --t-gray-scale-gray6: #7f3355;
  --t-gray-scale-gray7: #8a4f6a;
  --t-gray-scale-gray8: #a8718a;
  --t-gray-scale-gray9: #d09ab2;
  --t-gray-scale-gray10: #e0b4c8;
  --t-gray-scale-gray11: #efc9da;
  --t-gray-scale-gray12: #fff5fa;

  --t-box-shadow-color: rgba(0, 0, 0, 0.35);
  --t-box-shadow-light: 0 1px 2px rgba(0, 0, 10, 0.4),
    0 2px 8px rgba(0, 0, 10, 0.3);
  --t-box-shadow-strong: 0 4px 16px rgba(0, 0, 10, 0.45),
    0 1px 3px rgba(0, 0, 10, 0.4);
  --t-box-shadow-super-heavy: 0 0 0 1px var(--iion-rule),
    0 12px 40px rgba(0, 0, 10, 0.6);
  --t-box-shadow-underline: 0 1px 0 0 var(--iion-rule);

  --t-snack-bar-success-color: #4fe0a4;
  --t-snack-bar-success-background-color: #052b2c;
  --t-snack-bar-error-color: #ff8ad7;
  --t-snack-bar-error-background-color: #360621;
  --t-snack-bar-warning-color: #ffc46b;
  --t-snack-bar-warning-background-color: #2b1d0a;
  --t-snack-bar-info-color: #ffa1cb;
  --t-snack-bar-info-background-color: #49122b;
  --t-snack-bar-default-color: var(--iion-ink);
  --t-snack-bar-default-background-color: var(--iion-surface-2);

  --t-tag-text-blue: #ffa1cb;
  --t-tag-background-blue: rgba(77, 77, 255, 0.22);
  --t-tag-text-iris: #efc9da;
  --t-tag-background-iris: rgba(161, 161, 255, 0.14);
  --t-tag-text-violet: #ffb0d4;
  --t-tag-background-violet: rgba(161, 161, 255, 0.18);
  --t-tag-text-purple: #ff9bcd;
  --t-tag-background-purple: rgba(106, 4, 186, 0.3);
  --t-tag-text-pink: #ff8ad7;
  --t-tag-background-pink: rgba(255, 0, 255, 0.16);
  --t-tag-text-plum: #ffbae6;
  --t-tag-background-plum: rgba(255, 186, 255, 0.14);
  --t-tag-text-cyan: #ea00ff;
  --t-tag-background-cyan: rgba(0, 255, 255, 0.12);
  --t-tag-text-sky: #fb6fff;
  --t-tag-background-sky: rgba(9, 220, 220, 0.14);
  --t-tag-text-green: #4fe0a4;
  --t-tag-background-green: rgba(0, 178, 104, 0.18);
  --t-tag-text-orange: #ff9a66;
  --t-tag-background-orange: rgba(255, 87, 0, 0.18);
  --t-tag-text-amber: #ffc46b;
  --t-tag-background-amber: rgba(255, 171, 64, 0.16);
  --t-tag-text-gray: var(--iion-muted);
  --t-tag-background-gray: var(--iion-surface-2);
}

/* ════════════════════════════ Base ════════════════════════════ */

html.light body,
html.dark body,
html .react-datepicker {
  font-family: var(--t-font-family);
  -webkit-font-smoothing: antialiased;
}

/* Chart labels take their font from a JS theme object; CSS beats SVG
   presentation attributes. */
html svg text {
  font-family: var(--t-font-family);
}

::selection {
  background: var(--iion-pink);
  color: #720033;
}

:is(button, a, [role='button'], [role='tab'], [role='checkbox'], [role='switch']):focus-visible {
  outline: 2px solid var(--t-accent-primary);
  outline-offset: 2px;
}

html.light *,
html.dark * {
  scrollbar-width: thin;
  scrollbar-color: var(--iion-rule) transparent;
}

/* ════════════════════════════ App shell ════════════════════════════ */

/* Everything outside the sidebar sits on paper. */
#root > div {
  background: var(--iion-paper) !important;
}

/* Page panel (Linaria; see header note). Flat paper, no card: the page's own
   content (table, board, record) carries the surfaces, as in the other apps. */
.s9iz60d {
  background: var(--iion-paper) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Page header → IION topbar: translucent paper, hairline rule, bold title. */
:has(> [data-click-outside-id='page-action-container']) {
  background: var(--iion-topbar) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--iion-rule);
  min-height: 56px;
  padding: 0 20px !important;
}

:has(> [data-click-outside-id='page-action-container']) > :first-child {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--iion-ink);
}

/* ════════════════════════════ Sidebar ════════════════════════════ */

/* Solid Midnight in both themes. Twenty's components inside it read the
   global ink tokens, so they're re-scoped here to the on-dark set. */
[data-click-outside-id='navigation-drawer'] {
  background: var(--iion-sidebar) !important;
  color: #ffffff;
  --t-font-color-primary: #ffffff;
  --t-font-color-secondary: rgba(255, 255, 255, 0.78);
  --t-font-color-tertiary: rgba(255, 255, 255, 0.6);
  --t-font-color-light: rgba(255, 255, 255, 0.45);
  --t-font-color-extra-light: rgba(255, 255, 255, 0.3);
  --t-background-primary: rgba(255, 255, 255, 0.08);
  --t-background-secondary: rgba(255, 255, 255, 0.06);
  --t-background-tertiary: rgba(255, 255, 255, 0.1);
  --t-background-quaternary: rgba(255, 255, 255, 0.14);
  --t-background-transparent-lighter: rgba(255, 255, 255, 0.04);
  --t-background-transparent-light: rgba(255, 255, 255, 0.1);
  --t-background-transparent-medium: rgba(255, 255, 255, 0.14);
  --t-background-transparent-strong: rgba(255, 255, 255, 0.2);
  --t-border-color-strong: rgba(255, 255, 255, 0.22);
  --t-border-color-medium: rgba(255, 255, 255, 0.14);
  --t-border-color-light: rgba(255, 255, 255, 0.08);
  --t-accent-primary: #ffffff;
  --t-accent-secondary: #ffffff;
  container: iion-nav / inline-size;
}

.navigation-drawer-item {
  border-radius: var(--t-border-radius-md) !important;
  font-size: 13.5px;
  font-weight: 500;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.navigation-drawer-item[aria-current='page'] {
  background: var(--iion-blue) !important;
  color: #ffffff !important;
}

/* Object icons: Twenty draws each in a pastel tile tinted from its own
   per-object colour scale; the IION apps use plain line icons in the text
   colour (white in the sidebar, Midnight elsewhere). */
[class*='_root_j2xk4_'] {
  background: transparent !important;
  border: none !important;
}

[class*='_root_j2xk4_'] svg {
  stroke: currentColor;
  opacity: 0.9;
}

/* Section labels ("Workspace", "Favorites"…) → mono eyebrows. */
[data-click-outside-id='navigation-drawer'] .section-title-label,
[data-click-outside-id='navigation-drawer'] .section-title-container {
  font-family: var(--iion-mono) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Brand lockup — the same "logo + mono eyebrow" block every IION app opens
   its sidebar with. A pseudo-element, so React never sees a foreign node. */
[data-click-outside-id='navigation-drawer'] > div:first-child::before {
  content: 'Pulse CRM';
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  height: 70px;
  margin: 10px 8px 10px 8px;
  background: url('/levelup-theme/levelup-logo-negative.svg') left top / auto 46px
    no-repeat;
  color: var(--iion-lilac);
  font-family: var(--iion-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

@container iion-nav (max-width: 120px) {
  [data-click-outside-id='navigation-drawer'] > div:first-child::before {
    content: '';
    height: 30px;
    width: 30px;
    margin: 10px 0 12px 1px;
    background: url('/levelup-theme/levelup-icon-main.svg') center / contain no-repeat;
  }
}

/* ════════════════════════════ Record table ════════════════════════════ */

/* The table sits in a white card on paper (the other apps' .table-wrap). */
[id^='scroll-wrapper-record-table'] {
  margin: 0 16px 16px;
  width: auto !important;
  background: var(--iion-surface);
  border: 1px solid var(--iion-rule);
  border-radius: var(--t-border-radius-lg);
  box-shadow: var(--t-box-shadow-light);
}

/* Header: surface-2 band, mono uppercase labels, Midnight rule beneath —
   the `table.data` header from the other IION apps. */
.header-cell {
  background: var(--iion-surface-2) !important;
  border-bottom: 2px solid var(--iion-ink) !important;
  border-right-color: transparent !important;
  color: var(--iion-ink) !important;
}

.header-cell,
.header-cell :is(span, div, p) {
  font-family: var(--iion-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase;
}

.table-cell {
  border-right-color: transparent !important;
  border-bottom-color: var(--iion-rule-soft) !important;
}

[data-record-table-row]:hover .table-cell {
  background-color: var(--iion-row-hover);
}

.footer-cell {
  border-right-color: transparent !important;
  border-top: 1px solid var(--iion-rule) !important;
  background: var(--iion-surface-2) !important;
  font-family: var(--iion-mono);
  font-size: 11px;
}

/* ════════════════════════════ Tags & chips ════════════════════════════ */

/* Select options → IION .tag: mono, uppercase, 6px corners. */
[class*='_tag_'] {
  border-radius: var(--t-border-radius-sm) !important;
  font-family: var(--iion-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Record/link chips (names, domains, people) keep the sans face. */
[data-testid='chip'] {
  border-radius: var(--t-border-radius-sm) !important;
}

/* Letter avatars: Twenty picks a stock pastel per name in JS (inline custom
   properties); IION uses one lavender tile with Midnight initials. */
[class*='_root_gvbuq_'] {
  --avatar-background: var(--iion-surface-3) !important;
  --avatar-color: var(--iion-ink) !important;
}

/* ════════════════════════════ Buttons ════════════════════════════ */

button[data-variant='primary'][data-accent='blue'],
button[data-variant='primary'][data-accent='default'] {
  font-weight: 600 !important;
}

button[data-variant='primary'][data-accent='blue']:hover:not(:disabled) {
  background: var(--iion-midnight) !important;
  border-color: var(--iion-midnight) !important;
}

/* Midnight: Twenty paints primary buttons with a light accent step, too
   faint behind white text on navy — keep them solid IION Blue. */
html.dark button[data-variant='primary'][data-accent='blue'] {
  background: var(--iion-blue) !important;
  border-color: var(--iion-blue) !important;
  color: #ffffff !important;
}

html.dark button[data-variant='primary'][data-accent='blue']:hover:not(:disabled) {
  background: #ff4d9d !important;
  border-color: #ff4d9d !important;
}

/* ════════════════════════════ Kanban ════════════════════════════ */

[data-record-board-column-id],
[data-has-left-border] {
  border-left-color: transparent !important;
}

[data-record-board-column-id] {
  background: var(--iion-surface-2) !important;
  border-radius: var(--t-border-radius-lg);
  margin: 0 4px 12px;
  padding-top: 8px !important;
}

[data-click-outside-id='record-board-card'] > div > [data-selected] {
  background: var(--iion-surface) !important;
  border: 1px solid var(--iion-rule) !important;
  border-radius: var(--t-border-radius-lg) !important;
  box-shadow: var(--t-box-shadow-light);
  transition: border-color 0.12s ease, box-shadow 0.2s var(--iion-ease),
    transform 0.2s var(--iion-ease);
}

[data-click-outside-id='record-board-card'] > div > [data-selected]:hover {
  border-color: var(--iion-lilac) !important;
  box-shadow: var(--t-box-shadow-strong);
  transform: translateY(-1px);
}

[data-click-outside-id='record-board-card'] > div > [data-selected='true'] {
  border-color: var(--t-accent-primary) !important;
  box-shadow: 0 0 0 1px var(--t-accent-primary), var(--t-box-shadow-strong);
}

/* ════════════════════════════ Record page ════════════════════════════ */

/* Field labels → the other apps' key/value labels (`.kv dt`): mono caps. */
[id^='label-'] [data-testid='tooltip'] {
  font-family: var(--iion-mono) !important;
  font-size: 9.5px !important;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--iion-muted) !important;
}

/* ════════════════════════════ Side panel ════════════════════════════ */

[data-side-panel] > * {
  margin: 8px 8px 8px 0;
  height: calc(100% - 16px);
  width: calc(100% - 8px);
  border: 1px solid var(--iion-rule) !important;
  border-radius: var(--t-border-radius-lg);
  box-shadow: var(--t-box-shadow-super-heavy);
  overflow: hidden;
}

/* ════════════════════════════ Menus ════════════════════════════ */

[data-floating-ui-portal] > [role='listbox'] > div {
  background: var(--iion-surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--iion-rule) !important;
  border-radius: var(--t-border-radius-md) !important;
  box-shadow: var(--t-box-shadow-strong) !important;
}

/* ════════════════════════════ Modals ════════════════════════════ */

[class*='_modal_'] {
  border: 1px solid var(--iion-rule);
  border-radius: var(--t-border-radius-lg) !important;
  box-shadow: var(--t-box-shadow-super-heavy) !important;
}

[class*='_backdrop_'] {
  background: var(--t-background-overlay-secondary) !important;
}

/* ════════════════════════════ Auth ════════════════════════════ */

/* Sign-in / password reset: the IION .auth-shell — blue and magenta glows on
   paper — replacing the fork's navy grid with purple/teal squares. */
.s1wc667,
.smgvnhf {
  background: radial-gradient(
      1100px 520px at 12% -10%,
      rgba(0, 0, 255, 0.1),
      transparent 60%
    ),
    radial-gradient(900px 460px at 105% 108%, rgba(255, 0, 255, 0.1), transparent 62%),
    var(--iion-paper) !important;
}

.s1wc667::before,
.s1wc667::after,
.smgvnhf::before,
.smgvnhf::after {
  display: none !important;
}

/* Content column → the IION .auth-card: one white card, centred. */
.s1wc667,
.smgvnhf {
  display: flex;
  align-items: center;
  justify-content: center;
}

.s1wc667 > [class*='_content_'],
.smgvnhf > [class*='_content_'] {
  flex: none;
  width: min(460px, calc(100vw - 32px));
  height: auto !important;
  min-height: 0 !important;
  padding: 36px 30px 30px;
  background: var(--iion-surface);
  border: 1px solid var(--iion-rule);
  border-radius: var(--t-border-radius-lg);
  box-shadow: var(--t-box-shadow-super-heavy);
}

.s1wc667 .sp09ofr,
.smgvnhf .sp09ofr {
  margin-bottom: 0;
  padding: 0 !important;
}

/* Primary action is solid Blue, as on every IION sign-in. */
:is(.s1wc667, .smgvnhf) [class*='_button_y8rpu_'] {
  background: var(--iion-blue) !important;
  border-color: var(--iion-blue) !important;
  color: #ffffff !important;
  font-weight: 600;
}

:is(.s1wc667, .smgvnhf) [class*='_button_y8rpu_']:hover:not(:disabled) {
  background: var(--iion-midnight) !important;
}

html.light img[src$='iion-wordmark.png'] {
  content: url('/levelup-theme/levelup-logo-main.svg');
}

html.dark img[src$='iion-wordmark.png'] {
  content: url('/levelup-theme/levelup-logo-negative.svg');
}

img[src$='iion-wordmark.png'] {
  width: 168px;
  height: auto;
}

/* Tagline under the wordmark → mono eyebrow (was magenta caps). */
.sqlgbt8,
.sddkdlh {
  color: var(--iion-muted) !important;
  font-family: var(--iion-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.8px !important;
}

/* ════════════════════════════ Fork fixes ════════════════════════════ */

/* Record-page layout customization bar: the fork hard-codes near-white text
   on the inverted background, unreadable once inverted is light (Midnight).
   Follow the inverted font token instead. */
html .s1xew6py,
html .s1xew6py button,
html .s1xew6py button *,
html .s1n1m7vs button {
  color: var(--t-font-color-inverted) !important;
  --tw-button-color: var(--t-font-color-inverted) !important;
}

/* Settings → Experience theme previews: card colours are inline variables
   computed from the fork's JS theme constants. Matched by those values in
   p3, rgb and hex spellings (which one a browser serialises depends on its
   display-p3 support) and re-pointed at Paper and Midnight. */
[class*='_colorSchemeBackground_'][style*='0.933 0.94 0.963'],
[class*='_colorSchemeBackground_'][style*='rgb(238, 240, 246)'],
[class*='_colorSchemeBackground_'][style*='#f6eef4'] {
  --color-scheme-card-background: #fff5fa !important;
  --color-scheme-card-border-color: #f2d3e1 !important;
  --color-scheme-card-content-background: #ffffff !important;
  --color-scheme-card-content-color: #720033 !important;
}

[class*='_colorSchemeBackground_'][style*='0.002 0.066 0.289'],
[class*='_colorSchemeBackground_'][style*='rgb(0, 20, 71)'],
[class*='_colorSchemeBackground_'][style*='#47003c'] {
  --color-scheme-card-background: #2b0416 !important;
  --color-scheme-card-border-color: #6b2545 !important;
  --color-scheme-card-content-background: #3a0a20 !important;
  --color-scheme-card-content-color: #fff5fa !important;
}