/* Console de suivi des cabinets : la marque AgentFlow, et les quelques formes
   que le kit n'a pas. Tout le reste vient de /kit/theme.css et /kit/console.css. */
:root {
  --grad-from: #c2410c;
  --grad-to: #e05207;
  --royal: #e05207;
}

/* --- tableau des cabinets ------------------------------------------------ */
.cab-nom { font-weight: 640; color: var(--ink); }
.cell-2l small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; font-weight: 400; }
.tend { font-size: 12px; margin-left: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tend[data-s="haut"] { color: var(--ok-tx); }
.tend[data-s="bas"] { color: var(--err-tx); }
.afaire { color: var(--ink-2); font-size: 13px; max-width: 320px; }
.ratio b { font-weight: 640; }
.ratio span { color: var(--ink-3); }
.mini { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.mini i { display: block; width: 4px; min-height: 2px; background: var(--af-barre, #b9b3ac); border-radius: 1px; }
.mini i.z { background: var(--line, #e8e4de); }

/* --- fiche d'un cabinet -------------------------------------------------- */
.modal.large { width: min(1120px, calc(100vw - 32px)); max-width: none; }
/* minmax(0, 1fr) : sans lui la colonne prend la largeur du tableau des collaborateurs,
   et au téléphone toute la fiche déborde de la fenêtre (vu à 390 le 12/10). */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 4px 2px; }
.fiche > * { min-width: 0; }
.signaux { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.signaux li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px;
  border: 1px solid var(--line, #e8e4de); border-radius: 10px; background: var(--surface, #fff); }
.signaux li .quoi { font-weight: 600; color: var(--ink); }
.signaux li .geste { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.reglages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.reglages label { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.reglages .fld { width: 100%; }
.reglages .lu { font-size: 14px; color: var(--ink); padding-top: 7px; }
.series { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pill[aria-pressed="true"] .c { color: #fff; }      /* le décompte de la pilule choisie se lisait orange sur orange */
.serie { border: 1px solid var(--line, #e8e4de); border-radius: 12px; padding: 12px 14px; background: var(--surface, #fff); }
.serie .t { font-size: 12px; color: var(--ink-3); }
.serie .v { font-size: 22px; font-weight: 660; letter-spacing: -.02em; color: var(--ink); margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.serie .v small { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.serie .courbe { display: flex; align-items: flex-end; gap: 2px; height: 46px; }
.serie .courbe i { flex: 1; min-height: 2px; background: var(--af-barre, #b9b3ac); border-radius: 1px; }
.serie .courbe i.z { background: var(--line, #e8e4de); }
.serie .courbe i:last-child:not(.z) { background: var(--ink); }
.serie .nm { color: var(--ink-3); font-size: 12.5px; padding: 14px 0; }
.sect { font-size: 13px; font-weight: 640; color: var(--ink); margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
.sect small { font-weight: 400; color: var(--ink-3); }
.journal { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.journal li { font-size: 13px; color: var(--ink-2); padding: 7px 0; border-bottom: 1px solid var(--line, #e8e4de); }
.journal li b { color: var(--ink); font-weight: 600; }
.journal li time { color: var(--ink-3); margin-right: 8px; }
.noter { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; margin-top: 10px; }
.rappel-txt { width: 100%; min-height: 300px; font: inherit; font-size: 13.5px; line-height: 1.5; padding: 12px; border: 1px solid var(--line, #e8e4de);
  border-radius: 10px; background: var(--surface-2, #faf8f5); color: var(--ink); resize: vertical; }
.dest { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.choix-cab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; max-height: 190px; overflow: auto; padding: 4px 2px; }
.choix-cab label { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink); }
.champ { display: grid; gap: 5px; margin-bottom: 12px; }
.champ label { font-size: 12px; color: var(--ink-3); }
.champ .fld, .champ textarea.fld { width: 100%; }
textarea.fld { min-height: 84px; resize: vertical; font: inherit; }
.qui { color: var(--ink-3); font-size: 13px; }

@media (max-width: 860px) {
  .reglages, .series { grid-template-columns: 1fr 1fr; }
  .noter { grid-template-columns: 1fr; }
  .afaire { max-width: none; }
}
/* Dans la fiche, c'est la fenêtre qui défile : un tableau de 52 collaborateurs qui défile
   à l'intérieur d'une fenêtre qui défile, c'est deux ascenseurs pour une seule liste. */
.fiche .tscroll { max-height: none; }
#t-cabinets td.cell-2l.hide-tel small { white-space: nowrap; }
.cell-2l small.tel { display: none; }
@media (max-width: 560px) {
  /* Au téléphone, le tableau tient en trois colonnes : le cabinet, son état, le geste.
     Celui qui décide et le nombre d'actifs descendent sous le nom du cabinet. */
  .reglages, .choix-cab { grid-template-columns: 1fr; }
  .hide-tel { display: none; }
  .tscroll { max-height: none; }       /* au téléphone la page défile, pas la carte : sept cabinets annoncés, sept visibles */
  .cell-2l small.tel { display: block; }
  #t-cabinets td, #t-cabinets th, #t-demandes td, #t-demandes th, #t-collab td, #t-collab th { padding-left: 10px; padding-right: 10px; }
  .afaire { font-size: 12.5px; }
  .sect { flex-wrap: wrap; }
  .serie { padding: 10px 11px; }
  .serie .v small { display: block; margin: 2px 0 0; }
  #ovl-fiche .modal-f [data-close] { display: none; }      /* la croix du haut ferme déjà : deux boutons tiennent sur une ligne */
}