/**
 * ==========================================================================
 * LIST WITH MODES - CSS
 * ==========================================================================
 * Version: 3.10.0
 * Date: 30 janvier 2026
 * Description: Styles pour la vue liste multi-modes
 *
 * Changelog v3.10.0:
 *   - ADD: Kanban card selection styles (hover, selected, blue bar)
 *   - ADD: Kanban detail expansion styles (in-place card expansion)
 *
 * Changelog v3.9.0:
 *   - ADD: Classe utilitaire .custom-scroll pour standardiser les scrollbars
 *   - ADD: Variables CSS scrollbar (--scrollbar-width, --scrollbar-thumb, etc.)
 *   - REFACTOR: Left-panel scrollbar utilise les variables CSS
 *   - ADD: Scrollbar standardisée sur right-panel (detail) et kanban
 *
 * Changelog v3.8.0:
 *   - DESIGN: Border-radius augmenté sur les panneaux (12px)
 *   - ADD: Variable CSS --panel-border-radius pour centraliser la valeur
 * 
 * Changelog v3.7.0:
 *   - ADD: Bouton clear (×) dans la barre de recherche
 *   - FIX: Suppression scrollbar-gutter pour éviter la bande blanche à droite
 *   - ADD: Scrollbar overlay pour ne pas décaler le contenu
 *   - FIX: Header et bordures s'étendent sur toute la largeur
 * 
 * Changelog v3.6.0:
 *   - FIX: Décalage vertical header lors du tri - réservation d'espace pour icônes
 *   - ADD: Icônes de tri toujours présentes mais invisibles (opacity:0) quand inactives
 *   - ADD: Conteneur .sort-icons avec taille fixe pour éviter tout décalage
 * 
 * Changelog v2.3.0:
 *   - FIX: Scroll vertical visible sur le corps du tableau
 *   - FIX: Footer pagination toujours en bas du conteneur
 *   - FIX: Bordure bleue gauche sur ligne selectionnee
 *   - FIX: Meme bleu que la navbar pour la selection (#dbeafe / #3b82f6)
 *   - MODIF: Variables CSS pour couleurs de selection
 * 
 * Changelog v2.2.0:
 *   - Header tableau sticky avec fond gris (#f8f9fa)
 *   - Footer pagination sticky en bas du panneau
 *   - Masquage du compteur total dans le header
 * 
 * Changelog v2.1.0:
 *   - Footer de pagination avec selecteur de taille
 *   - Pagination numerotee (10, 25, 50, 100 par page)
 * 
 * Changelog v2.0.0:
 *   - Nouveau design des boutons de mode (icon toggle group)
 * 
 * Sections:
 *   1. Variables CSS
 *   2. Split Container & Table Styling
 *   3. Search Bar Inline
 *   4. Mode Buttons (Icon Toggle Group)
 *   5. Header Layout
 *   6. Map & Kanban
 *   7. Responsive
 *   8. Pagination Footer
 * ==========================================================================
 */

/* ==========================================================================
   1. VARIABLES CSS
   ========================================================================== */

:root {
    /* Icon Toggle Group */
    --itg-border-color: #e5e7eb;
    --itg-border-radius: 8px;
    --itg-icon-color: #9ca3af;
    --itg-icon-color-hover: #6b7280;
    --itg-icon-color-active: #2563EB;
    --itg-bg-hover: #f9fafb;
    --itg-separator-color: #e5e7eb;
    --itg-icon-size: 16px;
    --itg-button-padding: 8px 12px;
    --itg-height: 36px;
    
    /* v3.8.0: Panneaux - coins arrondis */
    --panel-border-radius: 12px;

    /* v3.9.0: Scrollbar standardisée */
    --scrollbar-width: 6px;
    --scrollbar-thumb: #e0f2fe;
    --scrollbar-thumb-hover: #93c5fd;
    --scrollbar-track: transparent;
}

/* ==========================================================================
   1b. SCROLLBAR STANDARDISÉE (v3.9.0)
   ========================================================================== */

/* Firefox */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Webkit/Chrome */
.custom-scroll::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
    background: var(--scrollbar-track);
}

.custom-scroll::-webkit-scrollbar-track,
.custom-scroll::-webkit-scrollbar-track-piece {
    background: var(--scrollbar-track);
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
    border: none;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.custom-scroll::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.custom-scroll::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}


/* ==========================================================================
   2. SPLIT CONTAINER & TABLE STYLING (v2.3.0)
   ==========================================================================
   v2.3.0 - 23 janvier 2026:
     - FIX: Scroll vertical visible sur le corps du tableau
     - FIX: Footer pagination toujours en bas du conteneur
     - FIX: Lignes du tableau visibles
     - FIX: Bordure bleue gauche sur ligne selectionnee
     - FIX: Meme bleu que la navbar pour la selection
   ========================================================================== */

