/* public/dashboard/styles/shell.css — Lot A, tâche 6. Chrome de la coquille tenant : grille `barre latérale | zone principale`, barre haute collante, sortie de page défilante, barre d'appel en bas. Ce fichier ne définit AUCUNE couleur littérale : toutes viennent des jetons de public/shared/ui/tokens.css (--bg, --panel, --panel-2, --border, --text, --muted, --brand, --ok/--warn/--bad/--info…), pour que le thème clair/sombre bascule d'un seul attribut sur . Il reste chargé par public/admin-dashboard.html : depuis la tâche 7, la console plateforme est montée sur cette MÊME coquille (sidebar/topbar partagées, #admin-shell-root ci-dessous) — .shell-header/.shell-nav (la barre horizontale ad hoc de l'ancien shell admin) ont disparu avec elle, .shell-nav-link reste seul, commun aux deux racines. */ /* ---------- Grille de la coquille ---------- */ #tenant-shell-root, #admin-shell-root { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; } /* Les hôtes créés par app.js ne sont pas des cellules : la barre latérale et la zone principale le sont. Sans cela, replier la barre ne changerait pas la largeur de sa colonne. */ .shell-sidebar-host, .shell-topbar-host { display: contents; } .shell-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } /* ---------- Barre latérale ---------- */ .shell-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; width: 232px; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-3); background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; } .shell-sidebar-brand-name { font-size: var(--font-4); font-weight: 600; letter-spacing: -.02em; color: var(--text); white-space: nowrap; overflow: hidden; } .shell-sidebar-nav { display: flex; flex-direction: column; gap: var(--space-5); flex: 1; } .shell-sidebar-group { display: flex; flex-direction: column; gap: var(--space-1); } .shell-sidebar-group h2 { margin: 0 0 var(--space-1) var(--space-2); font-size: var(--font-1); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .shell-sidebar-collapse { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--font-1); cursor: pointer; } .shell-sidebar-collapse:hover { color: var(--text); background: var(--panel-2); } /* Repliée : un rail étroit. Les libellés sont tronqués plutôt que supprimés (chaque lien porte son libellé complet en `title`), pour que la barre reste navigable au clavier et au lecteur d'écran. */ .shell-sidebar-collapsed { width: 84px; } .shell-sidebar-collapsed .shell-sidebar-group h2 { display: none; } .shell-sidebar-collapsed .shell-nav-link { padding-inline: var(--space-2); } /* ---------- Liens de navigation (partagés avec la console plateforme) ---------- */ .shell-nav-link { display: block; color: var(--muted); text-decoration: none; font-size: var(--font-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shell-nav-link:hover { color: var(--text); background: var(--panel-2); } .shell-nav-link.active { color: var(--on-brand); background: var(--brand); } /* .shell-header-meta reste consommée par .shell-account-menu (barre haute partagée, ci-dessous) : seul le conteneur horizontal .shell-header et sa barre .shell-nav (l'ancien chrome ad hoc de la console plateforme, retirés à la tâche 7) ont disparu. */ .shell-header-meta { font-size: var(--font-1); color: var(--muted); } /* ---------- Barre haute ---------- */ .shell-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--panel); border-bottom: 1px solid var(--border); } .shell-topbar-title { margin: 0; font-size: var(--font-4); font-weight: 600; letter-spacing: -.02em; color: var(--text); white-space: nowrap; } .shell-topbar-right { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; } .shell-menu-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--font-1); cursor: pointer; } .shell-search-box { flex: 0 1 320px; text-align: left; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-size: var(--font-2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-search-box:hover { color: var(--text); border-color: var(--brand); } /* Lot A, tâche 17 — état du poste : une pastille et trois mots. La couleur double l'information, elle ne la porte JAMAIS seule (le texte est lisible sans la voir). */ .shell-poste { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-1); color: var(--muted); white-space: nowrap; } .shell-poste::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; } .shell-poste[data-status="ready"] { color: var(--text); } .shell-poste[data-status="ready"]::before { background: var(--ok); } .shell-poste[data-status="unavailable"]::before { background: var(--warn); } .shell-poste[data-status="not_provisioned"]::before { background: var(--warn); } .shell-poste[data-status="media_denied"] { color: var(--text); } .shell-poste[data-status="media_denied"]::before { background: var(--bad); } .shell-poste[data-status="offline"]::before { background: var(--border); } .shell-presence { display: flex; align-items: center; gap: var(--space-2); } .shell-presence-current { display: inline-flex; align-items: center; } .shell-presence-actions { display: flex; gap: var(--space-1); } .shell-presence-actions button { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: var(--font-1); cursor: pointer; } .shell-presence-actions button:hover:not(:disabled) { color: var(--text); background: var(--panel-2); } .shell-presence-actions button:disabled { opacity: .5; cursor: not-allowed; } .shell-presence-note { font-size: var(--font-1); color: var(--muted); } .shell-bell { position: relative; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: var(--font-2); cursor: pointer; } .shell-bell-count { margin-left: var(--space-1); display: inline-block; min-width: 16px; padding: 0 var(--space-1); border-radius: 999px; background: var(--bad); color: var(--on-brand); font-size: var(--font-1); font-variant-numeric: tabular-nums; } .shell-bell-wrap { position: relative; } .shell-bell-panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 40; width: 340px; max-width: calc(100vw - 2 * var(--space-4)); max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .shell-bell-panel-title { padding: var(--space-2); border-bottom: 1px solid var(--border); font-size: var(--font-1); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .shell-bell-empty { padding: var(--space-3) var(--space-2); color: var(--muted); font-size: var(--font-2); } .shell-bell-item { display: flex; gap: var(--space-2); align-items: baseline; padding: var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-2); color: var(--text); border-left: 3px solid var(--border); } .shell-bell-item time { flex: 0 0 auto; color: var(--muted); font-size: var(--font-1); font-variant-numeric: tabular-nums; } .shell-bell-item-message { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .shell-bell-item-success, .shell-bell-item-200 { border-left-color: var(--ok); } .shell-bell-item-error, .shell-bell-item-400, .shell-bell-item-401, .shell-bell-item-403, .shell-bell-item-404, .shell-bell-item-429, .shell-bell-item-500 { border-left-color: var(--bad); } .shell-account { position: relative; } .shell-account-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--font-1); cursor: pointer; } .shell-account-menu { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 40; min-width: 240px; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .shell-account-menu .shell-header-meta { padding: var(--space-2); border-bottom: 1px solid var(--border); } .shell-account-item { text-align: left; background: transparent; border: 0; color: var(--text); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--font-2); cursor: pointer; } .shell-account-item:hover { background: var(--panel-2); } /* « Quitter l'espace client » dit qu'on regarde les données de quelqu'un d'autre : il ne doit pas se fondre dans le chrome. */ .shell-exit-impersonation-btn { color: var(--warn); } /* ---------- Sortie de page et barre d'appel ---------- */ #shell-page-outlet { flex: 1; min-height: 0; padding: var(--space-5); overflow-y: auto; } /* Tâche 18 la remplira ; vide, elle ne prend aucune place et ne masque jamais le bas de la page. */ #shell-callbar { position: sticky; bottom: 0; z-index: 30; background: var(--panel); border-top: 1px solid var(--border); } #shell-callbar:empty { display: none; } /* ---------- Adaptations ---------- */ @media (min-width: 1025px) { .shell-menu-btn { display: none; } } /* Sous 1024 px la barre latérale devient un tiroir, ouvert par le bouton « Menu » de la barre haute. */ @media (max-width: 1024px) { #tenant-shell-root { grid-template-columns: minmax(0, 1fr); } .shell-sidebar { position: fixed; top: 0; left: 0; z-index: 50; transform: translateX(-100%); transition: transform .18s ease-out; box-shadow: var(--shadow); } .shell-sidebar.shell-sidebar-open { transform: translateX(0); } .shell-sidebar-collapsed { width: 232px; } } @media (max-width: 720px) { .shell-topbar { flex-wrap: wrap; padding: var(--space-2) var(--space-3); } .shell-search-box { flex: 1 1 100%; order: 3; } .shell-poste, .shell-topbar-title { display: none; } #shell-page-outlet { padding: var(--space-3); } } /* ---------- Recherche globale (modale Ctrl+K) ---------- */ .shell-search { display: flex; flex-direction: column; gap: var(--space-3); min-width: min(560px, 80vw); } .shell-search-input { width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: var(--space-3); font-size: var(--font-4); } .shell-search-results { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); } .shell-search-hint { margin: 0; color: var(--muted); font-size: var(--font-2); } .shell-search-group { display: flex; flex-direction: column; gap: var(--space-1); } .shell-search-group h3 { margin: 0 0 var(--space-1); font-size: var(--font-1); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .shell-search-item { display: flex; align-items: baseline; gap: var(--space-2); text-align: left; width: 100%; background: transparent; border: 1px solid transparent; color: var(--text); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--font-2); cursor: pointer; } .shell-search-item:hover, .shell-search-item:focus-visible { background: var(--panel-2); border-color: var(--border); } .shell-search-item-secondary { color: var(--muted); font-size: var(--font-1); } /* ---------- Notifications (toasts) ---------- */ #shell-notifications { position: fixed; top: var(--space-3); right: var(--space-3); z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); max-width: 340px; } .shell-notification { padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: var(--font-2); background: var(--panel-2); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); } .shell-notification-401, .shell-notification-403 { border-color: var(--bad); } .shell-notification-429 { border-color: var(--warn); } .shell-notification-info { border-color: var(--info); } .shell-notification-error { border-color: var(--bad); } .shell-notification-success { border-color: var(--ok); } /* ---------- Wallboard (TV de plateau) et tuiles ---------- */ .shell-wallboard { background: var(--bg); padding: var(--space-4); border-radius: var(--radius-sm); min-height: 60vh; } .shell-wallboard:fullscreen { border-radius: 0; padding: 4vh 4vw; } .shell-wallboard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .shell-wallboard-clock { font-size: var(--font-6); font-variant-numeric: tabular-nums; color: var(--text); } .shell-wallboard-head button { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); cursor: pointer; } .shell-wallboard-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); } /* Lot B, tâche 10 — les tuiles du mur sont des `kpiTile()` du système de design : ce qui reste ici n'est que ce qu'un MUR DE PLATEAU ajoute, des chiffres lisibles de loin. */ .shell-wallboard-tile { text-align: center; } .shell-wallboard-tile .ui-kpi-value { font-size: 56px; line-height: 1.1; font-variant-numeric: tabular-nums; } .shell-wallboard-tile .ui-kpi-label { font-size: var(--font-3); } .shell-wallboard-calls { display: flex; flex-direction: column; gap: var(--space-1); } .shell-wallboard-call { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--font-4); color: var(--text); } .shell-wallboard-call .muted { color: var(--muted); } .shell-wallboard-call .mono { font-variant-numeric: tabular-nums; } .shell-overview-tile { text-align: center; } .shell-overview-tile .ui-kpi-value { font-size: var(--font-5); } .shell-overview-tile .ui-kpi-label { font-size: var(--font-1); } /* ---------- Pipeline (kanban) ---------- */ /* Lot A, tâche 14 — les classes .shell-pipeline-* ont rejoint le système de design sous .ui-kanban* (public/shared/ui/components.css) : le kanban n'est pas une particularité de l'écran Contacts, c'est un composant. */ /* ---------- Cartes et lignes de page ---------- */ .shell-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); } .shell-card h2 { margin: 0 0 var(--space-3); font-size: var(--font-3); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .shell-home-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; border-top: 1px solid var(--border); font-size: var(--font-2); } .shell-home-row:first-child { border-top: 0; } .shell-home-label { color: var(--muted); } .shell-home-value { color: var(--text); text-align: right; } .shell-placeholder p { color: var(--muted); font-size: var(--font-2); } /* ---------- Onglets et sous-filtres de page ---------- */ .shell-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); } .shell-tabs button { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font-size: var(--font-2); cursor: pointer; } .shell-tabs button.active { background: var(--brand); border-color: transparent; color: var(--on-brand); } .shell-subfilter { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); } .shell-subfilter button { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); font-size: var(--font-1); cursor: pointer; } .shell-subfilter button.active { background: var(--brand); border-color: transparent; color: var(--on-brand); } /* ---------- Live / Supervision / Files ---------- */ .shell-wallboard-link { display: inline-block; margin-bottom: var(--space-3); font-size: var(--font-2); } .shell-wallboard-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--bg); overflow: auto; } /* Lot B, tâche 12 — le « Fermer » du Mode TV vit dans l'en-tête DU MUR (.shell-wallboard-head), plus en surcouche à côté de lui : un élément en plein écran est peint dans la top layer du navigateur, qu'aucun z-index extérieur ne dépasse — le bouton s'y retrouvait recouvert et inerte. */ .shell-wallboard-overlay-close { margin-left: var(--space-2); } .shell-live-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); flex-wrap: wrap; gap: var(--space-3); } .shell-live-controls { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-2); color: var(--muted); } .shell-live-controls select { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); } .live-status-ok { color: var(--ok); border-color: var(--ok); } .live-call-supervision-controls { margin-top: var(--space-1); display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; } .live-call-mode { background: var(--panel-2); color: var(--text); } .live-call-supervision-unavailable button { background: var(--panel-2); color: var(--muted); cursor: not-allowed; } .live-call-supervision-unavailable button:disabled { opacity: .6; } .live-call-transcript-panel { margin-top: var(--space-2); background: var(--bg); border-radius: var(--radius); padding: var(--space-3); max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-1); } .live-call-transcript-bubble { max-width: 86%; padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: var(--font-2); line-height: 1.45; } .live-call-transcript-bubble.agent { align-self: flex-start; background: var(--panel-2); color: var(--text); } .live-call-transcript-bubble.prospect { align-self: flex-end; background: var(--panel); color: var(--text); } .live-call-transcript-bubble .role-label { font-size: var(--font-1); opacity: .6; margin-bottom: 2px; } /* Lot B, tâche 10 — L'ÉCRAN SUPERVISION : quatre cartes, deux colonnes à partir de 1100 px, une seule en dessous (un plateau se regarde aussi depuis un téléphone, sur le chemin du bureau). */ .shell-supervision-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 1100px) { .shell-supervision-grid { grid-template-columns: 1fr 1fr; } } .ui-clock { font-variant-numeric: tabular-nums; } .shell-sup-call { display: flex; flex-direction: column; gap: var(--space-1); } .shell-sup-call-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .shell-sup-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; } /* Un membre qui tient DEUX appels : ses appels, et ses deux jeux de gestes, s'empilent au lieu de se mêler sur une seule ligne. */ .shell-sup-calls { display: flex; flex-direction: column; gap: var(--space-2); } .shell-sup-call-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; } .shell-sup-session { border-top: 1px solid var(--border); padding: var(--space-3) 0; } .shell-sup-session:first-child { border-top: 0; } .shell-sup-session-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .shell-sup-session-head h3 { margin: 0; font-size: var(--font-4); } .shell-sup-session-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .shell-sup-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; } .shell-sup-stat { display: flex; flex-direction: column; background: var(--panel-2); border-radius: var(--radius-sm); padding: var(--space-2); } .shell-sup-stat-label { color: var(--muted); font-size: var(--font-1); } .shell-sup-stat-value { color: var(--text); font-size: var(--font-4); font-weight: 600; font-variant-numeric: tabular-nums; } .shell-session-settings { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); } .shell-sup-sla { display: inline-flex; align-items: center; gap: var(--space-2); } .shell-sup-work-queues { margin-top: var(--space-4); } .shell-sup-work-queues > summary { cursor: pointer; color: var(--muted); font-size: var(--font-2); padding: var(--space-2) 0; } .shell-supervision-feed-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; border-bottom: 1px solid var(--border); font-size: var(--font-2); flex-wrap: wrap; } .shell-supervision-feed-action { color: var(--muted); text-transform: uppercase; font-size: var(--font-1); font-weight: 600; } /* ---------- Listes filtrées (appels, vues enregistrées) ---------- */ .shell-calls-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); } .shell-saved-views { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); } .shell-saved-views select, .shell-saved-views button { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--font-2); cursor: pointer; } .shell-calls-filters input, .shell-calls-filters select { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--font-2); } .shell-calls-table { width: 100%; border-collapse: collapse; font-size: var(--font-2); } .shell-calls-table th { text-align: left; padding: var(--space-1) var(--space-3); color: var(--muted); border-bottom: 1px solid var(--border); } .shell-calls-table td { padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--border); color: var(--text); } .shell-calls-pagination { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); } /* ---------- Commercial (CRM tenant) ---------- */ .shell-inline-form { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); } .shell-inline-form input, .shell-inline-form select { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--font-2); } .shell-lead-header { margin-bottom: var(--space-4); } .shell-timeline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); } .shell-timeline-section h4 { margin: 0 0 var(--space-1); font-size: var(--font-2); color: var(--muted); } .shell-timeline-section ul { list-style: none; margin: 0; padding: 0; font-size: var(--font-2); } .shell-timeline-section li { padding: var(--space-1) 0; border-bottom: 1px solid var(--border); } .shell-lead-qualification { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); } .shell-lead-tags { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); } .shell-lead-tag { gap: var(--space-1); } .shell-lead-tag-remove { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: var(--font-2); line-height: 1; padding: 0 2px; } .shell-lead-tag-remove:hover { color: var(--bad); } .shell-lead-tag-add { margin: 0; } .shell-lead-summary p { margin: 0 0 var(--space-2); font-size: var(--font-2); } .shell-lead-summary p:last-child { margin-bottom: 0; } /* ---------- Campagnes / dialer IA ---------- */ .shell-preflight-blockers { list-style: none; margin: 0 0 var(--space-2); padding: 0; font-size: var(--font-2); } .shell-preflight-blockers li { padding: var(--space-1) var(--space-2); margin-bottom: var(--space-1); border-left: 2px solid var(--bad); border-radius: var(--radius-sm); } /* ---------- Agents IA / Scripts / Versions ---------- */ .shell-two-col { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: var(--space-5); align-items: start; } .pill-good { color: var(--ok); border-color: var(--ok); } .pill-bad { color: var(--bad); border-color: var(--bad); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---------- Tuiles KPI, exports, champs sensibles ---------- */ .shell-kpi-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); } .shell-kpi-label { font-size: var(--font-1); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: var(--space-1); } .shell-kpi-value { font-size: var(--font-5); font-weight: 700; color: var(--text); } .shell-export-links { display: flex; flex-direction: column; gap: var(--space-2); } .shell-export-links a { color: var(--brand); font-size: var(--font-2); } .shell-sensitive-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 70px; width: 100%; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: var(--space-2); } /* ---------- Carte « Démarrage » d'Opérations ---------- */ .shell-onboarding-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .shell-onboarding-step { font-size: var(--font-2); color: var(--text); padding: var(--space-2) 0; border-top: 1px solid var(--border); } .shell-onboarding-step:first-child { border-top: 0; } .shell-onboarding-step[data-done="true"] { color: var(--muted); } .shell-onboarding-step a { color: var(--brand); } .shell-onboarding-step .sub { margin-top: var(--space-1); } /* ---------- Accueil (lot A, tâche 12) ---------- */ .shell-home-toolbar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .shell-home-toolbar select { margin: 0; } .shell-home-alert { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border); font-size: var(--font-2); } .shell-home-alert:first-child { border-top: 0; padding-top: 0; } .shell-home-alert a { color: var(--brand); white-space: nowrap; } .shell-home-campaign { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border); } /* File « À appeler » du poste (absorbée depuis l'ancien onglet Live). */ .shell-ops-queue-item { border-top: 1px solid var(--border); } .shell-ops-queue-item:first-of-type { border-top: 0; } .shell-ops-queue-item .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); cursor: pointer; } /* Lot B, tâche 12 — la ligne « campagne rejointe » de la carte « Mon poste ». Sans elle, le nom et son badge étaient deux éléments en ligne dans un bloc : ils se touchaient (« Recette — campagne hybrideActive »). */ .shell-desk-session { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .shell-ops-queue-details:not(:empty) { padding: 0 0 var(--space-3); color: var(--muted); font-size: var(--font-2); } /* ---------- Appels et fiche appel (lot A, tâche 13) ---------- */ /* Colonne « membre » : le badge et le nom sur une seule ligne. */ .shell-call-member { display: inline-flex; align-items: baseline; gap: var(--space-1); } /* Une ligne d'entête de fiche : libellé à gauche, valeur à droite. */ .shell-call-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border); } .shell-call-line:first-child { border-top: 0; } .shell-call-line > span:first-child { min-width: 140px; } /* Transcription : le prospect à gauche, l'agent décalé — on lit un dialogue, pas un tableau. Le bouton d'instant reste discret jusqu'au survol. */ .shell-call-turns { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); } .shell-call-turn { display: grid; grid-template-columns: 90px 1fr auto; align-items: baseline; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius); background: var(--panel-2); } .shell-call-turn-agent { margin-left: var(--space-4); } .shell-call-turn-at { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; font-size: var(--font-1); padding: 0; } .shell-call-turn-at:hover, .shell-call-turn-at:focus-visible { color: var(--brand); text-decoration: underline; } .shell-call-note { padding: var(--space-2) 0; border-top: 1px solid var(--border); } .shell-call-note:first-child { border-top: 0; } .shell-call-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); } .shell-call-timeline li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }