/*!
 * Daiko Health CRM - theme layer for Twenty v2.53.1 (stock image, no rebuild)
 *
 * Served by Apache from /daiko-theme/daiko.css and linked just before </head>
 * by mod_substitute (see apply-theme.sh). Delete the layer with:
 *     apply-theme.sh --remove
 *
 * Tags used below:
 *   [VERIFIED]    the token or selector exists with this meaning in twenty
 *                 tag twenty/v2.53.1 (commit a5c644ef); the source path is given.
 *   [BEST-EFFORT] follows from the source but has not been tested in a browser.
 *
 * Why plain, unlayered rules win: Twenty defines every --t-* token inside
 * `@layer twenty-ui { .light {...} .dark {...} }`
 * (packages/twenty-ui/src/theme/theme-light.css, theme-dark.css).
 * Unlayered declarations beat layered ones whatever their specificity or load
 * order, so this file only has to redefine tokens and never needs !important.
 *
 * This file only sets custom properties. It does not override any component
 * selector, height, width or spacing, so it cannot fight Twenty's JS layout
 * maths (see note 1b).
 */

/* ---------------------------------------------------------------------------
 * 1. Interface scale: about 9% larger on desktop
 * ---------------------------------------------------------------------------
 * [VERIFIED] packages/twenty-front/src/index.css
 *     html { font-size: 13px; --t-zoom: var(--t-scale-user, 1); zoom: var(--t-zoom); }
 *     @media (max-width: 768px) { html { --t-zoom: calc(var(--t-scale-user, 1) * 1.0769...); } }
 * [VERIFIED] --t-scale-user is written inline on <html> by twenty-ui's
 *     ThemeProvider (packages/twenty-ui/src/theme/ThemeProvider.tsx) from the
 *     per-user setting Settings > Experience > Interface > Scale
 *     (UiScaleMultipliers.ts: Smaller 0.9, Default 1, Large 1.1, Larger 1.25).
 * [VERIFIED] Every viewport calculation divides by var(--t-zoom, 1)
 *     (DefaultLayout, Dialog, SidePanelList, viewport-zoom.css and others), and
 *     pointer maths reads the computed `zoom` (ui/theme/utils/getUiZoom.ts). So
 *     --t-zoom is the one setting that scales fonts (rem), row heights,
 *     spacing, icons and radii (px) together.
 *
 * 1b. Do NOT enlarge text through `html { font-size }` or raise table row
 *     heights with CSS. Fonts are rem-based (--t-font-size-md: 1rem on a 13px
 *     root), but row heights, buttons and spacing are fixed px, and the table
 *     row height is a JS constant (RECORD_TABLE_ROW_HEIGHT = 32, used by about
 *     45 files including the virtualisation maths). Overriding those in CSS
 *     causes overlap or clipping. At 1.09 zoom rows render at about 34.9px
 *     and text at about 14.2px, and the JS maths stays correct.
 *
 * Behaviour: the 1.09 is a minimum. Default 100% becomes 109%, Large stays
 * 110% and Larger stays 125%, all within the 0.9 to 1.25 range upstream has
 * tested. "Smaller" (90%) is effectively disabled on desktop while this file
 * is active. Phones (768px or narrower) are left exactly as upstream renders
 * them.
 * [BEST-EFFORT] max() inside zoom: upstream already feeds zoom a math function
 * (calc() in its mobile rule), and max() belongs to the same family.
 */
@media (min-width: 769px) {
  :root {
    --daiko-ui-scale: 1.09; /* change to 1.08 or 1.10 to taste */
    --t-zoom: max(var(--t-scale-user, 1), var(--daiko-ui-scale));
  }
}

/* ---------------------------------------------------------------------------
 * 2. Brand accent: a 12-step ramp per colour scheme
 * ---------------------------------------------------------------------------
 * Daiko Health brand indigo, taken from daikohealth.com (buttons and logo use
 * #6366F1 -> #4F46E5 -> #4338CA). Step 9 is #4F46E5; white text on it has
 * 6.3:1 contrast. Steps 1 to 8 are tints (backgrounds, borders),
 * 9 is solid, 10 is solid-hover, 11 is accent text and 12 is the
 * darkest/pressed shade.
 */
