/*
 * Fiche contact v2 (Karim, 8 oct) : la maquette fiche-contact-maquette.html, valeurs recopiées.
 * Accroche : `nbt-fiche-contact` (ViewContact::getPageClasses). Ce projet ne compile pas
 * Tailwind (AucuneClasseFantomeTest) : chaque classe des vues resources/views/filament/contacts/ est ici.
 */

/* Les rôles à côté du nom (`.rchip`). */
.nbt-rchip { display: inline-block; border-radius: 999px; padding: 3px 10px; margin-inline-start: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; vertical-align: middle; background: var(--nbt-wash); color: var(--nbt-red-deep); }
.dark .nbt-rchip { background: color-mix(in oklab, var(--nbt-red) 25%, transparent); color: #FFFFFF; }

/* Les deux colonnes : 16 px entre les cartes, comme la maquette. */
.nbt-fiche-contact .fi-sc-grid > .fi-grid-col > .fi-sc-group > .fi-sc { row-gap: 16px; }

/* Un état vide tient sur une ligne (« Aucun entretien »), pas 170 px. */
.nbt-fiche-contact .fi-ta-empty-state { padding: 12px 20px; }
.nbt-fiche-contact .fi-ta-empty-state .fi-ta-empty-state-content { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 12px; text-align: start; max-width: none; margin: 0; }
.nbt-fiche-contact .fi-ta-empty-state-icon-bg { display: none; }
.nbt-fiche-contact .fi-ta-empty-state .fi-ta-empty-state-heading { font-size: 14px; font-weight: 400; color: #6B6875; }
.nbt-fiche-contact .fi-ta-empty-state-description { margin: 0; font-size: 12.5px; }
.nbt-fiche-contact .fi-ta-empty-state-actions { margin: 0 0 0 auto; }
/* Un tableau vide ne garde pas ses en-têtes de colonnes au-dessus de « Aucun … ». */
.nbt-fiche-contact .fi-ta-content-ctn:has(~ .fi-ta-empty-state) { display: none; }

/* Pas de barre « par page » quand tout tient sur une page : Filament n'y met alors aucun numéro de page. */
.nbt-fiche-contact .fi-ta-ctn .fi-pagination:not(:has(.fi-pagination-items)) { display: none; }

/* L'argent : à droite, chiffres de même largeur (« 42 000,00 DH »). */
.nbt-fiche-contact .fi-ta-text.fi-align-end, .nbt-fiche-contact .fi-align-end .fi-ta-text-item { font-variant-numeric: tabular-nums; white-space: nowrap; }

/*
 * « 42 000,00 DH » et non « 42000,00DH » : Money::format() sépare par une espace fine insécable (U+202F),
 * qu'Outfit n'a pas ; le navigateur la prend alors à une police système où elle fait 1 à 2 px, et les
 * milliers se collent (la capture de Karim). Cette police ne couvre QUE ce caractère, deux fois plus large.
 */
@font-face { font-family: 'nbt-espace-fine'; src: local('Helvetica Neue'), local('Helvetica'), local('Segoe UI'), local('Arial'); unicode-range: U+202F; size-adjust: 200%; }
.nbt-fiche-contact, .nbt-apercu-dossier { font-family: 'nbt-espace-fine', var(--font-family), ui-sans-serif, system-ui, sans-serif; }

/* La bande (`.hl`) : six cases, cinq sans le droit de voir les factures ; deux par ligne sur un téléphone (nbt-brand.css). */
.nbt-bref-contact { grid-template-columns: repeat(var(--nbt-cases, 6), 1fr); }
.nbt-bref-grand { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nbt-pastille-ok { background: #ECFDF3; color: #15803D; }
@media (max-width: 1100px) { .nbt-bref-contact { grid-template-columns: repeat(2, 1fr); } }

/* « 📞 Noter un appel » : le numéro en grand, à copier. */
.nbt-numero { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #E7E5EA; border-radius: 10px; padding: 10px 12px; }
.nbt-numero-libelle { display: block; color: #6B6875; font-size: 12.5px; }
.nbt-numero-valeur { display: block; font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.nbt-numero-copier { border: 1px solid #E7E5EA; background: #FFFFFF; border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 13px; cursor: pointer; }
.dark .nbt-numero, .dark .nbt-numero-copier { border-color: rgb(255 255 255 / .1); background: transparent; }

/* « Services & dossiers » : la barre d'avancement (`.bar`). */
.nbt-avancement { width: 120px; padding: 12px 8px; white-space: normal; }
.nbt-barre { height: 6px; border-radius: 9px; background: #EEECF1; overflow: hidden; width: 110px; margin: 3px 0 4px; }
.nbt-barre > i { display: block; height: 100%; background: var(--nbt-red); }

/* L'aperçu 👁 d'un dossier (`.so` de la maquette) : blocs en petites capitales, une ligne par élément. */
.nbt-apercu-dossier { font-size: 14px; line-height: 1.45; }
.nbt-apercu-dossier h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #6B6875; }
.nbt-apercu-dossier h4:first-child { margin-top: 4px; }
.nbt-ap-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nbt-ap-k { font-size: 12px; color: #6B6875; margin-bottom: 2px; }
.nbt-ap-v { font-weight: 600; }
.nbt-ap-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nbt-ap-indice { color: #6B6875; font-size: 12.5px; }
.nbt-ap-ligne { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid #E7E5EA; align-items: start; }
.nbt-ap-ligne:last-child { border-bottom: 0; }
.nbt-ap-contrat { margin-top: 10px; border-top: 1px solid #E7E5EA; }
.nbt-ap-lien { color: #6B6875; font-size: 13px; }
.nbt-ap-puce { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; border: 1.5px solid #6B6875; }
.nbt-ap-etape-faite .nbt-ap-puce { border-color: #15803D; background: #15803D; }
.nbt-ap-etape-courante .nbt-ap-puce { border-color: var(--nbt-red); background: var(--nbt-red); }
.nbt-ap-etape-courante > span:nth-child(2) { font-weight: 600; }
.nbt-ap-etape-bloquee .nbt-ap-puce { border-color: #B42318; }
.dark .nbt-ap-ligne, .dark .nbt-ap-contrat { border-color: rgb(255 255 255 / .1); }
@media (max-width: 640px) { .nbt-ap-kv { grid-template-columns: 1fr 1fr; } }
/* La référence reste sur une ligne ; c'est sa description (état · date · agent) qui passe à la ligne. */
.nbt-fiche-contact .fi-ta-text.fi-wrapped:has(> .fi-ta-text-description) .fi-ta-text-item { white-space: nowrap; }
.nbt-fiche-contact .fi-ta-text.fi-wrapped .fi-badge { white-space: normal; }
/* Les tableaux de la maquette, plus serrés que Filament (24 px par case) : « Services & dossiers » tient avec ses 👁 →. */
.nbt-fiche-contact .fi-ta-text:not(.fi-inline) { padding-inline: 6px; }
.nbt-fiche-contact .fi-ta-header-cell { padding-inline: 6px; }
.nbt-fiche-contact .fi-ta-header-cell:first-of-type { padding-inline-start: 14px; }
.nbt-fiche-contact .fi-ta-header-cell:last-of-type { padding-inline-end: 14px; }
.nbt-fiche-contact .fi-ta-cell:first-child { padding-inline-start: 8px; }
.nbt-fiche-contact .fi-ta-cell:last-child { padding-inline-end: 8px; }

/* Le « ? » juste après le titre d'une carte (`.q` de la maquette) ; le texte est en info-bulle. */
.nbt-q { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-inline-start: 6px; border-radius: 50%; border: 1px solid #C9C6D0; color: #6B6875; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; cursor: help; }

/* Activité : un rendez-vous saisi après coup, la ligne rouge de la maquette (`.it.red-it`). */
.nbt-act-it.nbt-act-it-rouge { background: #FFF5F5; border-radius: 10px; padding: 10px 8px; border-bottom: 0; margin-bottom: 4px; }
.nbt-act-it-rouge b { color: #B42318; }
.nbt-act-it-rouge .nbt-act-ic { background: #FEE4E2; }

/* Téléphone (vue 📱 de la maquette) : les gestes de l'en-tête sur une ligne qui défile, l'émoji seul, l'info-bulle dit le reste. */
@media (max-width: 767px) {
    .nbt-fiche-contact .fi-header .fi-ac { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 6px; max-width: 100%; }
    .nbt-fiche-contact .fi-header .fi-ac > * { flex-shrink: 0; }
    .nbt-fiche-contact .fi-header .nbt-lbl { display: none; }
    .nbt-fiche-contact .fi-header-actions-ctn { width: 100%; }
}

/*
 * La carte « Rendez-vous de consultation » (voie B) dans la colonne principale : le filet sous tout
 * l'en-tête (`nbt-rdv-h`, sans règle jusqu'ici — AucuneClasseFantomeTest), pas sous le seul titre,
 * et l'écart de 16 px entre cartes que la colonne donne déjà.
 */
.nbt-rdv-h { border-bottom: 1px solid #E7E5EA; }
.nbt-rdv-card .nbt-rdv-h h3 { padding: 0; border-bottom: 0; }
.nbt-fiche-contact .nbt-rdv-card { margin-bottom: 0; }

/*
 * Téléphone : la ligne de la maquette sous la case principale (`nbt-ph-only`), les colonnes
 * secondaires cachées — visibleFrom('md') dans les tableaux Filament, `nbt-md-only` dans la carte
 * des rendez-vous. Le seuil est celui de Filament (md = 768 px).
 */
.nbt-ph-only { display: none; }
@media (max-width: 767px) {
    .nbt-ph-only { display: block; margin-top: 2px; color: #6B6875; font-size: 12.5px; }
    .nbt-md-only { display: none; }
}