/*
 * Design DataTables - Extranet Prestataires

/* ------------------------------ VARIABLES - COULEURS ---------------------------- */

:root {
    --datatable-header-bg: #f0f0f0;
    --datatable-header-color: #333333;
    --datatable-header-border: #505050;
    --datatable-row-odd: #ffffff;
    --datatable-row-even: #ffffff;
    --datatable-row-hover: rgba(0, 114, 174, 0.05);
    --datatable-border: #e0e0e0;
    --datatable-sort-active: var(--color-primary-05);
    --datatable-selected: var(--color-secondary-02);
}

/* ------------------------------ WRAPPER ET CONTENEURS ---------------------------- */

.dataTables_wrapper {
    position: relative;
    background-color: var(--color-primary-02);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 20px 0;
    font-family: var(--stack);
    /*border: 1px solid var(--datatable-border);*/
}

.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    padding: 15px 20px;
    background: var(--color-primary-02);
    border: 2px solid var(--color-primary-05);
    border-radius: var(--radius);
    text-align: center;
    color: var(--color-primary-01);
    font-size: 14px;
    font-family: var(--stack-b);
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/* ------------------------------ CONTRÔLES SUPÉRIEURS ---------------------------- */

.fg-toolbar,
.top,
.bottom {
    background: var(--datatable-header-bg);
    border: none;
    border-top: 3px solid var(--datatable-header-border);
    border-radius: 0;
    padding: 12px 20px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-family: var(--stack);
    color: var(--datatable-header-color);
}

.dataTables_length {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--datatable-header-color);
    font-family: var(--stack);
}

.dataTables_length select {
    padding: 8px 12px;
    border: 1px solid var(--datatable-border);
    border-radius: var(--radius);
    background-color: var(--color-primary-02);
    color: var(--color-primary-01);
    font-family: var(--stack);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dataTables_length select:focus {
    outline: none;
    border-color: var(--color-primary-05);
    box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.2);
}

.dataTables_filter {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--datatable-header-color);
    font-family: var(--stack);
}

.dataTables_filter input {
    padding: 10px 15px;
    border: 1px solid var(--datatable-border);
    border-radius: var(--radius);
    background-color: var(--color-primary-02);
    color: var(--color-primary-01);
    font-family: var(--stack);
    font-size: 14px;
    transition: all 0.3s ease;
    min-width: 200px;
}

.dataTables_filter input:focus {
    outline: none;
    border-color: var(--color-primary-05);
    box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.2);
}

/* ------------------------------ TABLEAU PRINCIPAL - SANS SÉPARATEURS COLONNES ---------------------------- */

table.display {
    width: 100%;
    border-spacing: 0;
    background-color: var(--color-primary-02);
    overflow: hidden;
    box-shadow: none;
    font-family: var(--stack);
}

/* En-têtes - SANS bordures droites */
table.display thead th {
    background: var(--datatable-header-bg);
    color: var(--datatable-header-color);
    padding: 15px 12px;
    font-family: var(--stack-b);
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 5px solid var(--datatable-header-border);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    user-select: none;
    text-align: center;
}

table.display thead th:hover {
    background: white;
}

table.display thead th:last-child {
    border-top-right-radius: 0;
}

/* Cellules du tableau - SANS bordures droites */
table.display td {
    padding: 12px;
    border-bottom: 1px solid var(--datatable-border);
    border-right: none; /* SUPPRIMÉ */
    color: var(--color-primary-01);
    font-size: 13px;
    vertical-align: middle;
    transition: all 0.3s ease;
    background-color: var(--datatable-row-even);
    text-align: center;
}

table.display td.center {
    text-align: center;
}

/* Pied de tableau */
table.display tfoot th {
    background-color: var(--datatable-header-bg);
    color: var(--datatable-header-color);
    padding: 12px;
    border-top: 1px solid var(--datatable-border);
    font-family: var(--stack-b);
    font-weight: 500;
    font-size: 13px;
}

