/* SecretGift V8.8 — cartes compactes et colorées sur tout le site */

/* =========================================================
   BASE COMPACTE COMMUNE
   ========================================================= */
:root {
    --sg-card-radius: 12px;
    --sg-card-gap: 9px;
    --sg-card-padding: 12px;
    --sg-card-text: #241f19;
    --sg-card-muted: #746a5e;
}

.card,
.form-card,
.stat-card,
.order-card,
.gift-card,
.mission-card,
.delivery-card,
.challenge-card,
.recipient-card,
.payment-card,
.courier-card,
.admin-card,
.branding-upload-card,
.answer-attempt {
    position: relative;
    min-width: 0;
    padding: var(--sg-card-padding) !important;
    border-radius: var(--sg-card-radius) !important;
    box-shadow: 0 5px 14px rgba(39, 31, 22, .08);
    overflow: hidden;
}

.card h1,
.card h2,
.card h3,
.form-card h1,
.form-card h2,
.form-card h3 {
    margin-top: 0 !important;
}

.card p:last-child,
.form-card p:last-child {
    margin-bottom: 0 !important;
}

.dashboard-grid,
.stats-grid,
.split-grid,
.settings-grid,
.admins-grid,
.gifts-grid,
.orders-grid,
.mission-grid,
.delivery-grid,
.catalog-grid,
.card-grid {
    gap: var(--sg-card-gap) !important;
}

.top-space {
    margin-top: 10px !important;
}

.alert {
    padding: 9px 11px !important;
    border-radius: 10px !important;
}

