/* ============================================================
 * iReplace Cloud · app.css
 * Stili globali condivisi da TUTTE le pagine.
 * Caricato da inc/header.php prima del CSS specifico di pagina.
 *
 * Contiene:
 *   - Design tokens (palette ciano iReplace, ink/surface, ok/warn/bad/busy)
 *   - Reset minimal + font system
 *   - Body background di default (override possibile per Login)
 *   - Animazione page reveal (clip-path circle)
 *   - Topbar glass + brand (logo + nome)
 *   - Search globale + store pill + icon button + avatar
 *   - Squircle gradients (g-blue, g-green, ... 16 varianti)
 *   - State badges (b-wait, b-busy, b-ready, b-done, b-issue)
 * ============================================================ */

/* ------------- Design tokens ------------- */
:root {
  /* brand cyan scale (iReplace) */
  --c-50:  #F2FBFE;
  --c-100: #E1F5FD;
  --c-200: #BFEAFA;
  --c-300: #8FDAF6;
  --c-400: #4ECEF7;
  --c-500: #00B0EF;   /* logo, accent primario */
  --c-600: #0091C7;
  --c-700: #00729B;
  --c-800: #005474;
  --c-900: #053A52;

  --bg-1:       #F2FBFE;
  --bg-2:       #E5F4FC;
  --surface:    #FFFFFF;
  --surface-2:  #F8FCFE;
  --surface-3:  #EFF8FD;
  --line:       #D8ECF6;
  --line-2:     #E6F2F8;
  --ink:        #0A1F2E;
  --ink-2:      #2F4658;
  --ink-3:      #5B7184;
  --ink-4:      #8AA0B2;
  --accent:     var(--c-500);
  --brand:      var(--c-500);
  --ok:         #34C759;
  --warn:       #FFB100;
  --bad:        #FF453A;
  --busy:       #007AFF;
  --done:       #8E8E93;
  --radius:     22px;
  --radius-sm:  14px;
  --shadow:     0 1px 2px rgba(2,40,60,.04), 0 12px 36px rgba(2,40,60,.08);
  --ease:       cubic-bezier(.22,.61,.36,1);
  --hdr-tint:   rgba(0,176,239,.06);
}

/* ------------- Reset + font ------------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
a       { color: var(--accent); text-decoration: none; }
button  { font: inherit; color: inherit; }

/* ------------- Global form inputs (regola progetto) -------------
   Tutti i campi di input testuali devono avere ALMENO 5px di padding orizzontale
   per non incollare il testo al bordo (regola estetica del progetto).
   Usiamo :where() per specificita' zero: ogni regola locale (es. .pf-search
   con padding: 9px 14px) la sovrascrive senza fatica.
   Esclusi: checkbox, radio, range, file (hanno UI nativa); button-like
   (color, image, reset, submit, button). */
:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]):not([type="reset"]):not([type="submit"]):not([type="button"]),
    textarea
) {
    padding-left:  5px;
    padding-right: 5px;
}

/* ------------- Default body background (Dashboard/SuperAdmin) ------------- */
body {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(0,176,239,.18), transparent 60%),
    radial-gradient(900px 600px at 95% 110%, rgba(0,176,239,.10), transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
}

/* ------------- Page reveal animation (fade) -------------
   STORICO: prima usava clip-path: circle(X% at 50% 50%). Il centro del cerchio
   era ancorato al 50% dell'ALTEZZA di <main>; su pagine lunghe (es. /profilo in
   Marche/Modelli, main ~2000px) il centro finiva a ~1000px dal top del documento:
   scrollando in basso quel punto usciva dal viewport e il clip-path tagliava
   TUTTO il contenuto visibile per ~0.65s ad ogni navigazione (sembrava un blink /
   pagina vuota). Inoltre, con fill-mode:both il clip-path restava applicato a fine
   animazione creando uno stacking context su <main> che interferiva con la sidebar
   `position: sticky`. Sostituito con un semplice fade: nessun clip-path, nessun
   transform residuo (il 100% non setta transform -> torna a none), niente
   stacking context. */
@keyframes pageRevealIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; }
}
main { animation: pageRevealIn .45s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) { main { animation: none; } }

@keyframes pageRevealOut {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translateY(8px); }
}
body.leaving main { animation: pageRevealOut .35s cubic-bezier(.45,.04,.58,.95) both; }

/* NB: il page loader (spinner globale) e' definito INLINE in inc/head.php,
   prima del link a questo CSS, per essere visibile dal primo paint senza
   flash bianco durante il TTFB della pagina. Non duplicare qui. */

/* ------------- Local loader (spinner + logo su un elemento) -------------
   Usato da window.appShowLoader('#selector') quando una sezione (es. tabella
   assistenze) viene aggiornata via AJAX. REGOLE.md sez. 24: pagine con filtri
   ricaricano i dati via AJAX e mostrano questo loader locale, mai un reload
   completo. */
.app-local-loader {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
}
/* Wrapper fisso: contiene il logo (fermo) e lo spinner rotante come ::before.
   Il logo NON deve ruotare insieme allo spinner, quindi va su un elemento
   separato dall'anello che ha l'animation. */
.app-local-loader-spinner {
    position: relative;
    width: 72px; height: 72px;
    background: url('/img/ireplace-logo.png') center center no-repeat;
    background-size: 40px 40px;
}
.app-local-loader-spinner::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(0, 113, 227, 0.18);
    border-top-color: #0071E3;
    animation: __pl_spin .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .app-local-loader-spinner::before { animation-duration: 2.5s; }
}

/* ------------- Banner Impersonate (super-admin) ------------- */
.impersonate-banner {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(135deg, #FF9F0A, #FF6A2C);
  color: #fff;
  padding: 10px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  font-size: 13.5px;
}
.impersonate-banner__inner {
  max-width: 1480px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.impersonate-banner svg { flex: 0 0 18px; }
.impersonate-banner__sep { opacity: .65; margin: 0 6px; }
.impersonate-banner__form { margin-left: auto; }
.impersonate-banner__btn {
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.impersonate-banner__btn:hover  { background: rgba(255,255,255,.32); transform: translateY(-1px); }
.impersonate-banner__btn:active { transform: translateY(0); }

/* ------------- Topbar (glass) ------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 14px 28px;
  background: color-mix(in oklab, var(--bg-1) 55%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--line);
}
.brand        { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; }
.brand-mark   {
  width: 32px; height: 32px; border-radius: 30%;
  background: linear-gradient(160deg, #EAF6FF, #C9E9FF);
  display: grid; place-items: center; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -6px 12px rgba(0,113,227,.08),
    0 2px 6px rgba(0,113,227,.18);
}
.brand-mark img { width: 22px; height: 22px; object-fit: contain; }
.brand-name      { display: flex; align-items: baseline; gap: 6px; }
.brand-name b    { font-weight: 600; }
.brand-name span { color: var(--ink-4); font-size: 13px; font-weight: 500; }

/* ------------- Search globale (⌘K) ------------- */
.search {
  flex: 1; max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 12px;
  color: var(--ink-3);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
}
.search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.search kbd   { font-family: inherit; font-size: 11px; color: var(--ink-4); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; background: var(--surface-2); }

/* ------------- Tools (store pill / icon button / avatar) ------------- */
.tools      { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.store-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.store-pill .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 25%, transparent);
}
.store-pill .dot.dot--gray {
  background: var(--ink-4);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink-4) 25%, transparent);
}
.store-pill.store-pill--empty {
  cursor: default; color: var(--ink-4);
}

/* Combo selettore PDV (header) — dropdown CUSTOM stilizzato come Select2.
   Il <select> nativo resta in DOM nascosto (form submit + AJAX hook), sopra
   c'e' la UI custom: trigger button + pannello assoluto con item lista. */
