/* =========================================================
   alumni.css — styles used only by alumni.php
   (batch filter tabs, placeholder-data notice, alumni table)

   Depends on the same color variables as style.css
   (--maroon, --gold, --ivory, --line, --shadow, etc).
   Load this file TOGETHER WITH style.css.
   ========================================================= */

.alumni-section{background:var(--white);}

/* ---------- Notice banner ---------- */
.alumni-notice{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff6e6; border:1px solid #ecd5a3; border-radius:8px;
  padding:16px 18px; margin-bottom:36px;
}
.alumni-notice .notice-icon{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:var(--gold); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.alumni-notice p{font-size:14px; color:#6b5636; line-height:1.6;}
.alumni-notice strong{color:var(--maroon-dark);}

/* ---------- Filter tabs ---------- */
.alumni-filters{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin-bottom:34px;
}
.alumni-filters button{
  font-family:inherit; font-size:14px; font-weight:700;
  color:var(--maroon-dark); background:var(--ivory);
  border:1.5px solid var(--line); border-radius:30px;
  padding:9px 20px; transition:all 0.2s ease;
}
.alumni-filters button:hover{border-color:var(--gold);}
.alumni-filters button.active{
  background:var(--maroon); border-color:var(--maroon); color:var(--white);
}

/* ---------- Summary strip ---------- */
.alumni-summary{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center;
  margin-bottom:36px;
}
.alumni-summary .chip{
  background:var(--ivory-deep); border-radius:8px; padding:14px 22px; text-align:center;
  min-width:140px;
}
.alumni-summary .chip .num{
  font-family:'Kavivanar',cursive; font-size:24px; color:var(--maroon-dark); display:block;
}
.alumni-summary .chip .lbl{font-size:12.5px; color:#6b584a; margin-top:2px; display:block;}

/* ---------- Alumni table ---------- */
.alumni-table-wrap{
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
table.alumni-table{width:100%; border-collapse:collapse; font-size:14.5px;}
.alumni-table thead th{
  background:var(--maroon-dark); color:var(--white); text-align:left;
  font-weight:700; font-size:13px; padding:13px 16px; letter-spacing:0.02em;
}
.alumni-table tbody td{
  padding:12px 16px; border-bottom:1px solid var(--line); color:var(--brown);
}
.alumni-table tbody tr:nth-child(even){background:var(--ivory);}
.alumni-table tbody tr:hover{background:var(--ivory-deep);}
.alumni-table tbody tr:last-child td{border-bottom:none;}
.alumni-table .col-sno{width:60px; color:#8a7461; font-weight:600;}
.alumni-table .col-name{font-weight:700;}
.alumni-table .batch-tag{
  display:inline-block; background:var(--ivory-deep); color:var(--maroon-soft);
  font-size:12px; font-weight:700; padding:4px 10px; border-radius:14px;
}

.alumni-empty{
  text-align:center; padding:50px 20px; color:#6b584a; font-size:15px; display:none;
}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .alumni-table thead{display:none;}
  .alumni-table, .alumni-table tbody, .alumni-table tr, .alumni-table td{display:block; width:100%;}
  .alumni-table tbody tr{
    border-bottom:1px solid var(--line); padding:12px 16px;
  }
  .alumni-table tbody tr:nth-child(even){background:var(--ivory);}
  .alumni-table td{
    padding:4px 0; border-bottom:none;
  }
  .alumni-table .col-sno{
    display:inline-block; color:#8a7461; font-size:12.5px; margin-right:8px;
  }
  .alumni-table .col-sno::after{content:"."; }
  .alumni-table .col-name{display:inline-block; font-size:15.5px;}
}

@media (max-width:640px){
  .alumni-filters{gap:8px;}
  .alumni-filters button{padding:8px 14px; font-size:13px;}
  .alumni-summary{gap:12px;}
  .alumni-summary .chip{min-width:120px; padding:12px 16px;}
}