/**
 * Préférences — Styles de la page de préférences utilisateur
 *
 * Sections d'icônes et d'images de catégories, sélecteur de jeux
 * et grille de prévisualisation des ressources taxonomiques.
 *
 * @file        cc-preferences.css
 * @package     CaisseConnect
 * @subpackage  CSS\Pages
 * @since       0.9
 * @version     1.7.2
 * @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
 */

.cc-section-icones-images {
    margin-bottom: 40px;
    padding: 20px;
    background: var(--cc-white, #fff);
    border: 1px solid var(--cc-border-color, #ddd);
    border-radius: var(--cc-border-radius, 4px);
}

.cc-section-icones-images h3 {
    margin-top: 0;
    border-bottom: 2px solid var(--cc-secondary, #0073aa);
    padding-bottom: 10px;
}

.cc-select-jeu {
    min-width: 300px;
    padding: 6px 10px;
}

.cc-zone-upload {
    margin-top: 15px;
    padding: 15px;
    background: var(--cc-white, #fff);
    border: 1px dashed var(--cc-secondary, #0073aa);
    border-radius: var(--cc-border-radius, 4px);
}

.cc-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.cc-preview-item {
    text-align: center;
    padding: 10px;
    border: 1px solid var(--cc-border-color, #ddd);
    border-radius: var(--cc-border-radius, 4px);
    background: var(--cc-gray-100, #f9f9f9);
}

.cc-preview-item img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.cc-preview-item .cc-preview-label {
    font-size: 12px;
    color: var(--cc-gray-700, #666);
    margin-top: 5px;
    word-break: break-word;
}

/* ========================================
   UPLOAD
   ======================================== */

/* Wrapper pour input file */
.cc-upload-wrapper {
    position: relative;
    display: inline-block;
}

/* Warning upload (cache par defaut) */
.cc-upload-warning {
    display: none;
    padding: 10px;
    margin-top: 10px;
    background: var(--cc-warning-bg, #fff3cd);
    border-left: 4px solid var(--cc-warning, #ffc107);
}

/* ========================================
   LABELS PREFERENCES
   ======================================== */

/* Label avec style preference */
.cc-pref-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

/* Variante sombre */
.cc-pref-label--dark {
    color: var(--cc-wp-text, #1d2327);
}

/* ========================================
   APERCU IMAGE
   ======================================== */

.cc-preview-image {
    max-width: 200px;
    height: auto;
    border: 1px solid var(--cc-border-color, #ddd);
    border-radius: var(--cc-border-radius, 4px);
}

/* ========================================
   SECTIONS
   ======================================== */

/* Section avec separateur superieur */
.cc-section-separator {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--cc-border-color, #ddd);
}

/* Groupe flex avec gap */
.cc-pref-flex-group {
    display: flex;
    gap: 15px;
}

/* ========================================
   POINTS DE VENTE (CRUD multi-points)
   ======================================== */

.cc-point-de-vente {
    margin-bottom: 20px;
    padding: 15px 20px;
    background: var(--cc-card-bg, #fff);
    border: 1px solid var(--cc-border-color, #ddd);
    border-radius: var(--cc-border-radius, 4px);
}

.cc-point-de-vente-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cc-border-color, #ddd);
}

.cc-point-de-vente-principal {
    font-weight: 600;
}

.cc-btn-supprimer-point-de-vente {
    color: #b32d2e;
}

.cc-btn-supprimer-point-de-vente:hover {
    color: #b32d2e;
    text-decoration: underline;
}

.cc-points-de-vente-actions {
    margin-top: 15px;
}

/* === TABLEAU ETIQUETTES (modèle : tableau Emballages) === */
.cc-etiquettes-table {
    border-collapse: collapse;
    font-size: 13px;
}

/* Surcharge le gabarit clé/valeur de .cc-table-reglages (th 25 % / td 75 %) */
.cc-etiquettes-table thead th {
    width: auto;
    max-width: none;
    background: #f0f0f1;
    border-bottom: 1px solid #c3c4c7;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    vertical-align: middle;
}

.cc-etiquettes-table tbody td {
    width: auto;
    padding: 8px 10px;
    border-bottom: 1px solid #ececec;
    vertical-align: middle;
}

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

.cc-etiquette-actions {
    white-space: nowrap;
}
.cc-etiquette-actions .button {
    margin-right: 8px;
}

/* Étiquette désactivée : atténuation visuelle de la ligne (le toggle reste pleinement lisible) */
.cc-etiquette-row.cc-etiquette-desactivee td:not(.cc-etiquette-activee) {
    opacity: 0.5;
}

/* Corbeille désactivée (étiquette off) : curseur sens interdit, comme le bouton Modifier */
.cc-etiquette-actions .cc-btn-supprimer-etiquette:disabled {
    cursor: not-allowed;
}

/* Colonne Icône : aperçu et tiret « pas d'icône » */
.cc-etiquette-icone-apercu {
    width: 32px;
    height: 32px;
    object-fit: contain;
    vertical-align: middle;
}

.cc-etiquette-icone-vide {
    color: #999;
}

/* Modal étiquette : champ en lecture seule (remplace un style= ; le bloc d'erreurs
   réutilise la classe partagée .cc-modal-errors). */
.cc-champ-lecture-seule {
    margin: 0;
    font-weight: 500;
}

/* ============================================
   TITRE DE CARTE PORTANT UN TOGGLE
   ============================================ */

/* Titre + icône d'information à gauche, toggle repoussé à droite de la carte.
   La ligne de base reste alignée sur le texte du titre : sans align-items,
   le switch s'étirerait sur toute la hauteur de la ligne. */
.cc-carte-titre-avec-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Le libellé « Activer » et son switch, collés, poussés à droite */
.cc-carte-titre-avec-toggle .cc-pref-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-weight: 400;
}