/* Wquote: colori, misure e componenti comuni a app, pagine di accesso, pagina del cliente e pagine d'errore.
   Va caricato prima del foglio della pagina. */
:root {
  --ink: #182422;
  --muted: #6a7b78;
  --soft-muted: #93a09d;
  --paper: #ffffff;
  --canvas: #f5f7f5;
  --canvas-deep: #eef2ef;
  --border: #e3e9e5;
  --border-strong: #d3ddd7;
  --teal: #0f766e;
  --teal-dark: #0a5d57;
  --teal-pale: #e4f5f1;
  --teal-wash: #f0faf7;
  --amber: #d88917;
  --amber-pale: #fff4df;
  --blue: #3977c9;
  --blue-pale: #eaf2fd;
  --purple: #8054c7;
  --purple-pale: #f1ebfb;
  --red: #bf4f52;
  --red-pale: #fff0f0;
  --shadow: 0 10px 30px rgba(28, 50, 43, 0.06);
  --shadow-lift: 0 15px 35px rgba(25, 65, 56, 0.12);
  --radius: 16px;
  --radius-sm: 11px;
  --sidebar-width: 270px;
  --accent: var(--teal);
  --primary: var(--teal);
  --danger: #b23b3b;
  --danger-border: #eec9c9;
  --radius-button: 10px;
  --field-h: 42px;
  --field-h-compact: 38px;
  --field-border: #d5e2dc;
  --field-radius: 10px;
  --field-bg: #fff;
  --focus-border: #64ad98;
  --focus-ring: 0 0 0 3px rgba(15, 118, 110, .11);
}

button, input, textarea, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(15, 118, 110, 0.22); outline-offset: 2px; }
svg.icon { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: -.15em; }

.brand-mark { position: relative; display: inline-flex; width: 31px; height: 31px; border-radius: 10px; align-items: center; justify-content: center; background: #e2f7ef; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.brand-mark::before, .brand-mark::after, .brand-mark span { position: absolute; display: block; content: ""; border-radius: 6px; background: var(--teal); transform: rotate(-45deg); }
.brand-mark::before { width: 7px; height: 15px; left: 9px; top: 11px; }
.brand-mark::after { width: 7px; height: 20px; left: 16px; top: 6px; background: #2fa68e; }
.brand-mark span { width: 6px; height: 10px; left: 11px; top: 7px; background: #75c9b8; }

/* Pulsanti: principale, secondario, discreto; distruttivo pieno (conferme) o a contorno (azioni nelle finestre) */
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; transform: none; opacity: .55; box-shadow: none; }
.button-primary { color: #fff; background: var(--teal); box-shadow: 0 5px 14px rgba(15,118,110,.17); }
.button-primary:hover { background: var(--teal-dark); box-shadow: 0 8px 18px rgba(15,118,110,.24); }
.button-secondary { color: var(--ink); border-color: var(--border-strong); background: var(--paper); }
.button-secondary:hover { border-color: #b8cac2; background: #fafdfb; }
.button-quiet { color: var(--muted); background: transparent; border-color: var(--border); }
.button-quiet:hover { color: var(--teal-dark); background: var(--paper); border-color: #cddcd5; }
.button-full { width: 100%; }
.button-danger-quiet { color: #b23b3b; background: #fff; border: 1px solid #eec9c9; }
.button-danger-quiet:hover { color: #9c2f2f; background: #fff3f3; border-color: #d89c9c; }
.button-danger { color: #fff; background: #c04848; border-color: #c04848; }
.button-danger:hover:not(:disabled) { color: #fff; background: #a93d3d; border-color: #a93d3d; }
.button .icon { width: 16px; height: 16px; }

/* Campi dei moduli */
button { cursor: pointer; }
.form-field { min-width: 0; display: grid; gap: 6px; }
.form-field > span { color: #536660; font-size: 12px; font-weight: 700; }
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-field select,
.form-field textarea { width: 100%; min-height: var(--field-h); padding: 9px 11px; color: var(--ink); border: 1px solid var(--field-border); border-radius: var(--field-radius); outline: 0; background-color: var(--field-bg); font-size: 13px; transition: border-color .15s ease, box-shadow .15s ease; }
.form-field textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
.form-field select { padding-right: 32px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #498b7c 50%), linear-gradient(135deg, #498b7c 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--focus-border); box-shadow: var(--focus-ring); }
.checkbox-field { display: inline-flex; align-items: center; gap: 8px; color: #52645e; font-size: 12px; font-weight: 600; }
.checkbox-field input { width: 16px; height: 16px; accent-color: var(--teal); }
.field-hint { color: #7a8d87; font-size: 11px; line-height: 1.4; }