/**
 * Produits — Styles de la page de gestion des produits
 *
 * Liste des produits, icônes d'expédition, filtres de recherche,
 * badges de statut et mise en forme du tableau produits.
 *
 * @file        cc-produits.css
 * @package     CaisseConnect
 * @subpackage  CSS\Pages
 * @since       0.9
 * @version     1.3.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
 */

/* === BACKGROUNDS SPECIAUX === */
.bg-anoter {
    background-color: var(--cc-note-bg, #ffe5b4);
}

.bg-normal {
    /* Style par defaut */
}

/* === LAYOUT PRINCIPAL === */
.cc-ui-produits {
    padding: 10px 20px 20px 20px;
}

/* === SELECTEUR NOMBRE DE LIGNES (dans la barre cc-nav-tabs) === */
.cc-select-nb-lignes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

.cc-select-nb-lignes label {
    font-size: 13px;
    color: var(--cc-gray-700, #666);
    white-space: nowrap;
}

.cc-select-nb-lignes select {
    border: 1px solid var(--cc-wp-border, #8c8f94);
    border-radius: 4px;
    background: var(--cc-white, #fff);
    cursor: pointer;
    padding: 2px 8px;
    min-height: auto;
    height: auto;
    line-height: 1.4;
}

/* === BOUTON JOURNAL : hauteur réduite dans la barre d'onglets === */
.cc-nav-tabs #cc-produits-journal-ouvrir {
    padding: 2px 8px;
    min-height: auto;
    line-height: 1.4;
    margin-top: 7px;
    margin-bottom: 3px;
}

.cc-nav-tabs #cc-produits-journal-ouvrir .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    vertical-align: middle;
    margin: -2px 2px -2px 0;
}

/* === LIENS PRODUITS === */
.cc-produits-liens {
    font-size: 14px;
    font-weight: normal;
}

.cc-produits-liens a {
    text-decoration: none;
    color: var(--cc-secondary, #0073aa);
}

.cc-produits-liens a:hover {
    text-decoration: underline;
}

.cc-lien-actif {
    color: var(--cc-gray-700, #666);
    font-weight: bold;
}

/* === BARRE D'ACTIONS === */
.cc-barre-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: var(--cc-gray-200, #f5f5f5);
    border: 1px solid var(--cc-border-color, #ddd);
    border-radius: 3px;
}

.cc-actions-gauche,
.cc-actions-recherche,
.cc-actions-filtres,
.cc-actions-droite {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cc-actions-droite {
    margin-left: auto;
}

#cc-form-actions-groupees {
    display: flex;
    align-items: center;
    gap: 2px;
}
#cc-action-groupee {
    max-width: 150px;
}

.cc-note-bas-tableau {
    margin-top: 10px;
    font-size: 12px;
    color: var(--cc-gray-700, #666);
}

.cc-category-select {
    width: 100%;
    max-width: 200px;
}

/* === NAVIGATION === */
.cc-nav-info {
    font-weight: bold;
    margin-right: 10px;
}

.cc-nav-pages {
    font-weight: bold;
    padding: 0 5px;
}

/* === TABLEAU PRODUITS === */
.cc-tableau-produits {
    margin-top: 15px;
    table-layout: auto;
    width: auto;
    min-width: 100%;
}

.cc-tableau-produits th {
    padding: 8px;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
}

.cc-tableau-produits td {
    padding: 8px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table.cc-tableau-produits th .cc-icone-information {
    font-size: 14px;
}

table.cc-tableau-produits th.check-column,
table.cc-tableau-produits td.check-column {
    width: 40px;
    text-align: center;
    padding-top: 8px;
    padding-left: 0px;
}

#cc-select-all {
    position: relative;
    top: 10px;
}

table.cc-tableau-produits th.cc-colonne-info,
table.cc-tableau-produits td.cc-colonne-info {
    width: 30px;
    text-align: center;
    overflow: visible;
}

table.cc-tableau-produits th.cc-colonne-etoile,
table.cc-tableau-produits td.cc-colonne-etoile {
    width: 24px;
    padding: 2px !important;
    text-align: center;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
}

table.cc-tableau-produits th.cc-colonne-etoile {
    padding-bottom: 4px !important;
    color: var(--cc-important, #007bff);
}

table.cc-tableau-produits th.cc-colonne-promo,
table.cc-tableau-produits td.cc-colonne-promo {
    width: 24px;
    padding: 2px !important;
    text-align: center;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
}

.cc-featured-star {
    color: var(--cc-important, #007bff);
    font-size: 20px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.cc-featured-star.off {
    color: var(--cc-gray-muted, #adb5bd);
}

.cc-featured-star:hover {
    color: var(--cc-important, #007bff);
    opacity: 0.7;
}

.cc-featured-star.off:hover {
    color: var(--cc-important, #007bff);
    opacity: 0.5;
}

.cc-enrichissement-bell {
    color: var(--cc-warning-dark, #ff8c00);
    font-size: 16px;
    vertical-align: middle;
    margin-right: 2px;
}

.cc-enrichissement-bell-lien {
    text-decoration: none;
    cursor: pointer;
}

.cc-enrichissement-bell-lien:hover .cc-enrichissement-bell {
    opacity: 0.7;
}

table.cc-tableau-produits th.cc-colonne-large,
table.cc-tableau-produits td.cc-colonne-large {
    min-width: 200px;
}

table.cc-tableau-produits th.cc-colonne-etroite,
table.cc-tableau-produits td.cc-colonne-etroite {
    max-width: 150px;
}

/* Sélecteur spécifique pour les infobulles dans le tableau */
.cc-tableau-produits td.cc-cellule-avec-infobulle {
    overflow: visible;
}

.cc-no-products {
    text-align: center;
    padding: 30px;
    font-style: italic;
    color: var(--cc-gray-700, #666);
}

.cc-product-checkbox {
    cursor: pointer;
}

#cc-select-all {
    cursor: pointer;
}

.cc-filtre-select {
    width: 100%;
    min-width: 4em;
    box-sizing: border-box;
}

/* Placeholder des filtres : texte en gras quand aucun filtre sélectionné */
.cc-filtre-select option[value=""] {
    font-weight: bold;
}

/* Filtre actif mis en évidence : l'option sélectionnée n'est PAS l'option « Tous »
   (value=""). CSS pur via :has() — s'appuie sur la convention value="" uniforme des
   selects de filtre. Aucun marqueur PHP nécessaire. Dégradation silencieuse sur
   navigateur sans :has() (pas de highlight, aucune casse). */
.cc-filtre-select:has(option:checked:not([value=""])) {
    background-color: var(--cc-primary-focus, rgba(102, 126, 234, 0.1));
    border-color: var(--cc-primary, #667eea);
    color: var(--cc-primary-dark, #764ba2);
    font-weight: 600;
}

/* Croix de réinitialisation d'un select de filtre actif (pendant du × recherche).
   Wrapper injecté par cc-ui-produits.js autour des seuls selects actifs. Le wrapper
   est block+100% pour que le select conserve sa largeur de cellule (width:100%). */
.cc-filtre-select-wrapper {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Réserver la place à droite (croix + flèche native) pour que le libellé de
   l'option ne passe pas sous la croix. Ne s'applique qu'aux selects enveloppés
   (donc actifs). */
.cc-filtre-select-wrapper .cc-filtre-select {
    padding-right: 36px;
}

/* Croix superposée « dans la boîte », à gauche de la flèche native (~18px),
   au-dessus du texte. Invisible au repos, révélée au survol du select ou au focus
   clavier de la croix. Petite pastille BLANCHE (pas primary-focus : le fond du
   select actif est déjà primary-focus → la croix s'y fondrait) pour ressortir. */
.cc-filtre-clear {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #cc0000;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    padding: 0 3px;
    border-radius: 3px;
    background-color: var(--cc-white, #fff);
    opacity: 0;
    transition: opacity 0.15s;
}

.cc-filtre-select-wrapper:hover .cc-filtre-clear,
.cc-filtre-clear:focus {
    opacity: 1;
}

/* === RECHERCHE === */
.cc-recherche-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.cc-input-recherche {
    width: 150px;
    padding: 6px 10px;
    padding-right: 24px;
    border: 1px solid var(--cc-border-color, #ddd);
    border-radius: 3px;
    font-size: 14px;
    vertical-align: middle;
}

/* Recherche active mise en évidence : même highlight que les select box / icônes
   de filtre (fond primaire léger + bordure). Classe posée côté serveur quand un
   terme de recherche est appliqué. Sélecteur à DEUX classes (spécificité 0,2,0) pour
   battre le `input[type=text] { background:#fff }` de wp-admin/css/forms.css (0,1,1)
   sans recourir à !important. */
.cc-input-recherche.cc-input-recherche--actif {
    background-color: var(--cc-primary-focus, rgba(102, 126, 234, 0.1));
    border-color: var(--cc-primary, #667eea);
    color: var(--cc-primary-dark, #764ba2);
}

.cc-btn-effacer-recherche {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #cc0000;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.cc-recherche-wrapper:hover .cc-btn-effacer-recherche {
    opacity: 1;
}

.cc-input-recherche:focus {
    border-color: var(--cc-important, #007bff);
    outline: none;
    box-shadow: 0 0 0 1px var(--cc-important, #007bff);
}

.cc-recherche-icone {
    font-size: 16px;
    margin-right: 5px;
    vertical-align: middle;
}

/* === LIENS PRODUIT ET PHOTOS === */
.cc-lien-produit {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.cc-sku-infobulle {
    position: relative;
    display: inline-block;
}

.cc-lien-produit:hover {
    text-decoration: underline;
}

.cc-lien-photos {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

.cc-lien-photos:hover {
    text-decoration: underline;
    font-weight: bold;
}

.cc-badge-compose {
    display: inline-block;
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 3px;
}

.cc-badge-promo {
    display: inline-block;
    background: #d33c30;
    color: #fffb37;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 3px;
    vertical-align: middle;
}

/* Filtres cliquables d'en-tête (camion / étoile / promo) */
.cc-entete-filtre-icone {
    cursor: pointer;
    text-decoration: none;
}

.cc-entete-filtre-icone:hover {
    opacity: 0.7;
}

/* Filtre-icône actif mis en évidence : pastille de fond cohérente avec le highlight
   des select box de filtre (fond bleu léger + bordure primaire). Le glyphe interne
   conserve sa propre couleur (étoile bleue, camion vert, badge promo…). Classe posée
   par cc_ui_produits_entete_filtre_icone() — point de rendu centralisé unique. */
.cc-entete-filtre-icone--actif {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--cc-primary, #667eea);
    border-radius: 4px;
    background-color: var(--cc-primary-focus, rgba(102, 126, 234, 0.1));
}

/* Variante grisée (filtre promo inactif) : le badge a un fond rouge plein + texte jaune,
   griser le seul texte ne suffit pas → on override fond ET couleur. */
.cc-badge-promo--off {
    background: var(--cc-gray-muted, #adb5bd);
    color: #fff;
}

/* === BOUTONS-FILTRES DE STATUT (cumulables) ===
   Rendus dans .cc-nav-tabs, à la place des anciens onglets exclusifs. Chaque
   bouton « enfoncé » (--actif) ajoute son statut à l'union affichée. */
.cc-statut-toggle {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--cc-gray-400, #ddd);
    border-radius: 4px;
    background-color: var(--cc-white, #fff);
    color: var(--cc-text, #333);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    line-height: 1.6;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: all var(--cc-transition, 0.2s ease);
}

.cc-statut-toggle:hover {
    border-color: var(--cc-primary, #667eea);
    color: var(--cc-primary, #667eea);
    background-color: var(--cc-white, #fff);
}

.cc-statut-toggle--actif {
    background-color: var(--cc-primary, #667eea);
    border-color: var(--cc-primary, #667eea);
    color: var(--cc-white, #fff);
    box-shadow: inset 0 1px 3px var(--cc-primary-shadow, rgba(102, 126, 234, 0.3));
}

.cc-statut-toggle--actif:hover {
    background-color: var(--cc-primary-dark, #764ba2);
    border-color: var(--cc-primary-dark, #764ba2);
    color: var(--cc-white, #fff);
}

.cc-statut-toggle-compteur {
    font-weight: 400;
    opacity: 0.75;
}

/* Bouton « Appliquer » (dashicon seule) : rafraîchit l'affichage selon la
   sélection de boutons de statut. Désactivé tant que la sélection == l'affichage
   appliqué ; en couleur d'accent dès qu'une modification est en attente. */
.cc-statuts-appliquer.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    min-height: 30px;
}

.cc-statuts-appliquer.button .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
}

/* Modification en attente : bouton actif mis en évidence (couleur d'accent). */
.cc-statuts-appliquer.button:not(:disabled) {
    background-color: var(--cc-primary, #667eea);
    border-color: var(--cc-primary, #667eea);
    color: var(--cc-white, #fff);
    cursor: pointer;
}

.cc-statuts-appliquer.button:not(:disabled):hover {
    background-color: var(--cc-primary-dark, #764ba2);
    border-color: var(--cc-primary-dark, #764ba2);
    color: var(--cc-white, #fff);
}

.cc-statuts-appliquer.button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Ligne « éteinte » : produit archivé (rendu serveur neutralisé). Texte grisé
   façon sommeil, sans casser la lisibilité des liens SKU/intitulé cliquables. */
.cc-tableau-produits tr.cc-ligne-archivee td,
.cc-tableau-produits tr.cc-ligne-archivee th {
    color: var(--cc-gray-600, #999);
    background-color: var(--cc-gray-100, #f9f9f9);
}

/* Encart « aucun statut sélectionné » (sentinelle statuts=aucun, pas de tableau) */
.cc-aucun-statut-selectionne {
    padding: 24px;
    margin: 16px 0;
    text-align: center;
    color: var(--cc-text-light, #555);
    background-color: var(--cc-gray-100, #f9f9f9);
    border: 1px dashed var(--cc-gray-400, #ddd);
    border-radius: 4px;
}

/* === SOUS-FILTRES IMPUBLIABLES === */
.cc-sous-filtres {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
    font-size: 13px;
}

.cc-sous-filtre {
    text-decoration: none;
    color: var(--cc-primary, #2271b1);
}

.cc-sous-filtre--actif {
    font-weight: 600;
    color: var(--cc-text, #1d2327);
}

.cc-sous-filtre-sep {
    color: var(--cc-text-light, #8c8f94);
}

/* ── État de chargement (rechargement de la page Produits) ───────────────── */

/* Curseur « wait » natif (spinner seul, sans flèche) sur toute la page */
body.cc-chargement-produits,
body.cc-chargement-produits * {
    cursor: wait !important;
}

/* Overlay transparent qui capte tous les clics pendant le chargement */
.cc-overlay-chargement {
    position: fixed;
    inset: 0;
    z-index: var(--cc-z-overlay-chargement, 1000002); /* au-dessus de toute l'UI admin CC */
    cursor: wait;
    background: transparent;                           /* invisible : seul le curseur change */
}

/* Spinner visuel centré (affichage immédiat, indépendant du mouvement de la souris) */
.cc-overlay-chargement::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;                           /* recentrage (moitié de la taille) */
    border: 6px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--cc-primary, #2271b1);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;              /* @keyframes spin (cc-animations.css) */
}