/* ===== VARIABLES POUR LA SELECTION ===== */
:root {
    /* Couleurs de selection - alignees sur la navbar EspoCRM */
    --list-row-selected-bg: #dbeafe;        /* Bleu tres clair */
    --list-row-selected-border: #3b82f6;    /* Bleu vif */
    --list-row-hover-bg: #f3f4f6;           /* Gris survol */
}

/* ===== SPLIT CONTAINER ===== */
.split-container {
    display: flex;
    height: calc(100vh - 130px);
    min-height: 400px;
    border: none; /* v2.5.0: Bordures sur les panneaux individuels */
    border-radius: 0;
    overflow: visible; /* v2.5.0: Permettre les panneaux avec border-radius */
    margin-top: 10px;
}

/* ===== LEFT PANEL - Conteneur principal ===== */
.split-container .left-panel {
    width: 40%;
    min-width: 250px;
    border: 1px solid #e5e7eb;
    border-radius: var(--panel-border-radius); /* v3.8.0: Coins plus arrondis */
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-right: 12px; /* v2.6.0: Espacement augmenté */
}

/* v2.8.0: Masquer le focus outline quand le left-panel a le focus (pour navigation clavier) */
.split-container .left-panel:focus {
    outline: none;
}

/* ===== RIGHT PANEL ===== */
.split-container .right-panel {
    flex: 1;
    overflow-y: auto;
    background: #fafafa;
    padding: 15px 15px 0;
    border: 1px solid #e5e7eb;
    border-radius: var(--panel-border-radius); /* v3.8.0: Coins plus arrondis */
    margin-left: 12px; /* v2.6.0: Espacement augmenté */
    /* v3.3.0: Empêcher le scroll automatique lors du focus */
    overflow-anchor: none;
    scroll-behavior: auto;
}

/* v3.3.0: Empêcher TOUT focus outline et scroll dans le right-panel */
.split-container .right-panel:focus,
.split-container .right-panel *:focus {
    outline: none !important;
    /* Empêcher le scroll automatique vers l'élément focusé */
    scroll-margin: 0;
    scroll-padding: 0;
}

/* v3.3.0: Masquer l'outline sur tous les éléments interactifs du détail */
.split-container .right-panel .detail,
.split-container .right-panel .record,
.split-container .right-panel .panel,
.split-container .right-panel .field,
.split-container .right-panel [tabindex],
.split-container .right-panel button,
.split-container .right-panel a,
.split-container .right-panel input,
.split-container .right-panel select,
.split-container .right-panel textarea {
    outline: none !important;
}

/* v3.9.0: Support tabs dans le right-panel split — remplace le contexte .record */
.split-container .right-panel .panel.tab-hidden {
    display: none;
}

/* ===== RESIZER ===== */
.panel-resizer {
    width: 4px;
    background: transparent;
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.2s;
    position: relative;
}

/* v2.6.0: Ligne centrale visible du resizer - plus discrète */
.panel-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 30px;
    background: #e5e7eb;
    border-radius: 2px;
    transition: background 0.2s, height 0.2s;
}

.panel-resizer:hover::after {
    background: #9ca3af;
    height: 50px;
}

/* ===== NO DATA ===== */
.no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-size: 16px;
    font-style: italic;
}

/* ===== LIST CONTAINER - Structure Flex ===== */
.split-container .left-panel .list-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ===== CONTENEUR DU TABLEAU (.list) - Zone scrollable ===== */
/* v2.4.0: C'est le div.list qui doit avoir le scroll, pas .table-responsive */
/* v4.0.0: overflow-x: auto pour scroll horizontal quand les colonnes débordent */
.split-container .left-panel .list-container > .list,
.split-container .left-panel .list-container > div.list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: auto;
}

/* ===== WRAPPER DU TABLEAU - Zone scrollable (fallback) ===== */
/* v4.0.0: overflow-x: auto pour scroll horizontal */
.split-container .left-panel .list-container > div:first-child:not(.list-buttons-container),
.split-container .left-panel .list-container > .record-list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: auto;
}

/* ===== TABLE RESPONSIVE ===== */
.split-container .left-panel .table-responsive {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: auto;
    min-height: 0;
}

/* v2.8.0→v3.9.0: Scrollbar épurée — utilise les variables CSS centralisées */
/* v3.7.0: Retrait de scrollbar-gutter pour éviter la bande blanche à droite */
/* v3.9.0: Refactorisé pour utiliser les variables --scrollbar-* */
.split-container .left-panel .list-container > .list,
.split-container .left-panel .list-container > div:first-child:not(.list-buttons-container),
.split-container .left-panel .table-responsive,
.split-container .left-panel .record-list-container {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.split-container .left-panel .list-container > .list::-webkit-scrollbar,
.split-container .left-panel .list-container > div:first-child:not(.list-buttons-container)::-webkit-scrollbar,
.split-container .left-panel .table-responsive::-webkit-scrollbar,
.split-container .left-panel .record-list-container::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
    background: var(--scrollbar-track);
}

