/**
 * Expédition — Préférences (CRUD classes + emballages + cartes catégories)
 *
 * Styles pour la page Préférences > Expédition uniquement :
 *  - Tableau CRUD des classes d'expédition gérées par CC
 *  - Sous-tableau emballages par classe (modale d'édition de classe)
 *  - Modales d'édition (classe + emballage)
 *  - Cartes catégories ↔ classes
 *
 * Le toggle d'activation et le futur sélecteur radio de provider (phase 2)
 * vivent dans cc-expedition-admin.css (page Administration > Expédition).
 *
 * @file        cc-expedition-preferences.css
 * @package     CaisseConnect
 * @subpackage  CSS\Pages
 * @since       0.98.0
 * @version     1.2.4
 * @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
 */

/* === Général === */
.cc-expedition-radio {
    margin-right: 20px;
}

.cc-expedition-row-hidden {
    display: none;
}

/* Feedback enregistrement carte 1 */
.cc-expedition-feedback {
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.cc-expedition-feedback.cc-success {
    color: #46b450 !important;
}

/* Espacement après les radios */
.cc-expedition-radio input[type="radio"] {
    margin-right: 5px;
}

/* === Classes d'expédition - Tableau CRUD === */
.cc-classes-expedition-table {
    width: 100%;
    margin-top: 20px;
}

.cc-classes-expedition-table thead th {
    font-weight: 600;
    padding: 10px;
    background: #f0f0f1;
    border-bottom: 1px solid #c3c4c7;
}

.cc-classes-expedition-table tbody td {
    padding: 10px;
    border-bottom: 1px solid #ececec;
    vertical-align: middle;
}

.cc-classe-row:nth-child(odd) {
    background: #f6f7f7;
}
.cc-classe-row:nth-child(even) {
    background: #fff;
}
.cc-classe-row:hover {
    background: #f0f0f1;
}

.cc-classe-non-geree {
    opacity: 0.5;
}

.cc-classe-actions {
    white-space: nowrap;
}

.cc-classe-ajout-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cc-classe-ajout-row input[type="text"] {
    padding: 5px 10px;
    width: 240px;
}

#cc-classes-expedition-message {
    margin-top: 15px;
}

#cc-classes-expedition-message .cc-btn-actualiser {
    margin-left: 10px;
}

/* Boutons désactivés avec tooltip */
.cc-btn-modifier-classe:disabled,
.cc-btn-supprimer-classe:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===========================================================
   Modale d'édition de classe (avec sous-tableau emballages)
   =========================================================== */
#cc-modal-modifier-classe .cc-modal-content,
#cc-modal-modifier-emballage .cc-modal-content {
    max-width: 760px;
    width: calc(100% - 40px);
}

.cc-modal-classe-form-row {
    margin-bottom: 14px;
}

.cc-modal-classe-form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.cc-modal-classe-form-row input[type="text"],
.cc-modal-classe-form-row input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
}

.cc-modal-classe-form-row input[type="number"] {
    max-width: 140px;
}

.cc-modal-classe-form-row .cc-hint-phase2 {
    color: #777;
    font-size: 12px;
    font-style: italic;
    margin-top: 4px;
}

.cc-modal-classe-checkbox-row {
    margin-bottom: 14px;
}

.cc-modal-classe-checkbox-row label {
    font-weight: 600;
}

/* Sous-tableau emballages dans la modale classe */
.cc-emballages-section {
    margin-top: 18px;
    border-top: 1px solid #c3c4c7;
    padding-top: 14px;
}

.cc-emballages-section h4 {
    margin: 0 0 8px 0;
}

.cc-emballages-table-wrapper {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
}

.cc-emballages-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cc-emballages-table thead th {
    position: sticky;
    top: 0;
    background: #f0f0f1;
    border-bottom: 1px solid #c3c4c7;
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
}

.cc-emballages-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #ececec;
    vertical-align: middle;
}

.cc-emballages-table tbody tr:hover {
    background: #fafafa;
}

.cc-emballage-actions {
    white-space: nowrap;
}

.cc-emballage-actions .button-link {
    margin-right: 8px;
}

