/**
 * Habillage des DataTables de l'application (sprint DT-2, refonte « Apparence »
 * du 30/09/2026). Ne change aucun comportement JS : uniquement la couche CSS
 * au-dessus de datatables.min.css. Consomme les jetons d'educom-ui.css
 * (surfaces clair / sombre) et de theme.css (marque, rayons) - avec replis
 * pour rester lisible si ces feuilles manquent.
 */

.dataTables_wrapper {
    font-family: var(--edu-font-family, inherit);
    color: var(--edu-text, inherit);
}
.dataTables_wrapper .row { row-gap: .5rem; }

/* Barre du haut : longueur de page + export + recherche */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--edu-text-muted, #6E6E73);
    font-size: .8125rem;
    font-weight: 500;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
.dt-column-filter {
    min-height: 36px;
    border: 1px solid var(--edu-field-border, color-mix(in srgb, var(--edu-color-primary) 12%, #fff));
    border-radius: var(--edu-radius-md, 10px);
    padding: 6px 12px;
    font-size: 13px;
    color: var(--edu-text, #1D1D1F);
    background-color: var(--edu-field-bg, #F5F5F7);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.dataTables_wrapper .dataTables_length select { padding-right: 28px; }
.dataTables_wrapper .dataTables_filter input {
    min-width: 240px;
    margin-left: 0;
    padding-left: 34px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: 11px center;
    background-size: 15px;
    border-radius: 999px;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.dt-column-filter:focus {
    outline: none;
    background-color: var(--edu-surface, #fff);
    border-color: var(--edu-color-primary, var(--edu-color-primary));
    box-shadow: 0 0 0 4px rgba(var(--edu-color-primary-rgb, 10, 132, 255), .2);
}
.dt-column-filter { min-height: 32px; border-radius: 999px; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Boutons d'export (Copy/CSV/Excel/PDF/Print/ColVis) : contrôle groupé discret.
   (!important : datatables.min.css stylise .dt-button avec une spécificité supérieure) */
.dt-buttons {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
    padding: 3px;
    border-radius: calc(var(--edu-radius-md, 10px) + 3px);
    background: var(--edu-fill, rgba(118, 118, 128, .12));
}
.dt-buttons .btn,
.dt-buttons .dt-button {
    min-height: 30px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--edu-text, #1D1D1F) !important;
    border-radius: var(--edu-radius-md, 10px) !important;
    padding: 4px 12px !important;
    font-size: 12.5px !important;
    font-weight: 500;
    box-shadow: none !important;
    transition: background .15s ease, box-shadow .15s ease;
}
.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover,
.dt-buttons .dt-button:focus-visible {
    background: var(--edu-surface, #fff) !important;
    color: var(--edu-text, #1D1D1F) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .06) !important;
}
div.dt-button-collection {
    background: var(--edu-surface-elevated, #fff) !important;
    border: 1px solid var(--edu-border, rgba(0, 0, 0, .08)) !important;
    border-radius: var(--edu-radius-lg, 16px) !important;
    box-shadow: var(--edu-shadow-3, 0 12px 32px rgba(0, 0, 0, .15)) !important;
    padding: 6px !important;
}
div.dt-button-collection .dt-button { border-radius: calc(var(--edu-radius-md, 10px) - 2px) !important; color: var(--edu-text, #1D1D1F) !important; }
div.dt-button-collection .dt-button.dt-button-active { background: rgba(var(--edu-color-primary-rgb, 10, 132, 255), .12) !important; }

/* Tableau */
table.dataTable {
    border-collapse: separate !important; /* datatables.min.css force collapse ; séparé = coins arrondis de l'en-tête */
    border-spacing: 0;
    color: var(--edu-text, inherit);
}
table.dataTable thead th,
table.dataTable thead td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--edu-border, color-mix(in srgb, var(--edu-color-primary) 8%, #fff)) !important; /* idem */
    background-color: var(--edu-fill-2, #fafbfd);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--edu-text-muted, #6E6E73);
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}
table.dataTable thead tr:first-child th:first-child { border-top-left-radius: var(--edu-radius-sm, 8px); }
table.dataTable thead tr:first-child th:last-child { border-top-right-radius: var(--edu-radius-sm, 8px); }
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_desc::after { opacity: .25; }
table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::before { opacity: .8; color: var(--edu-color-primary, var(--edu-color-primary)); }

table.dataTable thead th.col-checkbox,
table.dataTable tbody td.col-checkbox {
    text-align: center;
    width: 36px;
}

table.dataTable tbody td {
    padding: 11px 12px;
    vertical-align: middle;
    font-size: 13.5px;
    border-top: 0;
    border-bottom: 1px solid var(--edu-border, #f0f1f4);
    background-color: transparent;
}
table.dataTable tbody tr { background-color: transparent; transition: background-color .15s ease; }
table.dataTable.table-striped tbody tr:nth-of-type(odd),
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd { background-color: var(--edu-fill-2, #fafbfd); }
table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; }
table.dataTable tbody tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover { background-color: rgba(var(--edu-color-primary-rgb, 10, 132, 255), .05); }
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected > * { background-color: rgba(var(--edu-color-primary-rgb, 10, 132, 255), .10) !important; box-shadow: none !important; color: var(--edu-text, inherit) !important; } /* dataTables.select pose une couleur pleine en !important */
table.dataTable tbody td.dataTables_empty { padding: 36px 12px; color: var(--edu-text-muted, #6E6E73); text-align: center; }
table.dataTable.no-footer { border-bottom: 0 !important; } /* datatables.min.css ajoute une bordure basse noire */
table.dataTable img { border-radius: 8px; }

/* Cases à cocher */
input.row-select,
.select-all-rows {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--edu-color-primary, var(--edu-color-primary));
}

/* Boutons d'action par ligne (edit/toggle/delete) : petits carrés arrondis.
   Limité aux enfants DIRECTS de .table-actions (triggers de ligne) : un sélecteur
   descendant écrasait les vrais boutons texte des modales imbriquées dans la
   cellule (voir historique). min-width/min-height plutôt que tailles fixes. */
.table-actions > .btn,
.table-actions > button {
    border-radius: calc(var(--edu-radius-md, 10px) - 3px);
    min-width: 32px;
    min-height: 32px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

/* Pastilles de statut (Bootstrap 4 hérité) - teintées, couleurs sémantiques constantes */
.badge-pill { padding: .38em .85em; font-weight: 600; font-size: 11.5px; border-radius: 999px; }

/* Barre d'actions groupées (x-ui.bulk-actions) */
.bulk-actions-bar {
    background: var(--edu-fill-2, #f8f9fc);
    border: 1px solid var(--edu-border, color-mix(in srgb, var(--edu-color-primary) 8%, #fff));
    border-radius: var(--edu-radius-md, 10px);
    padding: 8px 12px;
}
.bulk-actions-bar .btn { border-radius: calc(var(--edu-radius-md, 10px) - 2px); }

/* Informations + pagination */
.dataTables_wrapper .dataTables_info { color: var(--edu-text-muted, #6E6E73); font-size: .8125rem; padding-top: 1rem; }
.dataTables_wrapper .dataTables_paginate { padding-top: .75rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px;
    height: 34px;
    display: inline-flex !important; /* datatables.min.css : inline-block !important */
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: calc(var(--edu-radius-md, 10px) - 2px) !important;
    background: transparent !important;
    color: var(--edu-text, #1D1D1F) !important;
    font-size: .8125rem;
    font-weight: 500;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: var(--edu-fill, rgba(118, 118, 128, .12)) !important;
    color: var(--edu-text, #1D1D1F) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--edu-color-primary, var(--edu-color-primary)) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(var(--edu-color-primary-rgb, 10, 132, 255), .3);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--edu-text-subtle, #8E8E93) !important; opacity: .6; }
.dataTables_wrapper .dataTables_processing {
    background: var(--edu-surface-elevated, #fff) !important;
    color: var(--edu-text, #1D1D1F);
    border: 1px solid var(--edu-border, rgba(0, 0, 0, .08));
    border-radius: var(--edu-radius-lg, 16px);
    box-shadow: var(--edu-shadow-3, 0 12px 32px rgba(0, 0, 0, .15));
}
.dataTables_scrollHead, .dataTables_scrollBody { border-color: var(--edu-border, #eee) !important; }

@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
    .dataTables_wrapper .dataTables_filter label { width: 100%; }
}