/* ==========================================================================
   css/components/events-panel.css
   Split from app.html (build 2026.10.08.9-beta), original lines 5279-5361.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- Events panel -- */
.evt-panel { padding:24px 28px; max-width:740px; overflow-y:auto; height:100%; }
.evt-panel-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px }
.evt-panel-title { font-family:var(--font-display,'Space Grotesk',sans-serif);font-size:22px;font-weight:700;color:var(--text-primary) }
.evt-create-btn { background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer }
.evt-create-btn:hover { background:var(--accent-bright) }
/* Calendar */
.evt-cal { background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:24px }
.evt-cal-nav-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px }
.evt-cal-month { font-size:15px;font-weight:700;color:var(--text-primary) }
.evt-cal-nav { background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);cursor:pointer;padding:2px 10px;font-size:16px;line-height:1.4 }
.evt-cal-nav:hover { border-color:var(--accent);color:var(--accent) }
.evt-cal-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:2px }
.evt-cal-dow { text-align:center;font-size:11px;font-weight:600;color:var(--text-muted);padding:4px 0;text-transform:uppercase;letter-spacing:.04em }
.evt-cal-day { position:relative;text-align:center;padding:5px 2px;font-size:13px;border-radius:6px;cursor:default;color:var(--text-secondary);min-height:30px;display:flex;flex-direction:column;align-items:center;gap:2px }
.evt-cal-day.has-event { cursor:pointer;color:var(--text-primary);font-weight:600 }
.evt-cal-day.has-event:hover { background:var(--bg-hover) }
.evt-cal-day.today { background:var(--accent-dim);color:var(--accent);font-weight:700 }
.evt-cal-day.today.has-event { background:var(--accent);color:#fff }
.evt-cal-day.selected { outline:2px solid var(--accent) }
.evt-cal-dot { width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0 }
.evt-cal-day.today .evt-cal-dot { background:#fff }
/* Event cards */
.evt-section-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:10px }
.evt-card { background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:14px;transition:border-color .15s }
.evt-card:hover { border-color:var(--border-strong) }
.evt-card-cover { width:100%;height:140px;object-fit:cover;display:block }
.evt-card-emoji { height:96px;display:flex;align-items:center;justify-content:center;font-size:56px;background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--bg-elevated) }
.evt-recur { display:inline-flex;align-items:center;gap:5px;color:var(--accent) }
.evt-card-body { padding:14px 16px }
.evt-card-title { font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:6px }
.evt-card-meta { font-size:12px;color:var(--text-muted);display:flex;flex-direction:column;gap:3px;margin-bottom:10px }
.evt-card-meta span { display:flex;align-items:center;gap:5px }
.evt-card-desc { font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:12px }
.evt-rsvp-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.evt-rsvp-btn { border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;background:var(--bg-elevated);color:var(--text-secondary);transition:all .15s }
.evt-rsvp-btn:hover { border-color:var(--accent);color:var(--accent) }
.evt-rsvp-btn.active-going { background:var(--accent);border-color:var(--accent);color:#fff }
.evt-rsvp-btn.active-interested { background:rgba(250,166,26,.15);border-color:#faa61a;color:#faa61a }
.evt-rsvp-count { font-size:12px;color:var(--text-muted);background:none;border:none;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:6px;transition:background .15s,color .15s }
.evt-rsvp-count:hover { color:var(--text-primary);background:var(--bg-hover) }
.evt-rsvp-count .evt-rsvp-chev { transition:transform .18s ease }
.evt-rsvp-count.open .evt-rsvp-chev { transform:rotate(180deg) }
.evt-rsvp-list { margin-top:10px;border-top:1px solid var(--border);padding-top:10px;display:flex;flex-direction:column;gap:12px }
.evt-rsvp-group-label { font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:6px }
.evt-rsvp-people { display:flex;flex-direction:column;gap:6px }
.evt-rsvp-person { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary) }
.evt-rsvp-person img, .evt-rsvp-person .evt-rsvp-av { width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff }
.evt-del-btn { margin-left:auto;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px }
.evt-del-btn:hover { color:var(--red) }
.evt-edit-btn { margin-left:auto;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px }
.evt-edit-btn:hover { color:var(--text-primary) }
.evt-edit-btn + .evt-del-btn { margin-left:0 }
/* Create event modal */
#evtCreateOverlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:900;align-items:center;justify-content:center }
#evtCreateOverlay.open { display:flex; animation: overlay-in 0.15s ease }
#evtCreateOverlay.open .evt-modal { animation: modal-pop 0.22s var(--ease-out, ease) }
.evt-modal { background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-xl,14px);padding:28px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto }
.evt-modal h3 { font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:18px;color:var(--text-primary) }
.evt-modal label { display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px }
.evt-modal input[type=text],.evt-modal textarea,.evt-modal input[type=datetime-local] { width:100%;background:var(--bg-void,#0a0b10);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:9px 12px;color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;margin-bottom:14px }
.evt-modal input:focus,.evt-modal textarea:focus { border-color:var(--accent) }
.evt-modal textarea { resize:vertical;min-height:70px }
.evt-modal-row { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.evt-modal-actions { display:flex;gap:8px;justify-content:flex-end;margin-top:6px }
.evt-modal-cancel { background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text-secondary) }
.evt-modal-submit { background:var(--accent);border:none;border-radius:var(--radius-md);padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;color:#fff }
.evt-modal-submit:hover { background:var(--accent-bright) }
.evt-modal-submit:disabled { opacity:.5;cursor:not-allowed }
.evt-cover-preview { width:100%;height:120px;object-fit:cover;border-radius:var(--radius-md);margin-bottom:10px;display:none }
.evt-help { font-size:11.5px;color:var(--text-muted);margin:-8px 0 14px }
.evt-select { width:100%;background:var(--bg-void,#0a0b10);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:9px 12px;color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;margin-bottom:14px;cursor:pointer }
/* 12-hour (AM/PM) date+time picker for events */
.evt-dt-row { display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px }
.evt-dt-date { flex:1;min-width:150px;margin-bottom:0 }
.evt-dt-time { display:flex;align-items:center;gap:6px }
.evt-dt-sel { width:auto;min-width:62px;margin-bottom:0 }
.evt-dt-colon { color:var(--text-muted);font-weight:700 }
.evt-select:focus { border-color:var(--accent) }
.evt-cover-tabs { display:flex;gap:8px;margin-bottom:12px }
.evt-cover-tab { flex:1;background:var(--bg-void,#0a0b10);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:8px;font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer }
.evt-cover-tab.active { background:var(--accent);border-color:var(--accent);color:#fff }
.evt-emoji-input { width:100%;text-align:center;font-size:34px !important;padding:8px !important;line-height:1.2 }