/* Les compétences de BC Clients : l'écran (#/bc-competences), sa table, la carte des réglages, et le
   « pourquoi » de l'attribution dans le bloc de Mia Indexer. Les jetons sont ceux de Vision
   (assets/style.css). */

/* La barre : « tout afficher » garde sa place même caché (aucune rangée ne naît ni ne disparaît) ; un
   filtre qui ne garderait personne est éteint. */
.scl-cp-barre .scl-cp-raz[disabled] { visibility:hidden; }
.scl-cp-barre .rg-filtre[disabled] { opacity:.45; cursor:default; border-color:var(--line-soft); }
.scl-cp-barre .rg-filtre[disabled]:hover { border-color:var(--line-soft); }

/* La ligne d'état, entre la barre de filtres et la table : toujours là, de la même forme (le texte,
   puis « Voir la boîte »), et d'une hauteur gardée, pour que la table ne saute pas quand elle change. */
.scl-cp-etat { min-height:38px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12.5px; color:var(--muted);
  padding:6px 12px; margin:0 0 10px; border:1px solid var(--line-soft); border-radius:10px; background:var(--surface); box-sizing:border-box; }
.scl-cp-etat.ok { background:var(--lo-w); border-color:#A8DCD3; color:var(--lo); }
.scl-cp-etat.non { background:var(--hi-w); border-color:#F2C2C2; color:var(--hi); }
.scl-cp-etat .rg-lien { margin-left:auto; }

/* Aucun conseiller ne répond aux filtres : la phrase a sa marge dans le cadre. */
.scl-cp-tab > .vide { margin:0; padding:14px 16px; }

/* La table : elle tient dans la page à l'écran large, et défile dans son cadre au téléphone, le nom
   du conseiller restant en vue. */
.scl-cp-tab { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.scl-cp-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.scl-cp-table th, .scl-cp-table td { padding:7px 10px; border-bottom:1px solid var(--line-soft); text-align:left; white-space:nowrap; vertical-align:middle; }
.scl-cp-table thead th { font-size:11.5px; font-weight:600; color:var(--muted); background:var(--surface); }
.scl-cp-table th.scl-u { text-align:center; color:var(--ink-soft); border-left:1px solid var(--line); border-bottom:1px solid var(--line-soft); }
.scl-cp-table th.scl-f { font-weight:500; }
.scl-cp-table tbody tr:last-child td { border-bottom:0; }
.scl-cp-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.scl-cp-table .scl-nom { position:sticky; left:0; z-index:1; background:var(--surface); font-weight:600; color:var(--ink); }
.scl-cp-table thead .scl-nom { z-index:2; color:var(--muted); font-weight:600; }

/* Quand l'équipe bouge : retirer un conseiller (sur sa ligne), en ajouter un (sous le tableau). */
.scl-retirer { margin-left:6px; border:0; background:none; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; padding:0 3px; border-radius:6px; }
.scl-retirer:hover, .scl-retirer:focus-visible { color:var(--hi); background:var(--hi-w); }
.scl-cp-ajout { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:10px 0 0; font-size:12.5px; color:var(--ink-soft); }
.scl-cp-ajout input { font:inherit; font-size:13px; border:1px solid var(--line); border-radius:8px; padding:5px 8px; background:var(--surface); color:var(--ink); width:220px; max-width:100%; }

/* Une case : un choix, coloré par son niveau ; en lecture, une étiquette. */
.scl-sel { font:inherit; font-size:12.5px; border:1px solid var(--line); border-radius:8px; padding:3px 6px; background:var(--surface); color:var(--ink); cursor:pointer; min-width:88px; }
.scl-sel:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
.scl-sel.junior, .scl-niv.junior { background:var(--primary-weak); border-color:#C9D5F2; color:var(--primary); }
.scl-sel.senior, .scl-niv.senior { background:var(--ia-w); border-color:#D9CCF2; color:var(--ia); }
.scl-sel.sans { color:var(--muted); }
.scl-sel.scl-act.telephone, .scl-sel.scl-act.guichet, .scl-sel.scl-act.absent,
.scl-act.telephone, .scl-act.guichet, .scl-act.absent { background:var(--md-w); color:var(--md); border-color:#F3D3A6; }
.scl-niv, span.scl-act { display:inline-block; font-size:12px; font-weight:600; border-radius:999px; padding:1px 9px; border:1px solid transparent; }
.scl-niv.sans { color:var(--muted); font-weight:400; }

/* La carte sur l'écran des réglages. */
.scl-cp-carte { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.scl-cp-carte .rg-vus { align-self:stretch; margin:0; }
.scl-cp-resume { margin:0; font-size:13px; }

/* Le pourquoi, dans le bloc de Mia Indexer (onglet de la complexité). */
.scl-pourquoi { margin:6px 0; font-size:12.5px; color:var(--ink-soft); }
.scl-ecartes { margin:0 0 8px; font-size:12.5px; }
.scl-ecartes > summary { cursor:pointer; color:var(--primary); }
.scl-ecartes ul { margin:6px 0 0; padding-left:18px; color:var(--ink-soft); }

/* La hauteur gardée de la ligne d'état suit la largeur : une ligne sur un écran large, deux sur une
   tablette, cinq au téléphone (quatre de texte, puis « Annuler » et « Voir la boîte »), la plus haute
   qu'un geste y écrive : la table ne descend pas après un changement. */
@media (max-width:1100px){ .scl-cp-etat { min-height:58px; } }
@media (max-width:640px){
  .scl-cp-etat { min-height:116px; align-content:flex-start; }
  .scl-cp-etat.lecture { min-height:0; }
  .scl-cp-etat .rg-lien { margin-left:0; }
  .scl-cp-table th, .scl-cp-table td { padding:6px 8px; }
  .scl-sel { min-width:0; }
}