/**
 * Boxtal — Styles admin (sous-formulaire config + 4 cartes Préférences).
 *
 * Chargé conditionnellement par boxtal-bootstrap.php sur les pages
 * Administration > Expédition (cc-administration?section=expedition) et
 * Préférences > Expédition.
 *
 * @file        cc-boxtal-admin.css
 * @package     CaisseConnect
 * @subpackage  Transporteurs\Boxtal\Assets\CSS
 * @since       0.98.0
 * @version     0.99.5
 * @author      Microlibre <contact@microlibre.net>
 * @copyright   2026 Microlibre
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link        https://microlibre.net/caisse-connect
 */

/* ------------------------------------------------------------------------- */
/* Sous-formulaire de configuration Boxtal (Administration > Expédition)     */
/* Refonte 0.98 : 3 sections autoportantes séparées par <hr>                 */
/* ------------------------------------------------------------------------- */

#cc-boxtal-config-carte .cc-mode-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 18px;
}

#cc-boxtal-config-carte .cc-cle-statut {
    margin-left: 10px;
    font-size: 12px;
    font-weight: 600;
}

#cc-boxtal-config-carte .cc-cle-statut--ok {
    color: #006a3a;
}

#cc-boxtal-config-carte .cc-cle-statut--ko {
    color: #b32d2e;
}

/* Séparateur entre sections */
.cc-boxtal-section-separator {
    border: 0;
    border-top: 1px solid var(--cc-couleur-bordures, #ddd);
    margin: 24px 0;
}

/* Section : conteneur autoportant pour 1 API */
.cc-boxtal-config-section {
    padding: 4px 0;
}

.cc-boxtal-section-titre {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
}

.cc-boxtal-section-mode-info {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #555;
}

.cc-boxtal-section-mode-info strong {
    color: #1d2327;
}

.cc-boxtal-section-mode-help {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #777;
    font-weight: 400;
}

.cc-boxtal-section-mode-toggle {
    margin: 0 0 12px 0;
    border: 0;
    padding: 0;
}

/* Compactage de form-table à l'intérieur d'une section */
.cc-boxtal-section-table {
    margin-top: 6px;
    margin-bottom: 6px;
}

.cc-boxtal-section-table th {
    width: 180px;
    padding-left: 0;
}

/* Bandeau d'actions de section : Enregistrer + Tester + feu inline + feedback */
.cc-boxtal-section-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cc-boxtal-section-feedback {
    font-size: 13px;
    min-height: 1.4em;
}

.cc-boxtal-section-feedback.cc-feedback--ok { color: #006a3a; }
.cc-boxtal-section-feedback.cc-feedback--ko { color: #b32d2e; }
.cc-boxtal-section-feedback.cc-feedback--info { color: #555; }

/* ------------------------------------------------------------------------- */
/* Feu inline (un par section)                                               */
/* ------------------------------------------------------------------------- */

.cc-feu {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.cc-feu-inline {
    padding: 4px 10px;
    background-color: var(--cc-couleur-fond-encart, #f6f7f7);
    border: 1px solid var(--cc-couleur-bordures, #ddd);
    border-radius: 12px;
}

.cc-feu-led {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    border: 1px solid #999;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.cc-feu[data-statut="ok"] .cc-feu-led { background-color: #2ecc71; border-color: #1e8449; }
.cc-feu[data-statut="ko"] .cc-feu-led { background-color: #e74c3c; border-color: #922b21; }
.cc-feu[data-statut="loading"] .cc-feu-led { background-color: #f39c12; border-color: #b9770e; animation: cc-feu-pulse 1s infinite; }

@keyframes cc-feu-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

.cc-feu-label {
    font-weight: 600;
}

.cc-feu-message {
    font-size: 12px;
    color: #555;
}

/* ------------------------------------------------------------------------- */
/* Cartes Boxtal dans Préférences > Expédition                               */
/* ------------------------------------------------------------------------- */

/* Badge .cc-carte-statut générique : cf. css/components/cc-cartes.css */

.cc-boxtal-carte .cc-feedback {
    margin-left: 12px;
    font-size: 12px;
    min-height: 1.4em;
}

.cc-boxtal-carte .cc-feedback--ok { color: #006a3a; }
.cc-boxtal-carte .cc-feedback--ko { color: #b32d2e; }

/* Champ obligatoire vide dans la carte Adresse expéditeur */
.cc-boxtal-adr-erreur {
    border-color: #b32d2e !important;
    box-shadow: 0 0 0 1px #b32d2e;
    background-color: #fff5f5;
}

.cc-boxtal-groupe-operateur > summary {
    cursor: pointer;
    line-height: 1.8;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.cc-boxtal-groupe-operateur > summary:hover {
    background-color: #f0f0f1;
}

.cc-boxtal-table {
    margin-top: 12px;
}

.cc-boxtal-table .cc-th-checkbox {
    width: 30px;
}

.cc-boxtal-table code {
    font-size: 11px;
    background: #f6f7f7;
    padding: 2px 6px;
    border-radius: 3px;
}

.cc-boxtal-tester-feedback {
    margin-left: 6px;
    font-weight: bold;
}

.cc-boxtal-test-ok {
    color: #006a3a;
}

.cc-boxtal-test-ko {
    color: #b32d2e;
}

/* ------------------------------------------------------------------------- */
/* Métabox Boxtal sur l'écran commande — Timeline du tracking                */
/* ------------------------------------------------------------------------- */

.cc-boxtal-metabox .cc-boxtal-history {
    margin: 12px 0;
    padding: 8px 12px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}

.cc-boxtal-metabox .cc-boxtal-history > summary {
    cursor: pointer;
    font-weight: 600;
    color: #1d2327;
    padding: 4px 0;
}

.cc-boxtal-metabox .cc-boxtal-history-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    max-height: 280px;
    overflow-y: auto;
}

.cc-boxtal-metabox .cc-boxtal-history-list li {
    padding: 6px 0;
    border-bottom: 1px solid #ebebeb;
    font-size: 13px;
    line-height: 1.4;
}

.cc-boxtal-metabox .cc-boxtal-history-list li:last-child {
    border-bottom: none;
}

.cc-boxtal-metabox .cc-boxtal-history-date {
    color: #50575e;
    font-size: 12px;
    margin-right: 6px;
}

.cc-boxtal-metabox .cc-boxtal-history-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: #dcdcde;
    color: #1d2327;
}

/* Statuts critiques côté client */
.cc-boxtal-metabox .cc-boxtal-history-status--delivered {
    background: #c6e1c6;
    color: #1e6a23;
}
.cc-boxtal-metabox .cc-boxtal-history-status--reached_delivery_pickup_point {
    background: #ffe6a8;
    color: #7a5c00;
}
.cc-boxtal-metabox .cc-boxtal-history-status--out_for_delivery {
    background: #cae3f1;
    color: #1e4d6b;
}
.cc-boxtal-metabox .cc-boxtal-history-status--returned,
.cc-boxtal-metabox .cc-boxtal-history-status--exception,
.cc-boxtal-metabox .cc-boxtal-history-status--failed_attempt {
    background: #f4caca;
    color: #8a1a1a;
}

.cc-boxtal-metabox .cc-boxtal-history-message {
    color: #50575e;
}

/* ------------------------------------------------------------------------- */
/* Section « Diagnostic webhooks » dans Administration > Expédition          */
/* ------------------------------------------------------------------------- */

.cc-boxtal-section-webhooks .cc-boxtal-subs-pastille {
    display: inline-block;
    margin-left: 12px;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle;
}

.cc-boxtal-section-webhooks .cc-boxtal-subs-status--ok {
    background: #c6e1c6;
    color: #1e6a23;
}

.cc-boxtal-section-webhooks .cc-boxtal-subs-status--ko {
    background: #f4caca;
    color: #8a1a1a;
}

.cc-boxtal-section-webhooks .cc-boxtal-subs-status--unknown {
    background: #dcdcde;
    color: #50575e;
}

.cc-boxtal-section-webhooks .cc-boxtal-callback-url {
    font-size: 12px;
    word-break: break-all;
}

.cc-boxtal-section-webhooks .cc-boxtal-subs-erreur {
    color: #8a1a1a;
}

.cc-boxtal-section-webhooks .cc-boxtal-subs-events {
    margin-top: 12px;
}

.cc-boxtal-section-webhooks .cc-boxtal-subs-statut {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: #dcdcde;
    color: #1d2327;
}

.cc-boxtal-section-webhooks .cc-boxtal-subs-statut--active {
    background: #c6e1c6;
    color: #1e6a23;
}

.cc-boxtal-section-webhooks .cc-boxtal-subs-statut--inactive,
.cc-boxtal-section-webhooks .cc-boxtal-subs-statut--suspended {
    background: #ffe6a8;
    color: #7a5c00;
}

.cc-boxtal-section-webhooks .cc-boxtal-subs-statut--missing {
    background: #f4caca;
    color: #8a1a1a;
}

/* =============================================================================
   Cellule « Expédition » dans les tableaux de commandes (Accueil + wc-orders)
   ============================================================================= */

.cc-boxtal-cellule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.cc-boxtal-cellule .button.button-small {
    padding: 0 8px;
    min-height: 26px;
    line-height: 24px;
    font-size: 11px;
}

.cc-boxtal-cellule .cc-boxtal-metabox-feedback {
    font-size: 11px;
}

/* Bouton « Créer » désactivé dans la cellule tableau : curseur help pour
   signaler au survol qu'une explication est dispo via le tooltip natif. */
.cc-boxtal-cellule .cc-boxtal-btn-creer:disabled {
    cursor: help;
}

/* États « non applicable » et « pickup » : texte simple, pas de bouton. */
.column-cc_expedition .cc-cellule-exp-na,
td.cc_expedition .cc-cellule-exp-na {
    color: #8c8f94;
}

.column-cc_expedition .cc-cellule-exp-pickup,
td.cc_expedition .cc-cellule-exp-pickup {
    color: #2a8c7a;
    font-style: italic;
}

/* Curseur d'aide quand le nom du lieu de retrait est disponible en tooltip. */
.cc-cellule-exp-pickup[title] {
    cursor: help;
}

/* Statut tracking : libellé + code en monospace gris. */
.column-cc_expedition .cc-cellule-exp-statut,
td.cc_expedition .cc-cellule-exp-statut {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cc-cellule-exp-code {
    background: #f0f0f1;
    color: #50575e;
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 10px;
    cursor: help;
}

/* Lien étiquette : style bouton mais lien <a>. */
.cc-cellule-exp-etiquette {
    text-decoration: none;
}


/* =============================================================================
   Liste documents d'expédition (multi-docs : LABEL × N + VOUCHER + CN23 + …)
   ============================================================================= */

.cc-boxtal-docs-liste {
    margin-top: 8px;
    font-size: 12px;
}

.cc-boxtal-docs-liste > summary {
    cursor: pointer;
    color: #2271b1;
    user-select: none;
}

.cc-boxtal-docs-ul {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
}

.cc-boxtal-docs-ul li {
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cc-boxtal-docs-ul li a {
    text-decoration: none;
}

.cc-boxtal-docs-filename {
    background: #f0f0f1;
    color: #50575e;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 11px;
}

/* --- Section Cotations fictives (destinations dummy) --- */

#cc-boxtal-destinations-table .cc-boxtal-dest-country {
    width: 4em;
    text-transform: uppercase;
}

#cc-boxtal-destinations-table .cc-boxtal-dest-cp {
    width: 7em;
}

#cc-boxtal-destinations-table .cc-boxtal-dest-ville,
#cc-boxtal-destinations-table .cc-boxtal-dest-nom {
    width: 14em;
}

/* ==========================================================================
   Modal — Création d'expédition avec point de dépôt
   ========================================================================== */

.cc-modal-boxtal-expedition .cc-hidden { display: none; }

.cc-modal-boxtal-expedition {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-modal-boxtal-expedition__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.cc-modal-boxtal-expedition__dialog {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.cc-modal-boxtal-expedition__header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--cc-primary, #667eea) 0%, var(--cc-primary-dark, #764ba2) 100%);
    color: #fff;
    border-radius: 8px 8px 0 0;
}

.cc-modal-boxtal-expedition__header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: inherit;
}

.cc-modal-boxtal-expedition__close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.cc-modal-boxtal-expedition__close:hover {
    opacity: 0.8;
}

.cc-modal-boxtal-expedition__close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    line-height: 1;
    padding: 0 4px;
}

.cc-modal-boxtal-expedition__close:hover {
    color: #d63638;
}

.cc-modal-boxtal-expedition__body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Chargement */
.cc-modal-boxtal-expedition__loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
    justify-content: center;
}

.cc-modal-boxtal-expedition__loading .spinner {
    float: none;
    margin: 0;
}

/* Erreur */
.cc-modal-boxtal-expedition__error {
    text-align: center;
    padding: 16px 0;
}

.cc-modal-boxtal-expedition__error-msg {
    color: #d63638;
    margin-bottom: 12px;
}

/* Récap offre */
.cc-modal-boxtal-expedition__offre {
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #f6f7f7;
    border-radius: 4px;
}

.cc-modal-boxtal-expedition__offre-code {
    font-size: 12px;
    color: #666;
    margin-left: 6px;
}

/* Fieldset mode */
.cc-modal-boxtal-expedition__mode {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.cc-modal-boxtal-expedition__mode legend {
    font-weight: 600;
    padding: 0 4px;
}

.cc-modal-boxtal-expedition__radio-label {
    display: block;
    margin: 8px 0;
    cursor: pointer;
}

.cc-modal-boxtal-expedition__radio-label input[disabled] + span {
    color: #999;
}

.cc-modal-boxtal-expedition__radio-detail {
    font-size: 12px;
    color: #888;
    font-style: normal;
}

/* Info enlèvement */
.cc-modal-boxtal-expedition__enlevement-info {
    padding: 10px 12px;
    background: #fcf9e8;
    border: 1px solid #dba617;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 13px;
}

.cc-modal-boxtal-expedition__enlevement-info .dashicons {
    color: #dba617;
    vertical-align: text-bottom;
}

/* Zone dépôt */
.cc-modal-boxtal-expedition__depot-zone {
    margin-bottom: 16px;
}

.cc-modal-boxtal-expedition__depot-zone label {
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

.cc-modal-boxtal-expedition__select {
    width: 100%;
}

/* Détails point sélectionné */
.cc-modal-boxtal-expedition__point-details {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f6f7f7;
    border-radius: 4px;
    font-size: 13px;
}

.cc-modal-boxtal-expedition__point-adresse {
    margin-bottom: 6px;
    color: #555;
}

.cc-modal-boxtal-expedition__horaires-details summary {
    cursor: pointer;
    font-weight: 500;
    color: #2271b1;
    font-size: 12px;
}

.cc-modal-boxtal-expedition__horaires-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    margin-top: 6px;
}

.cc-modal-boxtal-expedition__horaires-table td {
    padding: 2px 8px 2px 0;
    border-bottom: 1px solid #eee;
}

.cc-modal-boxtal-expedition__horaires-table td:first-child {
    font-weight: 500;
    white-space: nowrap;
    width: 80px;
}

/* Date de prise en charge */
.cc-modal-boxtal-expedition__date-zone {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.cc-modal-boxtal-expedition__date-label {
    cursor: pointer;
    font-weight: 500;
}

.cc-modal-boxtal-expedition__date-input-wrap {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cc-modal-boxtal-expedition__date-input {
    width: auto;
}

.cc-modal-boxtal-expedition__date-hint {
    font-size: 12px;
    color: #888;
}

/* Footer */
.cc-modal-boxtal-expedition__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid #ddd;
    background: #f6f7f7;
    border-radius: 0 0 8px 8px;
}

.cc-modal-boxtal-expedition__feedback {
    flex: 1;
    font-size: 13px;
}

/* ------------------------------------------------------------------------- */
/* Étape 1 : Colisage — Interface d'édition manuelle du packing              */
/* ------------------------------------------------------------------------- */

.cc-modal-boxtal-expedition__etape {
    font-size: 13px;
    color: inherit;
    margin-left: auto;
    margin-right: 12px;
    font-weight: 700;
}

/* Barre résumé + boutons (une seule ligne) */
.cc-colisage-resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f6f7f7;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
}

.cc-colisage-resume__gauche {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cc-colisage-resume__droite {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cc-colisage-resume__nb-colis {
    font-weight: 600;
}

.cc-colisage-resume__cout {
    color: #006a3a;
    font-weight: 600;
}

.cc-colisage-resume__btn-refresh {
    font-size: 12px;
    padding: 2px 8px;
    cursor: pointer;
}

.cc-colisage-resume__cout-facture {
    color: #555;
}

/* Section détails : 2 panneaux */
.cc-colisage-details {
    display: flex;
    height: 380px;
    overflow: hidden;
}

.cc-colisage-gauche {
    flex: 0 0 48%;
    overflow-y: auto;
    border-right: 1px solid #e0e0e0;
    padding: 10px 12px 10px 16px;
}

.cc-colisage-droite {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px 10px 12px;
}

.cc-colisage-droite__titre {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
    color: #1d2327;
}

/* Bouton ajouter colis */
.cc-colisage-gauche__btn-ajouter {
    margin-bottom: 8px;
    width: 100%;
}

.cc-colisage-gauche__btn-ajouter .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Zone orphelins */
.cc-colisage-orphelins {
    padding: 8px 10px;
    border: 1px dashed #c3c4c7;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    transition: border-color 0.2s, background 0.2s;
}

.cc-colisage-orphelins--has-items {
    border-color: #d63638;
    color: #d63638;
    font-weight: 600;
}

.cc-colisage-orphelins--selected {
    border-color: var(--cc-couleur-primaire, #2271b1);
    background: #f0f6fc;
}

.cc-colisage-orphelins--dragover {
    border-color: #46b450;
    background: #f0fff0;
}

/* Colis dans le panneau gauche */
.cc-colisage-colis {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.1s;
}

.cc-colisage-colis--selected {
    border-color: var(--cc-couleur-primaire, #2271b1);
    background: #f0f6fc;
}

.cc-colisage-colis--dragover {
    border-color: #46b450;
    background: #f0fff0;
}

.cc-colisage-colis--drop-refused {
    border-color: #d63638 !important;
    background: #fcf0f1 !important;
    animation: cc-shake 0.3s;
}

@keyframes cc-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.cc-colisage-colis__ligne1 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.cc-colisage-colis__classe-label {
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.cc-colisage-colis__emballage {
    flex: 1;
    font-size: 12px;
    padding: 2px 4px;
    max-width: 220px;
}

.cc-colisage-colis__alerte {
    color: #d63638;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.cc-colisage-colis__btn-vider {
    background: none;
    border: none;
    cursor: pointer;
    color: #a7aaad;
    padding: 2px;
    line-height: 1;
}

.cc-colisage-colis__btn-vider:hover {
    color: #d63638;
}

.cc-colisage-colis__btn-vider .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.cc-colisage-colis__ligne2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #555;
}

.cc-colisage-colis__poids-reel-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cc-colisage-colis__poids-reel {
    width: 70px;
    padding: 1px 4px;
    font-size: 12px;
}

.cc-colisage-colis__poids-max {
    margin-left: auto;
    color: #888;
    font-size: 11px;
    white-space: nowrap;
}

.cc-colisage-colis__items-count {
    font-size: 11px;
    color: #888;
    margin-top: 3px;
}

/* Items dans le panneau droit */
.cc-colisage-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #eee;
    border-radius: 3px;
    margin-bottom: 4px;
    cursor: grab;
    user-select: none;
    font-size: 12px;
    transition: background 0.15s, border-color 0.15s;
}

.cc-colisage-item:hover {
    background: #f8f9fa;
}

.cc-colisage-item--selected {
    background: #e8f0fe;
    border-color: #4285f4;
}

.cc-colisage-item--dragging {
    opacity: 0.4;
}

.cc-colisage-item__sku {
    font-family: monospace;
    font-size: 11px;
    color: #888;
    min-width: 60px;
}

.cc-colisage-item__nom {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-colisage-item__poids {
    white-space: nowrap;
    font-weight: 600;
    color: #333;
}

.cc-colisage-item__classe {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}

/* Feedback colisage */
.cc-colisage-feedback {
    padding: 4px 16px;
    font-size: 12px;
    min-height: 20px;
}

/* Contenu étape 2 : marges internes */
.cc-modal-boxtal-step-enlevement {
    padding: 16px 20px;
}

/* Bouton retour (footer) */
.cc-modal-boxtal-step-enlevement__btn-retour {
    font-size: 12px;
}