tfoot input {
    width: 100%;
    padding: 8px 10px;
    margin: 5px 0;
    border: 1px solid var(--datatable-border);
    border-radius: var(--radius);
    background-color: var(--color-primary-02);
    color: var(--color-primary-01);
    font-family: var(--stack);
    font-size: 12px;
    transition: all 0.3s ease;
}

tfoot input:focus {
    outline: none;
    border-color: var(--color-primary-05);
    box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.2);
}

tfoot input.search_init {
    color: var(--color-shades-02);
    font-style: italic;
}

/* ------------------------------ LIGNES ET ALTERNANCE ---------------------------- */

tr.odd {
    background-color: var(--datatable-row-odd);
}

tr.even {
    background-color: var(--datatable-row-even);
}

table.display tbody tr:hover td {
    background-color: var(--datatable-row-hover) !important;
}

table.display tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0;
}

table.display tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0;
}

/* ------------------------------ TRI ET ICÔNES ---------------------------- */

.sorting,
.sorting_asc,
.sorting_desc {
    position: relative;
    padding-right: 30px !important;
}

.sorting::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.sorting_asc::after {
    content: '↑';
    color: var(--datatable-sort-active);
    opacity: 1;
    font-weight: bold;
}

.sorting_desc::after {
    content: '↓';
    color: var(--datatable-sort-active);
    opacity: 1;
    font-weight: bold;
}

.sorting:hover::after {
    opacity: 1;
    color: var(--datatable-header-color);
}

/* ------------------------------ PAGINATION ---------------------------- */

.dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
}

.paging_full_numbers {
    display: flex;
    align-items: center;
    gap: 5px;
}

.paging_full_numbers .paginate_button,
.paging_full_numbers .paginate_active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 35px;
    padding: 0 8px;
    border: 1px solid var(--datatable-border);
    border-radius: var(--radius);
    background-color: var(--color-primary-02);
    color: var(--color-primary-01);
    text-decoration: none;
    font-family: var(--stack);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.paging_full_numbers .paginate_button:hover {
    background-color: var(--color-primary-05);
    color: var(--color-primary-02);
    border-color: var(--color-primary-05);
    transform: translateY(-1px);
    box-shadow: 0px 4px 8px 0px rgba(0, 150, 136, 0.3);
}

.paging_full_numbers .paginate_active {
    background-color: var(--color-primary-05);
    color: var(--color-primary-02);
    border-color: var(--color-primary-05);
    font-weight: 600;
}

.paging_full_numbers .paginate_button.previous,
.paging_full_numbers .paginate_button.next {
    font-weight: 600;
}

.paginate_disabled_previous,
.paginate_disabled_next {
    opacity: 0.4;
    cursor: not-allowed !important;
}

