/* ========================================================================
   MODULE MODS - Design CLAAS Premium (A1/B1/D2/E1)
   ======================================================================== */

/* Carte principale */
.mods-form,
.mods-hero,
.mod-view,
.mod-card,
.mods-filters {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    margin-bottom: 25px;
}

/* Titre */
.mods-form h2,
.mods-hero h2,
.mod-view h2 {
    font-size: 26px;
    margin-bottom: 10px;
}

/* Texte léger */
.muted {
    color: #555;
    font-size: 14px;
}

/* Formulaire */
.mods-form-inner,
.add-mod-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Champs */
.field-group {
    display: flex;
    flex-direction: column;
}

.field-group label {
    font-weight: 600;
    margin-bottom: 6px;
}

.field-group input[type="text"],
.field-group input[type="url"],
.field-group input[type="file"],
.field-group textarea,
.field-group select {
    padding: 10px;
    border: 1px solid #bbb;
    border-radius: 8px;
    font-size: 15px;
    width: 100%;
}

/* Deux colonnes */
.field-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.field-row > div {
    flex: 1;
    min-width: 200px;
}

/* Boutons */
.btn-primary {
    background: #8BFF2B;
    color: #000;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary:hover {
    filter: brightness(0.92);
}

.btn-secondary {
    background: #111;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-block;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-secondary:hover {
    background: #222;
}

/* Mini boutons */
.btn-small {
    padding: 6px 12px;
    font-size: 14px;
}

/* Section des actions */
.mods-form-actions,
.form-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Alertes */
.alert {
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 15px;
}

.alert.success {
    background: #dfffe0;
    color: #145c1a;
    border: 1px solid #9ae89d;
}

.alert.error {
    background: #ffe0e0;
    color: #7a1010;
    border: 1px solid #ff9d9d;
}

/* -------------------------------
   LISTING DES MODS (index.php)
   ------------------------------- */

.mods-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mods-hero-actions {
    display: flex;
    gap: 10px;
}

.mods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.mod-card {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.mod-thumb {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
}

.mod-body h3 {
    margin: 10px 0 5px;
    font-size: 18px;
}

.mod-body p {
    font-size: 14px;
    color: #444;
}

/* Pied de carte */
.mod-footer {
    margin-top: auto;
}

.mod-footer .btn {
    width: 100%;
}

/* -------------------------------
   PAGE VIEW (fiche mod)
   ------------------------------- */

.view-main-image {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 20px;
}

.view-gallery {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.gallery-thumb {
    width: 160px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

/* Description */
.mod-desc {
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.6;
}

/* Infos */
.mod-info {
    margin-bottom: 20px;
    padding-left: 20px;
}
.mod-info li {
    margin-bottom: 5px;
}

/* Ajout image supplémentaire */
.extra-image-item {
    margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .mods-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .mods-form-actions,
    .form-actions {
        flex-direction: column;
    }
}

.admin-nav-buttons {
    display: flex;
    gap: 15px;
    margin: 15px 0 25px;
}

.btn-nav {
    padding: 10px 18px;
    background: #111;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: .2s;
}

.btn-nav:hover {
    background: var(--gold);
    color: #111;
}

/* -------------------------
   MODE NUIT – MODULE MODS
--------------------------*/
body.dark .stats-card,
body.dark .mods-table,
body.dark .mods-card,
body.dark .mods-filters,
body.dark .tile,
body.dark .panel {
    background: #2b2b2b !important;
    border-color: #3a3a3a !important;
}

body.dark table th {
    background: #333 !important;
    color: #ddd !important;
}

body.dark table td {
    background: #2b2b2b !important;
    color: #f0f0f0 !important;
    border-bottom: 1px solid #3a3a3a !important;
}

body.dark input,
body.dark select {
    background: #3a3a3a !important;
    border-color: #555 !important;
    color: #eee !important;
}

/* Boutons */
body.dark .btn-green {
    background: #7CFF3B !important;
    color: #000;
}