.store-pill-form {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px;
  background: var(--surface-2, #F8FCFE);
  border: 1px solid var(--line, #C9E5EF);
  border-radius: 10px;
  font-size: 13.5px; color: var(--ink, #142A33);
  cursor: pointer;
  position: relative;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.store-pill-form:hover { border-color: var(--c-500, #00B0EF); background: #fff; }
.store-pill-form.store-dd--open {
  border-color: var(--c-500, #00B0EF);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0,176,239,.18);
}
.store-pill-form .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 25%, transparent);
  flex: 0 0 8px;
}

/* Native select: nascosto visivamente ma navigabile da tastiera/screen reader */
.store-pill-select {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Trigger del dropdown custom */
.store-dd__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; outline: 0;
  padding: 2px 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  min-width: 140px; text-align: left;
}
.store-dd__label { display: inline-flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.store-dd__name  { font-size: 13.5px; font-weight: 600; color: var(--ink, #142A33); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.store-dd__loc   { font-size: 11px; font-weight: 500; color: var(--ink-3, #5B7184); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; margin-top: 1px; }
.store-dd__loc[hidden] { display: none; }
.store-dd__chev  {
  color: var(--c-700, #00729B);
  margin-left: auto;
  transition: transform .2s var(--ease);
  flex: 0 0 14px;
}
.store-pill-form.store-dd--open .store-dd__chev { transform: rotate(180deg); }

/* Pannello dropdown */
.store-dd__panel {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 260px; max-width: 360px;
  background: #fff;
  border: 1px solid var(--line, #C9E5EF);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(2,40,60,.04), 0 14px 36px rgba(2,40,60,.18);
  list-style: none; padding: 6px; margin: 0;
  max-height: 320px; overflow-y: auto;
  z-index: 1500;
  animation: store-dd__pop .18s cubic-bezier(.34,1.56,.64,1);
}
.store-dd__panel[hidden] { display: none; }
@keyframes store-dd__pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.store-dd__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink, #142A33);
  transition: background .15s var(--ease), color .15s var(--ease);
  user-select: none;
}
/* Separatore grigio chiaro tra item (non sotto l'ultimo) */
.store-dd__item + .store-dd__item { border-top: 1px solid var(--line-2, #EEF4F8); }
.store-dd__item:hover,
.store-dd__item:focus { background: var(--surface-2, #F2FBFE); outline: 0; }
.store-dd__item.is-active {
  background: linear-gradient(135deg, #5AC8FA, #0091C7);
  color: #fff;
}
.store-dd__item.is-active .store-dd__item-loc { color: rgba(255,255,255,.85); }
.store-dd__item.is-active .store-dd__item-check { opacity: 1; }
.store-dd__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.store-dd__item-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-dd__item-loc  { font-size: 11.5px; font-weight: 500; color: var(--ink-3, #5B7184); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.store-dd__item-check {
  flex: 0 0 14px;
  opacity: 0;
  color: #fff;
  transition: opacity .2s var(--ease);
}
.topbar-back {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 12px 7px 10px;
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.topbar-back:hover { background: var(--surface-2); transform: translateX(-2px); }
.topbar-back svg { color: var(--ink-3); }

/* Breadcrumb (page title) dopo il brand */
.topbar .crumb { color: var(--ink-4); font-size: 13px; margin: 0 8px; }
.topbar .page-title { font-size: 14px; font-weight: 600; color: var(--c-900); letter-spacing: -0.01em; }

.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer; color: var(--ink-2); position: relative;
}
.icon-btn .badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--bad); color: white; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--bg-1);
}
/* Pulsanti social ufficiali nella topbar (TK #82): stessa forma di .icon-btn,
   ma icona sempre nel colore del marchio. Sono <a> target="_blank". */
.icon-btn.soc-btn {
  text-decoration: none;
  border-color: color-mix(in oklab, currentColor 35%, var(--line));
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.icon-btn.soc-btn:hover {
  background: color-mix(in oklab, currentColor 12%, var(--surface));
  border-color: currentColor;
  transform: translateY(-1px);
}
.icon-btn.soc-btn--ig { color: #E1306C; }   /* Instagram */
.icon-btn.soc-btn--fb { color: #1877F2; }   /* Facebook  */

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #FF9F0A, #FF375F);
  color: white; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; cursor: pointer; border: 0;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.avatar:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(255,55,95,.35); }
.avatar img.topbar-av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar:has(img.topbar-av-img) { background: transparent; padding: 0; }

/* ------------- User menu dropdown ------------- */
.user-menu { position: relative; }
.user-menu-pop {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 240px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(2,40,60,.10), 0 30px 70px -10px rgba(2,40,60,.18);
  padding: 8px;
  opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.98);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  z-index: 60;
}
.user-menu.open .user-menu-pop { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.user-menu-pop::before {
  content: ""; position: absolute; top: -6px; right: 14px;
  width: 12px; height: 12px; background: var(--surface);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.user-menu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 12px; border-bottom: 1px solid var(--line-2, #E6F2F8);
  margin-bottom: 6px;
}
.user-menu-av {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
  background: linear-gradient(135deg, #FF9F0A, #FF375F);
  color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.10), 0 4px 10px rgba(255,55,95,.25);
}
.user-menu-id { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.user-menu-id b { font-size: 13.5px; color: var(--ink); font-weight: 600; line-height: 1.25; }
.user-menu-id span { font-size: 12px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.user-role-chip { display: inline-block; align-self: flex-start; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em; line-height: 1.6; }
.user-role-chip--agent { background: rgba(0,176,239,.14); color: var(--c-700); }
.user-role-chip--super { background: rgba(0,113,155,.12); color: var(--c-800); }
.user-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; box-sizing: border-box;
  padding: 9px 10px; border-radius: 10px;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
/* Reset per le voci-menu rese come <button> (es. Novità) */
button.user-menu-item {
  border: 0; background: none; cursor: pointer;
  font-family: inherit; text-align: left;
}
button.user-menu-item:focus { outline: none; }
button.user-menu-item:focus-visible { background: var(--surface-2, #F8FCFE); }
.user-menu-item:hover { background: var(--surface-2, #F8FCFE); color: var(--c-900, #053A52); }
.user-menu-item svg { color: var(--ink-3, #5B7184); }
.user-menu-item:hover svg { color: var(--c-700, #00729B); }
.user-menu-item--danger { color: var(--bad, #FF453A); }
.user-menu-item--danger svg { color: var(--bad, #FF453A); }
.user-menu-item--danger:hover { background: rgba(255,69,58,.08); color: var(--bad, #FF453A); }
.user-menu-sep { height: 1px; background: var(--line-2, #E6F2F8); margin: 6px 4px; }

/* ------------- Layout container (post-login pages) ------------- */
.wrap { max-width: 1480px; margin: 0 auto; padding: 28px 28px 60px; }

/* ------------- Squircle gradients (icon backgrounds) ------------- */
.g-blue   { background: linear-gradient(160deg, #5AC8FA, #0A84FF); }
.g-green  { background: linear-gradient(160deg, #5BE49B, #1FA055); }
.g-orange { background: linear-gradient(160deg, #FFD66B, #FF9500); }
.g-purple { background: linear-gradient(160deg, #BF96FF, #7A3DF2); }
.g-pink   { background: linear-gradient(160deg, #FF8AB4, #E5377A); }
.g-teal   { background: linear-gradient(160deg, #7BE5E0, #2BB5B0); }
.g-red    { background: linear-gradient(160deg, #FF8A80, #E33E2B); }
.g-indigo { background: linear-gradient(160deg, #8AA9FF, #3E58D6); }
.g-yellow { background: linear-gradient(160deg, #FFE082, #FFB100); }
.g-gray   { background: linear-gradient(160deg, #C7C7CC, #6E6E73); }
.g-mint   { background: linear-gradient(160deg, #9EE6CC, #2FB37C); }
.g-amber  { background: linear-gradient(160deg, #FFCC80, #E07A00); }
.g-cyan   { background: linear-gradient(160deg, #7CE2F5, #00B0EF); }
.g-slate  { background: linear-gradient(160deg, #9BB0C7, #3E5B7F); }
.g-lime   { background: linear-gradient(160deg, #D4F87C, #7CB342); }
.g-rose   { background: linear-gradient(160deg, #FFB3C1, #D81B60); }

/* ------------- State badges ------------- */
.badge {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-wait  { background: color-mix(in oklab, var(--warn) 16%, transparent); color: #A86A00; }
.b-busy  { background: color-mix(in oklab, var(--busy) 14%, transparent); color: #0058B0; }
.b-ready { background: color-mix(in oklab, var(--ok)   14%, transparent); color: #0A7A2C; }
.b-done  { background: color-mix(in oklab, var(--done) 18%, transparent); color: #5A5A60; }
.b-issue { background: color-mix(in oklab, var(--bad)  14%, transparent); color: #B71D14; }

/* ------------- Bottoni standard iReplace ------------- */
/* .btn / .btn-ghost / .btn-primary erano in profilo.css ma vengono usati in
   tutte le modali del progetto (helpdesk, assistenze, profilo, note). Qui in
   app.css per renderli globali e coerenti ovunque. */
.btn {
    padding: 10px 18px; border: 0; border-radius: 10px; cursor: pointer;
    font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
    font-family: inherit;
}
.btn-ghost {
    background: #fff;
    color: var(--ink-2, #2F4658);
    border: 1px solid var(--line, #D8ECF6);
}
.btn-ghost:hover { background: var(--surface-2, #F8FCFE); }
.btn-primary {
    background: linear-gradient(135deg, var(--c-500, #00B0EF), var(--c-700, #00729B));
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,113,155,.30), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,113,155,.40); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }

/* ============================================================================
   PAGE FOOTER (renderizzato da inc/footer.php su tutte le pagine post-login)
   Stile clonato dal footer originale della dashboard (.foot) e reso globale.
   Pagine /cassa, /login e public (track/privacy/...) sono escluse.
   ========================================================================== */
.page-foot {
    text-align: center;
    color: var(--ink-4, #8AA0B2);
    font-size: 12px;
    padding: 28px 24px 36px;
    margin-top: auto;
}

/* ============================================================================
   SWEETALERT2 stile "Message Box" iReplace
   ----------------------------------------------------------------------------
   Replica il design del template doc/design/project/versione-a/MessageBox.html:
   - banda di colore in cima al popup (variabile in base all'icon)
   - hero icon circolare 88x88 con gradient + ring pulsante
   - radius 24px, ombra profonda, scale-in elastico
   - bottoni full-width "split" colorati in gradient
   - backdrop scuro con blur saturate
   ========================================================================== */

/* z-index: Swal default 1060 e' sotto le modali custom (.hd-modale = 2000+).
   Forziamo INT_MAX sul container custom (belt-and-suspenders) e un valore alto
   sul default per i Swal non passati da appAlert/appConfirm. */
.swal2-container { z-index: 100000 !important; }
.swal2-shown.swal2-backdrop-show { z-index: 100000 !important; }
.swal2-backdrop-show { z-index: 99999 !important; }
.irc-swal-container-top,
.swal2-container.irc-swal-container-top { z-index: 2147483000 !important; }

/* Backdrop scuro + blur (come .mb-bg del template) */
.swal2-container.swal2-backdrop-show,
.irc-swal-container-top.swal2-backdrop-show {
  background: rgba(5, 40, 55, .35) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
}

/* Popup: card bianca, radius 24px, banda colore in cima via ::before */
.irc-swal-popup {
  position: relative !important;
  border-radius: 24px !important;
  padding: 28px 0 0 !important;
  width: 100% !important;
  max-width: 460px !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif !important;
  background: #FFFFFF !important;
  box-shadow: 0 30px 80px -10px rgba(0,82,115,.55), 0 1px 2px rgba(2,40,60,.10) !important;
  border: 0 !important;
  overflow: hidden !important;
}
/* Animazione scale-in elastica (cubic-bezier "bouncy") */
.irc-swal-popup.swal2-show {
  animation: irc-swal-in .45s cubic-bezier(.34,1.56,.64,1) !important;
}
.irc-swal-popup.swal2-hide {
  animation: irc-swal-out .25s cubic-bezier(.22,.61,.36,1) !important;
}
@keyframes irc-swal-in {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes irc-swal-out {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(.92); opacity: 0; }
}

/* Banda colore in cima (6px) — colore default ciano brand */
.irc-swal-popup::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--c-500), var(--c-700));
  z-index: 1;
}
.irc-swal-popup.swal2-icon-success::before { background: linear-gradient(90deg, #34D87A, #1FA055); }
.irc-swal-popup.swal2-icon-error::before   { background: linear-gradient(90deg, #FF8A80, #E33E2B); }
.irc-swal-popup.swal2-icon-warning::before { background: linear-gradient(90deg, #FFD66B, #FF9500); }
.irc-swal-popup.swal2-icon-info::before    { background: linear-gradient(90deg, #5AC8FA, #0A84FF); }
.irc-swal-popup.swal2-icon-question::before{ background: linear-gradient(90deg, #BF96FF, #7A3DF2); }

/* Hero icon: cerchio 88x88 con gradient + ring pulsante */
.irc-swal-popup .swal2-icon {
  width: 88px !important; height: 88px !important;
  border: 0 !important;
  border-radius: 50% !important;
  margin: 14px auto 14px !important;
  position: relative !important;
  display: grid !important; place-items: center !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -10px 18px rgba(0,0,0,.08),
    0 14px 30px rgba(0,113,155,.30) !important;
  overflow: visible !important;
}
/* Ring pulsante intorno all'icona (animazione "ring" del template) */
.irc-swal-popup .swal2-icon::after {
  content: ""; position: absolute; inset: -12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: .28;
  animation: irc-swal-ring 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes irc-swal-ring {
  0%   { transform: scale(.85); opacity: .4; }
  100% { transform: scale(1.20); opacity: 0;  }
}

/* Backgrounds & glow per ogni tipo (gradient interno + ombra colorata) */
.irc-swal-popup .swal2-icon.swal2-success {
  background: linear-gradient(160deg, #5BE49B, #1FA055) !important;
  color: #1FA055 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.08), 0 14px 30px rgba(31,160,85,.35) !important;
}
.irc-swal-popup .swal2-icon.swal2-error {
  background: linear-gradient(160deg, #FF8A80, #E33E2B) !important;
  color: #E33E2B !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.08), 0 14px 30px rgba(227,62,43,.35) !important;
}
.irc-swal-popup .swal2-icon.swal2-warning {
  background: linear-gradient(160deg, #FFD66B, #FF9500) !important;
  color: #FF9500 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.08), 0 14px 30px rgba(255,149,0,.40) !important;
}
.irc-swal-popup .swal2-icon.swal2-info {
  background: linear-gradient(160deg, #5AC8FA, #0A84FF) !important;
  color: #0A84FF !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.08), 0 14px 30px rgba(10,132,255,.35) !important;
}
.irc-swal-popup .swal2-icon.swal2-question {
  background: linear-gradient(160deg, #BF96FF, #7A3DF2) !important;
  color: #7A3DF2 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,0,0,.08), 0 14px 30px rgba(122,61,242,.35) !important;
}

/* Nascondo gli elementi interni di Swal per le icone — usiamo invece un
   pseudo-element con la giusta SVG (impossibile via CSS puro), quindi NASCONDO
   tutto e disegno una checkmark/X/etc. solamente via SVG presente nei nodi
   originali, ma forziamo i colori e dimensioni white. */
.irc-swal-popup .swal2-icon .swal2-icon-content { display: none !important; }

/* SUCCESS: checkmark SVG (replica esatta del template MessageBox.html sez. ICONS).
   Nascondo le linee/ring nativi di Swal e disegno un check via SVG inline come per
   l'icona warning, cosi' lo stroke e' coerente con il prototipo. */
.irc-swal-popup .swal2-icon.swal2-success [class^="swal2-success"],
.irc-swal-popup .swal2-icon.swal2-success .swal2-success-ring,
.irc-swal-popup .swal2-icon.swal2-success .swal2-success-circular-line-left,
.irc-swal-popup .swal2-icon.swal2-success .swal2-success-circular-line-right,
.irc-swal-popup .swal2-icon.swal2-success .swal2-success-fix,
.irc-swal-popup .swal2-icon.swal2-success .swal2-success-line-tip,
.irc-swal-popup .swal2-icon.swal2-success .swal2-success-line-long {
  display: none !important;
}
.irc-swal-popup .swal2-icon.swal2-success {
  font-size: 0 !important;
}
.irc-swal-popup .swal2-icon.swal2-success::before {
  content: ""; position: absolute; inset: 0;
  display: grid; place-items: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px 48px;
  z-index: 1;
}
/* Bounce in entrata uguale a warning (template MessageBox: scale 0.2 -> 1.18 -> 1) */
.irc-swal-popup.swal2-show .swal2-icon.swal2-success {
  animation: irc-swal-icon-pop .6s cubic-bezier(.34,1.85,.64,1) .1s both;
}
/* Ring pulsante esterno dell'icona success: verde (currentColor = #1FA055).
   Aumento opacity rispetto al default .28 per renderlo piu' visibile su sfondo
   bianco del popup, come nel prototipo. */
.irc-swal-popup .swal2-icon.swal2-success::after {
  border-color: #1FA055 !important;
  border-width: 2.5px !important;
  opacity: .42 !important;
}

/* ERROR: X SVG (replica esatta del template MessageBox.html sez. ICONS).
   Nascondo le line native di Swal e disegno una X via SVG inline. */
.irc-swal-popup .swal2-icon.swal2-error [class^="swal2-x-mark"],
.irc-swal-popup .swal2-icon.swal2-error .swal2-x-mark-line-left,
.irc-swal-popup .swal2-icon.swal2-error .swal2-x-mark-line-right {
  display: none !important;
}
.irc-swal-popup .swal2-icon.swal2-error {
  font-size: 0 !important;
}
.irc-swal-popup .swal2-icon.swal2-error::before {
  content: ""; position: absolute; inset: 0;
  display: grid; place-items: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px 48px;
  z-index: 1;
}
.irc-swal-popup.swal2-show .swal2-icon.swal2-error {
  animation: irc-swal-icon-pop .6s cubic-bezier(.34,1.85,.64,1) .1s both;
}
.irc-swal-popup .swal2-icon.swal2-error::after {
  border-color: #E33E2B !important;
  border-width: 2.5px !important;
  opacity: .42 !important;
}

/* ERROR template: il bottone OK/Chiudi assume gradient ROSSO coerente con il
   template MessageBox.html.error (l'errore non e' una conferma "positiva",
   serve un'azione visivamente coerente con l'icona rossa). Override del
   verde di default solo quando il popup ha l'icona error. */
.irc-swal-popup.swal2-icon-error .swal2-actions .swal2-confirm.irc-swal-btn-primary {
    background: linear-gradient(135deg, #FF8A80, #E33E2B) !important;
    box-shadow: 0 4px 12px rgba(227,62,43,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.irc-swal-popup.swal2-icon-error .swal2-actions .swal2-confirm.irc-swal-btn-primary:hover {
    box-shadow: 0 8px 20px rgba(227,62,43,.45) !important;
}
.irc-swal-popup.swal2-icon-error .swal2-actions .swal2-confirm.irc-swal-btn-primary:focus {
    box-shadow: 0 0 0 4px rgba(227,62,43,.25) !important;
}

/* WARNING: triangolo "!" SVG bianco (replica esatta del template MessageBox.html sez. ICONS) */
.irc-swal-popup .swal2-icon.swal2-warning {
  font-size: 0 !important;
}
.irc-swal-popup .swal2-icon.swal2-warning::before {
  content: ""; position: absolute; inset: 0;
  display: grid; place-items: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.7 3.86a2 2 0 00-3.4 0z'/><path d='M12 9v4M12 17h.01'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 48px 48px;
  z-index: 1;
}
/* Ring pulsante esterno dell'icona warning: arancio (su sfondo bianco del popup,
   il bianco era invisibile). currentColor = #FF9500 ereditato da .swal2-warning. */
.irc-swal-popup .swal2-icon.swal2-warning::after {
  border-color: #FF9500 !important;
  border-width: 2.5px !important;
  opacity: .45 !important;
}

/* Effetto entrata + pulse continuo dell'icona warning (replica template MessageBox).
   Due animazioni in sequenza:
     1. irc-swal-icon-pop  → bounce iniziale: scale .2 → 1.18 → 1 (0.6s, 1 volta)
     2. irc-swal-icon-pulse → battito perpetuo: scale 1 → 1.06 → 1 (1.8s, infinite)
   Insieme al ring pulsante esterno (.swal2-icon::after) creano la sensazione di
   un allarme che attira l'attenzione. */
.irc-swal-popup.swal2-show .swal2-icon.swal2-warning {
  animation:
    irc-swal-icon-pop   .6s cubic-bezier(.34,1.85,.64,1) .1s both,
    irc-swal-icon-pulse 1.8s ease-in-out .8s infinite;
}
@keyframes irc-swal-icon-pop {
  0%   { transform: scale(.2);  opacity: 0; }
  50%  { transform: scale(1.18); opacity: 1; }
  80%  { transform: scale(.96); }
  100% { transform: scale(1);   }
}
@keyframes irc-swal-icon-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -10px 18px rgba(0,0,0,.08),
      0 14px 30px rgba(255,149,0,.40);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -10px 18px rgba(0,0,0,.08),
      0 22px 50px rgba(255,149,0,.75);
  }
}

/* Bottoni del template MessageBox.html.warning (eccezione alla REGOLA #2 dei colori fissi):
   - Annulla   = ghost bianco/grigio (border: #line, bg: --surface-2)
   - Procedi   = arancio gradient #FFD66B -> #FF9500 (.mb-btn.warning del template)
   Si attiva quando la popup ha la classe swal2-icon-warning (Swal la mette quando icon='warning'). */
.irc-swal-popup.swal2-icon-warning .swal2-actions .swal2-cancel.irc-swal-btn-ghost {
  background: var(--surface-2, #F2FBFE) !important;
  border: 1px solid var(--line, #C9E5EF) !important;
  color: var(--ink-2, #2B5C70) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.irc-swal-popup.swal2-icon-warning .swal2-actions .swal2-cancel.irc-swal-btn-ghost:hover {
  background: #fff !important;
  border-color: var(--c-400, #5AC8E9) !important;
}
.irc-swal-popup.swal2-icon-warning .swal2-actions .swal2-confirm.irc-swal-btn-primary {
  background: linear-gradient(135deg, #FFD66B, #FF9500) !important;
  box-shadow: 0 4px 12px rgba(255,149,0,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
  color: #fff !important;
}
.irc-swal-popup.swal2-icon-warning .swal2-actions .swal2-confirm.irc-swal-btn-primary:hover {
  box-shadow: 0 8px 20px rgba(255,149,0,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform: translateY(-2px);
}

/* INFO: "i" bianca */
.irc-swal-popup .swal2-icon.swal2-info {
  font-size: 0 !important;
}
.irc-swal-popup .swal2-icon.swal2-info::before {
  content: "i"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 700 56px/1 "Georgia", "SF Pro Display", serif;
  color: #fff;
  z-index: 1;
}

/* QUESTION: "?" bianca */
.irc-swal-popup .swal2-icon.swal2-question {
  font-size: 0 !important;
}
.irc-swal-popup .swal2-icon.swal2-question::before {
  content: "?"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 700 52px/1 -apple-system, "SF Pro Display", "Inter", sans-serif;
  color: #fff;
  z-index: 1;
}

/* Titolo: 22px bold, centrato */
.irc-swal-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--c-900) !important;
  margin: 6px 0 8px !important;
  padding: 0 32px !important;
  text-align: center !important;
}

/* Testo (htmlContainer): 14.5px, centrato */
.irc-swal-html {
  font-size: 14.5px !important;
  color: var(--ink-2) !important;
  line-height: 1.55 !important;
  padding: 0 32px 24px !important;
  margin: 0 !important;
  text-align: center !important;
}
.irc-swal-html b { color: var(--c-900); }

/* Actions: bottoni "split" full-width come nel template */
.irc-swal-popup .swal2-actions {
  display: flex !important;
  gap: 10px !important;
  padding: 0 22px 22px !important;
  margin: 0 !important;
  width: 100% !important;
  justify-content: center !important;
}
.irc-swal-btn {
  flex: 1 !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  border: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  cursor: pointer;
  /* NO !important su display: Swal nasconde i bottoni non usati con
     style="display:none" inline; con !important quell'inline veniva
     sovrascritto e il bottone Cancel appariva anche negli appAlert
     (showCancelButton:false). Niente !important = inline style vince. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff !important;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease) !important;
  outline: none !important;
}
/* Safety net: se per qualche motivo lo style inline non c'e' ma la classe
   swal2-hide e' applicata (animation di chiusura), forziamo display:none. */
.irc-swal-popup .swal2-actions .swal2-styled.swal2-hide,
.irc-swal-popup .swal2-actions [style*="display: none"],
.irc-swal-popup .swal2-actions [style*="display:none"] {
  display: none !important;
}
.irc-swal-btn:hover { transform: translateY(-2px); }
.irc-swal-btn:focus { box-shadow: 0 0 0 4px rgba(0,176,239,.25) !important; }

/* CONFIRM = verde gradient */
.irc-swal-btn-primary {
  background: linear-gradient(135deg, #34D87A, #1FA055) !important;
  box-shadow: 0 4px 12px rgba(31,160,85,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.irc-swal-btn-primary:hover { box-shadow: 0 8px 20px rgba(31,160,85,.45) !important; }
.irc-swal-btn-primary:focus { box-shadow: 0 0 0 4px rgba(31,160,85,.25) !important; }

/* CANCEL = rosso gradient */
.irc-swal-btn-ghost {
  background: linear-gradient(135deg, #FF8A80, #E33E2B) !important;
  box-shadow: 0 4px 12px rgba(227,62,43,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.irc-swal-btn-ghost:hover { box-shadow: 0 8px 20px rgba(227,62,43,.45) !important; }
.irc-swal-btn-ghost:focus { box-shadow: 0 0 0 4px rgba(227,62,43,.25) !important; }

/* Danger: alias (denyButton è bandito, ma resta per retro-compat) */
.irc-swal-btn-danger {
  background: linear-gradient(135deg, #FF8A80, #E33E2B) !important;
  box-shadow: 0 4px 12px rgba(227,62,43,.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.irc-swal-btn-danger:hover { box-shadow: 0 8px 20px rgba(227,62,43,.45) !important; }

/* Input nel prompt */
.irc-swal-input {
  width: calc(100% - 64px) !important;
  margin: 0 32px 14px !important;
  background: var(--surface-2) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font: inherit !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  outline: none !important;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease) !important;
}
.irc-swal-input:focus {
  border-color: var(--c-500) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(0,176,239,.18) !important;
}

/* Spaziatura header (la-icon ha gia' suo margin), niente padding ulteriore */
.irc-swal-popup .swal2-header { padding: 0 !important; }
.irc-swal-popup .swal2-content { padding: 0 !important; }

/* ------------- Select2 styling iReplace ------------- */
/* Coerente con design system: border 1px ciano-grigio, radius 10px, focus ciano,
   dropdown bianco con shadow, opzione selezionata gradient ciano. */

/* z-index: il dropdown di Select2 default e' 1051, troppo basso per stare sopra
   le modali (.hd-modale, .rep-modale = z-index 2000+). Forziamo un valore alto
   come safety net oltre al dropdownParent dinamico impostato in main.js. */
.select2-container { z-index: 10050; }
.select2-container--open { z-index: 10060; }

/* Container (chiuso) */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  height: auto !important;
  min-height: 42px;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--surface-2, #F8FCFE) !important;
  padding: 4px 10px !important;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  font: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink);
  font-size: 14px;
  line-height: 30px;
  padding: 0 6px 0 4px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ink-4);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  /* Override TOTALE: niente position:absolute relativo, usiamo flex per
     centrare la freccia (b) verticalmente nel container freccia.
     Il container freccia ha la sua altezza pari alla selection. */
  position: absolute !important;
  top: 0 !important;
  right: 8px !important;
  bottom: 0 !important;
  height: auto !important;
  width: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  /* Annulla position:absolute upstream e disegna come triangolo CSS centrato dal flex parent. */
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  width: 0; height: 0;
  border-color: var(--c-600) transparent transparent transparent !important;
  border-style: solid !important;
  border-width: 6px 5px 0 5px !important;
}
.select2-container--open.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--c-600) transparent !important;
  border-width: 0 5px 6px 5px !important;
}

/* Focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open  .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--multiple {
  border-color: var(--c-500) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(0,176,239,.18) !important;
  outline: none !important;
}

/* Dropdown */
.select2-container--default .select2-dropdown {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(2,40,60,.06), 0 16px 40px rgba(2,40,60,.18) !important;
  overflow: hidden;
  margin-top: 4px;
  background: var(--surface);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font: inherit;
  font-size: 13.5px;
  background: var(--surface-2, #F8FCFE);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--c-500) !important;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0,176,239,.18) !important;
  outline: none;
}

/* Options */
.select2-container--default .select2-results__option {
  padding: 10px 14px !important;
  font-size: 14px;
  color: var(--ink);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: rgba(0,176,239,.10) !important;
  color: var(--c-900) !important;
}
.select2-container--default .select2-results__option--selected {
  background: linear-gradient(135deg, var(--c-500), var(--c-700)) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option--disabled,
.select2-container--default .select2-results__option[aria-disabled="true"] {
  color: var(--ink-4) !important;
}

/* Multiple: tag */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: linear-gradient(135deg, var(--c-500), var(--c-700)) !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 12.5px;
  padding: 2px 8px 2px 24px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255,255,255,.85) !important;
  border-right: 1px solid rgba(255,255,255,.25) !important;
  padding: 0 6px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

/* Clear button (X) */
.select2-container--default .select2-selection__clear {
  color: var(--ink-3);
  font-weight: 600;
  margin-right: 24px;
}
.select2-container--default .select2-selection__clear:hover { color: var(--bad); }

/* Container width: full come l'input nativo */
.select2-container { width: 100% !important; }

/* Override container per select2 dentro le card "amount-input"-style: niente double radius */
.select-wrap .select2-container,
.la-select-wrap .select2-container,
.na-select-wrap .select2-container { width: 100% !important; }

/* Nascondi le freccette ::after dei wrapper nativi quando dentro c'e' un Select2
   (altrimenti compare DUE frecce: quella del wrapper e quella di Select2).
   Usiamo classe .has-select2 aggiunta da main.js post-init (cross-browser, no :has()). */
.select-wrap.has-select2::after,
.la-select-wrap.has-select2::after,
.na-select-wrap.has-select2::after { display: none !important; }

/* I select native originali rimangono nascosti durante l'upgrade (Select2 lo fa). */
.select2-hidden-accessible { /* ok lasciato dal plugin */ }

/* ====================================================================
   CAMPANELLA NOTIFICHE HELPDESK (header globale, su tutte le pagine)
   ==================================================================== */
.notif-wrap { position: relative; display: inline-block; }
.icon-btn.notif-btn { position: relative; }
.icon-btn.notif-btn .badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: var(--c-500); color: #fff;
    font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff;
}
.icon-btn.notif-btn .badge::before { content: none; }
.icon-btn.notif-btn .badge.is-zero { background: var(--c-500); }

/* Pulsante Carrello (topbar) -- stessa shape di .icon-btn.notif-btn */
.icon-btn.cart-btn{ position: relative; text-decoration: none; }
.icon-btn.cart-btn:hover{ background: var(--c-50, #F2FBFE); color: var(--c-700, #00729B); }
.icon-btn.cart-btn .badge{
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF6B5E, #E33E2B); color: #fff;
    font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; box-shadow: 0 0 0 2px #fff;
}

.notif-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: 340px; max-width: calc(100vw - 32px);
    background: #fff; border: 1px solid #D8ECF6; border-radius: 12px;
    box-shadow: 0 20px 60px rgba(2,40,60,.20);
    display: none; z-index: 80;
    overflow: hidden;
}
.notif-dropdown.is-open { display: block; }
.notif-dropdown__head {
    padding: 12px 16px; border-bottom: 1px solid #EFF6FA;
    font-size: 12px; font-weight: 700; color: #5B7184;
    text-transform: uppercase; letter-spacing: .06em;
    display: flex; align-items: center; gap: 8px;
}
.notif-dropdown__head svg { flex: 0 0 14px; color: #5B7184; }
.notif-dropdown__list { max-height: 360px; overflow-y: auto; }
.notif-dropdown__item {
    display: block;
    padding: 12px 16px; border-bottom: 1px solid #EFF6FA;
    color: #2F4658; text-decoration: none; font-size: 13px;
    transition: background .15s ease;
}
.notif-dropdown__item:hover { background: #F8FCFE; }
.notif-dropdown__item:last-child { border-bottom: 0; }
.notif-dropdown__item b { color: #053A52; }
.notif-dropdown__item .meta { font-size: 11px; color: #8AA0B2; margin-top: 2px; }
.notif-dropdown__empty { padding: 24px 16px; text-align: center; color: #8AA0B2; font-size: 13px; }
.notif-dropdown__foot {
    padding: 10px 16px; border-top: 1px solid #EFF6FA;
    text-align: center;
}
.notif-dropdown__foot a { color: #0058B0; text-decoration: none; font-size: 13px; font-weight: 600; }

/* Sezioni del dropdown (Notifiche / Helpdesk / ...) */
.notif-section + .notif-section { border-top: 1px solid #EFF6FA; }
.notif-section__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: #F8FCFE; border-bottom: 1px solid #EFF6FA;
}
.notif-section__title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; color: #5B7184;
    text-transform: uppercase; letter-spacing: .06em;
}
.notif-section__title svg { color: #5B7184; }
.notif-section__more {
    font-size: 12px; font-weight: 600; color: #0058B0;
    text-decoration: none; text-transform: none; letter-spacing: 0;
}
.notif-section__more:hover { text-decoration: underline; }
/* Variante <button> del link di sezione (es. "Segna tutte come lette") */
.notif-section__more--btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; line-height: inherit;
}
.notif-section__more--btn[disabled] { opacity: .55; cursor: default; text-decoration: none; }
.notif-section__list { max-height: 240px; overflow-y: auto; }
.notif-empty { padding: 18px 16px; text-align: center; color: #8AA0B2; font-size: 13px; }

/* ============================================================================
   TOOLTIP GLOBALE
   ----------------------------------------------------------------------------
   Tooltip implementato come singolo elemento `#app-tooltip` figlio del <body>,
   gestito da main.js (initTooltips + handlers mouseenter/mouseleave). Vive a
   position:fixed con z-index 99999, cosi' non viene mai clippato da container
   con overflow:hidden (es. .table-card, .modal__content).
   main.js trasferisce title -> data-tip sui .act-btn e .has-tip al load, e
   crea/aggiorna l'elemento al hover.
   Stile mutuato dal pulsante info "i" delle tile dashboard (dashboard.css
   .app .app-info-tip): sfondo #111, radius 12px, padding generoso, shadow
   drammatica, testo centrato. Vedi REGOLE.md sez. 25.
   ========================================================================== */
.app-tooltip {
    position: fixed;
    z-index: 99999;
    background: #111;
    color: #fff;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.35;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    letter-spacing: .1px;
    max-width: 260px;
    text-align: center;
    pointer-events: none;
    /* FIX (25/09/2026): c'era white-space:nowrap insieme a max-width:260px, e
       i testi piu' lunghi venivano tagliati invece di andare a capo. Ora la
       bubble si dispone su piu' righe dentro i 260px; main.js misura il bubble
       dopo aver scritto il testo, quindi la posizione resta corretta. */
    white-space: normal;
    overflow-wrap: break-word;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
    /* JS imposta top/left in pixel calcolati al hover */
    top: 0;
    left: 0;
}
.app-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Freccia: triangolo posizionato sotto la bubble, punta verso l'elemento */
.app-tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}
/* Posizione 'top' (default): bubble sopra l'elemento, freccia in basso */
.app-tooltip--top::after {
    top: 100%;
    left: calc(50% - 6px);
    border-top-color: #111;
}
/* Posizione 'bottom': bubble sotto, freccia in alto */
.app-tooltip--bottom::after {
    bottom: 100%;
    left: calc(50% - 6px);
    border-bottom-color: #111;
}
/* Posizione 'left': bubble a sinistra, freccia a destra */
.app-tooltip--left::after {
    left: 100%;
    top: calc(50% - 6px);
    border-left-color: #111;
}
/* Posizione 'right': bubble a destra, freccia a sinistra */
.app-tooltip--right::after {
    right: 100%;
    top: calc(50% - 6px);
    border-right-color: #111;
}

/* ============================================================================
   SOFT LOADER (operazioni inline come invio email, upload, ecc.)
   ----------------------------------------------------------------------------
   Differente dal page-loader "is-loading" di inc/head.php (cielo + nuvole):
   qui lo sfondo e' TRASPARENTE con blur in stile backdrop modale, cosi' la
   pagina sottostante resta visibile (utente capisce dove e' rimasto) ma non
   interagibile durante l'attesa. Logo iReplace fermo + cerchio rotante.

   Markup iniettato da main.js (window.appShowSoftLoader / appHideSoftLoader):
     <div id="app-soft-loader" class="app-soft-loader" aria-hidden="false">
       <div class="app-soft-loader__card">
         <div class="app-soft-loader__stage">
           <div class="app-soft-loader__spin"></div>
           <img class="app-soft-loader__logo" src="/img/ireplace-logo-white.png" alt="">
         </div>
         <div class="app-soft-loader__title">Elaborazione in corso</div>
         <div class="app-soft-loader__sub">Attendere prego…</div>
       </div>
     </div>
   ========================================================================== */
.app-soft-loader {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    display: flex;
    align-items: center; justify-content: center;
    background: rgba(5, 40, 55, .35);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    z-index: 99998;
    animation: __sl_fadein .2s ease forwards;
    pointer-events: auto;
}
body:has(.app-soft-loader) #app-tooltip { display: none !important; }
.app-soft-loader.is-hiding { animation: __sl_fadeout .15s ease forwards; }
@keyframes __sl_fadein  { from { opacity: 0; } to { opacity: 1; } }
@keyframes __sl_fadeout { from { opacity: 1; } to { opacity: 0; } }

/* Card centrale bianca con spinner + titolo + sottotitolo (stile MessageBox loading) */
.app-soft-loader__card {
    background: #fff;
    border-radius: 24px;
    padding: 32px 36px 28px;
    min-width: 280px;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 30px 80px -10px rgba(0,82,115,.55), 0 1px 2px rgba(2,40,60,.10);
    animation: __sl_pop .45s cubic-bezier(.34,1.56,.64,1);
    position: relative;
    overflow: hidden;
}
.app-soft-loader__card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, #5AC8FA, #0091C7);
}
@keyframes __sl_pop {
    from { transform: scale(.85); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* Hero stage: cerchio 96x96 in gradient ciano con logo bianco centrato + ring rotante */
.app-soft-loader__stage {
    position: relative;
    width: 96px; height: 96px;
    margin: 14px auto 18px;
    border-radius: 50%;
    background: linear-gradient(160deg, #5AC8FA, #0091C7);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -10px 18px rgba(0,0,0,.08),
        0 14px 30px rgba(0,113,155,.35);
    display: grid; place-items: center;
}
.app-soft-loader__spin {
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.30);
    border-top-color: #FFFFFF;
    animation: __sl_spin .9s linear infinite;
}
@keyframes __sl_spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .app-soft-loader__spin { animation-duration: 2.5s; }
}
.app-soft-loader__logo {
    width: 48px; height: 48px;
    pointer-events: none;
    user-select: none;
    /* Asset gia' preparato in /img/ireplace-logo-white.png: corpo bianco con
       occhi/bocca trasparenti (cutout) e pupille scure. Sul cerchio gradient
       ciano dello stage le cutout lasciano trasparire il fondo ciano dando
       leggibilita' agli occhi senza filtri CSS. */
}
.app-soft-loader__title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-900);
    margin: 4px 0 4px;
}
.app-soft-loader__sub {
    font-size: 13.5px;
    color: var(--ink-3);
    line-height: 1.5;
}

/* ============================================================================
   TOAST stack (notifiche flash laterali in alto a destra)
   ----------------------------------------------------------------------------
   API: window.appToast(kind, title, sub) — vedi js/main.js.
   Stile coerente con doc/design/project/versione-a/MessageBox.html.

     <div class="app-toast-stack">
       <div class="app-toast app-toast--success">
         <span class="app-toast__sq">…SVG icon</span>
         <div class="app-toast__body"><b>Titolo</b><span>Sottotitolo</span></div>
         <button class="app-toast__x" aria-label="Chiudi">×</button>
         <div class="app-toast__progress"></div>
       </div>
     </div>
   ========================================================================== */
.app-toast-stack {
    position: fixed; top: 24px; right: 24px; z-index: 2147483600;
    display: flex; flex-direction: column; gap: 10px;
    max-width: 380px;
    pointer-events: none;
}
.app-toast {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(2,40,60,.10), 0 24px 50px -10px rgba(0,113,155,.30);
    display: grid; grid-template-columns: 44px 1fr auto; gap: 12px;
    padding: 14px 16px;
    border-left: 4px solid var(--c-500);
    align-items: center;
    pointer-events: auto;
    animation: __toast_in .45s cubic-bezier(.22,.61,.36,1);
}
.app-toast--success { border-left-color: #1FA055; }
.app-toast--error   { border-left-color: #E33E2B; }
.app-toast--warning { border-left-color: #FF9500; }
.app-toast--info    { border-left-color: #0A84FF; }

@keyframes __toast_in  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes __toast_out { to   { opacity: 0; transform: translateX(40px); } }
.app-toast.is-leaving { animation: __toast_out .35s cubic-bezier(.22,.61,.36,1) forwards; }

.app-toast__sq {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 4px 10px rgba(0,113,155,.18);
}
.app-toast--success .app-toast__sq { background: linear-gradient(160deg, #5BE49B, #1FA055); }
.app-toast--error   .app-toast__sq { background: linear-gradient(160deg, #FF8A80, #E33E2B); }
.app-toast--warning .app-toast__sq { background: linear-gradient(160deg, #FFD66B, #FF9500); }
.app-toast--info    .app-toast__sq { background: linear-gradient(160deg, #5AC8FA, #0A84FF); }

.app-toast__body { min-width: 0; }
.app-toast__body b {
    display: block;
    font-size: 13.5px; color: var(--c-900); font-weight: 700;
    letter-spacing: -0.01em;
}
.app-toast__body span {
    display: block;
    font-size: 12.5px; color: var(--ink-3);
    margin-top: 2px; line-height: 1.4;
}

.app-toast__x {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: transparent; border: 0;
    color: var(--ink-4); cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s ease, color .15s ease;
}
.app-toast__x:hover { background: var(--surface-2); color: var(--bad); }

/* Progress bar che scala da 1 a 0 lungo i 4.5s di auto-close */
.app-toast__progress {
    grid-column: 1 / -1;
    height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--c-500), var(--c-700));
    transform-origin: left;
    margin-top: 6px;
    animation: __toast_prog 4.5s linear forwards;
}
.app-toast--success .app-toast__progress { background: linear-gradient(90deg, #34D87A, #1FA055); }
.app-toast--error   .app-toast__progress { background: linear-gradient(90deg, #FF8A80, #E33E2B); }
.app-toast--warning .app-toast__progress { background: linear-gradient(90deg, #FFD66B, #FF9500); }
.app-toast--info    .app-toast__progress { background: linear-gradient(90deg, #5AC8FA, #0A84FF); }
@keyframes __toast_prog { to { transform: scaleX(0); } }

/* ============================================================================
   ACTION BUTTONS: stato disabled (globale)
   ----------------------------------------------------------------------------
   Funziona per qualsiasi `.act-btn` quando ha:
     - attributo HTML nativo `disabled` (preferito, blocca anche i click)
     - classe `.act-disabled` (legacy / quando non si vuole disabilitare a livello
       di form ma solo visualmente).
   Lo stile base di `.act-btn` resta in assistenze.css; qui solo l'override
   "disabled" perche' nasce come pattern globale (es. profilo > utenti tenant:
   l'utente non puo' cancellare il proprio account, regola 2026-05-27).
   ========================================================================== */
.act-btn[disabled],
.act-btn.act-disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: auto;
}
.act-btn[disabled]:hover,
.act-btn.act-disabled:hover {
    background: #fff !important;
    border-color: #E0E8EF !important;
    color: #5B7184 !important;
    transform: none !important;
}

/* ============================================================================
   STANDARD DATA-TABLE (regola globale)
   ----------------------------------------------------------------------------
   Markup canonico usato in /assistenze, /profilo (gestione tenant), /helpdesk,
   /lista-anagrafica, ecc:
     <section class="table-card">
       <div class="table-head-bar">
         <div class="left">Visualizza <select> elementi</div>
         <div class="right"><div class="quick-search"><input/></div></div>
       </div>
       <table class="data-table">...</table>
       <footer class="pagination">
         <span class="page-info">…</span>
         <div class="pages"><a/><span class="on"/>…</div>
       </footer>
     </section>
   Le pagine specifiche possono sovrascrivere via <page>.css.
   ========================================================================== */
.table-card {
    background: #FFFFFF;
    border: 1px solid #D8ECF6;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(2,40,60,.04), 0 12px 36px rgba(2,40,60,.08);
    overflow: hidden;
}
.table-head-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #E6F2F8;
    background: #F8FCFE;
    font-size: 13px;
    color: #5B7184;
}
.table-head-bar .left,
.table-head-bar .right { display: flex; align-items: center; gap: 8px; }
.table-head-bar select {
    background: #fff;
    border: 1px solid #D8ECF6;
    border-radius: 8px;
    padding: 6px 8px;
    font: inherit;
    color: #2F4658;
}
.quick-search {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #D8ECF6;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.quick-search svg { color: #8AA0B2; }
.quick-search input {
    border: 0;
    background: transparent;
    padding: 7px 8px;
    font: inherit;
    outline: none;
    color: #0A1F2E;
    width: 240px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: #5B7184;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 14px;
    background: #F8FCFE;
    border-bottom: 1px solid #E6F2F8;
    white-space: nowrap;
}
.data-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, color .15s ease;
}
.data-table thead th.sortable:hover { background: #EAF6FB; color: #0A1F2E; }
.data-table thead th.is-sorted      { color: #0091C7; background: #EAF6FB; }
.data-table thead th .sort-arrow {
    font-size: 9px;
    margin-left: 4px;
    vertical-align: middle;
    color: inherit;
}
.data-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #EFF6FA;
    vertical-align: middle;
    color: #2F4658;
}
.data-table tbody tr:hover { background: #F8FCFE; }
.data-table tbody td.empty,
.data-table tbody td.data-table__empty {
    text-align: center;
    color: #8AA0B2;
    padding: 36px 0;
}
.data-table .actions-head,
.data-table .actions-cell,
.data-table .data-table__actions { width: 1%; white-space: nowrap; text-align: center; }
.data-table .action-btns { display: inline-flex; gap: 6px; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-top: 1px solid #E6F2F8;
    background: #F8FCFE;
    font-size: 13px;
    color: #5B7184;
}
.pagination .pages { display: flex; gap: 4px; align-items: center; }
.pagination .pages a,
.pagination .pages span {
    min-width: 32px; height: 32px; padding: 0 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #D8ECF6;
    color: #2F4658;
    display: grid; place-items: center;
    font: inherit;
    text-decoration: none;
}
.pagination .pages a:hover { background: #F8FCFE; border-color: #4ECEF7; }
.pagination .pages span.on {
    background: linear-gradient(135deg, #00B0EF, #00729B);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(0,113,155,.30);
}
.pagination .pages span.dis,
.pagination .pages span.dots {
    background: transparent;
    border-color: transparent;
    color: #8AA0B2;
}

/* ============================================================================
   CONFETTI (effetto visivo per Swal success)
   ----------------------------------------------------------------------------
   Iniettato dinamicamente da main.js quando appAlert/appToast con icon='success'.
   I pezzetti cadono dall'alto del popup e ruotano per 1.4s circa.
   ========================================================================== */
.app-confetti {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
}
.app-confetti i {
    position: absolute; top: -8px;
    width: 8px; height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: __confetti_fall 1.4s ease-out forwards;
}
@keyframes __confetti_fall {
    0%   { opacity: 1; transform: translate(0, -20px) rotate(0); }
    100% { opacity: 0; transform: translate(var(--dx, 0px), 380px) rotate(720deg); }
}

/* ============================================================================
   APP UPLOAD PANEL (js/app-upload-panel.js)
   ----------------------------------------------------------------------------
   Pannello di Upload globale: modale centrale con dropzone drag&drop +
   anteprima file + bottoni Annulla/Carica. Riusabile in tutti i moduli.
   ========================================================================== */
.app-upload-panel-bg {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(5, 40, 55, 0.30);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; transition: opacity 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.app-upload-panel-bg.is-open { opacity: 1; }
.app-upload-panel {
    background: #fff; border-radius: 22px;
    max-width: 560px; width: 100%;
    box-shadow: 0 60px 120px -20px rgba(0, 82, 115, 0.55);
    transform: scale(0.92); opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: 88vh;
}
.app-upload-panel-bg.is-open .app-upload-panel { transform: scale(1); opacity: 1; }
.app-upload-panel .aup-head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid #E6F2F8;
}
.app-upload-panel .aup-head-text { flex: 1; min-width: 0; }
.app-upload-panel .aup-title {
    margin: 0; font-size: 18px; font-weight: 700;
    color: #053A52; letter-spacing: -0.02em; line-height: 1.25;
}
.app-upload-panel .aup-sub {
    margin-top: 4px; font-size: 13px; color: #5B7184;
}
.app-upload-panel .aup-close {
    background: #F8FCFE; border: 1px solid #D8ECF6; border-radius: 8px;
    width: 30px; height: 30px; display: grid; place-items: center;
    color: #5B7184; cursor: pointer; flex: 0 0 30px;
    transition: background 0.18s, color 0.18s;
}
.app-upload-panel .aup-close:hover { background: #fff; color: #B71D14; }
.app-upload-panel .aup-body {
    padding: 18px 22px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
}
.app-upload-panel .aup-dropzone {
    border: 2px dashed #BFEAFA; border-radius: 14px;
    padding: 28px 16px; text-align: center;
    background: #F2FBFE; cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.18s;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.app-upload-panel .aup-dropzone:hover,
.app-upload-panel .aup-dropzone:focus-visible {
    border-color: #00B0EF; background: #E1F5FD;
    outline: none;
}
.app-upload-panel .aup-dropzone.is-drag {
    border-color: #0091C7; background: #BFEAFA;
    transform: scale(1.02);
}
.app-upload-panel .aup-dz-ico {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #00B0EF, #00729B); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 20px rgba(0, 113, 155, 0.30);
}
.app-upload-panel .aup-dz-hint {
    font-size: 14px; color: #2F4658; font-weight: 600;
}
.app-upload-panel .aup-dz-browse {
    font-size: 12.5px; color: #5B7184;
}
.app-upload-panel .aup-dz-browse span {
    color: #00729B; font-weight: 600; text-decoration: underline;
}
.app-upload-panel .aup-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.app-upload-panel .aup-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px;
    background: #F8FCFE; border: 1px solid #E6F2F8;
    font-size: 13px;
}
.app-upload-panel .aup-item-ico {
    color: #00729B; display: grid; place-items: center; flex: 0 0 18px;
}
.app-upload-panel .aup-item-name {
    flex: 1; min-width: 0;
    color: #0A1F2E; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-upload-panel .aup-item-size {
    color: #8AA0B2; font-size: 12px; font-variant-numeric: tabular-nums;
}
.app-upload-panel .aup-foot {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 22px; border-top: 1px solid #E6F2F8;
    background: #F8FCFE;
}
.app-upload-panel .aup-btn {
    padding: 10px 18px; border: 0; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.app-upload-panel .aup-btn-ghost {
    background: #fff; color: #2F4658; border: 1px solid #D8ECF6;
}
.app-upload-panel .aup-btn-ghost:hover { background: #F8FCFE; }
.app-upload-panel .aup-btn-primary {
    background: linear-gradient(135deg, #00B0EF, #00729B); color: #fff;
    box-shadow: 0 4px 10px rgba(0, 113, 155, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.app-upload-panel .aup-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 113, 155, 0.40);
}
.app-upload-panel .aup-btn-primary:disabled {
    opacity: 0.45; cursor: not-allowed;
    box-shadow: none;
}

/* ---- Modal Segnala Bug (template SegnalaBug.html) ----------------- */
.brm-scrim{
    position:fixed; inset:0; z-index:9000;
    background:rgba(18,38,52,.44); backdrop-filter:blur(3px);
    display:grid; place-items:center; padding:24px 16px;
}
.brm-modal{
    width:100%; max-width:600px; max-height:calc(100vh - 48px);
    background:#fff; border-radius:22px;
    box-shadow:0 1px 2px rgba(2,40,60,.06), 0 44px 110px -30px rgba(2,40,60,.55);
    display:flex; flex-direction:column; overflow:hidden;
    animation:brm-pop .42s cubic-bezier(.22,.61,.36,1);
}
@keyframes brm-pop{from{transform:translateY(14px) scale(.97)}to{transform:none}}

/* header */
.brm-head{
    display:flex; align-items:center; padding:20px 24px 16px;
    border-bottom:1px solid #EDF2F6; flex:0 0 auto;
}
.brm-head__title{ margin:0; font-size:1.1rem; font-weight:700; letter-spacing:-.02em; color:#053A52; }
.brm-head__x{
    margin-left:auto; width:34px; height:34px; border:0; border-radius:10px;
    background:transparent; color:#8AA0B2; cursor:pointer;
    display:grid; place-items:center;
    transition:background .2s, color .2s, transform .2s;
}
.brm-head__x:hover{ background:#FDECEC; color:#E5484D; transform:rotate(90deg); }
.brm-head__x svg{ width:20px; height:20px; }

/* red band */
.brm-band{
    position:relative; overflow:hidden; flex:0 0 auto;
    padding:22px 24px 20px;
    background:
        radial-gradient(420px 200px at 18% -40%, rgba(255,107,111,.30), transparent 70%),
        radial-gradient(360px 220px at 100% 140%, rgba(197,54,59,.30), transparent 65%),
        linear-gradient(135deg,#FF6B6F 0%, #E5484D 48%, #C5363B 100%);
    color:#fff; display:flex; align-items:center; gap:18px;
}
.brm-band__glyphs{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.brm-band__glyphs span{
    position:absolute; font-family:"SF Mono","Menlo",monospace; font-weight:700;
    color:rgba(255,255,255,.22);
}
.brm-band__glyphs .g1{ top:12px; right:130px; font-size:15px; }
.brm-band__glyphs .g2{ bottom:14px; right:60px; font-size:21px; }
.brm-band__glyphs .g3{ top:44px; right:24px; font-size:13px; }
.brm-band__glyphs .g4{ bottom:18px; left:120px; font-size:13px; }

.brm-band__art{
    position:relative; width:80px; height:80px; flex:0 0 80px;
    display:grid; place-items:center; z-index:1;
}
.brm-band__ring{
    position:absolute; inset:0; border-radius:50%;
    border:2px solid rgba(255,255,255,.4);
    animation:brm-ripple 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}
.brm-band__ring--2{ animation-delay:1.3s; }
@keyframes brm-ripple{0%{transform:scale(.62);opacity:.9}100%{transform:scale(1.15);opacity:0}}
.brm-band__disc{
    width:62px; height:62px; border-radius:50%;
    background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4);
    display:grid; place-items:center; backdrop-filter:blur(3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px rgba(120,10,15,.4);
}
.brm-band__disc svg{
    width:32px; height:32px; color:#fff;
    animation:brm-wiggle 3.2s cubic-bezier(.22,.61,.36,1) infinite;
    transform-origin:50% 55%;
}
@keyframes brm-wiggle{0%,84%,100%{transform:rotate(0) translateY(0)}88%{transform:rotate(-8deg)}92%{transform:rotate(8deg) translateY(-1px)}96%{transform:rotate(-4deg)}}

.brm-band__copy{ position:relative; z-index:1; min-width:0; }
.brm-band__tag{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
    color:#fff; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.32);
    border-radius:999px; padding:3px 10px 3px 8px; margin-bottom:8px;
}
.brm-band__tag svg{ width:12px; height:12px; }
.brm-band__h2{ margin:0; font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.brm-band__p{ margin:4px 0 0; font-size:13px; color:rgba(255,255,255,.85); line-height:1.4; }

/* body */
.brm-body{ padding:20px 24px 8px; overflow:auto; flex:1; }
.brm-lead{ margin:0 0 14px; font-size:15px; line-height:1.55; color:#2F4658; }
.brm-lead strong{ color:#0A1F2E; font-weight:600; }

.brm-ta-wrap{ position:relative; }
.brm-ta{
    width:100%; min-height:150px; resize:vertical;
    background:#fff; border:1.5px solid #4ECEF7; border-radius:12px;
    padding:14px 15px; font:inherit; font-size:15px; line-height:1.55;
    color:#0A1F2E; outline:0;
    box-shadow:0 0 0 4px rgba(0,176,239,.14);
    transition:border-color .2s, box-shadow .2s;
}
.brm-ta::placeholder{ color:#8AA0B2; }
.brm-ta:focus{ border-color:#00B0EF; box-shadow:0 0 0 4px rgba(0,176,239,.22); }
.brm-ta-count{
    position:absolute; right:12px; bottom:10px;
    font-size:11.5px; color:#8AA0B2; font-variant-numeric:tabular-nums; pointer-events:none;
}

.brm-drop{
    margin-top:14px; display:inline-flex; align-items:center; gap:10px;
    border:1.5px dashed #4ECEF7; border-radius:12px; background:transparent;
    padding:12px 16px; cursor:pointer; color:#00729B; font-size:14.5px; font-weight:600;
    transition:border-color .2s, background .2s, transform .15s;
}
.brm-drop:hover,.brm-drop.over{ border-color:#00B0EF; background:#F2FBFE; transform:translateY(-1px); }
.brm-drop svg{ width:18px; height:18px; flex:0 0 18px; }

.brm-filebar{
    display:none; align-items:center; gap:10px; margin-top:10px;
    padding:10px 12px; border-radius:12px; background:#F7FBFE; border:1px solid #E3EBF1;
}
.brm-filebar.show{ display:flex; }
.brm-filebar__thumb{
    width:40px; height:40px; flex:0 0 40px; border-radius:9px;
    background:#E1F5FD; color:#00729B; display:grid; place-items:center; overflow:hidden;
}
.brm-filebar__thumb img{ width:100%; height:100%; object-fit:cover; }
.brm-filebar__thumb svg{ width:18px; height:18px; }
.brm-filebar__meta{ min-width:0; flex:1; }
.brm-filebar__name{ display:block; font-size:13px; font-weight:600; color:#0A1F2E; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brm-filebar__size{ display:block; font-size:11.5px; color:#8AA0B2; margin-top:1px; }
.brm-filebar__rm{
    flex:0 0 auto; width:28px; height:28px; border:1px solid #E3EBF1;
    border-radius:8px; background:#fff; color:#5B7184; cursor:pointer;
    display:grid; place-items:center; transition:color .15s, border-color .15s;
}
.brm-filebar__rm:hover{ color:#E5484D; border-color:#F3C0C2; }
.brm-filebar__rm svg{ width:14px; height:14px; }

/* context info bar */
.brm-ctx{
    display:flex; align-items:center; gap:8px; margin-top:12px;
    padding:8px 12px; border-radius:10px; background:#F5FAFD; border:1px solid #DAEEf7;
    font-size:12.5px; color:#5B7184;
}
.brm-ctx svg{ width:14px; height:14px; flex:0 0 14px; color:#00B0EF; }
.brm-ctx__label{ flex:1; }
.brm-ctx__badge{
    flex:0 0 auto; font-size:11px; font-weight:700; letter-spacing:.02em;
    color:#fff; background:#E5484D; border-radius:999px; padding:2px 8px;
}

/* success panel */
.brm-done{
    display:none; flex-direction:column; align-items:center;
    text-align:center; padding:28px 28px 36px;
}
.brm-done.show{ display:flex; animation:brm-fade .4s cubic-bezier(.22,.61,.36,1); }
@keyframes brm-fade{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.brm-done__circle{
    width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
    color:#fff; background:linear-gradient(160deg,#34D87A,#1FA055);
    box-shadow:0 14px 30px -10px rgba(31,160,85,.6); margin-bottom:16px;
}
.brm-done__circle svg{ width:36px; height:36px; }
.brm-done__h2{ margin:0 0 8px; font-size:21px; font-weight:700; letter-spacing:-.02em; color:#053A52; }
.brm-done__p{ margin:0; font-size:14.5px; color:#5B7184; line-height:1.55; max-width:340px; }
.brm-done__ticket{
    margin-top:18px; font-family:"SF Mono","Menlo",monospace; font-size:13px; font-weight:700;
    color:#C5363B; background:#FDECEC; border:1px solid #F6CFD0; padding:7px 16px; border-radius:999px;
}

/* footer */
.brm-foot{
    display:flex; align-items:center; gap:8px;
    padding:14px 24px 18px; border-top:1px solid #EDF2F6; flex:0 0 auto;
}
.brm-foot__spacer{ flex:1; }
.brm-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 24px; border-radius:13px; cursor:pointer;
    font:inherit; font-size:15px; font-weight:600; letter-spacing:-.01em;
    transition:transform .2s, box-shadow .2s, opacity .2s;
}
.brm-btn--ghost{ background:transparent; border:0; color:#2F4658; }
.brm-btn--ghost:hover{ color:#0A1F2E; }
.brm-btn--send{
    border:0; color:#fff;
    background:linear-gradient(135deg,#3FC0F0,#0091C7);
    box-shadow:0 6px 16px rgba(0,113,155,.34), inset 0 1px 0 rgba(255,255,255,.35);
}
.brm-btn--send:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,113,155,.44); }
.brm-btn--send:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

@media (max-width:600px){
    .brm-band__glyphs .g3, .brm-band__glyphs .g4{ display:none; }
}
@media (prefers-reduced-motion:reduce){
    .brm-modal{ animation:none; }
    .brm-band__ring, .brm-band__disc svg, .brm-done{ animation:none; }
}

/* ============================================================
   NOVITÀ / CHANGELOG — modale globale (trigger: menu utente)
   Replica del template doc/design/.../Novita.html, classi scoped nv-.
   ============================================================ */
.nv-scrim{
    position:fixed; inset:0; z-index:1000;
    background:rgba(8,40,60,.34); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    display:grid; place-items:center; padding:28px 20px;
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.nv-scrim.is-open{ opacity:1; visibility:visible; }
.nv-modal{
    width:100%; max-width:560px; height:min(680px, calc(100vh - 56px));
    background:#fff; border-radius:24px;
    box-shadow:0 1px 2px rgba(2,40,60,.06), 0 44px 110px -30px rgba(2,40,60,.55);
    display:flex; flex-direction:column; overflow:hidden;
    transform:translateY(16px) scale(.97); transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.nv-scrim.is-open .nv-modal{ transform:none; }
.nv-head{ position:relative; padding:24px 26px 20px; background:linear-gradient(135deg,#053A52 0%,#00729B 55%,#0091C7 100%); color:#fff; overflow:hidden; flex:0 0 auto; }
.nv-head::before{ content:""; position:absolute; top:-60px; right:-30px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(78,206,247,.55),transparent 70%); opacity:.6; }
.nv-head__row{ position:relative; display:flex; align-items:center; gap:14px; z-index:1; }
.nv-head__ico{ width:48px; height:48px; flex:0 0 48px; border-radius:14px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); display:grid; place-items:center; color:#fff; }
.nv-head__ico svg{ width:25px; height:25px; }
.nv-head h2{ margin:0; font-size:22px; font-weight:700; letter-spacing:-0.02em; display:flex; align-items:center; gap:9px; color:#fff; }
.nv-ver{ font-size:11px; font-weight:800; letter-spacing:.04em; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.25); padding:3px 9px; border-radius:999px; }
.nv-head p{ margin:3px 0 0; font-size:13px; color:rgba(255,255,255,.74); font-weight:500; }
.nv-x{ margin-left:auto; width:36px; height:36px; border:0; border-radius:11px; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); transition:background .2s ease, transform .2s ease; }
.nv-x:hover{ background:rgba(255,255,255,.26); transform:rotate(90deg); }
.nv-x svg{ width:18px; height:18px; }
.nv-body{ flex:1; min-height:0; overflow-y:auto; padding:8px 0 10px; }
.nv-grp{ padding:18px 26px 9px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#005474; display:flex; align-items:center; gap:10px; }
.nv-grp .nv-cal{ width:26px; height:26px; flex:0 0 26px; border-radius:8px; display:grid; place-items:center; color:#fff; background:linear-gradient(160deg,#4ECEF7,#00729B); }
.nv-grp .nv-cal svg{ width:14px; height:14px; }
.nv-grp .nv-ln{ flex:1; height:1px; background:#E8F2F9; }
.nv-feat{ display:flex; gap:13px; padding:13px 26px; transition:background .16s ease; }
.nv-feat:hover{ background:#F7FBFE; }
.nv-feat + .nv-feat{ border-top:1px solid #E8F2F9; }
.nv-feat__i{ width:22px; height:22px; flex:0 0 22px; margin-top:1px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(160deg,#34D87A,#1FA055); }
.nv-feat__i svg{ width:13px; height:13px; }
.nv-feat__i.blue{ background:linear-gradient(160deg,#5AC8FA,#0A84FF); }
.nv-feat__i.cyan{ background:linear-gradient(160deg,#7CE2F5,#00B0EF); }
.nv-feat__i.green{ background:linear-gradient(160deg,#5BE49B,#1FA055); }
.nv-feat__i.violet{ background:linear-gradient(160deg,#BF96FF,#7A3DF2); }
.nv-feat__i.orange{ background:linear-gradient(160deg,#FFD66B,#FF9500); }
.nv-feat__i.pink{ background:linear-gradient(160deg,#FF8AB4,#E5377A); }
.nv-feat__i.teal{ background:linear-gradient(160deg,#7BE5E0,#2BB5B0); }
.nv-feat__i.gold{ background:linear-gradient(160deg,#FFD66B,#F5A623); }
.nv-feat__i.red{ background:linear-gradient(160deg,#FF8A7A,#E5392B); }
.nv-feat__t{ min-width:0; flex:1; }
.nv-feat__tt{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.nv-feat__tt b{ font-size:15px; font-weight:700; color:#0A1F2E; letter-spacing:-0.01em; }
.nv-date{ font-size:12px; font-weight:600; color:#00729B; font-variant-numeric:tabular-nums; margin-top:3px; }
.nv-tag{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:2px 8px; border-radius:999px; }
.nv-tag.new{ color:#0E6E3A; background:rgba(31,160,85,.14); }
.nv-tag.imp{ color:#9A5B00; background:rgba(255,149,0,.16); }
.nv-tag.fix{ color:#B71D14; background:rgba(229,57,43,.14); }
.nv-feat__t p{ margin:4px 0 0; font-size:13px; line-height:1.55; color:#5B7184; }
.nv-foot{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:16px 26px; border-top:1px solid #E8F2F9; background:#F7FBFE; }
.nv-foot .nv-note{ font-size:12.5px; color:#8AA0B2; }
.nv-foot .nv-spacer{ flex:1; }
.nv-close{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 30px; border-radius:13px; cursor:pointer; font:inherit; font-size:14.5px; font-weight:700; border:0; color:#fff; background:linear-gradient(135deg,#00B0EF,#00729B); box-shadow:0 6px 16px rgba(0,113,155,.32); transition:transform .2s ease; }
.nv-close:hover{ transform:translateY(-2px); }
.nv-close svg{ width:16px; height:16px; }

/* Barra filtri della modale Novità (Tutti/Nuovo/Migliorato/Fix). */
.nv-filters{ position:relative; z-index:1; display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.nv-fbtn{
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid rgba(255,255,255,.30); background:rgba(255,255,255,.12);
    color:#fff; font:inherit; font-size:12.5px; font-weight:700; letter-spacing:.01em;
    padding:6px 13px; border-radius:999px; cursor:pointer;
    transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.nv-fbtn svg{ width:14px; height:14px; flex:0 0 auto; }
.nv-fbtn:hover{ background:rgba(255,255,255,.22); }
.nv-fbtn.is-on{ background:#fff; color:#00729B; border-color:#fff; }

/* ===== Suggerimento indirizzi globale (Photon/Komoot) — vedi main.js ===== */
.addr-suggest{ position:absolute; z-index:3000; background:#fff; border:1px solid #d8ecf6; border-radius:10px;
  box-shadow:0 12px 32px rgba(2,40,60,.20); margin-top:4px; max-height:300px; overflow:auto;
  font-size:13.5px; min-width:240px; }
.addr-suggest .as-item{ padding:9px 12px; cursor:pointer; border-bottom:1px solid #eef6fb; color:#3a4f5e; line-height:1.3; }
.addr-suggest .as-item:last-of-type{ border-bottom:0; }
.addr-suggest .as-item.on, .addr-suggest .as-item:hover{ background:#eaf7fd; }
.addr-suggest .as-item b{ color:#0a1f2e; font-weight:700; }
.addr-suggest .as-foot{ padding:6px 12px; font-size:10px; color:#9bb0c7; border-top:1px solid #eef6fb; text-align:right; position:sticky; bottom:0; background:#fff; }

/* ===== Campi in SOLA LETTURA / disabilitati: aspetto "disabilitato" (globale) =====
   I campi readonly o disabled si vedono grigio chiaro, testo attenuato e cursore
   not-allowed, in tutto il progetto. */
input[readonly]:not([type=checkbox]):not([type=radio]),
textarea[readonly],
input:disabled:not([type=checkbox]):not([type=radio]),
textarea:disabled,
select:disabled {
  background-color:#eef2f6 !important;
  color:#8a98a8 !important;
  -webkit-text-fill-color:#8a98a8 !important;   /* testo grigio anche su Safari/iOS quando disabled */
  border-color:#e0e7ee !important;
  cursor:not-allowed !important;
  opacity:1 !important;                          /* evita il doppio sbiadito dei disabled nativi */
}

/* ============================================================================
   RIQUADRO "CERCA" SU SCHERMO STRETTO (regola globale, 01/10/2026)
   ----------------------------------------------------------------------------
   `.search-card` e' una riga sola: campo che si allarga + pulsante Ricerca.
   Su un telefono il pulsante non si restringe e usciva dal bordo bianco della
   card (visto in /helpdesk, ma il markup e' lo stesso in Assistenze, Note,
   Magazzino, Statistiche, Store e nelle pagine super-admin). Sotto gli 860px
   il pulsante va a capo e prende tutta la larghezza.

   I selettori partono da `body` di proposito: le pagine definiscono
   `.search-card` nel proprio CSS, caricato DOPO questo file, e a parita' di
   specificita' vincerebbero loro (una media query non conta nella specificita').

   `.search-card` a griglia (lista-anagrafica.css) ha gia' le sue soglie: qui
   non tocchiamo `grid-template-columns`, solo il pulsante e i campi.
   ========================================================================== */
@media (max-width: 860px) {
    body .search-card { flex-wrap: wrap; }
    body .search-card > * { min-width: 0; }
    body .search-card .field { flex: 1 1 100%; }
    body .search-card .btn-ricerca,
    body .search-card button[type="submit"] {
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
    }
    /* 16px: sotto questa misura iOS zooma la pagina al focus del campo. */
    body .search-card input,
    body .search-card select,
    body .search-card .input-search input { font-size: 16px; }
}