/* /Pages/cbls.razor.rz.scp.css */
/* Grille responsive pour cartes commandes */
.order-grid[b-25eup0x93y] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Carte commande */
.order-card[b-25eup0x93y] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Lignes */
.oc-row[b-25eup0x93y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Ligne 1 */
.oc-left[b-25eup0x93y] {
    min-width: 0;
}

.oc-num[b-25eup0x93y] {
    font-weight: 700;
    font-size: .95rem;
    color: #111827;
}

.oc-date[b-25eup0x93y] {
    font-size: .85rem;
    color: #6b7280;
}

.oc-total[b-25eup0x93y] {
    font-weight: 700;
    color: #08a39c;
}

/* Ligne 2 */
.oc-meta[b-25eup0x93y] {
    gap: 10px;
}

.oc-client[b-25eup0x93y] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
}

.oc-badges[b-25eup0x93y] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-etat[b-25eup0x93y],
.badge-regl[b-25eup0x93y] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
}

.badge-etat[b-25eup0x93y] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-25eup0x93y] {
    background: #fff3cd;
    color: #7a5b00;
}

/* Ligne 3 (totaux) */
.oc-totaux[b-25eup0x93y] {
    gap: 10px;
    font-size: .9rem;
    color: #374151;
}

.oc-totaux span[b-25eup0x93y] {
    white-space: nowrap;
}

/* Actions */
.oc-actions[b-25eup0x93y] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Petits écrans : tout tient sur 1 colonne naturellement */
@media (max-width:640px) {
    .oc-row[b-25eup0x93y] {
        gap: 8px;
    }
}

/* Grille cartes par défaut */
.order-grid[b-25eup0x93y] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Une seule carte par ligne (peu importe la largeur) */
.order-grid.one-per-row[b-25eup0x93y] {
    grid-template-columns: 1fr !important;
    max-width: 1100px;
    /* optionnel: largeur lisible */
    margin: 0 auto;
    /* centre la colonne */
}

/* Carte commande (déjà présent chez toi, au cas où) */
.order-card[b-25eup0x93y] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oc-row[b-25eup0x93y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.oc-left[b-25eup0x93y] {
    min-width: 0;
}

.oc-num[b-25eup0x93y] {
    font-weight: 700;
    font-size: .95rem;
    color: #111827;
}

.oc-date[b-25eup0x93y] {
    font-size: .85rem;
    color: #6b7280;
}

.oc-total[b-25eup0x93y] {
    font-weight: 700;
    color: #08a39c;
}

.oc-client[b-25eup0x93y] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
}

.oc-badges[b-25eup0x93y] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-etat[b-25eup0x93y],
.badge-regl[b-25eup0x93y] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
}

.badge-etat[b-25eup0x93y] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-25eup0x93y] {
    background: #fff3cd;
    color: #7a5b00;
}

.oc-totaux[b-25eup0x93y] {
    gap: 10px;
    font-size: .9rem;
    color: #374151;
}

.oc-totaux span[b-25eup0x93y] {
    white-space: nowrap;
}

.oc-actions[b-25eup0x93y] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Carte compacte */
.order-card--compact[b-25eup0x93y] {
    padding: 8px 10px;
    gap: 6px;
}

/* Row 1 */
.oc-r1[b-25eup0x93y] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.oc-r1 .left[b-25eup0x93y] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.oc-r1 .num[b-25eup0x93y] {
    font-weight: 600;
    font-size: .92rem;
    color: #111827;
}

.oc-r1 .sep[b-25eup0x93y] {
    color: #9ca3af;
}

.oc-r1 .date[b-25eup0x93y] {
    font-size: .85rem;
    color: #6b7280;
    white-space: nowrap;
}

.oc-r1 .total[b-25eup0x93y] {
    font-weight: 700;
    color: #08a39c;
    white-space: nowrap;
}

/* Row 2 */
.oc-r2[b-25eup0x93y] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.oc-r2 .client[b-25eup0x93y] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
    color: #111827;
}

.oc-r2 .badges[b-25eup0x93y] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.badge-etat[b-25eup0x93y],
.badge-regl[b-25eup0x93y] {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .78rem;
    white-space: nowrap;
}

.badge-etat[b-25eup0x93y] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-25eup0x93y] {
    background: #fff3cd;
    color: #7a5b00;
}

/* Row 3 */
.oc-r3[b-25eup0x93y] {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr)) auto;
    /* 4 chiffres + actions */
    align-items: center;
    gap: 8px;
}

.oc-r3 .kv[b-25eup0x93y] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: #374151;
    white-space: nowrap;
}

.oc-r3 .kv span[b-25eup0x93y] {
    color: #6b7280;
}

.oc-r3 .kv b[b-25eup0x93y] {
    font-weight: 600;
    color: #111827;
}

.oc-r3 .actions[b-25eup0x93y] {
    display: flex;
    gap: 10px;
    /* espace entre les boutons */
    justify-content: flex-end;
    /* aligner à droite */
    min-width: 180px;
    /* ou plus si tu veux plus large */
}

.oc-r3 .actions .icon[b-25eup0x93y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    /* largeur bouton */
    height: 38px;
    /* hauteur bouton */
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

.oc-r3 .actions .icon:hover[b-25eup0x93y] {
    background-color: #f0f0f0;
}

/* Petits écrans : les blocs se replient proprement */
@media (max-width:640px) {
    .oc-r3[b-25eup0x93y] {
        grid-template-columns: repeat(2, minmax(90px, 1fr)) auto;
    }
}

/* Vue cartes : 1 carte par ligne, ALIGNÉE À GAUCHE, pleine largeur */
.order-grid.one-per-row[b-25eup0x93y] {
    grid-template-columns: 1fr !important;
    max-width: none !important;
    /* supprime la largeur max qui recentre */
    width: 100% !important;
    margin: 0 !important;
    /* enlève le centrage */
    padding-left: 0;
    /* au cas où */
}

/* Si tu utilises un wrapper centré (ex: .page-wrap) dans cette page, neutralise-le */
.page-wrap[b-25eup0x93y] {
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
}



/* Barre de recherche et filtres figés en haut */
.sticky-top-bar[b-25eup0x93y] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    margin: 0 -1rem 1rem -1rem;
}

/* Wrapper pour le scroll horizontal du tableau sur tablette/mobile */
.table-responsive-wrapper[b-25eup0x93y] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Amélioration responsive pour les cartes sur tablette */
@media (min-width: 768px) and (max-width: 1024px) {
    .order-grid.one-per-row[b-25eup0x93y] {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
        max-width: none;
    }

    .oc-r3[b-25eup0x93y] {
        grid-template-columns: repeat(2, 1fr) auto !important;
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .oc-r3[b-25eup0x93y] {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }

    .oc-r3 .actions[b-25eup0x93y] {
        grid-column: span 2;
        justify-content: flex-end;
        border-top: 1px solid #eee;
        padding-top: 8px;
        margin-top: 4px;
    }
}

/* Résumé des totaux */
.totals-summary[b-25eup0x93y] {
    background: #f8fafc;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.summary-item[b-25eup0x93y] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.summary-item .label[b-25eup0x93y] {
    color: #64748b;
    font-weight: 500;
}

.summary-item .value[b-25eup0x93y] {
    color: #1e293b;
    font-weight: 700;
}

.summary-item.highlight .value[b-25eup0x93y] {
    color: #08a39c;
    font-size: 1rem;
}

@media (max-width: 767px) {
    .totals-summary[b-25eup0x93y] {
        justify-content: space-between;
        width: 100%;
    }
}
/* /Pages/Clients.razor.rz.scp.css */
/* Grille des cartes clients */
.client-grid[b-4xo5moqw5f] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

    /* Une carte par ligne (si souhaité) */
    .client-grid.one-per-row[b-4xo5moqw5f] {
        grid-template-columns: 1fr !important;
        width: 100%;
        margin: 0;
    }

/* Carte client compacte (3 lignes) */
.client-card[b-4xo5moqw5f] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Row 1 : gauche/droite */
.cc-r1[b-4xo5moqw5f] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

    .cc-r1 .left[b-4xo5moqw5f] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .cc-r1 .code[b-4xo5moqw5f] {
        font-weight: 700;
        color: #111827;
        white-space: nowrap;
    }

    .cc-r1 .name[b-4xo5moqw5f] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cc-r1 .sep[b-4xo5moqw5f] {
        color: #9ca3af;
    }

    .cc-r1 .right[b-4xo5moqw5f] {
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .cc-r1 .city[b-4xo5moqw5f] {
        color: #374151;
        font-size: .9rem;
    }

/* Row 2 : libellé + badges */
.cc-r2[b-4xo5moqw5f] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.line-ellipsis[b-4xo5moqw5f] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badges[b-4xo5moqw5f] {
    display: flex;
    gap: 6px;
}

.badge-soft[b-4xo5moqw5f] {
    display: inline-block;
    padding: .12rem .45rem;
    border-radius: 999px;
    font-size: .78rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

    .badge-soft.info[b-4xo5moqw5f] {
        background: #eef7ff;
        color: #0b5cab;
        border-color: #dbeafe;
    }

    .badge-soft.warn[b-4xo5moqw5f] {
        background: #fff3cd;
        color: #7a5b00;
        border-color: #fde68a;
    }

/* Row 3 : tel + adresses */
.cc-r3[b-4xo5moqw5f] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 12px;
}

.kv[b-4xo5moqw5f] {
    display: flex;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
    font-size: .9rem;
}

    .kv .k[b-4xo5moqw5f] {
        color: #6b7280;
    }

    .kv .v[b-4xo5moqw5f] {
        font-weight: 600;
        color: #111827;
    }

.addr[b-4xo5moqw5f] {
    display: grid;
    gap: 2px;
}

.addr-line[b-4xo5moqw5f] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
    align-items: center;
}

    .addr-line .k[b-4xo5moqw5f] {
        color: #6b7280;
        white-space: nowrap;
        font-size: .85rem;
    }

    .addr-line .v[b-4xo5moqw5f] {
        color: #111827;
        font-size: .9rem;
    }

/* Petits écrans */
@media (max-width:640px) {
    .cc-r3[b-4xo5moqw5f] {
        grid-template-columns: 1fr;
    }
}
/* Barre de recherche et filtres figés en haut */
.sticky-top-bar[b-4xo5moqw5f] {
    position: sticky;
    top: 0;
    z-index: 10; /* Assurez-vous qu'il reste au-dessus du reste du contenu */
    background: #fff; /* Pour masquer le contenu en dessous */
    padding: 10px; /* Un peu d'espacement */
    box-shadow: 0 2px 4px rgba(0,0,0,.05); /* Petite ombre pour un effet "flottant" */
    margin: 0 -1rem 1rem -1rem; /* Corrigez les marges négatives si nécessaire pour l'alignement */
}
/* /Pages/Commandes.razor.rz.scp.css */
/* Grille responsive pour cartes commandes */
.order-grid[b-82gdhkszqm] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Carte commande - Aspect Premium */
.order-card[b-82gdhkszqm] {
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.order-card:hover[b-82gdhkszqm] {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    border-color: #e0e0e0;
}

.order-card[b-82gdhkszqm]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #08a39c;
    opacity: 0.8;
}

/* Lignes */
.oc-row[b-82gdhkszqm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Ligne 1 */
.oc-left[b-82gdhkszqm] {
    min-width: 0;
}

.oc-num[b-82gdhkszqm] {
    font-weight: 700;
    font-size: .95rem;
    color: #111827;
}

.oc-date[b-82gdhkszqm] {
    font-size: .85rem;
    color: #6b7280;
}

.oc-total[b-82gdhkszqm] {
    font-weight: 700;
    color: #08a39c;
}

/* Ligne 2 */
.oc-meta[b-82gdhkszqm] {
    gap: 10px;
}

.oc-client[b-82gdhkszqm] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
}

.oc-badges[b-82gdhkszqm] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-etat[b-82gdhkszqm],
.badge-regl[b-82gdhkszqm] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
}

.badge-etat[b-82gdhkszqm] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-82gdhkszqm] {
    background: #fff3cd;
    color: #7a5b00;
}

/* Ligne 3 (totaux) */
.oc-totaux[b-82gdhkszqm] {
    gap: 10px;
    font-size: .9rem;
    color: #374151;
}

.oc-totaux span[b-82gdhkszqm] {
    white-space: nowrap;
}

/* Actions */
.oc-actions[b-82gdhkszqm] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Petits écrans : tout tient sur 1 colonne naturellement */
@media (max-width:640px) {
    .oc-row[b-82gdhkszqm] {
        gap: 8px;
    }
}

/* Grille cartes par défaut */
.order-grid[b-82gdhkszqm] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Une seule carte par ligne (peu importe la largeur) */
.order-grid.one-per-row[b-82gdhkszqm] {
    grid-template-columns: 1fr !important;
    max-width: 1100px;
    /* optionnel: largeur lisible */
    margin: 0 auto;
    /* centre la colonne */
}

/* Carte commande (déjà présent chez toi, au cas où) */
.order-card[b-82gdhkszqm] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oc-row[b-82gdhkszqm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.oc-left[b-82gdhkszqm] {
    min-width: 0;
}

.oc-num[b-82gdhkszqm] {
    font-weight: 700;
    font-size: .95rem;
    color: #111827;
}

.oc-date[b-82gdhkszqm] {
    font-size: .85rem;
    color: #6b7280;
}

.oc-total[b-82gdhkszqm] {
    font-weight: 700;
    color: #08a39c;
}

.oc-client[b-82gdhkszqm] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
}

.oc-badges[b-82gdhkszqm] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-etat[b-82gdhkszqm],
.badge-regl[b-82gdhkszqm] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
}

.badge-etat[b-82gdhkszqm] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-82gdhkszqm] {
    background: #fff3cd;
    color: #7a5b00;
}

.oc-totaux[b-82gdhkszqm] {
    gap: 10px;
    font-size: .9rem;
    color: #374151;
}

.oc-totaux span[b-82gdhkszqm] {
    white-space: nowrap;
}

.oc-actions[b-82gdhkszqm] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Carte compacte */
.order-card--compact[b-82gdhkszqm] {
    padding: 8px 10px;
    gap: 6px;
}

/* Row 1 */
.oc-r1[b-82gdhkszqm] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.oc-r1 .left[b-82gdhkszqm] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.oc-r1 .num[b-82gdhkszqm] {
    font-weight: 600;
    font-size: .92rem;
    color: #111827;
}

.oc-r1 .sep[b-82gdhkszqm] {
    color: #9ca3af;
}

