/* Dashboard personnalisable — grille + mode édition */

.dashboard-grid {
  position: relative;
}

.dash-tile {
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

/* Mode édition : halo au survol */
.dashboard-grid.is-editing .dash-tile:hover {
  box-shadow: 0 0 0 2px var(--sk-accent, #8b9a7e), 0 4px 14px rgba(0,0,0,.06);
  z-index: 2;
}

/* Carte en cours de déplacement */
.dash-tile.is-dragging {
  opacity: .4;
  outline: 2px dashed var(--sk-accent);
}

/* Survol d'une carte pendant un drag → déposer ici échange les deux positions. */
.dash-tile.drop-swap {
  box-shadow: 0 0 0 2px var(--sk-accent, #8b9a7e), 0 0 0 5px rgba(139,154,126,.25) !important;
  z-index: 3;
}

/* Petit ruban "Édition" en bandeau gauche */
.dashboard-grid.is-editing .dash-tile > div:first-child::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sk-accent), var(--sk-accent-dark, #728568));
}

/* Bouton agrandir/réduire bien visible au coin de la carte */
.dash-resize-btn:hover {
  background: var(--sk-accent, #8b9a7e) !important;
  border-color: var(--sk-accent, #8b9a7e) !important;
  color: #fff !important;
}

/* « Cases » vides prédéfinies : chaque emplacement (colonne × ligne) libre est
   une cible de dépôt. Repère visuel discret en hachuré ; surbrillance au survol
   d'un drag (vert = la carte tient ici, rouge = pas assez de place). */
.dash-empty-case {
  border: 1.5px dashed var(--sk-line);
  border-radius: var(--sk-r-md, 8px);
  min-height: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent, transparent 9px,
      rgba(139,154,126,.05) 9px, rgba(139,154,126,.05) 10px);
  transition: border-color .12s ease, background-color .12s ease;
}
.dash-empty-case.drag-over {
  border-color: var(--sk-accent, #8b9a7e);
  border-style: solid;
  background: rgba(139,154,126,.16);
}
.dash-empty-case.drag-block {
  border-color: var(--sk-danger, #b94a3d);
  border-style: solid;
  background: rgba(185,74,61,.12);
}

/* Aperçu de dépôt dimensionné : occupe exactement la taille de la carte glissée
   (1 colonne × sa hauteur) à l'emplacement visé. Vert = ça tient, rouge = non. */
.dash-drop-preview {
  pointer-events: none;
  border-radius: var(--sk-r-md, 8px);
  border: 2px solid var(--sk-accent, #8b9a7e);
  background: rgba(139,154,126,.22);
  z-index: 6;
}
.dash-drop-preview.blocked {
  border-color: var(--sk-danger, #b94a3d);
  background: rgba(185,74,61,.18);
}

/* ── Palette : cartes glissables avec aperçu de taille ──────────────────── */
.palette-item {
  background: var(--sk-bg, #fff);
  border: 1px solid var(--sk-line);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: grab;
  transition: background .12s, box-shadow .12s, border-color .12s;
}
.palette-item:hover {
  background: var(--sk-bg-soft, #f4f1ec);
  border-color: var(--sk-accent, #8b9a7e);
}
.palette-item:active { cursor: grabbing; }
.palette-item.is-dragging { opacity: .45; }

/* Aperçu proportionnel : court = Petit, haut = Grand. Sert aussi de poignée. */
.palette-preview {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border: 1.5px dashed var(--sk-accent, #8b9a7e);
  border-radius: 6px;
  background: rgba(139,154,126,.10);
  color: var(--sk-accent, #8b9a7e);
  font-size: 11px;
  font-weight: 600;
  transition: height .12s ease;
}
.palette-preview.is-small { height: 26px; }

.palette-size-toggle {
  display: inline-flex;
  gap: 4px;
}

/* En édition, le corps de la carte (2e enfant) n'est pas interactif : tout clic
   navigue sinon vers une autre vue et perd les modifs. On le neutralise → la
   zone entière devient draggable. Les boutons d'en-tête (1er enfant) restent
   cliquables. */
.dashboard-grid.is-editing .dash-tile > div:last-child {
  pointer-events: none;
}

/* ── Modale de configuration intégration ────────────────────────────── */
/* Quand une vue (nextmotion.js, google-ads.js, meta-ads.js) est rendue
   dans le body de la modale du catalogue, ses h1/page-sub sont redondants
   avec le header de la modale. On les compacte pour récupérer la place. */
.integration-config-body .page-title {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 6px;
  color: var(--sk-muted);
}
.integration-config-body .page-sub {
  font-size: 12.5px;
  margin-bottom: 14px;
}
.integration-config-body .card {
  margin-top: 14px !important;
}

/* Responsive : sur écran étroit, on aplatit la grille (1 colonne) */
@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .dashboard-grid > .dash-tile {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 200px;
  }
  /* Les cases vides n'ont pas de sens en pile mono-colonne */
  .dashboard-grid > .dash-empty-case {
    display: none !important;
  }
}