/* Feuille d'accessibilite — Twenty CRM, Groupe Palmer.
 * Ajoutee le 03/11/2026 : contraste insuffisant et zones de saisie invisibles.
 *
 * Mesures relevees a l'ecran AVANT correction, sur fond blanc :
 *   - etiquettes de champ  #999999  -> 2,8:1   (WCAG 2.2 AA en exige 4,5:1)
 *   - texte d'invite       #B3B3B3  -> 2,0:1
 *   - cases a cocher       13 px, sans bordure
 *   - champs de saisie     aucun cadre, aucun fond : invisibles tant qu'on
 *                          n'a pas clique dedans
 *
 * Twenty n'expose pas de variables CSS (son theme est en JavaScript) et ses
 * classes sont engendrees par Emotion, donc elles changent a chaque version.
 * Les regles ci-dessous ne s'appuient que sur des reperes stables : balises,
 * attributs data-testid, et la structure d'une ligne de champ.
 *
 * Pour tout retirer : supprimer « entrypoint », « command » et les deux
 * montages du service « server » dans docker-compose.yml, puis
 * « docker compose up -d server ».
 */

/* ------------------------------------------------------------------ *
 * 2. OU PUIS-JE ECRIRE — tout champ de saisie porte un cadre visible.
 * ------------------------------------------------------------------ */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
[contenteditable="true"] {
  box-sizing: border-box !important;
  border: 1.5px solid #5f5f5f !important;
  border-radius: 4px !important;
}

html.light input:not([type="checkbox"]):not([type="radio"]),
html.light textarea,
html.light [contenteditable="true"] {
  background-color: #ffffff !important;
  color: #1b1b1b !important;
}

/* 3. Le texte d'invite cesse d'etre un gris illisible. */
::placeholder {
  color: #5a5a5a !important;
  opacity: 1 !important;
}

/* 4. Les cases a cocher, plus grandes et cernees. */
input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  accent-color: #0b57d0;
  outline: 1px solid #5f5f5f;
  outline-offset: -1px;
  border-radius: 3px;
}

/* ------------------------------------------------------------------ *
 * 5. LIGNES DE CHAMP. La portee est le bloc des champs lui-meme,
 *    `record-fields-widget`, present AUSSI BIEN dans le panneau lateral que
 *    sur la fiche plein ecran. Ne PAS se fier a `data-side-panel` : il
 *    existe sur la fiche plein ecran mais les champs n'y sont pas, et la
 *    feuille n'y faisait donc rien (constate le 03/11/2026).
 *
 *    Une ligne de champ se reconnait a trois traits, verifies le
 *    03/11/2026 : exactement deux enfants, une infobulle a trois niveaux
 *    sous le PREMIER enfant (l'etiquette), et une valeur dans le second.
 *    Le « :not(:has([data-testid=tooltip])) » sur la valeur ecarte les
 *    conteneurs englobants, qui matcheraient sinon et dessineraient un
 *    grand cadre autour de toute la colonne.
 * ------------------------------------------------------------------ */

/* 5a. L'etiquette passe en gras et en noir. */
[data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:first-child,
[data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:first-child * {
  color: #1b1b1b !important;
  font-weight: 600 !important;
}

/* 5b. La valeur recoit un cadre : on voit ou l'on peut ecrire avant de cliquer. */
[data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:last-child:not(:has([data-testid="tooltip"])) {
  /* OUTLINE, et surtout pas « border + padding ». Au survol, Twenty peint
   * DEUX copies superposees du texte d'un champ (une pour l'affichage, une
   * pour l'edition). Une marge interieure n'en decale qu'une : le texte
   * s'affiche alors en double, decale de la valeur exacte du padding.
   * Constate le 03/11/2026 sur « Proprietaire du compte », 4 px d'ecart.
   * « outline » se dessine en dehors du flux : il n'decale rien. */
  outline: 1px dashed #9a9a9a !important;
  /* Decalage NEGATIF : le conteneur parent du champ est en « overflow:
   * hidden » et s'arrete exactement au bord de la valeur. Un trait dessine
   * a l'exterieur y est donc rogne — le cadre apparaissait ouvert a droite
   * (constate le 03/11/2026). Dessine a l'interieur, il est complet. */
  outline-offset: -1px !important;
  border-radius: 3px !important;
}

/* 5c. Le texte de la valeur, invite comprise, devient lisible. */
[data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:last-child:not(:has([data-testid="tooltip"])),
[data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:last-child:not(:has([data-testid="tooltip"])) * {
  color: #3a3a3a !important;
}

/* 5d. Au survol, le trait devient plein et noir : la cible est designee. */
[data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:last-child:not(:has([data-testid="tooltip"])):hover {
  outline-style: solid !important;
  outline-color: #1b1b1b !important;
}

html.light [data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:last-child:not(:has([data-testid="tooltip"])):hover {
  background-color: #eef3fd !important;
}

/* 6. Les titres de section du panneau passent en gras et en noir. */
[data-testid="record-fields-widget"] header,
[data-testid="record-fields-widget"] header * {
  color: #1b1b1b !important;
  font-weight: 700 !important;
}

/* ------------------------------------------------------------------ *
 * 7. Les pastilles recoivent un contour : la forme et le texte portent
 *    l'information, et plus seulement la teinte.
 * ------------------------------------------------------------------ */
[data-testid="chip"] {
  border: 1px solid #6b6b6b !important;
  border-radius: 4px !important;
}

/* ------------------------------------------------------------------ *
 * 8. OU SUIS-JE — contour franc sur l'element actif, clavier et souris.
 *    EN DERNIER a dessein : les cadres de champ utilisent aussi
 *    « outline », et a egalite de poids c'est l'ordre qui tranche.
 *    Le focus doit l'emporter sur le cadre au repos.
 * ------------------------------------------------------------------ */
*:focus-visible {
  outline: 3px solid #0b57d0 !important;
  outline-offset: 1px !important;
  border-radius: 3px;
}

/* ------------------------------------------------------------------ *
 * 9. THEME SOMBRE.
 *    Les regles ci-dessus imposent des couleurs sombres (etiquettes en
 *    #1b1b1b, valeurs en #3a3a3a) : en theme sombre elles deviennent
 *    NOIR SUR NOIR, donc illisibles — exactement l'inverse du but
 *    recherche. Constate le 03/11/2026 en basculant le theme.
 *    Le prefixe « html.dark » ajoute de la specificite : ces regles
 *    l'emportent quel que soit leur rang dans le fichier.
 * ------------------------------------------------------------------ */

html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark textarea,
html.dark [contenteditable="true"] {
  border-color: #8f8f8f !important;
  color: #f2f2f2 !important;
}

html.dark ::placeholder {
  color: #a9a9a9 !important;
}

html.dark [data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:first-child,
html.dark [data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:first-child *,
html.dark [data-testid="record-fields-widget"] header,
html.dark [data-testid="record-fields-widget"] header * {
  color: #f2f2f2 !important;
}

html.dark [data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:last-child:not(:has([data-testid="tooltip"])),
html.dark [data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:last-child:not(:has([data-testid="tooltip"])) * {
  color: #d6d6d6 !important;
}

html.dark [data-testid="record-fields-widget"] div:has(> *:first-child > * > [data-testid="tooltip"]):has(> :nth-child(2):last-child) > *:last-child:not(:has([data-testid="tooltip"])):hover {
  outline-color: #ffffff !important;
  background-color: #2a3344 !important;
}

html.dark [data-testid="chip"] {
  border-color: #9a9a9a !important;
}