.oc-r1 .date[b-82gdhkszqm] {
    font-size: .85rem;
    color: #6b7280;
    white-space: nowrap;
}

.oc-r1 .total[b-82gdhkszqm] {
    font-weight: 700;
    color: #08a39c;
    white-space: nowrap;
}

/* Row 2 */
.oc-r2[b-82gdhkszqm] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.oc-r2 .client[b-82gdhkszqm] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
    color: #111827;
}

.oc-r2 .badges[b-82gdhkszqm] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.badge-etat[b-82gdhkszqm],
.badge-regl[b-82gdhkszqm] {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .78rem;
    white-space: nowrap;
}

.badge-etat[b-82gdhkszqm] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-82gdhkszqm] {
    background: #fff3cd;
    color: #7a5b00;
}

/* Row 3 */
.oc-r3[b-82gdhkszqm] {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr)) auto;
    /* 4 chiffres + actions */
    align-items: center;
    gap: 8px;
}

.oc-r3 .kv[b-82gdhkszqm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: #374151;
    white-space: nowrap;
}

.oc-r3 .kv span[b-82gdhkszqm] {
    color: #6b7280;
}

.oc-r3 .kv b[b-82gdhkszqm] {
    font-weight: 600;
    color: #111827;
}

.oc-r3 .actions[b-82gdhkszqm] {
    justify-self: end;
    display: flex;
    gap: 6px;
}

.oc-r3 .actions .icon[b-82gdhkszqm] {
    width: 28px;
    height: 28px;
    line-height: 26px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
}

.oc-r3 .actions .icon.danger[b-82gdhkszqm] {
    border-color: #ef4444;
    color: #ef4444;
}

.oc-r3 .actions .icon:hover[b-82gdhkszqm] {
    background: #f9fafb;
}

/* Petits écrans : les blocs se replient proprement */
@media (max-width:640px) {
    .oc-r3[b-82gdhkszqm] {
        grid-template-columns: repeat(2, minmax(90px, 1fr)) auto;
    }
}

/* Vue cartes : 1 carte par ligne, ALIGNÉE À GAUCHE, pleine largeur */
.order-grid.one-per-row[b-82gdhkszqm] {
    grid-template-columns: 1fr !important;
    max-width: none !important;
    /* supprime la largeur max qui recentre */
    width: 100% !important;
    margin: 0 !important;
    /* enlève le centrage */
    padding-left: 0;
    /* au cas où */
}

/* Si tu utilises un wrapper centré (ex: .page-wrap) dans cette page, neutralise-le */
.page-wrap[b-82gdhkszqm] {
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
}



/* Barre de recherche et filtres figés en haut */
.sticky-top-bar[b-82gdhkszqm] {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Augmenté pour rester au-dessus du tableau */
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    margin: 0 -1rem 1rem -1rem;
}

/* Wrapper pour le scroll horizontal du tableau sur tablette/mobile */
.table-responsive-wrapper[b-82gdhkszqm] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Amélioration responsive pour les cartes sur tablette */
@media (min-width: 768px) {
    .order-grid.one-per-row[b-82gdhkszqm] {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .order-grid.one-per-row[b-82gdhkszqm] {
        grid-template-columns: 1fr;
    }

    .oc-r3[b-82gdhkszqm] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .oc-r3 .actions[b-82gdhkszqm] {
        grid-column: span 2;
        justify-content: flex-end;
        border-top: 1px solid #eee;
        padding-top: 8px;
        margin-top: 4px;
    }
}

/* Résumé des totaux */
.totals-summary[b-82gdhkszqm] {
    background: #f8fafc;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.summary-item[b-82gdhkszqm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.summary-item .label[b-82gdhkszqm] {
    color: #64748b;
    font-weight: 500;
}

.summary-item .value[b-82gdhkszqm] {
    color: #1e293b;
    font-weight: 700;
}

.summary-item.highlight .value[b-82gdhkszqm] {
    color: #08a39c;
    font-size: 1rem;
}

@media (max-width: 767px) {
    .totals-summary[b-82gdhkszqm] {
        justify-content: space-between;
        width: 100%;
    }
}
/* /Pages/Fbls.razor.rz.scp.css */
/* Grille responsive pour cartes commandes */
.order-grid[b-qwa29a6rx1] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Carte commande */
.order-card[b-qwa29a6rx1] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Lignes */
.oc-row[b-qwa29a6rx1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Ligne 1 */
.oc-left[b-qwa29a6rx1] {
    min-width: 0;
}

.oc-num[b-qwa29a6rx1] {
    font-weight: 700;
    font-size: .95rem;
    color: #111827;
}

.oc-date[b-qwa29a6rx1] {
    font-size: .85rem;
    color: #6b7280;
}

.oc-total[b-qwa29a6rx1] {
    font-weight: 700;
    color: #08a39c;
}

/* Ligne 2 */
.oc-meta[b-qwa29a6rx1] {
    gap: 10px;
}

.oc-client[b-qwa29a6rx1] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
}

.oc-badges[b-qwa29a6rx1] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-etat[b-qwa29a6rx1],
.badge-regl[b-qwa29a6rx1] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
}

.badge-etat[b-qwa29a6rx1] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-qwa29a6rx1] {
    background: #fff3cd;
    color: #7a5b00;
}

/* Ligne 3 (totaux) */
.oc-totaux[b-qwa29a6rx1] {
    gap: 10px;
    font-size: .9rem;
    color: #374151;
}

.oc-totaux span[b-qwa29a6rx1] {
    white-space: nowrap;
}

/* Actions */
.oc-actions[b-qwa29a6rx1] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Petits écrans : tout tient sur 1 colonne naturellement */
@media (max-width:640px) {
    .oc-row[b-qwa29a6rx1] {
        gap: 8px;
    }
}

/* Grille cartes par défaut */
.order-grid[b-qwa29a6rx1] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Une seule carte par ligne (peu importe la largeur) */
.order-grid.one-per-row[b-qwa29a6rx1] {
    grid-template-columns: 1fr !important;
    max-width: 1100px;
    /* optionnel: largeur lisible */
    margin: 0 auto;
    /* centre la colonne */
}

/* Carte commande (déjà présent chez toi, au cas où) */
.order-card[b-qwa29a6rx1] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.oc-row[b-qwa29a6rx1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.oc-left[b-qwa29a6rx1] {
    min-width: 0;
}

.oc-num[b-qwa29a6rx1] {
    font-weight: 700;
    font-size: .95rem;
    color: #111827;
}

.oc-date[b-qwa29a6rx1] {
    font-size: .85rem;
    color: #6b7280;
}

.oc-total[b-qwa29a6rx1] {
    font-weight: 700;
    color: #08a39c;
}

.oc-client[b-qwa29a6rx1] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
}

.oc-badges[b-qwa29a6rx1] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-etat[b-qwa29a6rx1],
.badge-regl[b-qwa29a6rx1] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
}

.badge-etat[b-qwa29a6rx1] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-qwa29a6rx1] {
    background: #fff3cd;
    color: #7a5b00;
}

.oc-totaux[b-qwa29a6rx1] {
    gap: 10px;
    font-size: .9rem;
    color: #374151;
}

.oc-totaux span[b-qwa29a6rx1] {
    white-space: nowrap;
}

.oc-actions[b-qwa29a6rx1] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Carte compacte */
.order-card--compact[b-qwa29a6rx1] {
    padding: 8px 10px;
    gap: 6px;
}

/* Row 1 */
.oc-r1[b-qwa29a6rx1] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.oc-r1 .left[b-qwa29a6rx1] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.oc-r1 .num[b-qwa29a6rx1] {
    font-weight: 600;
    font-size: .92rem;
    color: #111827;
}

.oc-r1 .sep[b-qwa29a6rx1] {
    color: #9ca3af;
}

.oc-r1 .date[b-qwa29a6rx1] {
    font-size: .85rem;
    color: #6b7280;
    white-space: nowrap;
}

.oc-r1 .total[b-qwa29a6rx1] {
    font-weight: 700;
    color: #08a39c;
    white-space: nowrap;
}

/* Row 2 */
.oc-r2[b-qwa29a6rx1] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.oc-r2 .client[b-qwa29a6rx1] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
    color: #111827;
}

.oc-r2 .badges[b-qwa29a6rx1] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.badge-etat[b-qwa29a6rx1],
.badge-regl[b-qwa29a6rx1] {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .78rem;
    white-space: nowrap;
}

.badge-etat[b-qwa29a6rx1] {
    background: #eef7ff;
    color: #0b5cab;
}

.badge-regl[b-qwa29a6rx1] {
    background: #fff3cd;
    color: #7a5b00;
}

/* Row 3 */
.oc-r3[b-qwa29a6rx1] {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr)) auto;
    /* 4 chiffres + actions */
    align-items: center;
    gap: 8px;
}

.oc-r3 .kv[b-qwa29a6rx1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: #374151;
    white-space: nowrap;
}

.oc-r3 .kv span[b-qwa29a6rx1] {
    color: #6b7280;
}

.oc-r3 .kv b[b-qwa29a6rx1] {
    font-weight: 600;
    color: #111827;
}

.oc-r3 .actions[b-qwa29a6rx1] {
    display: flex;
    gap: 10px;
    /* espace entre les boutons */
    justify-content: flex-end;
    /* aligner à droite */
    min-width: 180px;
    /* ou plus si tu veux plus large */
}

