/* ==========================================================================
   Neutrino Interventions — tuiles unifiées (design v2, étape 6)
   Une seule famille de tuiles pour tout le back-office : tableau de bord, Opportunités,
   Facturation, fiches (client, fournisseur, technicien, ticket), Logistique, Rapports, Paramètres.
   Chargée APRÈS styles.css. Toutes les valeurs viennent de tokens.css.

   Deux sortes de tuiles :
   A. Tuile de contenu : une carte avec un en-tête (titre + actions) et un corps.
      Classe canonique .tuile. Classes historiques reprises : .fic-card, .opp-card, .rap-carte,
      .fact-groupe-client, .param-groupe, .fiche-section (dense), .logi-card (dense), .login-card (large).
   B. Tuile chiffre : un libellé, une valeur, un détail.
      Classe canonique .tuile-chiffre. Classes historiques reprises : .kpi (Dispatch, Opportunités,
      Facturation), .stat-card (Opportunités), .rap-obj-tuile (Rapports, imbriquée).

   Règles communes : fond surface, filet bordure 1px, rayon radius-lg, ombre-1. L'accent de
   couleur passe UNIQUEMENT par une pastille (8px, ou numérotée pour les sections de fiche) :
   plus de bordure gauche colorée, plus de filet haut coloré, plus de fond coloré à l'état actif.
   ========================================================================== */

/* --- Couleur d'accent ---------------------------------------------------- */
.tuile, .tuile-chiffre,
.kpi, .stat-card, .fic-card, .opp-card, .rap-carte, .logi-card, .fiche-section {
  --tuile-accent: var(--texte-att);
}
.tuile-bleu, .kpi-bleu, .opp-card:has(.opp-ribbon-bleu), .stat-card:has(.stat-icone-bleu) { --tuile-accent: var(--action); }
.tuile-orange, .kpi-orange { --tuile-accent: var(--attention); }
.tuile-rouge, .kpi-rouge { --tuile-accent: var(--danger); }
.tuile-vert, .kpi-vert, .opp-card:has(.opp-ribbon-vert), .stat-card:has(.stat-icone-vert) { --tuile-accent: var(--succes); }
.tuile-mauve, .kpi-mauve, .opp-card:has(.opp-ribbon-mauve) { --tuile-accent: var(--mauve); }

/* --- Grilles de tuiles --------------------------------------------------- */
.tuiles, .kpis, .opp-kpis, .stats-row, .rap-obj-hero {
  display: grid;
  /* auto-fit : une rangée de tuiles occupe toujours toute la largeur */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}
.opp-kpis, .stats-row { margin: 0 0 var(--space-4); }
.rap-obj-hero { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.tuiles-contenu, .opp-grid, .rap-grille { gap: var(--space-4); }

/* --- A. Tuile de contenu ------------------------------------------------- */
.tuile,
.fic-card, .opp-card, .rap-carte, .fact-groupe-client, .param-groupe,
.fiche-section, .logi-card, .login-card {
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-1);
  padding: var(--space-4);
  min-width: 0;
}
/* Densités */
.tuile-dense, .fiche-section, .logi-card { padding: var(--space-3); }
.tuile-large, .login-card { padding: var(--space-8); }
/* Variantes */
.tuile-discrete, .fic-card-muted { background: var(--surface-2); box-shadow: none; }
.fact-groupe-client { padding: 0; overflow: hidden; }
.rap-carte, .fact-groupe-client { margin-bottom: var(--space-4); }
.rap-grille .rap-carte { margin-bottom: 0; }
.param-groupe { margin: var(--space-4) 0 0; }
.param-groupe legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--space-3); }

/* En-tête : titre à gauche, compteur / badge / actions à droite */
.tuile-entete,
.opp-card-head, .rap-carte-entete, .rap-obj-entete, .fiche-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  margin: 0 0 var(--space-3);
}
.fiche-section-head {
  /* annule l'ancien en-tête « filet haut coloré » */
  border-top: 0;
  border-radius: 0;
  padding: 0;
}
.fact-groupe-entete {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--bordure);
}
.fact-groupe-client:not([open]) > .fact-groupe-entete { border-bottom: 0; }

/* Titre */
.tuile-titre,
.fic-card-title, .rap-carte h3, .rap-obj-entete h3, .fiche-section-head h2, .fact-groupe-nom,
.param-groupe legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte);
}
.tuile-dense .tuile-titre, .fiche-section-head h2 { font-size: 14px; line-height: 20px; flex: 1; }
.fic-card-title { margin-bottom: var(--space-3); }
/* Les titres de section ne sont plus colorés : la couleur passe par la pastille numérotée. */
.fiche-section[data-color] .fiche-section-head h2 { color: var(--texte); }

/* Pastille d'accent devant le titre (tuile avec une classe de couleur) */
.tuile[class*="tuile-bleu"] .tuile-titre::before, .tuile[class*="tuile-orange"] .tuile-titre::before,
.tuile[class*="tuile-rouge"] .tuile-titre::before, .tuile[class*="tuile-vert"] .tuile-titre::before,
.tuile[class*="tuile-mauve"] .tuile-titre::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--tuile-accent);
}

