/* Editor del sito personale (area riservata). Usa i token e i componenti di app.css. */

/* ------------------------------------------------------------------ barra: sezioni + pubblicazione */
.se-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: var(--header-h); z-index: 30; margin: -8px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter); background: color-mix(in oklab, var(--c-bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.se-tabs { max-width: 100%; }
.se-publish { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 14px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); }
.se-publish form { margin: 0; }
.se-publish .btn[disabled] { opacity: .45; pointer-events: none; }
.se-state { font-size: .8rem; font-weight: 600; color: var(--c-muted); display: inline-flex; align-items: center; gap: 6px; }
.se-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); }
.se-state.is-pending::before { background: var(--c-warn); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-warn) 20%, transparent); }

/* ------------------------------------------------------------------ layout con anteprima */
.se-editor .te-controls { gap: 14px; }
.se-preview .te-frame-wrap iframe { background: var(--c-surface); }
.se-preview .seg { display: inline-flex; padding: 2px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); }
.se-preview .seg .btn { min-height: 30px; padding: 0 10px; border-radius: 999px; }
.se-preview .seg .btn.is-active { background: var(--c-primary-soft); color: var(--c-primary); }
.sticky-actions { position: sticky; bottom: calc(var(--tabbar-h) + 8px); z-index: 20; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in oklab, var(--c-surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--c-border); box-shadow: var(--shadow-md); align-items: center; }
.sticky-actions [data-save-status] { margin-right: auto; }
@media (min-width: 1024px) { .sticky-actions { bottom: 12px; } }
@media (max-width: 1023px) { .se-preview .te-frame-wrap { height: 72vh; } }

/* ------------------------------------------------------------------ creazione */
.se-hero-card { display: flex; gap: 18px; align-items: center; background: linear-gradient(120deg, var(--c-primary-soft), var(--c-surface)); }
.se-hero-card h2 { margin-bottom: 4px; }
.se-hero-card p { margin: 0; }
.se-step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: var(--c-primary-ink); font: 700 .9rem/1 var(--font-body); }
.se-domain { display: flex; align-items: stretch; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); overflow: hidden; max-width: 640px; }
.se-domain:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-primary) 18%, transparent); }
.se-domain .input { border: 0; border-radius: 0; box-shadow: none !important; min-width: 0; font-weight: 600; }
.se-domain-prefix, .se-domain-suffix { display: flex; align-items: center; padding: 0 12px; background: var(--c-surface-2); color: var(--c-muted); font-size: .9rem; white-space: nowrap; }
.se-domain-prefix { padding-right: 8px; }
.help.is-ok { color: var(--c-success); font-weight: 600; }
.help.is-error { color: var(--c-error); font-weight: 600; }
.se-swatch-auto { display: grid !important; place-items: center; color: var(--c-primary); background: var(--c-primary-soft); }

/* Miniature dei temi */
.se-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 8px; }
.se-themes-sm { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.se-theme-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: var(--r-md); border: 2px solid var(--c-border); background: var(--c-surface); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.se-theme-card input { position: absolute; opacity: 0; }
.se-theme-card:has(input:checked) { border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-primary) 15%, transparent); }
.se-theme-card:has(input:focus-visible) { outline: 3px solid color-mix(in oklab, var(--c-primary) 45%, transparent); }
.se-thumb { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 10px 1fr 18px; gap: 6px; aspect-ratio: 4 / 3; padding: 8px; border-radius: 10px; background: var(--b); overflow: hidden; margin-bottom: 6px; }
.se-thumb-nav { grid-column: 1 / -1; display: flex; gap: 4px; align-items: center; }
.se-thumb-nav i { width: 10px; height: 10px; border-radius: 50%; background: var(--p); }
.se-thumb-nav b { width: 14px; height: 3px; border-radius: 2px; background: color-mix(in oklab, var(--t) 35%, transparent); }
.se-thumb-nav b:first-of-type { margin-left: auto; }
.se-thumb-hero { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.se-thumb-title { font-size: 1.15rem; line-height: 1; color: var(--t); font-weight: 600; }
.se-thumb-lines { display: flex; flex-direction: column; gap: 3px; }
.se-thumb-lines i { height: 3px; border-radius: 2px; background: color-mix(in oklab, var(--t) 25%, transparent); }
.se-thumb-lines i:last-child { width: 70%; }
.se-thumb-btn { width: 34px; height: 8px; border-radius: 999px; background: var(--p); }
.se-thumb-photo { border-radius: 8px; background: linear-gradient(150deg, color-mix(in oklab, var(--p) 45%, white), color-mix(in oklab, var(--a) 55%, white)); }
.se-thumb-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.se-thumb-cards i { border-radius: 4px; background: color-mix(in oklab, var(--t) 7%, white); border: 1px solid color-mix(in oklab, var(--t) 10%, transparent); }
.se-thumb-sereno .se-thumb-photo { border-radius: 50%; }
.se-thumb-sereno .se-thumb-btn, .se-thumb-caldo .se-thumb-btn { border-radius: 999px; }
.se-thumb-editoriale { border-radius: 2px; }
.se-thumb-editoriale .se-thumb-photo, .se-thumb-editoriale .se-thumb-cards i { border-radius: 0; }
.se-thumb-editoriale .se-thumb-cards i { background: none; border: 0; border-top: 1px solid var(--t); }
.se-thumb-editoriale .se-thumb-btn { border-radius: 0; background: var(--t); }
.se-thumb-essenziale .se-thumb-photo { background: color-mix(in oklab, var(--t) 10%, white); }
.se-thumb-essenziale .se-thumb-cards i { background: none; }
.se-thumb-caldo { background: linear-gradient(160deg, color-mix(in oklab, var(--a) 22%, var(--b)), var(--b)); }
.se-thumb-caldo .se-thumb-photo { border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%; background: linear-gradient(150deg, var(--a), var(--p)); }

/* Modelli di home */
.se-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.se-preset { position: relative; display: block; cursor: pointer; text-align: left; font: inherit; color: inherit; padding: 0; background: none; border: 0; }
.se-preset input { position: absolute; opacity: 0; }
.se-preset-body { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border-radius: var(--r-md); border: 2px solid var(--c-border); background: var(--c-surface); transition: border-color .2s, box-shadow .2s; }
.se-preset:has(input:checked) .se-preset-body, .se-preset-btn:hover .se-preset-body { border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-primary) 15%, transparent); }
.se-preset-blocks { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.se-preset-blocks i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--c-primary-soft); color: var(--c-primary); }
.se-preset-blocks .icon { width: 14px; height: 14px; }

