/* =============================================================
   MON PLUGIN DATATABLE — Feuille de style du widget
   Auteur : Olivier Berthonnière
   Compatible : DataTables 2.x + Extension Responsive 3.x
   ============================================================= */

/* ── Conteneur principal ──────────────────────────────────── */
.mon-datatable-wrapper {
    width: 100%;
    overflow-x: auto; /* Fallback scroll horizontal si le responsive ne suffit pas */
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur iOS */
}

/* ── Structure du tableau ─────────────────────────────────── */
.mon-datatable {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}

/* ── En-têtes ─────────────────────────────────────────────── */
.mon-datatable thead th {
    background-color: #1a1a2e; /* Surchargeable via le contrôle couleur Elementor */
    color: #ffffff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: none;
    /* Icônes de tri DataTables intégrées */
    cursor: pointer;
    user-select: none;
}

.mon-datatable thead th:hover {
    background-color: #2a2a4e;
}

/* ── Corps du tableau ─────────────────────────────────────── */
.mon-datatable tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
    color: #333333;
}

.mon-datatable tbody tr:nth-child(even) {
    background-color: #FFFFFF !important;
}

.mon-datatable tbody tr:hover {
    background-color: #FFFFFF !important;
    transition: background-color 0.15s ease;
}

/* ── Extension Responsive — icône expand sur mobile ──────── */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: #1a1a2e;
    border-color: #1a1a2e;
}

/* Ligne dépliée (détail mobile) */
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
    background-color: #5a5a8e;
    border-color: #5a5a8e;
}

/* Contenu du détail mobile */
table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
}

table.dataTable > tbody > tr.child ul.dtr-details li {
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 0;
}

table.dataTable > tbody > tr.child ul.dtr-details li:last-child {
    border-bottom: none;
}

/* ── Contrôles DataTables (wrapper) ──────────────────────── */
.dataTables_wrapper {
    font-size: 13px;
    color: #555555;
}

/* Barre de recherche */
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #1a1a2e;
    box-shadow: 0 0 0 2px rgba(26, 26, 46, 0.15);
}

/* Sélecteur nombre de résultats */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    cursor: pointer;
}

/* Compteur de résultats */
.dataTables_wrapper .dataTables_info {
    font-size: 12px;
    color: #888888;
    padding-top: 8px;
}

/* ── Pagination ───────────────────────────────────────────── */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f0f0f0 !important;
    border-color: #cccccc !important;
    color: #333333 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #1a1a2e !important;
    color: #ffffff !important;
    border-color: #1a1a2e !important;
    border-radius: 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #aaaaaa !important;
    cursor: not-allowed;
}

/* ── Responsive : ajustements mobiles ────────────────────── */
@media screen and (max-width: 767px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        text-align: left;
    }

    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
    }

    .dataTables_wrapper .dataTables_info {
        text-align: center;
    }
}