/*
 * FinSchool brand theme for Twenty CRM.
 * Remaps accent + primary (blue) UI tokens to FinSchool orange,
 * and swaps Inter → Manrope (FinSchool landing/cabinet stack).
 * Injected as /finschool-brand.css after Twenty's theme-light/dark.css.
 *
 * Brand: #F7943C · hover #E07E28 · soft #FFF1E4 · ink #2C241C · cream #F4EDE4
 * Fonts: Manrope (same as finschool.pro landing/cabinet)
 */

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

html,
body,
#root {
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.light,
html.light :root,
:root.light {
  --t-font-family: Manrope, system-ui, sans-serif;
  --t-font-weight-regular: 400;
  --t-font-weight-medium: 500;
  --t-font-weight-semi-bold: 600;

  /* Soft paper atmosphere — also paints left nav + top bar (background.noisy) */
  --t-background-noisy: linear-gradient(
      165deg,
      #fff8f0 0%,
      #fff1e4 42%,
      #f4ede4 100%
    ),
    #fff1e4;
  --t-background-primary: #fffdf9;
  --t-background-secondary: #faf6f1;
  --t-background-tertiary: #f0ebe4;
  --t-background-quaternary: #e8e1d8;
  --t-background-transparent-blue: #f7943c14;
  --t-background-transparent-orange: #f7943c29;
  /* Nav hover / active chips (was black alpha) → brand orange wash */
  --t-background-transparent-strong: #f7943c33;
  --t-background-transparent-medium: #f7943c24;
  --t-background-transparent-light: #f7943c1a;
  --t-background-transparent-lighter: #f7943c0f;

  --t-border-color-blue: #f5a85a;
  --t-border-color-strong: #e8d5c0;
  --t-border-color-medium: #f0e4d6;
  --t-border-color-light: #f5ebe0;

  --t-font-color-primary: #2c241c;
  --t-font-color-secondary: #5c4a3a;
  --t-font-color-tertiary: #8a7d72;
  --t-font-color-light: #a89888;
  --t-font-color-extra-light: #c4b6a8;

  --t-buttons-secondary-text-color: #c56a1a;

  /* Warm gray scale (pills, chips, muted UI) */
  --t-gray-scale-gray1: #fffdf9;
  --t-gray-scale-gray2: #faf6f1;
  --t-gray-scale-gray3: #f4ede4;
  --t-gray-scale-gray4: #efe4d6;
  --t-gray-scale-gray5: #e8d9c8;
  --t-gray-scale-gray6: #d4c2ae;
  --t-gray-scale-gray7: #c4b09a;
  --t-gray-scale-gray8: #a89888;
  --t-gray-scale-gray9: #8a7d72;
  --t-gray-scale-gray10: #6e6258;
  --t-gray-scale-gray11: #5c4a3a;
  --t-gray-scale-gray12: #2c241c;

  /* Accent scale (was indigo) → FinSchool orange */
  --t-accent-primary: #ffe8d2;
  --t-accent-secondary: #ffe8d2;
  --t-accent-tertiary: #fff1e4;
  --t-accent-quaternary: #fff8f0;
  --t-accent-accent3570: #f5a85a;
  --t-accent-accent4060: #f5a85a;
  --t-accent-accent1: #fffdf9;
  --t-accent-accent2: #fff8f0;
  --t-accent-accent3: #fff1e4;
  --t-accent-accent4: #ffe8d2;
  --t-accent-accent5: #ffd9b0;
  --t-accent-accent6: #ffc78a;
  --t-accent-accent7: #f5b06a;
  --t-accent-accent8: #f5a85a;
  --t-accent-accent9: #f7943c;
  --t-accent-accent10: #e07e28;
  --t-accent-accent11: #c56a1a;
  --t-accent-accent12: #2c241c;

  /* Primary buttons / links use color.blue* — map to brand orange */
  --t-color-blue: #f7943c;
  --t-color-blue1: #fffdf9;
  --t-color-blue2: #fff8f0;
  --t-color-blue3: #fff1e4;
  --t-color-blue4: #ffe8d2;
  --t-color-blue5: #ffd9b0;
  --t-color-blue6: #ffc78a;
  --t-color-blue7: #f5b06a;
  --t-color-blue8: #f5a85a;
  --t-color-blue9: #f7943c;
  --t-color-blue10: #e07e28;
  --t-color-blue11: #c56a1a;
  --t-color-blue12: #2c241c;
  --t-color-orange: #f7943c;
  --t-color-amber: #f5c542;
  --t-color-green: #2fae68;

  --t-color-transparent-blue1: #f7943c08;
  --t-color-transparent-blue2: #f7943c0d;
  --t-color-transparent-blue3: #f7943c14;
  --t-color-transparent-blue4: #f7943c1f;
  --t-color-transparent-blue5: #f7943c29;
  --t-color-transparent-blue6: #f7943c33;
  --t-color-transparent-blue7: #f7943c47;
  --t-color-transparent-blue8: #f7943c66;
  --t-color-transparent-blue9: #f7943cc2;
  --t-color-transparent-blue10: #e07e28c2;
  --t-color-transparent-blue11: #c56a1acc;
  --t-color-transparent-blue12: #2c241ce6;

  --t--illustration-icon-color-blue: #f5a85a;
  --t--illustration-icon-fill-blue: #ffe8d2;
}

