:root {
    --flower-image-bg: #f3f3f3;

    /*
     * Dimensions de la matrice.
     *
     * Les trois premières colonnes ont une largeur strictement fixe.
     * Les colonnes des membres ont au minimum la largeur indiquée.
     */
    --matrix-image-size: 75px;
    --matrix-image-column-width: 90px;
    --matrix-name-column-width: 300px;
    --matrix-rarity-column-width: 80px;
    --matrix-member-column-min-width: 50px;

    --matrix-user-column-a: rgba(0, 0, 0, 0.015);
    --matrix-user-column-b: rgba(0, 0, 0, 0.055);

    --matrix-user-owned-a: rgba(25, 135, 84, 0.16);
    --matrix-user-owned-b: rgba(25, 135, 84, 0.25);
}

body {
    background: #f7f7f8;
}

.flower-card {
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.flower-card:hover {
    transform: translateY(-2px);
}

.flower-card.owned {
    border-color: var(--bs-success);
}

/* Taille initiale du catalogue. */
.flower-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--flower-image-bg);
}

.flower-placeholder {
    display: grid;
    width: 100%;
    aspect-ratio: 1 / 1;
    place-items: center;
    background: var(--flower-image-bg);
    color: #6c757d;
    font-size: 2rem;
    font-weight: 700;
}

.flower-placeholder-large {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

/*
 * DataTables ne gère plus lui-même le scroll horizontal.
 * Le conteneur de la table généré par son intégration Bootstrap
 * devient la zone de défilement. Les contrôles de recherche et
 * de pagination restent donc en dehors de cette zone.
 */
div.dataTables_wrapper div.dt-row {
    margin-right: 0;
    margin-left: 0;
}

div.dataTables_wrapper div.dt-row > div {
    max-height: calc(100vh - 300px);
    padding-right: 0;
    padding-left: 0;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
}

/*
 * Important :
 * - width:max-content empêche Bootstrap/DataTables d'étirer le tableau
 *   à 100 % de la page ;
 * - table-layout:fixed oblige le navigateur à respecter les largeurs
 *   déclarées dans le colgroup et sur les cellules.
 */

/* Colonnes membres 1, 3, 5... */
#guildMatrix thead th:nth-child(2n + 4),
#guildMatrix tbody td:nth-child(2n + 4) {
    box-shadow:
        inset 0 0 0 9999px
        var(--matrix-user-column-a);
}

/* Colonnes membres 2, 4, 6... */
#guildMatrix thead th:nth-child(2n + 5),
#guildMatrix tbody td:nth-child(2n + 5) {
    box-shadow:
        inset 0 0 0 9999px
        var(--matrix-user-column-b);
}

#guildMatrix.matrix-table {
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    table-layout: fixed !important;
}

#guildMatrix.matrix-table th,
#guildMatrix.matrix-table td {
    box-sizing: border-box;
    white-space: nowrap;
    vertical-align: middle;
}

/* Colonne image : largeur strictement fixe. */
#guildMatrix .matrix-col-image,
#guildMatrix .matrix-image-heading,
#guildMatrix .matrix-image-cell {
    width: var(--matrix-image-column-width) !important;
    min-width: var(--matrix-image-column-width) !important;
    max-width: var(--matrix-image-column-width) !important;
}

/* Colonne nom : largeur strictement fixe. */
#guildMatrix .matrix-col-name,
#guildMatrix .matrix-name-heading,
#guildMatrix .matrix-name-cell {
    width: var(--matrix-name-column-width) !important;
    min-width: var(--matrix-name-column-width) !important;
    max-width: var(--matrix-name-column-width) !important;
}

/* Colonne rareté + points : largeur strictement fixe. */
#guildMatrix .matrix-col-rarity,
#guildMatrix .matrix-rarity-heading,
#guildMatrix .matrix-rarity-cell {
    width: var(--matrix-rarity-column-width) !important;
    min-width: var(--matrix-rarity-column-width) !important;
    max-width: var(--matrix-rarity-column-width) !important;
}

/*
 * Colonnes membres :
 * la largeur minimale est imposée à chaque colonne.
 * Comme le tableau utilise width:max-content, chaque membre conserve
 * au moins cette largeur et la zone défile horizontalement si nécessaire.
 */
#guildMatrix .matrix-col-member,
#guildMatrix .member-heading,
#guildMatrix .matrix-owned-cell {
    width: var(--matrix-member-column-min-width) !important;
    min-width: var(--matrix-member-column-min-width) !important;
}

.matrix-image-cell {
    padding: 0.25rem !important;
}

.matrix-flower-image,
.matrix-flower-placeholder {
    display: inline-grid;
    width: var(--matrix-image-size);
    height: var(--matrix-image-size);
    object-fit: contain;
    place-items: center;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.35rem;
    background: var(--flower-image-bg);
}

.matrix-flower-placeholder {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
}

.matrix-flower-name-link {
    display: block;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.matrix-flower-name-link:hover .matrix-flower-name {
    text-decoration: underline;
}

.matrix-flower-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matrix-rarity-cell {
    font-weight: 600;
}

.matrix-owned-cell {
    padding-right: 0.2rem !important;
    padding-left: 0.2rem !important;
    font-size: 1.1rem;
    font-weight: 700;
}

.member-heading {
    height: 145px;
    padding: 0.35rem !important;
    overflow: hidden;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/*
 * Colonnes figées avec position:sticky.
 * Cette méthode évite les tables clonées de FixedColumns, lesquelles
 * recalculaient et étiraient les largeurs.
 */
#guildMatrix .matrix-image-heading,
#guildMatrix .matrix-image-cell {
    position: sticky;
    left: 0;
    z-index: 4;
    background-color: var(--bs-table-bg);
}

#guildMatrix .matrix-name-heading,
#guildMatrix .matrix-name-cell {
    position: sticky;
    left: var(--matrix-image-column-width);
    z-index: 4;
    background-color: var(--bs-table-bg);
}

#guildMatrix .matrix-rarity-heading,
#guildMatrix .matrix-rarity-cell {
    position: sticky;
    left: calc(
        var(--matrix-image-column-width)
        + var(--matrix-name-column-width)
    );
    z-index: 4;
    background-color: var(--bs-table-bg);
}

/* En-tête également figé verticalement dans la zone de défilement. */
#guildMatrix thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--bs-body-bg);
}

/* Priorité maximale aux trois cellules situées en haut à gauche. */
#guildMatrix thead .matrix-image-heading,
#guildMatrix thead .matrix-name-heading,
#guildMatrix thead .matrix-rarity-heading {
    z-index: 7;
}

/* Séparation visuelle entre les colonnes fixes et les membres. */
#guildMatrix .matrix-rarity-heading,
#guildMatrix .matrix-rarity-cell {
    border-right: 2px solid var(--bs-border-color);
    box-shadow: 4px 0 5px -5px rgba(0, 0, 0, 0.5);
}

/* DataTables 1.13 avec intégration Bootstrap 5. */
div.dataTables_wrapper div.dataTables_length select {
    display: inline-block;
    width: auto;
}

div.dataTables_wrapper div.dataTables_filter input {
    display: inline-block;
    width: auto;
    margin-left: 0.5rem;
}

code {
    word-break: break-all;
}

@media (max-width: 575.98px) {
    .flower-card .card-body {
        padding: 0.75rem !important;
    }

    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter {
        text-align: left;
    }

    div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
        margin: 0.4rem 0 0;
    }
}