/*!
 * 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;
  }
}