/*! Task’in — © 2026 Fandry Ekwalla. Tous droits réservés. Copie, modification et diffusion interdites sans autorisation écrite (voir LICENSE). */
/* ===== Espace Superviseur (et Formateur) : onglets, indicateurs, cartes, états vides ===== */

/* Onglets métier : icônes SVG et soulignement, comme l'espace Agent */
#role-tabs.role-tabs{gap:2px;border-bottom:1px solid var(--border)}
#role-tabs .role-tab{gap:8px;padding:11px 14px;border:0;border-radius:9px 9px 0 0;background:transparent;color:var(--text2);font-weight:650;box-shadow:none}
#role-tabs .role-tab:hover{background:var(--surface2);color:var(--text)}
#role-tabs .role-tab.active{background:transparent;color:var(--ocean-ink);box-shadow:inset 0 -2px 0 var(--ocean)}
#role-tabs .role-tab:focus-visible{outline:2px solid var(--ocean);outline-offset:-2px}
.role-tab-icon{width:16px;height:16px;flex:none;opacity:.75;transition:opacity .16s ease}
#role-tabs .role-tab.active .role-tab-icon,#role-tabs .role-tab:hover .role-tab-icon{opacity:1}

/* Indicateurs de la vue d'ensemble */
.sv-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.sv-kpi{position:relative;display:flex;align-items:center;gap:13px;min-width:0;padding:15px 16px;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--ui-shadow-sm,0 4px 14px rgba(15,35,65,.06));animation:sv-rise .4s cubic-bezier(.22,1,.36,1) both}
.sv-kpi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--c),transparent)}
.sv-kpi:nth-child(2){animation-delay:.04s}.sv-kpi:nth-child(3){animation-delay:.08s}.sv-kpi:nth-child(4){animation-delay:.12s}
.sv-kpi-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--c) 14%,var(--surface));color:var(--c)}
.sv-kpi-icon .sv-icon{width:20px;height:20px}
.sv-kpi-copy{min-width:0}
.sv-kpi-copy span{display:block;color:var(--text2);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.sv-kpi-copy strong{display:block;margin-top:3px;color:var(--text);font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.sv-kpi-copy strong em{color:var(--text3);font-size:15px;font-style:normal;font-weight:700}
.sv-kpi-copy small{display:block;margin-top:3px;overflow:hidden;color:var(--text3);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.sv-kpi-alert{color:var(--red-ink);font-style:normal;font-weight:700}
@keyframes sv-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Titres de cartes avec icône colorée */
.sv-card-title-icon{display:flex;align-items:center;gap:9px}
.sv-title-icon{display:block;flex:none;width:30px;height:30px;padding:7px;border-radius:9px;background:color-mix(in srgb,var(--c,var(--ocean)) 13%,var(--surface));color:var(--c,var(--ocean));box-sizing:border-box}
.btn .btn-icon{width:15px;height:15px;margin-right:6px;vertical-align:-2px}

/* États vides dessinés (plus d'emojis) */
.sv-empty-state{display:grid;justify-items:center;gap:6px;padding:22px 14px;text-align:center}
.sv-empty-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--c) 12%,var(--surface));color:var(--c)}
.sv-empty-icon .sv-icon{width:21px;height:21px}
.sv-empty-state strong{color:var(--text);font-size:13.5px;font-weight:700}
.sv-empty-state p{max-width:340px;margin:0;color:var(--text2);font-size:12.5px;line-height:1.5}
#sv-escalations-list .sv-empty-state,#sv-reviews-list .sv-empty-state,#sv-coaching-list .sv-empty-state{margin-top:8px;padding:40px 16px;border:1px dashed var(--border2);border-radius:14px;background:var(--surface)}

/* Cockpit « Équipe live » et canaux : couleurs des canaux, badge en ligne */
.admin-workflow-sources>div[style*="--c"] span i{background:var(--c)}
.admin-workflow-sources>div[style*="--c"] em{background:var(--c);opacity:.85}
.admin-workflow-live-row i.live{padding:3px 7px;border-radius:99px;background:color-mix(in srgb,var(--green) 16%,var(--surface));color:var(--green-ink)}
.admin-workflow-live-row:has(i.live){border-color:color-mix(in srgb,var(--green) 35%,var(--border))}

