/**
 * Workflow Builder — Sticky Notes
 * ================================
 * Post-its libres posés sur le canvas (sticky-notes.js).
 *
 * Empilement : groupes (z-index 6) < notes (8) < nœuds (10). Une note ne doit
 * jamais masquer un nœud connectable, mais reste au-dessus des groupes.
 */

.sticky-note {
    position: absolute;
    z-index: 8;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    /* Bordure teintée plutôt que grise : l'aplat de couleur reste franc. */
    border: 1px solid rgba(15, 23, 42, .07);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}

.sticky-note:hover {
    box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
}

.sticky-note--dragging {
    /* Passe au-dessus de tout pendant le déplacement pour rester visible. */
    z-index: 30;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .28);
    transform: scale(1.01);
    transition: none;
}

/* ── En-tête : poignée de déplacement ─────────────────────────────────────── */

/* Au repos, l'en-tête est totalement transparent : la note s'affiche comme un
   aplat uni de sa couleur, sans liseré ni bandeau qui la couperait en deux.
   Le voile et la séparation n'apparaissent qu'au survol / pendant l'édition,
   quand les contrôles (palette, suppression) deviennent visibles. */
/* Au repos, l'en-tête se réduit à une fine bande de préhension : ses contrôles
   sont hors flux, donc seule cette hauteur subsiste et la note redevient un
   aplat de couleur presque intégral. Il reprend sa hauteur au survol et
   pendant l'édition, quand les contrôles réapparaissent. */
.sticky-note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 10px;
    padding: 0 8px;
    cursor: move;
    user-select: none;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: min-height .18s ease, padding .18s ease,
                background .18s ease, border-color .18s ease;
}

.sticky-note:hover .sticky-note-header,
.sticky-note:focus-within .sticky-note-header,
.sticky-note--editing .sticky-note-header {
    min-height: 26px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, .32);
    border-bottom-color: rgba(15, 23, 42, .1);
}

.sticky-note-grip {
    display: none;
    font-size: .7rem;
    flex-shrink: 0;
    color: rgba(15, 23, 42, .45);
}

.sticky-note:hover .sticky-note-grip,
.sticky-note:focus-within .sticky-note-grip,
.sticky-note--editing .sticky-note-grip {
    display: inline-block;
}

.sticky-note-header:hover .sticky-note-grip {
    color: rgba(15, 23, 42, .7);
}

/* ── Palette : masquée au repos, révélée à l'édition ──────────────────────── */

/* Au repos la palette est retirée du flux (display:none) et non simplement
   masquée : avec visibility:hidden elle continuait d'occuper sa largeur et
   sa hauteur, ce qui empêchait l'en-tête de se réduire après l'édition. */
.sticky-note-colors {
    display: none;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 2px;
}

/* La palette apparaît au survol de la note et pendant la saisie du texte. */
.sticky-note:hover .sticky-note-colors,
.sticky-note:focus-within .sticky-note-colors,
.sticky-note--editing .sticky-note-colors {
    display: flex;
}

.sticky-note-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(15, 23, 42, .22);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5);
    transition: transform .15s, box-shadow .15s;
}

.sticky-note-color-dot:hover {
    transform: scale(1.25);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
}

.sticky-note-color-dot.active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(37, 99, 235, .85);
}

.sticky-note-color-dot--yellow { background: #fde68a; }
.sticky-note-color-dot--orange { background: #fdba74; }
.sticky-note-color-dot--pink   { background: #f9a8d4; }
.sticky-note-color-dot--red    { background: #fca5a5; }
.sticky-note-color-dot--purple { background: #d8b4fe; }
.sticky-note-color-dot--blue   { background: #93c5fd; }
.sticky-note-color-dot--green  { background: #86efac; }
.sticky-note-color-dot--gray   { background: #d1d5db; }

/* ── Suppression ──────────────────────────────────────────────────────────── */

/* Retiré du flux au repos, comme la palette : sinon l'en-tête conserve la
   hauteur du bouton même quand il est invisible. */
.sticky-note-delete {
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    flex-shrink: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: rgba(15, 23, 42, .38);
    font-size: .7rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.sticky-note:hover .sticky-note-delete,
.sticky-note:focus-within .sticky-note-delete,
.sticky-note--editing .sticky-note-delete {
    display: inline-flex;
}

.sticky-note-delete:hover {
    background: rgba(220, 38, 38, .12);
    color: #dc2626;
}

/* ── Zone de texte ────────────────────────────────────────────────────────── */

/* Le texte est le seul élément qui doit ressortir au repos : contraste élevé
   et graisse légèrement soutenue pour rester net sur les aplats pastel.
   Le fond reste transparent pour laisser passer la couleur de la note —
   !important car Bootstrap impose un fond blanc aux contrôles de formulaire
   et sa feuille est chargée après celle-ci sur certaines pages. */
.sticky-note .sticky-note-text,
.sticky-note textarea.sticky-note-text {
    flex: 1;
    width: 100%;
    /* L'en-tête grandit de 16px au survol : le texte perd d'autant en padding
       haut pour ne pas sauter quand les contrôles apparaissent. */
    padding: 18px 12px 10px;
    margin: 0;
    transition: padding-top .18s ease;
    border: none !important;
    border-radius: 0 !important;
    outline: none;
    resize: none;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #111827;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.5;
}

/* Même spécificité que la règle de base (qui qualifie textarea) pour que ce
   padding réduit l'emporte bien à l'ouverture de l'en-tête. */
.sticky-note:hover textarea.sticky-note-text,
.sticky-note:focus-within textarea.sticky-note-text,
.sticky-note--editing textarea.sticky-note-text {
    padding-top: 6px;
}

/* Le focus ne doit pas réintroduire de cadre ni de fond blanc. */
.sticky-note .sticky-note-text:focus,
.sticky-note textarea.sticky-note-text:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
}

.sticky-note-text::placeholder {
    color: rgba(17, 24, 39, .42);
    font-weight: 400;
}

/* ── Poignée de redimensionnement ─────────────────────────────────────────── */

.sticky-note-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity .18s;
    background:
        linear-gradient(135deg, transparent 50%, rgba(15, 23, 42, .28) 50%, rgba(15, 23, 42, .28) 62%,
        transparent 62%, transparent 74%, rgba(15, 23, 42, .28) 74%, rgba(15, 23, 42, .28) 86%, transparent 86%);
}

.sticky-note:hover .sticky-note-resize-handle {
    opacity: 1;
}

/* ── Déclinaisons de couleur ──────────────────────────────────────────────── */

.sticky-note--yellow { background: #fef3c7; }
.sticky-note--orange { background: #ffedd5; }
.sticky-note--pink   { background: #fce7f3; }
.sticky-note--red    { background: #fee2e2; }
.sticky-note--purple { background: #f3e8ff; }
.sticky-note--blue   { background: #dbeafe; }
.sticky-note--green  { background: #dcfce7; }
.sticky-note--gray   { background: #f1f5f9; }