/**
 * Enrichissement batch — Styles dialogue et indicateur bandeau
 *
 * @file        cc-enrichissement-batch.css
 * @package     CaisseConnect
 * @subpackage  CSS\Components
 * @since       0.97
 * @version     1.2.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
 */

/* ==========================================
   Dialogue de confirmation
   ========================================== */

.cc-enrichissement-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cc-overlay-bg, rgba(0, 0, 0, 0.6));
    z-index: var(--cc-z-modal, 100000);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-enrichissement-dialog {
    background: var(--cc-white, #fff);
    border-radius: var(--cc-border-radius, 4px);
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--cc-shadow-modal, 0 5px 30px rgba(0, 0, 0, 0.3));
}

/* Le corps scrolle si le contenu dépasse, header/footer restent figés. */
.cc-enrichissement-dialog .cc-modal-body {
    overflow-y: auto;
}

/* Texte d'alerte « aucune source » poussé à gauche dans le footer. */
.cc-enrichissement-dialog .cc-enrich-aucune-source {
    margin: 0 auto 0 0;
    align-self: center;
    color: var(--cc-error, #b32d2e);
    font-size: 13px;
}

/* ==========================================
   Modal « Enrichissement » — Sections encadrées
   ========================================== */

.cc-enrich-section {
    border: 1px solid var(--cc-border-color, #ddd);
    border-radius: var(--cc-border-radius, 4px);
    margin-bottom: 16px;
}

.cc-enrich-section:last-child {
    margin-bottom: 0;
}

.cc-enrich-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--cc-gray-200, #f5f5f5);
    border-bottom: 1px solid var(--cc-border-color, #ddd);
    border-radius: var(--cc-border-radius, 4px) var(--cc-border-radius, 4px) 0 0;
}

.cc-enrich-section-titre {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

/* Toggle aligné verticalement dans l'en-tête (annule le margin-top du composant). */
.cc-enrich-section-header .cc-enrich-toggle {
    margin-top: 0;
}

/* Corps en grille 2 colonnes (table) : intitulés alignés en colonne 1,
   groupes d'options alignés en colonne 2 (largeur = plus large groupe, jamais
   sur 2 lignes). Les `.cc-enrich-champ` sont transparents (display:contents)
   pour que leurs cellules s'alignent directement sur la grille du corps. */
.cc-enrich-section-corps {
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr max-content;
    column-gap: 24px;
    row-gap: 10px;
    align-items: center;
}

.cc-enrich-champ {
    display: contents;
}

.cc-enrich-champ-libelle {
    margin: 0;
    font-weight: 600;
}

/* Options condensées sur UNE ligne (jamais empilées), alignées à gauche de la
   colonne 2 → même point de départ sur toutes les lignes. */
.cc-enrich-options {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    gap: 18px;
}

.cc-enrich-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}

/* ==========================================
   Modal « Enrichissement » — Bouton aide « i » + panneau explicatif
   ========================================== */

.cc-enrich-aide-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-style: italic;
    font-weight: 700;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
}

.cc-enrich-aide-toggle:hover,
.cc-enrich-aide-toggle.cc-enrich-aide-actif {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.cc-enrich-aide {
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--cc-info-bg, #e7f3ff);
    border: 1px solid var(--cc-info-border, #bcdbf9);
    border-left: 4px solid var(--cc-primary, #2271b1);
    border-radius: var(--cc-border-radius, 4px);
}

.cc-enrich-aide h4 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.cc-enrich-aide h4:not(:first-child) {
    margin-top: 12px;
}

.cc-enrich-aide p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* ==========================================
   Indicateur enrichissement dans le bandeau
   ========================================== */

.cc-enrichissement-indicateur {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
    padding: 4px 10px;
    margin-right: 8px;
    /* Herite de .cc-warning : fond #fff3cd, texte #856404, bordure #ffc107 */
}

/* Bouton annuler dans l'indicateur */
.cc-enrichissement-indicateur .cc-enrich-btn-annuler {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cc-warning-text, #856404);
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    margin-left: 4px;
    opacity: 0.7;
    vertical-align: middle;
}

.cc-enrichissement-indicateur .cc-enrich-btn-annuler:hover {
    opacity: 1;
    color: var(--cc-error, #dc3545);
}

/* Boutons OK et Voir dans l'indicateur (message final) */
.cc-enrichissement-indicateur .cc-enrich-btn-ok,
.cc-enrichissement-indicateur .cc-enrich-btn-voir {
    margin-left: 4px;
    vertical-align: middle;
}