/* Indicateurs du cockpit : une colonne ne s'élargit jamais à cause d'un texte long */
.admin-workflow-kpis>div{min-width:0}
@media(max-width:680px){.admin-workflow-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Mobile : grilles en ligne empilées */
@media(max-width:900px){.sv-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  #sv-view-overview>div[style*="grid-template-columns:1fr 1fr"],#sv-rep-kpis{grid-template-columns:1fr!important}
  #role-tabs .role-tab{padding:10px 12px}
}
@media(max-width:480px){.sv-kpi-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sv-kpi{animation:none}}
.sv-kpi-prev{margin-left:7px;color:var(--text3);font-size:12px!important;font-style:normal;font-weight:600!important;text-decoration:line-through}
#sv-rep-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

/* Onglets superviseur regroupés par familles (En direct, Performance, Qualité & coaching, Tickets & appels, Ressources) */
#role-tabs.role-tabs-grouped{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0;overflow:visible;white-space:normal;padding-top:2px}
#role-tabs.role-tabs-grouped .rt-group{display:flex;flex-direction:column;gap:2px;padding:0 6px;border-left:1px solid var(--border);margin-top:6px}
#role-tabs.role-tabs-grouped .rt-group:first-child{border-left:0;padding-left:0}
#role-tabs.role-tabs-grouped .rt-group-label{padding:0 10px;color:var(--text3);font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
#role-tabs.role-tabs-grouped .rt-group.active .rt-group-label{color:var(--ocean-ink)}
#role-tabs.role-tabs-grouped .rt-group-tabs{display:flex;flex-wrap:nowrap;gap:1px}
#role-tabs.role-tabs-grouped .role-tab{padding:9px 11px;font-size:12.5px}
@media (max-width:1100px){#role-tabs.role-tabs-grouped .rt-group-tabs{flex-wrap:wrap}}
@media (max-width:760px){#role-tabs.role-tabs-grouped{overflow-x:auto;flex-wrap:nowrap}#role-tabs.role-tabs-grouped .rt-group-label{padding:0 6px}}
#role-tabs.role-tabs-grouped .role-tab{padding:8px 8px;gap:6px;font-size:12.5px}
#role-tabs.role-tabs-grouped .role-tab-icon{width:15px;height:15px}
#role-tabs.role-tabs-grouped .rt-group{padding:0 4px}
#role-tabs.role-tabs-grouped .rt-group-label{padding:0 8px}
/* Activité en direct / KPI : deux sections sans doublon. */
.awf-sections{display:inline-flex;gap:2px;margin-top:12px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--surface2)}
.awf-sections button{padding:6px 14px;border:0;border-radius:8px;background:transparent;color:var(--text2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.awf-sections button.active{background:var(--surface);color:var(--ocean-ink);box-shadow:0 1px 3px rgba(15,23,42,.12)}
body.admin-shell-active .awf-sections button{border-radius:6px!important}
.awf-live-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:16px 24px 0;padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:13px;color:var(--text2)}
.awf-live-strip strong{color:var(--text);font-size:16px;margin-right:2px}
.awf-live-strip small{margin-left:auto;color:var(--text3)}
.awf-dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--border2);vertical-align:middle}
.awf-dot.live{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 20%,transparent)}
.awf-dot.seen{background:var(--amber,#D97706)}
.awf-live-rest{margin-top:12px}
.awf-live-rest .admin-workflow-live-grid{margin-top:10px}
.awf-pole-avg{margin:16px 24px 0}
.awf-pole-avg td b{color:var(--text)}
.awf-note{margin:10px 2px 0;color:var(--text3);font-size:12px}
@media(max-width:700px){.awf-live-strip,.awf-pole-avg{margin-left:12px;margin-right:12px}.awf-live-strip small{margin-left:0}}
.awf-live-rest>.sv-acc-head{padding:10px 14px;font-size:13px;font-weight:600;color:var(--text2)}
.awf-live-rest>.sv-acc-head .sv-acc-meta{display:inline-flex;align-items:center;gap:10px}
.awf-live-rest .sv-acc-chevron{display:inline-block;width:9px;height:9px;padding:0;border-radius:0;background:none;border-right:2px solid var(--text2);border-bottom:2px solid var(--text2)}