/* ============================================================
   Adarsh Vidhya Mandir — Alumni Network
   Global stylesheet (single file for the whole site)
   Sections:  1. Tokens  2. Base  3. Layout
              4. Brand panel  5. Form & components  6. Responsive
   Primary brand colour: #012952
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand navy */
  --navy-900: #011c3a;
  --navy-800: #012952;   /* PRIMARY */
  --navy-700: #0a3562;
  --navy-600: #14487d;
  --navy-100: #dbe6f2;
  --navy-50:  #eef3f9;

  --primary: var(--navy-800);
  --primary-hover: var(--navy-700);
  --primary-active: var(--navy-900);

  /* Muted gold — used sparingly as an accent only */
  --gold: #b0872f;
  --gold-soft: #c9a227;

  /* Neutrals (professional slate scale) */
  --ink-900: #101828;   /* headings */
  --ink-700: #344054;   /* body */
  --ink-600: #475467;   /* labels  */
  --ink-500: #667085;   /* secondary */
  --ink-400: #98a2b3;   /* placeholder */
  --line:    #e4e7ec;
  --line-2:  #d0d5dd;

  --bg:       #f4f6f9;  /* app background */
  --surface:  #ffffff;
  --surface-2:#fafbfc;

  --danger: #d92d20;
  --success:#12805c;

  /* Type — one professional family */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing (4px base) */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-7:2rem;  --sp-8:2.5rem;
  --sp-9:3rem;    --sp-10:4rem;

  /* Radius */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(16,24,40,.05);
  --sh-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --sh-md: 0 8px 20px rgba(16,24,40,.10);
  --sh-lg: 0 20px 45px rgba(1,28,58,.18);
  --ring:  0 0 0 4px rgba(20,72,125,.14);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: 180ms;

  --form-max: 640px;
  --z-pop: 500;
}

/* ---------- 2. BASE / RESET ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }

html { -webkit-text-size-adjust:100%; }

body {
  font-family: var(--font);
  font-size: .9375rem;          /* 15px */
  line-height: 1.55;
  color: var(--ink-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}

img,svg { display:block; max-width:100%; }

/* Elements that also carry an explicit "display" rule (flex/grid cards,
   etc.) would otherwise override the browser's default [hidden]{display:
   none} — this keeps the native hidden attribute always winning. */
[hidden] { display:none !important; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; padding:0; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

h1,h2,h3,h4 { color:var(--ink-900); line-height:1.2; font-weight:700; letter-spacing:-.011em; }

:focus-visible { outline:2px solid var(--navy-600); outline-offset:2px; }

/* thin scrollbars */
* { scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition-duration:.001ms!important; animation-duration:.001ms!important; }
}

