/* =====================================================
   STYLES UNIFIÉS : COMMANDE RAPIDE & IMPORT DE COMMANDE
   ===================================================== */

.b2b-account-link-column {
    box-sizing: border-box !important;
    float: none !important;
    vertical-align: top !important;
}

.b2b-quick-order,
.b2b-bulk-upload,
.id-b2b-bulk-upload {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.b2b-quick-order::marker,
.b2b-bulk-upload::marker,
.id-b2b-bulk-upload::marker {
    display: none !important;
    content: "" !important;
}

.b2b-quick-order > a,
.b2b-bulk-upload > a,
.id-b2b-bulk-upload > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    width: 100% !important;

    height: 106px !important;
    min-height: 106px !important;

    margin: 0 !important;
    padding: 20px !important;

    background: #fff !important;

    text-decoration: none !important;
}

/* =====================================================
   ICÔNES
   ===================================================== */

.b2b-account-link-column > li {
    width: 100% !important;
    box-sizing: border-box !important;
}

.b2b-account-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.b2b-account-icon .material-icons {
    font-size: 42px !important;
    line-height: 1 !important;
}

/* =====================================================
   TEXTE
   ===================================================== */

.b2b-account-title {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-transform: uppercase; /* Met le texte en majuscules */
}

@media (max-width: 768px) {
    /* Conteneur principal fluide */
    .b2bquickorder-wrapper,
    #b2bquickorder,
    form#form-quick-order {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Transforme le tableau en cartes sur mobile */
    table#quick-order-table,
    table#quick-order-table thead,
    table#quick-order-table tbody,
    table#quick-order-table tr,
    table#quick-order-table th,
    table#quick-order-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Masquer l'en-tête du tableau d'origine */
    table#quick-order-table thead {
        display: none !important;
    }

    /* Chaque ligne devient une carte distincte */
    table#quick-order-table tr {
        margin-bottom: 12px !important;
        border: 1px solid #e5e5e5 !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        padding: 10px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    }

    /* Aligne le contenu de chaque cellule juste après son étiquette. */
    table#quick-order-table td {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 0 !important;
        text-align: left !important;
        border-bottom: 1px solid #f2f2f2 !important;
        white-space: normal !important;
    }

    table#quick-order-table td:last-child {
        border-bottom: none !important;
    }

    /* 3. Adaptation des champs de saisie pour mobile */
    table#quick-order-table input[type="text"],
    table#quick-order-table input[type="number"],
    table#quick-order-table select {
        width: 60% !important;
        max-width: 160px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    table#quick-order-table button,
    table#quick-order-table .btn {
        width: 100% !important;
        margin-top: 8px !important;
        min-height: 40px !important;
    }
}

/* =====================================================
   QUICK ORDER
   ===================================================== */

#b2bquickorder-quickorder {
    max-width: 900px;
}

#b2bquickorder-quickorder h1 {
    margin-bottom: 4px;
}

#b2bquickorder-quickorder .customer-company {
    color: #adb3be;
    margin-top: 0;
    margin-bottom: 24px;
}

#quick-order-table {
    width: 100%;
    border-collapse: collapse;
}

#quick-order-table th {
    text-align: left;
    font-size: 14px;
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

#quick-order-table td {
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

#quick-order-table input[type="text"],
#quick-order-table input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
}

/* Encadré du nom de l'article */
.product-name-box {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    font-size: 14px;
    color: #374151;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 38px;
}

.reference-cell {
    position: relative;
}

.reference-suggestion {
    padding: 8px 10px;
    background: #fff;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #f3f4f6;
}

.reference-suggestion:last-child {
    border-bottom: none;
}

.reference-suggestion.active {
    background: #77797b;
}

/* Met le nom en rouge quand la référence saisie n'a pas pu être trouvée */
.product-name-box.text-danger {
    color: #c0392b;
    font-weight: 500;
}

.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    white-space: normal;
    max-width: 220px;
    line-height: 1.3;
}

.status-valid {
    background: #e5f8ea;
    color: #1e7d34;
    border-radius: 6px;
}