/* Ancien « ruban » des cartes Opportunités : devient le titre de la tuile avec sa pastille */
.opp-ribbon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte);
}
.opp-ribbon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--tuile-accent);
}
.opp-ribbon-bleu, .opp-ribbon-mauve, .opp-ribbon-vert { background: none; color: var(--texte); }

/* Pastille numérotée des sections de fiche (seul porteur de la couleur de section) */
.fiche-section-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--surface);
}

/* Sous-titre et éléments à droite de l'en-tête */
.tuile-sous-titre, .rap-carte > .muted, .rap-objectifs > .muted {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: 13px;
  line-height: 18px;
  color: var(--texte-att);
}
.tuile-entete > :last-child:not(:first-child),
.opp-card-head > .muted, .fic-readonly-badge, .fiche-colis-toggle-add { margin-left: auto; }
.fic-readonly-badge { background: var(--neutre-doux); }

/* Tuile cliquable */
a.tuile, button.tuile, .tuile-cliquable { cursor: pointer; text-align: left; font: inherit; }
a.tuile:hover, button.tuile:hover, .tuile-cliquable:hover { box-shadow: var(--ombre-2); }

/* Champs à l'intérieur des tuiles : même rendu que .field partout (fiches, Paramètres) */
.fic-card-grid input, .fic-card-grid select, .fic-card-grid textarea,
.fic-card-block input, .fic-card-block select, .fic-card-block textarea,
.param-champ input {
  min-height: var(--hauteur-controle);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--bordure-controle);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 400;
}
.fic-card-grid input[type="checkbox"], .fic-card-grid input[type="radio"],
.fic-card-block input[type="checkbox"], .fic-card-block input[type="radio"] { min-height: 0; accent-color: var(--action); }
.fic-card-grid input:disabled, .fic-card-grid select:disabled, .fic-card-grid textarea:disabled {
  background: var(--surface-2);
  color: var(--texte-desactive);
  border-color: var(--bordure);
}

/* --- B. Tuile chiffre ---------------------------------------------------- */
.tuile-chiffre, .kpi, .stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-lg);
  box-shadow: var(--ombre-1);
  font: inherit;
}
/* annule les anciennes bordures gauches colorées (.kpi-bleu, .kpi-orange…) */
.kpi, .kpis .kpi, .opp-kpis .kpi { border-left: 1px solid var(--bordure); }

/* Libellé (avec pastille d'accent) */
.tuile-chiffre-libelle, .kpi-label, .opp-kpis .kpi > span, .stat-label, .rap-obj-lib {
  order: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--texte-att);
}
.tuile-chiffre-libelle::before, .kpi-label::before, .opp-kpis .kpi > span::before, .stat-label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--tuile-accent);
}
/* Valeur */
.tuile-chiffre-valeur, .kpi-valeur, .opp-kpis .kpi > strong, .stat-valeur, .rap-obj-tuile strong {
  order: 1;
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--texte);
}
/* Détail */
.tuile-chiffre-detail, .stat-detail, .rap-obj-sous {
  order: 2;
  font-size: 12px;
  line-height: 16px;
  color: var(--texte-att);
}
.stat-detail:empty { display: none; }

/* stat-card : même disposition qu'un KPI. L'icône carrée est remplacée par la pastille du libellé. */
.stat-card { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.stat-texte { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.stat-icone { display: none; }
.stat-chevron { flex: none; align-self: center; color: var(--texte-att); }

/* Tuile chiffre imbriquée dans une tuile de contenu (Rapports > Objectifs) */
.tuile-chiffre-imbriquee, .rap-obj-tuile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  border-radius: var(--radius-md);
  box-shadow: none;
  min-width: 0;
}

/* Cliquable / actif : un seul comportement partout */
button.kpi, .kpi[data-onglet], .opp-kpis .kpi, .stat-card-cliquable, .tuile-chiffre[role="button"],
button.tuile-chiffre { cursor: pointer; }
button.kpi:hover, .kpi[data-onglet]:hover, .opp-kpis .kpi:hover, .stat-card-cliquable:hover,
button.tuile-chiffre:hover {
  box-shadow: var(--ombre-2);
  border-color: var(--bordure);
}
.stat-card-cliquable:hover .stat-chevron { color: var(--action-texte); }
.kpi.active, .kpis .kpi.active, .opp-kpis .kpi.active,
.opp-kpis .kpi-bleu.active, .opp-kpis .kpi-orange.active, .opp-kpis .kpi-mauve.active, .opp-kpis .kpi-vert.active,
.tuile-chiffre.active, .stat-card.active {
  background: var(--surface);
  color: var(--texte);
  border-color: var(--action);
  box-shadow: inset 0 0 0 1px var(--action);
}
.opp-kpis .kpi.active strong { color: var(--texte); }
.opp-kpis .kpi.active span { color: var(--texte-att); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 760px) {
  .kpis, .opp-kpis, .stats-row, .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .rap-obj-hero { grid-template-columns: minmax(0, 1fr); }
  .tuile-chiffre, .kpi, .stat-card { padding: var(--space-3) var(--space-4); }
  .tuile-chiffre-valeur, .kpi-valeur, .opp-kpis .kpi > strong, .stat-valeur { font-size: 22px; line-height: 28px; }
  .tuile, .fic-card, .opp-card, .rap-carte, .param-groupe { padding: var(--space-3); }
  .tuile-large, .login-card { padding: var(--space-6); }
}