/* ══════════════════════════════════════════════════
   Student listing page (student.php)
   .page-hero / .sec-wrap-alt / .sec-inner live in the sitewide
   assets/css/style.css (shared across several page-listing templates).
   This file only has what's unique to the student table/filter UI.
   Bootstrap/Font Awesome utility classes used in the markup
   (.container-fluid, .px-4, .table, .table-responsive, .btn, .fa-*) aren't
   loaded on the front end, so they're defined here from scratch rather
   than assumed to come from a framework.
   ══════════════════════════════════════════════════ */

.container-fluid {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 60px;
}
.px-4 { padding-left: 24px; padding-right: 24px; }

/* DEPARTMENT FILTER PILLS */
.class-btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.btn.class-btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1.5px solid oklch(88% 0.01 90);
  background: white;
  color: var(--text-600);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.btn.class-btn:hover {
  border-color: var(--green-600);
  color: var(--green-700);
}
.btn.class-btn.active {
  background: var(--green-700);
  border-color: var(--green-700);
  color: white;
}

/* TABLE WRAPPER */
.table-responsive-wrapper {
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid oklch(90% 0.01 90);
  overflow: hidden;
}
.table-responsive {
  overflow-x: auto;
}

/* TABLE */
.table.student-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.student-table thead th {
  background: var(--green-900);
  color: white;
  text-align: left;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.student-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--warm-gray);
  color: var(--text-900);
  vertical-align: middle;
  white-space: nowrap;
}
.student-table tbody tr:last-child td { border-bottom: none; }
.student-table tbody tr:hover { background: var(--green-50); }

.student-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 10px;
  border: 1px solid oklch(90% 0.01 90);
}

.link-style {
  color: var(--text-900);
  font-weight: 600;
  text-decoration: none;
}
a.link-style:hover { color: var(--green-700); text-decoration: underline; }

.action-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.action-view:hover {
  background: var(--green-700);
  color: white;
}
/* Font Awesome isn't loaded on the front end — fall back to a plain glyph. */
.action-view i.fa-regular.fa-eye::before { content: "👁"; font-style: normal; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .container-fluid { padding-top: 28px; padding-bottom: 40px; }
  .px-4 { padding-left: 16px; padding-right: 16px; }
  .class-btn-container { gap: 8px; }
  .btn.class-btn { padding: 7px 14px; font-size: 13px; }
}