/* ---------- 3. LAYOUT ---------- */
.auth {
  display: grid;
  grid-template-columns: 740px 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.panel {
  background: var(--surface);
  display: flex;
  justify-content: center;
  overflow-y: auto;
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
.panel__inner {
  width: 100%;
  max-width: var(--form-max);
  align-self: flex-start;
  margin: auto 0;
}

/* ---------- 4. BRAND PANEL ---------- */
.brand {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(130% 80% at 85% 0%, rgba(201,162,39,.14), transparent 55%),
    linear-gradient(165deg, var(--navy-700) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
  padding: clamp(2rem, 3.5vw, 3.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
}

.brand {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(
      130% 80% at 85% 0%,
      rgba(201, 162, 39, 0.14),
      transparent 55%
    ),
    linear-gradient(
      165deg,
      var(--navy-700) 0%,
      var(--navy-800) 45%,
      var(--navy-900) 100%
    );
  padding: clamp(2rem, 3.5vw, 3.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
}

/* Sirf login page ke liye background image */
.brand.login_bgs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image: url("../images/bg_login.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  opacity: 0.1;
  pointer-events: none;
}


/* faint grid texture — subtle, professional */
.brand::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image: radial-gradient(80% 60% at 70% 10%, #000, transparent 75%);
}

.brand__logo { position:relative; display:flex; align-items:center; gap:var(--sp-3); }
.logo-mark {
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-md);
  background:#fff; color:var(--navy-800);
  font-weight:800; font-size:1.35rem;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.logo-mark--sm { width:40px; height:40px; font-size:1.15rem; }
.brand__name { font-size:1.0625rem; font-weight:700; line-height:1.2; letter-spacing:-.01em; color:#fff; }
.brand__sub  { display:block; font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:3px; }

.brand__body { position:relative; margin-top:auto; }
.brand__eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:var(--sp-4);
}
.brand__eyebrow::before{ content:""; width:22px; height:1px; background:var(--gold-soft); }
.brand__headline { color:#fff; font-size:clamp(1.9rem,2.6vw,2.5rem); line-height:1.12; font-weight:700; }
.brand__lead { margin-top:var(--sp-4); color:rgba(255,255,255,.75); font-size:.9375rem; line-height:1.6;}

/* testimonial / quote card — adds trust + polish */
.quote {
  position:relative;
  margin-top:var(--sp-7);
  padding:var(--sp-5);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  backdrop-filter:blur(2px);
}
.quote p { color:rgba(255,255,255,.9); font-size:.9375rem; line-height:1.55; }
.quote footer { margin-top:var(--sp-3); font-size:.8125rem; color:rgba(255,255,255,.6); }
.quote footer b { color:#fff; font-weight:600; }

.brand__stats { position:relative; display:flex; gap:var(--sp-8); padding-top:var(--sp-2); }
.stat b { display:block; font-size:1.5rem; font-weight:700; color:#fff; letter-spacing:-.01em; }
.stat span { font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }

/* mobile header (hidden on desktop) */
.topbar { display:none; }

/* ---------- 5. FORM & COMPONENTS ---------- */
.form-head { margin-bottom:var(--sp-6); }
.form-head__eyebrow {
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
}
.form-head h1 { font-size:1.625rem; margin-top:var(--sp-2); }
.form-head p  { margin-top:var(--sp-2); color:var(--ink-500); max-width:48ch; }

/* tighter vertical rhythm keeps the whole form closer to one screen */
.form { display:flex; flex-direction:column; gap:var(--sp-6); }

/* logical section grouping — the real UX win for a long form */
.section { display:flex; flex-direction:column; gap:var(--sp-3); }
.section__head { display:flex; flex-direction:column; gap:2px; padding-bottom:var(--sp-1); border-bottom:1px solid var(--line); }
.section__title {
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-900);
  display:flex; align-items:center; gap:8px;
}
.section__title .num {
  width:20px; height:20px; flex:none; display:grid; place-items:center;
  border-radius:6px; background:var(--navy-50); color:var(--primary);
  font-size:.6875rem; font-weight:700;
}
.section__desc { font-size:.8125rem; color:var(--ink-500); padding-left:28px; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }

/* 4-up row — used to fit "joined year / left year / starting class /
   leaving class" on a single line on wide screens instead of two rows,
   which is what actually shortens the page (no fields are removed). */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }

/* Field */
.field { display:flex; flex-direction:column; gap:6px; }
.field__label {
  font-size:.8125rem;           /* 13px */
  font-weight:600;
  color:var(--ink-700);         /* darker, readable label */
  letter-spacing:0;
}
.field__req { color:var(--danger); margin-left:2px; }
.field__error { font-size:.8125rem; color:var(--danger); min-height:0; }

/* Label + trailing link on the same line (e.g. Password / Forgot password?) */
.field__label-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.field__link { font-size:.8125rem; font-weight:600; color:var(--gold); }
.field__link:hover { color:var(--gold-soft); }

/* Shared control look */
.control {
  width:100%;
  height:48px;
  padding:0 .875rem;
  font-size:.9375rem;
  color:var(--ink-900);
  background:var(--surface);
  border:1.5px solid var(--line-2);
  border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.control::placeholder { color:var(--ink-400); }
.control:hover { border-color:#b6bdc9; }
.control:focus,.control:focus-visible { outline:none; border-color:var(--navy-600); box-shadow:var(--ring); }
.control.is-invalid { border-color: var(--danger); }
.control.is-invalid:focus, .control.is-invalid:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(217, 45, 32, .14); }

textarea.control { height:auto; min-height:96px; padding:.75rem .875rem; resize:vertical; line-height:1.55; }

/* control with trailing icon */
.control-wrap { position:relative; }
.control-wrap .control { padding-right:2.75rem; }
.control-wrap__icon {
  position:absolute; top:50%; right:.875rem; transform:translateY(-50%);
  color:var(--ink-400); pointer-events:none;
  transition:transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.control-wrap:focus-within .control-wrap__icon { color:var(--navy-600); }

/* native select reset */
select.control { appearance:none; -webkit-appearance:none; cursor:pointer; }
select.control:invalid { color:var(--ink-400); }   /* show placeholder colour until chosen */

/* password reveal */
.reveal {
  position:absolute; top:50%; right:.375rem; transform:translateY(-50%);
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:var(--r-sm); color:var(--ink-500);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.reveal:hover { color:var(--navy-700); background:var(--navy-50); }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:50px; padding:0 1.5rem;
  font-size:.9375rem; font-weight:600; color:#fff;
  background:var(--primary); border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { background:var(--primary-hover); box-shadow:var(--sh-md); }
.btn:active { transform:translateY(1px); background:var(--primary-active); }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn--block { width:100%; }
.btn--lg { height:54px; font-size:1rem; }
.btn__arrow { transition:transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform:translateX(3px); }

.hint { display:flex; align-items:center; gap:8px; font-size:.8125rem; color:var(--ink-500); }
.hint svg { flex:none; color:var(--gold); }

.foot { margin-top:var(--sp-6); text-align:center; color:var(--ink-500); }
.foot a { font-weight:600; }

/* "or" divider between a primary action and an alternate one */
.divider { position:relative; text-align:center; margin:var(--sp-6) 0; }
.divider::before {
  content:""; position:absolute; top:50%; left:0; right:0; height:1px;
  background:var(--line);
}
.divider span {
  position:relative; z-index:1;
  background:var(--surface); padding:0 var(--sp-3);
  font-size:.8125rem; color:var(--ink-500);
}

/* ---- Year picker (custom, JS-driven) ---- */
.yp { position:relative; }
.yp__trigger { text-align:left; display:flex; align-items:center; }
.yp__trigger[data-empty="true"] .yp__label { color:var(--ink-400); }
.yp.is-open .yp__trigger { border-color:var(--navy-600); box-shadow:var(--ring); }
.yp.is-open .control-wrap__icon { transform:translateY(-50%) rotate(180deg); }

.yp__pop {
  position:absolute; z-index:var(--z-pop);
  top:calc(100% + 8px); left:0;
  width:min(300px,86vw);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:var(--sp-4);
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top left;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.yp.is-open .yp__pop { opacity:1; transform:none; pointer-events:auto; }
.yp__pop[data-align="right"] { left:auto; right:0; transform-origin:top right; }

.yp__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.yp__nav { width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-sm); color:var(--ink-700); transition:background var(--dur) var(--ease); }
.yp__nav:hover:not(:disabled){ background:var(--navy-50); color:var(--navy-700); }
.yp__nav:disabled { opacity:.3; cursor:not-allowed; }
.yp__range { font-size:.875rem; font-weight:600; color:var(--ink-900); }

.yp__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.yp__year {
  padding:.55rem 0; font-size:.875rem; font-weight:500; color:var(--ink-700);
  border-radius:var(--r-sm); border:1px solid transparent;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.yp__year:hover:not(:disabled){ background:var(--navy-50); color:var(--navy-800); }
.yp__year:disabled { opacity:.3; cursor:not-allowed; }
.yp__year.is-selected { background:var(--primary); color:#fff; box-shadow:var(--sh-sm); }

/* ---------- 6. RESPONSIVE ----------
   Sidebar is a fixed 740px, so it needs to collapse earlier
   than a typical 900px breakpoint — otherwise the form column
   gets squeezed into a thin sliver on laptop-sized screens
   before the stacked layout kicks in. */
@media (max-width: 1180px){
  .auth { grid-template-columns:1fr; }
  .brand { display:none; }

  .topbar {
    align-items:center; gap:var(--sp-3);
    position:sticky; top:0; z-index:100;
    padding:var(--sp-4) var(--sp-5);
    color:#fff;
    background:linear-gradient(150deg, var(--navy-700), var(--navy-900));
    box-shadow:var(--sh-md);
  }
  .topbar .brand__name { font-size:.9375rem; }

  .panel { background:var(--bg); padding:var(--sp-6) var(--sp-5) var(--sp-9); }
  .panel__inner { margin:0 auto; }
  .form-head h1 { font-size:1.5rem; }
  .grid-4 { grid-template-columns:1fr 1fr; }   /* 2x2 once stacked, still one screenful */
}

@media (max-width: 520px){
  .grid-2 { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:1fr; }
  .panel { padding-inline:var(--sp-4); }
}


/* ============================================================
   7. DASHBOARD PAGE (alumni-dashboard.html)
   Site header · welcome hero · toolbar/filters · alumni grid ·
   pagination. Shares every token/utility above with the auth
   pages — nothing page-specific is duplicated.
   ============================================================ */

/* Curated avatar palette. A name is hashed to one of these in
   script.js, so colours stay consistent for a person but read as
   an intentional set rather than random per-card colours. */
.av-1 { background:#0f4c5c; }
.av-2 { background:#5b4b8a; }
.av-3 { background:#a1521f; }
.av-4 { background:#2f6f4e; }
.av-5 { background:#8a3b5c; }
.av-6 { background:var(--gold-600, #a9821f); }
.av-7 { background:#33587a; }
.av-8 { background:#5c6470; }

/* ---- Site header (shared shell for every logged-in page) ---- */
.site-header {
  position: sticky; top:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-3) clamp(var(--sp-5), 4vw, var(--sp-9));
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.site-header__brand { display:flex; align-items:center; gap:var(--sp-3); }
.site-header .logo-mark { background:var(--primary); color:#fff; box-shadow:none; }
.site-header .brand__name { color:var(--ink-900); }
.site-header .brand__sub { color:var(--ink-500); }
.site-header__brand img{width:290px}
.brand_white_logo{width: 330px;}
/* ---- Header profile dropdown ---- */
.profile-menu { position:relative; }

.userchip {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:.35rem .5rem .35rem .35rem;
  border-radius:var(--r-lg);
  transition:background var(--dur) var(--ease);
}
.userchip:hover { background:var(--navy-50); }
.userchip__id { display:flex; align-items:center; gap:var(--sp-3); }
.userchip__avatar {
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-md); color:#fff; font-weight:700; font-size:.8125rem;
}
.userchip__name { font-size:.875rem; font-weight:600; color:var(--ink-900); text-align:left; }
.userchip__role { display:block; font-size:.75rem; color:var(--ink-500); text-align:left; }

.profile-menu__chevron { color:var(--ink-400); transition:transform var(--dur) var(--ease); }
.profile-menu.is-open .profile-menu__chevron,
.profile-menu:hover .profile-menu__chevron { transform:rotate(180deg); }

.profile-menu__panel {
  position:absolute; top:calc(100% + 8px); right:0; z-index:250;
  min-width:190px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:.4rem;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.profile-menu__panel.is-open {
  opacity:1; transform:none; pointer-events:auto;
}
/* Convenience for mouse users: hover reveals it without a click.
   Touch devices (no real hover) rely purely on the click toggle in script.js. */
@media (hover:hover) and (pointer:fine) {
  .profile-menu:hover .profile-menu__panel { opacity:1; transform:none; pointer-events:auto; }
}

.profile-menu__link {
  display:flex; align-items:center; gap:10px;
  padding:.6rem .75rem; border-radius:var(--r-sm);
  font-size:.875rem; font-weight:500; color:var(--ink-700);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.profile-menu__link:hover { background:var(--navy-50); color:var(--navy-800); text-decoration:none; }
.profile-menu__link svg { color:var(--ink-400); flex:none; }
.profile-menu__link--danger { color:var(--danger); }
.profile-menu__link--danger svg { color:var(--danger); }
.profile-menu__link--danger:hover { background:#fef2f1; color:var(--danger); }
.profile-menu__divider { height:1px; background:var(--line); margin:.3rem .2rem; }

/* ---- Hero / welcome band ---- */
.hero {
  position:relative; overflow:hidden;
  color:#fff;
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(201,162,39,.14), transparent 55%),
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  padding:clamp(1.125rem, 2.2vw, 1.5rem) clamp(var(--sp-5), 4vw, var(--sp-9));
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-7); flex-wrap:wrap;
}
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image: radial-gradient(70% 100% at 85% 0%, #000, transparent 70%);
}
.hero__copy { position:relative; max-width:44ch; }
.hero__eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); }
.hero__title { color:#fff; font-size:clamp(1.375rem, 2vw, 1.625rem); margin-top:4px; }
.hero__lead { margin-top:6px; color:rgba(255,255,255,.75); font-size:.875rem; }

.hero__stats { position:relative; display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.hero-stat {
  min-width:96px;
  padding:.6rem var(--sp-4);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);
  backdrop-filter:blur(2px);
  text-align:center;
}
.hero-stat b { display:block; font-size:1.25rem; font-weight:700; color:#fff; }
.hero-stat span { font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* ---- Directory container ---- */
.directory { padding:var(--sp-5) clamp(var(--sp-5), 4vw, var(--sp-9)) var(--sp-10); }

.directory__head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5);
  margin-bottom:var(--sp-4); flex-wrap:wrap;
}
.directory__head h2 { font-size:1.375rem; }
.directory__head p { color:var(--ink-500); font-size:.875rem; margin-top:2px; }

.search-box { position:relative; width:100%; }
.search-box svg {
  position:absolute; top:50%; left:.875rem; transform:translateY(-50%); color:var(--ink-400);
}
.search-box .control { padding-left:2.6rem; height:46px; }

/* ---- Filter card ----
   Search + every filter + sort + clear, all inside one visible,
   bordered card — nothing hides behind a toggle button. */
.filter-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);
  padding:var(--sp-5);
  margin-bottom:var(--sp-6);
}
/* Search shares the same row as the other filters — just wider,
   since it's the field people reach for first/most. */
.filter-card__grid {
  display:grid;
  grid-template-columns:1.7fr repeat(5, 1fr);
  gap:var(--sp-4);
}
.filter-card__grid .field { min-width:0; }
.filter-card__grid .yp__pop { width:min(280px,86vw); }
.filter-card__grid .control { height:46px; }

.filter-card__foot {
  display:flex; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-4); padding-top:var(--sp-4);
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}

.clear-filters {
  margin-left:auto;
  font-size:.8125rem; font-weight:600; color:var(--navy-700);
  padding:.4rem .2rem; white-space:nowrap;
}

/* ---- Active filter chips ---- */
.chips-row { display:flex; flex-wrap:wrap; gap:8px; flex:1; }
.chips-row:empty { display:none; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 .5rem 0 .85rem;
  font-size:.8125rem; font-weight:500; color:var(--navy-700);
  background:var(--navy-50); border:1px solid var(--navy-100);
  border-radius:var(--r-pill);
  transition:background var(--dur) var(--ease);
}
.chip:hover { background:var(--navy-100); }
.chip svg { color:var(--navy-600); }

/* ---- Alumni grid + card ---- */
.alumni-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--sp-5);
}
.alumni-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow:var(--sh-xs);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.alumni-card:hover { box-shadow:var(--sh-md); transform:translateY(-2px); border-color:var(--line-2); }

.alumni-card__avatar {
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:var(--r-lg); color:#fff; font-weight:700; font-size:1.0625rem;
  margin-bottom:var(--sp-3); box-shadow:var(--sh-sm);
}
.alumni-card__name { font-size:1rem; font-weight:700; color:var(--ink-900); }
.alumni-card__batch { font-size:.8125rem; color:var(--ink-600); font-weight:600; margin-top:2px; }
.alumni-card__class { font-size:.8125rem; color:var(--ink-500); }
.alumni-card__meta {
  font-size:.8125rem; color:var(--ink-500);
  margin-top:var(--sp-2); padding-top:var(--sp-2);
  border-top:1px dashed var(--line); width:100%;
}
.alumni-card__cta { margin-top:var(--sp-4); height:42px; font-size:.875rem; }

/* ---- Empty state ---- */
.empty-state {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-3); padding:var(--sp-10) var(--sp-5);
  color:var(--ink-500);
}
.empty-state svg { color:var(--ink-400); }
.empty-state h3 { color:var(--ink-900); font-size:1.0625rem; }

/* ---- Pagination ---- */
.pagination { display:flex; justify-content:center; gap:6px; margin-top:var(--sp-8); flex-wrap:wrap; }
.page-btn {
  min-width:38px; height:38px; padding:0 .6rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  font-size:.8125rem; font-weight:600; color:var(--ink-700);
  background:var(--surface);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-btn:hover:not(:disabled) { background:var(--navy-50); border-color:var(--navy-100); color:var(--navy-800); }
.page-btn.is-active { background:var(--primary); border-color:var(--primary); color:#fff; }
.page-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ============================================================
   8. DASHBOARD RESPONSIVE
   All filters stay visible at every width — only the column
   count of the filter-card grid and the alumni grid changes.
   ============================================================ */
@media (max-width: 1080px){
  .alumni-grid { grid-template-columns:repeat(3, 1fr); }
  .filter-card__grid { grid-template-columns:repeat(3, 1fr); }
}

@media (max-width: 860px){
  .alumni-grid { grid-template-columns:repeat(2, 1fr); }
  .filter-card__grid { grid-template-columns:repeat(2, 1fr); }
  .hero { flex-direction:column; align-items:flex-start; }

  .directory__head { flex-direction:column; align-items:stretch; }

  .profile-menu__panel { right:0; left:auto; }
}

@media (max-width: 560px){
  .alumni-grid { grid-template-columns:1fr; }
  .filter-card__grid { grid-template-columns:1fr; }
  .filter-card { padding:var(--sp-4); }
  .hero-stat { min-width:0; flex:1; }
  .site-header .brand__sub { display:none; }
  .userchip__role { display:none; }
  .filter-card__foot { flex-direction:column; align-items:stretch; }
  .clear-filters { margin-left:0; text-align:center; }
  .userchip__avatar, .hero__stats{display: none;}
  .userchip{padding: 0;}
  .site-header{padding:15px 10px;}
  .site-header__brand img{width: 160px;}

}


/* ---- Back-to-Dashboard link ----
   Shown on every page except the dashboard itself, so there's
   always a way back to it. */
.back-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.875rem; font-weight:600; color:var(--ink-600);
  margin-bottom:var(--sp-4);
}
.back-link:hover { color:var(--navy-700); text-decoration:none; }


/* ============================================================
   9. PROFILE PAGE (profile.html)
   Cover photo + avatar · locked-fields notice · a generic
   ".card" (reused for the details and change-password sections)
   · two-column layout.
   ============================================================ */

/* Generic bordered card — the same shape .alumni-card and
   .filter-card use, factored out so new sections don't redefine
   border/radius/shadow/padding again. */
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);
  padding:var(--sp-6);
}
.card + .card { margin-top:var(--sp-6); }
.card__title { font-size:1.0625rem; }
.card__sub { margin-top:2px; font-size:.8125rem; color:var(--ink-500); }
.card__title + .card__sub + .form,
.card__title + .form { margin-top:var(--sp-5); }
.profile-form-section {
  padding-top:var(--sp-5);
  margin-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.profile-form-section:first-of-type { padding-top:0; margin-top:0; border-top:0; }
.profile-form-section__title {
  margin-bottom:var(--sp-4);
  color:var(--ink-800);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Small square icon badge used above a heading (verify-otp,
   review). One shared definition instead of a copy per page. */
.icon-badge {
  width:64px; height:64px; margin:0 auto var(--sp-5);
  display:grid; place-items:center;
  background:var(--primary); color:var(--gold-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
}

.profile-page { max-width:1080px; margin:0 auto; padding:var(--sp-7) clamp(var(--sp-5), 4vw, var(--sp-7)) var(--sp-10); }

/* ---- Cover + avatar ---- */
.profile-cover {
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(201,162,39,.16), transparent 55%),
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  padding:var(--sp-6) var(--sp-6) var(--sp-7);
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
}
/* Avatar + name/role/badges, kept together as one left-aligned
   block with a fixed 30px gap — independent of the outer gap
   used to push the "Change photo" button to the far side. */
.profile-cover__identity { display:flex; align-items:flex-end; gap:30px; }
.profile-cover__avatar-wrap { position:relative; flex:none; }
.profile-cover__avatar, .profile-cover__avatar-img {
  width:88px; height:88px; border-radius:var(--r-lg);
  display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:1.75rem;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  border:3px solid rgba(255,255,255,.25);
}
.profile-cover__avatar-img { object-fit:cover; }

.profile-cover__info { color:#fff; padding-bottom:2px; }
.profile-cover__info h1 { color:#fff; font-size:1.375rem; }
.profile-cover__info p { color:rgba(255,255,255,.75); font-size:.9375rem; margin-top:2px; }

.profile-cover__meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--sp-3); }
.badge {
  display:inline-flex; align-items:center; height:26px; padding:0 .7rem;
  font-size:.75rem; font-weight:600; letter-spacing:.02em;
  color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2); border-radius:var(--r-pill);
}

.profile-cover__photo-btn {
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 var(--sp-4);
  font-size:.8125rem; font-weight:600; color:#fff;
  border:1.5px solid rgba(255,255,255,.35); border-radius:var(--r-md);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.profile-cover__photo-btn:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); }

/* ---- Locked-fields notice ---- */
.notice {
  display:flex; align-items:center; gap:10px;
  margin-top:var(--sp-6);
  padding:var(--sp-4) var(--sp-5);
  background:rgba(217,154,43,.1);
  border:1px solid rgba(217,154,43,.3);
  border-radius:var(--r-md);
  font-size:.875rem; color:#8a6414;
}
.notice svg { flex:none; color:var(--warning); }

/* ---- Two-column layout ---- */
.profile-grid {
  display:grid; grid-template-columns:1.6fr 1fr; gap:var(--sp-6);
  align-items:start;
  margin-top:var(--sp-6);
}

/* Locked / read-only inputs (email, mobile) */
.control[disabled] { background:var(--surface-2); color:var(--ink-500); cursor:not-allowed; }
.field__label--locked { display:flex; align-items:center; gap:6px; }
.field__label--locked svg { color:var(--ink-400); }

.form__actions {
  display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-3);
  margin-top:var(--sp-2);
}
.btn--outline {
  background:transparent; color:var(--ink-700);
  border:1.5px solid var(--line-2); box-shadow:none;
}
.btn--outline:hover { background:var(--navy-50); color:var(--navy-800); }


/* ============================================================
   10. PROFILE RESPONSIVE
   ============================================================ */
@media (max-width: 860px){
  .profile-grid { grid-template-columns:1fr; }
}

@media (max-width: 560px){
  .profile-page { padding-inline:var(--sp-4); }
  .profile-cover { flex-direction:column; align-items:flex-start; padding:var(--sp-5); }
  .profile-cover__identity { gap:var(--sp-4); }
  .form__actions { flex-direction:column-reverse; align-items:stretch; }
  .card { padding:var(--sp-4); }
}


/* ============================================================
   11. VERIFY OTP PAGE (verify-otp.html)
   A single centered card — this step is a short, focused
   interruption in the registration flow, not a full app page,
   so it skips the site header entirely.
   ============================================================ */
.otp-page {
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-5);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(1,41,82,.06), transparent 65%),
    var(--bg);
}

.otp-card {
  width:100%; max-width:440px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  padding:var(--sp-8) var(--sp-7);
  text-align:center;
}


.otp-card h1 { font-size:1.5rem; }
.otp-card__sub { margin-top:var(--sp-2); color:var(--ink-500); font-size:.9375rem; }
.otp-card__phone { color:var(--ink-900); font-weight:700; }

.otp-inputs { display:flex; justify-content:center; gap:10px; margin:var(--sp-7) 0 var(--sp-3); }
.otp-digit {
  width:48px; height:56px;
  text-align:center; font-size:1.375rem; font-weight:700;
  color:var(--ink-900);
  background:var(--surface-2);
  border:1.5px solid var(--line-2); border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.otp-digit.is-filled { background:var(--surface); border-color:var(--navy-100); }
.otp-digit:focus { outline:none; border-color:var(--navy-600); box-shadow:var(--ring); background:var(--surface); }
.otp-digit.is-error { border-color:var(--danger); }

.otp-error { min-height:1.1em; margin-bottom:var(--sp-2); font-size:.8125rem; color:var(--danger); }

.otp-resend { margin-top:var(--sp-4); font-size:.875rem; }
.otp-resend button { font-weight:700; color:var(--primary); }
.otp-resend button:disabled { color:var(--ink-400); cursor:not-allowed; }
.otp-resend__timer { display:block; margin-top:4px; color:var(--ink-500); font-size:.8125rem; }

.otp-back {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:var(--sp-6); font-size:.875rem; color:var(--ink-500);
}
.otp-back:hover { color:var(--navy-700); text-decoration:none; }

@media (max-width: 420px){
  .otp-card { padding:var(--sp-6) var(--sp-5); }
  .otp-inputs { gap:8px; }
  .otp-digit { width:40px; height:48px; font-size:1.125rem; }
}


/* ============================================================
   12. REVIEW PAGE (review.html)
   A short, centered card — same "just one focused thing" shape
   as the OTP page, but inside the logged-in app shell (header +
   back-link), since reviews are only left after signing in.
   ============================================================ */
.review-page { max-width:560px; margin:0 auto; padding:var(--sp-7) clamp(var(--sp-5), 4vw, var(--sp-7)) var(--sp-10); }

.review-card { text-align:center; padding:var(--sp-8) var(--sp-7); }
.review-card h1 { font-size:1.5rem; }
.review-card__sub { margin-top:var(--sp-2); color:var(--ink-500); font-size:.9375rem; max-width:38ch; margin-inline:auto; }

.review-form { text-align:left; margin-top:var(--sp-6); }

/* ---- Star rating ---- */
.star-rating { display:flex; justify-content:center; gap:4px; }
.star-rating__star {
  width:44px; height:44px; display:grid; place-items:center;
  color:var(--line-2);
  transition:color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.star-rating__star svg { width:30px; height:30px; }
.star-rating__star:hover { transform:scale(1.08); }
.star-rating__star.is-hover,
.star-rating__star.is-selected { color:var(--gold); }

.star-rating__label { min-height:1.2em; margin-top:var(--sp-2); text-align:center; font-size:.8125rem; font-weight:600; color:var(--ink-500); }

/* ---- Success state (swaps in for the form after submit) ---- */
.review-success { display:none; flex-direction:column; align-items:center; }
.review-success.is-visible { display:flex; }
.review-success .icon-badge { background:var(--success); color:#fff; }
.review-success h2 { font-size:1.25rem; }
.review-success p { margin-top:var(--sp-2); color:var(--ink-500); font-size:.9375rem; }

@media (max-width: 480px){
  .review-card { padding:var(--sp-6) var(--sp-5); }
  .star-rating__star { width:38px; height:38px; }
  .star-rating__star svg { width:26px; height:26px; }
}

/* ============================================================
   14. SEND MESSAGE MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(16, 24, 40, 0.45);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform var(--dur) var(--ease);
}
.modal-overlay.is-open .modal-card {
  transform: translateY(0);
}

.modal-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.modal-card__avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.modal-card__avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #fff;
}
.modal-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0; left: 0;
}
.modal-card__title-wrap {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.modal-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.05em;
}
.modal-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink-900);
  margin-top: 1px;
}
.modal-card__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-600);
  display: grid;
  place-items: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal-card__close:hover {
  background: var(--line);
  color: var(--ink-900);
}

.modal-card__body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.modal-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

/* Custom button additions */
.btn--ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--navy-50);
  color: var(--primary-hover);
  border-color: var(--navy-100);
}