.status-invalid_ref,
.status-invalid_qty {
    background: #fbe4e4;
    color: #c0392b;
    border-radius: 6px;
}

.status-stock_alert {
    background: #faedc9;
    color: #a16d00;
    border-radius: 6px;
}

.btn-remove-row {
    background: #ffcdd2;
    color: #c62828;
    border: none;
    font-weight: 500;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.footer-bar {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#footer-summary {
    color: #4b5563;
    font-size: 14px;
}

#b2bquickorder-quickorder #btn-submit-quickorder {
    display: inline-block !important;
    background: #E0E0E0 !important;
    color: #949698 !important;
    border: 1px solid #cdd0d4 !important;
    padding: 10px 18px !important;
    border-radius: 4px !important;
    cursor: not-allowed !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

#b2bquickorder-quickorder #btn-submit-quickorder:not(:disabled) {
    background: #1f3a5f !important;
    color: #fff !important;
    border-color: #1f3a5f !important;
    cursor: pointer !important;
}

/* =====================================================
   QUICK ORDER - RESPONSIVE
   ===================================================== */

@media (max-width: 600px) {
    /* Masquer l'en-tête classique du tableau */
    #quick-order-table thead {
        display: none;
    }

    /* Transformer chaque ligne en carte distincte */
    #quick-order-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 12px;
        background: #fff;
    }

    /* Disposer chaque cellule en ligne */
    #quick-order-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border: none !important;
    }

    /* Assigner automatiquement le bon nom de colonne */
    #quick-order-table td:nth-child(1)::before {
        content: "Référence";
    }

    #quick-order-table td:nth-child(2)::before {
        content: "Nom de l'article";
    }

    #quick-order-table td:nth-child(3)::before {
        content: "Quantité";
    }

    #quick-order-table td:nth-child(4)::before {
        content: "Statut";
    }

    #quick-order-table td:nth-child(5)::before {
        content: "Action";
    }

    /* Style du libellé à gauche */
    #quick-order-table td::before {
        font-weight: 600;
        font-size: 13px;
        color: #4b5563;
        width: 32%;
        text-align: left;
        flex-shrink: 0;
    }

    /* Espace réservé aux éléments de droite */
    #quick-order-table td > * {
        width: 65% !important;
        box-sizing: border-box;
    }

    #quick-order-table .product-name-box {
        text-align: left;
        display: block;
    }

    #quick-order-table .status-cell {
        text-align: right;
    }

    #quick-order-table .status-pill {
        display: inline-block;
        width: 100% !important;
        text-align: center;
        box-sizing: border-box;
    }

    #quick-order-table .btn-remove-row {
        text-align: center;
        display: inline-block;
        width: 100% !important;
    }
}

/* =====================================================
   BULK UPLOAD - RESPONSIVE MOBILE
   ===================================================== */