.light {
  --daiko-1: #fbfbff;
  --daiko-2: #f5f6ff;
  --daiko-3: #eef2ff;
  --daiko-4: #e0e7ff;
  --daiko-5: #c7d2fe;
  --daiko-6: #b4c0fd;
  --daiko-7: #a5b4fc;
  --daiko-8: #818cf8;
  --daiko-9: #4f46e5;  /* brand solid: primary buttons, focus rings, checkboxes */
  --daiko-10: #4338ca; /* solid hover */
  --daiko-11: #4338ca; /* accent text (7.9:1 on white) */
  --daiko-12: #312e81; /* pressed / strongest */
  --daiko-soft: rgb(79 70 229 / 0.07); /* Twenty light uses transparent-blue3 here */
}

.dark {
  --daiko-1: #0f0f1a;
  --daiko-2: #14152a;
  --daiko-3: #1b1d40;
  --daiko-4: #212456;
  --daiko-5: #282c66;
  --daiko-6: #313679;
  --daiko-7: #3d4392;
  --daiko-8: #4c53b3;
  --daiko-9: #4f46e5;
  --daiko-10: #6366f1;
  --daiko-11: #a5b4fc;
  --daiko-12: #e0e7ff;
  --daiko-soft: rgb(99 102 241 / 0.28); /* Twenty dark uses transparent-blue4 here */
}

/* [VERIFIED] Twenty's accent is its "blue" ramp:
 *   - Solid, outline and soft accent buttons
 *     (twenty-ui primitives/input/Button/Button.module.scss, $colors 'accent'):
 *     base and text --t-color-blue, hover --t-color-blue10, active
 *     --t-color-blue12, border --t-accent-primary, soft --t-accent-tertiary,
 *     soft-hover --t-accent-secondary.
 *   - Focus outlines, inputs, selects, checkboxes, radios, switches, tabs,
 *     date picker, banners, badges: var(--t-color-blue...) in twenty-ui SCSS.
 *   - Selected table rows, list rows and chips: --t-accent-quaternary and
 *     tertiary (RecordTableRowDiv, TableRow, RecordListRow, BaseChip).
 *   - About 150 further usages in twenty-front, via themeCssVariables.color.blue*
 *     and .accent.*.
 * The step mapping below matches Twenty's own definitions in theme-light.css
 * and theme-dark.css (accent-primary and secondary are step 5, tertiary
 * step 3, quaternary step 2, accent3570 and 4060 step 8, color-blue step 9),
 * so all relative contrasts are kept.
 * [VERIFIED] The theme JS object is built at mount from these computed CSS
 * variables (twenty-ui theme/internal/computeThemeFromCss.ts), and this
 * stylesheet is render-blocking in <head>, so JS-driven styles pick up the
 * indigo as well.
 * Side effects (intended): anything Twenty draws in its accent "blue", such as
 * focus rings, the selected state and charts using the default blue, turns
 * indigo. User-chosen tag or select-option colours are NOT affected: they use the
 * separate --t-tag-text-blue and --t-tag-background-blue tokens.
 * Using `.light, .dark` rather than :root lets the mapping also work inside
 * Twenty's scoped ThemeProviders, which put the class on a wrapper div.
 */
.light,
.dark {
  --t-color-blue: var(--daiko-9);
  --t-color-blue1: var(--daiko-1);
  --t-color-blue2: var(--daiko-2);
  --t-color-blue3: var(--daiko-3);
  --t-color-blue4: var(--daiko-4);
  --t-color-blue5: var(--daiko-5);
  --t-color-blue6: var(--daiko-6);
  --t-color-blue7: var(--daiko-7);
  --t-color-blue8: var(--daiko-8);
  --t-color-blue9: var(--daiko-9);
  --t-color-blue10: var(--daiko-10);
  --t-color-blue11: var(--daiko-11);
  --t-color-blue12: var(--daiko-12);

  --t-accent-primary: var(--daiko-5);
  --t-accent-secondary: var(--daiko-5);
  --t-accent-tertiary: var(--daiko-3);
  --t-accent-quaternary: var(--daiko-2);
  --t-accent-accent3570: var(--daiko-8);
  --t-accent-accent4060: var(--daiko-8);
  --t-accent-accent1: var(--daiko-1);
  --t-accent-accent2: var(--daiko-2);
  --t-accent-accent3: var(--daiko-3);
  --t-accent-accent4: var(--daiko-4);
  --t-accent-accent5: var(--daiko-5);
  --t-accent-accent6: var(--daiko-6);
  --t-accent-accent7: var(--daiko-7);
  --t-accent-accent8: var(--daiko-8);
  --t-accent-accent9: var(--daiko-9);
  --t-accent-accent10: var(--daiko-10);
  --t-accent-accent11: var(--daiko-11);
  --t-accent-accent12: var(--daiko-12);

  --t-border-color-blue: var(--daiko-7);
  --t-background-transparent-blue: var(--daiko-soft);
}

