/* app/css/46-forms.css — estratto da app.css (2026-07, split senza build). */
/* ========== FORM SCREENS (problema, miglioramento, dati, ecc.) ========== */
.form-screen { padding: 14px 18px 24px; }
.form-screen .intro { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-bottom: 18px; }
.form-screen .field { margin-bottom: 16px; }
.form-screen .field label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; padding: 0 4px; }
/* font-size 16px: sotto i 16px iOS Safari zooma sull'input al focus. min-width:0:
   in una riga grid (.field-row) gli <input> hanno una min-width intrinseca (~20
   char) che i track fr non comprimono → la riga deborda (Prov tagliata). */
.form-screen .field input, .form-screen .field textarea, .form-screen .field select { width: 100%; min-width: 0; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 16px; background: var(--surface); color: var(--ink); font-family: inherit; }
.form-screen .field textarea { min-height: 120px; resize: vertical; }
.form-screen .field input:focus, .form-screen .field textarea:focus, .form-screen .field select:focus { border-color: var(--brand); outline: none; }
.form-screen .field .help { font-size: 11px; color: var(--ink-3); margin-top: 4px; padding: 0 4px; }
.field.req label::after { content: ' *'; color: var(--danger); font-weight: 700; }
.field.is-err input, .field.is-err select { border-color: var(--danger); }
.field .field-err { color: var(--danger); font-size: 11px; margin-top: 4px; }
/* Righe form a piu colonne (app cliente) — evita il "monolite" di campi full-width:
   campi correlati appaiati a larghezze diverse, come fanno i form anagrafici ben fatti.
   Pattern allineato a .field-row della dashboard, qui assente. */
.form-screen .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.form-screen .field-row--phone-dob { grid-template-columns: 1fr 50%; }      /* Data nascita 50% (col mese corto "12 giu 1990" ci sta su phone >=360px); Telefono prende il resto */
.form-screen .field-row--loc { grid-template-columns: 3fr 5fr 2fr; }       /* CAP 30 · Città 50 · Prov 20 */
/* Provincia nascosta per-Paese (DE/AT/PT): la riga torna a CAP 30 · Città 70. */
.form-screen .field-row--loc:has([data-b2b-province][hidden]) { grid-template-columns: 3fr 7fr; }
.form-screen .field-row--loc label { white-space: nowrap; }                /* label "PROVINCIA" su una riga */
.form-screen .field-row > .field { min-width: 0; }                         /* i figli grid si comprimono: niente overflow orizzontale (Prov tagliata) */
/* Campi compatti: stesso formato degli altri, ma a larghezza ridotta. */
.form-screen .field--w-30 { width: 30%; min-width: 110px; }
.form-screen .field--w-40 { width: 40%; min-width: 140px; }
.form-screen .field--w-50 { width: 50%; min-width: 170px; }  /* su phone ≥390px è un vero 50% (177px); 170px = minimo che non taglia "Scegli il Paese" (testo 104px + overhead select) sugli schermi stretti */
.form-screen .field--w-60 { width: 60%; min-width: 170px; }
.form-screen .field--w-80 { width: 80%; min-width: 200px; }
/* Select: chevron custom con respiro dal bordo (il nativo Safari resta incollato). */
.form-screen .field select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23666D78'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}

/* Datepicker custom — JS condiviso in static/shared/datepicker.js (stesso della dashboard).
   Stile scopato sotto .form-screen per battere .field input/select.
   Desktop: calendario custom; touch (pointer:coarse): overlay nativo .dt-native. */
