/* Gestionale, parte 03 di 10: Configurazione, impostazioni, utenti, registro, segmenti dei clienti, link e QR. Spostato da app.css nella versione X senza cambiare una regola; i file si caricano in ordine (vedi index.html), che è l'ordine di prima. */
/* ---------- Configurazione ---------- */
.day-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.day-tab[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: #fff; }
.shift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.shift-card {
  display: flex; flex-direction: column; gap: 14px; padding: 14px;
  border: 1px solid var(--rule); border-radius: var(--r-control);
}
.mode-group { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.mode-group legend { padding: 0; margin-bottom: 6px; font-size: 0.9rem; font-weight: 600; }
.mode-group .choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r-control); }
.mode-group .choice input { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.switch { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.switch input {
  appearance: none; -webkit-appearance: none; flex: none; position: relative;
  width: 46px; height: 26px; margin: 0; border-radius: 999px;
  background: #7d8a84; cursor: pointer; transition: background 0.15s;
}
.switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform 0.15s;
}
.switch input:checked { background: var(--green); }
.switch input:checked::after { transform: translateX(20px); }
.limits > .field { flex: 1 1 12rem; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 3px 3px 12px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font-weight: 600;
}
.chip-remove {
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent;
  color: var(--red-text); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.chip-remove:hover { background: var(--red-soft); }

.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); }
.plain-list li:first-child { border-top: 0; }
.form-inline { align-items: flex-end; }

/* ---------- Foglio di sala: sola lettura e contatti ---------- */
.toolbar-note { max-width: 32rem; }
.booking-contacts { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.booking-email { overflow-wrap: anywhere; }
.booking-whatsapp { font-weight: 600; }
.riconferma { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 0; padding: 4px 10px; border-left: 4px solid var(--amber); background: var(--amber-soft); color: var(--amber-ink); border-radius: 4px; font-size: 0.9rem; }
.riconferma-link { font-weight: 600; }
.booking-readonly { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.booking-sala-note { color: var(--muted); font-style: italic; }

/* ---------- Impostazioni, utenti, registro ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.settings-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-nav .btn[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: #fff; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 14px; }
.field-wide { grid-column: 1 / -1; }
.field .hint-warn { font-size: 0.85rem; color: var(--red-text); font-weight: 600; }
.color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.color-row input[type="color"] { width: 56px; min-height: 44px; padding: 2px; border: 1px solid var(--field-border); border-radius: var(--r-control); background: var(--surface); }
.logo-box { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.logo-preview { max-width: 200px; max-height: 80px; width: auto; height: auto; object-fit: contain; border: 1px dashed var(--rule); border-radius: var(--r-control); padding: 6px; background: #fff; }
.testata-preview { display: block; width: 100%; max-width: 360px; aspect-ratio: 3 / 1; object-fit: cover; border: 1px dashed var(--rule); border-radius: var(--r-control); background: var(--surface); }
.text-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.code-box { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--grey-soft); font: 0.85rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.qr-box { width: 180px; height: 180px; padding: 8px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-control); }
.preview-frame { width: 100%; height: 640px; border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--surface); }
.save-bar {
  position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-panel);
}
.log-detail { color: var(--muted); overflow-wrap: anywhere; }

/* ---------- Generale: link-pulsante, suggerimenti, caselle ---------- */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.hint { font-size: 0.85rem; color: var(--muted); }
.hint-warn { color: var(--red-text); font-weight: 600; }
.notice-wait { background: var(--amber-soft); color: var(--amber-ink); }
.check-line { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-line input { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.check-chip { align-items: center; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); }
.check-chip input { margin-top: 0; }
.chips .btn[aria-pressed="true"], .tag-quick .btn[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: #fff; }
dialog.dialog-wide { width: min(860px, calc(100vw - 24px)); }
.english-box { padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-control); }
.english-box summary { cursor: pointer; font-weight: 600; }
.english-box[open] summary { margin-bottom: 10px; }
.table-scroll { overflow-x: auto; }
.preview-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.preview-table th, .preview-table td { padding: 6px 10px; border: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.preview-table th { background: var(--grey-soft); color: var(--muted); }

/* ---------- Clienti: segmenti ---------- */
.segment-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.order-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; }
.order-bar .select { width: auto; min-width: 11rem; }
.segment-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.customer-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.stats-import { grid-template-columns: repeat(3, 1fr); }

/* ---------- Link e codici QR ---------- */
.qr-list { display: flex; flex-wrap: wrap; gap: 20px; }
.qr-item { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
.qr-item figcaption { font-weight: 600; }