/* ---------------------------------------------------------------------------
 * 3. Optional (off by default): softer corners
 * ---------------------------------------------------------------------------
 * [VERIFIED] tokens: --t-border-radius-xs 2px, -sm 4px, -md 8px, -lg 16px
 * (theme-light.css and theme-dark.css). Chromium 139+ doubles them under
 * @supports (corner-shape: squircle), so if you enable this block, check the
 * result in Chrome AND Firefox. The zoom above already scales radii by 1.09.
 *
 * .light, .dark { --t-border-radius-sm: 5px; --t-border-radius-md: 9px; }
 */

/* ---------------------------------------------------------------------------
 * 4. Hide Twenty's own legal links (they point to twenty.com) on sign-in pages
 * ------------------------------------------------------------------------- */
div:has(> a[href^="https://twenty.com/privacy"]),
div:has(> a[href^="https://twenty.com/terms"]) {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * 5. Sign-in logo: show the Daiko logo instead of Twenty's, drop the small badge
 * ------------------------------------------------------------------------- */
div[style*="android-launchericon-192-192.png"] {
  background-image: url("/daiko-theme/logo.png") !important;
  border-radius: 12px;
}
div:has(> a > div[style*="android-launchericon-192-192.png"]) > div:has(> img) {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * 6. Sign-in / sign-up pages: centred card on a soft brand backdrop
 *    Anchored on the logo element (Twenty's launcher icon) so hashed class
 *    names are never used. Only matches the auth screens.
 * ------------------------------------------------------------------------- */
/* page backdrop (the scroll container that holds the card) */
div:has(> div > div > div > a > div[style*="android-launchericon-192-192.png"]) {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  background:
    radial-gradient(1200px 520px at 50% -10%, rgb(99 102 241 / 0.22), transparent 65%),
    radial-gradient(800px 400px at 50% 110%, rgb(79 70 229 / 0.10), transparent 70%) !important;
}
.light div:has(> div > div > div > a > div[style*="android-launchericon-192-192.png"]) {
  background:
    radial-gradient(1200px 520px at 50% -10%, rgb(99 102 241 / 0.16), transparent 65%),
    linear-gradient(#f7f7fd, #f7f7fd) !important;
}
/* the card */
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) {
  flex: 0 0 auto !important;
  width: min(400px, 100%) !important;
  height: auto !important;
  margin: auto !important;
  padding: 36px 32px 28px !important;
  border-radius: 20px !important;
  background: rgb(255 255 255 / 0.035) !important;
  border: 1px solid rgb(255 255 255 / 0.08) !important;
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(99 102 241 / 0.06) !important;
  backdrop-filter: blur(6px);
}
.light div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) {
  background: #ffffff !important;
  border-color: #e7e7f3 !important;
  box-shadow: 0 24px 60px -24px rgb(49 46 129 / 0.25) !important;
}
/* logo */
div[style*="android-launchericon-192-192.png"] {
  border-radius: 14px !important;
  box-shadow: 0 10px 28px -6px rgb(79 70 229 / 0.55);
}
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) > div:first-child {
  height: auto !important;
  padding: 0 !important;
}
/* title + subtitle */
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) > div:nth-child(2) {
  margin-top: 20px !important;
  height: auto !important;
  text-align: center;
}
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) > div:nth-child(2) > div {
  height: auto !important;
}
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) > div:nth-child(2)::after {
  content: "Sign in to your sales and customer workspace";
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
  opacity: 0.6;
}
/* form block takes the card width */
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) > div:nth-child(3) {
  width: 100% !important;
  margin: 24px 0 4px !important;
}
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) > div:nth-child(3) > div,
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) form {
  width: 100% !important;
  max-width: none !important;
}
/* inputs */
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) form input {
  height: 44px !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) form input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgb(99 102 241 / 0.25) !important;
  outline: none !important;
}
/* primary button */
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) form button[type="submit"],
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) form button:last-of-type {
  height: 44px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
  color: #fff !important;
  font-size: 14px !important;
  box-shadow: 0 8px 20px -8px rgb(79 70 229 / 0.7) !important;
  margin-top: 4px;
}
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) form button:hover {
  background: linear-gradient(180deg, #5b5ef0, #4338ca) !important;
}
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) form button * {
  color: #fff !important;
}
/* small footer under the form */
div:has(> div > div > a > div[style*="android-launchericon-192-192.png"])::after {
  content: "Daiko Health \00B7  Internal use only";
  display: block;
  margin-top: 18px;
  font-size: 12px;
  opacity: 0.45;
  text-align: center;
}
@media (max-width: 480px) {
  div:has(> div > div > a > div[style*="android-launchericon-192-192.png"]) {
    padding: 28px 20px 22px !important;
  }
}

