/*
 * ========================================================
 * [ÉTAT : FINAL] Date : 21-05-2026 19:50:00
 * FICHIER : reserve.css
 * RÔLE : Style de la gestion des réservations groupées (Administration)
 * Auteurs : Yvan Dubé & Gemini (IA Collaboratrice)
 * =========================================================
 */

.container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 0 15px;
}

/* ==========================================
   1. STRUCTURE DES CARTES (GROUPES)
   ========================================== */
.reservation-group {
    border: 2px solid var(--couleur-primaire, #7b1c8d);
    border-radius: var(--radius, 8px);
    margin-bottom: 25px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.reservation-group:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* ==========================================
   2. SECTIONS INTERNES (EN-TÊTE, CONTENU, PIED)
   ========================================== */
.group-header {
    background: #f8f0fb;
    padding: 12px 15px;
    border-bottom: 1px solid var(--couleur-primaire, #7b1c8d);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Style du numéro de réservation */
.num-commande {
    color: var(--couleur-primaire, #7b1c8d);
    font-size: 1.1em;
}

/* Alignement des infos du client à droite */
.client-info {
    text-align: right;
}

.item-in-group {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--couleur-bordure, #eee);
}

.item-in-group:last-child { 
    border-bottom: none; 
}

.item-info { 
    flex-grow: 1; 
    margin-left: 15px; 
}

.group-footer {
    background: #fdfdfd;
    padding: 10px 15px;
    border-top: 1px solid var(--couleur-bordure, #eee);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================
   3. BOUTONS ET ACTIONS
   ========================================== */
.item-actions { 
    display: flex; 
    gap: 8px;
    flex-shrink: 0; /* Ajout : Empêche le bouton "Annuler" de s'écraser */
}

/* Formats de base pour les boutons de cette page */
.item-actions button, .group-footer button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.2s;
    white-space: nowrap; /* Ajout : Garde le texte du bouton sur une ligne */
}

.item-actions button:hover, .group-footer button:hover {
    opacity: 0.85;
}

/* Conteneur pour les boutons du pied de page */
.footer-actions {
    display: flex;
    gap: 15px; 
    align-items: center;
}

/* On s'assure que les formulaires ne cassent pas l'alignement */
.footer-actions form {
    margin: 0;
    padding: 0;
}

/* Couleurs spécifiques aux boutons d'action */
.btn-complete { background-color: #27ae60 !important; color: white !important; }
.btn-annuler  { background-color: #e67e22 !important; color: white !important; }
.btn-rappel   { background-color: #3498db !important; color: white !important; padding: 8px 15px !important;}

/* ==========================================
   4. BADGES DE STATUT (CONTOUR MAUVE STANDARD)
   ========================================== */
.badge-etat {
    display: inline-block;
    padding: 3px 7px;
    font-size: 0.72rem;
    font-weight: bold;
    border-radius: 4px;
    margin-top: 6px;
    border: 2px solid var(--couleur-primaire, #7b1c8d); /* Contour mauve global */
}
.badge-a-commander { background-color: #fffaf0; color: #e67e22; }
.badge-en-commande { background-color: #f4fafd; color: #3498db; }
.badge-a-ramasser  { background-color: #f5fcf7; color: #27ae60; }

.badge-a-mettre-de-cote {
    background-color: #e6f4ea; /* Fond vert pâle */
    color: #137333;           /* Texte vert foncé */
    border: 1px solid #137333;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
}
/* ==========================================
   5. ADAPTATION MOBILE
   ========================================== */
@media (max-width: 768px) {
    .group-header, .group-footer {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .item-in-group {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .item-info {
        margin-left: 0;
    }

    .item-actions {
        width: 100%;
        justify-content: center;
    }
    .footer-actions {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    
    .footer-actions form, .footer-actions button {
        width: 100%; 
    }
}