/*  css/schedule-layout.css
    "Game Cards Only" — Dark aurora background, frosted-glass cards, teal accents
    Pure CSS (no Tailwind dependency). Includes robust overrides so legacy
    .schedule-item styles cannot shrink cards on mid-width screens.
-----------------------------------------------------------------------*/

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

:root {
  --wb-bg: #071317;
  --wb-text: #e6fffb; /* teal-50-ish */
  --wb-teal-100: #ccfbf1;
  --wb-teal-200: #99f6e4;
  --wb-teal-300: #5eead4;
  --wb-teal-400: #34d399;
  --wb-teal-500: #14b8a6;
  --wb-card-bg: rgba(255, 255, 255, 0.05);
  --wb-card-border: rgba(20, 184, 166, 0.20);
  --wb-card-border-strong: rgba(20, 184, 166, 0.30);
  --wb-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.7);
}

/* Container */
#schedule-container.wb-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  /* background: var(--wb-bg); */
  background: transparent;
  color: var(--wb-text);
  margin-top: -84px;
}

/* Aurora background + subtle grain */
.wb-background-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.wb-aurora-1 {
  top: -8rem;
  left: -6rem;
  /* background: radial-gradient(closest-side, rgba(20,184,166,0.45), transparent); */
}
.wb-aurora-2 {
  bottom: -10rem;
  right: -6rem;
  /* background: radial-gradient(closest-side, rgba(16,185,129,0.45), transparent); */
}

/* Main layout */
.wb-main {
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem; /* ~1280px */
  padding: 2.5rem 1rem; /* 40px 16px */
  margin-top: -10px;
}

/* Grid — robust against legacy widths */
.wb-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem; /* 20px */
  align-items: stretch;
}

/* Force grid items to fill tracks even if old CSS tries to constrain them */
.wb-schedule-list > li.schedule-item {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  display: block !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  margin: 0 !important;
  min-width: 0;
}

/* Card */
.wb-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 1rem; /* 16px */
  border: 1px solid var(--wb-card-border);
  background: var(--wb-card-bg);
  box-shadow: var(--wb-shadow);
}

.wb-card .wb-card-content { cursor: pointer; }

@supports (backdrop-filter: blur(2px)) {
  .wb-card { backdrop-filter: blur(12px); }
}

.wb-card-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background:
    radial-gradient(1200px 400px at 0% 0%, rgba(16,185,129,0.12), transparent 60%),
    radial-gradient(1200px 400px at 100% 100%, rgba(45,212,191,0.12), transparent 60%);
}
.wb-card:hover .wb-card-glow { opacity: 1; }

.wb-card-content {
  position: relative;
  z-index: 1;
  padding: 1rem; /* 16px */
  cursor: default; /* card no longer clickable */
}

/* Header (date + time) */
.wb-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem; /* tighter, to fit status just below */
}

.wb-card-date {
  font-size: 0.75rem; /* 12px */
  color: rgba(94, 234, 212, 0.85); /* teal-300-ish */
  white-space: nowrap;
}

.wb-card-time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem; /* 12px */
  color: rgba(153, 246, 228, 0.80);
}
.wb-icon { display: inline-flex; opacity: 0.90; }

.wb-card-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .5rem 0;
  padding: .2rem .5rem;
  border-radius: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid var(--wb-card-border-strong);
  color: var(--wb-teal-200);
  background: rgba(20,184,166,.10);
}

.wb-card-status.completed::before{
  content: "●";
  font-size: .85em;
  line-height: 1;
  color: var(--wb-teal-300);
}

/* LIVE status pill — red theme */
.wb-card-status.live{
  /* light red text on dark bg */
  color: #fecaca;                               /* red-200 */
  border: 1px solid rgba(239, 68, 68, 0.35);    /* red-500 border */
  background: rgba(239, 68, 68, 0.12);          /* subtle red tint */
}

.wb-card-status.live::before{
  content: "●";
  font-size: .85em;
  line-height: 1;
  color: #ef4444;                                /* red-500 dot */
  animation: wb-live-pulse 1.1s ease-in-out infinite;
}

@keyframes wb-live-pulse{
  0%   { transform: scale(.85); opacity: .9; }
  70%  { transform: scale(1.45); opacity: .35; }
  100% { transform: scale(.85); opacity: .9; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .wb-card-status.live::before{ animation: none; }
}

/* Body (teams + actions) */
.wb-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wb-teams { min-width: 0; }

.wb-teams .team-name {
  display: block;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: 1.5rem; 
  word-break: break-word;
}

.wb-teams .team-name {
  color: var(--name-color, var(--wb-text));
  /* optional global tone-down: */
  /* filter: brightness(.9) saturate(.95); */
}

/* Actions */
.wb-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.wb-btn {
  border-radius: 0.75rem; /* 12px */
  font-size: 0.875rem; /* 14px */
  padding: 0.5rem 0.75rem; /* 8px 12px */
  line-height: 1;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
  cursor: pointer;
}

.wb-btn-primary {
  background-color: rgba(52, 211, 153, 0.90); /* emerald-400-ish */
  color: #00140b;
  font-weight: 600;
  border-color: transparent;
  display: none;
}
.wb-btn-primary:hover {
  background-color: rgba(110, 231, 183, 1);
}

.wb-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--wb-text);
  border-color: var(--wb-card-border-strong);
}
.wb-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10);
}

/* Empty / error message */
.wb-empty {
  position: relative;
  z-index: 1;
  color: rgba(226, 232, 240, 0.85);
  padding: 2rem 1rem;
  text-align: center;
  font-size: 1rem;
}

/* Date picker (NBA) */
#date-picker {
  position: relative;
  z-index: 2;
  display: block;
  margin: 1rem auto 0.25rem auto;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(255,255,255,0.05);
  color: var(--wb-text);
  border: 1px solid var(--wb-card-border-strong);
}
#date-picker:focus {
  outline: none;
  border-color: var(--wb-teal-500);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25);
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  .wb-card-glow { transition: none; }
  .wb-btn { transition: none; }
}

@media (min-width: 640px) { /* sm */
  .wb-schedule-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { /* lg */
  .wb-schedule-list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1000px) {
  #schedule-back-button {
    margin-top: 0px;
  }

  .wb-card-content { 
    padding: 20px; 
  } 

  .wb-card-date,
  .wb-card-time,
  .wb-card-status {
    font-size: 24px;
  }

  .wb-teams .team-name { 
    font-size: 36px; 
  } 

  .wb-btn-secondary {
    font-size: 24px;
    margin-top: 60px;
    margin-right: -20px;
  }
}

/* Team-specific hooks:
.team-49ers {}
.team-seahawks {}
*/