/* ---------------------------------------------------------------------------
 * 7. Daiko look (added 2026-11-02): calmer neutrals, clean sidebar, tidy cards
 * ---------------------------------------------------------------------------
 * Matches the Daiko Health app: Inter (Twenty's default font already), slate
 * text, lavender app background #F2F2FC, white cards with a 12px radius, a hair
 * border and a very soft shadow, indigo for "active".
 * Light theme only; dark mode keeps Twenty's own neutrals plus the indigo ramp.
 * [BEST-EFFORT] 7c-7d use structural selectors on Twenty v2.53.1 markup
 * (stable class names navigation-drawer-item, section-title-container,
 * aria-current, ids record-board-card-*). One hashed class is used to spot
 * empty card fields (.s1vaiy3a, the empty-value placeholder); after an
 * upgrade that rule may silently stop matching and empty fields show again.
 * Nothing here changes sizes Twenty measures in JS (row heights, widths).
 * (Section 9d sets column widths, but only through Twenty's own
 * --record-board-column-width variable.)
 */

/* 7a. neutrals */
.light {
  --t-font-color-primary: #1e293b;
  --t-font-color-secondary: #475569;
  --t-font-color-tertiary: #64748b;
  --t-font-color-light: #94a3b8;
  --t-font-color-extra-light: #cbd5e1;
  --t-border-color-strong: #d9dbea;
  --t-border-color-medium: #e6e7f2;
  --t-border-color-light: #eef0f7;
  --t-background-secondary: #fafafe;
  --t-background-tertiary: #f2f3fa;
  --t-background-quaternary: #e9eaf5;
  --t-background-transparent-lighter: rgb(79 70 229 / 0.03);
  --t-background-transparent-light: rgb(79 70 229 / 0.06);

  --daiko-app-bg: #f2f2fc;
  --daiko-nav-icon: #64748b;
  --daiko-card-border: #e7e7f3;
  --daiko-card-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
  --daiko-card-shadow-hover: 0 6px 16px rgb(79 70 229 / 0.1);
}

/* 7b. app frame: lavender behind the sidebar and the white page */
html.light #root > div:first-child {
  background-color: var(--daiko-app-bg);
}

/* 7c. sidebar */
/* one calm icon colour; the active page is indigo */
html.light .navigation-drawer-item svg.tabler-icon {
  stroke: var(--daiko-nav-icon);
}
html.light a.navigation-drawer-item[aria-current='page'] {
  background: var(--daiko-3);
  color: var(--daiko-11);
}
html.light a.navigation-drawer-item[aria-current='page'] svg.tabler-icon {
  stroke: var(--daiko-9);
}
a.navigation-drawer-item[aria-current='page'] .navigation-drawer-item-label span {
  font-weight: 600;
}
/* view links: Twenty draws the object icon with the view icon as a small badge
   on top ("double icons"). Show only the view icon, at full size. */