/* Left navigation drawer — warmer brand plane + active item */
html.light [data-click-outside-id='navigation-drawer'],
:root.light [data-click-outside-id='navigation-drawer'] {
  background: linear-gradient(180deg, #fff1e4 0%, #f8ebe0 55%, #f4e6d8 100%);
  border-right: 1px solid #f0e4d6;
  font-family: Manrope, system-ui, sans-serif;
}

html.light [data-click-outside-id='navigation-drawer'] button,
:root.light [data-click-outside-id='navigation-drawer'] button {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
}

html.light [data-click-outside-id='navigation-drawer'] button[aria-selected='true'],
:root.light [data-click-outside-id='navigation-drawer'] button[aria-selected='true'] {
  background: #f7943c24 !important;
  color: #c56a1a !important;
}

/* Page titles / headers — slightly rounder FinSchool voice */
html.light h1,
html.light h2,
:root.light h1,
:root.light h2 {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #2c241c;
}

html.dark,
html.dark :root,
:root.dark {
  --t-font-family: Manrope, system-ui, sans-serif;
  --t-font-weight-regular: 400;
  --t-font-weight-medium: 500;
  --t-font-weight-semi-bold: 600;

  --t-background-noisy: linear-gradient(
      165deg,
      #2a1c12 0%,
      #1f150e 50%,
      #18110c 100%
    ),
    #1f150e;
  --t-background-transparent-blue: #f7943c29;
  --t-background-transparent-orange: #f7943c3d;
  --t-background-transparent-strong: #f7943c47;
  --t-background-transparent-medium: #f7943c33;
  --t-background-transparent-light: #f7943c24;
  --t-background-transparent-lighter: #f7943c14;
  --t-border-color-blue: #e07e28;
  --t-buttons-secondary-text-color: #ffc78a;
  --t-font-color-primary: #fff1e4;
  --t-font-color-secondary: #ffc78a;
  --t-font-color-tertiary: #c4a88a;

  --t-accent-primary: #4a2e14;
  --t-accent-secondary: #4a2e14;
  --t-accent-tertiary: #3a2410;
  --t-accent-quaternary: #24160a;
  --t-accent-accent3570: #c56a1a;
  --t-accent-accent4060: #c56a1a;
  --t-accent-accent1: #1a120c;
  --t-accent-accent2: #24160a;
  --t-accent-accent3: #3a2410;
  --t-accent-accent4: #4a2e14;
  --t-accent-accent5: #5c3a18;
  --t-accent-accent6: #7a4a1c;
  --t-accent-accent7: #a85c20;
  --t-accent-accent8: #c56a1a;
  --t-accent-accent9: #f7943c;
  --t-accent-accent10: #ffb060;
  --t-accent-accent11: #ffc78a;
  --t-accent-accent12: #fff1e4;

  --t-color-blue: #f7943c;
  --t-color-blue1: #1a120c;
  --t-color-blue2: #24160a;
  --t-color-blue3: #3a2410;
  --t-color-blue4: #4a2e14;
  --t-color-blue5: #5c3a18;
  --t-color-blue6: #7a4a1c;
  --t-color-blue7: #a85c20;
  --t-color-blue8: #c56a1a;
  --t-color-blue9: #f7943c;
  --t-color-blue10: #ffb060;
  --t-color-blue11: #ffc78a;
  --t-color-blue12: #fff1e4;
  --t-color-orange: #f7943c;
  --t-color-amber: #f5c542;
  --t-color-green: #2fae68;

  --t-color-transparent-blue1: #f7943c14;
  --t-color-transparent-blue2: #f7943c1f;
  --t-color-transparent-blue3: #f7943c29;
  --t-color-transparent-blue4: #f7943c33;
  --t-color-transparent-blue5: #f7943c47;
  --t-color-transparent-blue6: #f7943c59;
  --t-color-transparent-blue7: #f7943c6e;
  --t-color-transparent-blue8: #f7943c8f;
  --t-color-transparent-blue9: #f7943ccc;
  --t-color-transparent-blue10: #ffb060cc;
  --t-color-transparent-blue11: #ffc78acc;
  --t-color-transparent-blue12: #fff1e4e6;

  --t--illustration-icon-color-blue: #f7943c;
  --t--illustration-icon-fill-blue: #5c3a18;
}

html.dark [data-click-outside-id='navigation-drawer'],
:root.dark [data-click-outside-id='navigation-drawer'] {
  background: linear-gradient(180deg, #2a1c12 0%, #1a120c 100%);
  border-right: 1px solid #3a2410;
  font-family: Manrope, system-ui, sans-serif;
}

html.dark [data-click-outside-id='navigation-drawer'] button[aria-selected='true'],
:root.dark [data-click-outside-id='navigation-drawer'] button[aria-selected='true'] {
  background: #f7943c33 !important;
  color: #ffc78a !important;
}

/* —— Opportunity kanban: compact amoCRM-like cards —— */
[data-fs-opportunity-card='true'] {
  background: #fff !important;
  border: 1px solid #ebe3d8 !important;
  border-radius: 6px !important;
}

[data-fs-opportunity-card='true'] .checkbox-container {
  z-index: 2;
}

/*
 * Stock Twenty card rearrange (works on current image):
 * contact | date
 * title
 * amount
 */
div[data-selected]:has([id$='-pointOfContact']):has([id$='-amount']),
div[data-focused]:has([id$='-pointOfContact']):has([id$='-amount']),
div[data-active]:has([id$='-pointOfContact']):has([id$='-amount']) {
  align-items: center;
  background: #fff !important;
  border-color: #ebe3d8 !important;
  display: grid !important;
  gap: 2px 8px;
  grid-template-areas:
    'contact date'
    'title title'
    'amount amount';
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 10px !important;
}

div[data-selected]:has([id$='-pointOfContact']):has([id$='-amount']) > *:first-child,
div[data-focused]:has([id$='-pointOfContact']):has([id$='-amount']) > *:first-child,
div[data-active]:has([id$='-pointOfContact']):has([id$='-amount']) > *:first-child {
  color: #f7943c !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  grid-area: title;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

div[data-selected]:has([id$='-pointOfContact']):has([id$='-amount']) > *:first-child img,
div[data-focused]:has([id$='-pointOfContact']):has([id$='-amount']) > *:first-child img,
div[data-active]:has([id$='-pointOfContact']):has([id$='-amount']) > *:first-child img {
  display: none !important;
}

div[data-selected]:has([id$='-pointOfContact']):has([id$='-amount']) > *:nth-child(2),
div[data-selected]:has([id$='-pointOfContact']):has([id$='-amount']) > *:nth-child(2) *,
div[data-focused]:has([id$='-pointOfContact']):has([id$='-amount']) > *:nth-child(2),
div[data-focused]:has([id$='-pointOfContact']):has([id$='-amount']) > *:nth-child(2) *,
div[data-active]:has([id$='-pointOfContact']):has([id$='-amount']) > *:nth-child(2),
div[data-active]:has([id$='-pointOfContact']):has([id$='-amount']) > *:nth-child(2) * {
  display: contents !important;
}

div[data-selected]:has([id$='-pointOfContact']) [id$='-pointOfContact'],
div[data-focused]:has([id$='-pointOfContact']) [id$='-pointOfContact'],
div[data-active]:has([id$='-pointOfContact']) [id$='-pointOfContact'] {
  color: #2c241c !important;
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  grid-area: contact;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div[data-selected]:has([id$='-pointOfContact']) [id$='-closeDate'],
div[data-focused]:has([id$='-pointOfContact']) [id$='-closeDate'],
div[data-active]:has([id$='-pointOfContact']) [id$='-closeDate'] {
  color: #8a7d72 !important;
  display: block !important;
  font-size: 11px !important;
  grid-area: date;
  justify-self: end;
  white-space: nowrap;
}

div[data-selected]:has([id$='-pointOfContact']) [id$='-amount'],
div[data-focused]:has([id$='-pointOfContact']) [id$='-amount'],
div[data-active]:has([id$='-pointOfContact']) [id$='-amount'] {
  color: #8a7d72 !important;
  display: block !important;
  font-size: 12px !important;
  grid-area: amount;
}

div[data-selected]:has([id$='-pointOfContact']) [id^='label-'],
div[data-focused]:has([id$='-pointOfContact']) [id^='label-'],
div[data-active]:has([id$='-pointOfContact']) [id^='label-'],
div[data-selected]:has([id$='-pointOfContact']) div:has(> [id$='-createdBy']),
div[data-focused]:has([id$='-pointOfContact']) div:has(> [id$='-createdBy']),
div[data-active]:has([id$='-pointOfContact']) div:has(> [id$='-createdBy']),
div[data-selected]:has([id$='-pointOfContact']) div:has(> [id$='-company']),
div[data-focused]:has([id$='-pointOfContact']) div:has(> [id$='-company']),
div[data-active]:has([id$='-pointOfContact']) div:has(> [id$='-company']) {
  display: none !important;
}