/* ============================================================
   SponsorFlow – Custom CSS (Bootstrap 5 override)
   ============================================================ */

/* ── VARIABILI ──────────────────────────────────────────────── */
:root {
  --sf-bg:        #0d0d1a;
  --sf-surface:   #13131f;
  --sf-surface2:  #1a1a2e;
  --sf-border:    #2a2a3e;
  --sf-text:      #e2e8f0;
  --sf-muted:     #64748b;
  --sf-purple:    #8b5cf6;
  --sf-accent:    #3b82f6;
  --bs-body-bg:         var(--sf-bg);
  --bs-body-color:      var(--sf-text);
  --bs-border-color:    var(--sf-border);
}

/* ── BASE ────────────────────────────────────────────────────── */
body {
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  min-height: 100vh;
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sf-surface); }
::-webkit-scrollbar-thumb { background: var(--sf-border); border-radius: 3px; }

/* ── NAVBAR ─────────────────────────────────────────────────── */
.navbar {
  background: var(--sf-surface) !important;
  border-bottom: 1px solid var(--sf-border);
  padding: .75rem 1.5rem;
}
.navbar-brand {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.5px;
  color: #f1f5f9 !important;
}
.nav-link {
  color: var(--sf-muted) !important;
  font-weight: 600;
  font-size: .875rem;
  border-radius: .5rem;
  padding: .4rem .85rem !important;
  transition: all .2s;
}
.nav-link:hover { color: var(--sf-text) !important; background: var(--sf-surface2); }
.nav-link.active {
  color: var(--bs-primary) !important;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.25);
}

/* ── CARD BASE ──────────────────────────────────────────────── */
.card {
  background: var(--sf-surface) !important;
  border: 1.5px solid var(--sf-border) !important;
  border-radius: .85rem !important;
  color: var(--sf-text);
}

/* ── CARD EVENTO ────────────────────────────────────────────── */
.card-evento {
  transition: border-color .2s, transform .15s;
  overflow: hidden;
  position: relative;
}
.card-evento:hover {
  border-color: var(--sf-accent) !important;
  transform: translateY(-2px);
}
.progress-top {
  height: 3px;
  background: var(--sf-border);
  position: absolute;
  top: 0; left: 0; right: 0;
}
.progress-top-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--sf-purple), var(--sf-accent));
  transition: width .4s ease;
}
.event-icon {
  width: 44px; height: 44px;
  border-radius: .75rem;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.1rem;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── STAT MINI (nelle card evento) ─────────────────────────── */
.stat-mini {
  background: var(--sf-surface2);
  border-radius: .6rem;
  padding: .5rem .75rem;
  text-align: center;
  border: 1px solid var(--sf-border);
}
.stat-val { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.stat-lbl { font-size: .68rem; color: var(--sf-muted); margin-top: 2px; }

/* ── STAT CARD (dettaglio evento) ───────────────────────────── */
.stat-card {
  background: var(--sf-surface);
  border: 1.5px solid var(--sf-border);
  border-radius: .85rem;
  padding: 1rem .75rem;
}

/* ── TABELLA ────────────────────────────────────────────────── */
.table {
  color: var(--sf-text) !important;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--sf-surface2);
  --bs-table-hover-bg: rgba(255,255,255,.03);
}
.table thead th {
  color: #94a3b8;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-color: var(--sf-border) !important;
}
.table td { border-color: var(--sf-border) !important; vertical-align: middle; }
.table-dark { --bs-table-bg: var(--sf-surface2) !important; }

/* ── FORM CONTROLS ──────────────────────────────────────────── */
.form-control, .form-select {
  background: #0a0a14 !important;
  border-color: var(--sf-border) !important;
  color: var(--sf-text) !important;
  border-radius: .5rem !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15) !important;
}
.form-control::placeholder { color: var(--sf-muted) !important; }
.form-select option { background: #1a1a2e; }
.form-label { font-size: .75rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; }
.form-check-input {
  background-color: var(--sf-surface2) !important;
  border-color: var(--sf-border) !important;
}
.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.input-group-text {
  background: var(--sf-surface2) !important;
  border-color: var(--sf-border) !important;
  color: var(--sf-muted) !important;
}

/* ── MODAL ──────────────────────────────────────────────────── */
.modal-content {
  background: var(--sf-surface) !important;
  border: 1.5px solid var(--sf-border) !important;
  border-radius: 1rem !important;
  color: var(--sf-text);
}
.modal-header {
  border-bottom-color: var(--sf-border) !important;
  padding: 1.1rem 1.5rem;
}
.modal-footer { border-top-color: var(--sf-border) !important; }
.modal-backdrop { backdrop-filter: blur(4px); }
.btn-close { filter: invert(1) brightness(.7); }

/* ── SEZIONI FORM MODAL ──────────────────────────────────────── */
.form-section {
  background: #0a0a14;
  border: 1px solid var(--sf-border);
  border-radius: .75rem;
  padding: 1rem 1.1rem;
}
.form-section-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--sf-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .85rem;
}

