/**
 * Styles du champ de sélection d'icônes du projet
 *
 * Fournit une interface moderne et responsive pour la sélection d'icônes SVG
 * avec modal, recherche en temps réel et aperçu interactif.
 *
 * @package     Pilo'Blocks
 * @subpackage  ACF Fields
 * @since       1.0.0
 *
 * Architecture :
 * - Design cohérent avec l'interface WordPress/Gutenberg via variables CSS partagées
 * - Animations fluides et transitions professionnelles
 * - Responsive avec support mobile et tablette
 * - Accessibilité optimisée (focus, contraste, tailles tactiles)
 *
 * Composants principaux :
 * - Conteneur du champ et aperçu de l'icône sélectionnée
 * - Boutons d'action (ajouter/modifier/supprimer)
 * - Modal de sélection avec grille d'icônes
 * - Barre de recherche et compteur de résultats
 * - Messages d'état et d'erreur
 */

/**
 * ============================================
 * BASE - Conteneur et configuration globale
 * ============================================
 */

/**
 * Règle de confinement globale
 *
 * Garantit que tous les éléments enfants respectent les limites
 * du conteneur parent et utilisent le modèle de boîte CSS cohérent.
 */
.pib-project-icons-v2-field *,
.pib-project-icons-v2-field *::before,
.pib-project-icons-v2-field *::after {
  box-sizing: border-box;
  max-width: 100%;
}

/**
 * Conteneur principal du champ
 *
 * S'adapte à la largeur du parent sans déborder,
 * avec hauteur automatique selon le contenu.
 */
.pib-project-icons-v2-field {
  width: 100%;
  max-width: 100%;
  height: fit-content;
  box-sizing: border-box;
  overflow: hidden;
}

/**
 * Données JSON masquées
 *
 * Contient les métadonnées des icônes sous forme JSON,
 * caché visuellement mais accessible au JavaScript.
 */
.pib-project-icons-v2-data {
  display: none;
}

/**
 * ============================================
 * INTERFACE PICKER - Aperçu et boutons
 * ============================================
 */

/**
 * Interface principale du champ
 *
 * Layout flex vertical pour organiser l'aperçu
 * de l'icône sélectionnée et les boutons d'action.
 */
.pib-project-icons-v2-interface {
  display: flex;
  flex-direction: column;
  gap: var(--pib-acf-spacing-md, 12px);
  margin-bottom: var(--pib-acf-spacing-md, 12px);
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/**
 * Container des boutons d'action
 *
 * Groupe les boutons ajouter/modifier/supprimer
 * dans une zone visuellement distincte.
 */
.pib-project-icons-v2-buttons-container {
  display: flex;
  align-items: center;
  gap: var(--pib-acf-spacing-sm, 8px);
  padding: var(--pib-acf-spacing-md, 12px);
  background: var(--pib-acf-bg-lighter, #f6f7f7);
  border: 1px solid var(--pib-acf-border, #ddd);
  border-radius: var(--pib-acf-radius-md, 4px);
}

/**
 * Aperçu de l'icône sélectionnée
 *
 * Affiche l'icône actuellement sélectionnée avec son slug.
 * Adapte son apparence selon l'état (vide ou avec icône).
 */
.pib-project-icons-v2-preview {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--pib-acf-spacing-sm, 8px);
  padding: var(--pib-acf-spacing-sm, 8px) var(--pib-acf-spacing-md, 12px);
  background: var(--pib-acf-bg-white, #fff);
  border: 1px solid var(--pib-acf-border, #ddd);
  border-radius: var(--pib-acf-radius-md, 4px);
  transition: var(--pib-acf-transition, all 0.15s ease-in-out);
  align-self: flex-start;
  box-sizing: border-box;
  min-height: 44px;
}

.pib-project-icons-v2-preview:hover {
  border-color: var(--pib-acf-primary, var(--wp-admin-theme-color, #3858e9));
  box-shadow: 0 0 0 1px rgba(var(--pib-acf-primary, 56, 88, 233), 0.1);
}

.pib-project-icons-v2-preview svg {
  display: block;
  fill: currentColor;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/**
 * Slug de l'icône dans l'aperçu
 */
.pib-project-icons-v2-preview .pib-project-icon-slug {
  font-size: 12px;
  color: var(--pib-acf-text-light, #757575);
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/**
 * État vide de l'aperçu
 */
.pib-project-icons-v2-preview:empty::before {
  content: "Aucune icône sélectionnée";
  font-size: 12px;
  color: var(--pib-acf-text-lighter, #949494);
  opacity: 0.8;
  font-style: italic;
}

/**
 * État avec icône sélectionnée
 */
.pib-project-icons-v2-preview:not(:empty) {
  border-color: var(--pib-acf-primary, var(--wp-admin-theme-color, #3858e9));
  background: var(--pib-acf-primary-light, rgba(56, 88, 233, 0.04));
}

.pib-project-icons-v2-preview:not(:empty) svg {
  color: var(--pib-acf-primary, var(--wp-admin-theme-color, #3858e9));
}

.pib-project-icons-v2-preview:not(:empty) .pib-project-icon-slug {
  color: var(--pib-acf-primary, var(--wp-admin-theme-color, #3858e9));
  font-weight: 600;
}

/**
 * ============================================
 * MODAL - Overlay et contenu
 * ============================================
 */

/**
 * Overlay de la modal
 *
 * Fond semi-transparent qui obscurcit le reste de l'interface
 * et centre le contenu de la modal.
 */
.pib-project-icons-v2-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000000;
  animation: pib-fade-in 0.2s ease-out;
}

@keyframes pib-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**
 * Conteneur de la modal
 *
 * Boîte blanche centrée contenant tous les éléments
 * de sélection (recherche, grille, compteurs).
 */
.pib-project-icons-v2-modal-content {
  background: var(--pib-acf-bg-white, #fff);
  border-radius: var(--pib-acf-radius-md, 4px);
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: pib-slide-in 0.2s ease-out;
}

@keyframes pib-slide-in {
  from {
    transform: scale(0.9) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/**
 * En-tête de la modal
 */
.pib-project-icons-v2-modal-content h3 {
  margin: 0;
  font-size: 18px;
  color: var(--pib-acf-text, #1e1e1e);
}

/**
 * ============================================
 * MODAL - Recherche et compteurs
 * ============================================
 */

/**
 * Wrapper de la barre de recherche
 */
.pib-project-icons-v2-modal-search-wrapper {
  margin-bottom: var(--pib-acf-spacing-lg, 16px);
  max-width: 100%;
  overflow: hidden;
}

/**
 * Barre de recherche dans la modal
 */
.pib-project-icons-v2-modal-search {
  width: 100%;
  padding: var(--pib-acf-spacing-md, 12px);
  border: 1px solid var(--pib-acf-border, #ddd);
  border-radius: var(--pib-acf-radius-sm, 2px);
  font-size: 13px;
  box-sizing: border-box;
  transition: var(--pib-acf-transition, all 0.15s ease-in-out);
}

.pib-project-icons-v2-modal-search:focus {
  outline: none;
  border-color: var(--pib-acf-border-focus, var(--wp-admin-theme-color, #3858e9));
  box-shadow: var(--pib-acf-shadow-focus, 0 0 0 2px var(--wp-admin-theme-color, #3858e9));
}

/**
 * Compteur de résultats
 */
.pib-project-icons-v2-modal-results-counter {
  font-size: 12px;
  color: var(--pib-acf-text-light, #757575);
  margin: var(--pib-acf-spacing-sm, 8px) 0 var(--pib-acf-spacing-lg, 16px) 0;
  font-style: italic;
}

/**
 * ============================================
 * MODAL - Grille d'icônes
 * ============================================
 */

/**
 * Container de la grille d'icônes
 *
 * Dispose les icônes dans une grille responsive
 * avec défilement vertical pour les listes longues.
 */
.pib-project-icons-v2-modal-icons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--pib-acf-spacing-sm, 8px);
  max-height: 400px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--pib-acf-border, #ddd);
  border-radius: var(--pib-acf-radius-sm, 2px);
  padding: var(--pib-acf-spacing-lg, 16px);
  background: var(--pib-acf-bg-lighter, #f6f7f7);
  box-sizing: border-box;
}

/**
 * Bouton d'icône individuel dans la grille
 *
 * Chaque icône est un bouton cliquable affichant
 * le SVG et le slug de l'icône.
 */
.pib-project-icons-v2-modal-icon-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--pib-acf-spacing-md, 12px) var(--pib-acf-spacing-sm, 8px);
  min-height: 80px;
  max-width: 100%;
  font-size: 11px;
  text-align: center;
  border: 2px solid var(--pib-acf-border, #ddd);
  border-radius: var(--pib-acf-radius-sm, 2px);
  background: var(--pib-acf-bg-white, #fff);
  cursor: pointer;
  transition: var(--pib-acf-transition, all 0.15s ease-in-out);
  font-family: inherit;
  overflow: hidden;
  box-sizing: border-box;
}

.pib-project-icons-v2-modal-icon-button:hover {
  border-color: var(--pib-acf-primary, var(--wp-admin-theme-color, #3858e9));
  background-color: var(--pib-acf-bg-hover, #f8f9f9);
  transform: translateY(-1px);
  box-shadow: var(--pib-acf-shadow-md, 0 2px 4px rgba(0, 0, 0, 0.08));
}

.pib-project-icons-v2-modal-icon-button.selected {
  border-color: var(--pib-acf-primary, var(--wp-admin-theme-color, #3858e9));
  background-color: var(--pib-acf-primary-light, rgba(56, 88, 233, 0.04));
  box-shadow: var(--pib-acf-shadow-focus, 0 0 0 2px var(--wp-admin-theme-color, #3858e9));
}

.pib-project-icons-v2-modal-icon-button svg {
  margin-bottom: var(--pib-acf-spacing-xs, 4px);
  fill: currentColor;
}

.pib-project-icons-v2-modal-icon-button span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}

/**
 * Icône cachée par la recherche
 */
.pib-project-icons-v2-modal-icon-button.pib-hidden {
  display: none;
}

/**
 * ============================================
 * MESSAGES ET ÉTATS
 * ============================================
 */

/**
 * Message "Aucune icône disponible"
 */
.pib-project-icons-v2-empty {
  padding: var(--pib-acf-spacing-xl, 24px);
  text-align: center;
  color: var(--pib-acf-text-lighter, #949494);
  font-style: italic;
}

/**
 * Message d'erreur
 */
.pib-project-icons-v2-error {
  padding: var(--pib-acf-spacing-md, 12px);
  background: #fef7f7;
  border: 1px solid #f5c6cb;
  border-radius: var(--pib-acf-radius-sm, 2px);
  margin-bottom: var(--pib-acf-spacing-md, 12px);
}

.pib-project-icons-v2-error p {
  margin: 0;
  color: #d63638;
  font-style: italic;
}

/**
 * ============================================
 * RESPONSIVE DESIGN
 * ============================================
 */

/**
 * Adaptations pour tablettes
 */
@media (max-width: 768px) {
  .pib-project-icons-v2-modal-content {
    width: 95%;
    max-height: 90vh;
  }

  .pib-project-icons-v2-modal-icons-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: var(--pib-acf-spacing-xs, 4px);
    padding: var(--pib-acf-spacing-md, 12px);
  }

  .pib-project-icons-v2-modal-icon-button {
    min-height: 60px;
    padding: var(--pib-acf-spacing-sm, 8px) var(--pib-acf-spacing-xs, 4px);
    font-size: 10px;
  }

  .pib-project-icons-v2-preview .pib-project-icon-slug {
    font-size: 11px;
  }
}

/**
 * Adaptations pour mobiles
 */
@media (max-width: 480px) {
  .pib-project-icons-v2-interface {
    gap: var(--pib-acf-spacing-sm, 8px);
  }

  .pib-project-icons-v2-preview {
    padding: 6px 10px;
    gap: 6px;
  }

  .pib-project-icons-v2-preview svg {
    width: 20px;
    height: 20px;
  }

  .pib-project-icons-v2-preview .pib-project-icon-slug {
    font-size: 11px;
  }
}

/**
 * Scrollbar personnalisée pour la grille
 */
.pib-project-icons-v2-modal-icons-grid::-webkit-scrollbar {
  width: 8px;
}

.pib-project-icons-v2-modal-icons-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: var(--pib-acf-radius-sm, 2px);
}

.pib-project-icons-v2-modal-icons-grid::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: var(--pib-acf-radius-sm, 2px);
}

.pib-project-icons-v2-modal-icons-grid::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}