/* ============================================================
   NoteShare — Main Stylesheet
   ============================================================ */

   /* ── Reset & Base ─────────────────────────────────────────── */
   
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: #f8fafc;
  color: #1e293b;
  line-height: 1.6;
}

a { text-decoration: none; color: inherit; }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}
.nav-logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: #4f46e5;
}
.nav-links a {
  margin-left: 1.5rem;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: #4f46e5; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  text-align: center;
}
.btn-primary   { background: #4f46e5; color: #fff; }
.btn-primary:hover { background: #4338ca; }
.btn-outline   { background: transparent; color: #4f46e5; border: 2px solid #4f46e5; }
.btn-outline:hover { background: #4f46e5; color: #fff; }
.btn-danger    { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-full      { width: 100%; padding: 0.8rem; }
.btn-sm        { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.btn-verify    { background: #1668a3; color: #fff; border: none; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.btn-verify:hover { background: #1668a3; }
.btn-warn      { background: #d97706; color: #fff; border: none; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.btn-warn:hover { background: #b45309; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert         { padding: 0.8rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
.alert-error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

/* ── Forms ────────────────────────────────────────────────── */
.form-group            { margin-bottom: 1.2rem; }
.form-row              { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group label      { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: #374151; }
.form-group input,
.form-group select     { width: 100%; padding: 0.7rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 0.9rem; font-family: 'Inter', sans-serif; background: #fff; transition: border-color 0.2s; }
.form-group input:focus,
.form-group select:focus { outline: none; border-color: #4f46e5; }
.checkbox-group        { display: flex; align-items: center; gap: 0.5rem; }
.checkbox-group input  { width: auto; }
.checkbox-group label  { margin: 0; font-weight: 400; }

/* ── Auth Pages ───────────────────────────────────────────── */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 130px);
  padding: 2rem;
}
.auth-card {
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.wide-card     { max-width: 600px; }
.auth-card h2  { font-size: 1.6rem; margin-bottom: 0.3rem; }
.auth-sub      { color: #64748b; font-size: 0.9rem; margin-bottom: 1.5rem; }
.auth-footer   { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: #64748b; }
.auth-footer a { color: #4f46e5; font-weight: 500; }
.auth-link     { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: #64748b; }
.auth-link a   { color: #4f46e5; font-weight: 500; }

/* ── Role Selector (Register) ─────────────────────────────── */
.role-selector { display: flex; gap: 12px; margin-bottom: 20px; }
.role-option {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 14px; border: 2px solid #e2e8f0; border-radius: 12px;
  cursor: pointer; transition: all 0.2s;
}
.role-option:has(input:checked) { border-color: #4f46e5; background: #eef2ff; }
.role-option input { display: none; }
.role-icon  { font-size: 28px; margin-bottom: 6px; }
.role-label { font-weight: 600; color: #374151; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero    { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; padding: 6rem 2rem; text-align: center; }
.hero h1 { font-size: 3rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
.hero p  { font-size: 1.1rem; opacity: 0.9; margin-bottom: 2rem; }
.hero-buttons { display: flex; gap: 1rem; justify-content: center; }
.hero-buttons .btn-outline       { border-color: #fff; color: #fff; }
.hero-buttons .btn-outline:hover { background: #fff; color: #4f46e5; }

/* ── Features Section ─────────────────────────────────────── */
.features      { max-width: 1200px; margin: 4rem auto; padding: 0 2rem; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.feature-card  { background: #fff; border-radius: 12px; padding: 2rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.feature-card span { font-size: 2rem; }
.feature-card h3   { margin: 0.8rem 0 0.5rem; font-size: 1.1rem; }
.feature-card p    { color: #64748b; font-size: 0.9rem; }

/* ── CTA Section ──────────────────────────────────────────── */
.cta    { background: #f1f5f9; text-align: center; padding: 4rem 2rem; }
.cta h2 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.cta p  { color: #64748b; margin-bottom: 1.5rem; }

/* ── Dashboard ────────────────────────────────────────────── */
.dashboard         { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
.dashboard-container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
.dashboard-header  { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.dashboard-header h1,
.dashboard-header h2 { font-size: 1.6rem; }
.dashboard-header p  { color: #64748b; margin-top: 4px; }

/* Stats Row */
.stats-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.stat-card {
  flex: 1;
  min-width: 130px;
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #e2e8f0;
}
.stat-num   { font-size: 2.2rem; font-weight: 800; color: #4f46e5; }
.stat-label { font-size: 0.8rem; color: #64748b; margin-top: 4px; font-weight: 500; }

.section        { margin-bottom: 2.5rem; }
.section h2     { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; color: #1e293b; }
.section-title  { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0 1rem; }
.section-title a { color: #4f46e5; font-size: 0.9rem; }
.logout-section { margin-top: 2rem; }
.empty-msg      { color: #94a3b8; font-size: 0.9rem; padding: 1rem 0; }

/* ── Notes Grid ───────────────────────────────────────────── */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
}
.note-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.4rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.2s;
}
.note-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.note-title      { font-size: 1rem; font-weight: 700; color: #1e293b; }
.note-meta       { font-size: 0.85rem; color: #64748b; }
.note-uni        { font-size: 0.82rem; color: #4f46e5; }
.note-views      { font-size: 0.8rem; color: #94a3b8; }
.note-footer     { display: flex; justify-content: space-between; font-size: 0.8rem; color: #94a3b8; margin-top: auto; padding-top: 8px; border-top: 1px solid #f1f5f9; }
.note-footer a   { color: #4f46e5; font-weight: 500; }
.note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

/* Note type badges */
.badge, .note-type {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  width: fit-content;
}
.badge-notes, .note-type.notes   { background: #ede9fe; color: #7c3aed; }
.badge-pyq,   .note-type.pyq     { background: #fef3c7; color: #d97706; }
.badge-book,  .note-type.book    { background: #dcfce7; color: #16a34a; }
.badge-other, .note-type.other   { background: #f1f5f9; color: #64748b; }

/* ── Browse Page ──────────────────────────────────────────── */
.browse-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.browse-page      { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }

.filter-bar,
.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 1.2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  margin-bottom: 1rem;
  align-items: center;
}
.filter-bar select, .filter-bar input,
.filter-form select, .filter-form input {
  padding: 0.6rem 1rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  flex: 1;
  min-width: 140px;
  background: #f8fafc;
}
.filter-bar select:focus, .filter-bar input:focus,
.filter-form select:focus, .filter-form input:focus {
  outline: none;
  border-color: #4f46e5;
}
.results-count { color: #64748b; font-size: 0.9rem; margin-bottom: 1rem; padding: 0 4px; }

/* ── Verification Badges ──────────────────────────────────── */
.badge-verified {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}
.badge-verified.gold { background: #fef3c7; color: #d97706; border: 1px solid #f59e0b; }
.badge-verified.blue { background: #dbeafe; color: #2563eb; border: 1px solid #3b82f6; }

/* ── Star Ratings ─────────────────────────────────────────── */
.star        { color: #d1d5db; font-size: 16px; }
.star.filled { color: #f59e0b; }
.note-rating { display: flex; align-items: center; gap: 3px; margin: 4px 0; }
.rating-text { font-size: 12px; color: #94a3b8; margin-left: 4px; }
.rating-avg  { font-size: 13px; color: #64748b; margin-left: 8px; }
.rating-form { margin: 12px 0; padding: 12px 16px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; }
.star-form   { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.star-btn {
  background: none; border: none; font-size: 22px;
  color: #d1d5db; cursor: pointer; padding: 2px;
  transition: color 0.15s; line-height: 1;
}
.star-btn:hover, .star-btn.active { color: #f59e0b; }

/* ── Management Table (Uni Dashboard) ────────────────────── */
.mgmt-table              { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; }
.mgmt-table th           { background: #1e293b; color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; }
.mgmt-table td           { padding: 10px 14px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.mgmt-table tbody tr:hover td { background: #f8fafc; }
.row-banned td           { background: #fef2f2 !important; }
.action-btns             { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.status-badge          { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.status-badge.verified { background: #dbeafe; color: #2563eb; }
.status-badge.pending  { background: #fef3c7; color: #d97706; }
.status-badge.banned   { background: #fee2e2; color: #dc2626; }

/* ── Students / Legacy Table ──────────────────────────────── */
.students-table          { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.students-table th       { background: #f8fafc; padding: 0.8rem 1rem; text-align: left; font-size: 0.85rem; color: #64748b; border-bottom: 1px solid #e2e8f0; }
.students-table td       { padding: 0.8rem 1rem; font-size: 0.9rem; border-bottom: 1px solid #f1f5f9; }

/* ── PDF Viewer ───────────────────────────────────────────── */
.viewer-page  { max-width: 1100px; margin: 2rem auto; padding: 0 2rem; }
.viewer-info  { background: #fff; padding: 1.5rem; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 1.5rem; }
.viewer-info h2 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.viewer-info p  { font-size: 0.85rem; color: #64748b; margin-top: 0.3rem; }

.pdf-toolbar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #fff; padding: 0.8rem 1.2rem; border-radius: 12px;
  margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
#page-info { font-size: 0.9rem; color: #64748b; font-weight: 500; }

.pdf-viewer, .pdf-viewer-container {
  background: #e2e8f0;
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.pdf-viewer-container { min-height: 750px; padding: 1rem; }

#pdf-canvas       { display: none; box-shadow: 0 4px 20px rgba(0,0,0,0.2); border-radius: 4px; max-width: 100%; }
#pdf-loading,
#pdf-loading-msg  { color: #64748b; font-size: 1rem; text-align: center; padding: 2rem; }
#pdf-error,
#pdf-error-msg p  { color: #dc2626; font-size: 0.95rem; text-align: center; }
#pdf-error-msg    { text-align: center; padding: 2rem; }
#pdf-error a      { color: #4f46e5; font-weight: 600; }

/* ── Profile Page ─────────────────────────────────────────── */
.profile-container    { max-width: 900px; margin: 30px auto; padding: 0 20px; }
.profile-card {
  background: #fff; border-radius: 16px; padding: 30px;
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin-bottom: 24px;
}
.profile-avatar       { font-size: 64px; line-height: 1; }
.profile-info         { flex: 1; min-width: 200px; }
.profile-info h1      { font-size: 1.6rem; margin-bottom: 4px; }
.profile-role         { color: #4f46e5; font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; }
.profile-info p       { color: #64748b; font-size: 0.9rem; margin-bottom: 4px; }
.profile-notes h2     { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }

.profile-rating-box   { text-align: center; min-width: 140px; }
.profile-rating-avg   { font-size: 3rem; font-weight: 800; color: #f59e0b; line-height: 1; }
.stars-display .star  { font-size: 20px; }
.rating-count         { color: #64748b; font-size: 13px; margin: 6px 0 12px; }
.rate-profile-form .star-buttons { display: flex; gap: 4px; justify-content: center; }

/* ── Empty State ──────────────────────────────────────────── */
.empty-state   { text-align: center; padding: 3rem; color: #94a3b8; }
.empty-state p { margin-bottom: 1rem; }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  text-align: center;
  padding: 2rem;
  color: #94a3b8;
  font-size: 0.85rem;
  border-top: 1px solid #e2e8f0;
  margin-top: 4rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero h1          { font-size: 2rem; }
  .nav-links a      { margin-left: 0.8rem; font-size: 0.8rem; }
  .form-row         { grid-template-columns: 1fr; }
  .stats-row        { gap: 10px; }
  .stat-card        { min-width: 100px; padding: 14px; }
  .stat-num         { font-size: 1.8rem; }
  .notes-grid       { grid-template-columns: 1fr; }
  .mgmt-table       { font-size: 12px; }
  .mgmt-table th,
  .mgmt-table td    { padding: 8px; }
  .profile-card     { flex-direction: column; align-items: center; text-align: center; }
  .viewer-info      { flex-direction: column; gap: 12px; }
  .filter-bar,
  .filter-form      { flex-direction: column; }
  .filter-bar select, .filter-bar input,
  .filter-form select, .filter-form input { min-width: unset; width: 100%; }
}

/* ── Notifications ────────────────────────────── */
.notifications-box {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.notifications-box h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  color: #1e293b;
}
.notification-item {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid #e2e8f0;
  background: #fef2f2;
}
.notification-item.read { background: #f8fafc; }
.notif-icon   { font-size: 22px; line-height: 1; padding-top: 2px; }
.notif-body   { flex: 1; }
.notif-message { font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 4px; }
.notif-reason  { font-size: 13px; color: #dc2626; margin-bottom: 4px; }
.notif-time    { font-size: 12px; color: #94a3b8; }

/* ── Delete Modal ─────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}
.modal-box h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.notif-delete-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
  line-height: 1;
}
.notif-delete-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.btn-primary, .btn-primary:visited {
  color: #fff !important;
}

/* ── Restricted Notes ─────────────────────────── */
.badge-restricted {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
}
.locked-note {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fef9f0;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 8px 10px;
  width: 100%;
}
.lock-icon { font-size: 14px; }
.lock-msg  { font-size: 12px; color: #92400e; font-weight: 500; line-height: 1.4; }

/* ── Navbar Avatar ────────────────────────────── */
/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  flex-wrap: nowrap;
}
.nav-logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: #4f46e5;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: nowrap;
  overflow: hidden;
}
.nav-links a {
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
  text-decoration: none;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.2s;
  border-radius: 6px;
}
.nav-links a:hover { color: #4f46e5; background: #f1f5f9; }
.nav-profile-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.3rem 0.6rem !important;
  border-radius: 20px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
}
.nav-profile-link:hover {
  border-color: #4f46e5 !important;
  background: #eef2ff !important;
  color: #4f46e5 !important;
}
.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #4f46e5;
  flex-shrink: 0;
}
.nav-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ede9fe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 2px solid #4f46e5;
  flex-shrink: 0;
}

/* Responsive navbar */
@media (max-width: 768px) {
  .navbar { padding: 0 1rem; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 0.3rem 0.4rem; font-size: 0.75rem; }
  .nav-logo { font-size: 1.1rem; }
}
/* ── Photo Upload Box ─────────────────────────── */
.photo-upload-box {
  border: 2px dashed #4f46e5;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background: #f5f3ff;
  transition: background 0.2s;
}
.photo-upload-box:hover { background: #ede9fe; }

/* ── Lucide Icons in navbar ───────────────────── */
.nav-logo svg,
.nav-links a svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
  stroke-width: 2;
}
.nav-logo svg { width: 20px; height: 20px; color: #4f46e5; }
.nav-logout { color: #ef4444 !important; }
.nav-logout:hover { background: #fef2f2 !important; color: #dc2626 !important; }

/* ── Verification Badge (Instagram/X style) ───── */
.vbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
}

/* Bigger size */
.vbadge svg {
  width: 26px;
  height: 26px;
  display: block;
  transition: transform 0.2s;
}
.vbadge:hover svg {
  transform: scale(1.15);
}

/* Tooltip on hover */
.vbadge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}
.vbadge:hover::after {
  opacity: 1;
}

/* Arrow under tooltip */
.vbadge::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}
.vbadge:hover::before {
  opacity: 1;
}

/* ── Visibility Toggle ────────────────────────── */
.visibility-toggle {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.vis-option {
  flex: 1;
  min-width: 160px;
  cursor: pointer;
}
.vis-option input[type="radio"] {
  display: none;
}
.vis-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  transition: all 0.2s;
}
.vis-option input[type="radio"]:checked + .vis-card {
  border-color: #4f46e5;
  background: #eef2ff;
}
.vis-card:hover {
  border-color: #a5b4fc;
  background: #f5f3ff;
}
.vis-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.vis-desc {
  font-size: 12px;
  color: #64748b;
  margin: 2px 0 0;
}

/* ── Admin specific badges ────────────────────── */
.vbadge-purple svg path { filter: drop-shadow(0 1px 2px rgba(124,58,237,0.4)); }
.vbadge-green  svg path { filter: drop-shadow(0 1px 2px rgba(22,163,74,0.4)); }

/* Admin action buttons */
.btn-purple {
  background: #7c3aed;
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}
.btn-purple:hover { background: #6d28d9; }

.btn-dual {
  background: #16a34a;
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}
.btn-dual:hover { background: #15803d; }

/* Status badges */
.status-badge.dual   { background: #dcfce7; color: #16a34a; }
.status-badge.purple { background: #ede9fe; color: #7c3aed; }

/* Badge type */
.badge-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* Role tabs on login */
.role-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.role-tab {
  flex: 1;
  padding: 10px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.role-tab.active {
  border-color: #4f46e5;
  background: #eef2ff;
  color: #4f46e5;
}

/* ── Action buttons in management tables ──────── */
.action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.btn-verify, .btn-warn, .btn-danger, .btn-purple, .btn-dual {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}

.btn-verify {
  background: #70bef5;
  color: #00223b;
}
.btn-verify:hover { background: #bbf7d0; }

.btn-warn {
  background: #fef3c7;
  color: #d97706;
}
.btn-warn:hover { background: #fde68a; }

.btn-danger {
  background: #fee2e2;
  color: #dc2626;
}
.btn-danger:hover { background: #fecaca; }

.btn-purple {
  background: #ede9fe;
  color: #7c3aed;
}
.btn-purple:hover { background: #ddd6fe; }

.btn-dual {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #16a34a;
}
.btn-dual:hover { background: #bbf7d0; }

/* ── Management table ─────────────────────────── */
.mgmt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.mgmt-table thead tr {
  background: #1e293b;
  color: #fff;
}
.mgmt-table th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.mgmt-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.mgmt-table tbody tr:hover { background: #f8fafc; }
.mgmt-table tbody tr:last-child td { border-bottom: none; }
.row-banned { background: #fef2f2 !important; }

/* Status badges in table */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-badge.verified  { background: #dbeafe; color: #1d4ed8; }
.status-badge.pending   { background: #f1f5f9; color: #64748b; }
.status-badge.banned    { background: #fee2e2; color: #dc2626; }
.status-badge.dual      { background: #dcfce7; color: #16a34a; }
.status-badge.purple    { background: #ede9fe; color: #7c3aed; }


.flagged-card {
  border: 2px solid #fca5a5 !important;
  background: #fff8f8 !important;
  position: relative;
}
.flagged-card::before {
  content: '⚠️ Flagged';
  position: absolute;
  top: -1px;
  right: 10px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 0 0 6px 6px;
}

/* Note Pricing toggle buttons */
.pricing-options {
  display: flex;
  gap: 12px;
}

.pricing-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  flex: 1;
  transition: all 0.2s ease;
  background: #fff;
}

.pricing-option input[type="radio"] {
  margin: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #3b82f6;
}

.pricing-option span {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.pricing-option:has(input:checked) {
  border-color: #3b82f6;
  background: #eff6ff;
}
.btn-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid #2563eb;
  color: #2563eb;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}

.btn-preview:hover {
  background: #eff6ff;
}

/* ── University Register: section divider ─────────────────── */
.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

/* ── Admin: notification tabs ─────────────────────────────── */
.notif-tab {
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.notif-tab:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
  color: #4f46e5;
}
.notif-tab-active {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}

/* ── Admin: btn-warn (yellow) ─────────────────────────────── */
.btn-warn {
  background: #fef9c3;
  border: 1px solid #fcd34d;
  color: #92400e;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-warn:hover { background: #fde68a; }


/* ══════════════════════════════════════════════════════════════
   MEETINGS — Dashboard Cards
══════════════════════════════════════════════════════════════ */
.meetings-section {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.meetings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.meetings-icon-wrap {
  width: 36px; height: 36px;
  background: #ede9fe;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #4f46e5;
}

.badge-pending-count {
  background: #dc2626;
  color: #fff;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  white-space: nowrap;
}

.meetings-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 6px;
}
.meetings-group-label--pending  { color: #92400e; background: #fffbeb; }
.meetings-group-label--confirmed { color: #15803d; background: #f0fdf4; margin-top: 16px; }

/* Meeting Card */
.mcard {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 10px;
  transition: box-shadow 0.2s;
}
.mcard:last-child { margin-bottom: 0; }
.mcard:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.mcard--pending  { border-color: #fcd34d; background: #fffdf0; }
.mcard--confirmed { border-color: #86efac; background: #f7fef9; }

.mcard__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mcard__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.mcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mcard__avatar--purple { background: #ede9fe; }
.mcard__avatar--green  { background: #dcfce7; }

.mcard__identity { flex: 1; min-width: 0; }
.mcard__name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcard__role {
  margin: 2px 0 0;
  font-size: 12px;
  color: #64748b;
  text-transform: capitalize;
}

.mcard__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mcard__status--pending   { background: #fef9c3; color: #92400e; }
.mcard__status--confirmed { background: #dcfce7; color: #15803d; }

.mcard__meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #475569;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.mcard__dot  { color: #cbd5e1; font-size: 10px; }
.mcard__quote { font-style: italic; color: #64748b; }

.mcard__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.mcard__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.mcard__btn:active { transform: scale(0.97); }

.mcard__btn--accept  { background: #16a34a; color: #fff; }
.mcard__btn--accept:hover  { background: #15803d; }
.mcard__btn--decline { background: #fee2e2; color: #dc2626; }
.mcard__btn--decline:hover { background: #fecaca; }
.mcard__btn--join    { background: #4f46e5; color: #fff; }
.mcard__btn--join:hover    { background: #4338ca; }
.mcard__btn--cancel  { background: #f1f5f9; color: #64748b; }
.mcard__btn--cancel:hover  { background: #e2e8f0; }

.mcard__countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 7px 12px;
  border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════
   SCHEDULE CALL — Profile Page Card
══════════════════════════════════════════════════════════════ */
.schedule-card {
  background: #fff;
  border: 1.5px solid #e0e7ff;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.schedule-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.schedule-card__icon {
  width: 42px; height: 42px;
  background: #ede9fe;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #4f46e5;
  flex-shrink: 0;
}
.schedule-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}
.schedule-card__sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.schedule-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.schedule-alert--error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.schedule-alert--success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

.schedule-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
}

.schedule-existing {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  font-size: 13px;
}

.schedule-trigger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.schedule-trigger-btn:hover { background: #4338ca; }

.schedule-form-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 14px 0;
}

.schedule-form { display: flex; flex-direction: column; gap: 12px; }

.schedule-form__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.schedule-form__field label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  display: flex;
  align-items: center;
}
.schedule-form__field label .required { color: #dc2626; margin-left: 3px; }
.schedule-form__field label .optional { color: #94a3b8; font-weight: 400; margin-left: 4px; }
.schedule-form__field input,
.schedule-form__field textarea {
  width: 100%;
  padding: 9px 13px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #1e293b;
  background: #fafafa;
  transition: border-color 0.15s;
  resize: vertical;
}
.schedule-form__field input:focus,
.schedule-form__field textarea:focus {
  outline: none;
  border-color: #4f46e5;
  background: #fff;
}

.schedule-form__info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.schedule-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.schedule-form__submit:hover { background: #4338ca; }