/* ------------------------------------------------------------------ panoramica */
.se-dash { display: grid; gap: 16px; align-items: start; }
.se-dash-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.se-status { display: flex; flex-direction: column; gap: 12px; }
.se-status form { margin: 0; }
.se-status-head { display: flex; align-items: center; gap: 12px; }
.se-status-head > div { display: flex; flex-direction: column; }
.se-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c-warn); box-shadow: 0 0 0 5px color-mix(in oklab, var(--c-warn) 20%, transparent); flex: none; }
.se-status.is-online .se-dot { background: var(--c-success); box-shadow: 0 0 0 5px color-mix(in oklab, var(--c-success) 20%, transparent); animation: se-pulse 2.4s infinite; }
@keyframes se-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in oklab, var(--c-success) 8%, transparent); } }
.se-url { display: flex; gap: 8px; }
.se-url .input { flex: 1; min-width: 0; font-weight: 600; }
.se-tiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.se-locked { text-align: center; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.se-locked .banner { text-align: left; }
@media (min-width: 1200px) {
    .se-dash { grid-template-columns: minmax(420px, 1fr) minmax(480px, 1.15fr); }
    .se-dash .se-preview { position: sticky; top: calc(var(--header-h) + 64px); }
    .se-dash .te-frame-wrap { height: calc(100dvh - var(--header-h) - 140px); }
}

/* ------------------------------------------------------------------ pagine (moduli) */
.se-modules { display: flex; flex-direction: column; gap: 10px; }
.se-module { display: flex; gap: 12px; align-items: flex-start; padding: 14px; transition: opacity .2s; }
.se-module.is-off { opacity: .62; }
.se-module .stat-icon { margin: 0; }
.se-module-body { flex: 1; min-width: 0; }
.se-module-body p { margin: 2px 0 8px; }
.se-module-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.se-module-label { max-width: 280px; margin: 0; }
.se-module-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.se-module-actions .switch { margin: 0; }
.se-reset { margin-top: 4px; }
@media (max-width: 560px) {
    .se-module { flex-wrap: wrap; }
    .se-module-actions { flex-direction: row; width: 100%; justify-content: space-between; }
}

/* ------------------------------------------------------------------ elementi ripetibili e trascinamento */
.rep-handle { display: grid; place-items: center; width: 30px; height: 34px; border: 0; background: none; color: var(--c-muted); cursor: grab; border-radius: 8px; flex: none; }
.rep-handle:hover { background: var(--c-surface-2); color: var(--c-text); }
.rep-handle:active { cursor: grabbing; }
.repeater { display: flex; flex-direction: column; gap: 8px; }
.rep-rows { display: flex; flex-direction: column; gap: 8px; }
.rep-row { border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.rep-head { display: flex; align-items: center; gap: 2px; padding: 4px; }
.rep-head .btn-icon { width: 34px; height: 34px; }
.rep-title { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: none; font: 600 .92rem/1.3 var(--font-body); color: var(--c-text); text-align: left; padding: 8px; cursor: pointer; border-radius: 8px; }
.rep-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-title:hover { background: var(--c-surface-2); }
.rep-body { padding: 4px 14px 6px; border-top: 1px solid var(--c-border); }
.rep-body .field:first-child { margin-top: 10px; }
.sortable-ghost { opacity: .35; }
.sortable-chosen { box-shadow: var(--shadow-md); }
.icon.flip-y { transform: scaleY(-1); }
.field-repeater > .help { margin-bottom: 6px; }
.field-toggle { margin-bottom: 8px; }
.field-toggle .switch { margin: 0; }

/* ------------------------------------------------------------------ immagini */
.img-field { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.img-field-preview { display: grid; place-items: center; width: 112px; height: 84px; border-radius: var(--r-sm); border: 1px dashed var(--c-border); background: var(--c-surface-2); overflow: hidden; flex: none; }
.img-field-preview img { width: 100%; height: 100%; object-fit: cover; }
.img-field.has-image .img-field-preview { border-style: solid; }
.img-field.has-image .img-field-preview .muted { display: none; }
.img-field.is-loading .img-field-preview { animation: se-loading 1s infinite alternate; }
@keyframes se-loading { to { opacity: .45; } }
.img-field .btn-row { gap: 6px; }

/* ------------------------------------------------------------------ testo formattato */
.rte { border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); overflow: hidden; }
.rte:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-primary) 18%, transparent); }
.rte .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); font-family: var(--font-body); }
.rte .ql-container.ql-snow { border: 0; font: 400 1rem/1.6 var(--font-body); }
.rte .ql-editor { min-height: 140px; max-height: 60vh; overflow-y: auto; color: var(--c-text); }
.rte .ql-editor.ql-blank::before { color: var(--c-muted); font-style: normal; }
.rte .ql-editor h2 { font-size: 1.35rem; }
.rte .ql-editor h3 { font-size: 1.12rem; }
.rte .ql-editor img { max-width: 100%; border-radius: 8px; }
.rte .ql-snow .ql-stroke { stroke: var(--c-text); }
.rte .ql-snow .ql-fill { fill: var(--c-text); }
.rte .ql-snow .ql-picker { color: var(--c-text); }
.rte .ql-snow .ql-picker-options { background: var(--c-surface); }
.rte .ql-snow a { color: var(--c-primary); }
.rte:not([data-ready]) .rte-editor { padding: 12px 15px; min-height: 140px; }

