/**
 * Styles pour le plugin Dolibarr Orders Integration - Style e-commerce
 */

/* Container principal */
#dolibarr-orders-container {
    margin: 30px 0;
    color: #333;
}



/* Texte d'introduction */
.orders-intro {
    text-align: center;
    margin: 0 0 30px 0;
    padding: 20px;
    border: 2px dashed #ccc;
    background-color: #f9f9f9;
}

.orders-intro p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* Messages de loading et erreur */
#dolibarr-orders-loading {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 16px;
    font-style: italic;
}

#dolibarr-orders-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #b92515;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
}

#dolibarr-orders-error p {
    margin: 0;
}

/* Tableau principal */
.orders-history-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}

.orders-history-table thead th {
    background-color: #f8f9fa;
    color: #666;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    padding: 15px 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.orders-history-table tbody td {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.orders-history-table tbody tr {
    background-color: white;
    transition: background-color 0.2s ease;
}

.orders-history-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Styles des colonnes */
.orders-history-table td:first-child {
    font-weight: 600;
    color: #333;
}

.orders-history-table td:nth-child(3) {
    font-weight: 600;
    color: #333;
}

/* Badges de statut */
.order-status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 80px;
    text-align: center;
}

.order-status.status-canceled {
    background-color: #b92515;
    color: white;
}

.order-status.status-validated {
    background-color: #17a2b8;
    color: white;
}

.order-status.status-draft,
.order-status.status-shipped {
    background-color: #6f42c1;
    color: white;
}

.order-status.status-closed {
    background-color: #28a745;
    color: white;
}

.order-status.status-unknown {
    background-color: #6c757d;
    color: white;
}

/* Bouton de téléchargement */
.download-pdf-btn {
    display: inline-block;
    background-color: #b92515;
    color: white !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-width: 120px;
    text-align: center;
}

.download-pdf-btn:hover {
    background-color: #5e3b3f;
    color: white !important;
    text-decoration: none !important;
}

.download-pdf-btn:active {
    background-color: #b92515;
}

.download-pdf-btn:focus {
    outline: 2px solid #b92515;
    outline-offset: 2px;
    padding:5px;
}

/* Responsive pour tablette */
@media (max-width: 768px) {
    #dolibarr-orders-container h3 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .orders-history-table {
        font-size: 13px;
    }

    .orders-history-table thead th,
    .orders-history-table tbody td {
        padding: 12px 8px;
    }
}

/* Responsive pour mobile */
@media (max-width: 640px) {
    #dolibarr-orders-container h3 {
        font-size: 18px;
        line-height: 1.2;
    }

    .orders-intro {
        margin: 0 0 20px 0;
        padding: 15px;
    }

    .orders-intro p {
        font-size: 13px;
    }

    /* Tableau responsive - style cartes */
    .orders-history-table,
    .orders-history-table thead,
    .orders-history-table tbody,
    .orders-history-table th,
    .orders-history-table td,
    .orders-history-table tr {
        display: block;
    }

    .orders-history-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .orders-history-table tbody tr {
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 15px;
        position: relative;
    }

    .orders-history-table tbody tr:hover {
        background: white;
    }

    .orders-history-table td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding: 8px 0 8px 40%;
        text-align: left;
    }

    .orders-history-table td:last-child {
        border-bottom: none;
        text-align: center;
        padding: 15px 0 0 0;
    }

    .orders-history-table td:before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 0;
        width: 35%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 600;
        color: #666;
        font-size: 12px;
        text-transform: uppercase;
    }

    /* Labels pour les données mobiles */
    .orders-history-table td:nth-child(1):before { content: "Référence: "; }
    .orders-history-table td:nth-child(2):before { content: "Date: "; }
    .orders-history-table td:nth-child(3):before { content: "Prix: "; }
    .orders-history-table td:nth-child(4):before { content: "Paiement: "; }
    .orders-history-table td:nth-child(5):before { content: "État: "; }
    .orders-history-table td:nth-child(6):before { content: ""; }
}

/* Animation de chargement améliorée */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#dolibarr-orders-content {
    animation: fadeIn 0.5s ease-out;
}

/* Messages d'état vides */
#dolibarr-orders-content > p {
    text-align: center;
    color: #666;
    font-style: italic;
    margin: 40px 0;
    font-size: 16px;
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
    .orders-history-table tbody tr,
    .download-pdf-btn,
    #dolibarr-orders-content {
        transition: none;
        animation: none;
    }
}

/* Style pour impression */
@media print {
    .download-pdf-btn {
        display: none;
    }

    .orders-history-table {
        border-collapse: collapse;
    }

    .orders-history-table th,
    .orders-history-table td {
        border: 1px solid #000;
    }
}