/*
© 2025 The Dugout Training Facility — All Rights Reserved.
Custom Cage Management & Scheduling Software engineered exclusively 
for Derek “Coach Wilkie” Wilkie. Unauthorized reproduction, distribution,
or use of this software, including all source code, design, logic, and 
functionality, is strictly prohibited without express written permission 
from The Dugout Training Facility.
*/

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: radial-gradient(circle at top, #111827 0, #020617 55%);
  color: #f9fafb;
}

/* HERO HEADER */
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #1f2937;
  background: linear-gradient(90deg, #7f1d1d, #991b1b);
}

.hero-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* NEW LOGO SETTINGS — NO SQUISHING */
.hero-logo {
  max-height: 72px;
  height: auto;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
}

.hero-left h1 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-left p {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: #fde68a;
}

.hero-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

/* OPEN/CLOSED BADGE */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.6);
  font-size: 0.8rem;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #facc15;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.2);
}

.status-dot--open {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
}

.status-dot--closed {
  background: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.25);
}

.last-updated {
  font-size: 0.75rem;
  color: #e5e7eb;
  opacity: 0.8;
}

/* INFO STRIP */
.info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 20px 12px;
  border-bottom: 1px solid #111827;
  background: #0b1120;
}

.info-pill {
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid #1f2937;
  color: #e5e7eb;
}

/* ============================
   Dashboard Action Buttons
   ============================ */
.info-btn-row {
  width: 100%;
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.info-btn {
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3b82f6, #22c55e);
  color: #f9fafb;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.info-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .info-btn-row {
    flex-wrap: wrap;
  }
}

/* BOARD LAYOUT */
.board {
  max-width: 1200px;
  margin: 16px auto 24px;
  padding: 0 16px 24px;
}

/* GRID OF CARDS */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

@media (max-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* INDIVIDUAL CARD BASE */
.card {
  background: #0f172a;
  border-radius: 18px;
  padding: 10px 10px 12px;
  border: 2px solid #22c55e;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}

/* CARD VARIANTS */
.card--busy {
  background: radial-gradient(circle at top left, #b91c1c, #7f1d1d 55%, #0f172a);
}

.card--reserved {
  background: radial-gradient(circle at top left, #1d4ed8, #1e293b 55%, #020617);
}

.card--open {
  background: radial-gradient(circle at top left, #0f172a, #020617 60%);
}

/* TITLES */
.card-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-status {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* NAME/ATHLETE ROW */
.card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.card-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.card-next {
  font-size: 0.8rem;
  color: #e5e7eb;
  opacity: 0.9;
}

/* PILLS */
.type-pill {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.type-pill--athlete {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}

.type-pill--team {
  background: rgba(236, 72, 153, 0.18);
  color: #f9a8d4;
}

.type-pill--trainer {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

/* TIMER BAR */
.card-timer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}

.timer-label {
  opacity: 0.85;
}

.timer-bar-wrap {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  overflow: hidden;
  border: 1px solid rgba(55, 65, 81, 0.9);
}

.timer-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    #22c55e,
    #facc15,
    #f97316,
    #dc2626
  );
  transition: width 0.25s linear;
}

/* WAITLIST */
.waitlist-section {
  margin-top: 8px;
}

.waitlist-card {
  background: #020617;
  border-radius: 18px;
  border: 2px solid #22c55e;
  padding: 10px 12px 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
}

.waitlist-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.waitlist-header h2 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.waitlist-tagline {
  font-size: 0.75rem;
  color: #9ca3af;
}

.waitlist-body {
  border-top: 1px solid #1f2937;
  margin-top: 6px;
  padding-top: 6px;
  font-size: 0.8rem;
}

.waitlist-row {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  border-bottom: 1px dashed #1f2937;
}

.waitlist-row:last-child {
  border-bottom: none;
}

.waitlist-name {
  font-weight: 600;
}

.waitlist-meta {
  font-size: 0.75rem;
  color: #9ca3af;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.waitlist-chip {
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid #4b5563;
}

.waitlist-notes {
  opacity: 0.9;
}

.waitlist-empty {
  font-size: 0.8rem;
  color: #9ca3af;
  padding-top: 4px;
}

/* FOOTER */
.footer-note {
  text-align: center;
  font-size: 0.8rem;
  color: #9ca3af;
  padding: 8px 12px 14px;
  border-top: 1px solid #0b1120;
  background: #020617;
}

/* RESPONSIVE */
@media (max-width: 640px) {
  .hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hero-right {
    align-items: flex-start;
  }
}

/* ============================
   Admin – Waitlist buttons
   ============================ */

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: none;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background: #22c55e;
  color: #020617;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn-secondary:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: translateY(0);
}

.btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #475569;
  background: transparent;
  color: #e2e8f0;
  font-size: 0.75rem;
  cursor: pointer;
  margin-left: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-delete:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #0b1120;
}

.waitlist-section table td:last-child,
.waitlist-section table th:last-child {
  text-align: center;
  white-space: nowrap;
}