.split-container .left-panel .list-container > .list::-webkit-scrollbar-track,
.split-container .left-panel .list-container > div:first-child:not(.list-buttons-container)::-webkit-scrollbar-track,
.split-container .left-panel .table-responsive::-webkit-scrollbar-track,
.split-container .left-panel .record-list-container::-webkit-scrollbar-track,
.split-container .left-panel .list-container > .list::-webkit-scrollbar-track-piece,
.split-container .left-panel .list-container > div:first-child:not(.list-buttons-container)::-webkit-scrollbar-track-piece,
.split-container .left-panel .table-responsive::-webkit-scrollbar-track-piece,
.split-container .left-panel .record-list-container::-webkit-scrollbar-track-piece {
    background: var(--scrollbar-track);
}

.split-container .left-panel .list-container > .list::-webkit-scrollbar-thumb,
.split-container .left-panel .list-container > div:first-child:not(.list-buttons-container)::-webkit-scrollbar-thumb,
.split-container .left-panel .table-responsive::-webkit-scrollbar-thumb,
.split-container .left-panel .record-list-container::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
    border: none;
}

.split-container .left-panel .list-container > .list::-webkit-scrollbar-thumb:hover,
.split-container .left-panel .list-container > div:first-child:not(.list-buttons-container)::-webkit-scrollbar-thumb:hover,
.split-container .left-panel .table-responsive::-webkit-scrollbar-thumb:hover,
.split-container .left-panel .record-list-container::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

.split-container .left-panel ::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.split-container .left-panel ::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* ===== TABLE ===== */
/* v4.0.0: min-width pour que les colonnes ne soient pas écrasées (scroll-x si déborde) */
.split-container .left-panel table.table {
    margin-bottom: 0;
    /* v3.2.0: border-collapse: separate pour supporter position: relative sur tr */
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 500px;
}

/* ===== HEADER DU TABLEAU - Sticky + Gris ===== */
.split-container .left-panel table.table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.split-container .left-panel table.table thead th {
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.5px;
    padding: 12px 10px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    /* v3.6.0: Hauteur fixe STRICTE pour éviter tout décalage */
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 1;
    /* v3.6.0: Overflow hidden pour éviter tout débordement */
    overflow: hidden;
}

/* v3.2.0: Première cellule du header sans gap */
.split-container .left-panel table.table thead th:first-child {
    padding-left: 12px;
}

/* v3.6.0: Conteneur du header de colonne - FLEX avec hauteur fixe */
.split-container .left-panel table.table thead th .cell-content-wrapper,
.split-container .left-panel table.table thead th > a,
.split-container .left-panel table.table thead th > span:first-child {
    display: inline-flex;
    align-items: center;
    height: 18px;
    max-height: 18px;
    line-height: 18px;
    vertical-align: middle;
}

/* v3.6.0: Liens dans le header - hauteur constante stricte */
.split-container .left-panel table.table thead th a {
    color: #6b7280;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
    height: 18px;
    max-height: 18px;
    vertical-align: middle;
}

.split-container .left-panel table.table thead th a:hover {
    color: #374151;
}

/* v3.6.0: FIX DÉFINITIF du décalage vertical lors du tri */
/* Forcer le même alignement sur TOUS les éléments */
.split-container .left-panel table.table thead th a.sort {
    vertical-align: middle;
    height: 18px;
    line-height: 18px;
}

/* v3.6.0: ICÔNES DE TRI - Réservation d'espace avec taille fixe */
.split-container .left-panel table.table thead th .fas,
.split-container .left-panel table.table thead th .fa,
.split-container .left-panel table.table thead th [class*="fa-chevron"],
.split-container .left-panel table.table thead th [class*="fa-sort"],
.split-container .left-panel table.table thead th .sort-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Taille fixe pour réserver l'espace */
    width: 12px;
    min-width: 12px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* v3.6.0: Bouton de fermeture du tri - taille fixe */
.split-container .left-panel table.table thead th .reset-sort-order,
.split-container .left-panel table.table thead th a.reset-sort-link,
.split-container .left-panel table.table thead th .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    height: 18px;
    font-size: 10px;
    line-height: 1;
    vertical-align: middle;
    opacity: 0.7;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 2px;
}

.split-container .left-panel table.table thead th .reset-sort-order:hover,
.split-container .left-panel table.table thead th a.reset-sort-link:hover,
.split-container .left-panel table.table thead th .close:hover {
    opacity: 1;
}