/* Alternance de couleurs des lignes (standard WP) */
.cc-emballage-row:nth-child(odd) {
    background: #f6f7f7;
}
.cc-emballage-row:nth-child(even) {
    background: #fff;
}
.cc-emballage-row:hover {
    background: #f0f0f1;
}
.cc-emballage-inactif {
    opacity: 0.5;
}

/* Bouton poubelle */
.cc-btn-poubelle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: #787c82;
    vertical-align: middle;
}
.cc-btn-poubelle:hover {
    color: #d32f2f;
}
.cc-btn-poubelle .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Flèche déplier/replier catégories */
.cc-cat-toggle {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    color: #787c82;
}
.cc-cat-toggle:hover {
    color: #135e96;
}
.cc-cat-toggle .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
    transform: rotate(0);
}
.cc-cat-toggle--expanded .dashicons {
    transform: rotate(90deg);
}

.cc-emballages-empty {
    color: #777;
    font-style: italic;
    padding: 14px;
    text-align: center;
}

.cc-emballages-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-height: 280px;
    overflow-y: auto;
}

.cc-emballages-colonne h5 {
    margin: 0 0 8px;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 4px;
}

.cc-emballages-colonne .cc-emballage-checkbox-label {
    display: block;
    padding: 4px 0;
    cursor: pointer;
}

.cc-emballage-checkbox-detail {
    display: block;
    font-size: 11px;
    color: #888;
    margin-left: 22px;
}

.cc-emballage-checkbox-disabled {
    opacity: 0.45;
}

#cc-btn-ajouter-emballage {
    margin-top: 10px;
}

/* Modale d'édition d'un emballage : grille L/l/h/tare/weight_max */
.cc-emballage-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.cc-emballage-form-grid .cc-modal-classe-form-row {
    margin-bottom: 0;
}

.cc-emballage-form-grid--full {
    grid-column: 1 / -1;
}

/* Erreurs de validation côté client */
.cc-modal-errors {
    color: #d32f2f;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-radius: 3px;
    font-size: 13px;
}

.cc-modal-errors ul {
    margin: 4px 0 0 18px;
    padding: 0;
}

/* Pied des modales */
.cc-modal-footer {
    margin-top: 18px;
    text-align: right;
    border-top: 1px solid #ececec;
    padding-top: 12px;
}

.cc-modal-footer .button {
    margin-left: 8px;
}

/* === Zones d'expédition === */

.cc-zones-expedition-table {
    margin-top: 12px;
    width: 100%;
}

.cc-zones-expedition-table thead th {
    font-weight: 600;
    padding: 8px 10px;
    background: #f0f0f1;
    border-bottom: 1px solid #c3c4c7;
}

.cc-zones-expedition-table tbody td {
    padding: 10px;
    border-bottom: 1px solid #ececec;
    vertical-align: top;
}

.cc-zones-expedition-table input[type="checkbox"] {
    margin-top: 4px;
}

#cc-zone-custom-countries + .select2-container {
    margin-top: 8px;
}

.select2-results__group {
    cursor: pointer;
}

.select2-results__group:hover {
    background-color: #f0f0f1;
}

/* Feedback générique cartes expédition préférences */

.cc-feedback {
    margin-left: 10px;
    font-size: 13px;
}

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

.cc-feedback--ko {
    color: #b32d2e;
}

.cc-feedback--info {
    color: #646970;
}

