/**
 * Styles pour afficher DataTables en grille (themes.php)
 * Similaire à page-categories-recettes-datatables-custom.css
 */

/* ============================================
   MASQUER ÉLÉMENTS DATATABLES PAR DÉFAUT
============================================ */

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
    display: none;
}

/* Cacher le header de table */
#themesTable thead,
#ingredientsTable thead,
#ustensilesTable thead {
    display: none !important;
}

.datatable-hidden-header {
    display: none !important;
}

/* ============================================
   STRUCTURE TABLE → GRILLE
============================================ */

/* Conteneur DataTables */
.dataTables_wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--body-font);
}

/* Table sans bordures */
.dataTables_wrapper table,
.dataTables_wrapper table td {
    border: none !important;
    background: transparent !important;
}

#themesTable,
#ingredientsTable,
#ustensilesTable {
    border-collapse: separate;
    border-spacing: 0;
    width: 100% !important;
    background: transparent;
}

#themesTable td,
#themesTable th,
#ingredientsTable td,
#ingredientsTable th,
#ustensilesTable td,
#ustensilesTable th {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Transformer tbody en grille */
/* UNIFORMISATION : 3 colonnes pour thèmes, ingrédients ET ustensiles */
#themesTable tbody.themes-datatable-grid,
#ingredientsTable tbody.themes-datatable-grid,
#ustensilesTable tbody.themes-datatable-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

#themesTable tbody tr,
#ingredientsTable tbody tr,
#ustensilesTable tbody tr {
    display: flex;
    height: 100%;
    background: transparent;
    border: none;
}

#themesTable tbody tr td,
#ingredientsTable tbody tr td,
#ustensilesTable tbody tr td {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Cacher les colonnes de données (nom, nb_recettes, popularité) */
#themesTable tbody td:not(:last-child),
#ingredientsTable tbody td:not(:last-child),
#ustensilesTable tbody td:not(:last-child) {
    display: none !important;
}

/* Seule la dernière colonne (carte HTML) est visible */
#themesTable tbody td:last-child,
#ingredientsTable tbody td:last-child,
#ustensilesTable tbody td:last-child {
    display: block !important;
    padding: 0;
    border: none;
}

/* Uniformiser hauteur des cartes */
#themesTable .theme-card,
#ingredientsTable .theme-card,
#ustensilesTable .theme-card {
    width: 100%;
    margin: 0;
    height: 100%;
}

/* ============================================
   PAGINATION DATATABLES
   (Styles hérités de datatables-custom.css)
============================================ */

/* Les styles de pagination sont dans datatables-custom.css */

/* ============================================
   RESPONSIVE - GRILLE UNIFIÉE
   Identique pour thèmes, ingrédients et ustensiles
============================================ */

/* Tablettes (769px - 1024px) : 3 colonnes */
@media (max-width: 1024px) and (min-width: 769px) {
    #themesTable tbody.themes-datatable-grid,
    #ingredientsTable tbody.themes-datatable-grid,
    #ustensilesTable tbody.themes-datatable-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

/* Tablettes portrait et grands mobiles (321px - 768px) : 2 colonnes */
@media (max-width: 768px) and (min-width: 321px) {
    #themesTable tbody.themes-datatable-grid,
    #ingredientsTable tbody.themes-datatable-grid,
    #ustensilesTable tbody.themes-datatable-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Très petits écrans (≤ 320px) : 1 colonne */
@media (max-width: 320px) {
    #themesTable tbody.themes-datatable-grid,
    #ingredientsTable tbody.themes-datatable-grid,
    #ustensilesTable tbody.themes-datatable-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}