.detail-list > div,
.timeline-item,
.answer-row {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.btn,
button,
input[type="submit"],
input[type="button"] {
    min-height: 38px !important;
    padding: 8px 11px !important;
    border-radius: 9px !important;
    font-size: .86rem !important;
}

input,
select,
textarea {
    min-height: 39px !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
}

.badge,
.answer-result,
.delivery-status-badge {
    min-height: 25px !important;
    padding: 4px 8px !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
}

/* =========================================================
   COULEURS GÉNÉRIQUES DÉDUITES DU STATUT
   Toute la carte est colorée selon son badge ou son contenu.
   ========================================================= */

/* VERT — terminé, livré, confirmé, réussi, approuvé */
.card:has(.status-completed),
.card:has(.status-delivered),
.card:has(.status-success),
.card:has(.status-approved),
.card:has(.status-paid),
.card:has(.status-active),
.card:has(.status-recipient_confirmed),
.card:has(.is-correct),
.card:has(.alert.success),
.form-card:has(.alert.success),
.order-card:has(.status-delivered),
.mission-card-group--success {
    --state-bg: #bce8cc;
    --state-border: #24874f;
    --state-text: #0c572f;
    --state-muted: #377356;
    background: var(--state-bg) !important;
    border: 1px solid var(--state-border) !important;
    border-left: 6px solid var(--state-border) !important;
    color: var(--state-text) !important;
}

/* ORANGE — en cours, préparation, collecte, livraison */
.card:has(.status-processing),
.card:has(.status-preparing),
.card:has(.status-in_delivery),
.card:has(.status-in-progress),
.card:has(.status-heading_to_pickup),
.card:has(.status-heading_destination),
.card:has(.status-pickup_courier_confirmed),
.card:has(.status-picked_up),
.card:has(.status-pending_payment),
.card:has(.status-pending),
.order-card:has(.status-preparing),
.mission-card-group--progress {
    --state-bg: #ffdda5;
    --state-border: #cf8118;
    --state-text: #693a00;
    --state-muted: #885d1c;
    background: var(--state-bg) !important;
    border: 1px solid var(--state-border) !important;
    border-left: 6px solid var(--state-border) !important;
    color: var(--state-text) !important;
}

/* VIOLET — assigné, attente d’action */
.card:has(.status-assigned),
.card:has(.status-pending_assignment),
.card:has(.status-courier_assigned),
.card:has(.status-mission_assigned),
.card:has(.status-waiting),
.mission-card-group--assigned {
    --state-bg: #e3d7fa;
    --state-border: #7d5fc3;
    --state-text: #39206e;
    --state-muted: #695390;
    background: var(--state-bg) !important;
    border: 1px solid var(--state-border) !important;
    border-left: 6px solid var(--state-border) !important;
    color: var(--state-text) !important;
}

/* BLEU — accepté, arrivé, validation, défi */
.card:has(.status-accepted),
.card:has(.status-mission_accepted),
.card:has(.status-arrived),
.card:has(.status-courier_arrived),
.card:has(.status-challenge_ready),
.card:has(.status-challenge_in_progress),
.card:has(.status-final_validation_pending),
.mission-card-group--accepted,
.mission-card-group--verification {
    --state-bg: #d7e3f8;
    --state-border: #4c70bd;
    --state-text: #244181;
    --state-muted: #5c6d9d;
    background: var(--state-bg) !important;
    border: 1px solid var(--state-border) !important;
    border-left: 6px solid var(--state-border) !important;
    color: var(--state-text) !important;
}

/* BRUN — retour requis, retour en cours, retourné */
.card:has(.status-return_required),
.card:has(.status-returning),
.card:has(.status-return_arrived_office),
.card:has(.status-return_courier_confirmed),
.card:has(.status-returned),
.order-card:has(.status-returned),
.mission-card-group--returning,
.mission-card-group--returned {
    --state-bg: #e7d3b5;
    --state-border: #956328;
    --state-text: #543714;
    --state-muted: #766044;
    background: var(--state-bg) !important;
    border: 1px solid var(--state-border) !important;
    border-left: 6px solid var(--state-border) !important;
    color: var(--state-text) !important;
}

/* ROUGE — refusé, annulé, incident, erreur, échec */
.card:has(.status-refused),
.card:has(.status-cancelled),
.card:has(.status-disabled),
.card:has(.status-suspended),
.card:has(.status-incident_reported),
.card:has(.status-challenge_failed),
.card:has(.is-wrong),
.card:has(.alert.danger),
.form-card:has(.alert.danger),
.order-card:has(.status-cancelled),
.mission-card-group--danger {
    --state-bg: #f2cbd1;
    --state-border: #aa3e4d;
    --state-text: #761b29;
    --state-muted: #92515b;
    background: var(--state-bg) !important;
    border: 1px solid var(--state-border) !important;
    border-left: 6px solid var(--state-border) !important;
    color: var(--state-text) !important;
}

/* Les textes héritent de la couleur de la carte */
.card[style*="--state-bg"] h1,
.card[style*="--state-bg"] h2,
.card[style*="--state-bg"] h3,
.card[style*="--state-bg"] strong,
.card:has(.status-completed) h1,
.card:has(.status-completed) h2,
.card:has(.status-completed) h3,
.card:has(.status-delivered) h1,
.card:has(.status-delivered) h2,
.card:has(.status-delivered) h3,
.card:has(.status-returned) h1,
.card:has(.status-returned) h2,
.card:has(.status-returned) h3,
.card:has(.alert.success) h1,
.card:has(.alert.success) h2,
.card:has(.alert.success) h3,
.card:has(.alert.danger) h1,
.card:has(.alert.danger) h2,
.card:has(.alert.danger) h3 {
    color: var(--state-text, var(--sg-card-text)) !important;
}

.card:has(.status-completed) p,
.card:has(.status-delivered) p,
.card:has(.status-returned) p,
.card:has(.alert.success) p,
.card:has(.alert.danger) p,
.card:has(.status-processing) p,
.card:has(.status-preparing) p,
.card:has(.status-assigned) p,
.card:has(.status-accepted) p {
    color: var(--state-muted, var(--sg-card-muted)) !important;
}

/* Les badges restent lisibles dans les cartes colorées */
.card:has(.badge) .badge,
.card:has(.delivery-status-badge) .delivery-status-badge {
    background: rgba(255,255,255,.72) !important;
    color: inherit !important;
    border: 1px solid rgba(0,0,0,.10) !important;
}

/* =========================================================
   ESPACE CLIENT
   ========================================================= */
.client-dashboard .card,
.client-orders .card,
.client-order .card,
.client-track .card,
body:has(a[href*="/client/"]) .order-card {
    min-height: 0 !important;
}

.catalog-grid,
.gifts-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.gift-card img,
.catalog-card img {
    max-height: 160px !important;
    object-fit: contain;
}

.order-card {
    display: grid;
    gap: 7px;
}

/* =========================================================
   ESPACE LIVREUR
   ========================================================= */
body:has(a[href*="/courier/"]) .mission-card,
body:has(a[href*="/courier/"]) .card {
    border-radius: 11px !important;
}

.mission-actions,
.camera-controls,
.responsive-actions {
    gap: 7px !important;
}

/* Étape active : bleu */
.card:has(h2 + .alert),
.card:has(.record-timer) {
    background: #e0e8f8 !important;
    border-left: 6px solid #5872bd !important;
}

/* =========================================================
   DESTINATAIRE / RECEVEUR
   ========================================================= */
body:has(form[action*="challenge"]) .form-card,
body:has(.answer-attempts) .answer-attempt,
.recipient-card,
.challenge-card {
    border-radius: 12px !important;
}

.answer-attempt:has(.is-correct):not(:has(.is-wrong)) {
    background: #c8ecd5 !important;
    border: 1px solid #2d8d56 !important;
    border-left: 6px solid #2d8d56 !important;
}

.answer-attempt:has(.is-wrong) {
    background: #f4d2d7 !important;
    border: 1px solid #ae4655 !important;
    border-left: 6px solid #ae4655 !important;
}

.answer-row {
    border-radius: 9px;
}

.answer-row:has(.is-correct) {
    background: rgba(255,255,255,.50);
}

.answer-row:has(.is-wrong) {
    background: rgba(255,255,255,.45);
}

/* =========================================================
   ACTIONS ET FORMULAIRES
   ========================================================= */
.card:has(button.btn-gold),
.form-card:has(button.btn-gold) {
    border-color: #c8a75e;
}

.card:has(.btn-danger),
.form-card:has(.btn-danger) {
    border-color: #a84250;
}

details {
    border-radius: 10px;
}

details > summary {
    min-height: 36px;
    padding: 7px 9px;
    border-radius: 9px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 1200px) {
    .stats-grid,
    .dashboard-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .dashboard-grid,
    .stats-grid,
    .split-grid,
    .settings-grid,
    .admins-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    :root {
        --sg-card-padding: 10px;
        --sg-card-gap: 7px;
    }

    .dashboard-grid,
    .stats-grid,
    .split-grid,
    .settings-grid,
    .admins-grid,
    .gifts-grid,
    .orders-grid,
    .catalog-grid {
        grid-template-columns: 1fr !important;
    }

    .card,
    .form-card,
    .stat-card,
    .order-card,
    .gift-card,
    .mission-card,
    .challenge-card,
    .recipient-card {
        border-radius: 10px !important;
    }

    .responsive-actions,
    .mission-actions,
    .camera-controls {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .responsive-actions .btn,
    .mission-actions .btn,
    .camera-controls .btn {
        width: 100% !important;
    }
}