.cc-auto-emballe-badge {
    display: inline-block;
    background: var(--cc-color-info-bg, #e8f4fd);
    color: var(--cc-color-info-text, #1e6fa0);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
}

/* === Import / export des emballages entre sites === */

/* Message de retour : pleine largeur de la carte (override du fit-content
   global de .cc-success/.cc-error, scopé à ce seul conteneur). */
#cc-emballages-globaux-message.cc-success,
#cc-emballages-globaux-message.cc-error {
    width: auto;
    max-width: none;
}

/* Barres d'actions des cartes Emballages (Ajouter / Importer / Exporter) et
   Classes (Importer / Exporter) — styles partagés (transfert inter-sites). */
.cc-emballages-actions-barre,
.cc-classes-expedition-actions-barre {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.cc-emballages-actions-barre .button,
.cc-classes-expedition-actions-barre .button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cc-emballages-actions-barre .button .dashicons,
.cc-classes-expedition-actions-barre .button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

/* Tableaux des modales de transfert / écrasement (emballages ET classes) */
.cc-transfert-emballages-table,
.cc-ecrasement-emballages-table,
.cc-transfert-classes-table,
.cc-ecrasement-classes-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.cc-transfert-emballages-table th,
.cc-transfert-emballages-table td,
.cc-ecrasement-emballages-table th,
.cc-ecrasement-emballages-table td,
.cc-transfert-classes-table th,
.cc-transfert-classes-table td,
.cc-ecrasement-classes-table th,
.cc-ecrasement-classes-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--cc-gray-200, #e0e0e0);
}

/* Sélecteur de portée des emballages (import combiné classes, Phase 3) :
   poussé à gauche du pied de modale, les boutons restant à droite.
   La règle d'affichage est scopée :not(.cc-hidden) pour ne pas écraser le
   `.cc-hidden` de cc-utils.css (même spécificité, mais chargé plus tôt). */
.cc-transfert-classes-portee {
    align-items: center;
    gap: 6px;
    margin-right: auto;
}

.cc-transfert-classes-portee:not(.cc-hidden) {
    display: inline-flex;
}

.cc-transfert-classes-portee select {
    max-width: 100%;
}

/* Libellés de portée longs : laisser le pied de cette modale passer à la ligne
   plutôt que de comprimer/évincer les boutons (scopé à la modale classes). */
#cc-modal-transfert-classes .cc-modal-footer {
    flex-wrap: wrap;
}

.cc-transfert-col-check {
    width: 36px;
    text-align: center;
}

/* Badge « Existe déjà » sur les lignes identiques (gris, convention .cc-badge-{nom}) */
.cc-badge-existe-deja {
    display: inline-block;
    background: var(--cc-gray-100, #f0f0f1);
    color: var(--cc-gray-700, #50575e);
    border: 1px solid var(--cc-gray-500, #8c8f94);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 3px;
    vertical-align: middle;
}

/* Ligne « identique » : grisée et inerte */
.cc-transfert-row--identique {
    opacity: 0.55;
}

/* Badge « Doublon » (convention .cc-badge-{nom}, style autonome) */
.cc-badge-doublon {
    display: inline-block;
    position: relative;
    background: var(--cc-warning-dark, #ff8c00);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 3px;
    vertical-align: middle;
    cursor: context-menu;
}

.cc-badge-doublon:hover .cc-infobulle {
    visibility: visible;
    opacity: 1;
}

/* Badges d'état d'import des classes (convention .cc-badge-{nom}, autonomes) :
   « Emballages indisponibles » / « Slug occupé » (gris) et « Repli manquant »
   (orange). position:relative + infobulle au survol — calque .cc-badge-doublon. */
.cc-badge-indispo,
.cc-badge-repli-manquant {
    display: inline-block;
    position: relative;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 3px;
    vertical-align: middle;
    cursor: context-menu;
}

.cc-badge-indispo {
    background: var(--cc-gray-600, #646970);
}

.cc-badge-repli-manquant {
    background: var(--cc-warning-dark, #ff8c00);
}

.cc-badge-indispo:hover .cc-infobulle,
.cc-badge-repli-manquant:hover .cc-infobulle {
    visibility: visible;
    opacity: 1;
}

/* Récap d'import (liste détaillée par item) */
.cc-import-rapport {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.cc-import-rapport li {
    padding: 3px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cc-import-rapport-motif {
    font-style: italic;
    opacity: 0.8;
}

/* Pastilles d'action du récap (convention .cc-badge-{nom}, autonomes) */
.cc-badge-action-ajoute,
.cc-badge-action-remplace,
.cc-badge-action-ignore {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 3px;
    color: #fff;
    vertical-align: middle;
}

.cc-badge-action-ajoute {
    background: #2e7d32;
}

.cc-badge-action-remplace {
    background: #1565c0;
}

.cc-badge-action-ignore {
    background: #757575;
}