.form-screen .dt-field { position: relative; }
.form-screen .dt-trigger { display: flex; align-items: stretch; padding: 0; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; transition: border-color 120ms ease; }
.form-screen .dt-field.open .dt-trigger,
.form-screen .dt-trigger:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.form-screen .dt-trigger .dt-display { flex: 1; min-width: 0; padding: 14px 4px 14px 16px; border: none; outline: none; background: transparent; font-size: 16px; font-weight: 600; color: var(--ink); font-family: inherit; }
.form-screen .dt-trigger .dt-display::placeholder { font-weight: 500; }
.form-screen .dt-trigger .dt-icon-btn { width: 46px; padding: 0; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); border-left: 1px solid var(--line); transition: background 120ms ease; flex-shrink: 0; }
.form-screen .dt-trigger .dt-icon-btn:active { background: var(--brand-soft); }
.form-screen .dt-trigger svg.cal-ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-screen .dt-popover { position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 100; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(15,20,25,0.16); padding: 14px; min-width: 296px; display: none; }
.form-screen .dt-field.open .dt-popover { display: block; }
.form-screen .cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; }
.form-screen .cal-head button { width: 30px; height: 30px; border: none; background: var(--bg); border-radius: 8px; cursor: pointer; color: var(--ink); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.form-screen .cal-head button:active { transform: scale(0.9); }
.form-screen .cal-head .cal-month { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; gap: 6px; align-items: center; }
.form-screen .dt-popover .cal-month select { appearance: auto; -webkit-appearance: auto; background-image: none; width: auto; min-width: 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; font-weight: 700; background-color: var(--bg); color: var(--ink); font-family: inherit; }
.form-screen .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 4px 0 2px; }
.form-screen .cal-dow { font-size: 10px; color: var(--ink-3); text-align: center; font-weight: 700; text-transform: uppercase; padding: 4px 0 6px; }
.form-screen .cal-day { height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; border-radius: 8px; color: var(--ink); user-select: none; transition: background .12s, color .12s; font-weight: 500; }
.form-screen .cal-day:active { transform: scale(0.9); }
.form-screen .cal-day.other { color: var(--ink-3); opacity: 0.4; }
.form-screen .cal-day.today { font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--brand); }
.form-screen .cal-day.selected { background: var(--brand); color: #fff; font-weight: 700; }
/* Overlay nativo invisibile: su touch apre il picker OS, su desktop è inerte. */
.form-screen .dt-field .dt-native { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; opacity: 0.001; border: 0; padding: 0; margin: 0; font-size: 16px; background: transparent; color: transparent; pointer-events: none; z-index: 1; }
@media (pointer: coarse) {
  .form-screen .dt-trigger { pointer-events: none; }
  .form-screen .dt-popover { display: none !important; }
  .form-screen .dt-field .dt-native { pointer-events: auto; }
}
.form-screen .submit-btn { width: 100%; padding: 16px; background: var(--brand); color: #fff; border-radius: 12px; font-size: 15px; font-weight: 800; margin-top: 12px; }
.form-screen .submit-btn:active { background: var(--brand-hover); }
.form-screen .submit-btn:disabled { background: var(--line); color: var(--ink-3); }
.form-screen .photo-upload { display: flex; gap: 12px; padding: 14px; border: 2px dashed var(--line); border-radius: 12px; align-items: center; cursor: pointer; background: var(--bg); }
.form-screen .photo-upload .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--surface); color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.form-screen .photo-upload .body { flex: 1; }
.form-screen .photo-upload .ttl { font-size: 14px; font-weight: 700; color: var(--ink); }
.form-screen .photo-upload .sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
/* Nota a fondo pagina fuori da .form-screen (Task 8, Porta un amico): stesso
   registro di .form-screen .intro, riusabile su qualunque schermata app. */
.page-footnote { margin: 4px 18px 0; padding: 0 4px; font-size: 12px; color: var(--ink-3); line-height: 1.5; text-align: center; }
.form-screen .radio-group { display: flex; flex-direction: column; gap: 8px; }
.form-screen .radio-tile { padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); display: flex; align-items: center; gap: 12px; cursor: pointer; }
.form-screen .radio-tile.selected { border-color: var(--brand); background: var(--brand-soft); }
.form-screen .radio-tile .dot { width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 50%; flex-shrink: 0; position: relative; }
.form-screen .radio-tile.selected .dot { border-color: var(--brand); background: var(--brand); }
.form-screen .radio-tile.selected .dot::after { content: ""; position: absolute; inset: 4px; background: #fff; border-radius: 50%; }
.form-screen .radio-tile .body .ttl { font-size: 14px; font-weight: 700; }
.form-screen .radio-tile .body .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }