/* Thème SIZU pour Twenty CRM — crm.sizu.fr
   Override les variables --t-* de Twenty avec les tokens SIZU.
   Ref: web/docs/sizu-crm.md §23 */

/* Pas de @font-face ici : une source vide provoquait des
   « Failed to decode downloaded font ». Space Grotesk est utilisée si elle est
   installée, sinon la pile système prend le relais. */

/* ============================================================
   Tokens SIZU (design system v3.4)
   ============================================================ */
:root {
  --paper: #FFFFFF;
  --paper-2: #F5F5F8;
  --ink: #0E0E12;
  --ink-2: #17171E;
  --ink-soft: #63626E;
  --d-text: #F4F3F8;
  --d-muted: #A2A0B2;
  --line: #E7E7EC;
  --line-d: rgba(255,255,255,.09);
  --v-50: #F0EEFE;
  --v-100: #E4E0FD;
  --v-200: #C9C2FB;
  --v-300: #A79CF7;
  --v-400: #8172F3;
  --v-500: #5A4FF0;
  --v-600: #4A40E0;
  --v-700: #3B32C4;
  --v-800: #2F2999;
  --v-900: #221E70;
  --accent: var(--v-500);
  --accent-d: #8E85FF;
  --success: #1E9E6A;
  --success-bg: #E7F6EF;
  --error: #E0453C;
  --error-bg: #FBEBEA;
  --warning: #8A4F00;
  --warning-bg: #FBF1E2;
  --info: #3B76F6;
  --info-bg: #EAF0FE;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --e1: 0 1px 2px rgba(14,14,18,.06);
  --e2: 0 10px 28px rgba(14,14,18,.10);
  --e3: 0 24px 56px rgba(14,14,18,.16);
  --e-accent: 0 12px 30px rgba(90,79,240,.28);
}

/* ============================================================
   Override Twenty theme variables (light mode)
   ============================================================ */
