/* ============================================================================
   Form soggiorno (COMUNICAZIONI ▸ Form soggiorno, StayFormEditor)
   Stili della pagina che le utility Tailwind non coprono: il pannello non
   compila Tailwind sulle viste custom, quindi classi come pl-5 o
   bg-white/border-gray-200 non esistono nel CSS di Filament e la resa era
   casuale. Prefisso .jo-sfe-*. Registrato in JoornaTheme. Dark mode con
   override espliciti `.dark` (i token --jo-surface-* sono solo light), come
   in ai-proposals.css / template-picker.css.
   ========================================================================== */

.jo-sfe-group,
.jo-sfe-card,
.jo-sfe-help {
    --jo-sfe-bg: var(--jo-surface-0, #ffffff);
    --jo-sfe-line: var(--jo-surface-200, #e4e4e7);
    --jo-sfe-line-soft: var(--jo-surface-100, #f4f4f5);
    --jo-sfe-text: var(--jo-surface-900, #18181b);
    --jo-sfe-muted: var(--jo-surface-500, #71717a);
    --jo-sfe-faint: var(--jo-surface-400, #a1a1aa);
    --jo-sfe-handle: var(--jo-surface-300, #d4d4d8);
}
.dark .jo-sfe-group,
.dark .jo-sfe-card,
.dark .jo-sfe-help {
    --jo-sfe-bg: #18181b;
    --jo-sfe-line: #3f3f46;
    --jo-sfe-line-soft: #27272a;
    --jo-sfe-text: #f4f4f5;
    --jo-sfe-muted: #a1a1aa;
    --jo-sfe-faint: #71717a;
    --jo-sfe-handle: #52525b;
}

/* ---------- pannello "Come funziona" ---------- */
.jo-sfe-help {
    margin: 0;
    padding-left: 1.5rem;
    list-style: disc;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--jo-sfe-muted);
}
.jo-sfe-help li + li { margin-top: .375rem; }
.jo-sfe-help strong { color: var(--jo-sfe-text); }
/* icona inline nel testo (stessa heroicon dell'interruttore, colore "acceso") */
.jo-sfe-help-icon {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -.2em;
    color: var(--jo-primary-base, #7400ff);
}

/* ---------- gruppi: Preferenze / Regali e sorprese / Questionario ---------- */
.jo-sfe-group { display: flex; flex-direction: column; gap: 1rem; }
.jo-sfe-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.jo-sfe-group-title {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--jo-sfe-muted);
}

/* ---------- card sezione ---------- */
.jo-sfe-card {
    background: var(--jo-sfe-bg);
    border: 1px solid var(--jo-sfe-line);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
}
.jo-sfe-card--off { opacity: .6; }
.jo-sfe-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .625rem .75rem .625rem 1rem;
    border-bottom: 1px solid var(--jo-sfe-line-soft);
}
.jo-sfe-card-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}
.jo-sfe-card-name {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--jo-sfe-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* maniglia di trascinamento (sezioni e domande) */
.jo-sfe-handle {
    cursor: move;
    user-select: none;
    color: var(--jo-sfe-handle);
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
.jo-sfe-handle:hover { color: var(--jo-sfe-muted); }

/* gruppo azioni a destra: frecce + Action Filament + interruttore */
.jo-sfe-actions {
    display: flex;
    align-items: center;
    gap: .125rem;
    flex-shrink: 0;
}

/* ---------- righe domanda ---------- */
.jo-sfe-rows { list-style: none; margin: 0; padding: 0; }
.jo-sfe-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .625rem .75rem .625rem 1rem;
    border-top: 1px solid var(--jo-sfe-line-soft);
}
.jo-sfe-rows > li:first-child { border-top: 0; }
.jo-sfe-row--off { opacity: .5; }
.jo-sfe-row-main {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    min-width: 0;
}
.jo-sfe-row-main .jo-sfe-handle { margin-top: .2rem; }
.jo-sfe-row-body { min-width: 0; }
.jo-sfe-row-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.jo-sfe-row-name {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--jo-sfe-text);
}
.jo-sfe-row-options {
    margin: .125rem 0 0;
    font-size: .75rem;
    color: var(--jo-sfe-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* stati vuoti e riga "Aggiungi domanda" */
.jo-sfe-empty { padding: 1rem; font-size: .875rem; color: var(--jo-sfe-faint); }
.jo-sfe-add { padding: .5rem 1rem; border-top: 1px solid var(--jo-sfe-line-soft); }
.jo-sfe-empty-group {
    border: 1px dashed var(--jo-sfe-line);
    border-radius: .75rem;
    padding: 1.5rem;
    font-size: .875rem;
    color: var(--jo-sfe-faint);
}

/* feedback durante il trascinamento (classe messa dal JS della pagina) */
.jo-sfe-dragging { opacity: .4; }

/* su schermi stretti azioni sotto il titolo, non schiacciate accanto */
@media (max-width: 640px) {
    .jo-sfe-card-head,
    .jo-sfe-row { flex-wrap: wrap; }
    .jo-sfe-actions { width: 100%; justify-content: flex-end; }
}