/**
 * SU Split VAT Module - Styles Front-Office
 * Module pour afficher la TVA ventilée par taux dans PrestaShop 8.2
 * Compatible Bootstrap 4 - Responsive Design
 *
 * @author Synapse Up
 * @version 1.0.0
 */

/* ================================================================
   CONTENEUR PRINCIPAL
   ================================================================ */

/**
 * Conteneur principal du module
 * Encapsule tout l'affichage de la ventilation TVA
 */
.su-split-vat-container {
    margin: 20px 0;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

/* Conteneur vide (aucune TVA à afficher) : masqué mais présent dans le DOM
   pour servir de cible au recalcul AJAX. */
.su-split-vat-empty {
    display: none !important;
}

/* ================================================================
   TITRE
   ================================================================ */

/**
 * Titre de la section ventilation TVA
 */
.su-split-vat-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
    text-transform: none;
}

/* ================================================================
   FORMAT TABLE (Tableau)
   ================================================================ */

/**
 * Affichage en tableau - Format par défaut
 * Idéal pour desktop avec plusieurs colonnes
 */
.su-split-vat-table {
    width: 100%;
    margin-bottom: 0;
}

/**
 * En-tête du tableau
 */
.su-split-vat-table thead th {
    background-color: #e9ecef;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    padding: 10px;
}

/**
 * Cellules du tableau
 */
.su-split-vat-table tbody td {
    padding: 8px 10px;
    vertical-align: middle;
}

/**
 * Alternance de couleurs pour les lignes
 */
.su-split-vat-table tbody tr:nth-child(odd) {
    background-color: #fff;
}

.su-split-vat-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* ================================================================
   FORMAT LIST (Liste)
   ================================================================ */

/**
 * Affichage en liste
 * Alternative au tableau, plus compact
 */
.su-split-vat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/**
 * Items de la liste
 */
.su-split-vat-list li {
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
}

.su-split-vat-list li:last-child {
    border-bottom: none;
}

/**
 * Taux de TVA dans la liste
 */
.su-split-vat-list .rate {
    font-weight: 600;
    color: #0066cc;
}

/* ================================================================
   FORMAT INLINE (En ligne)
   ================================================================ */

/**
 * Affichage inline
 * Éléments côte à côte avec flexbox
 */
.su-split-vat-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/**
 * Items inline individuels
 */
.su-split-vat-inline-item {
    background: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.su-split-vat-inline-item .rate {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

/* ================================================================
   CONTEXTE COMMANDE (Confirmation/Détails)
   ================================================================ */

/**
 * Styles spécifiques pour les pages de commande
 * (Confirmation et détails de commande)
 */
.su-split-vat-order {
    margin: 0;
    padding: 0;
}

.su-split-vat-order .su-split-vat-body {
    padding: 0;
}

.su-split-vat-order .su-split-vat-table {
    margin-bottom: 0;
    border-radius: 10px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

span.value.sub.float-right{font-weight: 600;}

/**
 * Ligne de totaux (tfoot)
 */
.su-split-vat-order .su-split-vat-totals {
    background-color: #f8f9fa;
}

.su-split-vat-order .su-split-vat-totals td {
    padding: 10px;
    font-weight: 700;
}

.su-split-vat-order .su-split-vat-totals td:first-child {
    font-size: 1rem;
}

/**
 * Ligne TOTAL avec bordure au-dessus
 */
.su-split-vat-order .su-split-vat-total-row td {
    border-top: 2px solid #000000;
}

/* ================================================================
   VISIBILITÉ ET MODES D'AFFICHAGE
   ================================================================ */

/**
 * Mode standalone - quand le bloc reste dans le card-body
 * (le tableau .order-confirmation-table n'existe pas)
 */
.su-split-vat-standalone {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

/**
 * Mode déplacé - quand le bloc est dans le tableau
 */
.su-split-vat-moved {
    /* Pas de styles additionnels nécessaires */
}

/**
 * Bloc de confirmation de commande - toujours visible par défaut
 */
.su-split-vat-confirmation-block {
    display: block;
}

/**
 * Masquer les lignes du tableau de commande remplacées par notre ventilation TVA
 * IMPORTANT: Cette classe est appliquée uniquement par notre JS aux lignes
 * que nous voulons remplacer. Le préfixe su-split-vat- garantit l'encapsulation.
 */
.su-split-vat-hidden-row {
    display: none !important;
}

/**
 * Cellule conteneur du bloc déplacé
 */
.su-split-vat-cell {
    padding: 15px 0;
    border-top: none;
}

/* ================================================================
   RESPONSIVE - TABLETTE
   ================================================================ */

/**
 * Ajustements pour tablettes (max 768px)
 */
@media (max-width: 768px) {
    /* Réduction de la taille de police pour les tableaux */
    .su-split-vat-table {
        font-size: 0.9rem;
    }
    
    /* Réduction du padding des cellules */
    .su-split-vat-table th,
    .su-split-vat-table td {
        padding: 6px 8px;
    }
    
    /* Format inline en colonne sur tablette */
    .su-split-vat-inline {
        flex-direction: column;
        gap: 10px;
    }
}

/* ================================================================
   RESPONSIVE - MOBILE
   ================================================================ */

/**
 * Ajustements pour mobile (max 576px)
 * Adaptation importante des tableaux pour mobile
 */
@media (max-width: 576px) {
    /* Réduction du padding du conteneur */
    .su-split-vat-container {
        padding: 10px;
    }
    
    /* Réduction de la taille du titre */
    .su-split-vat-title {
        font-size: 1rem;
    }
    
    /* ============================================================
       TRANSFORMATION DU TABLEAU EN MODE MOBILE
       ============================================================ */
    
    /**
     * Masquage de l'en-tête du tableau
     * Les labels seront ajoutés via data-label
     */
    .su-split-vat-table thead {
        display: none;
    }
    
    /**
     * Transformation des éléments du tableau en blocs
     */
    .su-split-vat-table,
    .su-split-vat-table tbody,
    .su-split-vat-table tr,
    .su-split-vat-table td {
        display: block;
        width: 100%;
    }
    
    /**
     * Chaque ligne devient une carte
     */
    .su-split-vat-table tr {
        margin-bottom: 15px;
        /* border: 1px solid #dee2e6; */
        border-radius: 4px;
        padding: 10px;
    }
    
    /**
     * Cellules en mode mobile
     */
    .su-split-vat-table td {
        text-align: left !important;
        padding: 5px 0;
        border: none;
    }
    
    /**
     * Ajout des labels avant chaque valeur
     * Via l'attribut data-label dans le template
     */
    .su-split-vat-table td:before {
        content: attr(data-label);
        font-weight: 600;
        display: inline-block;
        width: 100px;
    }
}
/* ================================================================
   INTÉGRATION DANS LE CART SUMMARY
   ================================================================ */

/**
 * Styles spécifiques pour l'intégration dans le résumé du panier
 * Le JavaScript déplace le bloc dans le cart summary après la ligne VAT
 */
.cart-summary .su-split-vat-container,
.cart-detailed-totals .su-split-vat-container {
    background: none;
    border: none;
    padding: 0;
    margin: 10px 0;
}

/* Dans le cart summary, adapter la taille */
.cart-summary .su-split-vat-title,
.cart-detailed-totals .su-split-vat-title,
#cart_summary .su-split-vat-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #555;
}

.cart-summary .su-split-vat-table,
.cart-detailed-totals .su-split-vat-table {
    font-size: 0.85rem;
}

.cart-summary .su-split-vat-table thead th,
.cart-detailed-totals .su-split-vat-table thead th {
    font-size: 0.8rem;
    padding: 6px 8px;
}

.cart-summary .su-split-vat-table tbody td,
.cart-detailed-totals .su-split-vat-table tbody td {
    padding: 5px 8px;
    font-size: 0.85rem;
}

/**
 * Adaptation pour mobile dans le cart summary
 */
@media (max-width: 576px) {
    .cart-summary .su-split-vat-title,
    .cart-detailed-totals .su-split-vat-title {
        font-size: 0.85rem;
    }
}


/* ================================================================
   ORDER DETAIL - Colonne et lignes VAT (v2.0)
   ================================================================ */

/**
 * Styles pour l'intégration dans la page Order Detail (#order-products)
 * Le JavaScript ajoute une colonne VAT en dernière position
 * et remplace la ligne VAT unique par le split TVA par taux
 */

/* Table modifiée par le module */
#order-products.su-split-vat-modified {
    /* Permet de s'assurer que la table a bien été traitée */
}

.su-split-vat-title {
    display: none !important;
}
span.label.sub {
    font-weight: 600 !important;
}
/* Colonne header VAT ajoutée par JS (en dernière position) */
.su-split-vat-col-header {
    font-weight: 600;
    white-space: nowrap;
    min-width: 80px;
}

/* Cellules VAT dans les lignes produits */
.su-split-vat-col-cell {
    font-weight: 400;
    color: #666;
    white-space: nowrap;
}

/* Lignes split VAT dans le footer */
.su-split-vat-row {
background-color: #ffffff;
}

.su-split-vat-rate-row td {
    padding: 8px 12px;
    border-top: 1px solid #dee2e6;
}

/* Première ligne du split VAT - séparation visuelle */
.su-split-vat-rate-row:first-of-type td {
    border-top: 2px solid #dee2e6;
}

/* Label du taux de TVA */
.su-split-vat-label {
    font-weight: 400;
    text-align: right;
}

.su-split-vat-rate-label {
    color: #000000;
    font-size: 0.95rem;
}

/* Montant de TVA */
.su-split-vat-amount {
    color: #000000;
    text-align: right;
}

/* Ligne originale masquée */
.su-split-vat-hidden-row {
    display: none !important;
}

/* Container invisible pour les données JSON */
.su-split-vat-order-detail {
    display: none !important;
    visibility: hidden;
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
    left: -9999px;
}

/* Lignes produits traitées */
.su-split-vat-processed {
    /* Marqueur pour éviter le double traitement */
}

/* ================================================================
   ORDER DETAIL - Alignement des en-têtes et cellules
   ================================================================ */

/* Centrer les en-têtes des colonnes Quantity, Unit price, VAT, Total price */
#order-products thead th:not(:first-child) {
    text-align: center;
}

/* S'assurer que les cellules VAT sont alignées à droite */
#order-products .su-split-vat-col-header,
#order-products .su-split-vat-col-cell,
#order-products .su-split-vat-label,
#order-products .su-split-vat-amount {
    text-align: right !important;
}

/* ================================================================
   ORDER DETAIL - Responsive Tablet
   ================================================================ */

@media (max-width: 768px) {
    .su-split-vat-col-header,
    .su-split-vat-col-cell {
        font-size: 0.85rem;
        padding: 6px 8px;
        min-width: 60px;
    }
    
    .su-split-vat-rate-row td {
        padding: 6px 8px;
    }
    
    .su-split-vat-rate-label {
        font-size: 0.9rem;
    }
}

/* ================================================================
   ORDER DETAIL - Responsive Mobile
   ================================================================ */

@media (max-width: 576px) {
    .su-split-vat-col-header,
    .su-split-vat-col-cell {
        font-size: 0.8rem;
        padding: 4px 6px;
        min-width: 50px;
    }
    
    .su-split-vat-rate-row td {
        padding: 5px 6px;
    }
    
    .su-split-vat-rate-label {
        font-size: 0.85rem;
    }
}

/* ================================================================
   ORDER DETAIL - Labels footer avec colspan (font-weight)
   ================================================================ */

/**
 * Les cellules avec colspan="4" dans le tfoot contiennent les labels
 * (Subtotal, Shipping and handling, VAT XX%, Total)
 * Elles doivent avoir un font-weight: 600 pour être cohérentes
 */
#order-products tfoot td[colspan="4"],
#order-detail-content tfoot td[colspan="4"],
.order-detail-content tfoot td[colspan="4"] {
    font-weight: 600;
}

/* ================================================================
   ORDER DETAIL MOBILE - Version responsive cachée
   ================================================================ */

/**
 * Sur mobile, PrestaShop affiche une version alternative du tableau
 * dans .order-items.hidden-md-up. On doit aussi y ajouter les infos TVA.
 * Le JS actuel ne gère que la version desktop (#order-products).
 */

/* Pour la version mobile, masquer le split TVA séparé s'il existe */
.hidden-md-up .su-split-vat-container {
    display: none;
}

/* ================================================================
   CHECKOUT - Bloc déplacé dans le cart summary
   ================================================================ */

/**
 * Styles appliqués au bloc VAT Detail lorsqu'il est déplacé
 * dans le cart summary par le JavaScript (checkout et panier)
 * Remplace les styles inline précédents
 */
.su-split-vat-moved-to-summary {
    margin: 15px 0 0 0;
    padding: 0px 0 0 0;
    border-top: 1px solid #e5e5e5;
    background-color: transparent;
}

/* ================================================================
   FIN DU FICHIER
   ================================================================ */

      /* ============================
   VAT SPLIT TABLE – MOBILE FIRST
   ============================ */

@media (max-width: 767.98px) {
  .su-split-vat-table {
    width: 100%;
    border-collapse: collapse;
  }

  .su-split-vat-table thead {
    display: none; /* On cache l’en-tête sur mobile */
  }

  .su-split-vat-table tbody,
  .su-split-vat-table tbody tr,
  .su-split-vat-table tbody td {
    display: block;
    width: 100%;
  }

  

  .su-split-vat-table tbody td {
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .su-split-vat-table tbody td::before {
    content: "";
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  /* Labels par colonne */
  .su-split-vat-table tbody td:nth-of-type(1)::before { content: "VAT Rate"; }
  .su-split-vat-table tbody td:nth-of-type(2)::before { content: "VAT Excl."; }
  .su-split-vat-table tbody td:nth-of-type(3)::before { content: "VAT Amount"; }

  /* On laisse les valeurs alignées à droite si .text-right est présente */
  .su-split-vat-table tbody td .text-right,
  .su-split-vat-table tbody td.text-right {
    text-align: right;
    margin-left: auto;
  }

  .su-split-vat-totals {
	display: none;
}
}

/* Desktop : comportement normal conservé */