/* ============ Mobile-first Light UI — Safe & Overflow-proof ============ */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --card:#ffffff;
  --cardText:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#0d6efd;
  --success:#16a34a;
  --danger:#dc2626;
  --info:#0ea5e9;
}

html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--cardText);
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden; /* stop orizzontale */
}

img,video,canvas{ max-width:100%; height:auto; }

/* Navbar brand color */
.navbar{ background:var(--primary)!important }
.container{ max-width:1100px; padding-left:12px; padding-right:12px; }

/* ---- Card / surfaces ---- */
.card, .filter-card, .guest-card, .light-card{
  background:var(--card); color:var(--cardText);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* ---- Inputs SEMPRE chiari ---- */
.form-control, .form-select{
  background:#fff; border:1px solid #d1d5db; color:#111827;
}
.form-control::placeholder{ color:#9ca3af }
.form-control:focus, .form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .15rem rgba(13,110,253,.15);
}

/* ---- Bottoni ---- */
.btn{ border-radius:12px; transition:transform .05s ease; min-width:0; }
.btn:active{ transform:scale(.98) }
.btn-primary{ background:var(--primary); border-color:var(--primary); }
.btn-success{ background:var(--success); border-color:var(--success); }
.btn-outline-info{ color:var(--info); border-color:#bfe9ff; background:#fff; }
.btn-outline-light{ color:#111827; background:#fff; border:1px solid var(--border); }
.btn-compact{ padding:.55rem .8rem; font-size:.95rem; }
.btn-icon{ display:inline-flex; align-items:center; gap:.4rem; }
.btn-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.6rem; } /* nuovo */

/* ---- Badges ---- */
.badge{ border-radius:999px; padding:.45rem .7rem; font-weight:700; }
.badge-success{ background:var(--success)!important }
.badge-danger{ background:var(--danger)!important }

/* ---- Avatar omino ---- */
.avatar{ width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.12); animation:breath 3.2s ease-in-out infinite; flex:0 0 auto;
}
.avatar i{ font-size:22px }
.avatar.sm{ width:36px; height:36px }
.avatar.lg{ width:56px; height:56px }
.avatar.av1{background:linear-gradient(135deg,#4f46e5,#06b6d4)}
.avatar.av2{background:linear-gradient(135deg,#ef4444,#f59e0b)}
.avatar.av3{background:linear-gradient(135deg,#10b981,#06b6d4)}
.avatar.av4{background:linear-gradient(135deg,#a855f7,#ec4899)}
.avatar.av5{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
.avatar.av6{background:linear-gradient(135deg,#f97316,#22c55e)}
.avatar.av7{background:linear-gradient(135deg,#e11d48,#9333ea)}
.avatar.av8{background:linear-gradient(135deg,#14b8a6,#84cc16)}
@keyframes breath{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* ---- Liste a card ---- */
.card-list .item{ display:flex; gap:.9rem; align-items:flex-start; padding:12px 12px;
  border-bottom:1px solid var(--border); background:var(--card); }
.card-list .item:last-child{ border-bottom:none }
.item-title{ font-weight:800; font-size:1.05rem; line-height:1.15; color:var(--cardText); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-sub{ color:var(--muted); font-size:.94rem; line-height:1.25; word-break:break-word; }

/* ---- Azioni affiancate che si adattano (mai fuori) ---- */
.actions-inline{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }

/* ---- Chip filtri (scroll orizzontale) ---- */
.chip-scroll{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; scrollbar-width:none; }
.chip-scroll::-webkit-scrollbar{ display:none }
.chip{ padding:.55rem .9rem; background:#fff; border:1px solid var(--border); color:#334155;
  border-radius:999px; white-space:nowrap; font-weight:700; font-size:.95rem }
.chip.active{ border-color:var(--primary); color:#0d6efd; box-shadow:0 0 0 2px rgba(13,110,253,.15) inset }

/* ---- Carosello orizzontale che non sfora ---- */
.carousel-h{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 12px; }
.carousel-h::-webkit-scrollbar{ height:6px }
.carousel-h .card-customer{
  scroll-snap-align:center;
  flex:0 0 calc(100% - 24px);  /* Larghezza perfetta dentro il padding */
  max-width: calc(100% - 24px);
  padding:14px; border-radius:16px; background:var(--card); color:var(--cardText);
  border:1px solid var(--border); box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* ---- Tabelle impilate su mobile ---- */
@media (max-width: 768px){
  table.stack-mobile thead{ display:none }
  table.stack-mobile tr{ display:block; margin:0 0 10px 0; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--card); color:var(--cardText) }
  table.stack-mobile td{ display:flex; justify-content:space-between; gap:1rem; border:none; border-bottom:1px solid var(--border); }
  table.stack-mobile td:last-child{ border-bottom:none }
  table.stack-mobile td::before{ content:attr(data-label); color:var(--muted) }
}

/* ---- Bottom nav con safe-area iPhone ---- */
.page-pad-bottom{ padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:var(--surface); border-top:1px solid var(--border);
  display:flex; justify-content:space-around; gap:.25rem;
  padding:.4rem .25rem;
  padding-bottom: calc(.4rem + env(safe-area-inset-bottom));
}
.bottom-nav a{
  min-width:0; /* consente ellissi */
  flex:1; text-align:center; padding:.45rem .25rem; font-size:.8rem; color:#334155; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
}
.bottom-nav a.active{ color:#0d6efd; background:#eaf2ff; border:1px solid #cfe3ff }
.bottom-nav i{ font-size:1.1rem }
.bottom-nav a span{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;
}

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

/* === Fix PR "I miei ospiti": header card che non sfora === */
.carousel-h .card-customer{ overflow:hidden } /* bordo arrotondato e niente testo fuori */
.card-customer .header{
  display:grid; grid-template-columns: 1fr auto; gap:.25rem; align-items:start;
}
.card-customer .title{ min-width:0 } /* abilita ellissi */
.card-customer .title .item-title{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* 1 riga con ... su schermi medi/grandi */
}
.card-customer .badges{
  display:flex; gap:.35rem; flex-wrap:wrap; justify-content:flex-end; min-width:0;
}
/* Su schermi piccoli: impila le badge sotto il nome e consenti max 2 righe di titolo */
@media (max-width: 420px){
  .card-customer .header{ grid-template-columns: 1fr; }
  .card-customer .badges{ justify-content:flex-start }
  .card-customer .title .item-title{
    white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
}
/* ===== Passkey bottom-sheet ===== */
.passkey-sheet{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1200;
  display:flex; align-items:flex-end; justify-content:center; padding:16px;
}
.passkey-sheet .sheet-card{
  width:100%; max-width:520px; background:#fff; color:#111827;
  border-radius:18px; padding:16px; box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.passkey-sheet .sheet-icon{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#eaf2ff; color:#0d6efd; margin-bottom:8px; font-size:24px;
}
.passkey-sheet .sheet-title{ font-weight:800; font-size:1.1rem; }
.passkey-sheet .sheet-sub{ color:#6b7280; margin-top:4px; }
/* ===== LOGIN (mobile-first) ===== */
body.login-body{
  background:#ffffff;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.login-wrap{ width:100%; max-width: 440px; }
.login-card{
  background:#fff;
  border-radius:18px;
  box-shadow: 0 16px 38px rgba(16,24,40,.08);
  padding: 22px 20px;
}
.brand{
  text-align:center;
  margin-bottom: 12px;
}
.brand .brand-logo{
  width: 78px; height: 78px;
  object-fit: contain;
  border-radius: 12px;
  display:block;
  margin: 0 auto 8px;
}
.brand .brand-title{
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing:.2px;
}
.brand .brand-sub{
  color:#6b7280;
  font-size:.925rem;
  margin-top:2px;
}
.login-card .form-label{ font-weight:600; }
.login-card .form-control{
  background:#fff; color:#111827; border-radius:12px; border:1px solid #e5e7eb;
}
.login-card .form-control::placeholder{ color:#9ca3af; }
.login-card .input-group>.form-control{ border-right:none; }
.login-card .input-group .btn-toggle{
  border:1px solid #e5e7eb; border-left:none;
  border-radius:0 12px 12px 0;
}
.login-card .btn-primary{
  border-radius:12px; padding:.8rem 1rem; font-weight:700;
}
.login-footer{
  text-align:center; color:#9ca3af; font-size:.86rem; margin-top:12px;
}
@media (min-width: 480px){
  .login-card{ padding: 26px 24px; }
  .brand .brand-title{ font-size:1.35rem; }
}
/* ===== LOGIN – variante con contrasto visivo tra sfondo e card ===== */

/* palette (brand blu e indaco) */
:root {
  --brand-1: #0d6efd;
  --brand-2: #6366f1;
}

/* Sfondo: gradiente chiaro + due macchie morbide agli angoli */
body.login-body{
  background:
    radial-gradient(800px 520px at -10% -10%, rgba(13,110,253,0.12), transparent 36%),
    radial-gradient(760px 460px at 110% -10%, rgba(99,102,241,0.10), transparent 40%),
    linear-gradient(180deg, #f7f9fc 0%, #eef2ff 100%);
}

/* Card: bordo sfumato + ombra morbida (resta bianca per leggibilità) */
.login-card{
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(13,110,253,0.25), rgba(99,102,241,0.25)) border-box;
  border: 1px solid transparent;   /* usa il secondo gradient come bordo */
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.10);
  padding: 26px 22px;
}

/* Logo un filo più protagonista + leggera ombra */
.brand .brand-logo{
  width: 96px; height: 96px; border-radius: 14px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(13,110,253,.15));
}
.brand .brand-title{ letter-spacing:.25px; }

/* Input chiari (contrasto adeguato) */
.login-card .form-control{
  background:#fff; color:#111827; border-radius:12px; border:1px solid #e5e7eb;
}
.login-card .input-group .btn-toggle{ border:1px solid #e5e7eb; border-left:none; border-radius:0 12px 12px 0; }

/* Pulsante principale più “pieno” */
.login-card .btn-primary{ border-radius:12px; padding:.8rem 1rem; font-weight:700; }

/* --- Discoteche: layout mobile-friendly --- */
@media (max-width: 640px) {
  .table-responsive table thead { display:none; }
  .table-responsive table tr {
    display:block;
    border:1px solid #e5e7eb;
    border-radius:12px;
    margin-bottom:12px;
    padding:10px 12px;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
  }
  .table-responsive table td {
    display:flex;
    justify-content:space-between;
    gap:8px;
    border:0 !important;
    padding:6px 0 !important;
    width:100%;
  }
  .table-responsive table td:last-child {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding-top:10px !important;
  }
  .table-responsive .btn { flex:1 1 auto; min-width:110px; }
}


/* ===== Mobile Fix Pack v1 (card + azioni) ===== */
@media (max-width: 768px){
  html, body { overflow-x: hidden; } /* niente scroll orizzontale */

  /* card più morbide e contenimento */
  .card, .event-card, .pr-card {
    overflow: hidden;
    border-radius: 16px;
  }

  /* titoli lunghi: manda a capo in modo intelligente */
  .card h1, .card h2, .card h3, .card h4, .card h5, .card .event-title {
    font-size: 1.05rem;
    line-height: 1.25;
    overflow-wrap: anywhere;     /* spezza parole lunghissime */
    word-break: break-word;      /* fallback */
    text-wrap: balance;          /* dove supportato */
  }

  /* Qualsiasi "action group" dentro la card: togli assoluti e rendi griglia */
  .card .quick-actions,
  .card .event-actions,
  .card .actions,
  .card [class*="actions"],
  .card .btn-group.position-absolute {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
    margin-top: 12px;
  }

  /* A 480px scendiamo a 2 colonne; a 380px una colonna */
  @media (max-width: 480px){
    .card .quick-actions,
    .card .event-actions,
    .card .actions,
    .card [class*="actions"],
    .card .btn-group.position-absolute {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 380px){
    .card .quick-actions,
    .card .event-actions,
    .card .actions,
    .card [class*="actions"],
    .card .btn-group.position-absolute {
      grid-template-columns: 1fr;
    }
  }

  /* Pulsanti fluidi e leggibili */
  .card .quick-actions .btn,
  .card .event-actions .btn,
  .card .actions .btn,
  .card [class*="actions"] .btn {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    border-radius: 12px;
    padding: 10px 12px;
  }
}

/* Riduci leggermente la spaziatura verticale globale su mobile */
@media (max-width: 768px){
  .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
  .mt-4 { margin-top: 1rem !important; }
}

/* ===== MOBILE FIX PACK (v3) — 2025-08-20 ===== */
@media (max-width: 768px){
  html, body { overflow-x: hidden; }

  .card, .event-card, .pr-card {
    overflow: hidden;
    border-radius: 16px;
  }

  /* Titoli lunghi: mandali a capo e bilancia */
  .card h1, .card h2, .card h3, .card h4, .card h5,
  .card .event-title, .event-title {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-wrap: balance;
  }

  /* QUALSIASI gruppo azioni diventa griglia, no absolute */
  .card .quick-actions,
  .card .event-actions,
  .card .actions,
  .card [class*="actions"],
  .card .btn-group.position-absolute {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  @media (max-width: 480px){
    .card .quick-actions,
    .card .event-actions,
    .card .actions,
    .card [class*="actions"],
    .card .btn-group.position-absolute {
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
  }
  @media (max-width: 380px){
    .card .quick-actions,
    .card .event-actions,
    .card .actions,
    .card [class*="actions"],
    .card .btn-group.position-absolute {
      grid-template-columns: 1fr !important;
    }
  }

  .card [class*="actions"] .btn,
  .card .quick-actions .btn,
  .card .event-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
  }

  /* Un filo meno padding laterale su mobile */
  .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
  .mt-4 { margin-top: 1rem !important; }
}

/* ===== MOBILE FIX PACK (v3) — 2025-08-20 ===== */
@media (max-width: 768px){
  html, body { overflow-x: hidden; }
  .card, .event-card, .pr-card { overflow: hidden; border-radius: 16px; }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card .event-title, .event-title {
    font-size: 1.05rem !important; line-height: 1.25 !important;
    overflow-wrap: anywhere !important; word-break: break-word !important; text-wrap: balance;
  }
  .card .quick-actions, .card .event-actions, .card .actions, .card [class*="actions"], .card .btn-group.position-absolute{
    position: static !important; inset: auto !important; transform: none !important;
    display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 8px !important; margin-top: 12px !important;
  }
  @media (max-width:480px){ .card .quick-actions, .card .event-actions, .card .actions, .card [class*="actions"], .card .btn-group.position-absolute{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
  @media (max-width:380px){ .card .quick-actions, .card .event-actions, .card .actions, .card [class*="actions"], .card .btn-group.position-absolute{ grid-template-columns: 1fr !important; } }
  .card [class*="actions"] .btn, .card .quick-actions .btn, .card .event-actions .btn{ width:100% !important; justify-content:center !important; white-space:nowrap !important; border-radius:12px !important; padding:10px 12px !important; }
  .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
  .mt-4 { margin-top: 1rem !important; }
}

/* ===== MOBILE FIX LITE (v1) — 2025-08-20 =====
   Obiettivo: mettere in griglia i pulsanti azione delle card evento su mobile,
   senza toccare colori/tema/layout globale.
*/
@media (max-width: 768px){
  /* Card: separazione visiva leggera */
  .card.event, .card.event-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    margin-bottom: 14px;
  }

  /* SOLO i gruppi azione dentro alle card: da absolute -> layout a griglia */
  .card .btn-group.position-absolute {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .card .btn-group.position-absolute .btn {
    width: 100% !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    justify-content: center !important;
    padding: 10px 12px !important;
  }

  /* Titoli lunghi: a capo senza rompere il tema */
  .card h1, .card h2, .card h3, .card h4, .card h5,
  .card .event-title, .event-title {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-wrap: balance;
  }
}

/* ===== MOBILE FIX FINAL (v5) — 2025-08-20 =====
   Obiettivo: su mobile i pulsanti azione nelle card evento NON devono uscire dal riquadro.
   Non tocchiamo colori, navbar, né il resto del tema.
*/
@media (max-width: 768px){
  html, body { overflow-x: hidden; }

  /* Card evento un filo più "contenuta" e con overflow nascosto */
  .card, .event-card, .pr-card { overflow: hidden; border-radius: 16px; }

  /* Qualsiasi gruppo azione nella card (classi comuni + inline absolute) diventa griglia */
  .card .btn-group,
  .card [class*="actions"],
  .card .position-absolute,
  .card [style*="position:absolute"]{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Su schermi molto stretti: una colonna */
  @media (max-width: 380px){
    .card .btn-group,
    .card [class*="actions"],
    .card .position-absolute,
    .card [style*="position:absolute"]{
      grid-template-columns: 1fr !important;
    }
  }

  /* I singoli bottoni si adattano alla griglia */
  .card .btn-group .btn,
  .card [class*="actions"] .btn,
  .card .position-absolute .btn,
  .card [style*="position:absolute"] .btn{
    width: 100% !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
  }

  /* Titoli lunghi vanno a capo senza sbordare */
  .card h1, .card h2, .card h3, .card h4, .card h5,
  .card .event-title, .event-title {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-wrap: balance;
  }
}

/* ===== MOBILE FIX FINAL (v5) — 2025-08-20 =====
   Obiettivo: su mobile i pulsanti azione nelle card evento NON devono uscire dal riquadro.
   Non tocchiamo colori, navbar, né il resto del tema.
*/
@media (max-width: 768px){
  html, body { overflow-x: hidden; }

  /* Card evento un filo più "contenuta" e con overflow nascosto */
  .card, .event-card, .pr-card { overflow: hidden; border-radius: 16px; }

  /* Qualsiasi gruppo azione nella card (classi comuni + inline absolute) diventa griglia */
  .card .btn-group,
  .card [class*="actions"],
  .card .position-absolute,
  .card [style*="position:absolute"]{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Su schermi molto stretti: una colonna */
  @media (max-width: 380px){
    .card .btn-group,
    .card [class*="actions"],
    .card .position-absolute,
    .card [style*="position:absolute"]{
      grid-template-columns: 1fr !important;
    }
  }

  /* I singoli bottoni si adattano alla griglia */
  .card .btn-group .btn,
  .card [class*="actions"] .btn,
  .card .position-absolute .btn,
  .card [style*="position:absolute"] .btn{
    width: 100% !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
  }

  /* Titoli lunghi vanno a capo senza sbordare */
  .card h1, .card h2, .card h3, .card h4, .card h5,
  .card .event-title, .event-title {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-wrap: balance;
  }
}

/* ===== MOBILE FIX FINAL (v5) — 2025-08-20 =====
   Obiettivo: su mobile i pulsanti azione nelle card evento NON devono uscire dal riquadro.
   Non tocchiamo colori, navbar, né il resto del tema.
*/
@media (max-width: 768px){
  html, body { overflow-x: hidden; }

  /* Card evento un filo più "contenuta" e con overflow nascosto */
  .card, .event-card, .pr-card { overflow: hidden; border-radius: 16px; }

  /* Qualsiasi gruppo azione nella card (classi comuni + inline absolute) diventa griglia */
  .card .btn-group,
  .card [class*="actions"],
  .card .position-absolute,
  .card [style*="position:absolute"]{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Su schermi molto stretti: una colonna */
  @media (max-width: 380px){
    .card .btn-group,
    .card [class*="actions"],
    .card .position-absolute,
    .card [style*="position:absolute"]{
      grid-template-columns: 1fr !important;
    }
  }

  /* I singoli bottoni si adattano alla griglia */
  .card .btn-group .btn,
  .card [class*="actions"] .btn,
  .card .position-absolute .btn,
  .card [style*="position:absolute"] .btn{
    width: 100% !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
  }

  /* Titoli lunghi vanno a capo senza sbordare */
  .card h1, .card h2, .card h3, .card h4, .card h5,
  .card .event-title, .event-title {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-wrap: balance;
  }
}

/* === MOBILE FIX FINAL (v7) — 2025‑08‑20 — cartella: html.bak-2025-08-20-1831 ===
   Scopo: su mobile i pulsanti nelle card evento non devono uscire dal riquadro.
   Non tocchiamo tema/colore/navbar. Solo layout dei bottoni dentro le card.
*/
@media (max-width: 768px){
  html,body{overflow-x:hidden}

  /* Card più "contenute" */
  .card,.event-card,.pr-card{overflow:hidden;border-radius:16px}

  /* Qualsiasi gruppo azione dentro la card -> griglia (2 colonne) */
  .card .btn-group,
  .card [class*="actions"],
  .card .position-absolute,
  .card [style*="position:absolute"]{
    position:static!important; inset:auto!important; transform:none!important; float:none!important;
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important; margin-top:12px!important; width:100%!important; max-width:100%!important
  }
  /* Schermi molto stretti: 1 colonna */
  @media (max-width:380px){
    .card .btn-group,
    .card [class*="actions"],
    .card .position-absolute,
    .card [style*="position:absolute"]{ grid-template-columns:1fr!important }
  }

  /* Bottoni adattati alla griglia */
  .card .btn-group .btn,
  .card [class*="actions"] .btn,
  .card .position-absolute .btn,
  .card [style*="position:absolute"] .btn{
    width:100%!important; justify-content:center!important; white-space:nowrap!important;
    border-radius:12px!important; padding:10px 12px!important
  }

  /* Lascia i badge sovrapposti (omaggi, stato) se usano class badge */
  .card .badge.position-absolute,
  .card .position-absolute.badge{ position:absolute!important }

  /* Titoli lunghi a capo senza sbordare */
  .card .event-title,.event-title,
  .card h1,.card h2,.card h3,.card h4,.card h5{
    overflow-wrap:anywhere!important; word-break:break-word!important; text-wrap:balance
  }

  /* Contenitori un filo più “respirati” su mobile */
  .container,.container-fluid{padding-left:14px; padding-right:14px}
}

/* === MOBILE FIX FINAL (v7.1) — 2025‑08‑20 ===
   Scopo: su mobile i pulsanti nelle card non devono uscire dal riquadro.
   Nessuna modifica a colori/tema; solo layout.
*/
@media (max-width: 768px){
  html,body{overflow-x:hidden}

  /* Card più contenute */
  .card,.event-card,.pr-card{overflow:hidden;border-radius:16px}

  /* Qualsiasi gruppo azione nella card -> griglia (2 colonne) */
  .card .btn-group,
  .card [class*="actions"],
  .card .position-absolute,
  .card [style*="position:absolute"]{
    position:static!important;inset:auto!important;transform:none!important;float:none!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;margin-top:12px!important;width:100%!important;max-width:100%!important
  }
  /* Schermi molto stretti: 1 colonna */
  @media (max-width:380px){
    .card .btn-group,
    .card [class*="actions"],
    .card .position-absolute,
    .card [style*="position:absolute"]{grid-template-columns:1fr!important}
  }

  /* Bottoni adattati alla griglia */
  .card .btn-group .btn,
  .card [class*="actions"] .btn,
  .card .position-absolute .btn,
  .card [style*="position:absolute"] .btn{
    width:100%!important;justify-content:center!important;white-space:nowrap!important;
    border-radius:12px!important;padding:10px 12px!important
  }

  /* Badge sovrapposti lasciati assoluti */
  .card .badge.position-absolute,
  .card .position-absolute.badge{position:absolute!important}

  /* Titoli lunghi a capo */
  .card .event-title,.event-title,
  .card h1,.card h2,.card h3,.card h4,.card h5{
    overflow-wrap:anywhere!important;word-break:break-word!important;text-wrap:balance
  }

  /* Contenitori un filo più “respirati” */
  .container,.container-fluid{padding-left:14px;padding-right:14px}
}

/* === MOBILE FIX FINAL (v7.1) — 2025‑08‑20 ===
   Scopo: su mobile i pulsanti nelle card non devono uscire dal riquadro.
   Nessuna modifica a colori/tema; solo layout.
*/
@media (max-width: 768px){
  html,body{overflow-x:hidden}

  /* Card più contenute */
  .card,.event-card,.pr-card{overflow:hidden;border-radius:16px}

  /* Qualsiasi gruppo azione nella card -> griglia (2 colonne) */
  .card .btn-group,
  .card [class*="actions"],
  .card .position-absolute,
  .card [style*="position:absolute"]{
    position:static!important;inset:auto!important;transform:none!important;float:none!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;margin-top:12px!important;width:100%!important;max-width:100%!important
  }
  /* Schermi molto stretti: 1 colonna */
  @media (max-width:380px){
    .card .btn-group,
    .card [class*="actions"],
    .card .position-absolute,
    .card [style*="position:absolute"]{grid-template-columns:1fr!important}
  }

  /* Bottoni adattati alla griglia */
  .card .btn-group .btn,
  .card [class*="actions"] .btn,
  .card .position-absolute .btn,
  .card [style*="position:absolute"] .btn{
    width:100%!important;justify-content:center!important;white-space:nowrap!important;
    border-radius:12px!important;padding:10px 12px!important
  }

  /* Badge sovrapposti lasciati assoluti */
  .card .badge.position-absolute,
  .card .position-absolute.badge{position:absolute!important}

  /* Titoli lunghi a capo */
  .card .event-title,.event-title,
  .card h1,.card h2,.card h3,.card h4,.card h5{
    overflow-wrap:anywhere!important;word-break:break-word!important;text-wrap:balance
  }

  /* Contenitori un filo più “respirati” */
  .container,.container-fluid{padding-left:14px;padding-right:14px}
}

/* === MOBILE FIX FINAL (v7.2) — 2025‑08‑20 ===
   Obiettivo: su mobile TUTTI i gruppi assoluti che contengono bottoni
   tornano "in flusso" e diventano una griglia 2x, senza toccare il tema.
*/
@media (max-width: 768px){
  html,body{overflow-x:hidden}

  /* Card più contenute (senza cambiare colori/tema) */
  .card,.event-card,.pr-card{overflow:hidden;border-radius:16px}

  /* 1) Qualsiasi contenitore ASSOLUTO che CONTIENE bottoni -> torna statico e a griglia */
  @supports selector(.x:has(.btn)){
    .position-absolute:has(.btn),
    [style*="position:absolute"]:has(.btn){
      position:static!important; inset:auto!important; transform:none!important; float:none!important;
      display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
      gap:8px!important; margin-top:12px!important; width:100%!important; max-width:100%!important;
    }
    /* <380px: 1 colonna */
    @media (max-width:380px){
      .position-absolute:has(.btn),
      [style*="position:absolute"]:has(.btn){
        grid-template-columns:1fr!important;
      }
    }
    .position-absolute:has(.btn) .btn,
    [style*="position:absolute"]:has(.btn) .btn{
      width:100%!important; justify-content:center!important; white-space:nowrap!important;
      border-radius:12px!important; padding:10px 12px!important;
    }
    /* NON toccare i badge assoluti (etichette piccole) */
    .badge.position-absolute,
    .position-absolute.badge{position:absolute!important}
  }

  /* 2) Fallback per browser che non supportano :has (comunque iPhone recenti lo supportano) */
  .card .btn-group,
  .card [class*="actions"]{
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important; width:100%!important; max-width:100%!important;
  }
  @media (max-width:380px){
    .card .btn-group,
    .card [class*="actions"]{ grid-template-columns:1fr!important }
  }
  .card .btn-group .btn,
  .card [class*="actions"] .btn{
    width:100%!important; justify-content:center!important; white-space:nowrap!important;
    border-radius:12px!important; padding:10px 12px!important;
  }

  /* Titoli lunghi a capo */
  .card .event-title,.event-title,
  .card h1,.card h2,.card h3,.card h4,.card h5{
    overflow-wrap:anywhere!important; word-break:break-word!important; text-wrap:balance;
  }

  /* Contenitori un filo più “respirati” */
  .container,.container-fluid{padding-left:14px; padding-right:14px}
}

/* === MOBILE FIX FINAL (v7.2) — 2025‑08‑20 ===
   Obiettivo: su mobile TUTTI i gruppi assoluti che contengono bottoni
   tornano "in flusso" e diventano una griglia 2x, senza toccare il tema.
*/
@media (max-width: 768px){
  html,body{overflow-x:hidden}

  /* Card più contenute (senza cambiare colori/tema) */
  .card,.event-card,.pr-card{overflow:hidden;border-radius:16px}

  /* 1) Qualsiasi contenitore ASSOLUTO che CONTIENE bottoni -> torna statico e a griglia */
  @supports selector(.x:has(.btn)){
    .position-absolute:has(.btn),
    [style*="position:absolute"]:has(.btn){
      position:static!important; inset:auto!important; transform:none!important; float:none!important;
      display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
      gap:8px!important; margin-top:12px!important; width:100%!important; max-width:100%!important;
    }
    /* <380px: 1 colonna */
    @media (max-width:380px){
      .position-absolute:has(.btn),
      [style*="position:absolute"]:has(.btn){
        grid-template-columns:1fr!important;
      }
    }
    .position-absolute:has(.btn) .btn,
    [style*="position:absolute"]:has(.btn) .btn{
      width:100%!important; justify-content:center!important; white-space:nowrap!important;
      border-radius:12px!important; padding:10px 12px!important;
    }
    /* NON toccare i badge assoluti (etichette piccole) */
    .badge.position-absolute,
    .position-absolute.badge{position:absolute!important}
  }

  /* 2) Fallback per browser che non supportano :has (comunque iPhone recenti lo supportano) */
  .card .btn-group,
  .card [class*="actions"]{
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important; width:100%!important; max-width:100%!important;
  }
  @media (max-width:380px){
    .card .btn-group,
    .card [class*="actions"]{ grid-template-columns:1fr!important }
  }
  .card .btn-group .btn,
  .card [class*="actions"] .btn{
    width:100%!important; justify-content:center!important; white-space:nowrap!important;
    border-radius:12px!important; padding:10px 12px!important;
  }

  /* Titoli lunghi a capo */
  .card .event-title,.event-title,
  .card h1,.card h2,.card h3,.card h4,.card h5{
    overflow-wrap:anywhere!important; word-break:break-word!important; text-wrap:balance;
  }

  /* Contenitori un filo più “respirati” */
  .container,.container-fluid{padding-left:14px; padding-right:14px}
}

/* === MOBILE FIX FINAL (v7.3-wide) — 2025‑08‑20 ===
   Forza: su mobile qualunque wrapper position-absolute con bottoni
   torna "in flusso" e si dispone a griglia; eccezione per i badge.
*/
@media (max-width: 768px){
  html,body{overflow-x:hidden}

  /* Neutralizza QUALSIASI absolute che contiene bottoni (anche fuori dalle card) */
  @supports selector(.x:has(.btn)){
    .position-absolute:has(.btn),
    [class*="position-absolute"]:has(.btn),
    [style*="position:absolute"]:has(.btn){
      position:static!important; inset:auto!important; transform:none!important; float:none!important;
      display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
      gap:8px!important; margin-top:12px!important; width:100%!important; max-width:100%!important;
    }
    @media (max-width:380px){
      .position-absolute:has(.btn),
      [class*="position-absolute"]:has(.btn),
      [style*="position:absolute"]:has(.btn){ grid-template-columns:1fr!important }
    }
    .position-absolute:has(.btn) .btn,
    [class*="position-absolute"]:has(.btn) .btn,
    [style*="position:absolute"]:has(.btn) .btn{
      width:100%!important; justify-content:center!important; white-space:nowrap!important;
      border-radius:12px!important; padding:10px 12px!important;
    }
  }

  /* Fallback per browser senza :has (iOS vecchi): 
     - qualunque absolute (con class o style) viene reso statico.
     - escludiamo i badge, che restano assoluti. */
  .position-absolute,
  [class*="position-absolute"],
  [style*="position:absolute"]{
    position:static!important; inset:auto!important; transform:none!important; float:none!important;
    width:100%!important; max-width:100%!important; margin-top:12px!important;
  }
  .badge.position-absolute,
  .position-absolute.badge,
  [class*="badge"].position-absolute{ position:absolute!important; margin-top:0!important }

  /* Layout 2 colonne (o 1 su schermi molto stretti) per i wrapper che ora sono in flusso */
  .position-absolute .btn,
  [class*="position-absolute"] .btn,
  [style*="position:absolute"] .btn{ width:100%!important }
  .position-absolute,
  [class*="position-absolute"],
  [style*="position:absolute"]{
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important;
  }
  @media (max-width:380px){
    .position-absolute,
    [class*="position-absolute"],
    [style*="position:absolute"]{ grid-template-columns:1fr!important }
  }

  /* Titoli lunghi a capo (robusto) */
  .event-title,.card .event-title,
  .card h1,.card h2,.card h3,.card h4,.card h5{
    overflow-wrap:anywhere!important; word-break:break-word!important; text-wrap:balance;
  }

  /* Contenitori un filo più “respirati” */
  .container,.container-fluid{padding-left:14px; padding-right:14px}
}

/* === MOBILE FIX FINAL (v7.3-wide) — 2025‑08‑20 ===
   Forza: su mobile qualunque wrapper position-absolute con bottoni
   torna "in flusso" e si dispone a griglia; eccezione per i badge.
*/
@media (max-width: 768px){
  html,body{overflow-x:hidden}

  /* Neutralizza QUALSIASI absolute che contiene bottoni (anche fuori dalle card) */
  @supports selector(.x:has(.btn)){
    .position-absolute:has(.btn),
    [class*="position-absolute"]:has(.btn),
    [style*="position:absolute"]:has(.btn){
      position:static!important; inset:auto!important; transform:none!important; float:none!important;
      display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
      gap:8px!important; margin-top:12px!important; width:100%!important; max-width:100%!important;
    }
    @media (max-width:380px){
      .position-absolute:has(.btn),
      [class*="position-absolute"]:has(.btn),
      [style*="position:absolute"]:has(.btn){ grid-template-columns:1fr!important }
    }
    .position-absolute:has(.btn) .btn,
    [class*="position-absolute"]:has(.btn) .btn,
    [style*="position:absolute"]:has(.btn) .btn{
      width:100%!important; justify-content:center!important; white-space:nowrap!important;
      border-radius:12px!important; padding:10px 12px!important;
    }
  }

  /* Fallback per browser senza :has (iOS vecchi): 
     - qualunque absolute (con class o style) viene reso statico.
     - escludiamo i badge, che restano assoluti. */
  .position-absolute,
  [class*="position-absolute"],
  [style*="position:absolute"]{
    position:static!important; inset:auto!important; transform:none!important; float:none!important;
    width:100%!important; max-width:100%!important; margin-top:12px!important;
  }
  .badge.position-absolute,
  .position-absolute.badge,
  [class*="badge"].position-absolute{ position:absolute!important; margin-top:0!important }

  /* Layout 2 colonne (o 1 su schermi molto stretti) per i wrapper che ora sono in flusso */
  .position-absolute .btn,
  [class*="position-absolute"] .btn,
  [style*="position:absolute"] .btn{ width:100%!important }
  .position-absolute,
  [class*="position-absolute"],
  [style*="position:absolute"]{
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important;
  }
  @media (max-width:380px){
    .position-absolute,
    [class*="position-absolute"],
    [style*="position:absolute"]{ grid-template-columns:1fr!important }
  }

  /* Titoli lunghi a capo (robusto) */
  .event-title,.card .event-title,
  .card h1,.card h2,.card h3,.card h4,.card h5{
    overflow-wrap:anywhere!important; word-break:break-word!important; text-wrap:balance;
  }

  /* Contenitori un filo più “respirati” */
  .container,.container-fluid{padding-left:14px; padding-right:14px}
}

/* === NOTLIFE UI — BTN VARIANTS + MARQUEE (2025-08-26) =================== */
:root{
  --nl-blue-1:#38BDF8; --nl-blue-2:#2563EB;      /* Scanner */
  --nl-amber-1:#F59E0B; --nl-amber-2:#F97316;    /* Omaggi */
  --nl-violet-1:#C084FC; --nl-violet-2:#7C3AED;  /* Ospiti */
  --nl-ink:#0B1220;
}

/* Varianti pulsanti */
.btn-compact{padding:.9rem 1.1rem; border-radius:14px; font-weight:600}
.btn-icon i{margin-right:.45rem}

.btn-scanner{
  background:linear-gradient(180deg,var(--nl-blue-1),var(--nl-blue-2));
  border:0; color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.25)
}
.btn-scanner:hover{filter:brightness(1.05)}

.btn-omaggi{
  background:linear-gradient(180deg,var(--nl-amber-1),var(--nl-amber-2));
  border:0; color:var(--nl-ink); box-shadow:0 6px 18px rgba(245,158,11,.18)
}
.btn-omaggi:hover{filter:brightness(1.05)}

.btn-ospiti{
  background:linear-gradient(180deg,var(--nl-violet-1),var(--nl-violet-2));
  border:0; color:#fff; box-shadow:0 6px 18px rgba(124,58,237,.25)
}
.btn-ospiti:hover{filter:brightness(1.05)}

/* Titolo a scorrimento su una riga */
.marquee-line{
  --marquee-dur:16s;
  position:relative; overflow:hidden; white-space:nowrap;
  /* sfuma i bordi ai lati per un taglio morbido */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.marquee-line .marquee-track{
  display:inline-block; padding-right:2.4rem; will-change:transform;
  animation:nl-marquee var(--marquee-dur) linear infinite;
}
@keyframes nl-marquee{ to{ transform:translateX(-100%) } }

/* === NOTLIFE FIX — white labels on action buttons (2025‑08‑26) =========== */
.btn-omaggi, .btn-scanner, .btn-ospiti{
  color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.12);
}
.btn-omaggi i, .btn-scanner i, .btn-ospiti i{
  color:inherit !important; opacity:.95;
}
.btn-omaggi:hover, .btn-omaggi:focus,
.btn-scanner:hover, .btn-scanner:focus,
.btn-ospiti:hover, .btn-ospiti:focus{
  color:#fff !important;
}

/* === Notlife Scanner UI — 2025‑08‑26 ===================================== */
/* Pagina scanner: rendi i primari viola (per "Avvia scanner") */
.scanner-page .btn-primary,
.scanner-page .btn-start-scan{
  background: linear-gradient(135deg,#a855f7,#7c3aed) !important; /* viola */
  border-color: rgba(124,58,237,.55) !important;
  color:#fff !important;
  box-shadow: 0 8px 24px rgba(124,58,237,.35) !important;
}
.scanner-page .btn-primary:hover,
.scanner-page .btn-start-scan:hover{ filter:brightness(1.06) }