.navigation-drawer-item svg.tabler-icon:has(+ div > svg.tabler-icon) {
  display: none;
}
.navigation-drawer-item svg.tabler-icon + div:has(> svg.tabler-icon) {
  position: static;
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
  display: flex;
}
.navigation-drawer-item svg.tabler-icon + div > svg.tabler-icon {
  width: 16px;
  height: 16px;
}
/* drop the grey "· Deals" / "· Leads" suffix after view names */
.navigation-drawer-item-label span + span {
  display: none;
}
/* section titles in small caps, like the Daiko app ("WORKSPACE") */
.section-title-container [data-size] {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

/* 7d. kanban cards: white, rounded, soft shadow, only the fields that matter */
html.light [id^='record-board-card-'] div[data-selected] {
  background: #ffffff;
  border: 1px solid var(--daiko-card-border);
  border-radius: 12px;
  box-shadow: var(--daiko-card-shadow);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
html.light [id^='record-board-card-'] div[data-selected]:hover {
  border-color: var(--daiko-5);
  box-shadow: var(--daiko-card-shadow-hover);
}
html.light [id^='record-board-card-'] div[data-selected='true'] {
  border-color: var(--daiko-8);
  box-shadow: 0 0 0 2px var(--daiko-4);
}
/* card title a little stronger */
[id^='record-board-card-'] div[data-selected] > div:first-child [class*='_chip_'] > span:last-child {
  font-weight: 600;
  color: var(--t-font-color-primary);
}
/* hide empty fields on cards (open the card to see and fill everything);
   keep the "Log a call" picker on lead cards */
[id^='record-board-card-'] [class*='_panel_'] > div > div:has(.s1vaiy3a):not(:has(.tabler-icon-phone-plus)) {
  display: none;
}

/* ---------------------------------------------------------------------------
 * 8. Colour accents (added 2026-11-02): sidebar icon chips + kanban lanes
 * ---------------------------------------------------------------------------
 * daiko.js (laneColors / toneNav):
 *   - tags every sidebar item with data-daiko-tone (by its label);
 *   - copies each board column's status colour (the tag Twenty draws in the
 *     column header) into --lane-bg / --lane-fg on the column, and marks the
 *     header cell with data-daiko-lane-head.
 * Without the script nothing below matches except the lane padding, so the
 * board simply looks like section 7. Light theme only.
 */
.light {
  --tone-amber-bg: #fef3c7;  --tone-amber-fg: #b45309;
  --tone-indigo-bg: #e0e7ff; --tone-indigo-fg: #4338ca;
  --tone-violet-bg: #ede9fe; --tone-violet-fg: #6d28d9;
  --tone-teal-bg: #ccfbf1;   --tone-teal-fg: #0f766e;
  --tone-pink-bg: #fce7f3;   --tone-pink-fg: #be185d;
  --tone-sky-bg: #e0f2fe;    --tone-sky-fg: #0369a1;
  --tone-orange-bg: #ffedd5; --tone-orange-fg: #c2410c;
  --tone-green-bg: #dcfce7;  --tone-green-fg: #15803d;
  --tone-slate-bg: #eceef5;  --tone-slate-fg: #64748b;
}
[data-daiko-tone='amber']  { --tone-bg: var(--tone-amber-bg);  --tone-fg: var(--tone-amber-fg); }
[data-daiko-tone='indigo'] { --tone-bg: var(--tone-indigo-bg); --tone-fg: var(--tone-indigo-fg); }
[data-daiko-tone='violet'] { --tone-bg: var(--tone-violet-bg); --tone-fg: var(--tone-violet-fg); }
[data-daiko-tone='teal']   { --tone-bg: var(--tone-teal-bg);   --tone-fg: var(--tone-teal-fg); }
[data-daiko-tone='pink']   { --tone-bg: var(--tone-pink-bg);   --tone-fg: var(--tone-pink-fg); }
[data-daiko-tone='sky']    { --tone-bg: var(--tone-sky-bg);    --tone-fg: var(--tone-sky-fg); }
[data-daiko-tone='orange'] { --tone-bg: var(--tone-orange-bg); --tone-fg: var(--tone-orange-fg); }
[data-daiko-tone='green']  { --tone-bg: var(--tone-green-bg);  --tone-fg: var(--tone-green-fg); }
[data-daiko-tone='slate']  { --tone-bg: var(--tone-slate-bg);  --tone-fg: var(--tone-slate-fg); }

/* 8a. sidebar: roomier rows, coloured icon chips, active page as a white pill */
html.light .navigation-drawer-item {
  border-radius: 9px;
  padding-top: 5px;
  padding-bottom: 5px;
}
html.light .navigation-drawer-item:hover {
  background: rgb(79 70 229 / 0.06);
}
/* only items that start with an icon get the chip (AI chat history rows have
   no icon: their first child is the title, which must keep its full width) */
html.light .navigation-drawer-item[data-daiko-tone] > div > div:first-child:has(> svg, > div > svg) {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tone-bg);
}
html.light .navigation-drawer-item[data-daiko-tone] svg.tabler-icon.tabler-icon {
  stroke: var(--tone-fg);
}
html.light .navigation-drawer-item[data-daiko-tone] > div > div:first-child:has(> svg, > div > svg) svg.tabler-icon {
  width: 15px;
  height: 15px;
}
html.light a.navigation-drawer-item[aria-current='page'] {
  background: #ffffff;
  box-shadow: 0 0 0 1px #e4e5f3, 0 1px 3px rgb(16 24 40 / 0.06);
  color: var(--t-font-color-primary);
}
/* the rarely used groups (All records, Admin) stay quiet */
html.light .navigation-drawer-item[data-daiko-tone='slate']:has(> div > div:first-child svg) .navigation-drawer-item-label {
  color: var(--t-font-color-tertiary);
}
.section-title-container {
  margin-top: 6px;
}

/* 8b. kanban: first card no longer tucked under the sticky column header */
[data-record-board-column-id] {
  padding-top: 8px !important;
}
/* each column becomes a softly tinted lane in its status colour */
html.light [data-record-board-column-id][style*='--lane-bg'] {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--lane-bg) 55%, #ffffff) 0,
    color-mix(in srgb, var(--lane-bg) 22%, #fbfbfe) 320px,
    #fbfbfe 900px
  );
  border-radius: 12px;
}
/* header: status pill a bit bolder, coloured underline */
html.light [data-daiko-lane-head] {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--lane-fg) 45%, transparent);
}
html.light [data-daiko-lane-head] [class*='_tag_'] {
  font-weight: 600;
}
/* cards: status-coloured stripe on the left edge (drawn by 9a as an inset
   shadow inside the 1px border, so it takes no room from the text) */
