/* ==========================================================================
   THE KNIGHT CLUB — Super Admin: Student Management (Phase 21)
   Tokens only (tokens.css); reuses .filters/.table/.state-box/.pager/.card/
   .badge/.detail-grid/.cell-title/.cell-sub/.order-id/.order-amount* from
   courses.css/coupons.css/orders.css/base.css.
   ========================================================================== */

/* ---- List filters (search + status + sort) ---- */
.filters.filters-students { grid-template-columns: 2fr 1fr auto; align-items: center; }
@media (max-width: 1024px) { .filters.filters-students { grid-template-columns: 1fr 1fr; } }
/* Collapse to 1 column on mobile is already handled by base.css's generic
   .filters rule at 640px (see "RESPONSIVE ARCHITECTURE" in base.css). */

/* ---- Account status badges — the REAL Student.status enum (ACTIVE reuses
   the existing .badge-active from courses.css; SUSPENDED is new here). ---- */
.badge-suspended { background: var(--color-error-bg); color: var(--color-error-text); }

/* ---------------------------------------------------------------------------
   Password-reset modal (student-details.html)
   Reuses .modal-backdrop and .modal from base.css / auth.css where defined;
   these overrides handle the form-field layout specific to this modal.
--------------------------------------------------------------------------- */
/* CRITICAL: .modal-backdrop sets display:flex (courses.css), which beats
   the browser's default [hidden] { display:none } rule by specificity+order.
   Without this, the modal stays visible on page load until JS toggles the
   attribute off and on — exactly the "opens immediately" bug. */
#reset-password-modal[hidden] {
  display: none !important;
}

#reset-password-modal .modal {
  width: min(420px, 92vw);
}

#reset-password-modal .modal-desc {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

#reset-password-modal .field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: var(--space-4);
}

#reset-password-modal .field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

#reset-password-modal .field input[type="password"] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

#reset-password-modal .field input[type="password"]:focus {
  border-color: var(--focus-ring-color);
  box-shadow: var(--focus-ring);
}

#reset-password-modal .alert {
  margin-bottom: var(--space-4);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}