:root {
  --bg: #0e0d0b;
  --panel: #171511;
  --panel-2: #201d17;
  --panel-3: #29251d;
  --text: #f6f1e7;
  --muted: #aaa395;
  --gold: #d7a640;
  --gold-2: #efc665;
  --line: rgba(255,255,255,.09);
  --green: #4cc879;
  --red: #ee6b6b;
  --yellow: #e9bf4a;
  --blue: #67a7e8;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f7f3ea;
  --panel: #fffdf8;
  --panel-2: #f2ede2;
  --panel-3: #e9e1d2;
  --text: #211d17;
  --muted: #70695e;
  --gold: #b67b16;
  --gold-2: #8f5f0d;
  --line: rgba(48,39,25,.14);
  --green: #187a3e;
  --red: #b83838;
  --yellow: #9c6c00;
  --blue: #286fa8;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top right, rgba(215,166,64,.12), transparent 28rem), var(--bg); color: var(--text); }
body { min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.app-shell { min-height: 100vh; padding-bottom: 84px; }
.topbar { position: sticky; top: 0; z-index: 20; display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 16px; background: rgba(14,13,11,.88); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.brand img { width:44px; height:44px; border-radius:13px; object-fit:contain; background:transparent; }
.brand h1 { font-size: 18px; margin:0; }
.brand small { color:var(--muted); display:block; margin-top:2px; }
.role-switch { max-width: 165px; background:var(--panel-2); color:var(--text); border:1px solid var(--line); padding:9px 10px; border-radius:12px; }
main { width:min(1050px, 100%); margin:0 auto; padding:20px 16px; }
.hero { display:grid; gap:12px; margin-bottom:18px; }
.eyebrow { color:var(--gold-2); font-size:12px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; }
h2 { margin:0; font-size:30px; letter-spacing:-.03em; }
h3 { margin:0; }
.muted { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.card { grid-column:span 12; background:linear-gradient(180deg, rgba(255,255,255,.035), transparent), var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:0 12px 32px rgba(0,0,0,.14); }
.card.gold { border-color: rgba(215,166,64,.32); background:linear-gradient(135deg, rgba(215,166,64,.11), transparent 55%), var(--panel); }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.event-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.event-icon { font-size:30px; }
.event-meta { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; color:var(--muted); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:var(--panel-3); border:1px solid var(--line); font-size:13px; }
.attendance-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:14px; }
.att-btn { border:1px solid var(--line); background:var(--panel-2); color:var(--text); min-height:54px; border-radius:14px; padding:10px; font-weight:750; }
.att-btn.active { outline:2px solid currentColor; outline-offset:1px; }
.att-btn.present { color:var(--green); }.att-btn.non_playing { color:var(--blue); }.att-btn.absent { color:var(--red); }.att-btn.maybe { color:var(--yellow); }
.attendance-list { display:grid; gap:8px; margin-top:12px; }
.person-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.person { display:flex; align-items:center; gap:10px; min-width:0; }
.avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg,var(--panel-3),#111); border:1px solid var(--line); font-weight:850; color:var(--gold-2); }
.badge { white-space:nowrap; border-radius:999px; padding:6px 9px; font-size:12px; font-weight:800; background:var(--panel-3); border:1px solid var(--line); }
.badge.present { color:var(--green); }.badge.non_playing { color:var(--blue); }.badge.absent { color:var(--red); }.badge.maybe { color:var(--yellow); }.badge.none { color:var(--muted); }
.bottom-nav { position:fixed; z-index:30; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(5,1fr); padding:8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background:rgba(18,16,13,.95); backdrop-filter:blur(18px); border-top:1px solid var(--line); }
.nav-btn { background:none; border:0; color:var(--muted); padding:8px 4px; border-radius:12px; font-size:11px; display:grid; gap:2px; place-items:center; }
.nav-btn span { font-size:19px; }.nav-btn.active { color:var(--gold-2); background:rgba(215,166,64,.08); }
.event-list { display:grid; gap:10px; }
.event-row { display:flex; align-items:center; gap:12px; padding:12px; background:var(--panel-2); border:1px solid var(--line); border-radius:14px; }
.datebox { width:56px; height:58px; border-radius:13px; background:#111; border:1px solid var(--line); display:grid; place-items:center; align-content:center; }
.datebox strong { font-size:20px; }.datebox small { color:var(--gold-2); font-weight:800; text-transform:uppercase; }
.grow { flex:1; min-width:0; }
.btn { border:1px solid var(--line); background:var(--panel-2); color:var(--text); border-radius:12px; padding:10px 13px; font-weight:750; }
.btn.primary { background:var(--gold); color:#17120a; border-color:transparent; }.btn.danger { color:var(--red); }.btn.ghost { background:transparent; }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; }
.kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.kpi { background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:12px; }
.kpi strong { display:block; font-size:24px; }.kpi small { color:var(--muted); }
.rank-row { display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }
.rank-num { color:var(--muted); font-weight:850; }.rank-pct { font-size:18px; font-weight:900; color:var(--gold-2); }
.tabs { display:flex; gap:8px; overflow:auto; margin-bottom:12px; padding-bottom:2px; }
.tab { white-space:nowrap; border:1px solid var(--line); border-radius:999px; background:var(--panel-2); color:var(--muted); padding:8px 12px; }.tab.active { color:#17120a; background:var(--gold); border-color:var(--gold); font-weight:800; }
.form-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.field { display:grid; gap:6px; }.field label { color:var(--muted); font-size:12px; font-weight:700; }.field input,.field select { width:100%; background:#11100d; border:1px solid var(--line); color:var(--text); border-radius:11px; padding:10px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:14px; }
table { width:100%; border-collapse:collapse; min-width:650px; } th,td { padding:11px 12px; text-align:left; border-bottom:1px solid var(--line); } th { color:var(--muted); font-size:12px; background:#12110e; position:sticky; top:0; } td { font-size:14px; }
.notice { padding:12px; border-radius:13px; background:rgba(215,166,64,.08); border:1px solid rgba(215,166,64,.22); color:#e8d7ae; }
.modal-backdrop { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.72); display:grid; place-items:end center; }
.modal { width:min(720px,100%); max-height:90vh; overflow:auto; border-radius:24px 24px 0 0; padding:18px; background:var(--panel); border:1px solid var(--line); }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.icon-btn { width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--text); }
.empty { text-align:center; color:var(--muted); padding:28px 10px; }
.small { font-size:12px; }.right { text-align:right; }

.upcoming-section { overflow:hidden; }
.upcoming-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.upcoming-card { display:grid; gap:9px; min-width:0; padding:13px; border:1px solid var(--line); border-radius:15px; background:var(--panel-2); }
.upcoming-card.next { border-color:rgba(215,166,64,.38); background:linear-gradient(145deg,rgba(215,166,64,.09),transparent 60%),var(--panel-2); }
.upcoming-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.upcoming-top strong { line-height:1.25; }
.location-line { min-height:17px; }
.attendance-summary { display:flex; flex-wrap:wrap; gap:6px; padding:7px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.attendance-mini-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.att-mini { min-height:38px; border:1px solid var(--line); border-radius:10px; background:#11100d; font-weight:900; }
.att-mini.present { color:var(--green); }.att-mini.non_playing { color:var(--blue); }.att-mini.absent { color:var(--red); }.att-mini.maybe { color:var(--yellow); }
.att-mini.active { outline:2px solid currentColor; outline-offset:1px; background:var(--panel-3); }
.event-detail-btn { width:100%; padding:8px 10px; }

@media(min-width:700px){
  .card.half { grid-column:span 6; }
  .card.third { grid-column:span 4; }
  .attendance-actions { grid-template-columns:repeat(4,1fr); }
  .form-grid { grid-template-columns:repeat(2,1fr); }
  .upcoming-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .upcoming-card { padding:12px; }
  .modal-backdrop { place-items:center; padding:20px; }
  .modal { border-radius:24px; }
}

/* V1.2 - gestione multi-ruolo */
.user-role-list { display:grid; gap:10px; }
.user-role-row { display:grid; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.user-role-person { min-width:0; }
.role-checks { display:flex; flex-wrap:wrap; gap:7px; }
.role-check { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid var(--line); border-radius:999px; background:var(--panel-2); font-size:12px; }
.role-check input { accent-color:var(--gold); }
@media(min-width:800px){ .user-role-row { grid-template-columns:minmax(180px,1fr) 2fr; align-items:center; } }

/* V1.4 - anagrafica completa, certificati, accessorio personalizzato e note */
textarea { font: inherit; }
.field textarea { width:100%; resize:vertical; background:#11100d; border:1px solid var(--line); color:var(--text); border-radius:11px; padding:10px; }
.member-note { margin-top:4px; max-width:620px; color:var(--gold-2); font-size:12px; line-height:1.35; }
.member-note span { color:var(--muted); white-space:nowrap; }
.notes-list { display:grid; gap:0; }
.note-row { display:flex; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--line); }
.note-row:first-child { border-top:0; }
.registry-card { overflow:hidden; }
.registry-wrap { max-width:100%; }
.registry-table { width:max-content; min-width:100%; }
.registry-table th, .registry-table td { min-width:132px; vertical-align:middle; }
.registry-table th { white-space:normal; width:132px; max-width:145px; line-height:1.15; }
.registry-table td { white-space:nowrap; }
.registry-heading { display:block; overflow-wrap:normal; word-break:normal; hyphens:none; }
.registry-table .registry-person { position:sticky; left:0; min-width:140px; width:140px; max-width:160px; z-index:5; background:#12110e; box-shadow:8px 0 14px rgba(0,0,0,.22); }
.registry-table td.registry-person { z-index:4; background:var(--panel); }
.registry-table thead .registry-person { z-index:8; }
.registry-table td:last-child, .registry-table th:last-child { min-width:90px; }
.registry-inline-input { width:100%; min-width:116px; background:#11100d; border:1px solid var(--line); color:var(--text); border-radius:9px; padding:8px 9px; }
.registry-computed { display:grid; gap:5px; }
.registry-computed small { color:var(--muted); }
.medical-valid { color:#bdf6ce !important; background:rgba(76,200,121,.12) !important; border-color:rgba(76,200,121,.48) !important; }
.medical-due { color:#ffe49a !important; background:rgba(233,191,74,.13) !important; border-color:rgba(233,191,74,.55) !important; }
.medical-expired { color:#ffc2c2 !important; background:rgba(238,107,107,.14) !important; border-color:rgba(238,107,107,.55) !important; }
.medical-none { color:var(--muted) !important; }
.badge.medical-valid { color:#bdf6ce; }
.badge.medical-due { color:#ffe49a; }
.badge.medical-expired { color:#ffc2c2; }
.computed-field { min-height:42px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 0; }
@media(max-width:699px){
  .registry-table .registry-person { min-width:118px; width:118px; max-width:132px; }
  .registry-table th, .registry-table td { min-width:118px; }
  .registry-table th { width:118px; max-width:128px; }
  .registry-inline-input { min-width:102px; }
  .note-row { align-items:flex-start; }
}


/* V1.5 - tema chiaro/scuro, calendario filtrato e anagrafica sticky */
.topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.theme-toggle { width:40px; height:40px; flex:0 0 40px; border-radius:12px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); display:grid; place-items:center; font-size:18px; }
:root[data-theme="light"] html,
:root[data-theme="light"] body { background:radial-gradient(circle at top right, rgba(182,123,22,.10), transparent 28rem), var(--bg); }
:root[data-theme="light"] .topbar { background:rgba(247,243,234,.91); }
:root[data-theme="light"] .bottom-nav { background:rgba(255,253,248,.96); }
:root[data-theme="light"] .datebox,
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .att-mini,
:root[data-theme="light"] .registry-inline-input { background:#fffdf8; }
:root[data-theme="light"] .avatar { background:linear-gradient(145deg,var(--panel-3),#f7f3ea); }
:root[data-theme="light"] th,
:root[data-theme="light"] .registry-table .registry-person { background:#eee7da; }
:root[data-theme="light"] .registry-table td.registry-person { background:#fffdf8; }
:root[data-theme="light"] .notice { color:#684a12; }
:root[data-theme="light"] .btn.primary,
:root[data-theme="light"] .tab.active { color:#fffaf0; }

.calendar-main-tabs { margin-bottom:8px; }
.calendar-subnav { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.calendar-subnav .tabs { margin:0; }
.calendar-result-note { margin-bottom:12px; }
.result-badge { display:inline-flex; width:max-content; margin-top:6px; padding:5px 8px; border-radius:999px; border:1px solid rgba(215,166,64,.35); background:rgba(215,166,64,.10); color:var(--gold-2); font-size:12px; font-weight:800; }
.result-badge.pending { color:var(--muted); border-color:var(--line); background:var(--panel-3); }
.result-chip { font-weight:850; color:var(--gold-2); }

.registry-wrap { max-height:68vh; overflow:auto; scrollbar-gutter:stable; }
.registry-table thead th { position:sticky; top:0; z-index:7; background:#12110e; }
.registry-table thead .registry-person { z-index:12; }
.registry-table tbody .registry-person { z-index:6; }
:root[data-theme="light"] .registry-table thead th { background:#eee7da; }

@media(max-width:699px){
  .topbar { align-items:flex-start; }
  .topbar-actions { gap:6px; }
  .role-switch { max-width:130px; font-size:12px; }
  .theme-toggle { width:38px; height:38px; flex-basis:38px; }
  .registry-wrap { max-height:72vh; }
}

:root[data-theme="light"] .medical-valid { color:#155c32 !important; background:rgba(24,122,62,.10) !important; border-color:rgba(24,122,62,.40) !important; }
:root[data-theme="light"] .medical-due { color:#765100 !important; background:rgba(156,108,0,.10) !important; border-color:rgba(156,108,0,.40) !important; }
:root[data-theme="light"] .medical-expired { color:#8f2929 !important; background:rgba(184,56,56,.10) !important; border-color:rgba(184,56,56,.40) !important; }

/* V1.6 - libreria documenti */
.bottom-nav { grid-template-columns:repeat(var(--nav-count, 5),1fr); }
.document-library { display:grid; gap:22px; }
.document-section + .document-section { border-top:1px solid var(--line); padding-top:18px; }
.document-grid { display:grid; gap:10px; }
.document-card { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--line); border-radius:15px; background:var(--panel-2); }
.document-icon { width:46px; height:52px; flex:0 0 46px; display:grid; place-items:center; border-radius:11px; border:1px solid var(--line); background:var(--panel-3); font-size:24px; }
.document-description { margin-top:4px; line-height:1.35; }
.document-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.document-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.document-actions a { text-decoration:none; text-align:center; }
@media(max-width:699px){
  .bottom-nav { overflow-x:auto; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(66px,1fr); }
  .document-card { align-items:flex-start; flex-wrap:wrap; }
  .document-card .grow { flex:1 1 calc(100% - 62px); }
  .document-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
}


/* V1.7 - orario fine, luogo assistito e legenda presenze */
.field-help { color:var(--muted); font-size:11px; line-height:1.35; }
.att-btn { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; }
.att-btn-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attendance-legend { grid-column:1 / -1; border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; }
.attendance-legend summary { cursor:pointer; padding:11px 13px; font-weight:800; color:var(--text); user-select:none; }
.attendance-legend-grid { display:grid; gap:0; padding:0 13px 10px; }
.attendance-legend-row { display:grid; grid-template-columns:120px 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:12px; line-height:1.35; }
.attendance-legend-row strong { color:var(--gold-2); }
@media(max-width:699px){
  .attendance-legend-row { grid-template-columns:100px 1fr; }
  .att-btn { padding-inline:8px; }
  .att-btn-label { font-size:11px; }
}

/* Online Beta - login Firebase, account e stato cloud */
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.login-card { width:min(430px,100%); background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.24); }
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.login-brand img { width:58px; height:58px; border-radius:16px; object-fit:contain; background:transparent; }
.login-brand h1,.login-brand h2 { margin:2px 0 0; }
.login-submit { width:100%; margin-top:16px; }
.login-reset { width:100%; margin-top:8px; }
.login-foot { text-align:center; margin-top:18px; }
.login-message { margin:12px 0; }
.account-chip { min-width:0; max-width:280px; display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.account-chip-text { min-width:0; display:grid; }
.account-chip-text strong,.account-chip-text small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-chip-text strong { font-size:12px; }
.account-chip-text small { font-size:10px; color:var(--muted); }
.logout-btn { padding:9px 11px; }
.online-chip { color:var(--green); }
.danger-notice { border-color:rgba(238,107,107,.35); background:rgba(238,107,107,.08); color:var(--red); }
.user-profile-form { padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); }
.user-create-roles { margin:12px 0; }
code { user-select:all; overflow-wrap:anywhere; }

@media(max-width:699px){
  .account-chip { max-width:124px; padding:6px 8px; }
  .account-chip > span:first-child { display:none; }
  .account-chip-text small { display:none; }
  .logout-btn { font-size:11px; padding:8px; }
  .brand img { width:40px; height:40px; }
  .brand h1 { font-size:16px; }
}

/* Online Beta 0.2 - primo accesso autonomo */
.auth-tabs { display:flex; gap:8px; margin-bottom:14px; }
.auth-tabs .tab { flex:1; margin:0; }
.auth-verify-actions { margin-top:16px; }
.invite-list { display:grid; gap:8px; margin-top:10px; }
.invite-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line); }
.invite-row:first-child { border-top:0; }
@media(max-width:699px){
  .invite-row { align-items:flex-start; flex-wrap:wrap; }
  .invite-row .grow { flex:1 1 100%; }
  .auth-verify-actions .btn { flex:1 1 100%; }
}


/* Beta 0.3 - risorse, sondaggi e gestione roster */
.bottom-nav { grid-template-columns:repeat(var(--nav-count,5),minmax(74px,1fr)); overflow-x:auto; }
.nav-btn { min-width:74px; white-space:normal; line-height:1.05; }
.useful-links-grid,.poll-list,.roster-admin-list { display:grid; gap:10px; }
.useful-link-card,.poll-card,.roster-admin-row { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); }
.useful-link-icon { font-size:26px; }
.link-url { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:600px; }
.poll-card { display:grid; }
.poll-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.poll-options { display:grid; gap:7px; }
.poll-option { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; border:1px solid var(--line); background:var(--panel-3); color:var(--text); border-radius:12px; padding:10px 12px; }
.poll-option.selected { border-color:var(--gold); outline:1px solid var(--gold); }
.poll-my-vote { color:var(--gold-2); font-size:12px; }
.compact-empty { padding:14px 8px; }
.roster-admin-row { justify-content:space-between; }
@media(max-width:699px){
  .useful-link-card,.roster-admin-row { align-items:flex-start; flex-direction:column; }
  .document-actions { width:100%; }
  .document-actions .btn { flex:1; text-align:center; }
}

/* Online Beta 0.4 - calendario mensile, roster ordinato, risposte Cena/Festa e materiali */
.card { margin-bottom:5px; }

/* Stato numerico per Cena/Festa */
.att-btn.social_1,.att-btn.social_2,.att-btn.social_3,.att-btn.social_4,.att-btn.social_5,.att-btn.social_6,
.att-mini.social_1,.att-mini.social_2,.att-mini.social_3,.att-mini.social_4,.att-mini.social_5,.att-mini.social_6,
.badge.social_1,.badge.social_2,.badge.social_3,.badge.social_4,.badge.social_5,.badge.social_6 { color:var(--gold-2); }
.attendance-mini-actions.social-actions { grid-template-columns:repeat(4,1fr); }
.attendance-actions.social-actions { grid-template-columns:repeat(4,1fr); }

/* Calendario mensile */
.calendar-card { overflow:hidden; }
.calendar-toolbar { align-items:center; }
.calendar-month-nav { display:flex; align-items:center; gap:10px; min-width:0; }
.calendar-month-nav h3 { min-width:190px; text-align:center; }
.calendar-month-nav .btn { min-width:42px; padding:8px 12px; font-size:20px; line-height:1; }
.month-weekdays,.month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.month-weekdays { margin-top:10px; margin-bottom:5px; color:var(--muted); font-size:11px; font-weight:800; text-align:center; text-transform:uppercase; }
.month-day { min-width:0; min-height:78px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:4px; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--text); text-align:left; }
.month-day.empty-day { background:transparent; border-color:transparent; pointer-events:none; }
.month-day.has-events { border-color:rgba(215,166,64,.30); }
.month-day.today { box-shadow:inset 0 0 0 1px var(--gold); }
.month-day.selected { background:rgba(215,166,64,.13); border-color:var(--gold); outline:1px solid var(--gold); }
.month-day-number { font-weight:850; }
.month-day-events { width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:3px; color:var(--gold-2); }
.month-icons { overflow:hidden; white-space:nowrap; font-size:12px; }
.month-count { min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:var(--panel-3); border:1px solid var(--line); font-size:10px; font-weight:900; }
.selected-day-panel { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }

/* Feedback salvataggio: entra e scompare da solo dopo 5 secondi */
.save-feedback { animation:saveFeedback 5s ease both; overflow:hidden; }
@keyframes saveFeedback {
  0% { opacity:0; transform:translateY(-10px); }
  8%,82% { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(-8px); }
}

/* Roster pubblico: niente duplicazione del numero, layout più stabile su mobile */
.roster-public .person-row { margin-bottom:5px; align-items:flex-start; }
.roster-public .person { flex:1 1 auto; min-width:0; }
.roster-public .person-copy { min-width:0; overflow-wrap:anywhere; }
.roster-public .avatar { flex:0 0 38px; }
.roster-note-btn { flex:0 0 auto; }

/* Consegna materiale */
.material-add-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; margin-bottom:16px; }
.material-items-list { display:grid; gap:7px; }
.material-item-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }

@media(max-width:699px){
  .calendar-toolbar { align-items:flex-start; flex-direction:column; }
  .calendar-toolbar > .btn { width:100%; }
  .calendar-month-nav { width:100%; justify-content:space-between; }
  .calendar-month-nav h3 { min-width:0; flex:1; font-size:17px; }
  .month-weekdays,.month-grid { gap:3px; }
  .month-day { min-height:58px; padding:5px; border-radius:9px; }
  .month-day-number { font-size:12px; }
  .month-icons { font-size:9px; max-width:34px; }
  .month-count { min-width:17px; height:17px; padding:0 4px; font-size:9px; }
  .selected-day-panel .section-head { align-items:flex-start; }
  .attendance-mini-actions.social-actions { grid-template-columns:repeat(4,1fr); }
  .attendance-actions.social-actions { grid-template-columns:repeat(2,1fr); }
  .roster-public .person-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:11px 0; }
  .roster-public .person { align-items:flex-start; }
  .roster-public .person-copy strong { line-height:1.2; display:block; }
  .roster-note-btn { align-self:start; padding:9px 11px; }
  .material-add-form { grid-template-columns:1fr; }
  .material-item-row { align-items:flex-start; }
}

/* Online Beta 0.5 - identità visiva, risorse GitHub e calendario più evidente */
html, body { position:relative; }
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url('./assets/hop-pattern.png');
  background-repeat:repeat;
  background-size:260px 206px;
  opacity:.075;
  filter:saturate(.8);
}
:root[data-theme="light"] body::before { opacity:.18; filter:grayscale(1) contrast(1.15) brightness(.72); }
#app { position:relative; z-index:1; }
.app-version {
  display:inline-flex;
  margin-left:6px;
  padding:2px 6px;
  border:1px solid rgba(215,166,64,.28);
  border-radius:999px;
  color:var(--gold-2);
  background:rgba(215,166,64,.08);
  font-size:10px;
  font-weight:850;
  letter-spacing:.02em;
  vertical-align:middle;
  white-space:nowrap;
}

/* Giorni con eventi: più leggibili a colpo d'occhio */
.month-day.has-events {
  border-color:rgba(215,166,64,.52);
  background:linear-gradient(145deg,rgba(215,166,64,.14),rgba(215,166,64,.035)),var(--panel-2);
}
.month-day.has-training:not(.has-game):not(.has-social) {
  background:linear-gradient(145deg,rgba(103,167,232,.16),rgba(103,167,232,.035)),var(--panel-2);
  border-color:rgba(103,167,232,.48);
}
.month-day.has-social:not(.has-game) {
  background:linear-gradient(145deg,rgba(233,191,74,.17),rgba(233,191,74,.035)),var(--panel-2);
  border-color:rgba(233,191,74,.50);
}
.month-day.has-game {
  background:linear-gradient(145deg,rgba(215,166,64,.22),rgba(215,166,64,.05)),var(--panel-2);
  border-color:rgba(215,166,64,.72);
}
.month-day.selected { outline:2px solid var(--gold); outline-offset:1px; }
.month-day-events { align-items:center; }
.month-icons { font-size:18px; line-height:1; letter-spacing:-2px; max-width:70%; }
.month-count { min-width:23px; height:23px; font-size:11px; background:var(--panel); }

/* Link statici gestiti da GitHub */
.useful-link-card { margin-bottom:5px; }

@media(max-width:699px){
  .app-version { display:block; width:max-content; margin:3px 0 0; }
  .month-icons { font-size:15px; max-width:64%; letter-spacing:-2px; }
  .month-day.has-events { min-height:64px; }
  .month-count { min-width:20px; height:20px; font-size:10px; }
}