@media (max-width: 992px) {
    .id-b2b-bulk-upload #bulk-filter {
        font-size: clamp(12px, 3.2vw, 15px) !important;
    }

    .id-b2b-bulk-upload {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .id-b2b-bulk-upload .table-scroll-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .id-b2b-bulk-upload table.table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    .id-b2b-bulk-upload table.table thead {
        display: none !important;
    }

    .id-b2b-bulk-upload table.table tbody tr {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 12px !important;
        padding: 8px 10px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        background: #fff !important;
    }

    /* Aligne la valeur de chaque cellule juste après son étiquette. */
    .id-b2b-bulk-upload table.table tbody tr td {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #eee !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .id-b2b-bulk-upload table.table tbody tr td:last-child {
        border-bottom: none !important;
    }

    .id-b2b-bulk-upload table.table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        flex: 0 0 35% !important;
        margin-right: 10px !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

    .id-b2b-bulk-upload .input-reference,
    .id-b2b-bulk-upload .input-quantity {
        width: 65% !important;
        max-width: 65% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .id-b2b-bulk-upload .badge-status {
        display: block !important;
        max-width: 65% !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        margin-right: auto !important; /* Pousse l'élément vers la gauche dans le conteneur flex */
    }

    .id-b2b-bulk-upload .btn-supprimer {
        width: auto !important;
        margin: 0 !important;
        padding: 7px 12px !important;
    }

    .id-b2b-bulk-upload .row.text-center {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .id-b2b-bulk-upload .row.text-center > div {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .id-b2b-bulk-upload #form-add-to-cart > div > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .id-b2b-bulk-upload #btn-submit-cart {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =====================================================
   BOUTON BULK UPLOAD DANS "VOTRE COMPTE"
   ===================================================== */

/* Le <li> qui contient le bouton */
li.b2b-bulk-upload,
li.id-b2b-bulk-upload {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Suppression explicite de la puce */
li.b2b-bulk-upload::marker,
li.id-b2b-bulk-upload::marker {
    content: "" !important;
    display: none !important;
}

/* =====================================================
   RESPONSIVE TYPOGRAPHIE & BOUTONS
   BULK UPLOAD
   ===================================================== */

@media (max-width: 992px) {

    /* Titre principal */
    .id-b2b-bulk-upload h1 {
        font-size: clamp(20px, 5vw, 28px) !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    /* Sous-titre */
    .id-b2b-bulk-upload h2 {
        font-size: clamp(16px, 4vw, 22px) !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    /* Texte général */
    .id-b2b-bulk-upload p {
        font-size: clamp(13px, 3.5vw, 16px) !important;
        line-height: 1.4 !important;
    }

    /* Boutons */
    .id-b2b-bulk-upload .btn {
        font-size: clamp(13px, 3.5vw, 16px) !important;
        line-height: 1.2 !important;
    }

    .id-b2b-bulk-upload #bulk-filter {
        width: clamp(110px, 32vw, 125px) !important;
        font-size: clamp(13px, 3.5vw, 16px) !important;
    }

    /* Bouton parcourir */
    .id-b2b-bulk-upload label.btn {
        padding: clamp(8px, 2.5vw, 12px)
                 clamp(12px, 4vw, 20px) !important;

        font-size: clamp(13px, 3.5vw, 16px) !important;
    }

    /* Nom du fichier */
    .id-b2b-bulk-upload .file-name {
        display: inline-block;
        max-width: 100%;
        font-size: clamp(12px, 3.2vw, 15px) !important;
        overflow-wrap: anywhere !important;
    }

    /* Texte des cellules */
    .id-b2b-bulk-upload table.table td {
        font-size: clamp(12px, 3.3vw, 15px) !important;
    }

    /* Labels Ligne / Référence / Quantité / Statut / Action */
    .id-b2b-bulk-upload table.table tbody td::before {
        font-size: clamp(12px, 3.2vw, 15px) !important;
    }

    /* Champs */
    .id-b2b-bulk-upload .input-reference,
    .id-b2b-bulk-upload .input-quantity {
        height: clamp(34px, 9vw, 40px) !important;
        font-size: clamp(13px, 3.5vw, 16px) !important;
    }

    /* Statut */
    .id-b2b-bulk-upload .badge-status {
        font-size: clamp(11px, 3vw, 14px) !important;
        padding: 3px 6px !important;
    }

    /* Supprimer */
    .id-b2b-bulk-upload .btn-supprimer {
        font-size: clamp(12px, 3.2vw, 14px) !important;
        padding: clamp(5px, 2vw, 8px)
                 clamp(8px, 3vw, 12px) !important;
    }

    /* Ajouter au panier */
    .id-b2b-bulk-upload #btn-submit-cart {
        min-height: clamp(38px, 10vw, 46px) !important;
        padding: clamp(8px, 2.5vw, 12px)
                 clamp(12px, 4vw, 20px) !important;

        font-size: clamp(13px, 3.5vw, 16px) !important;
    }
}

@media (max-width: 480px) {

    .id-b2b-bulk-upload {
        padding: 6px !important;
    }

    .id-b2b-bulk-upload h1 {
        font-size: clamp(19px, 6vw, 24px) !important;
    }

    .id-b2b-bulk-upload h2 {
        font-size: clamp(15px, 5vw, 20px) !important;
    }

    .id-b2b-bulk-upload table.table tbody tr {
        padding: 6px 8px !important;
        margin-bottom: 10px !important;
    }

    .id-b2b-bulk-upload table.table tbody tr td {
        padding: 6px 0 !important;
    }

    .id-b2b-bulk-upload table.table tbody td::before {
        flex: 0 0 32% !important;
        margin-right: 6px !important;
    }

    .id-b2b-bulk-upload .input-reference,
    .id-b2b-bulk-upload .input-quantity {
        width: 68% !important;
        max-width: 68% !important;
    }

    .id-b2b-bulk-upload .file-name {
        margin-left: 5px !important;
    }
}

.reference-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    max-height: 200px;
    overflow-y: auto;
}

.reference-suggestion {
    padding: 8px 10px;
    background: #fff;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #f3f4f6;
}

.reference-suggestion:last-child {
    border-bottom: none;
}

.reference-suggestion.active {
    background: #c2c2c3 !important;
    color: #020243 !important;
}

.id-b2b-bulk-upload .badge-status {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.bulk-filter-select {
    position: relative;
    width: 125px;
}

.bulk-filter-button {
    position: relative;
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 6px 30px 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #1f3a5f;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.bulk-filter-button::after {
    content: "▼";
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #1f3a5f;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}

.bulk-filter-select.open .bulk-filter-button::after {
    content: "▲";
}

.bulk-filter-options {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 1000;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.bulk-filter-select.open .bulk-filter-options {
    display: block;
}

.bulk-filter-select.open .bulk-filter-options {
    display: block;
}

.bulk-filter-options button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    background: #ffffff !important;
    color: #1f3a5f !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
}

.bulk-filter-options button:hover {
    background: #1f3a5f !important;
    color: #ffffff !important;
}

.bulk-filter-options button.keyboard-focus {
    background: #1f3a5f !important;
    color: #ffffff !important;
}

.bulk-filter-select.keyboard-mode .bulk-filter-options button:hover:not(.keyboard-focus) {
    background: #ffffff !important;
    color: #1f3a5f !important;
}

@media (max-width: 992px) {
    .bulk-filter-button {
        font-size: clamp(13px, 3.5vw, 15px) !important;
    }

    .bulk-filter-options button {
        font-size: clamp(12px, 3.2vw, 14px) !important;
    }
}

@media (max-width: 480px) {
    .bulk-filter-options button {
        font-size: 12px !important;
        padding: 6px 8px;
    }
}

.status-pill.status-checking {
    color: #e65100;
    font-weight: 500;
}

/* =====================================================
   BULK UPLOAD - EFFETS DES BOUTONS
   ===================================================== */

/* Effet au survol du bouton de téléchargement */
.btn-download-template:hover {
    background: #64acf8 !important;
}

/* Effet lorsque le bouton est cliqué */
.btn-download-template:active {
    background: #97c6f9 !important;
    transform: translateY(2px);
}

/* Supprimer */
.btn-supprimer:hover {
    background: #ffdcdc !important;
}

.btn-supprimer:active {
    background: #ffdcdc !important;
    transform: translateY(2px);
}

/* Ajouter au panier */
#btn-submit-cart:not(:disabled):hover {
    background: #45b85a !important;
}

#btn-submit-cart:not(:disabled):active {
    background: #218838 !important;
    transform: translateY(2px);
}

/* =====================================================
   QUICK ORDER - EFFETS DES BOUTONS
   ===================================================== */

/* Bouton Supprimer */
.btn-remove-row:hover {
    background: #ffdcdc !important;
}

.btn-remove-row:active {
    background: #ffdcdc !important;
    transform: translateY(2px);
}

/* Bouton Ajouter au panier */
#b2bquickorder-quickorder #btn-submit-quickorder:not(:disabled):hover {
    background: #2f527d !important;
}

#b2bquickorder-quickorder #btn-submit-quickorder:not(:disabled):active {
    background: #2f527d !important;
    transform: translateY(2px);
}