/* Stili condivisi */
.fade-in { animation: fadeIn .25s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.input {
  width: 100%; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .55rem .75rem; font-size: .9rem; background: #fff;
}
.input:focus { outline: none; box-shadow: 0 0 0 2px #3b82f6; border-color: #3b82f6; }
.input[readonly] { background: #f8fafc; color: #64748b; }
.label { display: block; font-size: .75rem; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; }
.btn { display: inline-flex; align-items: center; gap: .4rem; border-radius: .5rem; padding: .5rem .9rem; font-weight: 600; font-size: .875rem; transition: all .15s; cursor: pointer; border: 1px solid transparent; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: #2563eb; color: #fff; } .btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.btn-secondary { background: #fff; color: #334155; border-color: #cbd5e1; } .btn-secondary:hover:not(:disabled) { background: #f1f5f9; }
.btn-danger { background: #fee2e2; color: #b91c1c; } .btn-danger:hover:not(:disabled) { background: #fecaca; }
.btn-success { background: #16a34a; color: #fff; } .btn-success:hover:not(:disabled) { background: #15803d; }
.btn-whatsapp { background: #25d366; color: #fff; } .btn-whatsapp:hover:not(:disabled) { background: #1ebe5d; }
.card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-confirmed { background: #dcfce7; color: #166534; }
.badge-refused { background: #fee2e2; color: #991b1b; }
.badge-cancelled { background: #e2e8f0; color: #475569; }
.dropzone { border: 2px dashed #cbd5e1; border-radius: 1rem; transition: all .15s; }
.dropzone.drag { border-color: #2563eb; background: #eff6ff; }
.otp-input { letter-spacing: .6em; font-size: 1.75rem; text-align: center; font-weight: 700; font-family: ui-monospace, monospace; }
.ai-field { position: relative; }
.ai-field::after { content: 'AI'; position: absolute; right: .5rem; top: .1rem; font-size: .6rem; font-weight: 800; color: #7c3aed; background: #ede9fe; padding: 0 .3rem; border-radius: .25rem; }
table.list td, table.list th { padding: .6rem .75rem; }
table.list { table-layout: auto; }
table.list td.max-w-\[14rem\] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.list tbody tr:hover { background: #f8fafc; cursor: pointer; }

/* ---------- Responsive / mobile ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
/* Evita lo zoom automatico di iOS sugli input (font >= 16px) */
@media (max-width: 767px) {
  .input, input, select, textarea { font-size: 16px !important; }
  .btn { min-height: 44px; }
  .otp-input { font-size: 1.6rem !important; letter-spacing: .45em; }
  .stat-card { padding: .75rem !important; }
  .stat-card .stat-num { font-size: 1.6rem !important; }
}
/* Tab scrollabili orizzontalmente */
.tabs-scroll { display: flex; gap: .25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll button { flex: 0 0 auto; }
/* Card-list su mobile al posto della tabella */
.delivery-card { display: block; padding: .85rem 1rem; border-top: 1px solid #e2e8f0; }
.delivery-card:active { background: #f1f5f9; }
/* Griglie dettaglio */

/* Fotocamera a tutto schermo su mobile */
@media (max-width: 767px) {
  .c-panel .relative { border-radius: .75rem; }
  .c-video { max-height: 60vh !important; }
}
/* Editor scanner: handle più grandi su touch */
@media (pointer: coarse) { .sc-h { width: 2.75rem !important; height: 2.75rem !important; margin-left: -1.375rem !important; margin-top: -1.375rem !important; } }
/* Tabella merce compatta */
#items-table input.input { padding: .35rem .5rem; }
@media (max-width: 640px) { #items-table th:nth-child(2), #items-table td:nth-child(2) { width: 4.5rem; } #items-table th:nth-child(3), #items-table td:nth-child(3) { width: 4rem; } }
/* Dettaglio: sotto 1024px i wrapper colonna spariscono e le card seguono l'ordine mobile */
@media (max-width: 1023px) {
  .detail-cols > .detail-main, .detail-cols > .detail-side { display: contents; }
}