/* Copié tel quel de Brand Studio (brand-studio-2026-10-20/assets/ui-common.css) pour MagicBanner 0.2.0. */
/* Règles communes à tous les ateliers Brand Studio (à charger en dernier) :
   - les couleurs se choisissent toujours dans de petites pastilles rondes ;
   - les réglages sont toujours à gauche de l'aperçu. */

input[type=color] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
}
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 2px solid #ffffffb3; border-radius: 50%; }
input[type=color]::-moz-color-swatch { border: 2px solid #ffffffb3; border-radius: 50%; }
input[type=color]:disabled { opacity: .35; }
/* Une étiquette qui ne contient qu'une couleur passe sur une ligne : texte à gauche, pastille à droite. */
label:has(> input[type=color]), .dark-field:has(> input[type=color]), .field:has(> input[type=color]) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
}

@media (min-width: 701px) {
  /* Atelier en 3 colonnes (réglages | aperçu | réglages) → 2 colonnes, tous les réglages à gauche. */
  .workspace {
    grid-template-columns: 290px minmax(0, 1fr) !important;
  }
  .workspace > aside, .workspace > .controls {
    grid-column: 1 !important;
    grid-row: auto !important;
    max-height: none !important;
  }
  .workspace > main, .workspace > .stage-area {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    position: sticky;
    top: 0;
    align-self: start;
  }
  /* Goods : imports, fond et réglages des éléments à gauche, aperçu à droite. */
  .container, body.vertical-editor .container {
    grid-template-columns: 290px minmax(0, 1fr) !important;
  }
  .goods-imports, .control-dock, .editor-layout.vertical .control-dock {
    grid-column: 1 !important;
    grid-row: auto !important;
    max-height: none !important;
  }
  .preview-card.show, .editor-layout.vertical .preview-card.show {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    position: sticky !important;
    top: 0;
    align-self: start;
  }
}

/* Éditeur intégré de la coquille : calques sous les réglages, à gauche. */
@media (min-width: 1181px) {
  .editor-body { grid-template-columns: 285px minmax(420px, 1fr) !important; }
  .editor-body > .control-panel { grid-column: 1; grid-row: 1; }
  .editor-body > .properties { grid-column: 1; grid-row: 2; border-left: 0; border-right: 1px solid rgba(255,255,255,.06); max-height: none; }
  .editor-body > .stage-area { grid-column: 2; grid-row: 1 / span 2; }
}
/* Dans le panneau de fond, la pastille précède son libellé. */
.background-studio label:has(> input[type=color]) { justify-content: flex-start !important; }

/* Poignées d'édition sur l'aperçu (assets/element-handles.js). --k compense la mise à l'échelle de l'aperçu. */
.eh-layer { position: absolute; inset: 0; z-index: 50; touch-action: none; --k: 1; }
.eh-frame { position: absolute; outline: calc(1.5px * var(--k)) dashed #fff; box-shadow: 0 0 0 calc(1px * var(--k)) #0008; cursor: move; touch-action: none; }
.eh-handle { position: absolute; width: calc(12px * var(--k)); height: calc(12px * var(--k)); translate: -50% -50%; background: #fff; border: calc(1.5px * var(--k)) solid #222; border-radius: 50%; box-sizing: border-box; touch-action: none; }
.eh-handle.nw { left: 0; top: 0; cursor: nwse-resize; } .eh-handle.ne { left: 100%; top: 0; cursor: nesw-resize; }
.eh-handle.sw { left: 0; top: 100%; cursor: nesw-resize; } .eh-handle.se { left: 100%; top: 100%; cursor: nwse-resize; }
.eh-rotate { position: absolute; left: 50%; top: calc(-30px * var(--k)); width: calc(18px * var(--k)); height: calc(18px * var(--k)); translate: -50% 0; border-radius: 50%; background: #fff; border: calc(1.5px * var(--k)) solid #222; box-sizing: border-box; cursor: grab; touch-action: none; }
.eh-rotate::after { content: ""; position: absolute; left: 50%; top: 100%; width: calc(1.5px * var(--k)); height: calc(12px * var(--k)); background: #fff; }
.eh-delete { position: absolute; left: 100%; top: 0; width: calc(22px * var(--k)); height: calc(22px * var(--k)); translate: 20% -120%; padding: 0; border-radius: 50%; border: 0; background: #e5383b; color: #fff; font: 700 calc(14px * var(--k)) / calc(22px * var(--k)) Arial, sans-serif; text-align: center; cursor: pointer; }
.eh-label { position: absolute; left: 0; bottom: 100%; margin-bottom: calc(4px * var(--k)); padding: calc(2px * var(--k)) calc(6px * var(--k)); border-radius: calc(4px * var(--k)); background: #000b; color: #fff; font: 600 calc(10px * var(--k)) / 1.4 Arial, sans-serif; white-space: nowrap; pointer-events: none; }