/* forms.css — Sottosistema MODULI (M3) di pdfeditabile.it.
 *
 * Stili di:
 *  1. il layer di compilazione sul documento (fields-render): controlli HTML
 *     posizionati sopra la pagina renderizzata;
 *  2. la modale "Proprietà campo" (field-props.js);
 *  3. il gruppo toolbar dei moduli e lo stato attivo del toggle di compilazione.
 *
 * Coerente col design system di app.css (--accent, --panel, --panel-2, --border,
 * --text, --text-dim) e con la dark mode ([data-theme="dark"]).
 */

/* =============================================================================
   1) LAYER DI COMPILAZIONE SUL DOCUMENTO (fields-render)
   ----------------------------------------------------------------------------
   Un layer per .page-wrap. z-index:3 → sopra .textLayer, SOTTO svg.annot-layer(4).
   ========================================================================== */
.fields-render-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 3;
}
/* Layer inerte quando la compilazione è OFF (setEnabled(false)). */
.fields-render-layer.is-disabled { pointer-events: none; }

/* Controllo compilabile posizionato sul rect del widget (px CSS).
   NB: i controlli stanno SOPRA la pagina PDF (canvas sempre bianco, a
   prescindere dal tema) → testo sempre scuro e leggibile. */
.fld-ctrl {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    padding: 1px 3px;
    font: inherit;
    font-size: 13px;
    line-height: 1.1;
    color: #14181d;
    background: rgba(43, 108, 255, .07);
    border: 1px solid var(--accent);
    border-radius: 2px;
    outline: none;
    /* I controlli ricevono il puntatore solo quando il layer è abilitato. */
    pointer-events: auto;
}
.fld-ctrl::placeholder { color: rgba(20, 24, 29, .45); }

.fld-ctrl:hover { background: rgba(43, 108, 255, .12); }
.fld-ctrl:focus {
    background: rgba(43, 108, 255, .16);
    border-color: var(--accent-hover);
    box-shadow: 0 0 0 2px rgba(43, 108, 255, .35);
}

/* textarea multiriga: niente resize, scroll interno. */
textarea.fld-ctrl { resize: none; overflow: auto; white-space: pre-wrap; }

/* select (dropdown/listbox). */
select.fld-ctrl { cursor: pointer; }
select.fld-ctrl[multiple] { padding: 0; }

/* checkbox / radio: riempiono il rect del widget, accento coerente. */
input.fld-ctrl[type="checkbox"],
input.fld-ctrl[type="radio"] {
    padding: 0;
    accent-color: var(--accent);
    cursor: pointer;
    background: rgba(43, 108, 255, .10);
}

/* Campo obbligatorio: bordo leggermente più marcato (solo estetico). */
.fld-ctrl[required] { border-width: 2px; }
/* Campo readonly/disabled: aspetto tenue. */
.fld-ctrl[readonly],
.fld-ctrl[disabled] { background: rgba(120, 120, 120, .12); border-style: dashed; cursor: default; }

/* =============================================================================
   2) MODALE PROPRIETÀ CAMPO (field-props.js)
   ========================================================================== */
.fld-props-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
/* L'attributo [hidden] deve vincere sul display:flex. */
.fld-props-modal[hidden] { display: none; }

.fld-props-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.fld-props-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.fld-props-head {
    flex: 0 0 auto;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.fld-props-title { margin: 0; font-size: 15px; font-weight: 700; }

.fld-props-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fld-props-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* Righe con checkbox: input e label sulla stessa linea. */
.fld-props-row--check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.fld-props-row--full { gap: 0; }

.fld-props-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
}
.fld-props-row--check .fld-props-label { color: var(--text); font-weight: 500; }

.fld-props-input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
}
.fld-props-textarea {
    height: auto;
    min-height: 96px;
    padding: 8px 10px;
    line-height: 1.4;
    resize: vertical;
    font-family: inherit;
}
.fld-props-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(43, 108, 255, .25);
}

.fld-props-row--check input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Separatore di sezione type-specific. */
.fld-props-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
}
.fld-props-sep {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 4px;
}

.fld-props-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--panel-2);
}

/* I .btn nella modale vivono su fondo chiaro (--panel): il tema scuro di app.css
   li rende su fondo trasparente/chiaro → qui li riadattiamo al pannello. */
.fld-props-actions .btn {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
}
.fld-props-actions .btn:hover { background: var(--panel-2); }
.fld-props-actions .btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.fld-props-actions .btn--primary:hover { background: var(--accent-hover); }

/* =============================================================================
   3) GRUPPO TOOLBAR MODULI + stato attivo del toggle "Compila sul documento"
   ========================================================================== */
/* Stato attivo del toggle di compilazione sul documento (#btn-fill-doc).
   B3: accent TENUE (non blu pieno) — chiaramente "on" ma senza competere col
   primario blu pieno (Salva). Coerente con .btn--lead.is-active (app.css). */
.toolbar .btn.is-active {
    background: var(--accent-weak);
    border-color: var(--accent);
    color: var(--accent-text);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.toolbar .btn.is-active:hover { background: var(--accent-weak); border-color: var(--accent); }

/* =============================================================================
   4) DARK MODE — rifiniture (le variabili sono già ridefinite in app.css).
   ========================================================================== */
:root[data-theme="dark"] .fld-props-input {
    background: var(--panel-2);
    color: var(--text);
}
:root[data-theme="dark"] .fld-props-actions .btn {
    background: var(--panel-2);
    color: var(--text);
}
:root[data-theme="dark"] .fld-props-actions .btn:hover { background: var(--panel); }
/* La modale ha fondo chiaro-tema; il backdrop resta scuro in entrambi i temi. */

/* =============================================================================
   5) MOBILE (<768px) — modale "Proprietà campo" a tutta larghezza + touch
   ----------------------------------------------------------------------------
   La shell/sidebar-drawer sono gestite in app.css (§4.2); qui solo i componenti
   di questo file. Target touch ≥44px e font 16px per evitare lo zoom iOS.
   ========================================================================== */
@media (max-width: 767px) {
    .fld-props-modal { padding: 0; align-items: flex-end; }
    /* Bottom-sheet: la box occupa tutta la larghezza e si aggancia in basso. */
    .fld-props-box {
        max-width: none;
        max-height: 88vh;
        border-radius: var(--radius) var(--radius) 0 0;
    }
    .fld-props-input { min-height: 44px; font-size: 16px; }
    .fld-props-textarea { min-height: 120px; }
    /* Azioni impilate a tutta larghezza, facili da toccare. */
    .fld-props-actions { flex-direction: column-reverse; }
    .fld-props-actions .btn { width: 100%; min-height: 44px; }
}

/* Pannello Campi: riga con label + input + pulsante Proprietà (M-Onda0). */
.fields-panel__row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fields-panel__label { flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-secondary, #616872); }
.fields-panel__input { flex: 1 1 auto; min-width: 0; }
.fields-panel__props {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border, #dcdfe4); border-radius: 8px;
    background: var(--control-bg, #f0f2f5); color: var(--text-secondary, #616872);
    cursor: pointer;
}
.fields-panel__props:hover { background: var(--control-bg-hover, #e6e9ee); color: var(--accent-text, #2563eb); border-color: var(--accent, #2563eb); }
.fields-panel__props svg { width: 15px; height: 15px; }