html.light [data-record-board-column-id][style*='--lane-fg'] {
  --daiko-card-stripe: inset 3px 0 0 color-mix(in srgb, var(--lane-fg) 55%, #ffffff);
}
/* full company names: wrap to two lines instead of "Tonawanda Limb & B…" */
[id^='record-board-card-'] div[data-selected] > div:first-child [class*='_chip_'] {
  max-width: 100%;
  height: auto;
  align-items: flex-start;
}
[id^='record-board-card-'] div[data-selected] > div:first-child [class*='_chip_'] > span:last-child {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
/* "Log a call": quiet by default, turns into an indigo action when you hover the card */
html.light [id^='record-board-card-'] [class*='_panel_'] > div > div:has(.tabler-icon-phone-plus) .s1vaiy3a {
  color: var(--t-font-color-light);
  font-weight: 500;
  transition: color 0.15s ease;
}
html.light [id^='record-board-card-'] [class*='_panel_'] > div > div:has(.tabler-icon-phone-plus) svg.tabler-icon {
  stroke: var(--t-font-color-extra-light);
}
html.light [id^='record-board-card-'] div[data-selected]:hover [class*='_panel_'] > div > div:has(.tabler-icon-phone-plus) .s1vaiy3a {
  color: var(--daiko-9);
}
html.light [id^='record-board-card-'] div[data-selected]:hover [class*='_panel_'] > div > div:has(.tabler-icon-phone-plus) svg.tabler-icon {
  stroke: var(--daiko-9);
}

/* ---------------------------------------------------------------------------
 * 9. Card & board polish (added 2026-11-02, round 2)
 * ---------------------------------------------------------------------------
 * Cards:
 *   - more room inside (15px on the left, 10-12px elsewhere); the status
 *     colour is an inset stripe (--daiko-card-stripe, set per lane in 8b)
 *     instead of a thick left border, so it no longer crowds the text;
 *   - the title's letter avatar and the field icons sit on one left edge;
 *   - title 13.5px / 600, field text 12.5px in secondary slate, lighter
 *     14px icons; 10px between cards.
 * Board (needs daiko.js laneColors):
 *   - data-daiko-fit="on" + --daiko-col-w: while a view still has Twenty's
 *     default column width (200px), every column gets an equal share of the
 *     visible width, 200-320px. A width set by dragging a column edge (saved in
 *     the view as kanbanColumnWidth) always wins; dragging turns the fit off.
 *   - data-daiko-empty: a header's "-" (no total) only shows on hover.
 * Without the script: cards keep the new spacing, the board keeps 200px.
 */
.light {
  --daiko-card-stripe: 0 0 0 0 transparent;
}

/* 9a. card shell: stripe + soft shadow, also on hover and when selected */
html.light [id^='record-board-card-'] div[data-selected] {
  border-radius: 10px;
  box-shadow: var(--daiko-card-stripe), var(--daiko-card-shadow);
}
html.light [id^='record-board-card-'] div[data-selected]:hover {
  box-shadow: var(--daiko-card-stripe), var(--daiko-card-shadow-hover);
}
html.light [id^='record-board-card-'] div[data-selected='true'] {
  box-shadow: var(--daiko-card-stripe), 0 0 0 2px var(--daiko-4);
}
/* space between cards */
[id^='record-board-card-'][data-selectable-id] > div {
  padding-bottom: 10px;
}

/* 9b. one left edge for the title and the fields */
/* Twenty gives the title row a fixed 32px height and centres it, so a
   two-line name spilled upwards (almost touching the top border) while a
   one-line name sat lower. Let the row grow and pin it to the top: every
   name now starts the same distance from the border. */
[id^='record-board-card-'] div[data-selected] > div:first-child {
  height: auto;
  min-height: 32px;
  align-items: flex-start;
  position: relative;
  padding: 12px 12px 4px 15px;
}
[id^='record-board-card-'] div[data-selected] > div:first-child [class*='_chip_'] {
  padding-top: 0;
  padding-bottom: 0;
}
/* the hover/select checkbox floats in the top-right corner instead of taking
   24px from the name on hover (which re-wrapped names and made cards jump) */
[id^='record-board-card-'] div[data-selected] > div:first-child > .checkbox-container {
  position: absolute;
  top: 7px;
  right: 7px;
  margin: 0;
  border-radius: 6px;
  background: var(--t-background-primary);
}
[id^='record-board-card-'] div[data-selected] [class*='_panel_'] > div {
  padding: 0 10px 10px 15px;
}

/* 9c. type: a clear title, quieter fields */
[id^='record-board-card-'] div[data-selected] > div:first-child [class*='_chip_'] > span:last-child {
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
html.light [id^='record-board-card-'] div[data-selected] > div:first-child [class*='_chip_'] > span:last-child {
  color: #0f172a;
}
/* letter avatar lines up with the first line of a wrapped title; title text
   starts where the field values start (avatar 14 + 8 = icon box 14 + 4 + 4) */
[id^='record-board-card-'] div[data-selected] > div:first-child [class*='_chip_'] {
  gap: 8px;
}
[id^='record-board-card-'] div[data-selected] > div:first-child [class*='_chip_'] > span:first-child {
  margin-top: 1.5px;
}
[id^='record-board-card-'] [class*='_panel_'] > div > div,
[id^='record-board-card-'] [class*='_panel_'] > div > div [class*='_typography_'],
[id^='record-board-card-'] [class*='_panel_'] > div > div [class*='_chip_'] {
  font-size: 12.5px;
}
/* field values in secondary slate (Twenty colours them with this variable;
   coloured tags keep their own colours) */
html.light [id^='record-board-card-'] [class*='_panel_'] {
  --t-font-color-primary: #475569;
}
/* field icons: 14px in a 14px box (path: panel > list > row > line > icon box) */
[id^='record-board-card-'] [class*='_panel_'] > div > div > div > div:first-child > div {
  width: 14px;
  height: 14px;
}
[id^='record-board-card-'] [class*='_panel_'] svg.tabler-icon {
  width: 14px;
  height: 14px;
}
html.light [id^='record-board-card-'] [class*='_panel_'] svg.tabler-icon {
  stroke: #a3acbf;
}
/* full phone numbers: Twenty caps a lone chip at (its box - 18px), which cut
   every number short ("+1 520 888 47…") whatever the column width */
[id^='record-board-card-'] [class*='_panel_'] a[class*='_chip_']:only-child {
  max-width: 100%;
}

/* 9d. columns share the screen (see header comment) */
[id^='record-board-'][data-daiko-fit='on'] > * {
  --record-board-column-width: var(--daiko-col-w);
}

/* 9e. column header: hide the "-" placeholder total until hovered */
[data-daiko-lane-head]:not(:hover) [data-daiko-empty] {
  opacity: 0;
}

/* ---------------------------------------------------------------------------
 * 10. AI assistant placement (added 2026-11-02)
 * ---------------------------------------------------------------------------
 * - "Ask AI" pill (daiko.js askAiButton) next to "+ Create" in every page
 *   header: opens Twenty's AI assistant in the right-side panel, beside the
 *   board / record you are looking at.
 * - The sidebar's speech-bubble "AI" mode looked like messaging: it now has a
 *   sparkle icon and always reads "AI chats" (it is the chat history).
 */
.daiko-ask-ai-wrap {
  display: flex;
  align-items: center;
}
.daiko-ask-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--daiko-9) 40%, transparent);
  background: linear-gradient(135deg, var(--daiko-2), color-mix(in srgb, #a855f7 10%, var(--daiko-2)));
  color: var(--daiko-11);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.daiko-ask-ai:hover {
  border-color: var(--daiko-9);
  box-shadow: 0 2px 8px rgb(79 70 229 / 0.18);
}
.daiko-ask-ai:focus-visible {
  outline: 2px solid var(--daiko-9);
  outline-offset: 2px;
}
.daiko-ask-ai svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
@media (max-width: 720px) {
  .daiko-ask-ai span { display: none; }
  .daiko-ask-ai { padding: 0 6px; }
}

/* sidebar: the AI mode is the chat history */
[aria-label='Navigation modes'] button[aria-label='AI'] svg.tabler-icon-message-circle {
  display: none;
}
[aria-label='Navigation modes'] button[aria-label='AI'] > span:first-child::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2018a2%202%200%200%201%202%202a2%202%200%200%201%202%20-2a2%202%200%200%201%20-2%20-2a2%202%200%200%201%20-2%202zm0%20-12a2%202%200%200%201%202%202a2%202%200%200%201%202%20-2a2%202%200%200%201%20-2%20-2a2%202%200%200%201%20-2%202zm-7%2012a6%206%200%200%201%206%20-6a6%206%200%200%201%20-6%20-6a6%206%200%200%201%20-6%206a6%206%200%200%201%206%206z%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2018a2%202%200%200%201%202%202a2%202%200%200%201%202%20-2a2%202%200%200%201%20-2%20-2a2%202%200%200%201%20-2%202zm0%20-12a2%202%200%200%201%202%202a2%202%200%200%201%202%20-2a2%202%200%200%201%20-2%20-2a2%202%200%200%201%20-2%202zm-7%2012a6%206%200%200%201%206%20-6a6%206%200%200%201%20-6%20-6a6%206%200%200%201%20-6%206a6%206%200%200%201%206%206z%22/%3E%3C/svg%3E") center / contain no-repeat;
}
[aria-label='Navigation modes'] button[aria-label='AI'] > span:last-child {
  width: auto !important;
  max-width: none !important;
  font-size: 0;
}
[aria-label='Navigation modes'] button[aria-label='AI'] > span:last-child::after {
  content: 'AI chats';
  font-size: 13px;
}

/* ===== 11. AI model picker only for Abu (2026-11-02) =====
   daiko.js sets data-daiko-model-lock="on" for everyone not in AI_MODEL_CHOOSERS. The
   server ignores their model choice anyway (DAIKO_AI_MODEL_CHOOSERS patch); this hides the
   "Fast: Claude Haiku 5.5" style picker in the chat box so it doesn't suggest otherwise. */
html[data-daiko-model-lock='on'] button[aria-label^='Extra Fast: '],
html[data-daiko-model-lock='on'] button[aria-label^='Fast: '],
html[data-daiko-model-lock='on'] button[aria-label^='Balanced: '],
html[data-daiko-model-lock='on'] button[aria-label^='Smart: '],
html[data-daiko-model-lock='on'] button[aria-label^='Extra Smart: '] {
  display: none !important;
}