/* v3.6.0: Fixer la hauteur de field-header-cell de manière stricte */
.split-container .left-panel table.table thead th .field-header-cell {
    display: inline-flex;
    align-items: center;
    height: 18px;
    max-height: 18px;
    line-height: 18px;
    box-sizing: border-box;
    overflow: hidden;
}

/* v3.6.0: SOLUTION ALTERNATIVE - Réserver l'espace même sans icône */
/* Utiliser ::after pour créer un espace réservé invisible */
.split-container .left-panel table.table thead th a.sort::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 18px;
    vertical-align: middle;
}

/* v3.4.0: Masquer la barre de filtres actifs dans le split view (cause du décalage) */
.split-container .left-panel .search-row,
.split-container .left-panel .applied-filters-bar,
.split-container .left-panel .current-filter-container,
.split-container .left-panel .sticked-bar,
.split-container .left-panel .list-buttons-container .btn-group:not(:first-child),
.split-container .left-panel .sort-badge {
    display: none !important;
}

/* v3.4.0: Stabiliser la hauteur du conteneur de liste pour éviter les décalages */
.split-container .left-panel .list-container > .list {
    /* Empêcher l'ancrage automatique du scroll */
    overflow-anchor: none;
}

/* ===== LIGNES DU TABLEAU ===== */
.split-container .left-panel table.table tbody tr {
    transition: background-color 0.15s ease;
}

/* v3.2.0: Bordure basse sur les cellules (car border-collapse: separate) */
/* v4.0.0: white-space: nowrap pour forcer les colonnes larges + scroll horizontal */
.split-container .left-panel table.table tbody td {
    padding: 12px 10px;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    background-color: transparent;
    white-space: nowrap;
}

/* v3.2.0: Première cellule avec position relative pour le ::before */
.split-container .left-panel table.table tbody td:first-child {
    padding-left: 12px;
    position: relative;
}

/* ===== HOVER SUR LES LIGNES ===== */
.split-container .left-panel table.table tbody tr:hover td {
    background-color: var(--list-row-hover-bg) !important;
}

/* ===== LIGNE SELECTIONNEE ===== */
/* v3.2.0: Fond bleu sur toutes les cellules */
.split-container .left-panel table.table tbody tr[data-selected="true"] td,
.split-container .left-panel table.table tbody tr.list-row[data-selected="true"] td {
    background-color: var(--list-row-selected-bg) !important;
}

/* v3.2.0: Barre bleue via ::before sur la PREMIERE CELLULE (pas le tr) */
.split-container .left-panel table.table tbody tr[data-selected="true"] td:first-child::before,
.split-container .left-panel table.table tbody tr.list-row[data-selected="true"] td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--list-row-selected-border);
}

/* v3.8.0: Styles de sélection scopés aux pages list-modes */
/* Alternative si la structure utilise des classes differentes */
body.list-modes-page .list-container tr[data-id] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

body.list-modes-page .list-container tr[data-id]:hover td {
    background-color: var(--list-row-hover-bg) !important;
}

body.list-modes-page .list-container tr[data-id][data-selected="true"] td {
    background-color: var(--list-row-selected-bg) !important;
}

body.list-modes-page .list-container tr[data-id][data-selected="true"] td:first-child {
    position: relative;
}

body.list-modes-page .list-container tr[data-id][data-selected="true"] td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--list-row-selected-border);
}

body.list-modes-page .list-container tr[data-id][data-selected="true"] td {
    background-color: var(--list-row-selected-bg) !important;
}

/* ===== MASQUER LE COMPTEUR TOTAL "17" ===== */
.split-container .left-panel .list-buttons-container,
.split-container .left-panel .pagination-btn-middle,
.split-container .left-panel .total-count-container,
.split-container .left-panel .show-more,
.split-container .left-panel .button-container,
body.list-modes-page .list-container .list-buttons-container,
body.list-modes-page .list-container .total-count,
body.list-modes-page .list-container > .total-count-container,
.split-container .left-panel thead .total-count,
.split-container .left-panel .list-container > .total-count {
    display: none !important;
}

/* v3.16.0: Masquer les boutons d'action dropdown + leur colonne */
.split-container .left-panel .list-row-buttons,
body.list-modes-page .list-kanban .item-menu-container {
    display: none !important;
}

/* v3.16.0: Effondrer la colonne actions (td sans classe contenant .list-row-buttons) */
.split-container .left-panel table.table td:has(> .list-row-buttons),
.split-container .left-panel table.table thead th:last-child:empty {
    width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}


/* ==========================================================================
   3. SEARCH BAR INLINE - Dans le header
   ========================================================================== */

