/* dashboard/css/38-modals.css — estratto da app.css (2026-07, split senza build). */
/* ===== Modal / sheet ===== */
.modal-backdrop { position: absolute; inset: 0; background: rgba(15,20,25,0.5); display: none; align-items: flex-end; justify-content: center; z-index: 30; }
.modal-backdrop.open { display: flex; }
.sheet { background: var(--surface); border-radius: 24px 24px 0 0; width: 100%; max-height: 92%; min-height: min(60vh, 520px); overflow-y: auto; padding: 20px 18px 24px; animation: slideUp .25s ease; }

@media (min-width: 768px) {
  .modal-backdrop { align-items: center; padding: 24px; }
  .sheet { max-width: 560px; max-height: 90vh; min-height: 0; border-radius: 16px; animation: fadeIn .2s ease; }
}
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
@keyframes slideUp { from { transform: translateY(100%) } to { transform: translateY(0) } }
/* Trattino (drag handle) nascosto 2026-06-13: era decorativo, non trascinabile (nessun
   swipe-to-dismiss) -> affordance bugiarda. Chiusura via X (.sheet-close) + tap sul backdrop.
   Proprieta' conservate sotto display:none per ripristino se in futuro si implementa il drag. */
.sheet-handle { display: none; width: 44px; height: 4px; background: var(--line); border-radius: 2px; margin: -4px auto 14px; }
/* Close button (X) top-right del sheet modal · stesso look di .gm-close (riquadro grigio arrotondato) */
.sheet { position: relative; }
.sheet-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; background: var(--bg); border: 0; color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.sheet-close:hover { background: var(--line); }
.sheet-close:active { transform: scale(0.9); }
.sheet-close .i { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.sheet h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.sheet .sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; margin-bottom: 16px; }
.sheet .sheet-section { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin: 20px 0 12px; }  /* titolo di sezione 17px scuro: nettamente > etichette 11px (gerarchia) */
.sheet .sheet-section:first-of-type { margin-top: 6px; }

/* Ticket thread modal (dashboard): bubble cliente vs gestore, no accent verde */
.td-thread--modal { display: flex; flex-direction: column; gap: 8px; padding: 0; margin-bottom: 16px; }
.td-thread--modal .td-msg { padding: 10px 14px; border-radius: 14px; max-width: 90%; }
.td-thread--modal .td-msg-meta { font-size: 11px; color: var(--ink-3); margin-bottom: 4px; font-weight: 600; }
.td-thread--modal .td-msg-body { font-size: 13px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.td-thread--modal .td-msg--cliente { background: var(--bg); align-self: flex-start; border-bottom-left-radius: 4px; }
.td-thread--modal .td-msg--gestore { background: #F0FDF4; align-self: flex-end; border-bottom-right-radius: 4px; }

.modal-tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg); border-radius: 10px; margin-bottom: 16px; }
.modal-tabs button { flex: 1; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.modal-tabs button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.modal-pane { display: none; }
.modal-pane.active { display: block; }