:root{
  --bg:#0b1020; --panel:#111827; --muted:#94a3b8; --text:#e5e7eb; --border:#374151;
  --success:#22c55e; --success-dark:#16a34a;
  --nav:#3b82f6; --nav-dark:#2563eb;
  --add:#86efac; --add-hover:#4ade80;
  --danger:#ef4444; --danger-dark:#dc2626;
  --search:#a855f7; --search-dark:#7e22ce; /* violet (distinctif) */
  --refresh:#64748b; --refresh-dark:#475569; /* slate (moins flashy) */
  --export:#14b8a6; --export-dark:#0d9488; /* teal (CSV/* Sécurité : masquer l'ancienne variante "select + chip" s'il en reste */
td.onb .select-chip, td.onb select, td.onb .chip:not(.dd-chip){ display:none !important; }

/* ===================================================================== */
/* INTERFACE ONGLETS ASSETS - NOUVEAU DESIGN COHERENT                  */
/* ===================================================================== */

/* Navigation onglets avec boutons existants */
.tab-btn {
  margin-right: 8px;
  margin-bottom: 8px;
}

.tab-btn.active {
  background: var(--nav);
  border-color: var(--nav);
  color: white;
}

/* Contenu des onglets */
.tab-content {
  display: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}

.tab-content.active {
  display: block;
}

/* Tables dans les onglets */
.simple-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.simple-table th,
.simple-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
}

.simple-table th {
  background: var(--panel);
  font-weight: 600;
  color: var(--text);
  position: sticky;
  top: 0;
}

.simple-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.1);
}

.simple-table tbody tr:last-child td {
  border-bottom: none;
}

/* Boutons d'actions dans les tables */
.simple-table .btn-sm {
  padding: 4px 8px;
  font-size: 12px;
  min-width: auto;
}

/* ===================================================================== */
/* AG-Grid Cartographie                                                   */
/* ===================================================================== */

.asset-grid-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 16px;
  border-radius: 8px;
}

.asset-grid-wrapper::-webkit-scrollbar {
  height: 12px;
}

.asset-grid-wrapper::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.45);
  border-radius: 6px;
}

.asset-grid-wrapper::-webkit-scrollbar-track {
  background: rgba(2, 6, 23, 0.9);
}


/* RÈGLES CRITIQUES POUR LA SCROLLBAR - NE PAS SUPPRIMER ! */
#assetGrid {
  /* La min-width est calculée dynamiquement par app.js (ligne 2824) */
  width: 100% !important;
  height: 600px !important;
  /* Aucun override de variables AG Grid pour laisser le thème quartz-dark natif s'appliquer */
}

/* Forcer la largeur de la colonne Commentaire pour que le bouton filtre soit visible */
#assetGrid.ag-theme-quartz-dark .ag-header-cell[col-id='Commentaire'],
#assetGrid.ag-theme-quartz-dark .ag-cell[col-id='Commentaire'] {
  min-width: 400px !important;
  width: 380px !important;
}

/* SCROLLBAR - Laissons AG-Grid gérer les viewports pour les colonnes figées */

#assetGrid .ag-body-horizontal-scroll {
  height: 18px !important;
  overflow-x: auto !important;
}

#assetGrid ::-webkit-scrollbar {
  height: 18px !important;
}

#assetGrid ::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.6) !important;
  border-radius: 6px !important;
}

#assetGrid ::-webkit-scrollbar-track {
  background: rgba(2, 6, 23, 0.9) !important;
}

/* === CADRILLAGE NATIF AG-GRID === */
/* Curseur en forme de main sur toute la grille (lignes + cellules) */
#assetGrid .ag-root-wrapper, 
#assetGrid .ag-root, 
#assetGrid .ag-center-cols-container, 
#assetGrid .ag-row,
#assetGrid .ag-cell {
  cursor: pointer !important;
}

#assetGrid .ag-header-cell[col-id='Commentaire'],
#assetGrid .ag-cell[col-id='Commentaire'] {
  min-width: 380px !important;
  width: 380px !important;
}

/* Focus / sélection cellule – palette plus neutre */
/* Focus cellule : retirer bord supplémentaire pour éviter double cadre */
#assetGrid .ag-cell-focus:not(.ag-cell-range-selected) {
  border: none !important;
  box-shadow: none !important;
}

/* Mode édition inline : pas de second cadre, fond légèrement distinct */
#assetGrid .ag-cell.ag-cell-inline-editing {
  background: #0f172a !important; /* slate-900 */
  border: none !important;
  box-shadow: none !important;
}

/* Inputs internes (suppression double contour bleu navigateur) */
/* Inputs internes : un seul cadre discret */
#assetGrid .ag-cell.ag-cell-inline-editing input,
#assetGrid .ag-cell.ag-cell-inline-editing textarea {
  outline: none !important;
  border: 1px solid #3a4a5d !important; /* gris bleuté neutre */
  background: #0f1b2d !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
  border-radius: 4px !important;
}

/* Focus input interne */
#assetGrid .ag-cell.ag-cell-inline-editing input:focus,
#assetGrid .ag-cell.ag-cell-inline-editing textarea:focus {
  border-color: #526375 !important;
  box-shadow: 0 0 0 1px #253244 inset !important; /* accent très discret */
}

/* Sélection de plage (range selection) – teinte douce */
#assetGrid .ag-fill-handle,
#assetGrid .ag-selection-fill-border {
  border-color: #64748b !important;
}
#assetGrid .ag-cell-range-selected:not(.ag-cell-inline-editing) {
  background: rgba(100,116,139,0.18) !important; /* slate-500 alpha */
}
#assetGrid .ag-cell-range-selected-1:not(.ag-cell-inline-editing) { background: rgba(100,116,139,0.22) !important; }
#assetGrid .ag-cell-range-selected-2:not(.ag-cell-inline-editing) { background: rgba(100,116,139,0.26) !important; }
#assetGrid .ag-cell-range-selected-3:not(.ag-cell-inline-editing) { background: rgba(100,116,139,0.30) !important; }

/* Supprimer éventuels restes outline par défaut */
#assetGrid .ag-cell:focus-visible { outline: none !important; }
/* Alignement discret des colonnes booléennes */
#assetGrid .ag-cell[col-id='Actif'],
#assetGrid .ag-cell[col-id='Critique'],
#assetGrid .ag-cell[col-id='Log collectable'] {
  text-align: center;
}