/* Container inline dans le header */
.search-container-inline {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0 !important; /* v2.1.0: supprimé margin-right */
    flex-shrink: 0;
    flex-grow: 0;
    width: auto;
    max-width: 250px;
    height: 36px; /* v2.0.0: Aligné avec la hauteur des boutons */
}

/* v3.8.0: Cacher le container original UNIQUEMENT sur les pages list-modes */
body.list-modes-page .search-container {
    display: none !important;
}

/* Cacher tous les elements inutiles de la vue search */
.search-container-inline .search-row .btn-group,
.search-container-inline .search-row button[data-action="search"],
.search-container-inline .search-row button[data-action="reset"],
.search-container-inline .search-row .dropdown-toggle,
.search-container-inline .search-row .input-group-btn,
.search-container-inline .search-row .advanced-filters-bar,
.search-container-inline .search-row .primary-filter-dropdown,
.search-container-inline .additional-filter-row,
.search-container-inline .row.advanced-filters-row,
.search-container-inline .text-filter-icon {
    display: none !important;
}

/* Supprimer les marges du form-group */
.search-container-inline .search-row,
.search-container-inline .search-row .form-group,
.search-container-inline .form-group {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* v2.1.0: Forcer TOUS les enfants à être compacts */
.search-container-inline > *,
.search-container-inline .search-row > *:not(input) {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
}

/* Container de la search row */
.search-container-inline .search-row {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    height: 36px;
    width: auto !important;
    max-width: 250px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Input group */
.search-container-inline .input-group {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: 36px;
}

/* Input de recherche - Style compact */
.search-container-inline .search-row input.text-filter,
.search-container-inline .search-row input[data-name="textFilter"],
.search-container-inline input[type="text"] {
    width: 220px !important; /* v2.0.0: Légèrement élargi */
    padding: 0 28px 0 32px !important; /* v3.7.0: Padding droit pour le bouton clear */
    border: 1px solid var(--itg-border-color);
    border-radius: var(--itg-border-radius);
    height: 36px !important;
    line-height: 36px !important;
    font-size: 13px;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    margin: 0 !important;
}

.search-container-inline .search-row input.text-filter:focus,
.search-container-inline .search-row input[data-name="textFilter"]:focus,
.search-container-inline input[type="text"]:focus {
    border-color: #66afe9;
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    outline: none;
}

.search-container-inline input::placeholder {
    color: #aaa;
    font-style: normal;
    line-height: normal;
}

/* Icone loupe a gauche - centree verticalement */
.search-container-inline .search-row::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif;
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 12px;
    z-index: 10;
    pointer-events: none;
    line-height: 1;
}

/* v3.7.0: Bouton Clear (×) à droite de l'input */
.search-container-inline .search-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 10px;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    line-height: 1;
    transition: color 0.15s ease;
    /* Masqué par défaut */
    opacity: 0;
    visibility: hidden;
}

.search-container-inline .search-clear-btn:hover {
    color: #374151;
}

/* Afficher le bouton quand la recherche est active */
.search-container-inline .search-clear-btn.visible {
    opacity: 1;
    visibility: visible;
}

/* Animation d'apparition */
.search-container-inline .search-clear-btn {
    transition: opacity 0.15s ease, visibility 0.15s ease, color 0.15s ease;
}

/* Ajuster l'input-group */
.search-container-inline .search-row .input-group input {
    border-radius: var(--itg-border-radius) !important;
}


/* ==========================================================================
   4. MODE BUTTONS - Icon Toggle Group (v2.0.0)
   ========================================================================== */

/**
 * Groupe de boutons icônes - Design inspiré de l'app Drone Reunion
 * - Container unique avec bordure
 * - Icônes cliquables séparées par des lignes verticales
 * - Pas de fond coloré sur l'icône active, juste la couleur de l'icône
 */

/* Container du groupe de boutons mode */
.header-buttons .btn-group.mode-toggle-group {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--itg-border-color);
    border-radius: var(--itg-border-radius);
    background-color: #fff;
    overflow: hidden;
    height: var(--itg-height);
    margin: 0;
    padding: 0;
}

/* Boutons mode - Reset complet */
.header-buttons .btn-group.mode-toggle-group .mode-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: var(--itg-button-padding) !important;
    margin: 0 !important;
    height: 100% !important;
    min-width: 40px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
}

/* Masquer le texte des boutons */
.header-buttons .btn-group.mode-toggle-group .mode-button span:not(.fas):not(.far):not(.fa):not([class*="fa-"]) {
    display: none !important;
}

/* Séparateur vertical entre les boutons */
.header-buttons .btn-group.mode-toggle-group .mode-button:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background-color: var(--itg-separator-color);
}

