/* MUIT Alumni Management System — shared stylesheet
   One file for every page in /admin and /alumni. Brand tokens: maroon #8d1239, gold #b48a3c. */

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100vh; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f3f1f5;
  color: #1c2432;
}
img { max-width: 100%; display: block; }
a { color: #8d1239; text-decoration: none; }
a:hover { color: #6f0e2d; }
h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; margin: 0; color: #1c2432; }

/* Page shells (replace the old fixed-width 1440px wrapper) */
body.shell-page { background: #f3f1f5; }
body.shell-admin { display: grid; grid-template-columns: 250px 1fr; background: #f3f1f5; min-height: 100vh; }
body.shell-auth { display: grid; grid-template-columns: 1fr 560px; background: #f3f1f5; min-height: 100vh; }
body.shell-split { display: grid; background: #f3f1f5; min-height: 100vh; } /* grid-template-columns set inline per page */
@media (max-width: 900px) {
  body.shell-admin, body.shell-auth, body.shell-split { grid-template-columns: 1fr; }
}

/* Forms */
label { font-size: 13px; font-weight: 700; color: #1c2432; display: block; margin-bottom: 7px; }
input, select, textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #e7e3ea;
  font-size: 14px; font-family: 'Inter', sans-serif; color: #1c2432; background: #fff;
}
input::placeholder, textarea::placeholder { color: #aab2c0; }
.field { margin-bottom: 18px; }
.hint { font-size: 12px; color: #8792a3; margin-top: 5px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px; font-weight: 600; font-size: 13.5px;
  cursor: pointer; border: none; white-space: nowrap; font-family: 'Inter', sans-serif;
}
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-sm { padding: 9px 16px; font-size: 12.5px; }
.btn-primary { background: #8d1239; color: #fff; }
.btn-primary:hover { background: #701030; }
.btn-outline { background: #fff; color: #8d1239; border: 1.5px solid #8d1239; }
.btn-ghost { background: transparent; color: #526075; border: 1.5px solid #e7e3ea; }
.btn-white { background: #fff; color: #8d1239; }
.btn-gold { background: #b48a3c; color: #fff; }

/* Cards */
.card {
  background: #fff; border-radius: 18px;
  box-shadow: 0 2px 6px rgba(28,36,50,.04), 0 10px 22px rgba(28,36,50,.05);
}
.stat-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.badge-up { color: #3f7a52; font-size: 12px; font-weight: 700; background: #e7f0e9; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }

/* Chips, tags, badges */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px; background: #fbe9ee; color: #8d1239;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px;
}
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: #f3f1f5; border: 1px solid #e7e3ea; font-size: 12.5px; color: #526075; font-weight: 600; }
.chip-accent { background: #fbe9ee; border-color: #f3ccd7; color: #8d1239; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.tag.online { background: #e7f0e9; color: #3f7a52; }
.tag.offline { background: #f7ecd9; color: #a9711f; }
.tag.internship { background: #f7ecd9; color: #a9711f; }
.tag.referral { background: #e7f0e9; color: #3f7a52; }
.tag.fulltime { background: #fbe9ee; color: #8d1239; }

.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status.verified { background: #e7f0e9; color: #3f7a52; }
.status.pending { background: #f7ecd9; color: #a9711f; }
.status.blocked { background: #fbe4e2; color: #b3261e; }
.status.upcoming { background: #fbe9ee; color: #8d1239; }
.status.ongoing { background: #e7f0e9; color: #3f7a52; }
.status.completed { background: #f0eef2; color: #8792a3; }
.status.active { background: #e7f0e9; color: #3f7a52; }
.status.paused { background: #f7ecd9; color: #a9711f; }

.filter-chip, .filter-pill { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #526075; background: #fff; border: 1.5px solid #e7e3ea; }
.filter-chip.active, .filter-pill.active { background: #8d1239; color: #fff; border-color: #8d1239; }
.filter-label { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8792a3; margin-bottom: 10px; display: block; }
.filter-opt { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #1c2432; padding: 5px 0; }

.tab-pill { padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #526075; }
.tab-pill.active { background: #8d1239; color: #fff; }
.tab { font-size: 14px; font-weight: 700; color: #8792a3; padding: 14px 4px; border-bottom: 2px solid transparent; }
.tab.active { color: #8d1239; border-bottom: 2px solid #8d1239; }

.amt { padding: 13px; border-radius: 12px; border: 1.5px solid #e7e3ea; text-align: center; font-weight: 700; font-size: 14.5px; color: #1c2432; }
.amt.active { background: #8d1239; color: #fff; border-color: #8d1239; }
.toggle { display: flex; background: #f3f1f5; border-radius: 999px; padding: 4px; }
.toggle-opt { flex: 1; text-align: center; padding: 9px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #526075; }
.toggle-opt.active { background: #fff; color: #8d1239; box-shadow: 0 2px 6px rgba(28,36,50,.08); }

.channel { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-radius: 12px; border: 1.5px solid #e7e3ea; }
.channel.active { border-color: #8d1239; background: #fbe9ee; }

.switch { width: 38px; height: 22px; border-radius: 999px; background: #e7e3ea; position: relative; flex-shrink: 0; }
.switch.on { background: #8d1239; }
.switch .knob { width: 16px; height: 16px; border-radius: 999px; background: #fff; position: absolute; top: 3px; left: 3px; }
.switch.on .knob { left: 19px; }

.radio-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1.5px solid #e7e3ea; border-radius: 12px; }

/* Icons & avatars */
.crest { width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(145deg,#8d1239,#6f0e2d); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #f3e6cc; flex-shrink: 0; }

/* Crest logo badges (sidebar/navbar/auth marks): the source crest has a thin
   outer ring of small text that turns to noise below ~50px and its square
   canvas has transparent corners that peek past a rounded container with no
   clipping. Clip to a true circle and zoom past the illegible ring so only
   the readable tree/MUIT mark shows. */
*:has(> img[alt="Maharishi University"]) { overflow: hidden; }
img[alt="Maharishi University"] { object-fit: cover; transform: scale(1.55); }
.icon-btn { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #e7e3ea; background: #fff; }

/* Navigation */
.navlink { font-size: 14.5px; font-weight: 600; color: #526075; padding: 8px 2px; border-bottom: 2px solid transparent; }
.navlink.active { color: #8d1239; border-bottom: 2px solid #8d1239; }
.side-link { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #d8c3cd; }
.side-link.active { background: rgba(255,255,255,.08); color: #fff; }
.settings-nav { font-size: 13.5px; font-weight: 700; color: #526075; padding: 10px 14px; border-radius: 10px; display: block; }
.settings-nav.active { background: #fbe9ee; color: #8d1239; }

/* Community groups / feed */
.group-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; }
.group-item.active { background: #fbe9ee; }
.group-icon { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; }
.action { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #8792a3; font-weight: 600; }
.info-row { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: #1c2432; padding: 10px 0; border-bottom: 1px solid #f0eef2; }

/* Section headers (forms) */
.sec-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8d1239; margin: 0 0 20px; }
.sec-num { width: 24px; height: 24px; border-radius: 999px; background: #8d1239; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-family: 'Inter', sans-serif; flex-shrink: 0; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: #8792a3; font-weight: 800; padding: 12px 14px; border-bottom: 1.5px solid #f0eef2; }
td { padding: 14px; font-size: 13.5px; border-bottom: 1px solid #f0eef2; vertical-align: middle; }

/* Notification / profile dropdowns (native <details>) */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-panel { position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border-radius: 14px; box-shadow: 0 14px 34px rgba(28,36,50,.16); border: 1px solid #e7e3ea; padding: 8px; z-index: 30; }
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: #1c2432; }
.dropdown-item:hover { background: #f3f1f5; }
.dropdown-item.danger { color: #b3261e; }
.notif-item { display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px; align-items: flex-start; }
.notif-item:hover { background: #f3f1f5; }
.notif-dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; flex-shrink: 0; }