/* Masquer les icônes de menu/filtre dans les headers */
#assetGrid .ag-header-row .ag-header-cell .ag-header-cell-menu-button,
#assetGrid .ag-header-row .ag-header-cell-menu-button,
#assetGrid .ag-header-cell .ag-header-icon {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Coloration des lignes selon Statut Collecte - TOUJOURS VISIBLE */
/* IMPORTANT: Ces règles doivent primer sur toutes les autres couleurs de ligne */

/* Lignes grises - Non collectable */
#assetGrid .ag-row.row-status-grey,
#assetGrid .ag-row.row-status-grey .ag-cell {
  background-color: rgba(100, 116, 139, 0.12) !important;
  color: rgba(226, 232, 240, 0.7) !important;
}
#assetGrid .ag-row.row-status-grey:hover,
#assetGrid .ag-row.row-status-grey:hover .ag-cell,
#assetGrid .ag-row.row-status-grey.ag-row-hover,
#assetGrid .ag-row.row-status-grey.ag-row-hover .ag-cell {
  background-color: rgba(100, 116, 139, 0.2) !important;
  filter: brightness(1.1);
}

/* Lignes rouges - Jamais collecté */
#assetGrid .ag-row.row-status-red,
#assetGrid .ag-row.row-status-red .ag-cell {
  background-color: rgba(239, 68, 68, 0.12) !important;
}
#assetGrid .ag-row.row-status-red:hover,
#assetGrid .ag-row.row-status-red:hover .ag-cell,
#assetGrid .ag-row.row-status-red.ag-row-hover,
#assetGrid .ag-row.row-status-red.ag-row-hover .ag-cell {
  background-color: rgba(239, 68, 68, 0.2) !important;
  filter: brightness(1.1);
}

/* Lignes orange - Stoppé */
#assetGrid .ag-row.row-status-orange,
#assetGrid .ag-row.row-status-orange .ag-cell {
  background-color: rgba(251, 146, 60, 0.12) !important;
}
#assetGrid .ag-row.row-status-orange:hover,
#assetGrid .ag-row.row-status-orange:hover .ag-cell,
#assetGrid .ag-row.row-status-orange.ag-row-hover,
#assetGrid .ag-row.row-status-orange.ag-row-hover .ag-cell {
  background-color: rgba(251, 146, 60, 0.2) !important;
  filter: brightness(1.1);
}

/* Lignes vertes - Collecté */
#assetGrid .ag-row.row-status-green,
#assetGrid .ag-row.row-status-green .ag-cell {
  background-color: rgba(34, 197, 94, 0.12) !important;
}
#assetGrid .ag-row.row-status-green:hover,
#assetGrid .ag-row.row-status-green:hover .ag-cell,
#assetGrid .ag-row.row-status-green.ag-row-hover,
#assetGrid .ag-row.row-status-green.ag-row-hover .ag-cell {
  background-color: rgba(34, 197, 94, 0.2) !important;
  filter: brightness(1.1);
}

/* Cellules booléennes pleine zone cliquable */
#assetGrid .ag-cell.bool-cell {
  cursor: pointer;
  padding: 0 !important; /* laisser la checkbox centrée */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}
#assetGrid .ag-cell.bool-cell .ag-cell-wrapper,
#assetGrid .ag-cell.bool-cell .ag-cell-wrapper .ag-cell-value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
#assetGrid .ag-cell.bool-cell:focus-within,
#assetGrid .ag-cell.bool-cell:focus {
  outline: 2px solid #3b82f6 !important;
  outline-offset: -2px;
}
#assetGrid .ag-cell.bool-cell .bool-cell-wrapper:focus {
  outline: none;
}

/* En-têtes des colonnes booléennes centrées */
/* Plusieurs sélecteurs pour couvrir différentes constructions DOM */
#assetGrid .ag-header-cell[col-id='Actif'] .ag-header-cell-label,
#assetGrid .ag-header-cell[col-id='Critique'] .ag-header-cell-label,
#assetGrid .ag-header-cell[col-id='Log collectable'] .ag-header-cell-label,
#assetGrid .ag-header-cell.bool-col-header .ag-header-cell-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
}
#assetGrid .ag-header-cell[col-id='Actif'] .ag-header-cell-label .ag-header-cell-text,
#assetGrid .ag-header-cell[col-id='Critique'] .ag-header-cell-label .ag-header-cell-text,
#assetGrid .ag-header-cell[col-id='Log collectable'] .ag-header-cell-label .ag-header-cell-text,
#assetGrid .ag-header-cell.bool-col-header .ag-header-cell-label .ag-header-cell-text {
  margin: 0 auto !important;
  padding: 0 !important;
}
/* Wrapper interne checkbox centré (sélecteur de secours) */
#assetGrid .ag-cell.bool-cell .bool-cell-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* Couleur unie discrète pour les en-têtes de la grille assets */
#assetGrid .ag-header, 
#assetGrid .ag-header-row, 
#assetGrid .ag-header-cell {
  background: #1d2733 !important; /* gris bleu nuit discret */
  background-image: none !important;
}

/* === AG-GRID PUR + SCROLLBAR UNIQUEMENT === */

/* Plus d'interférence avec AG-Grid */

/* Boutons d'action - SIMPLES et LISIBLES */
.btn-nav, .btn-export {
    background: #4f46e5;
    border: 1px solid #4f46e5;
    border-radius: 6px;
    color: #ffffff;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    margin: 0 3px;
    min-width: 50px;
    text-align: center;
}

.btn-nav:hover, .btn-export:hover {
    background: #3730a3;
    border-color: #3730a3;
}

.btn-nav:active, .btn-export:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Bouton CSV - VERT et LISIBLE */
.btn-export {
    background: #059669;
    border-color: #059669;
}

.btn-export:hover {
    background: #047857;
    border-color: #047857;
}

/* Button container layout improvements */
.action-buttons {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    margin: 1px 0;
    flex-wrap: nowrap;
    padding: 0;
}

/* Admin Button Pill Style - HARMONISÉ AVEC RETOUR - FORCÉ */
.btn-admin-pill {
    background: #a78bfa !important;
    border: 2px solid #a78bfa !important;
    border-radius: 999px !important;
    color: #1e1433 !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: none !important;
}

