/* SecretGift V8.9.1 — livraisons en cartes compactes et colorées */

/* Couleurs selon l'état */
.delivery-status--assigned,
.delivery-status--courier_assigned {
    --delivery-bg: #e4d8fa;
    --delivery-border: #795cc0;
    --delivery-text: #39206d;
    --delivery-muted: #695390;
}

.delivery-status--accepted,
.delivery-status--heading_to_pickup,
.delivery-status--pickup_courier_confirmed,
.delivery-status--picked_up,
.delivery-status--in_transit,
.delivery-status--ready_to_deliver,
.delivery-status--recipient_challenge,
.delivery-status--delivery_code_ready {
    --delivery-bg: #ffdda4;
    --delivery-border: #cf8118;
    --delivery-text: #693a00;
    --delivery-muted: #885d1c;
}

.delivery-status--completed,
.delivery-status--delivered {
    --delivery-bg: #b9e7ca;
    --delivery-border: #23864d;
    --delivery-text: #0b572e;
    --delivery-muted: #357252;
}

.delivery-status--return_required,
.delivery-status--returning,
.delivery-status--return_arrived_office,
.delivery-status--return_courier_confirmed,
.delivery-status--returned {
    --delivery-bg: #e1d0af;
    --delivery-border: #856225;
    --delivery-text: #4b3310;
    --delivery-muted: #725b36;
}

.delivery-status--rejected,
.delivery-status--cancelled,
.delivery-status--failed,
.delivery-status--incident {
    --delivery-bg: #f3cdd3;
    --delivery-border: #ac4150;
    --delivery-text: #771d2a;
    --delivery-muted: #94515c;
}

/* Fiche détaillée */
.delivery-detail-page {
    --delivery-bg: #e8e3dc;
    --delivery-border: #aa9c88;
    --delivery-text: #342d25;
    --delivery-muted: #70665a;
    display: grid;
    gap: 9px;
}

.delivery-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 90px;
    padding: 12px 14px;
    border: 1px solid var(--delivery-border);
    border-left: 8px solid var(--delivery-border);
    border-radius: 12px;
    background: var(--delivery-bg);
    color: var(--delivery-text);
    box-shadow: 0 5px 13px rgba(35,28,20,.08);
}

.delivery-detail-hero h1 {
    margin: 6px 0 2px;
    color: var(--delivery-text);
    font-size: 1.55rem;
    line-height: 1.05;
}

.delivery-detail-hero p {
    margin: 0;
    color: var(--delivery-muted);
    font-size: .8rem;
}

.delivery-detail-hero .back-link {
    color: var(--delivery-text);
    font-size: .72rem;
}

.delivery-status-badge {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.74);
    color: var(--delivery-text);
    border: 1px solid rgba(0,0,0,.08);
    font-size: .7rem;
    font-weight: 950;
}

.delivery-detail-page > .delivery-progress {
    height: 8px !important;
    margin: 0 !important;
    border-radius: 999px;
    background: rgba(0,0,0,.08);
    overflow: hidden;
}

.delivery-detail-page > .delivery-progress span {
    display: block;
    height: 100%;
    background: var(--delivery-border) !important;
}

.delivery-info-grid {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(250px,.7fr);
    gap: 9px;
}

.delivery-info-card {
    min-height: 0 !important;
    padding: 11px 12px !important;
    border: 1px solid var(--delivery-border) !important;
    border-left: 6px solid var(--delivery-border) !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--delivery-bg) 72%, white) !important;
    color: var(--delivery-text) !important;
    box-shadow: 0 4px 11px rgba(35,28,20,.07);
}

.delivery-info-card h2,
.delivery-operation-card h2,
.delivery-history-card h2 {
    margin: 0 0 8px !important;
    color: var(--delivery-text) !important;
    font-size: 1rem !important;
}

.delivery-info-card .detail-list > div {
    min-height: 35px !important;
    padding: 6px 0 !important;
}

.delivery-info-card .detail-list span,
.delivery-info-card .muted,
.delivery-info-card p {
    color: var(--delivery-muted) !important;
    font-size: .75rem !important;
}

.delivery-info-card .detail-list strong {
    color: var(--delivery-text) !important;
    font-size: .78rem !important;
}

.delivery-operation-card {
    padding: 11px !important;
    border: 1px solid var(--delivery-border) !important;
    border-left: 7px solid var(--delivery-border) !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--delivery-bg) 80%, white) !important;
    color: var(--delivery-text) !important;
    box-shadow: 0 4px 11px rgba(35,28,20,.07);
}

.delivery-operation-card p,
.delivery-operation-card .muted {
    color: var(--delivery-muted) !important;
    font-size: .75rem !important;
}

.delivery-history-card {
    padding: 11px 12px !important;
    border: 1px solid #7190bd !important;
    border-left: 7px solid #4f76aa !important;
    border-radius: 11px !important;
    background: #dceaf7 !important;
    color: #204b70 !important;
    box-shadow: 0 4px 11px rgba(35,28,20,.07);
}

.delivery-history-card .timeline {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
}

.delivery-history-card .timeline-item,
.delivery-history-card .timeline > div {
    min-height: 62px;
    padding: 8px 9px;
    border-radius: 9px;
    background: rgba(255,255,255,.66);
    border-left: 4px solid #4f76aa;
}

.delivery-history-card strong {
    color: #204b70 !important;
    font-size: .76rem !important;
}

.delivery-history-card small,
.delivery-history-card p {
    color: #58748c !important;
    font-size: .68rem !important;
}

/* Liste générale */
.delivery-compact-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px;
    margin-top: 10px;
}

.delivery-compact-card {
    --delivery-bg: #e8e3dc;
    --delivery-border: #aa9c88;
    --delivery-text: #342d25;
    --delivery-muted: #70665a;

    display: grid;
    gap: 6px;
    min-height: 112px;
    padding: 10px 11px;
    border: 1px solid var(--delivery-border);
    border-left: 7px solid var(--delivery-border);
    border-radius: 11px;
    background: var(--delivery-bg);
    color: var(--delivery-text);
    text-decoration: none;
    box-shadow: 0 5px 12px rgba(35,28,20,.08);
}

.delivery-compact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 17px rgba(35,28,20,.13);
}

.delivery-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7px;
}

.delivery-card-top strong {
    color: var(--delivery-text);
    font-size: .88rem;
    line-height: 1.1;
}

.delivery-card-top span {
    flex: 0 0 auto;
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: var(--delivery-text);
    font-size: .61rem;
    font-weight: 900;
}

.delivery-compact-card p {
    margin: 0;
    color: var(--delivery-muted);
    font-size: .72rem;
    line-height: 1.2;
}

.delivery-card-progress {
    height: 7px;
    margin-top: auto;
    border-radius: 999px;
    background: rgba(0,0,0,.08);
    overflow: hidden;
}

.delivery-card-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--delivery-border);
}

.delivery-compact-card small {
    color: var(--delivery-muted);
    font-size: .64rem;
}

@media (max-width: 1250px) {
    .delivery-compact-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media (max-width: 900px) {
    .delivery-info-grid {
        grid-template-columns: 1fr;
    }

    .delivery-compact-grid,
    .delivery-history-card .timeline {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 560px) {
    .delivery-detail-hero {
        align-items: flex-start;
    }

    .delivery-detail-hero h1 {
        font-size: 1.2rem;
    }

    .delivery-compact-grid,
    .delivery-history-card .timeline {
        grid-template-columns: 1fr;
    }
}