/* ═══════════════════════════════════════════════════════════════════════
   PHANTASYA CODEX — Design System
   white day style
═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg-deep:      #e0e4e7;
  --bg-surface:   #f5f7f9;
  --bg-card:      #ffffff;
  --bg-elevated:  #dce1e5;
  --bg-hover:     #edeff2;

  --main-color:         #b3251c;
  --main-color-light:   #d8382c;
  --main-color-dim:     #7a1811;
  --main-color-glow:    rgba(191,41,31,.18);

  --text-primary: #0f172a;
  --text-muted:   #475569;
  --text-dim:     #94a3b8;

  --border:       rgba(0,0,0,.20);
  --border-strong:rgba(0,0,0,.40);

  --accent-blue:  #4a7fb5;
  --accent-green: #4a9d6f;
  --accent-red:   #c94a4a;
  --accent-amber: #c97a3f;

  --font-title: 'Cinzel', Georgia, serif;
  --font-body:  'Source Sans 3', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  --shadow-card: 0 4px 12px rgba(0,0,0,.10);
  --shadow-modal:0 16px 48px rgba(0,0,0,.22);
  --shadow-main-color: 0 0 24px rgba(191,41,31,.25);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(191,41,31,.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(74,127,181,.1) 0%, transparent 50%);
  transition: background-color 0.3s ease, color 0.3s ease;
}

a { color: var(--main-color); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--main-color-light); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--main-color-dim); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg-deep); }

.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--accent-red); }
.text-sm { font-size: .85rem; }

.flash-container { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column-reverse; gap: .5rem; max-width: 320px; pointer-events: none; }
.flash { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .85rem; border-radius: var(--radius); font-size: .82rem; animation: slideInUp .2s ease; border: 1px solid transparent; box-shadow: 0 4px 16px rgba(0,0,0,.18); pointer-events: auto; }
.flash.flash-hide { animation: slideOutDown .2s ease forwards; }
.flash-success { background: rgba(74,157,111,.2); border-color: rgba(74,157,111,.4); }
.flash-danger  { background: rgba(201,74,74,.2);  border-color: rgba(201,74,74,.4); }
.flash-info    { background: rgba(74,127,181,.2); border-color: rgba(74,127,181,.4); }
.flash-warning { background: rgba(201,122,63,.2); border-color: rgba(201,122,63,.4); }
.flash-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 0 .25rem; }
.flash-close:hover { color: var(--text-primary); }
@keyframes slideInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideOutDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } }

.readonly-banner { background: rgba(201,122,63,.15); border-bottom: 1px solid rgba(201,122,63,.3); color: var(--accent-amber); font-size: .82rem; text-align: center; padding: .4rem 1rem; letter-spacing: .04em; }

.navbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; height: 52px; background: rgba(255, 255, 255, 0.98); box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); transition: background-color 0.3s ease, border-color 0.3s ease; }
.navbar-brand { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.brand-icon { color: var(--main-color); font-size: 1.1rem; }
.brand-name { font-family: var(--font-title); font-size: .9rem; font-weight: 600; color: var(--text-primary); letter-spacing: .06em; white-space: nowrap; }
.navbar-event { display: flex; align-items: center; gap: 1rem; flex: 1; overflow: hidden; }
.event-label { font-family: var(--font-title); font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-tabs { display: flex; gap: .25rem; }
.nav-tab { display: flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: var(--radius); font-size: .83rem; color: var(--text-muted); transition: all .15s; white-space: nowrap; }
.nav-tab:hover { color: var(--text-primary); background: var(--bg-elevated); }
.nav-tab.active { color: var(--main-color); background: var(--main-color-glow); }
.navbar-user { display: flex; align-items: center; gap: .75rem; margin-left: auto; }

.navbar-center {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.navbar-end {
  flex-shrink: 0;
}
.user-info { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.user-name { font-size: .85rem; font-weight: 600; }
.user-role { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; }
/* Ruoli: colori fissi per identificazione rapida (uguali su tema scuro/chiaro, solo l'opacità cambia) */
.role-superadmin { background: rgba(147,51,234,.14); color: #7e22ce; border: 1px solid rgba(147,51,234,.4); }
.role-admin      { background: rgba(147,51,234,.14); color: #7e22ce; border: 1px solid rgba(147,51,234,.4); }
.role-direttivo  { background: rgba(220,38,38,.14);  color: #b91c1c; border: 1px solid rgba(220,38,38,.4); }
.role-capo_area  { background: rgba(234,179,8,.16);  color: #a16207; border: 1px solid rgba(234,179,8,.45); }
.role-desk,
.role-organizzativo { background: rgba(37,99,235,.14);  color: #1d4ed8; border: 1px solid rgba(37,99,235,.4); }
.role-master,
.role-socio      { background: rgba(185,28,28,.1);   color: #b91c1c; border: 1px solid rgba(185,28,28,.35); }

/* ─── Select "cambia ruolo" nella gestione membri di un evento: stessa
   palette identificativa dei badge (master/desk/organizzativo), sia sulla
   tendina chiusa che sulle singole opzioni al suo interno ────────────── */
.role-select { font-weight: 600; }
.role-select.role-select-desk,
.role-select.role-select-organizzativo { background: rgba(37,99,235,.14); color: #1d4ed8; border-color: rgba(37,99,235,.4); }
.role-select.role-select-master        { background: rgba(185,28,28,.1);  color: #b91c1c; border-color: rgba(185,28,28,.35); }
.role-select option[value="desk"],
.role-select option[value="organizzativo"] { background: var(--bg-card); color: #1d4ed8; }
.role-select option[value="master"]        { background: var(--bg-card); color: #b91c1c; }
.navbar-actions { display: flex; gap: .25rem; }
.nav-link { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 1rem; color: var(--text-muted); transition: all .15s; cursor: pointer; background: transparent; border: none; }
.nav-link:hover { color: var(--text-primary); background: var(--bg-elevated); }
.superadmin-link:hover { color: var(--main-color); }
.nav-logout:hover { color: var(--accent-red); }

.main-content { padding: 1.5rem; max-width: 1300px; margin: 0 auto; }
.main-content--bookings { max-width: none; padding-left: 2rem; padding-right: 2rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.page-title { font-family: var(--font-title); font-size: 1.4rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: .5rem; letter-spacing: .04em; }
.page-title-icon { color: var(--main-color); }

.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.1rem; border: 1px solid transparent; border-radius: var(--radius); font-family: var(--font-body); font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; text-decoration: none; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--main-color); color: #ffffff; border-color: var(--main-color); }
.btn-primary:hover:not(:disabled) { background: var(--main-color-light); border-color: var(--main-color-light); color: #ffffff; box-shadow: 0 0 14px rgba(191,41,31,.35); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-elevated); }
.btn-danger { background: rgba(201,74,74,.15); color: #e07070; border-color: rgba(201,74,74,.3); }
.btn-danger:hover:not(:disabled) { background: rgba(201,74,74,.3); border-color: rgba(201,74,74,.5); }
.btn-danger-outline { background: transparent; color: #e07070; border-color: rgba(201,74,74,.4); }
.btn-danger-outline:hover:not(:disabled) { background: rgba(201,74,74,.12); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-elevated); border-color: var(--main-color); color: var(--main-color); }
.btn-success { background: rgba(90,168,110,.15); color: #6fcf87; border-color: rgba(90,168,110,.35); }
.btn-success:hover:not(:disabled) { background: rgba(90,168,110,.3); border-color: rgba(90,168,110,.55); }
.btn-sm  { padding: .35rem .8rem;  font-size: .82rem; }
.btn-xs  { padding: .2rem  .55rem; font-size: .78rem; }
.btn-full { width: 100%; justify-content: center; }
.btn-remove { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-size: .9rem; transition: all .15s; }
.btn-remove:hover { color: var(--accent-red); border-color: rgba(201,74,74,.4); }

.form-group  { display: flex; flex-direction: column; gap: .35rem; }
.form-label  { font-size: .82rem; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.form-input, .form-select, .form-textarea { background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: .9rem; padding: .5rem .75rem; width: 100%; transition: border-color .15s, box-shadow .15s; outline: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--main-color-dim); box-shadow: 0 0 0 3px var(--main-color-glow); }
.form-input::placeholder { color: var(--text-dim); }
.form-select { cursor: pointer; }
.form-select option { background: var(--bg-card); }
.form-textarea { resize: vertical; min-height: 70px; }
.form-input-sm { width: 160px; }
.form-input-mono { font-family: var(--font-mono); font-size: .85rem; }
.form-select-xs { width: auto; font-size: .78rem; padding: .2rem .4rem; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.form-section-title { font-family: var(--font-title); font-size: .8rem; letter-spacing: .08em; color: var(--main-color-dim); text-transform: uppercase; border-bottom: 1px solid var(--border); padding-bottom: .4rem; margin: 1.25rem 0 .75rem; }
.dynamic-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.dynamic-row .form-input { flex: 1; }
.dynamic-row-indent { margin-left: 1.5rem; }
.timeslot-sub-container { margin-top: .4rem; }

.player-counter { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.counter-btn { width: 34px; height: 38px; background: var(--bg-elevated); border: none; color: var(--text-primary); font-size: 1.1rem; cursor: pointer; transition: background .15s; }
.counter-btn:hover { background: var(--bg-hover); }
.counter-input { border: none !important; border-left: 1px solid var(--border) !important; border-right: 1px solid var(--border) !important; width: 56px; text-align: center; box-shadow: none !important; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; backdrop-filter: blur(4px); animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; animation: slideUp .2s ease; transition: background-color 0.3s ease; }
.modal-wide { max-width: 720px; }
.modal-sm   { max-width: 460px; }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--border); }
.modal-title { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; letter-spacing: .04em; }
.danger-title { color: var(--accent-red); }
.modal-subtitle { font-size: .82rem; color: var(--text-muted); margin-top: .2rem; }
.modal-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-size: .9rem; flex-shrink: 0; transition: all .15s; }
.modal-close:hover { color: var(--text-primary); border-color: var(--border); background: var(--bg-elevated); }
.modal-body { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.modal-footer-left  { margin-right: auto; display: flex; align-items: center; gap: .75rem; }
.modal-footer-right { display: flex; gap: .75rem; }
.conflict-banner { background: rgba(201,74,74,.15); border: 1px solid rgba(201,74,74,.35); border-radius: var(--radius-sm); color: #e07070; padding: .6rem 1rem; font-size: .85rem; }
.version-badge { font-size: .75rem; color: var(--text-dim); font-family: var(--font-mono); }
.booking-count-badge { font-size: .78rem; color: var(--text-muted); background: var(--bg-elevated); padding: 2px 8px; border-radius: 12px; border: 1px solid var(--border); }
.modal form { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 70% 50% at 30% 20%, rgba(191, 41, 31, 0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 70% 80%, rgba(74, 127, 181, 0.08) 0%, transparent 50%), var(--bg-deep); transition: background 0.3s ease; }
.login-wrapper { position: relative; width: 100%; max-width: 460px; padding: 2rem; }
.login-wrapper--wide { max-width: 800px; }
.login-ornament { position: absolute; width: 60px; height: 60px; border-color: var(--border-strong); border-style: solid; opacity: .4; }
.login-ornament.top-left     { top: 0; left: 0;  border-width: 2px 0 0 2px; }
.login-ornament.top-right    { top: 0; right: 0; border-width: 2px 2px 0 0; }
.login-ornament.bottom-left  { bottom: 0; left: 0;  border-width: 0 0 2px 2px; }
.login-ornament.bottom-right { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.login-card { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); padding: 2.5rem 2rem; box-shadow: var(--shadow-modal), var(--shadow-main-color); transition: background-color 0.3s ease, border-color 0.3s ease; }
.login-card--wide { max-width: 760px; width: 92%; }
.login-header { text-align: center; margin-bottom: 2rem; }
.login-sigil { font-size: 2rem; color: var(--main-color); display: block; margin-bottom: .75rem; text-shadow: 0 0 20px rgba(201,151,63,.5); animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.6;} }
.login-title { font-family: var(--font-title); font-size: 1.6rem; font-weight: 700; letter-spacing: .1em; color: var(--text-primary); }
.login-subtitle { font-size: .8rem; color: var(--text-muted); letter-spacing: .12em; text-transform: uppercase; margin-top: .3rem; }
.login-form { display: flex; flex-direction: column; gap: 1.25rem; }
.btn-login { padding: .7rem 1rem; font-size: .95rem; }
.btn-login .btn-icon { font-size: 1.1rem; }

.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; align-items: start; }

/* ─── Drag Mode (toggle mouse+touch, toolbar griglia) ─── */
.drag-handle { display: none; }
body.drag-mode-active .drag-handle { display: block; }
body.drag-mode-active .drag-handle { touch-action: none; }
.touch-drag-ghost {
  position: fixed; z-index: 999; pointer-events: none; opacity: .75;
  transform: scale(.85); box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.event-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s, background-color 0.3s ease; position: relative; }
.event-card-banner-wrap { border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.event-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.event-card-banner { width: 100%; height: 110px; background-size: cover; background-position: center; }
.event-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.event-header-flex { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.event-info-primary { flex: 1; min-width: 0; }
.event-logo-container { flex-shrink: 0; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; }
.event-logo { width: 100%; height: 100%; object-fit: contain; }
.event-card-header { display: flex; align-items: flex-start; gap: 1rem; }
.event-icon { font-size: 1.8rem; color: var(--main-color-dim); flex-shrink: 0; }
.event-name { font-family: var(--font-title); font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; }
.event-desc { font-size: .85rem; color: var(--text-muted); margin-top: .2rem; }
.event-card-stats { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text-muted); }
.stat { display: flex; align-items: center; gap: .3rem; }
.stat-value { font-weight: 600; color: var(--text-primary); }
.stat-sep { color: var(--text-dim); }
.event-days-preview { display: flex; flex-wrap: wrap; gap: .4rem; }
.day-chip { font-size: .75rem; padding: .2rem .6rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; color: var(--text-muted); }
.event-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: auto; }

.empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.empty-icon { font-size: 3rem; color: var(--text-dim); margin-bottom: 1rem; }
.empty-state h2 { font-family: var(--font-title); font-size: 1.2rem; margin-bottom: .5rem; }

.grid-page { display: flex; flex-direction: column; gap: 0; }
.day-tabs-bar { display: flex; align-items: center; gap: .25rem; padding: 0 .25rem; border-bottom: 1px solid var(--border); margin-bottom: 0; overflow-x: auto; }
.day-tab { padding: .65rem 1.1rem; font-size: .85rem; font-family: var(--font-body); font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; white-space: nowrap; transition: color .15s, border-color .15s; text-decoration: none; display: inline-block; line-height: 1; }
.day-tab:hover { color: var(--text-primary); }
.day-tab.active { color: var(--main-color); border-bottom-color: var(--main-color); }
.day-tab-add { color: var(--text-dim); font-size: 1.1rem; }
.day-tab-add:hover { color: var(--main-color); }

.grid-toolbar { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; background: var(--bg-surface); border-bottom: 1px solid var(--border); transition: background-color 0.3s ease; }
.toolbar-left .toolbar-label { font-family: var(--font-title); font-size: .85rem; color: var(--text-muted); letter-spacing: .04em; }
.toolbar-center { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; }
.toolbar-right { display: flex; gap: .5rem; }

/* La zoom-bar dentro il toolbar centrale non deve portarsi dietro il proprio
   "riquadro" (bordo/sfondo/padding/margine) pensato per quando stava da sola
   sopra la griglia: qui deve restare alta quanto gli altri controlli della
   toolbar, altrimenti la riga si allarga in verticale. */
.toolbar-center .grid-zoom-bar {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

.grid-container { overflow: auto; }
.grid-loading { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 4rem; color: var(--text-muted); font-size: .9rem; }
.loading-sigil { color: var(--main-color); animation: spin 2s linear infinite; }

.grid-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.grid-th-corner { background: var(--bg-surface); border: 1px solid var(--border); width: 110px; min-width: 80px; transition: background-color 0.3s ease; }
.grid-th-table { background: var(--bg-surface); border: 1px solid var(--border); padding: .5rem .75rem; font-family: var(--font-title); font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--text-muted); text-align: center; min-width: 160px; transition: background-color 0.3s ease; }
.grid-th-table.master-col { color: var(--main-color); border-top: 2px solid var(--main-color); }
.grid-td-time { background: var(--bg-surface); border: 1px solid var(--border); padding: .5rem .75rem; font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); text-align: center; vertical-align: middle; white-space: nowrap; transition: background-color 0.3s ease; }
.grid-cell { border: 1px solid var(--border); padding: 0; vertical-align: top; transition: background .1s; }

.cell-inner { padding: .5rem .65rem; min-height: 72px; display: flex; flex-direction: column; gap: .3rem; position: relative; }
.grid-cell.cell-empty .cell-inner { justify-content: center; align-items: center; }
.grid-cell.cell-empty .cell-inner:after { content: '—'; color: var(--text-dim); font-size: .9rem; }
.grid-cell.cell-filled { background: rgba(201,151,63,.04); }
.grid-cell.cell-filled:hover { background: rgba(201,151,63,.08); cursor: pointer; }
.grid-cell.cell-empty.cell-editable { cursor: pointer; }
.grid-cell.cell-empty.cell-editable:hover { background: var(--bg-elevated); }
.grid-cell.cell-empty.cell-editable .cell-inner:after { content: '+'; color: var(--text-dim); font-size: 1.2rem; }

.cell-master { font-size: .8rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-master-nick { font-weight: 400; font-style: italic; color: var(--text-muted); }
.cell-adventure { font-size: .77rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-tags { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .1rem; }
.cell-tag { font-size: .65rem; padding: 1px 5px; border-radius: 3px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.cell-tag-genre { background: var(--main-color-glow); border-color: rgba(191,41,31,0.4); color: var(--main-color-dim); }
.cell-tag-sensitive { background: rgba(201,74,74,.12); border-color: rgba(201,74,74,.25); color: #e07070; }

.cell-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; margin-top: 6px; }
.cell-players { font-size: .7rem; font-family: var(--font-mono); color: var(--text-muted); }
.cell-players-full { color: var(--accent-green); }

.structure-section { margin-bottom: 1.5rem; }
.structure-section-title { font-family: var(--font-title); font-size: .85rem; letter-spacing: .05em; color: var(--main-color-dim); margin-bottom: .75rem; border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
.structure-item { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.structure-item-name { flex: 1; font-size: .88rem; }
.structure-item-deleted { text-decoration: line-through; opacity: .4; }

/* ─── Layout Pagina Prenotazioni (Sidebar) ────────────── */
.bookings-page-layout { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1rem 0; }
.bookings-sidebar { position: sticky; top: 70px; width: auto; min-width: 220px; max-width: 460px; flex-shrink: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1rem; max-height: calc(100vh - 100px); overflow-y: auto; box-shadow: var(--shadow-card); transition: background-color 0.3s ease; }
.bookings-main { flex: 1; min-width: 0; }
.search-bar-container { margin-bottom: 1rem; }
.search-bar-container .form-input { width: 100%; font-size: 0.82rem; padding: 0.45rem 0.65rem; }
.sidebar-title { font-family: var(--font-title); font-size: 1rem; color: var(--text-primary); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-strong); letter-spacing: 0.05em; }
.sidebar-ts-section { margin-bottom: 1rem; }
.sidebar-ts-link { display: block; font-family: var(--font-title); font-size: 0.85rem; color: var(--main-color); font-weight: 600; margin-bottom: 0.3rem; transition: color 0.15s; }
.sidebar-ts-link:hover { color: var(--main-color-light); }
.sidebar-tbl-link { display: block; font-size: 0.75rem; color: var(--text-muted); padding: 0.2rem 0 0.2rem 1rem; border-left: 1px solid var(--border); margin-left: 0.25rem; transition: all 0.15s; }
.sidebar-tbl-link:hover { color: var(--text-primary); border-left-color: var(--main-color); }

/* ─── Separatori Fasce Orarie (Accordion) ─────────────────────────── */
.timeslot-group { margin-bottom: 2rem; }
.timeslot-header { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1.25rem; background: linear-gradient(90deg, rgba(179,37,28,.12), rgba(179,37,28,0) 55%), var(--bg-surface); border: 1px solid var(--border-strong); border-left: 4px solid var(--main-color); border-radius: var(--radius); cursor: pointer; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.2); transition: background 0.15s, box-shadow 0.15s; position: sticky; top: 86px; z-index: 20; }
.timeslot-header:hover { background: var(--bg-elevated); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.timeslot-title { font-family: var(--font-title); font-size: 1.1rem; font-weight: 600; color: var(--main-color-light); letter-spacing: 0.05em; }
.timeslot-day-tag { font-size: .78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-left: .6rem; padding: .15rem .5rem; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.timeslot-toggle { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }
.timeslot-content { display: flex; flex-direction: column; gap: 1.5rem; }
.timeslot-content.is-collapsed {
  display: none !important;
}
.timeslot-content.is-collapsed .bookings-split-layout {
  display: none !important;
}

/* ─── Bookings Split Layout ───────────────────────────────────────── */
.bookings-split-layout { display: flex; gap: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-card); transition: background-color 0.3s ease; }
.bookings-left-cell { width: 280px; flex-shrink: 0; border-radius: var(--radius); border: 1px solid var(--border-strong); background: rgba(191,41,31,.04); border-color: rgba(0,0,0,0.25); position: relative; }
.bookings-right-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bookings-slot-header { display: flex; align-items: center; justify-content: flex-end; padding: 0 0 .5rem 0; background: transparent; border-bottom: none; gap: .75rem; flex-wrap: wrap; }

/* ─── COESIONE ACCORDION (Effetto Folder) ─── */
.timeslot-header {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 1px dashed var(--border) !important;
  border-left: 4px solid var(--main-color) !important; 
}

.timeslot-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--main-color) !important; 
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}
.timeslot-content .bookings-split-layout {
  box-shadow: none;
  margin-bottom: 1rem;
}
.timeslot-content .bookings-split-layout:last-child {
  margin-bottom: 0;
}

.bookings-left-cell .btn-xs {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.bookings-left-cell:hover .btn-xs {
  opacity: 1;
}
.bookings-slot-title { font-family: var(--font-title); font-size: .9rem; font-weight: 600; letter-spacing: .04em; }
.bookings-slot-sub   { font-size: .78rem; color: var(--text-muted); }
.bookings-slot-actions { display: flex; gap: .4rem; align-items: center; }

/* ─── Lista Prenotazioni ──────────────────────────────────────────── */
.bookings-list { display: flex; flex-direction: column; }
.notepad-list { background-color: var(--bg-surface); background-image: repeating-linear-gradient(transparent, transparent 35px, var(--border-strong) 35px, var(--border-strong) 36px); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); margin-top: 0.5rem; transition: background-color 0.3s ease; }
.notepad-list .booking-row { height: 36px; display: flex; align-items: center; gap: 0.75rem; padding: 0 1.25rem; font-size: 0.86rem; border-bottom: none; transition: background .1s; }
.booking-row:hover { background: var(--bg-hover); }
.booking-num { font-family: var(--font-mono); font-size: .75rem; color: var(--text-dim); width: 20px; text-align: right; flex-shrink: 0; }
.booking-notes { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-donation-badge { color: var(--main-color); font-family: var(--font-mono); font-size: 0.82rem; margin-right: 0.75rem; }
.booking-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent-green); }
.check-label { font-size: 0.75rem; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 4px; }
.bookings-empty { padding: 1rem 1.25rem; font-size: .85rem; color: var(--text-muted); }

/* ─── Stili quadratini giocatori minimalisti ──────────────────────── */
.player-squares { display: flex; gap: 3px; margin-top: 4px; }
.sq-box { width: 12px; height: 12px; border-radius: 2px; cursor: pointer; transition: all 0.2s ease; border: 1px solid rgba(201,151,63, 0.3); }
.sq-box:hover { border-color: var(--main-color); }
.sq-empty { background-color: transparent; border-color: rgba(0, 0, 0, 0.3); }
.sq-filled-min { background-color: var(--text-primary); border-color: var(--text-primary); }
.sq-filled-opt { background-color: var(--main-color); border-color: var(--main-color); }
.sq-empty.is-min { border-color: rgba(0, 0, 0, 0.5); }
.sq-empty:not(.is-min) { border-color: rgba(191, 41, 31, 0.4); }

/* ─── Drag & Drop ─────────────────────────────────────────────────── */
.grid-cell.drag-source { opacity: 0.4; outline: 2px dashed var(--main-color); }
.grid-cell.drag-over { background: rgba(201, 151, 63, 0.18); outline: 2px solid var(--main-color); }
.cell-filled .cell-inner[draggable="true"] { cursor: grab; }
.cell-filled .cell-inner[draggable="true"]:active { cursor: grabbing; }

/* ─── Fix generici ────────────────────────────────────────────────── */
.status-inactive { background: rgba(139, 58, 58, 0.2); color: var(--accent-red); border: 1px solid rgba(139, 58, 58, 0.3); }
.player-count { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); }
.users-table-wrapper, .data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.data-table th { background: var(--bg-surface); padding: .6rem 1rem; text-align: left; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: .6rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.data-table tr:hover td { background: var(--bg-hover); }
.data-table-sm td, .data-table-sm th { padding: .4rem .75rem; font-size: .82rem; }

.data-table th.sortable-th { cursor: pointer; user-select: none; position: relative; padding-right: 1.4rem; }
.data-table th.sortable-th:hover { color: var(--text-primary, #ddd); }
.data-table th.sortable-th::after { content: '↕'; position: absolute; right: .5rem; opacity: .35; font-size: .8em; }
.data-table th.sortable-th.sort-asc::after { content: '↑'; opacity: 1; }
.data-table th.sortable-th.sort-desc::after { content: '↓'; opacity: 1; }
.row-disabled td { opacity: .45; }
.username-cell { font-family: var(--font-mono); font-size: .82rem; color: var(--text-muted); }
.actions-cell { white-space: nowrap; }
.inline-form { display: inline-block; }
.role-badge { font-size: .7rem; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.status-badge { font-size: .75rem; padding: 2px 8px; border-radius: 12px; }
.status-active   { background: rgba(74,157,111,.2); color: var(--accent-green); border: 1px solid rgba(74,157,111,.3); }

/* ─── Superadmin Tabs & Config ────────────────────────────────────── */
.sa-tabs { display: flex; gap: .25rem; padding: 0 .5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; }
.sa-tab { padding: .65rem 1.1rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; }
.sa-tab:hover  { color: var(--text-primary); }
.sa-tab.active { color: var(--main-color); border-bottom-color: var(--main-color); }
.sa-tab-content { animation: fadeIn .2s ease; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.section-title { font-family: var(--font-title); font-size: 1rem; font-weight: 600; letter-spacing: .04em; }
.section-subtitle { font-family: var(--font-title); font-size: .88rem; color: var(--text-muted); margin-bottom: .75rem; letter-spacing: .04em; }
.config-grid { display: flex; flex-direction: column; gap: .75rem; }
.config-row { display: flex; align-items: center; gap: 1.5rem; padding: .75rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.config-info  { flex: 1; }
.config-key   { font-family: var(--font-mono); font-size: .82rem; color: var(--text-primary); display: block; }
.config-desc  { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; display: block; }
.config-value { width: 180px; flex-shrink: 0; }
.log-time   { font-family: var(--font-mono); font-size: .78rem; white-space: nowrap; }
.log-action { font-family: var(--font-mono); font-size: .75rem; padding: 1px 6px; border-radius: 3px; background: var(--bg-elevated); color: var(--text-muted); }
.log-action-login  { color: var(--accent-green); background: rgba(74,157,111,.12); }
.log-action-slot   { color: var(--main-color-dim); background: rgba(201,151,63,.1); }
.log-action-user   { color: #7ab5e0; background: rgba(74,127,181,.12); }
.log-action-event  { color: var(--accent-amber); background: rgba(201,122,63,.12); }
.log-detail { font-size: .8rem; color: var(--text-muted); max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-ip     { font-family: var(--font-mono); font-size: .75rem; color: var(--text-dim); }
.backup-restore-section { background: var(--bg-card); border: 1px solid rgba(201,74,74,.2); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }

/* ─── FILTRI CITTA (pillole a scorrimento orizzontale) ─── */
.city-filter-bar {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin: 1rem 0 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.city-filter-bar::-webkit-scrollbar { display: none; }

.city-pill {
  padding: 0.4rem 1.1rem;
  border-radius: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.city-pill:hover { color: var(--text-primary); border-color: var(--border-strong); }
.city-pill.active { background: var(--main-color); color: #fff; border-color: var(--main-color); }
.event-card.city-hidden { display: none; }

/* Toolbar ricerca + filtro città: affiancati su desktop, impilati su mobile */
.events-toolbar { display: flex; align-items: flex-start; gap: 1.5rem; margin-top: 1.25rem; margin-bottom: .25rem; flex-wrap: wrap; }
.events-search-group { max-width: 320px; flex: 0 1 320px; margin-top: 0; }
.events-toolbar .city-filter-bar { flex: 1 1 auto; margin: .1rem 0 .5rem; min-width: 0; }

/* ─── CARD EVENTO A PROFILO (logo sovrapposto al banner) ─── */
.event-card-banner--placeholder {
  background: var(--bg-elevated);
}

.event-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: -2rem;
  padding: 0 1.25rem;
}
.event-card-top-row.no-logo { justify-content: flex-end; }

.event-profile-logo {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  border: 3px solid var(--bg-card);
  background: var(--bg-surface);
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.event-card-menu { position: relative; margin-top: 2.3rem; }
.btn-icon-only {
  padding: 0.25rem; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm);
}
.btn-icon-only:hover { background: var(--bg-hover); color: var(--text-primary); }

.dropdown-menu {
  position: absolute; top: 100%; right: 0; z-index: 20;
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-modal); min-width: 160px; display: flex; flex-direction: column;
  padding: 0.35rem 0; animation: fadeIn .15s ease;
}
.dropdown-item {
  padding: 0.6rem 1rem; text-align: left; background: transparent; border: none;
  width: 100%; font-size: 0.85rem; font-family: var(--font-body); color: var(--text-primary); cursor: pointer;
  text-decoration: none; display: block;
}
.dropdown-item:hover { background: var(--bg-hover); }
.dropdown-item.text-danger { color: var(--danger, #c94a4a); }

.event-card-body { padding: 0.5rem 1.25rem 1.25rem 1.25rem; }
.btn-full { width: 100%; justify-content: center; }

@media (max-width: 768px) {
  .event-label { display: none; }
  .main-content { padding: .75rem; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .config-row { flex-direction: column; align-items: flex-start; }
  .config-value { width: 100%; }
  .navbar { padding: 0 .75rem; }
  .brand-name { display: none; }
  .bookings-page-layout { flex-direction: column; }
  .bookings-sidebar { width: 100%; position: static; max-height: none; }
  .bookings-main { width: 100%; }
  .bookings-split-layout { flex-direction: column; }
  .bookings-left-cell { width: 100%; }
  .main-content--bookings { zoom: 0.75; padding-top: calc(1rem + 200px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FRIENDLY LAYOUT — PASS GENERALE (tag: mobile-friendly-pass-2026-08)
   Blocco aggiuntivo, non sostituisce le regole sopra. Sicuro da rimuovere
   in blocco se in futuro serve tornare indietro: cercare il tag sopra e
   il corrispondente "END mobile-friendly-pass".
═══════════════════════════════════════════════════════════════════════ */

/* Touch target minimo comodo (~44px) senza rompere i bottoni compatti esistenti */
@media (max-width: 768px) {
  html { font-size: 15px; }

  .btn { padding: .6rem 1rem; min-height: 40px; }
  .btn-sm { min-height: 34px; padding: .45rem .75rem; }
  .nav-link { min-width: 34px; min-height: 34px; justify-content: center; }
  .btn-zoom { width: 32px; height: 32px; font-size: 1.15rem; }

  /* Header di pagina: si impila invece di rompersi/tagliarsi */
  .page-header { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .page-header > div { width: 100%; }
  .page-header .btn, .page-header a.btn, .page-header button.btn { flex: 1; justify-content: center; }
  .page-title { font-size: 1.15rem; flex-wrap: wrap; }

  /* Toolbar griglia/prenotazioni: va a capo invece di schiacciarsi/overflowing */
  .grid-toolbar { flex-direction: column; align-items: stretch; gap: .6rem; }
  .toolbar-right { flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
  .toolbar-right > div[style*="display: flex"] { flex-wrap: wrap; row-gap: .5rem; margin-right: 0 !important; }

  /* Barra zoom griglia: rimossa su mobile. Lo slider arrivava comunque bloccato
     al 30% (fitZoomPct la limita già in automatico alla larghezza schermo), quindi
     su smartphone era solo ingombro inutile: la griglia si auto-adatta da sola. */
  .grid-zoom-bar { display: none !important; }

  /* Tab giorni ed eventi: scroll orizzontale con indicazione visiva del "c'è altro" */
  .day-tabs-bar { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .day-tab { scroll-snap-align: start; }

  /* Modali: quasi a tutto schermo, tastiera-friendly */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { max-width: 100%; width: 100%; max-height: 94vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-wide { max-width: 100%; }
  .modal-header, .modal-body, .modal-footer { padding-left: 1rem; padding-right: 1rem; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer-right, .modal-footer-left { width: 100%; }
  .modal-footer-right { justify-content: stretch; }
  .modal-footer-right .btn { flex: 1; justify-content: center; }

  /* Card evento: azioni più semplici da toccare */
  .event-card-actions { flex-wrap: wrap; }
  .event-card-actions .btn { flex: 1; min-width: 40%; justify-content: center; }

  /* Righe dinamiche nei modali (es. "Struttura Evento": aggiungi giorno/tavolo/fascia).
     In riga singola il pulsante finiva fuori dal bordo del modal ed era
     impossibile da premere: ora vanno a capo e il bottone è full-width. */
  .dynamic-row { flex-wrap: wrap; }
  .dynamic-row .form-input,
  .dynamic-row .form-input[style*="max-width"] { flex: 1 1 100%; max-width: 100% !important; }
  .dynamic-row .btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .navbar { gap: .5rem; padding: 0 .5rem; height: 48px; }
  .navbar-actions { gap: 0; }
  .user-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .events-grid { gap: .85rem; }
  .event-card-stats { row-gap: .25rem; }
  .modal-title { font-size: 1.05rem; }
  .day-tab { padding: .55rem .8rem; font-size: .8rem; }
  .grid-zoom-label { display: none; } /* label testuale non essenziale sui telefoni più piccoli */
  html { font-size: 13px; } /* mobile-declutter-2026-08: rimpicciolisce la GUI di base sui telefoni stretti; ora recuperabile con pinch-zoom nativo essendo stato riabilitato */
  .main-content--bookings { zoom: 0.70; padding-top: calc(1rem + 200px); }
}
/* ═══ END mobile-friendly-pass ═══════════════════════════════════════════ */


/* ─── ARCHIVIO GIOCATE (Templates) ─── */
.archive-section {
  margin: 2rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.archive-header {
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
.archive-header:hover { background: var(--bg-elevated); }
.archive-title { font-family: var(--font-title); font-size: 1.1rem; color: var(--main-color); font-weight: 600; letter-spacing: 0.05em; }
.archive-toggle-icon { color: var(--text-muted); font-size: 0.9rem; transition: transform 0.3s; }
.archive-toolbar {
  padding: 1rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
}
.archive-grid {
  padding: 1.5rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  min-height: 180px;
}
.archive-card {
  width: 240px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  cursor: grab;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.archive-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-main-color); border-color: var(--main-color); }
.archive-card:active { cursor: grabbing; }

/* ─── Turni Desk ─── */
.desk-name-line { padding: 1px 0; }
.desk-name-line.desk-name-single { font-weight: 700; color: var(--main-color); }
#deskshifts-table td.deskshift-cell:hover { background: var(--bg-hover); }
#deskshifts-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* scroll fluido su iOS/Safari */
}
.archive-card.empty-card {
  justify-content: center; align-items: center; cursor: pointer; background: rgba(201,151,63,.03); border: 1px dashed var(--main-color-dim);
}
.archive-card.empty-card:hover { background: rgba(201,151,63,.08); }
.archive-card.empty-card span { font-size: 2.5rem; color: var(--main-color-dim); font-weight: 300; }
.archive-master { font-weight: 600; font-size: .95rem; color: var(--text-primary); }
.archive-adventure { font-size: .85rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive-actions { position: absolute; top: 0.5rem; right: 0.5rem; color: var(--text-muted); opacity: 0; transition: opacity 0.2s; }
.archive-card:hover .archive-actions { opacity: 1; }
.archive-actions:hover { color: var(--accent-red); }
.archive-card .drag-handle { position: absolute; top: 0.5rem; left: 0.5rem; cursor: grab; z-index: 2; }
body.drag-mode-active .archive-card:not(.empty-card) { padding-left: 1.75rem; }
.archive-card.drag-source { opacity: 0.4; outline: 2px dashed var(--main-color); }


/* ─── TOGGLE SWITCH (Interruttore Orizzontale) ─── */
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  transition: .3s;
  border-radius: 22px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-muted);
  transition: .3s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: rgba(201,151,63,.15);
  border-color: var(--main-color);
}
input:checked + .slider:before {
  transform: translateX(16px);
  background-color: var(--main-color);
}


.modal-body-scroller {
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 8px;
}

.modal-footer-fixed {
  position: sticky;
  bottom: 0;
  background-color: var(--bg-card);
  z-index: 10;
  border-top: 1px solid var(--border);
}
/* ─── Zoom Griglia ────────────────────────────────────────────────────────── */

.grid-zoom-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  user-select: none;
}

.grid-zoom-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-right: 0.25rem;
}

.btn-zoom {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.btn-zoom:hover {
  background: var(--bg-card-hover, var(--bg-elevated));
  border-color: var(--main-color);
  color: var(--main-color);
}

.zoom-slider {
  width: 140px;
  accent-color: var(--main-color);
  cursor: pointer;
  flex-shrink: 0;
}

.grid-zoom-value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--main-color);
  min-width: 3.5ch;
  text-align: right;
}

/* Quando la tabella è scalata il container non deve tagliare */
.grid-container {
  overflow-x: auto;
  overflow-y: visible;
  touch-action: pan-x pan-y; /* pinch-to-zoom gestito da JS sulla griglia; scroll 1-dito nativo */
}

/* ─── Sidebar prenotazioni: nome master nel link tavolo ─────────────────── */
.sidebar-tbl-master {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-style: italic;
}
/* ── Bottone warning (sospensione account / revoca consenso) ── */
.btn-warning {
  background: #b8860b;
  color: #fff;
  border: 1px solid #a3760a;
}
.btn-warning:hover {
  background: #a3760a;
}

/* mobile-lock-pass-2026-08:start — rimovibile: cerca questo tag fino a ":end" più sotto,
   più il maximum-scale/user-scalable nel meta viewport di base.html */

/* Blocca il "rubber-band"/overscroll che mostra lo sfondo del sistema quando si
   swipa oltre i bordi della pagina (es. gesto "indietro" su Android/iOS) */
html, body {
  overscroll-behavior: none;
}
body {
  overflow-x: hidden;
}

/* Navbar: da sticky a fixed. "sticky" può "sganciarsi" durante bounce/scroll
   veloce su alcuni browser mobile; fixed resta ancorata sempre, senza eccezioni. */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
}
.main-content {
  padding-top: calc(1.5rem + 52px);
}
@media (max-width: 480px) {
  .main-content { padding-top: calc(.75rem + 48px); }
}
@media (min-width: 481px) and (max-width: 768px) {
  .main-content { padding-top: calc(.75rem + 52px); }
}

/* Barra zoom griglia e toolbar sticky: l'offset "top" deve tener conto della
   navbar ora fixed (prima si sommava alla sticky, ora va ricalcolato) */
.grid-zoom-bar { top: 52px; }
.day-tabs-bar { position: sticky; top: 52px; z-index: 30; background: var(--bg-deep); }
@media (max-width: 480px) {
  .grid-zoom-bar { top: 48px; }
  .day-tabs-bar { top: 48px; }
  .timeslot-header { top: 74px; }
}

/* Distinzione visiva Griglia ⇄ Prenotazioni: stesso componente .grid-toolbar,
   ora con un bordo colorato + pallino identificativo per non confonderle
   scorrendo velocemente tra le pagine su schermo piccolo */
.toolbar-grid    { border-left: 4px solid var(--accent-amber); }
.toolbar-bookings{ border-left: 4px solid var(--accent-blue); }
.toolbar-section-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: .4rem;
  vertical-align: middle;
}
.toolbar-grid .toolbar-section-dot     { background: var(--accent-amber); }
.toolbar-bookings .toolbar-section-dot { background: var(--accent-blue); }
/* mobile-lock-pass-2026-08:end */

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE DECLUTTER PASS (tag: mobile-declutter-2026-08)
   - Navbar: le icone secondarie si raggruppano in un menu "☰" sotto i 768px
   - Toolbar griglia/prenotazioni: switch avanzati + export in un cassetto
   - Zoom griglia: lo slider viene limitato via JS in grid/index.html così
     la tabella non supera mai la larghezza dello schermo (niente scroll-x)
   Rimovibile in blocco cercando questo tag fino a ":end" più sotto.
═══════════════════════════════════════════════════════════════════════ */

/* ─── Cassetto utente (avatar+ruolo+nome → dropdown) ───────────────────────
   Sostituisce il vecchio hamburger mobile-only: ora un UNICO meccanismo per
   desktop e mobile. Su desktop è un dropdown ancorato in alto a destra
   (coerente con le tab orizzontali della navbar); su mobile stesso markup,
   solo dimensioni/posizionamento adattati qui sotto. Notifiche e tema
   restano SEMPRE fuori dal cassetto (azioni frequenti, un click). */
.user-drawer { position: relative; }

.user-drawer-trigger {
  display: flex; align-items: center; gap: .5rem;
  background: none; border: none; cursor: pointer;
  padding: .25rem .4rem .25rem .25rem; border-radius: var(--radius-sm);
  color: inherit; transition: background .15s;
}
.user-drawer-trigger:hover { background: var(--bg-elevated); }

.user-avatar-frame {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
}
.user-avatar-frame img { width: 100%; height: 100%; object-fit: cover; }
.user-avatar-placeholder {
  font-size: .85rem; font-weight: 700; color: var(--text-muted);
}

.user-drawer-labels { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }

/* Backdrop invisibile: chiude il dropdown al click fuori, non oscura la
   pagina (a differenza del vecchio drawer laterale, qui è un semplice
   pannello ancorato, non serve scurire tutto lo schermo). */
.user-drawer-backdrop {
  position: fixed; inset: 0; z-index: 199; display: none;
}
.user-drawer-backdrop.is-open { display: block; }

.user-drawer-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px; background: var(--bg-card);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-modal); z-index: 200;
  padding: .4rem;
  display: none; flex-direction: column; gap: .1rem;
}
.user-drawer-panel.is-open { display: flex; }

.user-drawer-panel .nav-link {
  width: 100%; height: auto; justify-content: flex-start; gap: .75rem;
  padding: .6rem .6rem; border-radius: var(--radius-sm); font-size: .88rem;
}
.user-drawer-panel .nav-link:hover,
.user-drawer-panel .nav-link:active { background: var(--bg-elevated); }
.user-drawer-panel .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.user-drawer-panel .nav-link-label { flex: 1; text-align: left; }
.user-drawer-panel form { width: 100%; }

@media (max-width: 768px) {
  /* Su mobile il nome/ruolo occupano troppo spazio accanto alle tab: si
     mostra solo l'avatar come trigger, il pannello resta lo stesso identico
     dropdown (niente drawer laterale separato da mantenere sincronizzato). */
  .user-drawer-labels { display: none; }
  .user-drawer-trigger { padding: .25rem; }
  .user-drawer-panel { min-width: 200px; }
}

/* ─── Cassetto opzioni toolbar (griglia/prenotazioni) ─── */
.toolbar-drawer-toggle { display: none; }

@media (max-width: 768px) {
  /* Su mobile la toolbar mostra SOLO: etichetta sezione + bottone "Opzioni".
     Tutto il resto (switch avanzati, export, scambia/trascina) sta nel cassetto. */
  .grid-toolbar { flex-wrap: nowrap; }
  .toolbar-drawer-toggle {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .8rem; font-size: .82rem; font-weight: 600;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer;
  }
  .toolbar-drawer-toggle .chevron { transition: transform .15s ease; font-size: .7rem; }
  .toolbar-drawer-toggle.is-open .chevron { transform: rotate(180deg); }

  .toolbar-right { display: none !important; }
  .toolbar-right.is-open {
    display: flex !important;
    flex-direction: column; align-items: stretch;
    width: 100%; gap: .6rem;
    margin-top: .6rem; padding-top: .6rem;
    border-top: 1px dashed var(--border);
  }
  .toolbar-right.is-open > div[style*="display: flex"] {
    flex-direction: column; align-items: stretch !important; gap: .5rem !important;
    margin-right: 0 !important; padding-left: 0 !important; border-left: none !important;
  }
  .toolbar-right.is-open > div[style*="display: flex"] > div {
    justify-content: space-between !important; width: 100%;
    padding: .3rem 0; border-bottom: 1px solid var(--border);
  }
  .toolbar-right.is-open .btn { width: 100%; justify-content: center; }
}
/* mobile-declutter-2026-08:end */
/* ─── Foto profilo (pagina Il mio profilo) ─── */
.profile-pic-preview {
  width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: 2px solid var(--border-strong);
}
.profile-pic-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-pic-placeholder { font-size: 2rem; font-weight: 700; color: var(--text-muted); }

.donation-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem 1.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  margin-bottom: .75rem;
}
.donation-panel.hidden { display: none; }
.donation-panel-item { display: flex; align-items: baseline; gap: .5rem; }
.donation-panel-label { color: var(--text-muted); font-size: .82rem; }
.donation-panel-value { color: var(--main-color); font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; }
.donation-panel-value.is-loading { color: var(--text-muted); font-weight: 400; }
/* donation-totals-widget:end */

/* ─── OTTIMIZZAZIONE SPAZI GRIGLIA (desktop) ───────────────────────────────
   Scope mirato: .main-content--grid, non .main-content globale (altre pagine
   già usano il padding standard), e solo desktop (>768px, il mobile ha già
   il proprio padding-top calcolato altrove). */
@media (min-width: 769px) {
  .main-content--grid { padding-top: calc(1rem + 52px); }
  /* Bande laterali ridotte ma mai sotto ~2cm dal bordo dello schermo */
  .main-content--grid { max-width: none; padding-left: 5rem; padding-right: 5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX RISOLUZIONI INTERMEDIE — TABLET (tag: tablet-fix-2026-08)
   Tra 769px e 1024px la regola "desktop" sopra (padding 5rem) e la sidebar
   prenotazioni affiancata (nessun breakpoint prima di 768px) non hanno
   abbastanza spazio per la griglia (min-width 600px + colonne 160px) e per
   il layout a due colonne delle prenotazioni. Blocco rimovibile in blocco
   cercando il tag sopra e "END tablet-fix".
═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Griglia: il padding da 5rem per lato è pensato per schermi larghi,
     su tablet ruba spazio prezioso alla tabella */
  .main-content--grid { padding-left: 1.25rem; padding-right: 1.25rem; }
  .grid-th-table { min-width: 120px; }
  .grid-th-corner, .grid-td-time { min-width: 70px; width: 90px; }

  /* CENTRAGGIO TABELLA — flex+justify-content sul contenitore non funzionava
     perché .grid-table ha `width: 100%`: riempie sempre tutto lo spazio
     disponibile, quindi non c'è mai nulla da centrare. Qui la lasciamo
     larga il necessario (width: auto, rispetta comunque min-width: 600px
     e le colonne) e la centriamo con margin auto: quando è più stretta del
     contenitore si centra davvero, quando è più larga lo scroll orizzontale
     continua a funzionare normalmente (.grid-container resta overflow:auto). */
  .grid-table { width: auto; margin: 0 auto; }

  /* Slider zoom griglia: stessa scelta già fatta su mobile (riga ~579),
     estesa al range tablet. Scoped a .toolbar-grid così NON tocca la
     toolbar delle prenotazioni (.toolbar-bookings). */
  .toolbar-grid .grid-zoom-bar { display: none !important; }

  /* Prenotazioni: teniamo il layout orizzontale come su desktop (un tablet
     ha lo spazio, e in verticale come un telefono è scomodo da usare),
     ma rimpiccioliamo tutto col trucco zoom già usato sul mobile */
  .main-content--bookings { padding-left: 1rem; padding-right: 1rem; padding-top: calc(1rem + 165px); zoom: 0.72; }
  .bookings-sidebar { min-width: 190px; max-width: 320px; }
  /* L'indice vive dentro il blocco zoomato: max-height viene calcolato
     PRIMA che lo zoom lo rimpicciolisca, quindi a schermo risulta molto
     più corto del previsto. Dividiamo per il fattore di zoom (0.72) e
     riduciamo il margine sottratto per farlo arrivare più in basso, così
     la barra di ricerca è visibile senza scroll interno. */
  .bookings-sidebar { max-height: calc((100vh - 60px) / 0.72); }

  /* Riga prenotazione: nome utente ancora tagliato perché deve convivere
     con badge donazione + 2 checkbox etichettate + 2 pulsanti sulla stessa
     riga. Teniamo le checkbox/pulsanti (servono al volo durante il desk)
     ma nascondiamo le sole etichette testuali "Desk"/"Tavolo"/"Modifica"
     (restano come tooltip al passaggio del mouse), liberando spazio per
     il nome che è l'informazione più importante da leggere per intero. */
  /* "Desk"/"Tavolo" restano leggibili: a questa dimensione (zoom ridotto)
     c'è ancora spazio a sufficienza. Nascondiamo solo il testo di
     "Modifica" (resta l'icona matita) perché è l'azione meno frequente. */
  .booking-edit-btn .btn-text { display: none; }
  .booking-edit-btn { width: 28px; padding: 0; justify-content: center; }
  .booking-edit-btn::before { content: '✎'; font-size: .85rem; }
  .notepad-list .booking-row { gap: 0.4rem; padding: 0 .75rem; }
  .booking-donation-badge { margin-right: .4rem !important; }
}
/* ═══ END tablet-fix ══════════════════════════════════════════════════ */

/* Colonna orari fissa a sinistra durante lo scroll orizzontale della griglia */
.grid-th-corner, .grid-td-time {
  position: sticky;
  left: 0;
  z-index: 5;
  box-shadow: 2px 0 4px -2px rgba(0,0,0,.15);
}

/* Toolbar e zoom bar affiancati: la zoom-bar perde il proprio riquadro
   solo quando vive dentro la toolbar (qui), altrove resta invariata */
.toolbar-left { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.toolbar-right .grid-zoom-bar { border: none; background: transparent; padding: 0; margin: 0; }

/* Un solo bordo fra tab-giorni e toolbar invece di due, ma solo quando la
   toolbar è effettivamente presente subito sotto (altrimenti il bordo dei
   tab resta l'unico confine visivo, es. utenti in sola lettura) */
.day-tabs-bar:has(+ .grid-toolbar) { border-bottom: none; }

/* Celle più compatte */
.cell-inner { padding: .35rem .5rem; min-height: 56px; gap: .2rem; }
.grid-td-time { padding: .35rem .5rem; }
.grid-th-table { padding: .4rem .5rem; }

/* Bottone "Prenota" proporzionato al resto della cella, non un pugno
   nell'occhio rosso */
.cell-footer .btn-primary { padding: .15rem .4rem; font-size: .7rem; min-height: 24px; }

/* Switch più piccoli SOLO nella toolbar griglia — uno scope globale su
   .switch avrebbe rimpicciolito anche quello nella modale Gestione
   Partecipanti, che non c'entra con questa ottimizzazione */
.toolbar-right .switch { transform: scale(.85); transform-origin: center right; margin-left: -5px; }

/* ═── Pull-to-Refresh Indicator ═──────────────────────────────────────── */
.ptr-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transform: translateY(-100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  opacity: 0;
  pointer-events: none;
  font-size: .85rem;
  color: var(--text-muted);
}
.ptr-indicator.is-pulling {
  transition: none;
  opacity: 1;
}
.ptr-spinner {
  font-size: 1.1rem;
  display: inline-block;
  transition: transform .15s;
  color: var(--main-color);
}
.ptr-indicator.is-ready .ptr-text {
  color: var(--main-color);
  font-weight: 600;
}
@media (max-width: 480px) {
  .ptr-indicator { height: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FIXES 2026-08-14 — Logout mobile + Sidebar Accordion + Anchor link fix
═══════════════════════════════════════════════════════════════════════ */

/* 1. Logout form nascosto su mobile (lo style inline display:inline batteva il CSS) */
@media (max-width: 768px) {
  .navbar-actions > form { display: none !important; }
}

/* 2. Sidebar Index Accordion */
.sidebar-index-content {
  transition: max-height .28s ease, opacity .22s ease, margin .2s ease;
  max-height: 4000px;
  opacity: 1;
  overflow: hidden;
}
.sidebar-index-content.is-collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0 !important;
}
.sidebar-title-toggle:hover {
  color: var(--main-color);
}
.sidebar-title-toggle:active {
  opacity: 0.75;
}


/* ═── Sidebar Indice: Colonne verticali + Accordion ═────────────────── */
.sidebar-ts-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding-right: 0.25rem;
}
.sidebar-ts-chevron {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform .15s ease;
  margin-left: 0.5rem;
}
.sidebar-ts-link.is-collapsed .sidebar-ts-chevron {
  transform: rotate(-90deg);
}

/* Desktop: 3 colonne, riempimento verticale (prima colonna piena, poi la seconda, poi la terza) */
.sidebar-tbl-grid {
  column-count: 3;
  column-gap: 0.6rem;
  column-rule: 1px solid var(--border);
  margin-top: 0.3rem;
  transition: max-height .25s ease, opacity .2s ease;
}
.sidebar-tbl-grid.is-collapsed {
  display: none;
}

.sidebar-tbl-grid .sidebar-tbl-link {
  display: block;
  padding: 0.05rem 0;
  border-left: none;
  margin-left: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  break-inside: avoid;
  line-height: 1.35;
}
.sidebar-tbl-grid .sidebar-tbl-link:hover {
  color: var(--main-color);
}

/* Mobile: 2 colonne, stesso riempimento verticale */
@media (max-width: 768px) {
  .sidebar-tbl-grid {
    column-count: 2;
    column-gap: 0.5rem;
    column-rule: 1px solid var(--border);
  }
  .sidebar-tbl-grid .sidebar-tbl-link {
    font-size: 0.7rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   STICKY SEARCH + BACK-TO-TOP (tag: sticky-search-backtotop-2026-08)
   Sia .mobile-search-sticky che .back-to-top-btn sono creati da JS e
   appesi a document.body — completamente isolati dal layout esistente,
   nessuna interferenza col resto del CSS. Attivi su desktop e mobile.
═══════════════════════════════════════════════════════════════════════ */

/* Barra di ricerca sticky: fuori schermo finché non serve */
.mobile-search-sticky {
  zoom: 1; /* stesso motivo spiegato su .back-to-top-btn qui sotto */
  /* A riposo: altezza zero, overflow hidden -> completamente invisibile,
     nessuna parte del box sconfina sopra o dietro la navbar (a differenza
     di un translateY(-100%), che sposta il box fuori dalla sua posizione
     naturale e lo fa comparire/sovrapporsi alla zona navbar).
     Quando attivo: max-height cresce, il contenuto "emerge" verso il
     basso, da sotto la navbar, mai da sopra. */
  position: fixed;
  top: 52px; /* subito sotto la navbar fixed (desktop) */
  left: 0;
  right: 0;
  z-index: 150;
  padding: 0 1rem;
  max-height: 0;
  overflow: hidden;
  background: rgba(245, 247, 249, 0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: max-height .22s ease, padding .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.mobile-search-sticky.is-visible {
  max-height: 70px;
  padding: .6rem 1rem;
  border-bottom-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.mobile-search-sticky input {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: block;
  font-size: .85rem;
  padding: .5rem .75rem;
}

/* Su mobile la navbar torna "relative" (vedi FIX NAVBAR MOBILE più sotto):
   non c'è più una navbar fixed da scavalcare, quindi la barra sticky
   parte da top:0 invece che top:52px. */
@media (max-width: 768px) {
  .mobile-search-sticky { top: 0; }
}

/* Bottone circolare "torna su": sempre in basso a destra, desktop e mobile */
.back-to-top-btn {
  /* zoom:1 esplicito: le pagine che usano `zoom` sul contenuto (vedi
     .main-content--bookings su mobile/tablet) possono far "derivare" gli
     elementi position:fixed altrove nel documento in alcuni browser
     Chromium, anche se questo bottone è appeso a document.body e non è
     mai un discendente del blocco zoomato. Il reset esplicito evita che
     erediti quell'effetto. */
  zoom: 1;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 150;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--main-color);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.back-to-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top-btn:hover {
  background: var(--main-color-light);
}
@media (max-width: 480px) {
  .back-to-top-btn {
    width: 42px;
    height: 42px;
    bottom: 1rem;
    right: 1rem;
    font-size: 1.1rem;
  }
}
/* sticky-search-backtotop-2026-08:end */

/* ═══════════════════════════════════════════════════════════════════════
   FIX NAVBAR MOBILE — niente più sovrapposizioni
   Su smartphone la navbar esce dal flusso fixed e torna nel layout
   normale del documento, così non copre mai i contenuti sottostanti
   (es. i tab dei giorni, prima parzialmente coperti).
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .navbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
  .main-content,
  .main-content--bookings,
  .main-content--grid {
    padding-top: .75rem !important;
  }
}
@media (max-width: 480px) {
  .main-content,
  .main-content--bookings,
  .main-content--grid {
    padding-top: .75rem !important;
  }
}

/* ─── Tag colore cella (segnalazioni desk) ────────────────────────────────── */
.cell-tag-tint {
  position: absolute; inset: 0;
  border-radius: inherit;
  /* Solo decorativo: ridà la sfumatura piena e morbida com'era in origine.
     L'interazione (hover/click) è gestita da .cell-tag-glow-hit, non da questo. */
  pointer-events: none;
  z-index: 1;
}
.cell-tag-glow-hit {
  position: absolute; inset: 0;
  border-radius: inherit;
  /* Zona cliccabile/hover ritagliata a ellisse sull'angolo colorato, per
     seguire l'estensione reale della sfumatura (radiale dall'angolo in alto
     a destra) invece di un rettangolo/triangolo rigido: il resto della
     cella — bottoni, checkbox, ecc. — resta sempre raggiungibile. */
  clip-path: ellipse(68% 68% at 100% 0%);
  pointer-events: auto;
  z-index: 2;
}
.cell-tag-corner {
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent currentColor transparent transparent;
  cursor: pointer;
  z-index: 5;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.5));
}
.cell-tag-corner-empty {
  border-color: transparent rgba(255,255,255,.14) transparent transparent;
}
.cell-tag-corner-empty:hover {
  border-color: transparent rgba(255,255,255,.35) transparent transparent;
}
.cell-tag-cancelled-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,20,20,.72);
  border: 2px solid;
  border-radius: inherit;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 4;
  pointer-events: auto;
}
.cell-tag-note-hover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: rgba(15,15,15,.88);
  border: 2px solid;
  border-radius: inherit;
  padding: 6px;
  font-size: .72rem;
  line-height: 1.3;
  color: #fff;
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
  z-index: 6;
}
/* L'anteprima nota si attiva solo passando sul tag colorato stesso
   (tint ritagliato sull'angolo, o il cornerino), non su tutta la cella:
   così non copre/preclude bottoni e checkbox sottostanti. */
.cell-tag-tint:hover ~ .cell-tag-note-hover,
.cell-tag-glow-hit:hover ~ .cell-tag-note-hover,
.cell-tag-corner:hover ~ .cell-tag-note-hover,
.grid-cell.show-note-hover .cell-tag-note-hover,
.bookings-left-cell.show-note-hover .cell-tag-note-hover {
  opacity: 1; visibility: visible;
}

/* ─── Modale "Segnalazione cella" (tag colore/stato) ──────────────────────── */
.celltag-form { display: flex; flex-direction: column; gap: 14px; }
.celltag-status-toggle { display: flex; gap: 0; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.celltag-status-btn {
  flex: 1; padding: .6rem .5rem; font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; text-align: center; cursor: pointer;
  background: var(--bg-deep); color: var(--text-muted); border: none;
  border-right: 1px solid var(--border-strong); transition: background .15s, color .15s;
}
.celltag-status-btn:last-child { border-right: none; }
.celltag-status-btn:hover { background: var(--bg-elevated); }
.celltag-status-partito.is-active   { background: var(--accent-green); color: #fff; }
.celltag-status-cancelled.is-active { background: var(--accent-red);   color: #fff; }
.celltag-swatch-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.celltag-swatch {
  min-width: 34px; height: 34px; padding: 0 .5rem; border-radius: var(--radius-sm);
  border: 2px solid transparent; cursor: pointer; color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; transition: border-color .15s, transform .1s;
}
.celltag-swatch:hover { transform: translateY(-1px); }
.celltag-swatch.is-active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 3px var(--text-primary); }
.celltag-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-muted); margin-top: .5rem; cursor: pointer; }
.celltag-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ─── Notifiche (campanella navbar) ─────────────────────────────────────── */
.notif-badge {
  position: absolute; top: -2px; right: -4px;
  background: #e05252; color: #fff; font-size: .62rem; font-weight: 700;
  line-height: 1; min-width: 15px; height: 15px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 320px; max-width: 90vw;
  max-height: 420px; overflow-y: auto; background: var(--surface, #fff);
  border: 1px solid var(--border, #ddd); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15); z-index: 200;
}
.notif-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .8rem; border-bottom: 1px solid var(--border, #ddd); font-weight: 600;
}
.notif-panel-header > div { display: flex; gap: .6rem; }
.notif-panel-header button {
  background: none; border: none; color: var(--accent, #5288e0); cursor: pointer; font-size: .78rem;
}
.notif-list { display: flex; flex-direction: column; }
.notif-item {
  padding: .6rem .8rem; border-bottom: 1px solid var(--border, #eee);
  font-size: .85rem; cursor: pointer;
}
.notif-item.unread { background: rgba(82,136,224,.08); font-weight: 600; }
.notif-item-time { display: block; font-size: .72rem; opacity: .6; margin-top: 2px; font-weight: 400; }
.notif-empty { padding: 1rem; text-align: center; opacity: .6; font-size: .85rem; }
.bookings-left-cell svg[title="Avvisa un master"]:hover { opacity: 1 !important; }
/* ─── Avatar / foto profilo ────────────────────────────────────────────── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--bg-surface, #eee); color: var(--text-muted, #777);
  font-weight: 600; overflow: hidden;
}
.avatar-sm { width: 28px; height: 28px; font-size: .75rem; }
.avatar-xs { width: 20px; height: 20px; font-size: .65rem; }
.avatar-md { width: 40px; height: 40px; font-size: .95rem; }
.avatar-placeholder {
  border: 1px solid var(--border, #ddd);
}

/* ─── Export PDF unificato (griglia + prenotazioni), stampa nativa ────────
   #pdf-export-root viene costruito e riempito solo al momento dell'export
   (vedi grid.js: exportUnifiedPdf). Fuori dalla stampa resta invisibile;
   durante la stampa, .printing-pdf-export nasconde tutto il resto della
   pagina e mostra solo questo contenitore (trucco "stampa solo elemento"). */
#pdf-export-root { display: none; }

body.printing-pdf-export * { visibility: hidden; }
body.printing-pdf-export #pdf-export-root,
body.printing-pdf-export #pdf-export-root * { visibility: visible; }
body.printing-pdf-export #pdf-export-root {
  display: block;
  position: absolute; top: 0; left: 0; width: 100%;
  background: #ffffff; color: #111111;
  font-family: var(--font-body);
  /* Molti browser, per default, NON stampano sfondi/colori a meno che
     l'utente non spunti "Grafica di sfondo" nella finestra di stampa.
     Questa proprietà forza la stampa di sfondi e colori a prescindere
     da quell'opzione. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color-adjust: exact;
}

.print-page-title {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 4px;
  color: #b3251c;
  border-bottom: 2px solid #b3251c;
}

/* Ogni giorno (griglia o prenotazioni) inizia sempre su una pagina nuova. */
.print-grid-page,
.print-bookings-section { break-before: page; }
.print-grid-page:first-child { break-before: auto; }

/* Riquadro a dimensione fissa (calcolata via JS) dentro cui la tabella
   griglia viene ridotta in scala per entrare SEMPRE in una singola pagina,
   invece di essere tagliata su più fogli. */
.print-grid-scalebox { overflow: hidden; }
.print-grid-table {
  border-collapse: collapse;
  white-space: nowrap;
  font-size: 11px;
  color: #111111;
}
.print-grid-table th, .print-grid-table td {
  border: 1px solid #c9938d;
  padding: 3px 5px;
  vertical-align: top;
  white-space: normal;
}
.print-grid-table thead th { background: #b3251c; color: #ffffff; font-weight: 700; }
.print-grid-table .print-ts-label { background: #f3e4e2; font-weight: 600; white-space: nowrap; color: #7a1811; }

/* Intestazione di fascia oraria, sopra il gruppo di schede-tavolo. */
.print-ts-heading {
  background: #b3251c; color: #ffffff;
  font-size: 13px; font-weight: 700;
  padding: 4px 8px; margin: 10px 0 6px 0;
  break-after: avoid;
  break-inside: avoid;
}
.print-bookings-section .print-ts-heading:first-of-type { margin-top: 0; }

/* Scheda per tavolo: a sinistra le info della giocata (come nel riquadro a
   schermo in Prenotazioni), a destra le righe scrivibili con i posti. */
.print-booking-card {
  display: flex;
  align-items: stretch;
  border: 1px solid #c9938d;
  margin-bottom: 8px;
  break-inside: avoid;
  font-size: 12px;
  color: #111111;
}
.print-booking-info {
  flex: 0 0 26%;
  max-width: 26%;
  padding: 6px 8px;
  background: #f3e4e2;
  border-right: 1px solid #c9938d;
}
.print-booking-info > div { margin-bottom: 2px; }
.print-booking-table-name {
  font-family: var(--font-title);
  color: #7a1811;
  font-weight: 700;
  font-size: 13px;
}
.print-booking-master { font-weight: 600; }
.print-booking-players { margin-top: 4px; font-weight: 600; }

.print-booking-rows {
  flex: 1 1 auto;
  border-collapse: collapse;
  width: 100%;
}
.print-booking-rows th, .print-booking-rows td {
  border: 1px solid #c9938d;
  padding: 3px 6px;
  text-align: left;
}
.print-booking-rows thead th { background: #f3e4e2; color: #7a1811; font-weight: 700; }
.print-booking-rows .print-booking-num { width: 18px; }
.print-booking-rows tbody tr:nth-child(even) { background: #faf5f4; }
/* Righe senza prenotazione: più alte e con una riga tratteggiata dove
   scrivere a mano, per poter continuare a lavorare offline su carta. */
.print-booking-rows tbody tr.print-booking-blank td { height: 22px; }
.print-booking-rows tbody tr.print-booking-blank td:nth-child(2) {
  border-bottom: 1px dashed #b3251c;
}

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .print-bookings-section { page: pdf-bookings-page; }
  @page pdf-bookings-page { size: A4 portrait; margin: 12mm; }

  /* Alcuni browser applicano color-adjust solo se dichiarato dentro @media
     print; lo ripetiamo qui per sicurezza su html/body. */
  html, body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }
}