.btn-admin-pill:hover {
    background: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    color: #fff !important;
}

.btn-admin-pill:active {
    transform: translateY(0) !important;
}

.admin-crown {
    font-size: 16px !important;
    color: #1e1433 !important;
    text-shadow: none !important;
}

.btn-admin-pill:hover .admin-crown {
    color: #fff !important;
}

/* Responsive button adjustments */
@media (max-width: 768px) {
    .btn-nav, .btn-export {
        padding: 4px 8px;
        font-size: 11px;
        margin: 1px;
        min-width: 40px;
    }
    
    .action-buttons {
        justify-content: center;
        gap: 2px;
    }
    
    .btn-admin-pill {
        padding: 6px 16px;
        font-size: 13px;
    }
}*/

:root {
  --back:#94a3b8; --back-dark:#64748b; /* retour (gris bleuté) */
  --edit:#f59e0b; --edit-dark:#d97706;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;padding:24px;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto}

h1{margin:0 0 8px} .m0{margin:0}
.container{max-width:1100px;margin:0 auto}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.space-between{justify-content:space-between;align-items:center}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{background:#111827cc;border:1px solid var(--border);border-radius:16px;padding:20px}
.muted{color:var(--muted)} .mt6{margin-top:6px} .mt8{margin-top:8px}
.overflow-x{overflow-x:auto}
.hidden{display:none!important}
.text-error{color:#fecaca}
.divider{height:1px;background:var(--border);margin:8px 0}

/* Styles spécifiques pour l'éditeur */
.editor-section {
  margin-bottom: 24px;
}

.editor-grid-container {
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.grid-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.1rem;
}

.grid-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Header */
.header-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:16px}
.header-top .center{justify-self:center;display:flex;justify-content:center;gap:12px}
.header-top .right{justify-self:end}
.header-bar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-bottom:24px}
.header-bar .meta{justify-self:end}

/* Inputs */
label{display:block;color:var(--muted);font-size:.9rem;margin:6px 0}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#0b1222;color:var(--text);outline:none}

/* Buttons */
.btn{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#0b1222;color:var(--text);cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn-success{background:var(--success);border-color:var(--success-dark);color:#08220f}
.btn-success:hover{background:var(--success-dark)}
.btn-nav{background:var(--nav);border-color:var(--nav-dark);color:#fff;border-radius:999px}
.btn-nav:hover{background:var(--nav-dark)}
.btn-add{background:var(--add);border-color:var(--success);color:#064e3b}
.btn-add:hover{background:var(--add-hover)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger-dark)}
.btn-danger:hover{filter:brightness(0.92)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn-edit{background:var(--edit);border-color:var(--edit-dark);color:#111}
.btn-edit:hover{background:var(--edit-dark);color:#111}

/* Boutons avec icône */
.btn-with-icon{display:inline-flex;align-items:center;gap:8px}
.btn-pill{border-radius:999px; padding-left:16px; padding-right:16px}
.btn-with-icon .icon-open{width:18px;height:18px;display:block}
.btn-with-icon .icon-edit{width:18px;height:18px;display:block}
.btn-with-icon .icon-trash{width:18px;height:18px;display:block}

/* Bouton Recherche (spécifique) */
.btn-search{background:var(--search);border-color:var(--search-dark);color:#fff;border-radius:999px;display:inline-flex;align-items:center;gap:8px}
.btn-search:hover{background:var(--search-dark)}
.btn-search .icon-search{width:18px;height:18px;display:block}

/* Bouton Actualiser (spécifique) */
.btn-refresh{background:var(--refresh);border-color:var(--refresh-dark);color:#fff;border-radius:999px;display:inline-flex;align-items:center;gap:8px}
.btn-refresh:hover{background:var(--refresh-dark)}
.btn-refresh .icon-refresh{width:18px;height:18px;display:block}

/* Bouton Export CSV (spécifique) */
.btn-export{background:var(--export);border-color:var(--export-dark);color:#062e2a;border-radius:999px;display:inline-flex;align-items:center;gap:8px}
.btn-export:hover{background:var(--export-dark);color:#e7fffb}
.btn-export .icon-export{width:18px;height:18px;display:block}

/* Bouton Retour (spécifique) - TOUJOURS VISIBLE */
.btn-back{background:#7bb6ff;border:2px solid #7bb6ff;color:#0a1929;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-weight:600;padding:10px 18px}
.btn-back:hover{background:#5a9eeb;border-color:#5a9eeb;color:#fff}
.btn-back .icon-back{width:18px;height:18px;display:block;stroke:#0a1929}
.btn-back:hover .icon-back{stroke:#fff}

/* Pills (infos) */
.pill{display:inline-flex;gap:6px;padding:6px 10px;border-radius:999px;background:#0b1222;border:1px solid var(--border);color:var(--muted)}

/* Tabs (navigation bleue) */
.tabs{display:flex;gap:8px;margin:10px 0 18px}
.editor-tabs{margin-top:0;margin-bottom:0;justify-content:center;position:relative;z-index:2;align-items:center;height:88px}
.editor-tabs .btn.btn-pill{min-width:220px;justify-content:center}
.editor-tabs-banner{height:88px;margin-top:-88px;margin-bottom:24px;background:rgba(41,53,75,0.9);position:relative;z-index:1;border-top:1px solid rgba(148,163,184,0.18);border-bottom:1px solid rgba(148,163,184,0.18)}
.tab{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:#0b1222;color:var(--muted);cursor:pointer}
.tab.active{background:var(--nav);color:#fff;border-color:var(--nav-dark)}


/* Tableau simple et lisible */
th,td{
  border: 1px solid #e5e7eb;
  padding: 8px 10px; 
  vertical-align: middle; 
}

th {
  background: #f9fafb;
  font-weight: 600;
  font-size: 12px;
  color: #374151;
}

tr:hover {
  background: #f9fafb;
}

/* Cellule des statuts avec position relative pour dropdown */
td.onb {
  position: relative;
}



/* Admin > Utilisateurs: alignements colonnes */
#adminUsersTable th:nth-child(1),
#adminUsersTable th:nth-child(2),
#adminUsersTable th:nth-child(3),
#adminUsersTable th:nth-child(4){ text-align:left; }
#adminUsersTable th:nth-child(5),
#adminUsersTable td:nth-child(5),
#adminUsersTable td:nth-child(6){ text-align:center; }

/* Colonne Actions - boutons côte-à-côte */
#adminUsersTable td.actions-cell,
#adminUsersTable td:nth-child(6){
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  padding:6px !important;
}
#adminUsersTable td.actions-cell .btn,
#adminUsersTable td:nth-child(6) .btn{
  margin:0 !important;
  display:inline-flex !important;
}

/* Boutons icônes dans la table Admin */
#adminUsersTable .btn-icon{
  padding:8px !important;
  min-width:36px !important;
  width:36px !important;
  height:36px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:8px !important;
  transition:all .15s;
  vertical-align:middle;
  flex-shrink:0 !important;
}

/* Bouton Edit - style orange */
#adminUsersTable .btn-edit.btn-icon{
  background:var(--edit) !important;
  border:1px solid var(--edit-dark) !important;
}
#adminUsersTable .btn-edit.btn-icon:hover{
  background:var(--edit-dark) !important;
  border-color:var(--edit-dark);
}
#adminUsersTable .btn-edit.btn-icon svg{
  width:20px;
  height:20px;
  stroke:#111;
}

/* Bouton Danger - style rouge */
#adminUsersTable .btn-danger.btn-icon{
  background:var(--danger) !important;
  border:1px solid var(--danger-dark) !important;
}
#adminUsersTable .btn-danger.btn-icon:hover{
  background:var(--danger-dark) !important;
  border-color:var(--danger-dark);
  filter:none !important;
}
#adminUsersTable .btn-danger.btn-icon svg{
  width:20px;
  height:20px;
  stroke:#fff;
}

/* Inputs désactivés: grisés / non modifiables */
input:disabled, select:disabled, textarea:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Boutons désactivés: grisés / non cliquables */
button:disabled, .btn:disabled, .btn-disabled{
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
button:disabled:hover, .btn:disabled:hover, .btn-disabled:hover{
  filter: grayscale(0.4);
}

/* Asset table specific */
#assetTable th, #assetTable td{ min-width:140px; }
#assetTable th:nth-child(1), #assetTable td:nth-child(1){ min-width:48px; }   /* # */
#assetTable th:nth-child(2), #assetTable td:nth-child(2){ min-width:64px; text-align:center;}  /* Suppr */
#assetTable th:nth-child(3), #assetTable td:nth-child(3),
#assetTable th:nth-child(4), #assetTable td:nth-child(4),
#assetTable th:nth-child(5), #assetTable td:nth-child(5){ text-align:center; min-width:80px; }
#assetTable td.cell-checkbox{ display:flex; justify-content:center; }
#assetTable th.sortable::after{ display:none; }
#assetTable td:nth-child(2) button{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:6px; border-radius:8px;
}
#assetTable td:nth-child(2) svg{ width:18px; height:18px; pointer-events:none; }
/* Centrer Actif/Critique en général ? - (gardé default) */

/* History table: center first three columns */

.collect-progress{display:flex;align-items:center;gap:8px;min-width:120px;}
.collect-progress-bar{flex:1;height:8px;background:#1f2937;border-radius:999px;overflow:hidden;}
.collect-progress-fill{height:100%;background:#4ade80;transition:width .2s ease;}
.collect-progress-label{font-size:.85rem;color:var(--muted);min-width:48px;text-align:right;}
table th.sortable{cursor:pointer;white-space:nowrap;user-select:none;}
table th.sortable::after{content:"";display:inline-block;margin-left:6px;color:var(--muted);font-size:.75em;}
table th.sortable[data-sort="asc"]::after{content:"▲";}
table th.sortable[data-sort="desc"]::after{content:"▼";}
#historyTable td:nth-child(1),
#historyTable td:nth-child(2),
#historyTable td:nth-child(3),
#historyTable th:nth-child(1),
#historyTable th:nth-child(2),
#historyTable th:nth-child(3){ text-align:center; }

/* Toast */
.toast{position:fixed;right:16px;bottom:16px;background:#020617e6;border:1px solid var(--border);padding:10px 12px;border-radius:10px;opacity:0;transform:translateY(8px);transition:.2s}
.toast.show{opacity:1;transform:translateY(0)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.6);display:none;align-items:center;justify-content:center;z-index:999;opacity:0;transition:opacity .2s ease-in-out}
.modal-backdrop.show{opacity:1}
.modal{position:relative;background:#0b1222;border:1px solid var(--border);border-radius:14px;padding:18px;max-width:460px;width:92%;transform:translateY(-12px);transition:transform .2s ease-in-out}
.modal.modal-medium{max-width:680px;width:96%;}
.modal-backdrop.show .modal{transform:translateY(0)}
.modal.modal-wide{max-width:1000px;width:95%;}
.modal.modal-large{max-width:760px;width:95%;}
.modal h3{margin:0 0 8px;font-size:1.1rem}
.modal p{margin:0 0 12px;color:var(--muted)}
.modal .actions{display:flex;gap:10px;justify-content:flex-end}

/* Icône poubelle discrète - centrée verticalement */
.btn-danger.btn-icon{
  padding:4px;
  min-width:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent!important;
  border:1px solid transparent;
  transition:all .15s;
  vertical-align:middle;
}
.btn-danger.btn-icon:hover{background:var(--danger)!important;border-color:var(--danger)}
.btn-danger.btn-icon svg{width:18px;height:18px}

/* Cellule Actions AG-Grid - centrage vertical */
#assetGrid .ag-cell[col-id='actions'] {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}
#assetGrid .ag-cell[col-id='actions'] .ag-cell-wrapper {
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Highlight missing "Mises à jour" */
@keyframes pulseField{0%{box-shadow:0 0 0 0 rgba(239,68,68,.8);}70%{box-shadow:0 0 0 8px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
.highlight-missing{border-color:#ef4444!important;animation:pulseField 1s ease-out 3;}

/* Search modal table */
.table-compact{width:100%;border-collapse:collapse;font-size:.95rem;}
.table-compact th,
.table-compact td{border:1px solid var(--border);padding:6px 8px;text-align:left;}
.table-compact tbody tr:nth-child(even){background:#111a32;}
.business-table tbody td{text-align:center;}
.table-filters th{background:#0b1222;padding:4px 6px;}
.table-filters input,
.table-filters select{width:100%;padding:4px 6px;border:1px solid var(--border);border-radius:6px;background:#0b1222;color:var(--text);font-size:.85rem;}

/* Suggestions */
.suggest-list{display:flex;flex-direction:column;gap:8px;}
.suggest-item{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#0b1222;color:var(--text);cursor:pointer;text-align:left;transition:border .15s,background .15s;}
.suggest-item:hover{border-color:var(--nav);background:#13213c;}
.suggest-title{font-weight:600;}
.suggest-sub{color:var(--muted);font-size:.9rem;}

/* Highlight for suggestion navigation */
.highlight-hit{background:rgba(59,130,246,.25)!important;outline:2px solid rgba(59,130,246,.4);outline-offset:2px;transition:background .2s ease-out;}

/* Bouton logout : cercle + contour rouge */
.btn-logout{
  background:transparent;
  border:1px solid var(--danger);
  color:var(--danger);
  border-radius:50%;
  width:44px;               /* ↑ un peu plus grand */
  height:44px;
  display:flex; align-items:center; justify-content:center;
}
.btn-logout:hover{ background:var(--danger); color:#fff; }

/* Forcer la taille de l’icône et ignorer tout style résiduel */
#logoutBtn .icon-logout{
  width:28px !important;    /* 26–28px: lisible dans un cercle 44px */
  height:28px !important;
  display:block;
}

/* Scrollbars WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  cursor: pointer !important;
}
::-webkit-scrollbar-track {
  background: #0b1222;   /* fond sombre */
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #9ca3af #0b1222; /* thumb + track */
}


.onb { /* colonne Statut */ min-width: 280px; }

.onb .select-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;        /* jamais de retour ligne */
}

.onb .select-chip select {
  flex: 0 0 auto;
  width: 220px;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border, #3a3a3a);
  background: var(--bg, #1e1e1e);
  color: inherit;
}

.onb .chip {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.1rem;
  font-size: 0.9rem;
  white-space: nowrap;        /* jamais de retour ligne */
}

/* USER */
.chip--neutral { background: #2f2f2f; color: #cfcfcf; }
.chip--info    { background: #1e3a8a; color: #dbeafe; }
.chip--success { background: #065f46; color: #d1fae5; }

/* ADMIN (pastels) */
.chip--pastel-1 { background: #f3e8ff; color: #5b21b6; border-color: #e9d5ff; }
.chip--pastel-2 { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.chip--pastel-3 { background: #dcfce7; color: #065f46; border-color: #bbf7d0; }
.chip--pastel-4 { background: #ffe4e6; color: #9f1239; border-color: #fecdd3; }
/* === /Statut Onboarding — FIN === */


.onb .select-chip{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.onb .select-chip select{
  width:220px; padding:0.35rem 0.6rem; border-radius:8px;
  border:1px solid var(--border); background:#0b1222; color:inherit;
}
.onb .chip{
  display:inline-block; padding:0.25rem 0.7rem; border-radius:999px;
  border:1px solid transparent; line-height:1.1rem; font-size:0.9rem; white-space:nowrap;
}



/* === Mes SI : colonnes figées === */
#listContainer table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* respecte <colgroup> */
}

#listContainer thead th,
#listContainer tbody td {
  padding: 10px 12px;
  vertical-align: middle;
}

/* Alignements par colonne (1..7) */
#listContainer thead th:nth-child(1), #listContainer tbody td:nth-child(1){ text-align: left;  }
#listContainer thead th:nth-child(2), #listContainer tbody td:nth-child(2){ text-align: center; }
#listContainer thead th:nth-child(3), #listContainer tbody td:nth-child(3){ text-align: center; }
#listContainer thead th:nth-child(4), #listContainer tbody td:nth-child(4){ text-align: left;  }
#listContainer thead th:nth-child(5), #listContainer tbody td:nth-child(5){ text-align: left;  } /* Statut */
#listContainer thead th:nth-child(6), #listContainer tbody td:nth-child(6){ text-align: center; } /* Collecte */
#listContainer thead th:nth-child(7), #listContainer tbody td:nth-child(7){ text-align: center; } /* Actions */

/* Colonne Statut : select + pill compact, sans retour à la ligne */
.onb .select-chip{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.onb .select-chip select{
  width: 220px; padding: 0.35rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--border); background: #0b1222; color: inherit;
}
.onb .chip{
  display:inline-block; padding:0.25rem 0.7rem; border-radius:999px;
  border:1px solid transparent; line-height:1.1rem; font-size:0.9rem; white-space:nowrap;
}

/* === Dropdown Statut Onboarding (inline chip) === */
.onb { position: relative; }

.onb .dd { position: relative; display: inline-block; }
.onb .dd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border:1px solid var(--border); border-radius: 10px;
  background:#0b1222; color: var(--text); cursor: pointer; min-width: 240px;
}
.onb .dd-btn:focus { outline: 2px solid rgba(59,130,246,.5); outline-offset: 2px; }

.onb .dd-chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  border: 1px solid transparent; line-height: 1; font-size: .9rem; white-space: nowrap;
}

/* caret */
.onb .dd-caret{ margin-left:auto; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #9ca3af; }

.onb .dd-menu{
  position: absolute; z-index: 40;
  top: calc(100% + 6px); left: 0; min-width: 260px;
  background:#0b1222; border:1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35); padding: 6px; display: none;
}
.onb .dd.open .dd-menu{ display:block; }

.onb .dd-item{
  display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: 8px; cursor: pointer;
}
.onb .dd-item:hover{ background:#13213c; }
.onb .dd-item .dd-chip{ font-size: .9rem; }

/* Couleurs (réutilise tes classes existantes) */
.chip--neutral { background: #2f2f2f; color: #cfcfcf; }
.chip--info    { background: #1e3a8a; color: #dbeafe; }
.chip--success { background: #065f46; color: #d1fae5; }
.chip--pastel-1 { background:#f3e8ff; color:#5b21b6; border-color:#e9d5ff; }
.chip--pastel-2 { background:#e0f2fe; color:#075985; border-color:#bae6fd; }
.chip--pastel-3 { background:#dcfce7; color:#065f46; border-color:#bbf7d0; }
.chip--pastel-4 { background:#ffe4e6; color:#9f1239; border-color:#fecdd3; }


/* Sécurité : aucune chip/dropdown hors colonne Statut */
#listContainer td:not(.onb) .chip,
#listContainer td:not(.onb) .dd,
#listContainer td:not(.onb) .select-chip { display: none !important; }


/* === PATCH: dropdown stylisée 'dd' intégrée === */
.onb { min-width: 280px; }

.onb .dd { position: relative; display:inline-block; }
.onb .dd-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:8px; border:1px solid var(--border);
  background:#0b1222; color:var(--text); cursor:pointer;
}
.onb .dd-caret{
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--muted); margin-left:4px;
}
.onb .dd-menu{
  position: absolute; 
  z-index: 100; 
  top: 100%; 
  right: 0;
  min-width: 200px; 
  max-width: 250px;
  background: #ffffff; 
  border: 2px solid #e2e8f0; 
  border-radius: 8px; 
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: none;
  animation: slideDown 0.2s ease-out;
}
.onb .dd.open .dd-menu{ display:block; }
.onb .dd-item{ 
  padding: 8px 12px; 
  border-radius: 6px; 
  cursor: pointer; 
  transition: background 0.15s ease;
  margin: 2px 0;
  color: #374151;
  display: block;
}
.onb .dd-item:hover{ 
  background: #f3f4f6; 
}

.onb .dd-chip{
  display: inline-block; 
  padding: 4px 8px; 
  border-radius: 12px;
  border: 1px solid #d1d5db; 
  line-height: 1.2; 
  font-size: 11px; 
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background: #f9fafb;
  color: #374151;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Animation simple pour dropdown */
@keyframes slideDown {
  from { 
    opacity: 0; 
    transform: translateY(-10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Couleurs des chips - LISIBLES et CONTRASTÉES */
.chip--neutral { background:#6b7280; color:#ffffff; border-color:#6b7280; }
.chip--info    { background:#3b82f6; color:#ffffff; border-color:#3b82f6; }
.chip--success { background:#10b981; color:#ffffff; border-color:#10b981; }
.chip--pastel-1 { background:#fdf4ff; color:#7c2d92; border-color:#d946ef; }
.chip--pastel-2 { background:#eff6ff; color:#1d4ed8; border-color:#3b82f6; }
.chip--pastel-3 { background:#f0fdf4; color:#166534; border-color:#22c55e; }
.chip--pastel-4 { background:#ffe4e6; color:#9f1239; border-color:#fecdd3; }

/* Sécurité : si l’ancienne variante “select + chip” traîne, on la masque */
.onb .select-chip{ display:none !important; }
.onb .chip:not(.dd-chip){ display:none !important; }


/* === PATCH anti-décalage – ne garder visible que la chip ================== */
td.onb { overflow: visible; }                   /* menu peut dépasser sans casser la ligne */
td.onb .dd { display: inline-flex; }

/* Le fond sombre étiré venait du bouton : on le rend neutre */
td.onb .dd-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:0;                     /* plus de padding sur le bouton */
  background:transparent;        /* on enlève le fond sombre */
  border:none;                   /* et le contour – seul la chip est visible */
  cursor:pointer;
}

td.onb .dd-chip{                 /* la capsule colorée reste */
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid transparent;
  line-height:1.1rem;
  font-size:.9rem;
  white-space:nowrap;
}

td.onb .dd-caret{
  width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--muted);
  margin-left:6px;
}

/* Dropdown simple et fonctionnelle - PAS DE MODAL */
td.onb .dd-menu{
  position: absolute; 
  z-index: 100; 
  top: 100%; 
  right: 0;
  min-width: 200px; 
  max-width: 250px;
  background: #ffffff; 
  border: 2px solid #e2e8f0; 
  border-radius: 8px; 
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: none;
}
td.onb .dd.open .dd-menu{ display:block; }

/* Sécurité : masquer l’ancienne variante "select + chip" s’il en reste */
td.onb .select-chip, td.onb select, td.onb .chip:not(.dd-chip){ display:none !important; }

/* ========== ASSETS UX IMPROVEMENTS ========== */

/* Animations pour les toasts */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

/* Hover subtil sur les lignes d'assets - sans bordure bleue */
#assetGrid .ag-row:hover,
#assetGrid .ag-row.ag-row-hover {
  background-color: rgba(148, 163, 184, 0.05) !important;
}

/* Supprimer les bordures bleues et box-shadows au hover */
#assetGrid .ag-row:hover .ag-cell,
#assetGrid .ag-row.ag-row-hover .ag-cell {
  box-shadow: none !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

/* Centrage vertical des checkboxes dans la colonne de sélection */
#assetGrid .ag-cell[col-id='selection'] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#assetGrid .ag-cell[col-id='selection'] .ag-selection-checkbox,
#assetGrid .ag-header-cell[col-id='selection'] .ag-checkbox {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Style du bouton suppression caché par défaut */
.btn-danger.hidden {
  display: none !important;
}

/* Animation fadeIn pour modales */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Centrage checkbox dans header de la colonne sélection */
#assetGrid .ag-header-cell[col-id='selection'] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#assetGrid .ag-header-cell[col-id='selection'] .ag-header-cell-comp-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

#assetGrid .ag-header-cell[col-id='selection'] .ag-checkbox {
  margin: 0 !important;
}

/* Forcer centrage checkbox header avec priorité maximale */
#assetGrid .ag-header-cell[col-id='selection'] {
  cursor: default !important;
}

#assetGrid .ag-header-cell[col-id='selection'] .ag-header-select-all,
#assetGrid .ag-header-cell[col-id='selection'] .ag-checkbox-input-wrapper {
  margin: 0 auto !important;
}

#assetGrid .ag-header-cell[col-id='selection'] .ag-header-cell-comp-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  pointer-events: auto !important;
}

#assetGrid .ag-header-cell[col-id='selection'] .ag-header-cell-label {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Permettre les clics sur les éléments interactifs */
#assetGrid .ag-header-cell[col-id='selection'] .ag-checkbox,
#assetGrid .ag-header-cell[col-id='selection'] button,
#assetGrid .ag-header-cell[col-id='selection'] input[type="checkbox"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Encadrement discret sur la sélection de cellule */
#assetGrid .ag-cell-focus,
#assetGrid .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
#assetGrid .ag-cell:focus,
#assetGrid .ag-cell.ag-cell-inline-editing {
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3) !important;
}

/* Zone cliquable étendue pour les checkboxes - toute la cellule */
#assetGrid .ag-cell[col-id='selection'] {
  cursor: pointer !important;
  padding: 0 !important;
}

#assetGrid .ag-cell[col-id='selection'] .ag-selection-checkbox,
#assetGrid .ag-cell[col-id='selection'] .ag-checkbox {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

#assetGrid .ag-header-cell[col-id='selection'] {
  padding: 0 !important;
}

#assetGrid .ag-header-cell[col-id='selection'] .ag-header-select-all {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== Styles des dropdowns AG-Grid (select cell editor) ===== */

/* Supprimer le double-rectangle : la cellule en édition ne doit pas avoir de bordure supplémentaire */
#assetGrid .ag-cell.ag-cell-inline-editing {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Le select lui-même prend toute la place avec son propre style */
#assetGrid .ag-cell.ag-cell-inline-editing .ag-cell-edit-wrapper,
#assetGrid .ag-cell.ag-cell-inline-editing .ag-select {
  width: 100% !important;
  height: 100% !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  border-radius: 4px !important;
  background: #0f172a !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3) !important;
}

/* Forcer curseur main partout dans la grille et les selects */
#assetGrid,
#assetGrid *,
#assetGrid select,
#assetGrid select *,
#assetGrid option,
#assetGrid .ag-select,
#assetGrid .ag-select *,
#assetGrid .ag-select option,
#assetGrid .ag-cell-inline-editing,
#assetGrid .ag-cell-inline-editing *,
#assetGrid .ag-cell-edit-wrapper,
#assetGrid .ag-cell-edit-wrapper * {
  cursor: pointer !important;
}

/* Désactiver sélection de texte globalement sur la grille */
#assetGrid,
#assetGrid *,
#assetGrid select,
#assetGrid select *,
#assetGrid option,
#assetGrid .ag-select,
#assetGrid .ag-select *,
#assetGrid .ag-select option,
#assetGrid .ag-cell-inline-editing,
#assetGrid .ag-cell-inline-editing *,
#assetGrid .ag-cell,
#assetGrid .ag-cell * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Forcer suppression du highlight bleu sur les selects */
#assetGrid select,
#assetGrid select option,
#assetGrid .ag-select,
#assetGrid .ag-select option {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Désactiver le surlignage bleu des options sélectionnées - ultra agressif */
#assetGrid select option,
#assetGrid .ag-select option,
#assetGrid option {
  background-color: #0f172a !important;
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

#assetGrid select option:checked,
#assetGrid select option:focus,
#assetGrid select option:active,
#assetGrid select option[selected],
#assetGrid .ag-select option:checked,
#assetGrid .ag-select option:focus,
#assetGrid .ag-select option:active,
#assetGrid .ag-select option[selected] {
  background-color: #0f172a !important;
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

/* Style des options au survol */
#assetGrid select option:hover,
#assetGrid .ag-select option:hover {
  background-color: rgba(59, 130, 246, 0.3) !important;
  background: rgba(59, 130, 246, 0.3) !important;
}

/* ===================================================================== */
/* Collaboration & Partage                                                */
/* ===================================================================== */

.collab-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  margin-top: 16px;
}

.collab-notifications {
  position: absolute;
  top: -6px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.collab-notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #f87171;
  color: #fff;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 999px;
  line-height: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.collab-notif-panel {
  position: absolute;
  top: 42px;
  right: 0;
  width: 360px;
  max-height: 420px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.6);
  border-radius: 12px;
  padding: 12px;
  z-index: 1200;
  display: none;
}

.collab-notif-panel:not(.hidden) {
  display: block;
}

.collab-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: var(--text);
}

.collab-notif-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 340px;
  overflow-y: auto;
}

.collab-notif-item {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(30, 41, 59, 0.7);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.collab-notif-item:last-child {
  margin-bottom: 0;
}

.collab-notif-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.collab-notif-head .collab-notif-title {
  flex: 1;
}

.collab-notif-title {
  font-weight: 600;
  color: var(--text);
}

.collab-notif-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.collab-notif-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.collab-notif-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.collab-notif-time {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.collab-notif-preview-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.2s ease, opacity 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.collab-notif-preview-btn .icon {
  width: 16px;
  height: 16px;
}

.collab-notif-preview-btn:hover,
.collab-notif-preview-btn:focus,
.collab-notif-preview-btn:active {
  color: var(--text);
  opacity: 1;
  background: rgba(59, 130, 246, 0.1);
}

.collab-notif-preview-popover {
  position: absolute;
  display: none;
  pointer-events: auto;
  z-index: 1500;
  max-width: 320px;
  min-width: 220px;
  max-height: 280px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
  padding: 12px 14px;
  color: var(--text);
  backdrop-filter: blur(6px);
}

.collab-notif-preview-popover.visible {
  display: block;
}

.collab-notif-preview-content {
  font-size: 13px;
  line-height: 1.55;
  overflow-y: auto;
  max-height: 256px;
}

.collab-notif-preview-content p {
  margin: 0 0 8px 0;
}

.collab-notif-preview-content ul,
.collab-notif-preview-content ol {
  margin-left: 18px;
  padding-left: 0;
}

.collab-notif-preview-content ul {
  list-style: disc;
}

.collab-notif-preview-content ol {
  list-style: decimal;
}

.collab-notif-preview-content li {
  margin-bottom: 6px;
}

.collab-notif-preview-content .ql-ui,
.collab-notif-preview-content [contenteditable="false"] {
  display: none !important;
}

.collab-notif-preview-loading {
  font-size: 12px;
  color: var(--muted);
}

.btn.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
}

.btn-notif-go {
  border-color: rgba(125, 211, 252, 0.45);
  background: rgba(125, 211, 252, 0.12);
  color: #bfdbfe;
}

.btn-notif-go:hover,
.btn-notif-go:focus {
  background: rgba(125, 211, 252, 0.2);
  border-color: rgba(125, 211, 252, 0.65);
  color: #dbeafe;
}

.btn-notif-close {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.12);
  color: #fecaca;
}

.btn-notif-close:hover,
.btn-notif-close:focus {
  background: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.65);
  color: #fee2e2;
}

@media (max-width: 1200px) {
  .collab-layout {
    grid-template-columns: 1fr;
  }
}

.collab-sidebar {
  background: rgba(24, 36, 52, 0.95);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

.collab-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 12px;
}

.collab-filter-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  color: #dbeafe;
  border: 1px solid rgba(59, 130, 246, 0.4);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.collab-filter-chip:hover,
.collab-filter-chip:focus {
  background: rgba(59, 130, 246, 0.28);
  border-color: rgba(59, 130, 246, 0.65);
}

.collab-filter-chip.active {
  background: rgba(59, 130, 246, 0.9);
  color: #0f172a;
  border-color: rgba(59, 130, 246, 0.95);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.collab-filter-chip:focus {
  outline: none;
}

.collab-sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.collab-sidebar-header h3 {
  font-size: 18px;
  color: var(--text);
}

.collab-sidebar-search {
  margin-top: 12px;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(30, 41, 59, 0.6);
  color: var(--text);
  padding: 0;
}

.btn-icon .icon {
  width: 18px;
  height: 18px;
}

.btn-icon:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.4);
}

.btn-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


.collab-sidebar-search input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.collab-topic-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
}

.collab-topic-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: #0f172a;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.collab-topic-card:hover {
  border-color: var(--nav);
  background: rgba(59, 130, 246, 0.08);
}

.collab-topic-card.active {
  border-color: var(--nav);
  background: rgba(59, 130, 246, 0.15);
}

.collab-topic-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.collab-topic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.collab-topic-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(59, 130, 246, 0.15);
  color: var(--text);
}

.collab-topic-status[data-status="OPEN"],
.collab-topic-status[data-status="OUVERT"] {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.collab-topic-status[data-status="IN_ANALYSIS"],
.collab-topic-status[data-status="ANALYSE EN COURS"] {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.collab-topic-status[data-status="ANALYSIS_DONE"],
.collab-topic-status[data-status="ANALYSE TERMINÉE"] {
  background: rgba(234, 179, 8, 0.2);
  color: #fde68a;
}

.collab-topic-status[data-status="CLOSED"],
.collab-topic-status[data-status="CLOS"] {
  background: rgba(248, 113, 113, 0.25);
  color: #fecaca;
}

.collab-thread {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

.collab-thread-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.collab-thread-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.collab-thread-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.collab-thread-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.collab-thread-header h3 {
  font-size: 20px;
  color: var(--text);
}

.collab-thread-meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

.collab-thread-closed {
  font-size: 13px;
  color: #fca5a5;
}

.collab-thread-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.collab-participant-pill {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
}

.collab-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px;
}

.collab-message {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: #0b1428;
}

.collab-message--focus {
  border-color: rgba(59, 130, 246, 0.9);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.collab-message-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.collab-message-author {
  font-weight: 600;
  color: var(--text);
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.collab-message-body {
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
}

.collab-message-body p {
  margin: 0 0 8px 0;
}

.collab-message-body ul,
.collab-message-body ol {
  margin-left: 18px;
}

.collab-attachments {
  margin-top: 12px;
}

.collab-attachment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collab-attachment-item,
.collab-message-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--text);
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.collab-attachment-item button {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
}

.collab-attachment-item button:hover {
  color: var(--danger);
}

.collab-empty {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.6);
}

.collab-error {
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 10px;
  padding: 12px;
  background: rgba(127, 29, 29, 0.2);
  color: #fecaca;
  margin-top: 12px;
  font-size: 13px;
}

.collab-composer {
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.collab-attachment-actions {
  margin-top: 10px;
}

.collab-editor {
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}

.collab-editor .ql-toolbar.ql-snow {
  background: var(--panel);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.collab-editor .ql-container.ql-snow {
  border: none;
  background: var(--bg);
  color: var(--text);
  min-height: 160px;
}

.collab-editor .ql-editor {
  color: var(--text);
}

.collab-editor .ql-editor.ql-blank::before {
  color: var(--muted);
}

.collab-editor .ql-stroke {
  stroke: var(--text);
}

.collab-editor .ql-fill {
  fill: var(--text);
}

.collab-editor .ql-picker {
  color: var(--text);
}

.collab-message-attachments {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collab-message-attachment a {
  color: inherit;
  text-decoration: none;
}

.collab-thread .icon,
.collab-attachments .icon,
.collab-attachment-list .icon {
  width: 16px;
  height: 16px;
  margin-right: 0px;
}

.collab-attachment-item svg,
.collab-message-attachment svg {
  width: 14px;
  height: 14px;
}

.collab-attachment-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.collab-stamp {
  font-size: 12px;
  color: var(--muted);
}

.collab-topic-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .collab-thread {
    padding: 12px;
  }

  .collab-topic-list {
    max-height: 240px;
  }

  .collab-thread-side {
    align-items: flex-start;
    min-width: auto;
    width: 100%;
  }

  .collab-thread-status-row,
  .collab-thread-actions {
    justify-content: flex-start;
  }
}

.collab-editor-fallback {
  min-height: 160px;
  padding: 12px;
  outline: none;
  color: var(--text);
}

.collab-editor-fallback:focus {
  box-shadow: 0 0 0 1px var(--nav);
}

.collab-highlight {
  background: rgba(249, 115, 22, 0.25);
  color: #facc15;
  border-radius: 4px;
  padding: 0 2px;
}

.collab-history-table {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 12px;
}

.collab-history-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--border);
}

.collab-history-table th,
.collab-history-table td {
  padding: 10px 14px;
  border: 1px solid var(--border);
  text-align: left;
  color: var(--text);
  background: var(--panel);
}

.collab-history-table tbody tr:hover td {
  background: var(--panel);
}


/* ===== Loader de chargement SI ===== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 16, 32, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  backdrop-filter: blur(4px);
}

.loading-overlay.hidden {
  display: none;
}

.loading-spinner {
  text-align: center;
}

.spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;
  border: 4px solid rgba(59, 130, 246, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  color: #e5e7eb;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.collab-closed-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fca5a5;
}

.collab-closed-reason {
  color: #fecaca;
}

.collab-thread-status-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.collab-thread-status-inline .collab-topic-status {
  padding: 2px 8px;
  font-size: 11px;
}

.collab-thread-status-inline .btn-icon {
  width: 32px;
  height: 32px;
}
.biz-notif-cell {
  text-align: center;
}

.biz-notif-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.biz-notif-btn svg {
  width: 18px;
  height: 18px;
}

.biz-notif-btn.has-notifs {
  border-color: rgba(59, 130, 246, 0.6);
  background: rgba(59, 130, 246, 0.15);
}

.biz-notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f87171;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
}