/**
 * Modales — Styles des fenêtres modales
 *
 * Styles centralisés pour tous les modals et popups du plugin :
 * modales de base, modales d'information et popup de mise à jour produits.
 *
 * @file        cc-modals.css
 * @package     CaisseConnect
 * @subpackage  CSS\Components
 * @since       0.9
 * @version     1.8.1
 * @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
 */

/* ========================================
   MODAL DE BASE (.cc-modal)
   ======================================== */

.cc-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--cc-z-modal, 100000);
}

.cc-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cc-overlay-bg, rgba(0, 0, 0, 0.6));
}

.cc-modal-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--cc-white, #fff);
    border-radius: var(--cc-border-radius, 4px);
    max-width: 800px;
    width: 90%;
    box-shadow: var(--cc-shadow-modal, 0 5px 30px rgba(0, 0, 0, 0.3));
}

.cc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cc-spacing-md, 15px) var(--cc-spacing-lg, 20px);
    background: linear-gradient(135deg, var(--cc-primary, #667eea) 0%, var(--cc-primary-dark, #764ba2) 100%);
    color: var(--cc-white, #fff);
    border-radius: var(--cc-border-radius, 4px) var(--cc-border-radius, 4px) 0 0;
}

.cc-modal-header h2 {
    margin: 0;
    font-size: var(--cc-font-size-lg, 18px);
    color: inherit;
}

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

.cc-modal-close:hover {
    opacity: 0.8;
}

.cc-modal-body {
    padding: var(--cc-spacing-lg, 20px);
}

.cc-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--cc-spacing-sm, 10px);
    padding: var(--cc-spacing-md, 15px) var(--cc-spacing-lg, 20px);
    background: var(--cc-gray-200, #f5f5f5);
    border-top: 1px solid var(--cc-border-color, #ddd);
    border-radius: 0 0 var(--cc-border-radius, 4px) var(--cc-border-radius, 4px);
}

/* Variantes de header */
.cc-modal-header--warning {
    background: var(--cc-warning-alt, #f2b72a);
}

.cc-modal-header--success {
    background: var(--cc-success, #28a745);
}

.cc-modal-header--error {
    background: var(--cc-error, #dc3545);
}

/* Classes utilitaires modals */
.cc-modal-body--scrollable {
    max-height: 60vh;
    overflow-y: auto;
}

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

/* Tailles de modal */
.cc-modal-content--sm { max-width: 500px; }
.cc-modal-content--md { max-width: 600px; }
.cc-modal-content--lg { max-width: 900px; }

/* Body avec scroll */
.cc-modal-body--scroll {
    max-height: 60vh;
    overflow-y: auto;
}

/* Compteur dans footer modal */
.cc-modal-count {
    flex: 1;
    color: var(--cc-gray-700, #666);
}

/* Styles specifiques taxonomie */
.cc-taxonomie-readonly {
    width: 100% !important;
}

.cc-orphelins-separator {
    padding: var(--cc-spacing-sm, 10px);
    background: var(--cc-warning-bg, #fff3cd);
    border-left: 4px solid var(--cc-warning, #ffc107);
    margin: var(--cc-spacing-md, 15px) 0 var(--cc-spacing-sm, 10px) 0;
    font-weight: 600;
    color: var(--cc-warning-text, #856404);
}

/* Variante header info */
.cc-modal-header--info {
    background: var(--cc-secondary, #0073aa);
}

/* ========================================
   MODAL DES LOGS JS (.cc-modal-logs)
   Utilisee par cc-utils.js (admin + mobile)
   ATTENTION : Ces classes sont dupliquees dans
   css/mobile/cc-mobile-popups.css (le mobile ne charge pas main.css).
   Toute modification ici doit etre reportee la-bas.
   ======================================== */

.cc-modal-logs {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--cc-z-modal, 100000);
    justify-content: center;
    align-items: center;
}

.cc-modal-logs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cc-overlay-bg, rgba(0, 0, 0, 0.6));
}

.cc-modal-logs-content {
    position: relative;
    z-index: 1;
    background: var(--cc-white, #fff);
    border-radius: var(--cc-border-radius, 4px);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--cc-shadow-modal, 0 5px 30px rgba(0, 0, 0, 0.3));
}

.cc-modal-logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cc-spacing-md, 15px) var(--cc-spacing-lg, 20px);
    background: linear-gradient(135deg, var(--cc-primary, #667eea) 0%, var(--cc-primary-dark, #764ba2) 100%);
    color: var(--cc-white, #fff);
    border-radius: var(--cc-border-radius, 4px) var(--cc-border-radius, 4px) 0 0;
}

.cc-modal-logs-header h2 {
    margin: 0;
    font-size: var(--cc-font-size-lg, 18px);
    color: inherit;
}

.cc-modal-logs-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.cc-modal-logs-close:hover {
    opacity: 0.8;
}

.cc-modal-logs-body {
    padding: var(--cc-spacing-lg, 20px);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.cc-modal-logs-body pre {
    white-space: pre-wrap;
    font-family: var(--cc-font-mono, monospace);
    font-size: var(--cc-font-size-sm, 12px);
    margin: 0;
}

.cc-modal-logs-footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--cc-spacing-md, 15px) var(--cc-spacing-lg, 20px);
    background: var(--cc-gray-200, #f5f5f5);
    border-top: 1px solid var(--cc-border-color, #ddd);
    border-radius: 0 0 var(--cc-border-radius, 4px) var(--cc-border-radius, 4px);
}

.cc-modal-logs-btn {
    padding: 8px 16px;
    background: var(--cc-primary, #667eea);
    color: var(--cc-white, #fff);
    border: none;
    border-radius: var(--cc-border-radius, 4px);
    cursor: pointer;
    font-size: var(--cc-font-size-md, 14px);
}

.cc-modal-logs-btn:hover {
    opacity: 0.9;
}

/* ========================================
   MODAL D'INFORMATION (.cc-modal-info)
   ======================================== */

/* Icone d'information cliquable */
.cc-icone-information {
    color: var(--cc-secondary, #0073aa);
    font-size: 20px;
    font-weight: normal;
    cursor: pointer;
    margin-left: 2px;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-block;
}

.cc-icone-information:hover {
    color: var(--cc-secondary-dark, #005a87);
}

.cc-icone-information:focus {
    outline: 2px solid var(--cc-secondary, #0073aa);
    outline-offset: 2px;
}

/* Modal info - z-index eleve pour s'afficher au-dessus du wizard */
.cc-modal-info {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--cc-z-modal-info, 1000001);
}

.cc-modal-info-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cc-overlay-bg, rgba(0, 0, 0, 0.6));
}

.cc-modal-info-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--cc-white, #fff);
    border-radius: var(--cc-border-radius, 4px);
    max-width: 600px;
    width: 90%;
    box-shadow: var(--cc-shadow-modal, 0 5px 30px rgba(0, 0, 0, 0.3));
}

.cc-modal-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--cc-primary, #667eea) 0%, var(--cc-primary-dark, #764ba2) 100%);
    color: var(--cc-white, #fff);
    border-radius: 4px 4px 0 0;
}

.cc-modal-avertissement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--cc-warning-alt, #f2b72a);
    color: var(--cc-white, #fff);
    border-radius: 4px 4px 0 0;
}

.cc-modal-info-header h2 {
    margin: 0;
    font-size: 18px;
    color: inherit;
}

.cc-modal-info-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: opacity 0.2s;
}

.cc-modal-info-close:hover {
    opacity: 0.8;
}

.cc-modal-info-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
    line-height: 1.6;
}

/* Modal « Fiche produit » (cc-fiche-produit-modal.js) : la vue mobile défile
   dans l'iframe, pas dans le corps. */
.cc-fiche-produit-body {
    padding: 0;
    max-height: none;
    overflow: hidden;
}

.cc-fiche-produit-iframe {
    display: block;
    width: 100%;
    height: calc(90vh - 60px);
    border: 0;
}

/* Styles pour le contenu HTML des modals info */
.cc-modal-info-body p {
    margin: 0 0 10px 0;
}

.cc-modal-info-body p:last-child {
    margin-bottom: 0;
}

.cc-modal-info-body ul {
    margin: 10px 0;
    padding-left: 25px;
    list-style: disc;
}

.cc-modal-info-body ol {
    margin: 10px 0;
    padding-left: 25px;
    list-style: decimal;
}

.cc-modal-info-body li {
    margin-bottom: 5px;
}

.cc-modal-info-body a {
    color: var(--cc-secondary, #0073aa);
    text-decoration: underline;
}

.cc-modal-info-body a:hover {
    color: var(--cc-secondary-dark, #005a87);
}

.cc-modal-info-body strong {
    font-weight: 600;
}

.cc-modal-info-body code {
    background: var(--cc-gray-300, #f0f0f0);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: var(--cc-font-mono, monospace);
    font-size: 0.9em;
}

.cc-modal-info-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    background: var(--cc-gray-200, #f5f5f5);
    border-top: 1px solid var(--cc-border-color, #ddd);
    border-radius: 0 0 4px 4px;
}

/* ----------------------------------------
   Overlay de chargement scopé modal (ccModalChargement, cc-utils.js).
   Mêmes noms de classes que la variante mobile (cc-mobile-popups.css) en vue
   d'une unification future ; jamais co-chargés (feuilles admin vs mobile).
   ---------------------------------------- */
.cc-loading-host {
    /* Ancre de positionnement, posée uniquement quand l'overlay est présent.
       Générique (≠ mobile qui cible .popup-content) car la cible peut être un
       .cc-modal-info-body, non positionné nativement. */
    position: relative;
}

.cc-modal-loading {
    position: absolute;
    inset: 0;
    /* Doit capter les clics (pas de pointer-events:none) pour bloquer toute
       revalidation/double-action pendant la requête. */
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    /* Voile gris translucide (look « grisé » standard d'un état de chargement),
       plutôt qu'un fond blanc opaque. */
    background: rgba(0, 0, 0, 0.15);
    /* Hérite du rayon du modal (.cc-modal-info-content à 4px ; neutre sur le body). */
    border-radius: inherit;
}

/* Le spinner WP natif hérite du float:right de common.css — le neutraliser en CSS. */
.cc-modal-loading .spinner {
    float: none;
}

.cc-modal-loading-text {
    font-size: 14px;
    color: var(--cc-text, #333);
}

/* ========================================
   POPUP MISE A JOUR PRODUITS (.cc-maj-popup)
   ======================================== */

.cc-maj-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cc-overlay-bg, rgba(0, 0, 0, 0.6));
    z-index: var(--cc-z-wizard, 999999);
    justify-content: center;
    align-items: center;
}

/* Compatible avec fadeIn() de jQuery qui met display:block */
.cc-maj-popup-overlay[style*="display: block"],
.cc-maj-popup-overlay[style*="display: flex"],
.cc-maj-popup-overlay.active {
    display: flex !important;
}

.cc-maj-popup {
    background: var(--cc-white, white);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.cc-maj-popup-header {
    padding: 20px;
    border-bottom: 1px solid var(--cc-border-color, #ddd);
    background: var(--cc-gray-200, #f5f5f5);
    border-radius: 8px 8px 0 0;
}

.cc-maj-popup-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--cc-text, #333);
}

/* Variante erreur pour popup header */
.cc-maj-popup-header--error {
    background-color: var(--cc-error, #dc3545);
}

.cc-maj-popup-header--error h2 {
    color: var(--cc-white, white);
}

.cc-maj-popup-body {
    padding: 20px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Barre de progression */
.cc-maj-progress-container {
    margin-bottom: 20px;
    flex-shrink: 0;
}

.cc-maj-progress-bar {
    width: 100%;
    height: 30px;
    background-color: var(--cc-gray-300, #f0f0f0);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.cc-maj-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--cc-primary, #667eea) 0%, var(--cc-primary-dark, #764ba2) 100%) !important;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-white, white);
    font-weight: bold;
    font-size: 14px;
}

/* Statut de l'application des seuils de rupture (au-dessus de la barre) */
.cc-seuil-progress-statut {
    margin: 0 0 8px 0;
}

/* Succès : texte en vert (spécificité p.… pour battre .description de WP) */
p.cc-seuil-progress-statut--succes {
    color: var(--cc-success, #28a745);
    font-weight: 600;
}

/* Zone des messages */
.cc-maj-messages {
    flex: 0 0 250px;
    overflow-y: auto;
    border: 1px solid var(--cc-border-color, #ddd);
    padding: 15px;
    background: var(--cc-gray-100, #f9f9f9);
    border-radius: var(--cc-border-radius, 4px);
    margin-bottom: 15px;
    font-family: var(--cc-font-mono, monospace);
    font-size: 13px;
    line-height: 1.6;
}

/* Zone des resultats */
.cc-maj-results {
    flex: 0 0 250px;
    overflow-y: auto;
    border: 1px solid var(--cc-border-color, #ddd);
    padding: 15px;
    background: var(--cc-gray-100, #f9f9f9);
    border-radius: var(--cc-border-radius, 4px);
    display: none;
}

.cc-maj-results.visible {
    display: block;
}

.cc-maj-results h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--cc-text, #333);
    font-size: 18px;
}

.cc-maj-results h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    color: var(--cc-text-light, #555);
    font-size: 15px;
}

.cc-maj-results ul {
    margin: 0;
    padding-left: 20px;
}

.cc-maj-results li {
    margin-bottom: 5px;
    line-height: 1.5;
}

.cc-maj-results-section {
    margin-bottom: 20px;
}

/* Messages individuels */
.cc-maj-message {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: var(--cc-border-radius, 4px);
    border-left: 4px solid var(--cc-gray-500, #ccc);
}

.cc-maj-message.info {
    background: #fff;
    border-left-color: var(--cc-info-alt, #2196f3);
    color: inherit;
}

.cc-maj-message.success {
    background: #fff;
    border-left-color: var(--cc-success, #28a745);
    color: inherit;
}

.cc-maj-message.warning {
    background: #fff;
    border-left-color: var(--cc-warning-alt, #f2b72a);
    color: inherit;
}

.cc-maj-message.error {
    background: #fff;
    border-left-color: var(--cc-error, #dc3545);
    color: inherit;
}

/* Footer popup MAJ */
.cc-maj-popup-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--cc-border-color, #ddd);
    background: var(--cc-gray-200, #f5f5f5);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-radius: 0 0 8px 8px;
    flex-shrink: 0;
}

/* Boutons popup MAJ */
.cc-maj-btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--cc-border-radius, 4px);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.cc-maj-btn-cancel {
    background-color: var(--cc-error, #dc3545);
    color: var(--cc-white, white);
}

.cc-maj-btn-cancel:hover:not(:disabled) {
    background-color: var(--cc-error-dark, #c82333);
}

.cc-maj-btn-cancel:disabled {
    background-color: var(--cc-gray-500, #ccc);
    cursor: not-allowed;
}

.cc-maj-btn-close {
    background-color: var(--cc-info-alt, #2196f3);
    color: var(--cc-white, white);
}

.cc-maj-btn-close:hover {
    background-color: var(--cc-info-alt, #2196f3);
}

/* Scrollbar personnalisee */
.cc-maj-messages::-webkit-scrollbar,
.cc-maj-results::-webkit-scrollbar {
    width: 8px;
}

.cc-maj-messages::-webkit-scrollbar-track,
.cc-maj-results::-webkit-scrollbar-track {
    background: var(--cc-gray-200, #f5f5f5);
}

.cc-maj-messages::-webkit-scrollbar-thumb,
.cc-maj-results::-webkit-scrollbar-thumb {
    background: var(--cc-gray-600, #999);
    border-radius: 4px;
}

.cc-maj-messages::-webkit-scrollbar-thumb:hover,
.cc-maj-results::-webkit-scrollbar-thumb:hover {
    background: var(--cc-text-light, #555);
}