.paginate_disabled_previous:hover,
.paginate_disabled_next:hover {
    background-color: var(--color-primary-02) !important;
    color: var(--color-primary-01) !important;
    border-color: var(--datatable-border) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ------------------------------ INFORMATIONS ET ÉTATS ---------------------------- */

.dataTables_info {
    color: var(--datatable-header-color);
    font-family: var(--stack);
    font-size: 13px;
    margin-top: 15px;
    padding: 10px 0;
}

.dataTables_empty {
    text-align: center;
    font-size: 16px;
    color: var(--color-shades-02);
    font-family: var(--stack);
    padding: 40px 20px;
    font-style: italic;
}

/* ------------------------------ SÉLECTION DE LIGNES ---------------------------- */

table.display tr.row_selected td {
    background-color: var(--datatable-selected) !important;
    border-left: 4px solid var(--color-primary-05);
}

/* ------------------------------ GROUPES ET DÉTAILS ---------------------------- */

td.group {
    background: linear-gradient(135deg, var(--color-shades-02) 0%, var(--color-shades-01) 100%);
    color: var(--color-primary-02);
    border: none;
    border-top: 3px solid var(--color-primary-05);
    border-bottom: 3px solid var(--color-primary-05);
    font-family: var(--stack-b);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 12px;
}

td.details {
    background-color: var(--color-secondary-01);
    border: 2px solid var(--color-primary-05);
    border-radius: var(--radius);
    padding: 15px;
    font-family: var(--stack);
    font-size: 13px;
}

/* ------------------------------ RESPONSIVE DESIGN ---------------------------- */

@media (max-width: 768px) {
    .dataTables_wrapper {
        padding: 15px;
    }
    
    .fg-toolbar,
    .top,
    .bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .dataTables_length,
    .dataTables_filter {
        width: 100%;
        justify-content: space-between;
    }
    
    .dataTables_filter input {
        min-width: 150px;
        flex: 1;
    }
    
    table.display {
        font-size: 12px;
    }
    
    table.display thead th,
    table.display td {
        padding: 8px 6px;
    }
    
    .paging_full_numbers .paginate_button,
    .paging_full_numbers .paginate_active {
        min-width: 30px;
        height: 30px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .dataTables_wrapper {
        padding: 10px;
    }
    
    table.display {
        font-size: 11px;
    }
    
    table.display thead th {
        font-size: 11px;
        padding: 6px 4px;
    }
    
    table.display td {
        padding: 6px 4px;
    }
}

/* ------------------------------ ANIMATIONS ET TRANSITIONS ---------------------------- */

.dataTables_wrapper {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading animation */
.dataTables_processing::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-primary-05);
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

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

/* ------------------------------ AMÉLIORATIONS ACCESSIBILITÉ ---------------------------- */

table.display thead th:focus {
    outline: 2px solid var(--color-primary-05);
    outline-offset: 2px;
}

.paging_full_numbers .paginate_button:focus {
    outline: 2px solid var(--color-primary-05);
    outline-offset: 2px;
}

/* ------------------------------ TOOLBARS JQUERY UI ---------------------------- */

/* Toolbar du haut (corners top-left, top-right) */
.fg-toolbar.ui-widget-header.ui-corner-tl.ui-corner-tr.ui-helper-clearfix,
.ui-widget-header.ui-corner-tl.ui-corner-tr.ui-helper-clearfix {
    background: white !important;
    color: #616161 !important;
    border: none !important;
    border-top: 5px solid var(--datatable-header-border) !important;
    border-radius: 0 !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    display: flex; /* !important retiré pour permettre le masquage par les JSP */
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    font-family: var(--stack) !important;
    box-shadow: none !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 45px !important;
    border-bottom: 1px solid var(--datatable-border) !important;
}

/* Toolbar du bas (corners bottom-left, bottom-right) */
.fg-toolbar.ui-widget-header.ui-corner-bl.ui-corner-br.ui-helper-clearfix,
.ui-widget-header.ui-corner-bl.ui-corner-br.ui-helper-clearfix {
    background: var(--datatable-header-bg) !important;
    color: var(--datatable-header-color) !important;
    border: none !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    display: flex; /* !important retiré pour permettre le masquage par les JSP */
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    font-family: var(--stack) !important;
    box-shadow: none !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 45px !important;
}

/* Toolbar générale (pour les cas où il n'y a qu'une seule toolbar) */
.fg-toolbar.ui-widget-header.ui-helper-clearfix:not(.ui-corner-tl):not(.ui-corner-bl),
.ui-widget-header.ui-helper-clearfix:not(.ui-corner-tl):not(.ui-corner-bl) {
    background: var(--datatable-header-bg) !important;
    color: var(--datatable-header-color) !important;
    border: none !important;
    border-top: 3px solid var(--datatable-header-border) !important;
    border-radius: 0 !important;
    padding: 12px 20px !important;
    margin: 10px 0 !important;
    display: flex; /* !important retiré pour permettre le masquage par les JSP */
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    font-family: var(--stack) !important;
    box-shadow: none !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 45px !important;
}

/* Supprime les anciens styles jQuery UI */
.ui-widget-header {
    height: auto !important;
    min-height: 45px !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Éléments communs dans toutes les toolbars */
.fg-toolbar .dataTables_length,
.fg-toolbar .dataTables_filter,
.fg-toolbar .dataTables_info,
.fg-toolbar .dataTables_paginate,
.ui-widget-header .dataTables_length,
.ui-widget-header .dataTables_filter,
.ui-widget-header .dataTables_info,
.ui-widget-header .dataTables_paginate {
    color: var(--datatable-header-color) !important;
    font-family: var(--stack) !important;
    font-size: 14px !important;
    display: flex; /* !important retiré pour permettre le masquage par les JSP */
    align-items: center !important;
    gap: 10px !important;
}

/* Labels dans toutes les toolbars */
.fg-toolbar label,
.ui-widget-header label {
    color: var(--datatable-header-color) !important;
    font-family: var(--stack-b) !important;
    font-weight: 500 !important;
    margin-right: 8px !important;
}

/* Select dans toutes les toolbars */
.fg-toolbar select,
.ui-widget-header select {
    padding: 8px 12px !important;
    border: 1px solid var(--datatable-border) !important;
    border-radius: var(--radius) !important;
    background-color: var(--color-primary-02) !important;
    color: var(--color-primary-01) !important;
    font-family: var(--stack) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.fg-toolbar select:focus,
.ui-widget-header select:focus {
    outline: none !important;
    border-color: var(--color-primary-05) !important;
    box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.2) !important;
}

/* Input dans toutes les toolbars */
.fg-toolbar input[type="text"],
.ui-widget-header input[type="text"] {
    padding: 8px 12px !important;
    border: 1px solid var(--datatable-border) !important;
    border-radius: var(--radius) !important;
    background-color: var(--color-primary-02) !important;
    color: var(--color-primary-01) !important;
    font-family: var(--stack) !important;
    font-size: 13px !important;
    transition: all 0.3s ease !important;
    min-width: 180px !important;
}

.fg-toolbar input[type="text"]:focus,
.ui-widget-header input[type="text"]:focus {
    outline: none !important;
    border-color: var(--color-primary-05) !important;
    box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.2) !important;
}

/* Boutons de pagination dans la toolbar du bas */
.fg-toolbar .paging_full_numbers .paginate_button,
.fg-toolbar .paging_full_numbers .paginate_active,
.ui-widget-header .paging_full_numbers .paginate_button,
.ui-widget-header .paging_full_numbers .paginate_active {
    background-color: var(--color-primary-02) !important;
    color: var(--datatable-header-color) !important;
    border: 1px solid var(--datatable-border) !important;
    border-radius: var(--radius) !important;
    padding: 6px 12px !important;
    font-family: var(--stack) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    min-width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fg-toolbar .paging_full_numbers .paginate_button:hover,
.ui-widget-header .paging_full_numbers .paginate_button:hover {
    background-color: #e8e8e8 !important;
    border-color: var(--datatable-border) !important;
}

.fg-toolbar .paging_full_numbers .paginate_active,
.ui-widget-header .paging_full_numbers .paginate_active {
    background-color: var(--color-primary-05) !important;
    border-color: var(--color-primary-05) !important;
    color: var(--color-primary-02) !important;
    font-weight: 600 !important;
}

/* Responsive pour toutes les toolbars */
@media (max-width: 768px) {
    .fg-toolbar.ui-widget-header,
    .ui-widget-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 15px !important;
    }
    
    .fg-toolbar .dataTables_length,
    .fg-toolbar .dataTables_filter,
    .fg-toolbar .dataTables_info,
    .fg-toolbar .dataTables_paginate,
    .ui-widget-header .dataTables_length,
    .ui-widget-header .dataTables_filter,
    .ui-widget-header .dataTables_info,
    .ui-widget-header .dataTables_paginate {
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    .fg-toolbar input[type="text"],
    .ui-widget-header input[type="text"] {
        min-width: 120px !important;
        flex: 1 !important;
    }
    
    .fg-toolbar .paging_full_numbers,
    .ui-widget-header .paging_full_numbers {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

.ui-state-default, .ui-widget-content .ui-state-default {
    border: none !important;
}

/* Helper clearfix moderne */
.ui-helper-clearfix::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.ui-helper-clearfix {
    zoom: 1 !important; /* IE fix */
}

#show {
    z-index: 999 !important;
}