.oc-r3 .actions .icon[b-qwa29a6rx1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    /* largeur bouton */
    height: 38px;
    /* hauteur bouton */
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

.oc-r3 .actions .icon:hover[b-qwa29a6rx1] {
    background-color: #f0f0f0;
}

/* Petits écrans : les blocs se replient proprement */
@media (max-width:640px) {
    .oc-r3[b-qwa29a6rx1] {
        grid-template-columns: repeat(2, minmax(90px, 1fr)) auto;
    }
}

/* Vue cartes : 1 carte par ligne, ALIGNÉE À GAUCHE, pleine largeur */
.order-grid.one-per-row[b-qwa29a6rx1] {
    grid-template-columns: 1fr !important;
    max-width: none !important;
    /* supprime la largeur max qui recentre */
    width: 100% !important;
    margin: 0 !important;
    /* enlève le centrage */
    padding-left: 0;
    /* au cas où */
}

/* Si tu utilises un wrapper centré (ex: .page-wrap) dans cette page, neutralise-le */
.page-wrap[b-qwa29a6rx1] {
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

/* Barre de recherche et filtres figés en haut */
/* Barre de recherche et filtres figés en haut */
.sticky-top-bar[b-qwa29a6rx1] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    margin: 0 -1rem 1rem -1rem;
}

/* Wrapper pour le scroll horizontal du tableau sur tablette/mobile */
.table-responsive-wrapper[b-qwa29a6rx1] {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Amélioration responsive pour les cartes sur tablette */
@media (min-width: 768px) and (max-width: 1024px) {
    .order-grid.one-per-row[b-qwa29a6rx1] {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
        max-width: none;
    }

    .oc-r3[b-qwa29a6rx1] {
        grid-template-columns: repeat(2, 1fr) auto !important;
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .oc-r3[b-qwa29a6rx1] {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }

    .oc-r3 .actions[b-qwa29a6rx1] {
        grid-column: span 2;
        justify-content: center;
        margin-top: 8px;
    }
}

/* Résumé des totaux */
.totals-summary[b-qwa29a6rx1] {
    background: #f8fafc;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.summary-item[b-qwa29a6rx1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.summary-item .label[b-qwa29a6rx1] {
    color: #64748b;
    font-weight: 500;
}

.summary-item .value[b-qwa29a6rx1] {
    color: #1e293b;
    font-weight: 700;
}

.summary-item.highlight .value[b-qwa29a6rx1] {
    color: #08a39c;
    font-size: 1rem;
}

@media (max-width: 767px) {
    .totals-summary[b-qwa29a6rx1] {
        justify-content: space-between;
        width: 100%;
    }
}
/* /Pages/Produits.razor.rz.scp.css */
/* Keep only DevExpress specific overrides */
[b-t3ic3h7ywu] .dxbl-overlay,
[b-t3ic3h7ywu] .dxbl-overlay-content,
[b-t3ic3h7ywu] .dxbl-dropdown,
[b-t3ic3h7ywu] .dxbl-dropdown-list {
    z-index: 5000 !important;
}

[b-t3ic3h7ywu] .dxbl-dropdown-list {
    margin-top: 4px;
}
/* /Pages/Prospects.razor.rz.scp.css */
/* Grille des cartes prospects responsive et compacte */
.prospect-grid[b-3kg27kawzj] {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Carte prospect compacte */
.prospect-card[b-3kg27kawzj] {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease-in-out;
}

.prospect-card:hover[b-3kg27kawzj] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.prospect-card.confirmed[b-3kg27kawzj] {
    border-left: 4px solid #10b981;
}

/* En-tête de la carte (Code, Nom & Badge) */
.pc-header[b-3kg27kawzj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.pc-title[b-3kg27kawzj] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pc-code[b-3kg27kawzj] {
    font-size: 0.78rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.pc-name[b-3kg27kawzj] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Informations de contact compactes */
.pc-body[b-3kg27kawzj] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.83rem;
    color: #334155;
    margin-bottom: 8px;
}

.pc-info-item[b-3kg27kawzj] {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-info-item i[b-3kg27kawzj] {
    color: #64748b;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Badges de statut personnalisés */
.badge-soft[b-3kg27kawzj] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-soft.info[b-3kg27kawzj] {
    background: #e0f2fe;
    color: #0369a1;
}

.badge-soft.success[b-3kg27kawzj] {
    background: #d1fae5;
    color: #047857;
}

.badge-soft.danger[b-3kg27kawzj] {
    background: #fee2e2;
    color: #b91c1c;
}

/* Pied de carte avec boutons d'actions compacts */
.pc-actions[b-3kg27kawzj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}

.pc-actions .btn[b-3kg27kawzj] {
    padding: 3px 8px;
    font-size: 0.78rem;
    border-radius: 6px;
}

/* Barre de recherche et filtres fixe */
.sticky-top-bar[b-3kg27kawzj] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Responsive pour mobiles */
@media (max-width: 576px) {
    .prospect-grid[b-3kg27kawzj] {
        grid-template-columns: 1fr;
    }

    .pc-actions[b-3kg27kawzj] {
        justify-content: space-between;
    }
}
/* /Pages/Xblbarcode.razor.rz.scp.css */

/* =================================================================== */
/* 1. OVERRIDES GLOBAUX DEVEXPRESS
/* =================================================================== */
/* Force les popups/dropdowns DevExpress AU-DESSUS de la toolbar (1100) */
[b-22hkxhd6rc] .dxbl-overlay,
[b-22hkxhd6rc] .dxbl-overlay-content,
[b-22hkxhd6rc] .dxbl-dropdown,
[b-22hkxhd6rc] .dxbl-dropdown-list {
    z-index: 5000 !important;
}
.cart-toolbar .toggles[b-22hkxhd6rc], .cart-toolbar--fixed[b-22hkxhd6rc] {
    overflow: visible !important;
}
/* (Optionnel) petit espace visuel sous la toolbar */
[b-22hkxhd6rc] .dxbl-dropdown-list {
    margin-top: 4px;
}

/* Style de base pour les inputs numériques */
[b-22hkxhd6rc] .dxbl-spin-edit-input {
    text-align: center;
}

/* Style pour les petits SpinEdit (Bonus, Testeur) */
[b-22hkxhd6rc] .spin-small .dxbl-spin-edit,
[b-22hkxhd6rc] .spin-small .dxbl-spin-edit-input {
    width: 60px !important;
    max-width: 60px !important;
}

/* Style pour le SpinEdit de Quantité */
[b-22hkxhd6rc] .spin-qty .dxbl-spin-edit,
[b-22hkxhd6rc] .spin-qty .dxbl-spin-edit-input {
    width: 88px !important;
    max-width: 88px !important;
}

/* Style de la police pour la quantité (rouge si > 0) */
.spinEditPositive[b-22hkxhd6rc] {
    color: red !important;
    text-align: center;
    font-weight: 700;
    max-width: 80px !important;
    flex: 0 0 80px;
}

/* Style de la police pour la quantité (par défaut) */
.spinEditDefault[b-22hkxhd6rc] {
    color: black !important;
    text-align: center;
    max-width: 60px !important;
    flex: 0 0 20px;
}


/* =================================================================== */
/* 2. TOOLBAR (Sticky / Fixed)
/* =================================================================== */

.cart-toolbar[b-22hkxhd6rc] {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    padding: .5rem .75rem;
    /* Sticky par défaut */
    position: sticky;
    top: 0;
    z-index: 1100; /* Au-dessus du contenu, en dessous des popups */
    /* Apparence */
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #eee;
}

/* Classe 'fallback' si sticky n'est pas supporté (géré par JS) */
.cart-toolbar--fixed[b-22hkxhd6rc] {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
}
.cart-toolbar .center[b-22hkxhd6rc] {
    flex: 1; /* Prend l'espace libre */
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
}
/* Espace réservé pour la toolbar en mode 'fixed' */
.toolbar-spacer[b-22hkxhd6rc] {
    height: 56px; /* Ajustez si la hauteur de votre toolbar change */
}

/* Layout interne de la Toolbar */
.cart-toolbar .left[b-22hkxhd6rc],
.cart-toolbar .right[b-22hkxhd6rc] {
    display: flex;
    align-items: center;
}

.cart-toolbar .left[b-22hkxhd6rc] {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-toolbar .right[b-22hkxhd6rc] {
    flex: 0 0 auto;
    min-width: 0;
}

.cart-toolbar .toggles[b-22hkxhd6rc] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
}

.cart-toolbar .toggle[b-22hkxhd6rc] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.cart-toolbar .order-title[b-22hkxhd6rc] {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-inline: .5rem;
}

.cart-toolbar .btn-back .icon[b-22hkxhd6rc] {
    margin-right: .35rem;
}

.cart-toolbar .pill[b-22hkxhd6rc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: .35rem;
    border-radius: 999px;
    font-size: 12px;
    background: #ef4444; /* rouge */
    color: #fff;
}

/* Champ de recherche */
.cart-toolbar .right input.form-control[b-22hkxhd6rc] {
    max-width: 260px;
}


/* =================================================================== */
/* 3. TOOLBAR RESPONSIVE (AVEC CORRECTIONS)
/* =================================================================== */

/* ≤ 1200px : on autorise le wrap */
@media (max-width: 1200px) {
    .cart-toolbar[b-22hkxhd6rc] {
        flex-wrap: wrap;
    }

        .cart-toolbar .order-title[b-22hkxhd6rc] {
            max-width: 40vw;
        }

        .cart-toolbar .right input.form-control[b-22hkxhd6rc] {
            max-width: 220px;
        }
}

/* ≤ 992px : la recherche passe en dessous */
@media (max-width: 992px) {
    .cart-toolbar[b-22hkxhd6rc] {
        row-gap: .5rem;
    }

        .cart-toolbar .left[b-22hkxhd6rc] {
            order: 1;
            flex: 1 1 100%;
        }

        .cart-toolbar .right[b-22hkxhd6rc] {
            order: 2;
            flex: 1 1 100%;
            justify-content: flex-start;
        }

            /* recherche full width */
            .cart-toolbar .right input.form-control[b-22hkxhd6rc] {
                max-width: none;
                width: min(560px, 100%);
            }

        /* * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * CORRECTION CRITIQUE 
     * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * 'overflow: visible' est requis pour que les dropdowns 
     * puissent s'afficher.
     * 'flex-wrap: wrap' gère le débordement des filtres.
    */
        .cart-toolbar .toggles[b-22hkxhd6rc] {
            max-width: 100%;
            overflow: visible !important; /* <-- CORRECTION */
            flex-wrap: wrap; /* <-- AJOUT */
            padding-bottom: 2px;
        }
}

/* ≤ 768px : on empile plus */
@media (max-width: 768px) {
    /* * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * CORRECTION CRITIQUE 
     * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * 'overflow: visible' est aussi requis ici si la toolbar
     * passe en mode 'fixed'.
    */
    .cart-toolbar--fixed[b-22hkxhd6rc] {
        overflow: visible !important; /* <-- CORRECTION */
    }

    .cart-toolbar .order-title[b-22hkxhd6rc] {
        font-size: .95rem;
        max-width: 70vw;
    }

    .cart-toolbar .left[b-22hkxhd6rc],
    .cart-toolbar .right[b-22hkxhd6rc] {
        gap: .5rem;
        flex-wrap: wrap;
    }

    /* DxComboBox full width */
    .cart-toolbar .toggles > *[b-22hkxhd6rc] {
        flex: 1 1 220px;
        min-width: 200px;
    }
}

/* ≤ 576px : layout en colonnes */
@media (max-width: 576px) {
    .cart-toolbar[b-22hkxhd6rc] {
        padding: .5rem .5rem;
    }

        .cart-toolbar .left[b-22hkxhd6rc] {
            flex-direction: column;
            align-items: stretch;
        }

        .cart-toolbar .order-title[b-22hkxhd6rc] {
            width: 100%;
            max-width: 100%;
        }

        /* (overflow: visible est déjà bon à ce breakpoint) */
        .cart-toolbar .toggles[b-22hkxhd6rc] {
            width: 100%;
            flex-wrap: wrap;
            gap: .5rem;
            overflow: visible;
        }

            .cart-toolbar .toggles > *[b-22hkxhd6rc] {
                flex: 1 1 100%;
                min-width: 0;
            }

        .cart-toolbar .right[b-22hkxhd6rc] {
            flex-direction: column;
            align-items: stretch;
        }

            .cart-toolbar .right input.form-control[b-22hkxhd6rc] {
                width: 100%;
                max-width: none;
            }

            .cart-toolbar .right small.text-muted[b-22hkxhd6rc] {
                order: 2;
                margin-top: .25rem;
            }

            .cart-toolbar .right .toggle[b-22hkxhd6rc] {
                order: 3;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

                .cart-toolbar .right .toggle .mt-2[b-22hkxhd6rc] {
                    margin-top: .25rem !important;
                    text-align: left !important;
                }
}

/* ≤ 420px : micro-ajustements */
@media (max-width: 420px) {
    .cart-toolbar .right .label[b-22hkxhd6rc] {
        display: none; /* cache "Panier" */
    }
}


/* =================================================================== */
/* 4. GRILLE PRODUITS & CARTES
/* =================================================================== */

.catalog-grid[b-22hkxhd6rc] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .catalog-grid[b-22hkxhd6rc] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .catalog-grid[b-22hkxhd6rc] {
        grid-template-columns: 1fr;
    }
}

/* Carte */
.item-card[b-22hkxhd6rc] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 10px;
    overflow: hidden; /* Sécurité anti-débordement */
}

.img-wrap[b-22hkxhd6rc] {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    background: #fafafa;
}

    .img-wrap img.thumb[b-22hkxhd6rc] {
        max-height: 140px;
        max-width: 95%;
        object-fit: contain;
    }

/* Conteneur Meta (simplifié) */
.meta[b-22hkxhd6rc] {
    display: block;
}

/* Ligne 1: Code + Stock */
.meta-row[b-22hkxhd6rc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.code[b-22hkxhd6rc] {
    font-weight: 600;
    font-size: .9rem;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.right .stock-badge[b-22hkxhd6rc] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: #eef7ff;
    color: #0b5cab;
    font-size: .85rem;
    white-space: nowrap;
}

.stock-badge.out-of-stock[b-22hkxhd6rc] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

/* Ligne 2: Libellé */
.name[b-22hkxhd6rc] {
    margin-top: 4px;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ligne 3: Prix */
.right.prices[b-22hkxhd6rc] {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.price[b-22hkxhd6rc] {
    font-size: 1.05rem;
    line-height: 1.4;
}

.price-old[b-22hkxhd6rc] {
    text-decoration: line-through;
    opacity: .7;
    font-weight: 600;
}

.price-new[b-22hkxhd6rc] {
    font-weight: 600;
    color: #08a39c;
}

.remise-badge[b-22hkxhd6rc] {
    padding: .15rem .45rem;
    border-radius: .5rem;
    background: #fff3cd;
    color: #7a5b00;
    font-size: .85rem;
}

.break[b-22hkxhd6rc] {
    flex-basis: 100%;
    height: 0;
}

/* Ligne 4: Editeurs (Bonus, Remise, Testeur) */
/* * NOTE: J'utilise .edits-row ici car il est responsive.
 * Assurez-vous que votre HTML utilise <div class="edits-row">
 * pour envelopper les champs Bonus/Remise/Testeur.
*/
.edits-row[b-22hkxhd6rc] {
    display: flex;
    flex-wrap: wrap; /* Clé du responsive */
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

    .edits-row .edit[b-22hkxhd6rc] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 180px; /* S'adapte, base de 180px */
        min-width: 160px; /* Seuil pour "wrapper" */
    }

        .edits-row .edit label[b-22hkxhd6rc] {
            white-space: nowrap;
            font-size: .85rem;
            color: #6b7280;
        }


/* Ligne 5: Contrôles Quantité */
.qty-controls[b-22hkxhd6rc] {
    display: flex;
    align-items: center;
    justify-content: center; /* Centré */
    gap: 10px;
    margin-top: 10px;
}

    .qty-controls label[b-22hkxhd6rc] {
        font-size: .9rem;
        color: #6b7280;
        font-weight: 500;
    }

.btn-round[b-22hkxhd6rc] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    user-select: none;
}

    .btn-round:disabled[b-22hkxhd6rc] {
        opacity: .4;
        cursor: not-allowed;
    }

    .btn-round.plus[b-22hkxhd6rc] {
        border-color: #08a39c;
        color: #08a39c;
        background: #f0fdfa;
    }

    .btn-round:not(.plus)[b-22hkxhd6rc] {
        border-color: #f87171;
        color: #f87171;
        background: #fef2f2;
    }


/* =================================================================== */
/* 5. POPUP PANIER & STOCK
/* =================================================================== */

.popup-body-scroll[b-22hkxhd6rc] {
    display: flex;
    flex-direction: column;
}

/* Liste scrollable */
.cart-list[b-22hkxhd6rc] {
    flex: 1 1 auto;
    max-height: 60vh; /* limite en hauteur */
    overflow-y: auto;
    padding: 12px;
}

/* Lignes du panier */
.cart-line[b-22hkxhd6rc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 8px;
}

    .cart-line .info[b-22hkxhd6rc] {
        flex: 1 1 auto;
    }

    .cart-line .title[b-22hkxhd6rc] {
        font-weight: 600;
    }

    .cart-line .meta[b-22hkxhd6rc] {
        font-size: .85rem;
        color: #555;
    }

    .cart-line .actions[b-22hkxhd6rc] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        flex: 0 0 auto;
        padding-left: 10px;
    }

    .cart-line .total[b-22hkxhd6rc] {
        font-weight: 600;
        color: #08a39c;
        font-size: 1.05rem;
    }

.delete-btn[b-22hkxhd6rc] {
    background: #fff;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

    .delete-btn:hover:not(:disabled)[b-22hkxhd6rc] {
        background: #fee2e2;
    }

    .delete-btn:disabled[b-22hkxhd6rc] {
        opacity: .5;
        cursor: not-allowed;
    }

/* Footer (Total) du panier */
.footer-actions[b-22hkxhd6rc] {
    flex: 0 0 auto;
    border-top: 1px solid #ddd;
    padding: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fafafa;
}

.grand-total[b-22hkxhd6rc] {
    font-size: 1.1rem;
    font-weight: 500;
}

    .grand-total b[b-22hkxhd6rc] {
        color: #08a39c;
        font-size: 1.2rem;
    }

.grand-reste[b-22hkxhd6rc] {
    font-size: 1.1rem;
    font-weight: 500;
}

    .grand-reste b[b-22hkxhd6rc] {
        color: #FF0000;
        font-size: 1.2rem;
    }
/* Responsive Panier */
@media (max-width:640px) {
    .cart-line[b-22hkxhd6rc] {
        flex-direction: column;
    }

        .cart-line .actions[b-22hkxhd6rc] {
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
        }
}

/* Footer du popup de Stock */
.popup-footer-buttons[b-22hkxhd6rc] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 1rem;
}
.dxbl-overlay[b-22hkxhd6rc], .dxbl-overlay-content[b-22hkxhd6rc], .dxbl-dropdown[b-22hkxhd6rc], .dxbl-dropdown-list[b-22hkxhd6rc] {
    position: fixed !important; /* ou absolute selon layout */
    z-index: 9999 !important;
}
.cart-toolbar .right[b-22hkxhd6rc] {
    overflow: visible !important;
    z-index: 100 !important; /* ou auto si 100 pose problème */
   
}
/* Carte commande */
.order-card[b-22hkxhd6rc] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.order-card--compact[b-22hkxhd6rc] {
    padding: 8px 10px;
    gap: 6px;
}
.oc-r1[b-22hkxhd6rc] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

    .oc-r1 .left[b-22hkxhd6rc] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
.dxbl-dropdown-menu-container[b-22hkxhd6rc],
.dxbl-combobox-popup[b-22hkxhd6rc],
.dxi-dropdown-menu-container[b-22hkxhd6rc] {
    /* Doit être supérieur au ZIndex="2000" de votre DxPopup.
    */
    z-index: 2001 !important;
    /* 'fixed' permet à l'élément de s'ancrer par rapport 
      à la fenêtre du navigateur, et non par rapport 
      au parent 'overflow' de la popup.
    */
    position: fixed !important;
}


.page-wrap[b-22hkxhd6rc] {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.catalog-grid[b-22hkxhd6rc] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Barre de recherche centrée */
.search-bar[b-22hkxhd6rc] {
    padding: 10px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    background: #fff;
}

.search-input[b-22hkxhd6rc] {
    width: 60%;
    max-width: 450px;
}

/* Zone scrollable */
.cart-scroll[b-22hkxhd6rc] {
    flex: 1; /* prend tout l’espace restant */
    overflow-y: auto; /* scroll vertical */
    padding: 10px;
}

/* Pour être joli */
.cart-list[b-22hkxhd6rc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* /Pages/Xbltocart.razor.rz.scp.css */
/* =================================================================== */
/* 1. OVERRIDES GLOBAUX & HIDE LAYOUT
/* =================================================================== */

/* Hide MainLayout elements to maximize space */
[b-oogfyiqgzk] .topbar {
    display: none !important;
}

[b-oogfyiqgzk] .sidebar {
    display: none !important;
}

[b-oogfyiqgzk] .content {
    margin-top: 0 !important;
    margin-left: 0 !important;
}

[b-oogfyiqgzk] main.container-fluid {
    padding: 0 !important;
}

[b-oogfyiqgzk] main {
    padding-top: 0 !important;
}

/* Force les popups/dropdowns DevExpress AU-DESSUS de la toolbar (1100) */
[b-oogfyiqgzk] .dxbl-overlay,
[b-oogfyiqgzk] .dxbl-overlay-content,
[b-oogfyiqgzk] .dxbl-dropdown,
[b-oogfyiqgzk] .dxbl-dropdown-list {
    z-index: 5000 !important;
}

.cart-toolbar .toggles[b-oogfyiqgzk],
.cart-toolbar--fixed[b-oogfyiqgzk] {
    overflow: visible !important;
}

/* (Optionnel) petit espace visuel sous la toolbar */
[b-oogfyiqgzk] .dxbl-dropdown-list {
    margin-top: 4px;
}

/* Style de base pour les inputs numériques */
[b-oogfyiqgzk] .dxbl-spin-edit-input {
    text-align: center;
}

.cursor-pointer[b-oogfyiqgzk] {
    cursor: pointer !important;
}

/* Style pour les petits SpinEdit (Bonus, Testeur) */
[b-oogfyiqgzk] .spin-small .dxbl-spin-edit,
[b-oogfyiqgzk] .spin-small .dxbl-spin-edit-input {
    width: 60px !important;
    max-width: 60px !important;
}

/* Style pour le SpinEdit de Quantité */
[b-oogfyiqgzk] .spin-qty .dxbl-spin-edit,
[b-oogfyiqgzk] .spin-qty .dxbl-spin-edit-input {
    width: 110px !important;
    max-width: 110px !important;
}

/* Style de la police pour la quantité (rouge si > 0) */
.spinEditPositive[b-oogfyiqgzk] {
    color: red !important;
    text-align: center;
    font-weight: 700;
    max-width: 110px !important;
    flex: 0 0 110px;
}

/* Style de la police pour la quantité (par défaut) */
.spinEditDefault[b-oogfyiqgzk] {
    color: black !important;
    text-align: center;
    max-width: 110px !important;
    flex: 0 0 110px;
}


/* =================================================================== */
/* 2. TOOLBAR (Sticky / Fixed)
/* =================================================================== */

.cart-toolbar[b-oogfyiqgzk] {
    display: flex;
    flex-direction: column;
    padding: 6px 12px;
    position: sticky;
    top: 0;
    z-index: 1500;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tb-top-row[b-oogfyiqgzk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.left-section[b-oogfyiqgzk] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 0;
}

.order-id[b-oogfyiqgzk] {
    font-weight: 800;
    font-size: 0.95rem;
    color: #1e293b;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-section[b-oogfyiqgzk] {
    flex-grow: 1;
    min-width: 0;
}

.tb-search-group[b-oogfyiqgzk] {
    width: 100%;
}

.tb-search-group .btn[b-oogfyiqgzk] {
    padding: 0.375rem 0.6rem;
}

.right-section[b-oogfyiqgzk] {
    flex-shrink: 0;
}

.totals-compact-pill[b-oogfyiqgzk] {
    display: flex;
    align-items: center;
    background: #08a39c;
    color: white;
    padding: 4px 10px;
    border-radius: 999px;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(8, 163, 156, 0.3);
}

.tot-value[b-oogfyiqgzk] {
    font-weight: 800;
    font-size: 0.9rem;
}

.tot-badge[b-oogfyiqgzk] {
    background: #f43f5e;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 6px;
}

/* Row 2 : Status Client */
.tb-bottom-row[b-oogfyiqgzk] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}

.client-status-line[b-oogfyiqgzk] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.st-item[b-oogfyiqgzk] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.status-ok[b-oogfyiqgzk] {
    background: #dcfce7;
    color: #166534;
}

.status-warn[b-oogfyiqgzk] {
    background: #fef9c3;
    color: #854d0e;
}

.status-danger[b-oogfyiqgzk] {
    background: #fee2e2;
    color: #991b1b;
}

/* Responsive BREAKPOINTS */

/* Tablet Portrait & Mobile Landscape */
@media (max-width: 992px) {
    .order-id[b-oogfyiqgzk] {
        font-size: 0.85rem;
    }

    .totals-compact-pill .tot-label[b-oogfyiqgzk] {
        display: none;
    }
}

/* Responsive Mobile (Si vraiment étroit) */
@media (max-width: 600px) {
    .tb-top-row[b-oogfyiqgzk] {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 4px;
    }

    .search-section[b-oogfyiqgzk] {
        grid-column: 1 / span 3;
        order: 3;
    }

    .left-section[b-oogfyiqgzk] {
        order: 1;
    }

    .right-section[b-oogfyiqgzk] {
        order: 2;
    }

    .catalog-grid[b-oogfyiqgzk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 6px;
    }

    .item-card[b-oogfyiqgzk] {
        padding: 0.6rem;
        border-radius: 0.75rem;
        gap: 0.35rem;
    }

    .img-wrap[b-oogfyiqgzk] {
        height: 100px;
    }

    .name[b-oogfyiqgzk] {
        font-size: 0.85rem;
        height: 2.5rem;
        line-height: 1.2;
    }

    .price-section[b-oogfyiqgzk] {
        gap: 0.3rem;
        margin-top: 0.1rem;
    }

    .price-val[b-oogfyiqgzk] {
        font-size: 1rem;
    }

    .edits-grid[b-oogfyiqgzk] {
        padding: 0.3rem;
        gap: 0.3rem;
        border-radius: 0.5rem;
    }

    .card-input[b-oogfyiqgzk] {
        height: 30px;
        font-size: 0.85rem;
    }

    .qty-pill-container[b-oogfyiqgzk] {
        height: 38px;
        margin-top: 0.2rem;
    }

    .qty-btn[b-oogfyiqgzk] {
        width: 1.8rem;
        height: 1.8rem;
    }
}

/* Mobile Landscape Specific - Aggressive compaction */
@media (max-height: 500px) {
    .cart-toolbar[b-oogfyiqgzk] {
        padding: 2px 8px;
    }

    .tb-bottom-row[b-oogfyiqgzk] {
        margin-top: 0;
        padding-top: 0;
        border: none;
    }

    .client-status-line[b-oogfyiqgzk] {
        gap: 4px;
    }

    .st-item[b-oogfyiqgzk] {
        font-size: 0.65rem;
        padding: 0px 6px;
    }

    .catalog-grid[b-oogfyiqgzk] {
        gap: 6px;
        padding: 4px;
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* 3 cols in landscape to see more */
    .item-card[b-oogfyiqgzk] {
        padding: 0.4rem;
        gap: 0.15rem;
        border-radius: 0.5rem;
    }

    .img-wrap[b-oogfyiqgzk] {
        height: 60px;
    }

    /* Even smaller image in landscape */
    .meta-header[b-oogfyiqgzk] {
        gap: 0.1rem;
    }

    .code[b-oogfyiqgzk] {
        font-size: 0.6rem;
        padding: 0px 0.3rem;
    }

    .stock-badge[b-oogfyiqgzk] {
        font-size: 0.6rem;
        padding: 0px 0.2rem;
    }

    .name[b-oogfyiqgzk] {
        font-size: 0.75rem;
        height: 2.1rem;
        margin-top: 0px;
        line-height: 1.1;
    }

    .price-section[b-oogfyiqgzk] {
        margin-top: 0;
    }

    .price-val[b-oogfyiqgzk] {
        font-size: 0.9rem;
    }

    .price-old[b-oogfyiqgzk] {
        display: none;
    }

    /* Hide old price in landscape to save height */

    .edits-grid[b-oogfyiqgzk] {
        display: grid !important;
        padding: 0.2rem;
        gap: 0.2rem;
    }

    .edit-cell label[b-oogfyiqgzk] {
        display: none;
    }

    .card-input[b-oogfyiqgzk] {
        height: 24px;
        font-size: 0.75rem;
        padding: 0;
    }

    .qty-pill-container[b-oogfyiqgzk] {
        margin-top: 0.1rem;
        height: 30px;
        padding: 0.1rem;
    }

    .qty-btn[b-oogfyiqgzk] {
        width: 1.6rem;
        height: 1.6rem;
        font-size: 0.9rem;
    }

    .qty-num[b-oogfyiqgzk] {
        font-size: 0.9rem;
    }
}

/* Extra Small Screens */
@media (max-width: 400px) {
    .catalog-grid[b-oogfyiqgzk] {
        grid-template-columns: 1fr;
    }
}

/* Spacer for Fixed segments - REMOVED */
.toolbar-spacer[b-oogfyiqgzk] {
    display: none !important;
}


/* =================================================================== */
/* 4. GRILLE PRODUITS & CARTES (Premium Design)
/* =================================================================== */


.page-init[b-oogfyiqgzk] {
    background: #f8fafc;
}

.catalog-grid[b-oogfyiqgzk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0.75rem;
}

.item-card[b-oogfyiqgzk] {
    position: relative;
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.item-card:hover[b-oogfyiqgzk] {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

/* État 'Dans le panier' */
.item-card.has-qty[b-oogfyiqgzk] {
    border-color: #08a39c;
    background: #f0fdfa;
    box-shadow: 0 0 0 2px rgba(8, 163, 156, 0.15);
}

.item-card.has-qty[b-oogfyiqgzk]::after {
    content: '🛒';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    opacity: 0.8;
}

/* Zone Image */
.img-wrap[b-oogfyiqgzk] {
    width: 100%;
    height: 160px;
    border-radius: 1rem;
    background: #f1f5f9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.3s;
}

.img-wrap .thumb[b-oogfyiqgzk] {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.5s ease-out;
}

.item-card:hover .thumb[b-oogfyiqgzk] {
    transform: scale(1.1) rotate(2deg);
}

/* Meta Data Wrapper */
.meta[b-oogfyiqgzk] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.meta-header[b-oogfyiqgzk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.code[b-oogfyiqgzk] {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-pills[b-oogfyiqgzk] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.stock-badge[b-oogfyiqgzk] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    color: #475569;
}

.stock-badge.available[b-oogfyiqgzk] {
    background: #dcfce7;
    color: #166534;
}

.stock-badge.out-of-stock[b-oogfyiqgzk] {
    background: #fee2e2;
    color: #991b1b;
}

.stock-badge.reserved[b-oogfyiqgzk] {
    background: #fef9c3;
    color: #854d0e;
}

.name[b-oogfyiqgzk] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.25rem;
    height: 3.1rem;
    /* Fix hauteur constante */
}

/* Prices Area */
.price-section[b-oogfyiqgzk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.price-val[b-oogfyiqgzk] {
    font-size: 1.4rem;
    font-weight: 900;
    color: #0f172a;
}

.price-old[b-oogfyiqgzk] {
    font-size: 0.9rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.discount-tag[b-oogfyiqgzk] {
    background: #f43f5e;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    border-radius: 0.4rem;
}

/* Edits Row (Bonus, Remise, Testeur) */
.edits-grid[b-oogfyiqgzk] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    background: #f8fafc;
    padding: 0.75rem;
    border-radius: 1rem;
    border: 1px solid #f1f5f9;
}

.edit-cell[b-oogfyiqgzk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.edit-cell label[b-oogfyiqgzk] {
    font-size: 0.7rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
}

.card-input[b-oogfyiqgzk] {
    border: 2px solid #e2e8f0;
    border-radius: 0.6rem;
    padding: 0.4rem;
    font-weight: 700;
    text-align: center;
    background: white;
    transition: all 0.2s;
    height: 42px;
    width: 100% !important;
}

.card-input:focus[b-oogfyiqgzk] {
    border-color: #08a39c;
    box-shadow: 0 0 0 3px rgba(8, 163, 156, 0.1);
}

.card-input.positive[b-oogfyiqgzk] {
    color: #08a39c;
    background: #f0fdfa;
    border-color: #5eead4;
}

/* Quantity Pill Controls */
.qty-pill-container[b-oogfyiqgzk] {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 1rem;
    padding: 0.4rem;
    margin-top: 0.5rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.qty-btn[b-oogfyiqgzk] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    border: none;
    background: white;
    color: #475569;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.qty-btn:hover:not(:disabled)[b-oogfyiqgzk] {
    background: #f8fafc;
    color: #0f172a;
}

.qty-btn.plus[b-oogfyiqgzk] {
    background: #08a39c;
    color: white;
}

.qty-btn.plus:hover[b-oogfyiqgzk] {
    background: #068a84;
}

.qty-btn:active[b-oogfyiqgzk] {
    transform: scale(0.92);
}

.qty-btn:disabled[b-oogfyiqgzk] {
    opacity: 0.3;
}

.qty-num[b-oogfyiqgzk] {
    flex-grow: 1;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 900;
    color: #1e293b;
    cursor: pointer;
}

/* ------------------------------------------------------------------- */
/* SMART SEARCH GRID - Ultra Compact but Premium
/* ------------------------------------------------------------------- */

.smart-search-grid[b-oogfyiqgzk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 0.75rem !important;
    padding: 0.5rem !important;
}

.smart-search-grid .item-card[b-oogfyiqgzk] {
    padding: 1rem;
    gap: 0.5rem;
}

.smart-search-grid .img-wrap[b-oogfyiqgzk] {
    height: 110px;
}

.smart-search-grid .edits-grid[b-oogfyiqgzk] {
    display: grid !important;
    padding: 0.5rem;
    gap: 0.5rem;
}

.smart-search-grid .name[b-oogfyiqgzk] {
    font-size: 0.9rem;
    height: 2.6rem;
}

.smart-search-grid .price-val[b-oogfyiqgzk] {
    font-size: 1.2rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .catalog-grid[b-oogfyiqgzk] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 0.5rem;
    }

    .item-card[b-oogfyiqgzk] {
        padding: 1rem;
        border-radius: 1.25rem;
    }

    .img-wrap[b-oogfyiqgzk] {
        height: 130px;
    }

    .name[b-oogfyiqgzk] {
        font-size: 0.95rem;
        height: 2.8rem;
    }

    .price-val[b-oogfyiqgzk] {
        font-size: 1.15rem;
    }

    .qty-btn[b-oogfyiqgzk] {
        width: 2.25rem;
        height: 2.25rem;
    }
}



/* =================================================================== */
/* 5. POPUP PANIER & STOCK
/* =================================================================== */

.popup-body-scroll[b-oogfyiqgzk] {
    display: flex;
    flex-direction: column;
}

/* Liste scrollable */
.cart-list[b-oogfyiqgzk] {
    flex: 1 1 auto;
    max-height: 55vh;
    overflow-y: auto;
    padding: 12px;
}

@media (max-height: 500px) {
    .cart-list[b-oogfyiqgzk] {
        max-height: 40vh;
    }
}

/* Lignes du panier COMPACT */
.cart-line-compact[b-oogfyiqgzk] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: border-color 0.2s;
}

.cart-line-compact:hover[b-oogfyiqgzk] {
    border-color: #cbd5e1;
}

.cl-top[b-oogfyiqgzk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.cl-product[b-oogfyiqgzk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cl-ref[b-oogfyiqgzk] {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.1rem 0.4rem;
    border-radius: 0.4rem;
    white-space: nowrap;
}

.cl-name[b-oogfyiqgzk] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-total[b-oogfyiqgzk] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #08a39c;
    flex-shrink: 0;
}

.cl-total small[b-oogfyiqgzk] {
    font-size: 0.7rem;
    opacity: 0.7;
}

.cl-bottom[b-oogfyiqgzk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cl-details[b-oogfyiqgzk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cl-item[b-oogfyiqgzk] {
    font-size: 0.8rem;
    color: #64748b;
}

.cl-item b[b-oogfyiqgzk] {
    color: #334155;
}

.cl-item.remise[b-oogfyiqgzk] {
    color: #f43f5e;
    font-weight: 700;
}

.cl-item.bonus[b-oogfyiqgzk] {
    color: #08a39c;
    background: #f0fdfa;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.75rem;
}

.cl-delete[b-oogfyiqgzk] {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 0.25rem;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 1.1rem;
}

.cl-delete:hover[b-oogfyiqgzk] {
    color: #ef4444;
}

/* Footer (Total) du panier */
.footer-actions[b-oogfyiqgzk] {
    flex: 0 0 auto;
    border-top: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}

.footer-actions .text-muted[b-oogfyiqgzk] {
    font-size: 0.85rem;
}

.footer-actions .text-success[b-oogfyiqgzk] {
    font-size: 0.85rem;
    font-weight: 700;
}

.grand-total[b-oogfyiqgzk] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin-top: 0.25rem;
}

.text-vibrant[b-oogfyiqgzk] {
    color: #08a39c;
}

/* Footer du popup de Stock */
.popup-footer-buttons[b-oogfyiqgzk] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 1rem;
}

.dxbl-overlay[b-oogfyiqgzk],
.dxbl-overlay-content[b-oogfyiqgzk],
.dxbl-dropdown[b-oogfyiqgzk],
.dxbl-dropdown-list[b-oogfyiqgzk] {
    position: fixed !important;
    /* ou absolute selon layout */
    z-index: 9999 !important;
}

.cart-toolbar .right[b-oogfyiqgzk] {
    overflow: visible !important;
    z-index: 100 !important;
    /* ou auto si 100 pose problème */

}

/* Carte commande */
.order-card[b-oogfyiqgzk] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-card--compact[b-oogfyiqgzk] {
    padding: 8px 10px;
    gap: 6px;
}

.oc-r1[b-oogfyiqgzk] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.oc-r1 .left[b-oogfyiqgzk] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dxbl-dropdown-menu-container[b-oogfyiqgzk],
.dxbl-combobox-popup[b-oogfyiqgzk],
.dxi-dropdown-menu-container[b-oogfyiqgzk] {
    /* Doit être supérieur au ZIndex="2000" de votre DxPopup.
    */
    z-index: 2001 !important;
    /* 'fixed' permet à l'élément de s'ancrer par rapport 
      à la fenêtre du navigateur, et non par rapport 
      au parent 'overflow' de la popup.
    */
    position: fixed !important;
}
/* /Pages/xcommandetocart.razor.rz.scp.css */
/* =================================================================== */
/* 1. OVERRIDES GLOBAUX & HIDE LAYOUT
/* =================================================================== */

/* Hide MainLayout elements to maximize space */
[b-ni9dagjn5b] .topbar {
    display: none !important;
}

[b-ni9dagjn5b] .sidebar {
    display: none !important;
}

[b-ni9dagjn5b] .content {
    margin-top: 0 !important;
    margin-left: 0 !important;
}

[b-ni9dagjn5b] main.container-fluid {
    padding: 0 !important;
}

[b-ni9dagjn5b] main {
    padding-top: 0 !important;
}

/* Force les popups/dropdowns DevExpress AU-DESSUS de la toolbar (1100) */
[b-ni9dagjn5b] .dxbl-overlay,
[b-ni9dagjn5b] .dxbl-overlay-content,
[b-ni9dagjn5b] .dxbl-dropdown,
[b-ni9dagjn5b] .dxbl-dropdown-list {
    z-index: 5000 !important;
}

.cart-toolbar .toggles[b-ni9dagjn5b],
.cart-toolbar--fixed[b-ni9dagjn5b] {
    overflow: visible !important;
}

/* (Optionnel) petit espace visuel sous la toolbar */
[b-ni9dagjn5b] .dxbl-dropdown-list {
    margin-top: 4px;
}

/* Style de base pour les inputs numériques */
[b-ni9dagjn5b] .dxbl-spin-edit-input {
    text-align: center;
}

.cursor-pointer[b-ni9dagjn5b] {
    cursor: pointer !important;
}

/* Style pour les petits SpinEdit (Bonus, Testeur) */
[b-ni9dagjn5b] .spin-small .dxbl-spin-edit,
[b-ni9dagjn5b] .spin-small .dxbl-spin-edit-input {
    width: 60px !important;
    max-width: 60px !important;
}

/* Style pour le SpinEdit de Quantité */
[b-ni9dagjn5b] .spin-qty .dxbl-spin-edit,
[b-ni9dagjn5b] .spin-qty .dxbl-spin-edit-input {
    width: 110px !important;
    max-width: 110px !important;
}

/* Style de la police pour la quantité (rouge si > 0) */
.spinEditPositive[b-ni9dagjn5b] {
    color: red !important;
    text-align: center;
    font-weight: 700;
    max-width: 110px !important;
    flex: 0 0 110px;
}

/* Style de la police pour la quantité (par défaut) */
.spinEditDefault[b-ni9dagjn5b] {
    color: black !important;
    text-align: center;
    max-width: 110px !important;
    flex: 0 0 110px;
}


/* =================================================================== */
/* 2. TOOLBAR (Sticky / Fixed)
/* =================================================================== */

.cart-toolbar[b-ni9dagjn5b] {
    display: flex;
    flex-direction: column;
    padding: 6px 12px;
    position: sticky;
    top: 0;
    z-index: 1500;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tb-top-row[b-ni9dagjn5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.left-section[b-ni9dagjn5b] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 0;
}

.order-id[b-ni9dagjn5b] {
    font-weight: 800;
    font-size: 0.95rem;
    color: #1e293b;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-section[b-ni9dagjn5b] {
    flex-grow: 1;
    min-width: 0;
}

.tb-search-group[b-ni9dagjn5b] {
    width: 100%;
}

.tb-search-group .btn[b-ni9dagjn5b] {
    padding: 0.375rem 0.6rem;
}

.right-section[b-ni9dagjn5b] {
    flex-shrink: 0;
}

.totals-compact-pill[b-ni9dagjn5b] {
    display: flex;
    align-items: center;
    background: #08a39c;
    color: white;
    padding: 4px 10px;
    border-radius: 999px;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(8, 163, 156, 0.3);
}

.tot-value[b-ni9dagjn5b] {
    font-weight: 800;
    font-size: 0.9rem;
}

.tot-badge[b-ni9dagjn5b] {
    background: #f43f5e;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 6px;
}

/* Row 2 : Status Client */
.tb-bottom-row[b-ni9dagjn5b] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}

.client-status-line[b-ni9dagjn5b] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.st-item[b-ni9dagjn5b] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.status-ok[b-ni9dagjn5b] {
    background: #dcfce7;
    color: #166534;
}

.status-warn[b-ni9dagjn5b] {
    background: #fef9c3;
    color: #854d0e;
}

.status-danger[b-ni9dagjn5b] {
    background: #fee2e2;
    color: #991b1b;
}

/* Responsive BREAKPOINTS */

/* Tablet Portrait & Mobile Landscape */
@media (max-width: 992px) {
    .order-id[b-ni9dagjn5b] {
        font-size: 0.85rem;
    }

    .totals-compact-pill .tot-label[b-ni9dagjn5b] {
        display: none;
    }
}

/* Responsive Mobile (Si vraiment étroit) */
@media (max-width: 600px) {
    .tb-top-row[b-ni9dagjn5b] {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 4px;
    }

    .search-section[b-ni9dagjn5b] {
        grid-column: 1 / span 3;
        order: 3;
    }

    .left-section[b-ni9dagjn5b] {
        order: 1;
    }

    .right-section[b-ni9dagjn5b] {
        order: 2;
    }

    .catalog-grid[b-ni9dagjn5b] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 6px;
    }

    .item-card[b-ni9dagjn5b] {
        padding: 0.6rem;
        border-radius: 0.75rem;
        gap: 0.35rem;
    }

    .img-wrap[b-ni9dagjn5b] {
        height: 100px;
    }

    .name[b-ni9dagjn5b] {
        font-size: 0.85rem;
        height: 2.5rem;
        line-height: 1.2;
    }

    .price-section[b-ni9dagjn5b] {
        gap: 0.3rem;
        margin-top: 0.1rem;
    }

    .price-val[b-ni9dagjn5b] {
        font-size: 1rem;
    }

    .edits-grid[b-ni9dagjn5b] {
        padding: 0.3rem;
        gap: 0.3rem;
        border-radius: 0.5rem;
    }

    .card-input[b-ni9dagjn5b] {
        height: 30px;
        font-size: 0.85rem;
    }

    .qty-pill-container[b-ni9dagjn5b] {
        height: 38px;
        margin-top: 0.2rem;
    }

    .qty-btn[b-ni9dagjn5b] {
        width: 1.8rem;
        height: 1.8rem;
    }
}

/* Mobile Landscape Specific - Aggressive compaction */
@media (max-height: 500px) {
    .cart-toolbar[b-ni9dagjn5b] {
        padding: 2px 8px;
    }

    .tb-bottom-row[b-ni9dagjn5b] {
        margin-top: 0;
        padding-top: 0;
        border: none;
    }

    .client-status-line[b-ni9dagjn5b] {
        gap: 4px;
    }

    .st-item[b-ni9dagjn5b] {
        font-size: 0.65rem;
        padding: 0px 6px;
    }

    .catalog-grid[b-ni9dagjn5b] {
        gap: 6px;
        padding: 4px;
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* 3 cols in landscape to see more */
    .item-card[b-ni9dagjn5b] {
        padding: 0.4rem;
        gap: 0.15rem;
        border-radius: 0.5rem;
    }

    .img-wrap[b-ni9dagjn5b] {
        height: 60px;
    }

    /* Even smaller image in landscape */
    .meta-header[b-ni9dagjn5b] {
        gap: 0.1rem;
    }

    .code[b-ni9dagjn5b] {
        font-size: 0.6rem;
        padding: 0px 0.3rem;
    }

    .stock-badge[b-ni9dagjn5b] {
        font-size: 0.6rem;
        padding: 0px 0.2rem;
    }

    .name[b-ni9dagjn5b] {
        font-size: 0.75rem;
        height: 2.1rem;
        margin-top: 0px;
        line-height: 1.1;
    }

    .price-section[b-ni9dagjn5b] {
        margin-top: 0;
    }

    .price-val[b-ni9dagjn5b] {
        font-size: 0.9rem;
    }

    .price-old[b-ni9dagjn5b] {
        display: none;
    }

    /* Hide old price in landscape to save height */

    .edits-grid[b-ni9dagjn5b] {
        display: grid !important;
        padding: 0.2rem;
        gap: 0.2rem;
    }

    .edit-cell label[b-ni9dagjn5b] {
        display: none;
    }

    .card-input[b-ni9dagjn5b] {
        height: 24px;
        font-size: 0.75rem;
        padding: 0;
    }

    .qty-pill-container[b-ni9dagjn5b] {
        margin-top: 0.1rem;
        height: 30px;
        padding: 0.1rem;
    }

    .qty-btn[b-ni9dagjn5b] {
        width: 1.6rem;
        height: 1.6rem;
        font-size: 0.9rem;
    }

    .qty-num[b-ni9dagjn5b] {
        font-size: 0.9rem;
    }
}

/* Extra Small Screens */
@media (max-width: 400px) {
    .catalog-grid[b-ni9dagjn5b] {
        grid-template-columns: 1fr;
    }
}

/* Spacer for Fixed segments - REMOVED */
.toolbar-spacer[b-ni9dagjn5b] {
    display: none !important;
}


/* =================================================================== */
/* 4. GRILLE PRODUITS & CARTES (Premium Design)
/* =================================================================== */


.page-init[b-ni9dagjn5b] {
    background: #f8fafc;
}

.catalog-grid[b-ni9dagjn5b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0.75rem;
}

.item-card[b-ni9dagjn5b] {
    position: relative;
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.item-card:hover[b-ni9dagjn5b] {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

/* État 'Dans le panier' */
.item-card.has-qty[b-ni9dagjn5b] {
    border-color: #08a39c;
    background: #f0fdfa;
    box-shadow: 0 0 0 2px rgba(8, 163, 156, 0.15);
}

.item-card.has-qty[b-ni9dagjn5b]::after {
    content: '🛒';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    opacity: 0.8;
}

/* Zone Image */
.img-wrap[b-ni9dagjn5b] {
    width: 100%;
    height: 160px;
    border-radius: 1rem;
    background: #f1f5f9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.3s;
}

.img-wrap .thumb[b-ni9dagjn5b] {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.5s ease-out;
}

.item-card:hover .thumb[b-ni9dagjn5b] {
    transform: scale(1.1) rotate(2deg);
}

/* Meta Data Wrapper */
.meta[b-ni9dagjn5b] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.meta-header[b-ni9dagjn5b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.code[b-ni9dagjn5b] {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-pills[b-ni9dagjn5b] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.stock-badge[b-ni9dagjn5b] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    color: #475569;
}

.stock-badge.available[b-ni9dagjn5b] {
    background: #dcfce7;
    color: #166534;
}

.stock-badge.out-of-stock[b-ni9dagjn5b] {
    background: #fee2e2;
    color: #991b1b;
}

.stock-badge.reserved[b-ni9dagjn5b] {
    background: #fef9c3;
    color: #854d0e;
}

.name[b-ni9dagjn5b] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.25rem;
    height: 3.1rem;
    /* Fix hauteur constante */
}

/* Prices Area */
.price-section[b-ni9dagjn5b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.price-val[b-ni9dagjn5b] {
    font-size: 1.4rem;
    font-weight: 900;
    color: #0f172a;
}

.price-old[b-ni9dagjn5b] {
    font-size: 0.9rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.discount-tag[b-ni9dagjn5b] {
    background: #f43f5e;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    border-radius: 0.4rem;
}

/* Edits Row (Bonus, Remise, Testeur) */
.edits-grid[b-ni9dagjn5b] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    background: #f8fafc;
    padding: 0.75rem;
    border-radius: 1rem;
    border: 1px solid #f1f5f9;
}

.edit-cell[b-ni9dagjn5b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.edit-cell label[b-ni9dagjn5b] {
    font-size: 0.7rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
}

.card-input[b-ni9dagjn5b] {
    border: 2px solid #e2e8f0;
    border-radius: 0.6rem;
    padding: 0.4rem;
    font-weight: 700;
    text-align: center;
    background: white;
    transition: all 0.2s;
    height: 42px;
    width: 100% !important;
}

.card-input:focus[b-ni9dagjn5b] {
    border-color: #08a39c;
    box-shadow: 0 0 0 3px rgba(8, 163, 156, 0.1);
}

.card-input.positive[b-ni9dagjn5b] {
    color: #08a39c;
    background: #f0fdfa;
    border-color: #5eead4;
}

/* Quantity Pill Controls */
.qty-pill-container[b-ni9dagjn5b] {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 1rem;
    padding: 0.4rem;
    margin-top: 0.5rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.qty-btn[b-ni9dagjn5b] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    border: none;
    background: white;
    color: #475569;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.qty-btn:hover:not(:disabled)[b-ni9dagjn5b] {
    background: #f8fafc;
    color: #0f172a;
}

.qty-btn.plus[b-ni9dagjn5b] {
    background: #08a39c;
    color: white;
}

.qty-btn.plus:hover[b-ni9dagjn5b] {
    background: #068a84;
}

.qty-btn:active[b-ni9dagjn5b] {
    transform: scale(0.92);
}

.qty-btn:disabled[b-ni9dagjn5b] {
    opacity: 0.3;
}

.qty-num[b-ni9dagjn5b] {
    flex-grow: 1;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 900;
    color: #1e293b;
    cursor: pointer;
}

/* ------------------------------------------------------------------- */
/* SMART SEARCH GRID - Ultra Compact but Premium
/* ------------------------------------------------------------------- */

.smart-search-grid[b-ni9dagjn5b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 0.75rem !important;
    padding: 0.5rem !important;
}

.smart-search-grid .item-card[b-ni9dagjn5b] {
    padding: 1rem;
    gap: 0.5rem;
}

.smart-search-grid .img-wrap[b-ni9dagjn5b] {
    height: 110px;
}

.smart-search-grid .edits-grid[b-ni9dagjn5b] {
    display: grid !important;
    padding: 0.5rem;
    gap: 0.5rem;
}

.smart-search-grid .name[b-ni9dagjn5b] {
    font-size: 0.9rem;
    height: 2.6rem;
}

.smart-search-grid .price-val[b-ni9dagjn5b] {
    font-size: 1.2rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .catalog-grid[b-ni9dagjn5b] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 0.5rem;
    }

    .item-card[b-ni9dagjn5b] {
        padding: 1rem;
        border-radius: 1.25rem;
    }

    .img-wrap[b-ni9dagjn5b] {
        height: 130px;
    }

    .name[b-ni9dagjn5b] {
        font-size: 0.95rem;
        height: 2.8rem;
    }

    .price-val[b-ni9dagjn5b] {
        font-size: 1.15rem;
    }

    .qty-btn[b-ni9dagjn5b] {
        width: 2.25rem;
        height: 2.25rem;
    }
}



/* =================================================================== */
/* 5. POPUP PANIER & STOCK
/* =================================================================== */

.popup-body-scroll[b-ni9dagjn5b] {
    display: flex;
    flex-direction: column;
}

/* Liste scrollable */
.cart-list[b-ni9dagjn5b] {
    flex: 1 1 auto;
    max-height: 55vh;
    overflow-y: auto;
    padding: 12px;
}

@media (max-height: 500px) {
    .cart-list[b-ni9dagjn5b] {
        max-height: 40vh;
    }
}

/* Lignes du panier COMPACT */
.cart-line-compact[b-ni9dagjn5b] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: border-color 0.2s;
}

.cart-line-compact:hover[b-ni9dagjn5b] {
    border-color: #cbd5e1;
}

.cl-top[b-ni9dagjn5b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.cl-product[b-ni9dagjn5b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cl-ref[b-ni9dagjn5b] {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.1rem 0.4rem;
    border-radius: 0.4rem;
    white-space: nowrap;
}

.cl-name[b-ni9dagjn5b] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-total[b-ni9dagjn5b] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #08a39c;
    flex-shrink: 0;
}

.cl-total small[b-ni9dagjn5b] {
    font-size: 0.7rem;
    opacity: 0.7;
}

.cl-bottom[b-ni9dagjn5b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cl-details[b-ni9dagjn5b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cl-item[b-ni9dagjn5b] {
    font-size: 0.8rem;
    color: #64748b;
}

.cl-item b[b-ni9dagjn5b] {
    color: #334155;
}

.cl-item.remise[b-ni9dagjn5b] {
    color: #f43f5e;
    font-weight: 700;
}

.cl-item.bonus[b-ni9dagjn5b] {
    color: #08a39c;
    background: #f0fdfa;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.75rem;
}

.cl-delete[b-ni9dagjn5b] {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 0.25rem;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 1.1rem;
}

.cl-delete:hover[b-ni9dagjn5b] {
    color: #ef4444;
}

/* Footer (Total) du panier */
.footer-actions[b-ni9dagjn5b] {
    flex: 0 0 auto;
    border-top: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}

.footer-actions .text-muted[b-ni9dagjn5b] {
    font-size: 0.85rem;
}

.footer-actions .text-success[b-ni9dagjn5b] {
    font-size: 0.85rem;
    font-weight: 700;
}

.grand-total[b-ni9dagjn5b] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin-top: 0.25rem;
}

.text-vibrant[b-ni9dagjn5b] {
    color: #08a39c;
}

/* Footer du popup de Stock */
.popup-footer-buttons[b-ni9dagjn5b] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 1rem;
}

.dxbl-overlay[b-ni9dagjn5b],
.dxbl-overlay-content[b-ni9dagjn5b],
.dxbl-dropdown[b-ni9dagjn5b],
.dxbl-dropdown-list[b-ni9dagjn5b] {
    position: fixed !important;
    /* ou absolute selon layout */
    z-index: 9999 !important;
}

.cart-toolbar .right[b-ni9dagjn5b] {
    overflow: visible !important;
    z-index: 100 !important;
    /* ou auto si 100 pose problème */

}

/* Carte commande */
.order-card[b-ni9dagjn5b] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-card--compact[b-ni9dagjn5b] {
    padding: 8px 10px;
    gap: 6px;
}

.oc-r1[b-ni9dagjn5b] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.oc-r1 .left[b-ni9dagjn5b] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dxbl-dropdown-menu-container[b-ni9dagjn5b],
.dxbl-combobox-popup[b-ni9dagjn5b],
.dxi-dropdown-menu-container[b-ni9dagjn5b] {
    /* Doit être supérieur au ZIndex="2000" de votre DxPopup.
    */
    z-index: 2001 !important;
    /* 'fixed' permet à l'élément de s'ancrer par rapport 
      à la fenêtre du navigateur, et non par rapport 
      au parent 'overflow' de la popup.
    */
    position: fixed !important;
}
/* /Pages/Xfblbarcode.razor.rz.scp.css */
/* =================================================================== */
/* 1. OVERRIDES GLOBAUX DEVEXPRESS
/* =================================================================== */
/* Force les popups/dropdowns DevExpress AU-DESSUS de la toolbar (1100) */
[b-5ld5fchc99] .dxbl-overlay,
[b-5ld5fchc99] .dxbl-overlay-content,
[b-5ld5fchc99] .dxbl-dropdown,
[b-5ld5fchc99] .dxbl-dropdown-list {
    z-index: 5000 !important;
}

.cart-toolbar .toggles[b-5ld5fchc99],
.cart-toolbar--fixed[b-5ld5fchc99] {
    overflow: visible !important;
}

/* (Optionnel) petit espace visuel sous la toolbar */
[b-5ld5fchc99] .dxbl-dropdown-list {
    margin-top: 4px;
}

/* Style de base pour les inputs numériques */
[b-5ld5fchc99] .dxbl-spin-edit-input {
    text-align: center;
}

/* Style pour les petits SpinEdit (Bonus, Testeur) */
[b-5ld5fchc99] .spin-small .dxbl-spin-edit,
[b-5ld5fchc99] .spin-small .dxbl-spin-edit-input {
    width: 60px !important;
    max-width: 60px !important;
}

/* Style pour le SpinEdit de Quantité */
[b-5ld5fchc99] .spin-qty .dxbl-spin-edit,
[b-5ld5fchc99] .spin-qty .dxbl-spin-edit-input {
    width: 88px !important;
    max-width: 88px !important;
}

/* Style de la police pour la quantité (rouge si > 0) */
.spinEditPositive[b-5ld5fchc99] {
    color: red !important;
    text-align: center;
    font-weight: 700;
    max-width: 80px !important;
    flex: 0 0 80px;
}

/* Style de la police pour la quantité (par défaut) */
.spinEditDefault[b-5ld5fchc99] {
    color: black !important;
    text-align: center;
    max-width: 60px !important;
    flex: 0 0 20px;
}


/* =================================================================== */
/* 2. TOOLBAR (Sticky / Fixed)
/* =================================================================== */

.cart-toolbar[b-5ld5fchc99] {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    padding: .5rem .75rem;
    /* Sticky par défaut */
    position: sticky;
    top: 0;
    z-index: 1100;
    /* Au-dessus du contenu, en dessous des popups */
    /* Apparence */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #eee;
}

/* Classe 'fallback' si sticky n'est pas supporté (géré par JS) */
.cart-toolbar--fixed[b-5ld5fchc99] {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
}

.cart-toolbar .center[b-5ld5fchc99] {
    flex: 1;
    /* Prend l'espace libre */
    display: flex;
    justify-content: center;
    /* Centre horizontalement */
    align-items: center;
    /* Centre verticalement */
}

/* Espace réservé pour la toolbar en mode 'fixed' */
.toolbar-spacer[b-5ld5fchc99] {
    height: 56px;
    /* Ajustez si la hauteur de votre toolbar change */
}

/* Layout interne de la Toolbar */
.cart-toolbar .left[b-5ld5fchc99],
.cart-toolbar .right[b-5ld5fchc99] {
    display: flex;
    align-items: center;
}

.cart-toolbar .left[b-5ld5fchc99] {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-toolbar .right[b-5ld5fchc99] {
    flex: 0 0 auto;
    min-width: 0;
}

.cart-toolbar .toggles[b-5ld5fchc99] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
}

.cart-toolbar .toggle[b-5ld5fchc99] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.cart-toolbar .order-title[b-5ld5fchc99] {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-inline: .5rem;
}

.cart-toolbar .btn-back .icon[b-5ld5fchc99] {
    margin-right: .35rem;
}

.cart-toolbar .pill[b-5ld5fchc99] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: .35rem;
    border-radius: 999px;
    font-size: 12px;
    background: #ef4444;
    /* rouge */
    color: #fff;
}

/* Champ de recherche */
.cart-toolbar .right input.form-control[b-5ld5fchc99] {
    max-width: 260px;
}


/* =================================================================== */
/* 3. TOOLBAR RESPONSIVE (AVEC CORRECTIONS)
/* =================================================================== */

/* ≤ 1200px : on autorise le wrap */
@media (max-width: 1200px) {
    .cart-toolbar[b-5ld5fchc99] {
        flex-wrap: wrap;
    }

    .cart-toolbar .order-title[b-5ld5fchc99] {
        max-width: 40vw;
    }

    .cart-toolbar .right input.form-control[b-5ld5fchc99] {
        max-width: 220px;
    }
}

/* ≤ 992px : la recherche passe en dessous */
@media (max-width: 992px) {
    .cart-toolbar[b-5ld5fchc99] {
        row-gap: .5rem;
    }

    .cart-toolbar .left[b-5ld5fchc99] {
        order: 1;
        flex: 1 1 100%;
    }

    .cart-toolbar .right[b-5ld5fchc99] {
        order: 2;
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    /* recherche full width */
    .cart-toolbar .right input.form-control[b-5ld5fchc99] {
        max-width: none;
        width: min(560px, 100%);
    }

    /* * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * CORRECTION CRITIQUE 
     * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * 'overflow: visible' est requis pour que les dropdowns 
     * puissent s'afficher.
     * 'flex-wrap: wrap' gère le débordement des filtres.
    */
    .cart-toolbar .toggles[b-5ld5fchc99] {
        max-width: 100%;
        overflow: visible !important;
        /* <-- CORRECTION */
        flex-wrap: wrap;
        /* <-- AJOUT */
        padding-bottom: 2px;
    }
}

/* ≤ 768px : on empile plus */
@media (max-width: 768px) {

    /* * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * CORRECTION CRITIQUE 
     * !!!!!!!!!!!!!!!!!!!!!!!!!!!
     * 'overflow: visible' est aussi requis ici si la toolbar
     * passe en mode 'fixed'.
    */
    .cart-toolbar--fixed[b-5ld5fchc99] {
        overflow: visible !important;
        /* <-- CORRECTION */
    }

    .cart-toolbar .order-title[b-5ld5fchc99] {
        font-size: .95rem;
        max-width: 70vw;
    }

    .cart-toolbar .left[b-5ld5fchc99],
    .cart-toolbar .right[b-5ld5fchc99] {
        gap: .5rem;
        flex-wrap: wrap;
    }

    /* DxComboBox full width */
    .cart-toolbar .toggles>*[b-5ld5fchc99] {
        flex: 1 1 220px;
        min-width: 200px;
    }
}

/* ≤ 576px : layout en colonnes */
@media (max-width: 576px) {
    .cart-toolbar[b-5ld5fchc99] {
        padding: .5rem .5rem;
    }

    .cart-toolbar .left[b-5ld5fchc99] {
        flex-direction: column;
        align-items: stretch;
    }

    .cart-toolbar .order-title[b-5ld5fchc99] {
        width: 100%;
        max-width: 100%;
    }

    /* (overflow: visible est déjà bon à ce breakpoint) */
    .cart-toolbar .toggles[b-5ld5fchc99] {
        width: 100%;
        flex-wrap: wrap;
        gap: .5rem;
        overflow: visible;
    }

    .cart-toolbar .toggles>*[b-5ld5fchc99] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .cart-toolbar .right[b-5ld5fchc99] {
        flex-direction: column;
        align-items: stretch;
    }

    .cart-toolbar .right input.form-control[b-5ld5fchc99] {
        width: 100%;
        max-width: none;
    }

    .cart-toolbar .right small.text-muted[b-5ld5fchc99] {
        order: 2;
        margin-top: .25rem;
    }

    .cart-toolbar .right .toggle[b-5ld5fchc99] {
        order: 3;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cart-toolbar .right .toggle .mt-2[b-5ld5fchc99] {
        margin-top: .25rem !important;
        text-align: left !important;
    }
}

/* ≤ 420px : micro-ajustements */
@media (max-width: 420px) {
    .cart-toolbar .right .label[b-5ld5fchc99] {
        display: none;
        /* cache "Panier" */
    }
}


/* =================================================================== */
/* 4. GRILLE PRODUITS & CARTES
/* =================================================================== */

.catalog-grid[b-5ld5fchc99] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .catalog-grid[b-5ld5fchc99] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .catalog-grid[b-5ld5fchc99] {
        grid-template-columns: 1fr;
    }
}

/* Carte */
.item-card[b-5ld5fchc99] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 10px;
    overflow: hidden;
    /* Sécurité anti-débordement */
}

.img-wrap[b-5ld5fchc99] {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    background: #fafafa;
}

.img-wrap img.thumb[b-5ld5fchc99] {
    max-height: 140px;
    max-width: 95%;
    object-fit: contain;
}

/* Conteneur Meta (simplifié) */
.meta[b-5ld5fchc99] {
    display: block;
}

/* Ligne 1: Code + Stock */
.meta-row[b-5ld5fchc99] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.code[b-5ld5fchc99] {
    font-weight: 600;
    font-size: .9rem;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.right .stock-badge[b-5ld5fchc99] {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: #eef7ff;
    color: #0b5cab;
    font-size: .85rem;
    white-space: nowrap;
}

.stock-badge.out-of-stock[b-5ld5fchc99] {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

/* Ligne 2: Libellé */
.name[b-5ld5fchc99] {
    margin-top: 4px;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ligne 3: Prix */
.right.prices[b-5ld5fchc99] {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.price[b-5ld5fchc99] {
    font-size: 1.05rem;
    line-height: 1.4;
}

.price-old[b-5ld5fchc99] {
    text-decoration: line-through;
    opacity: .7;
    font-weight: 600;
}

.price-new[b-5ld5fchc99] {
    font-weight: 600;
    color: #08a39c;
}

.remise-badge[b-5ld5fchc99] {
    padding: .15rem .45rem;
    border-radius: .5rem;
    background: #fff3cd;
    color: #7a5b00;
    font-size: .85rem;
}

.break[b-5ld5fchc99] {
    flex-basis: 100%;
    height: 0;
}

/* Ligne 4: Editeurs (Bonus, Remise, Testeur) */
/* * NOTE: J'utilise .edits-row ici car il est responsive.
 * Assurez-vous que votre HTML utilise <div class="edits-row">
 * pour envelopper les champs Bonus/Remise/Testeur.
*/
.edits-row[b-5ld5fchc99] {
    display: flex;
    flex-wrap: wrap;
    /* Clé du responsive */
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.edits-row .edit[b-5ld5fchc99] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 180px;
    /* S'adapte, base de 180px */
    min-width: 160px;
    /* Seuil pour "wrapper" */
}

.edits-row .edit label[b-5ld5fchc99] {
    white-space: nowrap;
    font-size: .85rem;
    color: #6b7280;
}


/* Ligne 5: Contrôles Quantité */
.qty-controls[b-5ld5fchc99] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centré */
    gap: 10px;
    margin-top: 10px;
}

.qty-controls label[b-5ld5fchc99] {
    font-size: .9rem;
    color: #6b7280;
    font-weight: 500;
}

.btn-round[b-5ld5fchc99] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    cursor: pointer;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    user-select: none;
}

.btn-round:disabled[b-5ld5fchc99] {
    opacity: .4;
    cursor: not-allowed;
}

.btn-round.plus[b-5ld5fchc99] {
    border-color: #08a39c;
    color: #08a39c;
    background: #f0fdfa;
}

.btn-round:not(.plus)[b-5ld5fchc99] {
    border-color: #f87171;
    color: #f87171;
    background: #fef2f2;
}


/* =================================================================== */
/* 5. POPUP PANIER & STOCK
/* =================================================================== */

.popup-body-scroll[b-5ld5fchc99] {
    display: flex;
    flex-direction: column;
}

/* Liste scrollable */
.cart-list[b-5ld5fchc99] {
    flex: 1 1 auto;
    max-height: 60vh;
    /* limite en hauteur */
    overflow-y: auto;
    padding: 12px;
}

/* Lignes du panier */
.cart-line[b-5ld5fchc99] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 8px;
}

.cart-line .info[b-5ld5fchc99] {
    flex: 1 1 auto;
}

.cart-line .title[b-5ld5fchc99] {
    font-weight: 600;
}

.cart-line .meta[b-5ld5fchc99] {
    font-size: .85rem;
    color: #555;
}

.cart-line .actions[b-5ld5fchc99] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    padding-left: 10px;
}

.cart-line .total[b-5ld5fchc99] {
    font-weight: 600;
    color: #08a39c;
    font-size: 1.05rem;
}

.delete-btn[b-5ld5fchc99] {
    background: #fff;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.delete-btn:hover:not(:disabled)[b-5ld5fchc99] {
    background: #fee2e2;
}

.delete-btn:disabled[b-5ld5fchc99] {
    opacity: .5;
    cursor: not-allowed;
}

/* Footer (Total) du panier */
.footer-actions[b-5ld5fchc99] {
    flex: 0 0 auto;
    border-top: 1px solid #ddd;
    padding: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fafafa;
}

.grand-total[b-5ld5fchc99] {
    font-size: 1.1rem;
    font-weight: 500;
}

.grand-total b[b-5ld5fchc99] {
    color: #08a39c;
    font-size: 1.2rem;
}

.grand-reste[b-5ld5fchc99] {
    font-size: 1.1rem;
    font-weight: 500;
}

.grand-reste b[b-5ld5fchc99] {
    color: #FF0000;
    font-size: 1.2rem;
}

/* Responsive Panier */
@media (max-width:640px) {
    .cart-line[b-5ld5fchc99] {
        flex-direction: column;
    }

    .cart-line .actions[b-5ld5fchc99] {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 10px;
    }
}

/* Footer du popup de Stock */
.popup-footer-buttons[b-5ld5fchc99] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 1rem;
}

.dxbl-overlay[b-5ld5fchc99],
.dxbl-overlay-content[b-5ld5fchc99],
.dxbl-dropdown[b-5ld5fchc99],
.dxbl-dropdown-list[b-5ld5fchc99] {
    position: fixed !important;
    /* ou absolute selon layout */
    z-index: 9999 !important;
}

.cart-toolbar .right[b-5ld5fchc99] {
    overflow: visible !important;
    z-index: 100 !important;
    /* ou auto si 100 pose problème */

}

/* Carte commande */
.order-card[b-5ld5fchc99] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-card--compact[b-5ld5fchc99] {
    padding: 8px 10px;
    gap: 6px;
}

.oc-r1[b-5ld5fchc99] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.oc-r1 .left[b-5ld5fchc99] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dxbl-dropdown-menu-container[b-5ld5fchc99],
.dxbl-combobox-popup[b-5ld5fchc99],
.dxi-dropdown-menu-container[b-5ld5fchc99] {
    /* Doit être supérieur au ZIndex="2000" de votre DxPopup.
    */
    z-index: 2001 !important;
    /* 'fixed' permet à l'élément de s'ancrer par rapport 
      à la fenêtre du navigateur, et non par rapport 
      au parent 'overflow' de la popup.
    */
    position: fixed !important;
}


.page-wrap[b-5ld5fchc99] {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.catalog-grid[b-5ld5fchc99] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Barre de recherche centrée */
.search-bar[b-5ld5fchc99] {
    padding: 10px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    background: #fff;
}

.search-input[b-5ld5fchc99] {
    width: 60%;
    max-width: 450px;
}

/* Zone scrollable */
.cart-scroll[b-5ld5fchc99] {
    flex: 1;
    /* prend tout l’espace restant */
    overflow-y: auto;
    /* scroll vertical */
    padding: 10px;
}

/* Pour être joli */
.cart-list[b-5ld5fchc99] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* /Pages/Xfbltocart.razor.rz.scp.css */
/* =================================================================== */
/* 1. OVERRIDES GLOBAUX & HIDE LAYOUT
/* =================================================================== */

/* Hide MainLayout elements to maximize space */
[b-hjt5tq59qc] .topbar {
    display: none !important;
}

[b-hjt5tq59qc] .sidebar {
    display: none !important;
}

[b-hjt5tq59qc] .content {
    margin-top: 0 !important;
    margin-left: 0 !important;
}

[b-hjt5tq59qc] main.container-fluid {
    padding: 0 !important;
}

[b-hjt5tq59qc] main {
    padding-top: 0 !important;
}

/* Force les popups/dropdowns DevExpress AU-DESSUS de la toolbar (1100) */
[b-hjt5tq59qc] .dxbl-overlay,
[b-hjt5tq59qc] .dxbl-overlay-content,
[b-hjt5tq59qc] .dxbl-dropdown,
[b-hjt5tq59qc] .dxbl-dropdown-list {
    z-index: 5000 !important;
}

.cart-toolbar .toggles[b-hjt5tq59qc],
.cart-toolbar--fixed[b-hjt5tq59qc] {
    overflow: visible !important;
}

/* (Optionnel) petit espace visuel sous la toolbar */
[b-hjt5tq59qc] .dxbl-dropdown-list {
    margin-top: 4px;
}

/* Style de base pour les inputs numériques */
[b-hjt5tq59qc] .dxbl-spin-edit-input {
    text-align: center;
}

.cursor-pointer[b-hjt5tq59qc] {
    cursor: pointer !important;
}

/* Style pour les petits SpinEdit (Bonus, Testeur) */
[b-hjt5tq59qc] .spin-small .dxbl-spin-edit,
[b-hjt5tq59qc] .spin-small .dxbl-spin-edit-input {
    width: 60px !important;
    max-width: 60px !important;
}

/* Style pour le SpinEdit de Quantité */
[b-hjt5tq59qc] .spin-qty .dxbl-spin-edit,
[b-hjt5tq59qc] .spin-qty .dxbl-spin-edit-input {
    width: 110px !important;
    max-width: 110px !important;
}

/* Style de la police pour la quantité (rouge si > 0) */
.spinEditPositive[b-hjt5tq59qc] {
    color: red !important;
    text-align: center;
    font-weight: 700;
    max-width: 110px !important;
    flex: 0 0 110px;
}

/* Style de la police pour la quantité (par défaut) */
.spinEditDefault[b-hjt5tq59qc] {
    color: black !important;
    text-align: center;
    max-width: 110px !important;
    flex: 0 0 110px;
}


/* =================================================================== */
/* 2. TOOLBAR (Sticky / Fixed)
/* =================================================================== */

.cart-toolbar[b-hjt5tq59qc] {
    display: flex;
    flex-direction: column;
    padding: 6px 12px;
    position: sticky;
    top: 0;
    z-index: 1500;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tb-top-row[b-hjt5tq59qc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.left-section[b-hjt5tq59qc] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 0;
}

.order-id[b-hjt5tq59qc] {
    font-weight: 800;
    font-size: 0.95rem;
    color: #1e293b;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-section[b-hjt5tq59qc] {
    flex-grow: 1;
    min-width: 0;
}

.tb-search-group[b-hjt5tq59qc] {
    width: 100%;
}

.tb-search-group .btn[b-hjt5tq59qc] {
    padding: 0.375rem 0.6rem;
}

.right-section[b-hjt5tq59qc] {
    flex-shrink: 0;
}

.totals-compact-pill[b-hjt5tq59qc] {
    display: flex;
    align-items: center;
    background: #08a39c;
    color: white;
    padding: 4px 10px;
    border-radius: 999px;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(8, 163, 156, 0.3);
}

.tot-value[b-hjt5tq59qc] {
    font-weight: 800;
    font-size: 0.9rem;
}

.tot-badge[b-hjt5tq59qc] {
    background: #f43f5e;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 6px;
}

/* Row 2 : Status Client */
.tb-bottom-row[b-hjt5tq59qc] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}

.client-status-line[b-hjt5tq59qc] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.st-item[b-hjt5tq59qc] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

.status-ok[b-hjt5tq59qc] {
    background: #dcfce7;
    color: #166534;
}

.status-warn[b-hjt5tq59qc] {
    background: #fef9c3;
    color: #854d0e;
}

.status-danger[b-hjt5tq59qc] {
    background: #fee2e2;
    color: #991b1b;
}

/* Responsive BREAKPOINTS */

/* Tablet Portrait & Mobile Landscape */
@media (max-width: 992px) {
    .order-id[b-hjt5tq59qc] {
        font-size: 0.85rem;
    }

    .totals-compact-pill .tot-label[b-hjt5tq59qc] {
        display: none;
    }
}

/* Responsive Mobile (Si vraiment étroit) */
@media (max-width: 600px) {
    .tb-top-row[b-hjt5tq59qc] {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 4px;
    }

    .search-section[b-hjt5tq59qc] {
        grid-column: 1 / span 3;
        order: 3;
    }

    .left-section[b-hjt5tq59qc] {
        order: 1;
    }

    .right-section[b-hjt5tq59qc] {
        order: 2;
    }

    .catalog-grid[b-hjt5tq59qc] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 6px;
    }

    .item-card[b-hjt5tq59qc] {
        padding: 0.6rem;
        border-radius: 0.75rem;
        gap: 0.35rem;
    }

    .img-wrap[b-hjt5tq59qc] {
        height: 100px;
    }

    .name[b-hjt5tq59qc] {
        font-size: 0.85rem;
        height: 2.5rem;
        line-height: 1.2;
    }

    .price-section[b-hjt5tq59qc] {
        gap: 0.3rem;
        margin-top: 0.1rem;
    }

    .price-val[b-hjt5tq59qc] {
        font-size: 1rem;
    }

    .edits-grid[b-hjt5tq59qc] {
        padding: 0.3rem;
        gap: 0.3rem;
        border-radius: 0.5rem;
    }

    .card-input[b-hjt5tq59qc] {
        height: 30px;
        font-size: 0.85rem;
    }

    .qty-pill-container[b-hjt5tq59qc] {
        height: 38px;
        margin-top: 0.2rem;
    }

    .qty-btn[b-hjt5tq59qc] {
        width: 1.8rem;
        height: 1.8rem;
    }
}

/* Mobile Landscape Specific - Aggressive compaction */
@media (max-height: 500px) {
    .cart-toolbar[b-hjt5tq59qc] {
        padding: 2px 8px;
    }

    .tb-bottom-row[b-hjt5tq59qc] {
        margin-top: 0;
        padding-top: 0;
        border: none;
    }

    .client-status-line[b-hjt5tq59qc] {
        gap: 4px;
    }

    .st-item[b-hjt5tq59qc] {
        font-size: 0.65rem;
        padding: 0px 6px;
    }

    .catalog-grid[b-hjt5tq59qc] {
        gap: 6px;
        padding: 4px;
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* 3 cols in landscape to see more */
    .item-card[b-hjt5tq59qc] {
        padding: 0.4rem;
        gap: 0.15rem;
        border-radius: 0.5rem;
    }

    .img-wrap[b-hjt5tq59qc] {
        height: 60px;
    }

    /* Even smaller image in landscape */
    .meta-header[b-hjt5tq59qc] {
        gap: 0.1rem;
    }

    .code[b-hjt5tq59qc] {
        font-size: 0.6rem;
        padding: 0px 0.3rem;
    }

    .stock-badge[b-hjt5tq59qc] {
        font-size: 0.6rem;
        padding: 0px 0.2rem;
    }

    .name[b-hjt5tq59qc] {
        font-size: 0.75rem;
        height: 2.1rem;
        margin-top: 0px;
        line-height: 1.1;
    }

    .price-section[b-hjt5tq59qc] {
        margin-top: 0;
    }

    .price-val[b-hjt5tq59qc] {
        font-size: 0.9rem;
    }

    .price-old[b-hjt5tq59qc] {
        display: none;
    }

    /* Hide old price in landscape to save height */

    .edits-grid[b-hjt5tq59qc] {
        display: grid !important;
        padding: 0.2rem;
        gap: 0.2rem;
    }

    .edit-cell label[b-hjt5tq59qc] {
        display: none;
    }

    .card-input[b-hjt5tq59qc] {
        height: 24px;
        font-size: 0.75rem;
        padding: 0;
    }

    .qty-pill-container[b-hjt5tq59qc] {
        margin-top: 0.1rem;
        height: 30px;
        padding: 0.1rem;
    }

    .qty-btn[b-hjt5tq59qc] {
        width: 1.6rem;
        height: 1.6rem;
        font-size: 0.9rem;
    }

    .qty-num[b-hjt5tq59qc] {
        font-size: 0.9rem;
    }
}

/* Extra Small Screens */
@media (max-width: 400px) {
    .catalog-grid[b-hjt5tq59qc] {
        grid-template-columns: 1fr;
    }
}

/* Spacer for Fixed segments - REMOVED */
.toolbar-spacer[b-hjt5tq59qc] {
    display: none !important;
}


/* =================================================================== */
/* 4. GRILLE PRODUITS & CARTES (Premium Design)
/* =================================================================== */


.page-init[b-hjt5tq59qc] {
    background: #f8fafc;
}

.catalog-grid[b-hjt5tq59qc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0.75rem;
}

.item-card[b-hjt5tq59qc] {
    position: relative;
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.item-card:hover[b-hjt5tq59qc] {
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

/* État 'Dans le panier' */
.item-card.has-qty[b-hjt5tq59qc] {
    border-color: #08a39c;
    background: #f0fdfa;
    box-shadow: 0 0 0 2px rgba(8, 163, 156, 0.15);
}

.item-card.has-qty[b-hjt5tq59qc]::after {
    content: '🛒';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    opacity: 0.8;
}

/* Zone Image */
.img-wrap[b-hjt5tq59qc] {
    width: 100%;
    height: 160px;
    border-radius: 1rem;
    background: #f1f5f9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.3s;
}

.img-wrap .thumb[b-hjt5tq59qc] {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transition: transform 0.5s ease-out;
}

.item-card:hover .thumb[b-hjt5tq59qc] {
    transform: scale(1.1) rotate(2deg);
}

/* Meta Data Wrapper */
.meta[b-hjt5tq59qc] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.meta-header[b-hjt5tq59qc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.code[b-hjt5tq59qc] {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-pills[b-hjt5tq59qc] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.stock-badge[b-hjt5tq59qc] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    color: #475569;
}

.stock-badge.available[b-hjt5tq59qc] {
    background: #dcfce7;
    color: #166534;
}

.stock-badge.out-of-stock[b-hjt5tq59qc] {
    background: #fee2e2;
    color: #991b1b;
}

.stock-badge.reserved[b-hjt5tq59qc] {
    background: #fef9c3;
    color: #854d0e;
}

.name[b-hjt5tq59qc] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.25rem;
    height: 3.1rem;
    /* Fix hauteur constante */
}

/* Prices Area */
.price-section[b-hjt5tq59qc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.price-val[b-hjt5tq59qc] {
    font-size: 1.4rem;
    font-weight: 900;
    color: #0f172a;
}

.price-old[b-hjt5tq59qc] {
    font-size: 0.9rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.discount-tag[b-hjt5tq59qc] {
    background: #f43f5e;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    border-radius: 0.4rem;
}

/* Edits Row (Bonus, Remise, Testeur) */
.edits-grid[b-hjt5tq59qc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    background: #f8fafc;
    padding: 0.75rem;
    border-radius: 1rem;
    border: 1px solid #f1f5f9;
}

.edit-cell[b-hjt5tq59qc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.edit-cell label[b-hjt5tq59qc] {
    font-size: 0.7rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
}

.card-input[b-hjt5tq59qc] {
    border: 2px solid #e2e8f0;
    border-radius: 0.6rem;
    padding: 0.4rem;
    font-weight: 700;
    text-align: center;
    background: white;
    transition: all 0.2s;
    height: 42px;
    width: 100% !important;
}

.card-input:focus[b-hjt5tq59qc] {
    border-color: #08a39c;
    box-shadow: 0 0 0 3px rgba(8, 163, 156, 0.1);
}

.card-input.positive[b-hjt5tq59qc] {
    color: #08a39c;
    background: #f0fdfa;
    border-color: #5eead4;
}

/* Quantity Pill Controls */
.qty-pill-container[b-hjt5tq59qc] {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 1rem;
    padding: 0.4rem;
    margin-top: 0.5rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.qty-btn[b-hjt5tq59qc] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    border: none;
    background: white;
    color: #475569;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.qty-btn:hover:not(:disabled)[b-hjt5tq59qc] {
    background: #f8fafc;
    color: #0f172a;
}

.qty-btn.plus[b-hjt5tq59qc] {
    background: #08a39c;
    color: white;
}

.qty-btn.plus:hover[b-hjt5tq59qc] {
    background: #068a84;
}

.qty-btn:active[b-hjt5tq59qc] {
    transform: scale(0.92);
}

.qty-btn:disabled[b-hjt5tq59qc] {
    opacity: 0.3;
}

.qty-num[b-hjt5tq59qc] {
    flex-grow: 1;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 900;
    color: #1e293b;
    cursor: pointer;
}

/* ------------------------------------------------------------------- */
/* SMART SEARCH GRID - Ultra Compact but Premium
/* ------------------------------------------------------------------- */

.smart-search-grid[b-hjt5tq59qc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 0.75rem !important;
    padding: 0.5rem !important;
}

.smart-search-grid .item-card[b-hjt5tq59qc] {
    padding: 1rem;
    gap: 0.5rem;
}

.smart-search-grid .img-wrap[b-hjt5tq59qc] {
    height: 110px;
}

.smart-search-grid .edits-grid[b-hjt5tq59qc] {
    display: grid !important;
    padding: 0.5rem;
    gap: 0.5rem;
}

.smart-search-grid .name[b-hjt5tq59qc] {
    font-size: 0.9rem;
    height: 2.6rem;
}

.smart-search-grid .price-val[b-hjt5tq59qc] {
    font-size: 1.2rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .catalog-grid[b-hjt5tq59qc] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 0.5rem;
    }

    .item-card[b-hjt5tq59qc] {
        padding: 1rem;
        border-radius: 1.25rem;
    }

    .img-wrap[b-hjt5tq59qc] {
        height: 130px;
    }

    .name[b-hjt5tq59qc] {
        font-size: 0.95rem;
        height: 2.8rem;
    }

    .price-val[b-hjt5tq59qc] {
        font-size: 1.15rem;
    }

    .qty-btn[b-hjt5tq59qc] {
        width: 2.25rem;
        height: 2.25rem;
    }
}



/* =================================================================== */
/* 5. POPUP PANIER & STOCK
/* =================================================================== */

.popup-body-scroll[b-hjt5tq59qc] {
    display: flex;
    flex-direction: column;
}

/* Liste scrollable */
.cart-list[b-hjt5tq59qc] {
    flex: 1 1 auto;
    max-height: 55vh;
    overflow-y: auto;
    padding: 12px;
}

@media (max-height: 500px) {
    .cart-list[b-hjt5tq59qc] {
        max-height: 40vh;
    }
}

/* Lignes du panier COMPACT */
.cart-line-compact[b-hjt5tq59qc] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: border-color 0.2s;
}

.cart-line-compact:hover[b-hjt5tq59qc] {
    border-color: #cbd5e1;
}

.cl-top[b-hjt5tq59qc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.cl-product[b-hjt5tq59qc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cl-ref[b-hjt5tq59qc] {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.1rem 0.4rem;
    border-radius: 0.4rem;
    white-space: nowrap;
}

.cl-name[b-hjt5tq59qc] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-total[b-hjt5tq59qc] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #08a39c;
    flex-shrink: 0;
}

.cl-total small[b-hjt5tq59qc] {
    font-size: 0.7rem;
    opacity: 0.7;
}

.cl-bottom[b-hjt5tq59qc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cl-details[b-hjt5tq59qc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cl-item[b-hjt5tq59qc] {
    font-size: 0.8rem;
    color: #64748b;
}

.cl-item b[b-hjt5tq59qc] {
    color: #334155;
}

.cl-item.remise[b-hjt5tq59qc] {
    color: #f43f5e;
    font-weight: 700;
}

.cl-item.bonus[b-hjt5tq59qc] {
    color: #08a39c;
    background: #f0fdfa;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.75rem;
}

.cl-delete[b-hjt5tq59qc] {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 0.25rem;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 1.1rem;
}

.cl-delete:hover[b-hjt5tq59qc] {
    color: #ef4444;
}

/* Footer (Total) du panier */
.footer-actions[b-hjt5tq59qc] {
    flex: 0 0 auto;
    border-top: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: #f8fafc;
    border-radius: 0 0 12px 12px;
}

.footer-actions .text-muted[b-hjt5tq59qc] {
    font-size: 0.85rem;
}

.footer-actions .text-success[b-hjt5tq59qc] {
    font-size: 0.85rem;
    font-weight: 700;
}

.grand-total[b-hjt5tq59qc] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin-top: 0.25rem;
}

.text-vibrant[b-hjt5tq59qc] {
    color: #08a39c;
}

/* Footer du popup de Stock */
.popup-footer-buttons[b-hjt5tq59qc] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 1rem;
}

.dxbl-overlay[b-hjt5tq59qc],
.dxbl-overlay-content[b-hjt5tq59qc],
.dxbl-dropdown[b-hjt5tq59qc],
.dxbl-dropdown-list[b-hjt5tq59qc] {
    position: fixed !important;
    /* ou absolute selon layout */
    z-index: 9999 !important;
}

.cart-toolbar .right[b-hjt5tq59qc] {
    overflow: visible !important;
    z-index: 100 !important;
    /* ou auto si 100 pose problème */

}

/* Carte commande */
.order-card[b-hjt5tq59qc] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-card--compact[b-hjt5tq59qc] {
    padding: 8px 10px;
    gap: 6px;
}

.oc-r1[b-hjt5tq59qc] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.oc-r1 .left[b-hjt5tq59qc] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dxbl-dropdown-menu-container[b-hjt5tq59qc],
.dxbl-combobox-popup[b-hjt5tq59qc],
.dxi-dropdown-menu-container[b-hjt5tq59qc] {
    /* Doit être supérieur au ZIndex="2000" de votre DxPopup.
    */
    z-index: 2001 !important;
    /* 'fixed' permet à l'élément de s'ancrer par rapport 
      à la fenêtre du navigateur, et non par rapport 
      au parent 'overflow' de la popup.
    */
    position: fixed !important;
}