/* Icônes - état normal */
.header-buttons .btn-group.mode-toggle-group .mode-button .fas,
.header-buttons .btn-group.mode-toggle-group .mode-button .far,
.header-buttons .btn-group.mode-toggle-group .mode-button .fa,
.header-buttons .btn-group.mode-toggle-group .mode-button [class*="fa-"] {
    color: var(--itg-icon-color) !important;
    font-size: var(--itg-icon-size) !important;
    transition: color 0.15s ease !important;
    margin: 0 !important;
}

/* Icônes - état hover */
.header-buttons .btn-group.mode-toggle-group .mode-button:hover {
    background-color: var(--itg-bg-hover) !important;
}

.header-buttons .btn-group.mode-toggle-group .mode-button:hover .fas,
.header-buttons .btn-group.mode-toggle-group .mode-button:hover .far,
.header-buttons .btn-group.mode-toggle-group .mode-button:hover .fa,
.header-buttons .btn-group.mode-toggle-group .mode-button:hover [class*="fa-"] {
    color: var(--itg-icon-color-hover) !important;
}

/* Icônes - état actif (UNIQUEMENT la couleur de l'icône, pas de fond) */
.header-buttons .btn-group.mode-toggle-group .mode-button.active {
    background-color: transparent !important;
}

.header-buttons .btn-group.mode-toggle-group .mode-button.active .fas,
.header-buttons .btn-group.mode-toggle-group .mode-button.active .far,
.header-buttons .btn-group.mode-toggle-group .mode-button.active .fa,
.header-buttons .btn-group.mode-toggle-group .mode-button.active [class*="fa-"] {
    color: var(--itg-icon-color-active) !important;
}

/* État actif + hover */
.header-buttons .btn-group.mode-toggle-group .mode-button.active:hover {
    background-color: var(--itg-bg-hover) !important;
}


/* ==========================================================================
   5. HEADER LAYOUT (v2.1.0)
   ==========================================================================
   v2.1.0 - 23 janvier 2026:
     - FIX: Alignement à droite du header buttons
     - FIX: Réduction espace entre search bar et boutons (gap: 8px)
     - MODIF: Conteneur col-sm-8 utilise flexbox avec justify-content: flex-end
   ========================================================================== */

/* Header buttons - alignement vertical compact et à droite */
body.list-modes-page .header-buttons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px; /* Espace entre search, mode buttons, et create button */
    height: 36px;
    /* v2.1.0: Supprimé float:right, alignement géré par flexbox parent */
    flex-shrink: 0;
}

body.list-modes-page .header-buttons > * {
    vertical-align: middle;
}

