/* ══════════════════════════════════════════════════════════════════
   event-detail.css  |  event_detail.html
   Matches scholar-detail.css design tokens exactly.
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&family=Roboto:wght@300;400;500;700;900&display=swap');

/* ── Variables (identical to scholar-detail / home) ── */
:root {
  --brand-navy:       #00377B;
  --brand-orange:     #FF6C00;
  --brand-blue-light: #61B9F0;
  --brand-pale-blue:  #F2F8FD;
  --brand-soft-blue:  #E4F3FD;
  --primary-gradient: linear-gradient(135deg,#00377B 0%,#0055B3 100%);
  --accent-gradient:  linear-gradient(135deg,#FF6C00 0%,#FF9240 100%);
  --subhead-gradient: linear-gradient(135deg,#61B9F0 0%,#00377B 100%);
  --bg-primary:    #ffffff;
  --bg-secondary:  #F0F0ED;
  --bg-tertiary:   #F2F8FD;
  --text-primary:  #0D1B2A;
  --text-secondary:#2E4A6B;
  --text-tertiary: #7B9BBF;
  --border-color:  #D3E4F2;
  --shadow-sm: 0 2px 8px  rgba(0,55,123,.06);
  --shadow-md: 0 8px 24px rgba(0,55,123,.10);
  --shadow-lg: 0 16px 48px rgba(0,55,123,.14);
  --shadow-xl: 0 24px 64px rgba(0,55,123,.18);
  --blur-amount: 20px;
  --font-title: "Merriweather",serif;
  --font-body:  "Roboto",sans-serif;
  --header-h: 72px;
}
[data-theme="dark"] {
  --bg-primary:    #0D1B2A;
  --bg-secondary:  #112236;
  --bg-tertiary:   #1A3554;
  --text-primary:  #F2F8FD;
  --text-secondary:#A8C8E8;
  --text-tertiary: #61B9F0;
  --border-color:  rgba(97,185,240,.15);
  --shadow-sm: 0 2px 8px  rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.65);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg-secondary); font-family:var(--font-body); color:var(--text-primary); line-height:1.7; overflow-x:hidden; position:relative; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-title); }
a { text-decoration:none; }

