// product.scss

// 1. On charge la boîte à outils (Variables, Mixins, Fonctions)
// Ça ne génère AUCUN code CSS inutile dans product.css !
@import "abstract/core";

// Variables (si vous ne les avez pas déjà dans votre thème)
$gray-200: #e9ecef;
$gray-400: #ced4da;

#dashboard-main-zone {

  .widget-item {
    // Applique le curseur uniquement sur le header
    .card-header {
      cursor: grab;
      transition: background-color 0.2s ease;

      // Effet visuel au survol pour montrer que c'est interactif
      &:hover {
        background-color: rgba(#000, 0.02) !important;
      }

      // Quand on clique/maintient
      &:active {
        cursor: grabbing;
      }
    }
  }

  // Le style de l'emplacement vide laissé pendant qu'on déplace la carte
  .sortable-ghost {
    opacity: 0.5;
    background-color: $gray-200 !important;
    border: 2px dashed $gray-400 !important;

    // Optionnel : on cache le contenu du fantôme pour ne laisser que le cadre
    > .card {
      visibility: hidden;
    }
  }

  // Le style de la carte qu'on est en train de déplacer (flottante)
  .sortable-drag {
    opacity: 1 !important;
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
    cursor: grabbing !important;
  }
}