html.light, :root {
  /* Accent / Primary → violet SIZU */
  --t-accent-primary: var(--v-500) !important;
  --t-accent-secondary: var(--v-400) !important;
  --t-accent-tertiary: var(--v-300) !important;
  --t-accent-quaternary: var(--v-200) !important;
  --t-accent-accent: var(--v-500) !important;

  /* Backgrounds */
  --t-background-primary: var(--paper) !important;
  --t-background-secondary: var(--paper-2) !important;
  --t-background-tertiary: #EDEDF0 !important;
  --t-background-quaternary: #E4E4E9 !important;
  --t-background-noisy: var(--paper-2) !important;
  --t-background-inverted-primary: var(--ink) !important;
  --t-background-inverted-secondary: var(--ink-2) !important;
  --t-background-radial-gradient: radial-gradient(50% 62.62% at 50% 0%, #F5F3FF 0%, var(--paper) 100%) !important;
  --t-background-radial-gradient-hover: radial-gradient(75% 75% at 50% 0%, #EBE8FE 0%, var(--paper-2) 100%) !important;
  --t-background-transparent-primary: rgba(90,79,240,0.08) !important;
  --t-background-transparent-secondary: rgba(90,79,240,0.04) !important;
  --t-background-transparent-light: rgba(14,14,18,0.04) !important;
  --t-background-transparent-lighter: rgba(14,14,18,0.02) !important;
  --t-background-transparent-medium: rgba(14,14,18,0.08) !important;
  --t-background-transparent-strong: rgba(14,14,18,0.12) !important;
  --t-background-transparent-success: var(--success-bg) !important;
  --t-background-transparent-danger: var(--error-bg) !important;
  --t-background-transparent-orange: var(--warning-bg) !important;
  --t-background-transparent-blue: var(--info-bg) !important;
  --t-background-danger: var(--error-bg) !important;

  /* Font */
  --t-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  --t-font-color-primary: var(--ink) !important;
  --t-font-color-secondary: var(--ink-soft) !important;
  --t-font-color-tertiary: #9090A0 !important;
  --t-font-color-light: #B0B0BC !important;
  --t-font-color-extra-light: #D0D0DA !important;
  --t-font-color-inverted: var(--d-text) !important;
  --t-font-color-danger: var(--error) !important;

  /* Borders */
  --t-border-color-light: var(--line) !important;
  --t-border-color-medium: #D8D8E0 !important;
  --t-border-color-strong: #C8C8D2 !important;
  --t-border-color-inverted: var(--line-d) !important;
  --t-border-color-danger: var(--error) !important;
  --t-border-color-blue: var(--info) !important;

  /* Border radius → SIZU tokens */
  --t-border-radius-xs: 4px !important;
  --t-border-radius-sm: var(--r-sm) !important;
  --t-border-radius-md: 12px !important;
  --t-border-radius-lg: var(--r-md) !important;
  --t-border-radius-xl: var(--r-lg) !important;
  --t-border-radius-xxl: 28px !important;
  --t-border-radius-pill: var(--r-pill) !important;
  --t-border-radius-rounded: 50% !important;

  /* Box shadows → SIZU tokens */
  --t-box-shadow-light: var(--e1) !important;
  --t-box-shadow-strong: var(--e2) !important;
  --t-box-shadow-super-heavy: var(--e3) !important;

  /* Snackbar / Toast */
  --t-snack-bar-success-background-color: var(--success-bg) !important;
  --t-snack-bar-success-color: var(--success) !important;
  --t-snack-bar-error-background-color: var(--error-bg) !important;
  --t-snack-bar-error-color: var(--error) !important;
  --t-snack-bar-info-background-color: var(--info-bg) !important;
  --t-snack-bar-info-color: var(--info) !important;
  --t-snack-bar-warning-background-color: var(--warning-bg) !important;
  --t-snack-bar-warning-color: var(--warning) !important;

  /* Tag purple → SIZU violet */
  --t-tag-background-purple: var(--v-50) !important;
  --t-tag-text-purple: var(--v-700) !important;
  --t-color-purple: var(--v-500) !important;
  --t-color-transparent-purple: rgba(90,79,240,0.12) !important;
  --t-color-violet: var(--v-600) !important;
  --t-color-transparent-violet: rgba(90,79,240,0.10) !important;

  /* Green → SIZU success */
  --t-color-green: var(--success) !important;
  --t-tag-background-green: var(--success-bg) !important;
  --t-tag-text-green: #166B48 !important;

  /* Red → SIZU error */
  --t-color-red: var(--error) !important;
  --t-tag-background-red: var(--error-bg) !important;
  --t-tag-text-red: #A8322A !important;

  /* NE JAMAIS surcharger --t-animation-duration-* : Twenty passe ces valeurs
     à framer-motion, qui attend un nombre en SECONDES et non une durée CSS.
     Une valeur « 150ms » produisait :
     TypeError: Failed to execute 'animate' on 'Element':
     duration must be non-negative or auto
     → exception non rattrapée → « Désolé, quelque chose a mal tourné ». */
}

/* ============================================================
   Dark mode overrides
   ============================================================ */
html.dark {
  --t-background-primary: var(--ink) !important;
  --t-background-secondary: var(--ink-2) !important;
  --t-background-tertiary: #1F1F28 !important;
  --t-background-quaternary: #28283A !important;
  --t-background-inverted-primary: var(--paper) !important;
  --t-background-inverted-secondary: var(--paper-2) !important;
  --t-font-color-primary: var(--d-text) !important;
  --t-font-color-secondary: var(--d-muted) !important;
  --t-font-color-tertiary: #7A7890 !important;
  --t-font-color-inverted: var(--ink) !important;
  --t-border-color-light: var(--line-d) !important;
  --t-border-color-medium: rgba(255,255,255,0.12) !important;
  --t-border-color-strong: rgba(255,255,255,0.18) !important;
  --t-accent-primary: var(--accent-d) !important;
  --t-accent-secondary: var(--v-400) !important;
  --t-box-shadow-light: 0 1px 3px rgba(0,0,0,0.3) !important;
  --t-box-shadow-strong: 0 10px 28px rgba(0,0,0,0.4) !important;
}

/* ============================================================
   Typography global
   ============================================================ */
body, input, textarea, select, button {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* ============================================================
   Navigation — logo SIZU
   Le sélecteur visait « navigation-drawer-header », qui n'existe pas dans
   cette version de Twenty : la règle ne s'appliquait donc jamais. L'élément
   réel est le sélecteur d'espace de travail.
   ============================================================ */
[data-testid="workspace-dropdown"] {
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
/* L'avatar par défaut affiche l'initiale « S » du nom de l'espace de travail.
   L'étoile la remplace : garder les deux produisait « ✦ S Sizu ». */
[data-testid="workspace-dropdown"] > img:first-child,
[data-testid="workspace-dropdown"] > div:first-child > img,
[data-testid="workspace-dropdown"] [data-testid="avatar"],
[data-testid="workspace-dropdown"] > div[class*="Avatar"],
[data-testid="workspace-dropdown"] > *:first-child:not(span):not(svg) {
  display: none !important;
}

/* L'étoile SIZU précède le nom de l'espace de travail. */
[data-testid="workspace-dropdown"]::before {
  content: '✦';
  color: var(--accent);
  font-size: 1.05em;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ============================================================
   Boutons — SIZU pill shape + accent shadow
   ============================================================ */
button[data-variant="primary"],
[class*="StyledButton"][data-accent="blue"],
[class*="StyledButton"][data-accent="default"] {
  border-radius: var(--r-pill) !important;
  transition: transform 300ms var(--ease, cubic-bezier(.22,1,.36,1)), box-shadow 300ms !important;
}
button[data-variant="primary"]:hover,
[class*="StyledButton"][data-accent="blue"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--e-accent) !important;
}

/* ============================================================
   Cartes record — bord arrondi + lift hover
   ============================================================ */
[class*="RecordBoardCard"],
[class*="StyledCard"],
[class*="RecordDetail"] {
  border-radius: var(--r-lg) !important;
  transition: transform 300ms, box-shadow 300ms !important;
}
[class*="RecordBoardCard"]:hover,
[class*="StyledCard"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--e2) !important;
}

/* ============================================================
   Tables — style SIZU
   ============================================================ */
[class*="RecordTableHeader"] th,
[class*="StyledTableHeader"] {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.7rem !important;
}