/* v2.1.0: Conteneur parent - flexbox pour alignement droite */
body.list-modes-page .page-header .col-sm-8,
body.list-modes-page .page-header .col-xs-6:last-child {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Supprimer pull-right qui peut interférer avec flexbox */
body.list-modes-page .page-header .header-buttons.pull-right {
    float: none !important;
}

/* Bouton Create - Style pill */
body.list-modes-page .header-buttons .btn-primary[data-action="create"] {
    height: 36px;
    line-height: 20px;
    padding: 8px 16px !important;
    border-radius: var(--itg-border-radius) !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Page header row - moins d'espace vertical */
body.list-modes-page .page-header .row {
    display: flex;
    align-items: center;
    min-height: 40px;
}

body.list-modes-page .page-header .col-sm-4 {
    display: flex;
    align-items: center;
}

body.list-modes-page .page-header h3 {
    margin: 0 !important;
    line-height: 1.2;
}


/* ==========================================================================
   6. MAP & KANBAN CONTAINERS
   ========================================================================== */

.full-container {
    margin-top: 10px; /* v2.0.0: Réduit de 15px */
    /* v3.16.0: Bounded height + flex (same principle as split-container) */
    height: calc(100vh - 130px);
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

/* v3.16.0: Right-panel fills full-container height */
.full-container .right-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* v3.18.0: En mode split/map, right-panel transparent avec bordure alignée sur left-panel.
   Spécificité (0,3,0) > (0,2,0) de .split-container .right-panel. */
body.list-modes-page .right-panel.split-mode,
body.list-modes-page .right-panel.map-mode {
    background: none;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: var(--panel-border-radius);
    overflow-y: auto;
}

/* v3.18.0: En mode kanban, right-panel totalement transparent (pas de bordure,
   c'est list-kanban-container qui porte le chrome visuel). */
body.list-modes-page .right-panel.kanban-mode {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* v3.18.0: list-kanban-container — conteneur visuel (bg, border, radius).
   Pas de scroll ici : c'est .kanban-columns-container qui scrolle.
   flex column pour empiler .list-kanban + footer. */
body.list-modes-page .right-panel.kanban-mode > .list-kanban-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--panel-border-radius);
    padding: 15px 0 0 15px;
}

/* ===== KANBAN LAYOUT: HEADER FIXE + COLONNES SCROLLABLES (v3.18.0) ===== */

/* .list-kanban — flex column pour empiler head + columns. flex:1 pour remplir. */
body.list-modes-page .list-kanban {
    overflow: visible !important;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Header — hors du scroll, reste en place naturellement (sibling de columns-container).
   flex-shrink: 0 pour ne pas se comprimer. padding-right compense le padding
   supprimé du parent (scrollbar collée à droite). */
body.list-modes-page .kanban-head-container {
    flex-shrink: 0;
    z-index: 12;
    background: #fff;
    padding-right: 15px;
}

/* Colonnes — LE scroll container. flex:1 pour occuper l'espace restant.
   Pas de padding-right : la scrollbar se colle contre la bordure du parent. */
body.list-modes-page .kanban-columns-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Hauteur et style alignés sur les en-têtes de liste Split/Map (42px).
   Le core fixe max-height:var(--28px) sur le th avec spécificité (0,3,6)
   via div.list-kanban>div.kanban-head-container>table>thead tr.kanban-row>th.
   On préfixe avec div.list-kanban pour atteindre (0,4,7) et gagner. */
body.list-modes-page div.list-kanban > div.kanban-head-container > table > thead tr.kanban-row > th {
    max-height: 42px;
    height: 42px;
}

/* Le core fixe line-height:var(--28px) et height:100% sur le div interne
   via div.list-kanban>div>table th.group-header>div — spécificité (0,2,5).
   Notre sélecteur (0,4,7) gagne largement. */
body.list-modes-page div.list-kanban > div > table th.group-header > div {
    line-height: 42px;
    height: 42px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Masquer le bouton create (+) dans les en-têtes kanban */
body.list-modes-page .group-header .create-button {
    display: none !important;
}

/* ===== KANBAN CARD SELECTION (v3.10.0) ===== */

/* Curseur pointer sur les cards */
.list-kanban .item {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Hover */
.list-kanban .item:hover .panel {
    background-color: var(--list-row-hover-bg);
}

/* Card sélectionnée */
.list-kanban .item[data-selected="true"] .panel {
    background-color: var(--list-row-selected-bg);
    border-left: 3px solid var(--list-row-selected-border);
}

/* ===== KANBAN DETAIL EXPANSION ===== */

.kanban-detail-expanded {
    border-top: 1px solid #e5e7eb;
    margin-top: 8px;
    padding-top: 8px;
}

/* Masquer le chrome du detail view à l'intérieur de la card */
.kanban-detail-expanded .panel,
.list-kanban .item[data-selected="true"] .kanban-detail-expanded .panel {
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    background: transparent;
}

.kanban-detail-expanded .panel-heading {
    display: none;
}

.kanban-detail-expanded .panel-body {
    padding: 0;
}

/* Champs compacts dans l'expansion */
.kanban-detail-expanded .form-group {
    margin-bottom: 4px;
}

.kanban-detail-expanded .cell {
    padding: 2px 4px;
}

/* Masquer les boutons d'action du detail view */
.kanban-detail-expanded .detail-button-container,
.kanban-detail-expanded .record-buttons {
    display: none;
}

/* v3.16.0: Hide kanban native show-more buttons (pagination footer used instead) */
body.list-modes-page .list-kanban .show-more {
    display: none !important;
}

/* v3.16.0: Hide total-count in kanban context (CSS fallback) */
body.list-modes-page .right-panel > .list-buttons-container {
    display: none !important;
}

/* v3.16.0: Kanban pagination footer — full-bleed (edge-to-edge) */
/* The footer sits inside a 15px-padded parent (right-panel or kanban-container).
   Negative left/right margins extend it to the container edges.
   Cards keep the 15px inset; the footer spans the full width. */
.kanban-pagination-footer {
    margin-left: -15px;
    margin-right: 0;
    padding: 10px 12px 10px 27px;
    z-index: 15;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.06);
}

#list-modes-map {
    z-index: 1;
}

.leaflet-popup-content {
    font-size: 13px;
    line-height: 1.5;
}

.leaflet-popup-content strong {
    color: #333;
}


/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    /* Cacher la search bar sur mobile */
    .search-container-inline {
        display: none;
    }
    
    /* Split container devient vertical */
    .split-container {
        flex-direction: column;
        height: auto;
    }

    .split-container .left-panel {
        width: 100% !important;
        max-height: 300px;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    .panel-resizer {
        display: none;
    }

    .split-container .right-panel {
        min-height: 400px;
    }

    /* v3.16.0: Full-container height auto on mobile (same as split) */
    .full-container {
        height: auto;
    }

    /* Mode toggle group compact sur mobile */
    .header-buttons .btn-group.mode-toggle-group .mode-button {
        padding: 6px 10px !important;
        min-width: 36px;
    }
}


/* ==========================================================================
   8. PAGINATION FOOTER (v2.1.0)
   ==========================================================================
   v2.2.0 - 23 janvier 2026:
     - Footer de pagination STICKY en bas du panneau
     - Footer avec sélecteur de taille
     - Pagination numérotée avec navigation first/prev/next/last
     - Design inspiré de Drone Reunion
   ========================================================================== */

/* Container principal du footer - STICKY */
.list-pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid #e5e7eb;
    background-color: #f8f9fa; /* Même gris que le header */
    font-size: 12px;
    color: #6b7280;
    flex-wrap: wrap;
    gap: 8px;
    /* v2.2.0: Sticky footer */
    position: sticky;
    bottom: 0;
    z-index: 10;
    flex-shrink: 0;
    margin-top: auto; /* Pousse le footer en bas */
}

/* Partie gauche: Sélecteur + Info */
.list-pagination-footer .pagination-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.list-pagination-footer .pagination-label {
    color: #6b7280;
}

.list-pagination-footer .page-size-select {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    min-width: 60px;
}

.list-pagination-footer .page-size-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.list-pagination-footer .pagination-entries {
    color: #6b7280;
}

.list-pagination-footer .pagination-info-start,
.list-pagination-footer .pagination-info-end,
.list-pagination-footer .pagination-info-total {
    font-weight: 500;
    color: #374151;
}

/* Partie droite: Navigation */
.list-pagination-footer .pagination-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.list-pagination-footer .pagination-page-info {
    color: #6b7280;
}

.list-pagination-footer .pagination-page-current,
.list-pagination-footer .pagination-page-total {
    font-weight: 500;
    color: #374151;
}

/* Contrôles de pagination */
.list-pagination-footer .pagination-controls {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Boutons de navigation (first, prev, next, last) */
.list-pagination-footer .pagination-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
}

.list-pagination-footer .pagination-nav:hover:not(:disabled) {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.list-pagination-footer .pagination-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Container des numéros de page */
.list-pagination-footer .pagination-pages {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 4px;
}

/* Boutons de numéro de page */
.list-pagination-footer .pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: transparent;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.list-pagination-footer .pagination-btn:hover:not(.active) {
    background-color: #f3f4f6;
    color: #374151;
}

.list-pagination-footer .pagination-btn.active {
    background-color: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

/* Masquer les éléments natifs de pagination EspoCRM */
.list-container .button-container,
.list-container .show-more {
    display: none !important;
}

/* Masquer le compteur total dans le header du tableau */
.list-container .list-buttons-container .pagination-btn-middle {
    display: none !important;
}

/* Responsive: Empiler sur mobile */
@media (max-width: 600px) {
    .list-pagination-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .list-pagination-footer .pagination-right {
        width: 100%;
        justify-content: space-between;
    }
    
    .list-pagination-footer .pagination-nav {
        width: 28px;
        height: 28px;
    }
    
    .list-pagination-footer .pagination-btn {
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        font-size: 12px;
    }
}


/* ==========================================================================
   7. MAP MARKERS SVG (v3.10.0)
   ========================================================================== */

/* Supprimer le fond blanc par défaut de L.divIcon */
.marker-icon-svg {
    background: transparent !important;
    border: none !important;
}

/* Ombre portée pour les markers */
.marker-icon-svg svg {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

/* Animation légère au survol */
.marker-icon-svg:hover svg {
    transform: scale(1.1);
    transition: transform 0.15s ease;
}

/* Marker sélectionné - légère pulsation */
.marker-icon-svg.marker-selected svg {
    filter: drop-shadow(2px 2px 3px rgba(220, 38, 38, 0.5));
}


/* ==========================================================================
   9. ICON-ONLY COLUMNS (projectType, viewerLink)
   ========================================================================== */

/* Hide column headers */
.split-container .left-panel table.table thead th[data-name="projectType"],
.split-container .left-panel table.table thead th[data-name="viewerLink"] {
    font-size: 0 !important;
    padding: 12px 4px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
}

/* Hide header link text */
.split-container .left-panel table.table thead th[data-name="projectType"] a,
.split-container .left-panel table.table thead th[data-name="viewerLink"] a {
    font-size: 0 !important;
    visibility: hidden;
}

/* Compact cells */
.split-container .left-panel table.table tbody td[data-name="projectType"],
.split-container .left-panel table.table tbody td[data-name="viewerLink"] {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 8px 4px !important;
    text-align: center;
}

/* ==========================================================================
   DATA ICONS — Colonne icônes de données disponibles
   ========================================================================== */

.data-icons-cell {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}

.data-icons-cell .data-icon {
    font-size: 13px;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.data-icons-cell .data-icon:hover {
    opacity: 1;
}

/* ==========================================================================
   FIN DU FICHIER - v4.2.0
   ========================================================================== */