/* ------------------------------------------------------------------ costruttore della home */
.se-blocks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.se-block { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); transition: box-shadow .2s, opacity .2s; }
.se-block.is-off { opacity: .6; }
.se-block:has(.se-block-body:not([hidden])) { box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--c-primary) 35%, var(--c-border)); }
.se-block-head { display: flex; align-items: center; gap: 6px; padding: 6px; flex-wrap: wrap; }
.se-block-head .stat-icon { margin: 0; width: 32px; height: 32px; }
.se-block-title { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; font: inherit; color: inherit; text-align: left; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.se-block-title:hover { background: var(--c-surface-2); }
.se-block-title strong { font-size: .95rem; }
.se-block-title .muted { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-variant { width: auto; max-width: 190px; }
.se-block-tools { display: flex; }
.se-block-tools .btn-icon { width: 34px; height: 34px; }
.se-block-body { padding: 8px 16px 6px; border-top: 1px solid var(--c-border); }
.se-block-body > .muted:first-child { margin: 6px 0 12px; }
.se-library > summary { list-style: none; }
.se-library > summary::-webkit-details-marker { display: none; }
.se-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 10px; }
.se-library-item { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px; border-radius: var(--r-sm); border: 1px solid var(--c-border); background: var(--c-surface); font: inherit; color: inherit; cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.se-library-item:hover { border-color: var(--c-primary); transform: translateY(-1px); }
.se-library-item > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.se-library-item .stat-icon { margin: 0; }
.se-library-item.is-off { opacity: .6; }
@media (max-width: 560px) {
    .se-variant { order: 5; flex: 1 1 100%; max-width: none; }
}

/* ------------------------------------------------------------------ articolo */
.se-post { display: grid; gap: 16px; align-items: start; }
.se-post-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.se-post-side { display: flex; flex-direction: column; gap: 14px; }
.se-post-title { width: 100%; border: 0; background: transparent; font: 600 clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem)/1.2 var(--font-heading); color: var(--c-text); padding: 6px 0; border-bottom: 2px solid var(--c-border); }
.se-post-title:focus { outline: none; border-bottom-color: var(--c-primary); }
.se-post .rte .ql-editor { min-height: 420px; font-size: 1.05rem; }
@media (min-width: 1024px) {
    .se-post { grid-template-columns: 1fr 340px; }
    .se-post-side { position: sticky; top: calc(var(--header-h) + 64px); }
}

/* ------------------------------------------------------------------ impostazioni */
.se-settings .form-section { max-width: 820px; }
.danger-zone { border-color: color-mix(in oklab, var(--c-error) 30%, var(--c-border)); max-width: 820px; }
.danger-zone .inline-form .input { width: 280px; max-width: 100%; }

/* ------------------------------------------------------------------ admin: siti personali */
.sites-admin .access-form { display: inline-flex; gap: 6px; align-items: center; }
.sites-admin .access-form select { width: auto; }