/* ══════════════════════════════════════
   BACKGROUND ELEMENTS (same as home)
══════════════════════════════════════ */
.bg-elements { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.10; animation:blobFloat 20s ease-in-out infinite; }
.blob-1 { width:600px; height:600px; background:linear-gradient(135deg,#00377B,#0055B3); top:-200px; left:-200px; }
.blob-2 { width:500px; height:500px; background:linear-gradient(135deg,#FF6C00,#FF9240); bottom:-150px; right:-150px; animation-delay:7s; }
.blob-3 { width:400px; height:400px; background:linear-gradient(135deg,#61B9F0,#00377B); top:50%; left:50%; transform:translate(-50%,-50%); animation-delay:14s; }
@keyframes blobFloat { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(30px,-50px) scale(1.1);} 66%{transform:translate(-20px,20px) scale(.9);} }
.grid-overlay { position:absolute; inset:0; background-image:linear-gradient(var(--border-color) 1px,transparent 1px),linear-gradient(90deg,var(--border-color) 1px,transparent 1px); background-size:50px 50px; opacity:.04; }

/* ══════════════════════════════════════
   HEADER (identical to scholar-detail)
══════════════════════════════════════ */
.light-header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.88); backdrop-filter:blur(var(--blur-amount)); border-bottom:1px solid var(--border-color); box-shadow:var(--shadow-sm); }
[data-theme="dark"] .light-header { background:rgba(13,27,42,.88); }
.header-inner { max-width:1400px; margin:0 auto; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.logo-theme-wrapper { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.portal-logo img { height:44px; transition:transform .3s; }
.portal-logo img:hover { transform:scale(1.05) rotate(-2deg); }
.theme-toggle-btn { background:var(--bg-primary); border:2px solid var(--border-color); border-radius:12px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; }
.theme-toggle-btn:hover { background:var(--primary-gradient); border-color:transparent; }
.theme-toggle-btn:hover .theme-icon { color:#fff; transform:rotate(30deg); }
.theme-icon { font-size:20px; color:var(--text-primary); transition:all .3s; }
.top-menu { display:flex; gap:.4rem; flex:1; justify-content:center; }
.menu-link { position:relative; padding:.7rem 1.2rem; color:var(--text-secondary)!important; font-family:var(--font-body); font-weight:500; font-size:14px; border-radius:10px; transition:all .3s; letter-spacing:.02em; text-decoration:none; }
.menu-link span { position:relative; z-index:2; }
.menu-link::before { content:''; position:absolute; inset:0; background:var(--primary-gradient); border-radius:10px; opacity:0; transition:opacity .3s; }
.menu-link:hover,.menu-link.active { color:#ffffff!important; }
.menu-link:hover::before,.menu-link.active::before { opacity:1; }
.auth-buttons { display:flex; gap:1rem; align-items:center; flex-shrink:0; }
.profile-dropdown-container { position:relative; }
.profile-dropdown-trigger { display:flex; align-items:center; gap:.6rem; background:var(--bg-primary); border:2px solid var(--border-color); border-radius:50px; padding:.45rem .9rem .45rem .45rem; cursor:pointer; transition:all .3s; }
.profile-dropdown-trigger:hover { background:var(--brand-soft-blue); }
.profile-dropdown-trigger .user-avatar { width:38px; height:38px; border-radius:50%; background:var(--primary-gradient); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff; }
.dropdown-arrow { color:var(--text-secondary); font-size:14px; transition:transform .3s; }
.profile-dropdown-trigger:hover .dropdown-arrow { transform:rotate(180deg); }
.profile-dropdown-menu { position:absolute; top:calc(100% + 10px); right:0; width:300px; background:var(--bg-primary); border:2px solid var(--border-color); border-radius:20px; box-shadow:var(--shadow-xl); opacity:0; visibility:hidden; transform:translateY(-10px); transition:all .3s; z-index:1001; overflow:hidden; }
.profile-dropdown-menu.show { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-header { display:flex; align-items:center; gap:1rem; padding:1.25rem; background:var(--brand-soft-blue); border-bottom:1px solid var(--border-color); }
[data-theme="dark"] .dropdown-header { background:#112236; }
.user-avatar-large { width:50px; height:50px; border-radius:50%; background:var(--primary-gradient); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; color:#fff; flex-shrink:0; }
.user-info { flex:1; min-width:0; }
.user-name { font-family:var(--font-title); font-size:1rem; font-weight:700; color:var(--brand-navy); margin:0 0 .2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-theme="dark"] .user-name { color:#F2F8FD; }
.user-email { font-size:.82rem; color:var(--text-secondary); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropdown-divider { height:1px; background:var(--border-color); }
.dropdown-items { padding:.6rem; }
.dropdown-item { display:flex; align-items:center; gap:.75rem; padding:.75rem .9rem; color:var(--text-primary); border-radius:10px; transition:all .3s; font-size:.9rem; }
.dropdown-item i { font-size:18px; color:var(--brand-blue-light); width:22px; text-align:center; }
.dropdown-item:hover { background:var(--brand-pale-blue); color:var(--brand-navy); }
.logout-item i { color:#ef4444!important; }
.logout-item:hover { background:rgba(239,68,68,.08)!important; }
.btn-auth { padding:.65rem 1.3rem; border-radius:12px; font-family:var(--font-body); font-size:14px; font-weight:700; transition:all .3s; display:inline-flex; align-items:center; gap:.5rem; border:none; }
.btn-signin-header { background:var(--primary-gradient); color:#fff; }
.btn-signin-header:hover { transform:translateY(-2px); color:#fff; }
.mobile-menu-toggle { display:none; background:var(--bg-primary); border:2px solid var(--border-color); border-radius:12px; color:var(--text-primary); font-size:22px; padding:.45rem .7rem; cursor:pointer; }
.mobile-dropdown { display:none; background:var(--bg-primary); border-top:1px solid var(--border-color); padding:1.25rem; }
.mobile-dropdown.open { display:block; }
.mobile-menu-section { display:flex; flex-direction:column; gap:.75rem; }
.mobile-user-info { display:flex; align-items:center; gap:.75rem; padding:1rem 1.1rem; background:var(--brand-pale-blue); border-radius:12px; border:2px solid var(--border-color); }
.mobile-user-info .user-avatar { width:36px; height:36px; border-radius:50%; background:var(--primary-gradient); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; }
.mobile-username { font-family:var(--font-title); font-weight:700; color:var(--brand-navy); font-size:1rem; }
.mobile-menu-link { color:var(--text-primary)!important; font-weight:500; padding:1rem 1.1rem; border-radius:12px; background:var(--bg-secondary); border:2px solid var(--border-color); display:block; font-size:.9rem; }
.mobile-menu-link:hover { background:var(--primary-gradient); border-color:transparent; color:#fff!important; }
.mobile-signout,.mobile-signin { padding:1rem 1.1rem!important; border-radius:12px; font-weight:700; display:flex; align-items:center; gap:.6rem; transition:all .3s; font-size:.9rem; }
.mobile-signout { color:#ef4444!important; background:rgba(239,68,68,.08)!important; border:2px solid rgba(239,68,68,.25)!important; }
.mobile-signin { background:var(--primary-gradient)!important; color:#fff!important; border:none!important; }
.user-email1 { font-size:.875rem; color:var(--brand-orange); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ══════════════════════════════════════
   HERO — event banner
══════════════════════════════════════ */
.ev-hero { position:relative; background:var(--primary-gradient); overflow:hidden; padding:3.5rem 0 0; }
.ev-hero-bg { position:absolute; inset:0; pointer-events:none; }
.hero-shape { position:absolute; border-radius:50%; filter:blur(100px); opacity:.15; }
.shape-1 { width:500px; height:500px; background:linear-gradient(135deg,#0055B3,#61B9F0); top:-150px; right:-100px; animation:shapeFloat 15s ease-in-out infinite; }
.shape-2 { width:350px; height:350px; background:linear-gradient(135deg,#FF6C00,#FF9240); bottom:-100px; left:5%; animation:shapeFloat 20s ease-in-out infinite reverse; }
@keyframes shapeFloat { 0%,100%{transform:translate(0,0);} 50%{transform:translate(40px,-40px);} }

.ev-hero-inner { max-width:1400px; margin:0 auto; padding:0 2rem; position:relative; z-index:2; }

/* breadcrumb */
.ev-breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:rgba(255,255,255,.65); margin-bottom:2rem; flex-wrap:wrap; }
.ev-breadcrumb a { color:rgba(255,255,255,.75); transition:color .25s; }
.ev-breadcrumb a:hover { color:#fff; }
.ev-breadcrumb i { font-size:.65rem; }
.ev-breadcrumb span { color:#fff; font-weight:600; }

/* event identity */
.ev-identity { display:flex; align-items:flex-start; gap:1.5rem; margin-bottom:2.5rem; }
.ev-icon-box { width:84px; height:84px; border-radius:20px; background:rgba(255,255,255,.15); border:3px solid rgba(255,255,255,.3); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:#fff; flex-shrink:0; }
.ev-identity-info { flex:1; }
.ev-title { font-family:var(--font-title); font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:900; color:#fff; line-height:1.15; margin:0 0 .75rem; }
.ev-badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.875rem; }
.ev-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .875rem; border-radius:50px; font-size:.75rem; font-weight:700; border:1.5px solid; }
.ev-badge-upcoming  { background:rgba(46,204,113,.22); border-color:rgba(46,204,113,.4); color:#a7f3d0; }
.ev-badge-past      { background:rgba(107,114,128,.22); border-color:rgba(107,114,128,.4); color:#e5e7eb; }
.ev-badge-ongoing   { background:rgba(59,130,246,.22); border-color:rgba(59,130,246,.4); color:#bfdbfe; }
.ev-badge-cancelled { background:rgba(239,68,68,.22); border-color:rgba(239,68,68,.4); color:#fecaca; }
.ev-meta { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; font-size:.82rem; color:rgba(255,255,255,.8); }
.ev-meta span { display:flex; align-items:center; gap:.4rem; }
.ev-meta i { color:var(--brand-blue-light); font-size:.85rem; }

/* Stats strip */
.stats-container { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; padding-bottom:2.5rem; }
.stat-card { background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.18); border-radius:18px; padding:1.5rem; display:flex; align-items:center; gap:1rem; backdrop-filter:blur(10px); transition:all .4s; }
.stat-card:hover { background:rgba(255,255,255,.18); transform:translateY(-4px); }
.stat-icon { width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; flex-shrink:0; }
.stat-content { text-align:left; }
.stat-number { font-family:var(--font-title); font-size:1.75rem; font-weight:900; color:#fff; line-height:1; margin-bottom:.15rem; }
.stat-label { font-size:.72rem; color:rgba(255,255,255,.75); font-weight:500; text-transform:uppercase; letter-spacing:.06em; }

/* ══════════════════════════════════════
   SECTION NAV — vertical icon sidebar
══════════════════════════════════════ */
.sd-section-nav {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  align-self: start;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.snav-mob-btn { display: none; }
.sd-section-nav-inner {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  background: linear-gradient(135deg,#001a3d 0%,#00377B 100%);
  backdrop-filter: blur(16px);
  border-radius: 22px;
  padding: .5rem .45rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1);
}
.snav-item { position: relative; }
.snl {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: rgba(255,255,255,.5) !important;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
  text-decoration: none !important;
  border: none !important;
}
.snl i {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.07);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem;
  color: #61B9F0 !important;
  pointer-events: none; flex-shrink: 0;
  transition: background .2s, color .2s;
}
.snl:hover { background: rgba(97,185,240,.12); }
.snl:hover i { background: rgba(97,185,240,.25); color: #fff !important; }
.snl.active { background: rgba(0,55,123,.6); box-shadow: 0 4px 16px rgba(0,55,123,.4); }
.snl.active i { background: rgba(97,185,240,.35); color: #fff !important; }

.snl-panel {
  position: absolute;
  left: calc(100% + .75rem);
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  width: 220px;
  background: var(--bg-primary);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: .85rem 1rem;
  display: flex; align-items: flex-start; gap: .7rem;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 1001;
  white-space: normal;
}
.snl-panel::before {
  content: '';
  position: absolute; left: -5px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 9px; height: 9px;
  background: var(--bg-primary);
  border-left: 1.5px solid var(--border-color);
  border-bottom: 1.5px solid var(--border-color);
}
.snav-item:hover .snl-panel { opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0); }
.snlp-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1rem; }
.snlp-name { font-family:var(--font-title); font-weight:700; font-size:.82rem; color:var(--text-primary); line-height:1.3; margin-bottom:.2rem; }
.snlp-desc { font-size:.72rem; color:var(--text-tertiary); line-height:1.45; }

/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
.layout-wrapper { max-width:1400px; margin:0 auto; padding:3rem 2rem 5rem; position:relative; z-index:1; }
.sd-grid { display:grid; grid-template-columns:56px 1fr 340px; gap:0 2rem; align-items:start; }

/* ══════════════════════════════════════
   SECTIONS (identical to scholar-detail)
══════════════════════════════════════ */
.sd-section { background:var(--bg-primary); border:2px solid var(--border-color); border-radius:20px; padding:2rem; margin-bottom:2rem; box-shadow:var(--shadow-sm); }
.sd-section-head { display:flex; align-items:center; gap:.875rem; margin-bottom:1.5rem; }
.sd-section-icon { width:44px; height:44px; border-radius:13px; background:var(--primary-gradient); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; flex-shrink:0; }
.sd-section-head h2 { font-family:var(--font-title); font-size:1.3rem; font-weight:700; color:var(--brand-navy); margin:0; }
[data-theme="dark"] .sd-section-head h2 { color:var(--text-primary); }
.sd-count { font-size:.9rem; font-weight:500; color:var(--text-tertiary); }
.sd-divider { height:1px; background:var(--border-color); margin:1.75rem 0; }
.sd-sub-head { font-family:var(--font-title); font-size:1rem; font-weight:700; color:var(--brand-navy); margin:1.5rem 0 1rem; display:flex; align-items:center; gap:.5rem; }
[data-theme="dark"] .sd-sub-head { color:var(--text-primary); }

/* ── Pills ── */
.pill { display:inline-flex; align-items:center; padding:.4rem .9rem; border-radius:50px; font-size:.78rem; font-weight:600; }
.pill-done    { background:rgba(46,204,113,.15); color:#27ae60; border:1.5px solid rgba(46,204,113,.35); }
.pill-pending { background:rgba(245,158,11,.15); color:#d97706; border:1.5px solid rgba(245,158,11,.35); }
.pill-ongoing { background:rgba(59,130,246,.15); color:#2563eb; border:1.5px solid rgba(59,130,246,.35); }
.pill-archived{ background:rgba(107,114,128,.15); color:#6b7280; border:1.5px solid rgba(107,114,128,.35); }
.pill-info    { background:var(--brand-pale-blue); color:var(--brand-navy); border:1.5px solid var(--brand-soft-blue); }
.pill-highlight{ background:rgba(255,108,0,.12); color:var(--brand-orange); border:1.5px solid rgba(255,108,0,.3); }
.pill-danger  { background:rgba(239,68,68,.12); color:#dc2626; border:1.5px solid rgba(239,68,68,.3); }

/* ── View-all / action button ── */
.sd-view-all-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.3rem; background:var(--bg-secondary); border:2px solid var(--border-color); border-radius:12px; color:var(--brand-navy); font-family:var(--font-body); font-size:.85rem; font-weight:700; transition:all .3s; cursor:pointer; }
.sd-view-all-btn:hover { background:var(--primary-gradient); border-color:transparent; color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-danger-outline { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.3rem; background:rgba(239,68,68,.08); border:2px solid rgba(239,68,68,.3); border-radius:12px; color:#dc2626; font-family:var(--font-body); font-size:.85rem; font-weight:700; transition:all .3s; cursor:pointer; }
.btn-danger-outline:hover { background:rgba(239,68,68,.18); color:#b91c1c; transform:translateY(-2px); }
.btn-primary-solid { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.3rem; background:var(--primary-gradient); border:none; border-radius:12px; color:#fff; font-family:var(--font-body); font-size:.85rem; font-weight:700; transition:all .3s; cursor:pointer; }
.btn-primary-solid:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); color:#fff; }

/* ══════════════════════════════════════
   ABOUT / DESCRIPTION
══════════════════════════════════════ */
.ev-description { font-size:.95rem; color:var(--text-secondary); line-height:1.9; }
.ev-description p { margin-bottom:1rem; }
.ev-description p:last-child { margin-bottom:0; }

/* ══════════════════════════════════════
   ATTACHMENT CARD
══════════════════════════════════════ */
.attachment-card { display:flex; align-items:center; gap:1.25rem; padding:1.25rem 1.5rem; background:var(--bg-tertiary); border:2px solid var(--border-color); border-left:4px solid var(--brand-orange); border-radius:14px; flex-wrap:wrap; }
.attachment-icon { font-size:2.25rem; flex-shrink:0; }
.attachment-info { flex:1; min-width:140px; }
.attachment-type { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--text-tertiary); margin-bottom:.25rem; }
.attachment-label { font-size:.9rem; font-weight:600; color:var(--text-primary); }
.attachment-actions { display:flex; gap:.75rem; flex-wrap:wrap; }

/* ══════════════════════════════════════
   PARTICIPANTS LIST
══════════════════════════════════════ */
.participant-list { list-style:none; padding:0; margin:0; }
.participant-item { display:flex; align-items:center; gap:1rem; padding:.875rem 1rem; border-radius:12px; border:1.5px solid var(--border-color); margin-bottom:.75rem; transition:all .3s; background:var(--bg-primary); }
.participant-item:last-child { margin-bottom:0; }
.participant-item:hover { background:var(--brand-pale-blue); border-color:var(--brand-blue-light); transform:translateX(4px); }
.participant-avatar { width:40px; height:40px; border-radius:50%; background:var(--primary-gradient); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; color:#fff; flex-shrink:0; }
.participant-name { font-weight:600; font-size:.9rem; color:var(--text-primary); }
.participant-dept { font-size:.78rem; color:var(--text-tertiary); }

/* ══════════════════════════════════════
   DISCUSSION / COMMENTS
══════════════════════════════════════ */
.comment-list { display:flex; flex-direction:column; gap:1.25rem; }
.comment-item { display:flex; gap:1rem; padding-bottom:1.25rem; border-bottom:1.5px solid var(--border-color); }
.comment-item:last-child { border-bottom:none; padding-bottom:0; }
.comment-avatar { width:44px; height:44px; border-radius:50%; background:var(--primary-gradient); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem; color:#fff; flex-shrink:0; }
.comment-body { flex:1; min-width:0; }
.comment-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; }
.comment-author { font-weight:700; font-size:.9rem; color:var(--brand-navy); }
[data-theme="dark"] .comment-author { color:var(--brand-blue-light); }
.comment-time { font-size:.75rem; color:var(--text-tertiary); display:flex; align-items:center; gap:.35rem; }
.comment-text { font-size:.88rem; color:var(--text-secondary); line-height:1.75; }
.comment-delete { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; color:var(--text-tertiary); background:none; border:none; cursor:pointer; padding:.25rem .5rem; border-radius:6px; transition:all .2s; margin-top:.25rem; font-family:var(--font-body); }
.comment-delete:hover { color:#dc2626; background:rgba(239,68,68,.08); }

/* Comment form */
.comment-form-wrap { background:var(--bg-tertiary); border:2px solid var(--border-color); border-left:4px solid var(--brand-navy); border-radius:14px; padding:1.5rem; margin-top:1.5rem; }
.comment-form-title { font-family:var(--font-title); font-size:.9rem; font-weight:700; color:var(--brand-navy); text-transform:uppercase; letter-spacing:.5px; margin-bottom:1rem; }
[data-theme="dark"] .comment-form-title { color:var(--brand-blue-light); }
.comment-textarea { width:100%; padding:.875rem 1rem; border:2px solid var(--border-color); border-radius:12px; font-family:var(--font-body); font-size:.9rem; color:var(--text-primary); background:var(--bg-primary); resize:vertical; min-height:100px; transition:border-color .3s; outline:none; }
.comment-textarea:focus { border-color:var(--brand-navy); }
[data-theme="dark"] .comment-textarea { background:var(--bg-secondary); color:var(--text-primary); }
.comment-login-notice { display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; background:var(--bg-tertiary); border:2px solid var(--border-color); border-left:4px solid var(--brand-blue-light); border-radius:14px; font-size:.88rem; color:var(--text-secondary); margin-top:1.5rem; }
.comment-login-notice a { color:var(--brand-navy); font-weight:700; }
.comment-login-notice a:hover { color:var(--brand-orange); }

/* ══════════════════════════════════════
   SIDEBAR CARDS (identical to scholar-detail)
══════════════════════════════════════ */
.sb-card { background:var(--bg-primary); border:2px solid var(--border-color); border-radius:18px; margin-bottom:1.5rem; overflow:hidden; box-shadow:var(--shadow-sm); }
.sb-head { padding:1rem 1.25rem; background:var(--primary-gradient); color:#fff; font-family:var(--font-title); font-size:.85rem; font-weight:700; display:flex; align-items:center; gap:.6rem; letter-spacing:.02em; }
.sb-body { padding:.5rem 0; }
.sb-row { display:flex; align-items:flex-start; gap:.875rem; padding:.875rem 1.25rem; border-bottom:1px solid var(--border-color); transition:background .2s; }
.sb-row:last-child { border-bottom:none; }
.sb-row:hover { background:var(--brand-pale-blue); }
.sb-icon { width:32px; height:32px; border-radius:9px; background:var(--brand-soft-blue); display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--brand-navy); flex-shrink:0; margin-top:2px; }
.sb-lbl { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--text-tertiary); margin-bottom:.2rem; }
.sb-val { font-size:.85rem; font-weight:600; color:var(--text-primary); }
.sb-val a { color:var(--brand-navy); font-weight:700; }
.sb-val a:hover { color:var(--brand-orange); }

/* Join/Leave CTA in sidebar */
.ev-cta-wrap { padding:1.25rem; border-top:1px solid var(--border-color); }
.ev-join-btn { width:100%; padding:.9rem; background:var(--primary-gradient); color:#fff; border:none; border-radius:12px; font-family:var(--font-body); font-size:.9rem; font-weight:700; cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:.6rem; }
.ev-join-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); color:#fff; }
.ev-leave-btn { width:100%; padding:.9rem; background:rgba(239,68,68,.08); color:#dc2626; border:2px solid rgba(239,68,68,.25); border-radius:12px; font-family:var(--font-body); font-size:.9rem; font-weight:700; cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:.6rem; }
.ev-leave-btn:hover { background:rgba(239,68,68,.18); transform:translateY(-2px); }

/* Manage event card */
.sb-manage { padding:.875rem; display:flex; flex-direction:column; gap:.6rem; }
.sb-action-btn { width:100%; padding:.75rem 1rem; border-radius:10px; font-family:var(--font-body); font-size:.85rem; font-weight:700; cursor:pointer; transition:all .3s; display:flex; align-items:center; gap:.6rem; }

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
[data-animate] { opacity:0; transform:translateY(24px); animation:fadeInUp .7s ease-out forwards; }
[data-animate]:nth-child(2) { animation-delay:.1s; }
[data-animate]:nth-child(3) { animation-delay:.2s; }
@keyframes fadeInUp { to{opacity:1; transform:translateY(0);} }

/* ══════════════════════════════════════
   FOOTER (identical to scholar-detail)
══════════════════════════════════════ */
.site-footer { background:linear-gradient(135deg,#001f4d 0%,#00377B 100%); color:#e5eef8; padding:4.5rem 0 2rem; margin-top:5rem; position:relative; z-index:1; }
.footer-content { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; margin-bottom:2.5rem; }
.footer-heading { font-family:var(--font-title); font-size:1.05rem; font-weight:700; margin-bottom:1.25rem; color:#fff; position:relative; padding-bottom:.65rem; }
.footer-heading::after { content:''; position:absolute; bottom:0; left:0; width:44px; height:4px; background:linear-gradient(90deg,#FF6C00,#FF9240); border-radius:2px; }
.footer-text { color:#c8ddef; line-height:1.85; margin-bottom:1.25rem; font-size:.9rem; }
.footer-links,.footer-contact { list-style:none; padding:0; margin:0; }
.footer-links li,.footer-contact li { margin-bottom:.75rem; }
.footer-links a { color:var(--brand-blue-light); transition:all .3s; display:inline-flex; align-items:center; font-size:.9rem; }
.footer-links a:hover { color:#fff; padding-left:.5rem; }
.footer-contact li { display:flex; align-items:center; gap:.75rem; color:#c8ddef; font-size:.9rem; }
.footer-contact i { color:var(--brand-orange); font-size:1.1rem; flex-shrink:0; }
.footer-social { display:flex; gap:.75rem; margin-top:1.25rem; }
.social-link { width:44px; height:44px; background:rgba(97,185,240,.15); display:flex; align-items:center; justify-content:center; border-radius:11px; color:#fff; font-size:1.1rem; transition:all .3s; }
.social-link:hover { background:var(--brand-orange); transform:translateY(-4px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.10); padding-top:1.75rem; }
.footer-bottom-content { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.25rem; }
.copyright { color:#8aaecb; margin:0; font-size:.88rem; }
.footer-bottom-links { display:flex; align-items:center; gap:.875rem; }
.footer-bottom-links a { color:var(--brand-blue-light); transition:color .3s; font-size:.88rem; }
.footer-bottom-links a:hover { color:#fff; }
.separator { color:rgba(255,255,255,.25); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:1100px) {
  .sd-grid { grid-template-columns:56px 1fr; }
  .ev-sidebar { grid-column:2; display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; align-items:start; }
  .ev-sidebar > div { position:static!important; }
  .stats-container { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  :root { --header-h:64px; }
  .top-menu,.auth-buttons { display:none; }
  .mobile-menu-toggle { display:flex; }
  .header-inner { padding:.8rem 1.25rem; }
  .portal-logo img { height:40px; }
  .ev-hero-inner { padding:0 1.25rem; }
  .ev-title { font-size:1.6rem; }
  .ev-icon-box { width:64px; height:64px; font-size:1.6rem; }
  .stats-container { grid-template-columns:1fr 1fr; gap:.875rem; }
  .layout-wrapper { padding:1.5rem 1.25rem 4rem; }
  .ev-sidebar { grid-column:1; grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom-content { flex-direction:column; text-align:center; }

  /* Mobile: fixed full-width nav bar */
  .sd-grid { grid-template-columns:1fr; gap:0; }
  .sd-section-nav {
    position:fixed; top:var(--header-h);
    left:0; right:0; width:100%; z-index:900;
    transition:top .35s cubic-bezier(.4,0,.2,1);
  }
  .sd-main { padding-top:3.5rem; }
  .snav-mob-btn {
    display:flex; width:100%; align-items:center; gap:.75rem;
    padding:.6rem 1rem;
    background:linear-gradient(135deg,#001a3d 0%,#00377B 100%);
    border:none; cursor:pointer; color:#fff;
    font-family:var(--font-body);
    border-bottom:1px solid rgba(97,185,240,.2);
    box-shadow:0 2px 12px rgba(0,0,0,.4);
    position:relative; z-index:1;
  }
  .snav-mob-icon {
    width:32px; height:32px; flex-shrink:0;
    background:rgba(97,185,240,.18); border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-size:.85rem; color:#61B9F0;
    transition:background .2s, color .2s;
  }
  .snav-mob-btn > span { flex:1; text-align:left; font-size:.85rem; font-weight:600; }
  .snav-mob-caret { font-size:.7rem!important; color:rgba(255,255,255,.5)!important; transition:transform .25s; }
  .snav-mob-btn.open .snav-mob-caret { transform:rotate(180deg); }
  .snav-mob-btn.open .snav-mob-icon { background:rgba(97,185,240,.35); color:#fff; }
  .sd-section-nav-inner {
    position:absolute; top:100%; left:0; right:0;
    display:none; flex-direction:column; gap:0;
    background:#09172e;
    border-radius:0 0 14px 14px;
    padding:.4rem;
    box-shadow:0 16px 40px rgba(0,0,0,.55);
    z-index:2; max-height:70vh; overflow-y:auto;
  }
  .sd-section-nav-inner.open { display:flex; }
  .snav-item { width:100%; }
  .snl {
    width:100%; height:auto; border-radius:10px;
    padding:.5rem .75rem; justify-content:flex-start; gap:.75rem;
    color:rgba(255,255,255,.8)!important; font-size:.84rem; font-weight:500;
    border:none; margin-bottom:2px; display:flex; align-items:center;
  }
  .snl i {
    width:32px; height:32px; min-width:32px;
    background:rgba(255,255,255,.07); border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem; color:#61B9F0!important;
    pointer-events:none; flex-shrink:0;
  }
  .snl::after { content:attr(aria-label); font-size:.84rem; }
  .snl:hover { background:rgba(97,185,240,.1); color:#fff!important; }
  .snl.active { background:rgba(0,55,123,.5); color:#fff!important; }
  .snl-panel { display:none!important; }
}
@media (max-width:480px) {
  .stats-container { grid-template-columns:1fr; }
  .ev-identity { flex-direction:column; }
  .sd-section { padding:1.25rem; }
  .attachment-card { flex-direction:column; align-items:flex-start; }
}