/* ── DROPDOWN ───────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--sf-surface2) !important;
  border-color: var(--sf-border) !important;
  border-radius: .65rem !important;
}
.dropdown-item { color: var(--sf-text) !important; font-size: .875rem; }
.dropdown-item:hover { background: var(--sf-border) !important; }
.dropdown-divider { border-color: var(--sf-border) !important; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--sf-muted);
  padding: .25rem .4rem;
  border-radius: .4rem;
}
.btn-ghost:hover { background: var(--sf-surface2); color: var(--sf-text); }
.toggle-btn { border: none !important; background: transparent !important; line-height: 1; }
.toggle-btn:focus { box-shadow: none !important; }

/* ── BADGE CUSTOM ───────────────────────────────────────────── */
.text-purple { color: var(--sf-purple) !important; }
.bg-purple   { background-color: var(--sf-purple) !important; }
.border-purple { border-color: var(--sf-purple) !important; }

/* ── LIBRETTO BUTTONS ───────────────────────────────────────── */
.libretto-btn {
  border: 2px solid var(--sf-border);
  background: transparent;
  color: var(--sf-muted);
  border-radius: .6rem;
  padding: .5rem .6rem;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  line-height: 1.3;
}
.libretto-btn .lib-icon { font-size: 1.3rem; display: block; margin-bottom: 3px; }
.libretto-btn.active-pagina   { border-color: #f59e0b; background: rgba(245,158,11,.12); color: #f59e0b; }
.libretto-btn.active-mezza    { border-color: #3b82f6; background: rgba(59,130,246,.12);  color: #3b82f6; }
.libretto-btn.active-un-terzo { border-color: #8b5cf6; background: rgba(139,92,246,.12);  color: #8b5cf6; }

/* ── GLOBAL LOADER ──────────────────────────────────────────── */
#global-loader {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}

/* ── TOAST ──────────────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 10000; display: flex; flex-direction: column; gap: .5rem;
}
.toast-msg {
  background: var(--sf-surface2);
  border: 1.5px solid var(--sf-border);
  border-radius: .65rem;
  padding: .7rem 1.1rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--sf-text);
  opacity: 0;
  transform: translateY(8px);
  transition: all .3s ease;
  max-width: 340px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.toast-msg.show { opacity: 1; transform: translateY(0); }
.toast-success { border-left: 3px solid #10b981; }
.toast-danger  { border-left: 3px solid #f43f5e; }

/* ── LOGO ICON ──────────────────────────────────────────────── */
.brand-icon {
  width: 32px; height: 32px;
  border-radius: .55rem;
  background: linear-gradient(135deg, var(--sf-purple), var(--sf-accent));
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: #fff;
}

/* ── READONLY FIELDS ─────────────────────────────────────────── */
.field-readonly { opacity:.45; pointer-events:none; user-select:none; }
.readonly-badge { font-size:.6rem; font-weight:700; color:var(--sf-muted); border:1px solid var(--sf-border); border-radius:.3rem; padding:1px 5px; vertical-align:middle; margin-left:4px; text-transform:uppercase; letter-spacing:.05em; }
.btn-ro { opacity:.35 !important; pointer-events:none !important; }
/* ── ADMIN ────────────────────────────────────────────────────── */
.perm-group { background:var(--sf-surface2); border:1px solid var(--sf-border); border-radius:.65rem; padding:.85rem 1rem; }
.perm-group-title { font-size:.68rem; font-weight:700; color:var(--sf-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.6rem; }
.user-card { border-left:3px solid var(--sf-border); transition:border-color .2s; }
.user-card:hover { border-left-color:var(--sf-accent); }
.user-card.admin-card { border-left-color:var(--sf-purple); }
/* ── PAGAMENTI ───────────────────────────────────────────────── */
.pag-row { border-bottom:1px solid var(--sf-border); padding:.5rem 0; display:flex; align-items:center; gap:.75rem; }
.pag-row:last-child { border-bottom:none; }
/* ── FOOTER ──────────────────────────────────────────────────── */
.app-footer { border-top:1px solid var(--sf-border); padding:.75rem 1rem; margin-top:2rem; color:#f1f5f9; font-size:.8rem; }