/* ============================================================
   members.css — GymBI by Statvo
   PURPOSE: Styles for the members module — list, cards,
   search bar, skeleton loaders, and member profile layout.
   ============================================================ */

/* ------------------------------------------------------------
   TOP CONTROLS ROW
   Search bar + Add button side by side.
   Stacks vertically on mobile.
   ------------------------------------------------------------ */
.members-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

/* Search bar takes remaining space on desktop */
.members-search {
  flex: 1;
  min-width: 200px;
}

/* On mobile, search goes full width, button below */
@media (max-width: 480px) {
  .members-controls { flex-direction: column; align-items: stretch; }
  .members-search { width: 100%; }
}

/* ------------------------------------------------------------
   MEMBER LIST
   Stacked cards. No table — too hard to read on mobile.
   ------------------------------------------------------------ */
#members-list {
  display: flex;
  flex-direction: column;
  gap: 0; /* cards have their own margin-bottom */
}

/* Individual member card */
.member-card {
  /* Inherits from .card in glass.css */
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-fast);
}

.member-card:hover {
  background: var(--glass-3);
  transform: translateY(-2px);
}

.member-card:active {
  transform: translateY(0);
}

/* Action buttons — hidden until hover on desktop */
.member-card-actions {
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}
.member-card:hover .member-card-actions {
  opacity: 1;
}

/* On mobile, always show action buttons (no hover) */
@media (max-width: 640px) {
  .member-card-actions { opacity: 1; }
}

/* ------------------------------------------------------------
   SKELETON LOADER
   Mimics the member card shape while data is loading.
   ------------------------------------------------------------ */
.member-card-skeleton {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------------
   TABS RESPONSIVE
   On very small screens, allow tabs to scroll horizontally
   rather than wrapping onto two lines.
   ------------------------------------------------------------ */
.members-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}
.members-tabs::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------
   MEMBER FORM MODAL
   Grid collapses to single column on mobile.
   ------------------------------------------------------------ */
@media (max-width: 520px) {
  /* Two-column form rows become single column */
  #member-form-body [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------
   MEMBER PROFILE MODAL
   ------------------------------------------------------------ */

/* Profile detail grid — 2 columns on desktop, 1 on mobile */
@media (max-width: 480px) {
  #member-profile-body .grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* Expiry warning on member card — pulsing dot for <7 days */
@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.expiry-urgent {
  animation: pulse-warning 1.5s ease-in-out infinite;
}