/* NFC dark theme -- matches the landing page palette. Bootstrap's
   native data-bs-theme="dark" (set in partials/header.ejs) already
   handles component-level dark styling (cards, forms, tables, badges,
   nav) automatically; these overrides tune Bootstrap's own dark
   palette to our specific near-black tone instead of its default
   dark gray, and add the NFC-branded gold accent for reuse anywhere
   in the app, not just the landing page.
*/
[data-bs-theme="dark"] {
  --bs-body-bg: #0d0d0f;
  --bs-body-color: #e8e8ea;
  --bs-secondary-bg: #17171a;
  --bs-tertiary-bg: #131316;
  --bs-border-color: #2a2a2e;
}

body {
  padding-top: 84px; /* keeps content clear of the fixed top nav */
  padding-bottom: 90px; /* keeps content clear of the fixed bottom nav (icon+label stack made it taller than plain text links) */
}

/* Reusable NFC gold accent -- same gradient as the landing page's CTA
   buttons. Use for primary actions anywhere they should feel
   "branded" rather than generic Bootstrap dark. */
.btn-nfc {
  background: linear-gradient(135deg, #c9a24b, #8a6a24);
  color: #100c00;
  font-weight: 700;
  border: none;
}
.btn-nfc:hover {
  color: #100c00;
  filter: brightness(1.1);
}

/* Season card flip mechanic -- pure CSS, no JS animation library.
   Toggling the .flipped class on .flip-card rotates the inner wrapper;
   front and back faces are absolutely positioned on top of each other
   with backface-visibility hidden so only one ever shows at a time. */
.flip-card {
  perspective: 1200px;
  min-height: 190px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 190px;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* Fighter Card: glows when someone else has sent an invite that's
   awaiting this player's Accept/Decline response. */
.flip-card.incoming-invite {
  box-shadow: 0 0 0 3px #28a745;
  animation: fighterCardIncomingPulse 1s infinite alternate;
}
@keyframes fighterCardIncomingPulse {
  from { box-shadow: 0 0 0 2px #28a745; }
  to { box-shadow: 0 0 0 6px #28a745; }
}
.flip-card-front, .flip-card-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow-y: auto;
}
.flip-card-back {
  transform: rotateY(180deg);
}
.add-season-card {
  border: 2px dashed #3a3a3f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 190px;
  font-size: 2rem;
  color: #5a5a60;
  opacity: 0.8;
}
.add-season-card:hover {
  border-color: #6a6a70;
  color: #8a8a90;
  opacity: 1;
}

/* Admin card shell -- landscape 4:3 flip card for Admin-only drawer
   cards (App Mode, and more over time). Sized by its Bootstrap column
   (col-8 -- double the width of a public .flip-card at col-4), not a
   fixed pixel width, so it scales naturally with the drawer. Same flip
   mechanic as .flip-card, kept separate since these faces are full
   custom layouts (a colored status front, dark options/stats back)
   rather than a plain card-front/card-back image swap. */
.drawer-card {
  perspective: 1200px;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.drawer-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.drawer-card.flipped .drawer-card-inner {
  transform: rotateY(180deg);
}
.drawer-card-front, .drawer-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 0.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  color: #000;
}
.drawer-card-back {
  transform: rotateY(180deg);
  background: #17171a;
  color: #e8e8ea;
  padding: 0.5rem;
}
/* Each mode button carries its OWN status color always (green/yellow/red
   for Online/Debug/Offline), not just the currently active one -- .active
   marks which is current via full opacity + glow, inactive ones dim. */
.app-mode-btn {
  border: none;
  color: #000;
  font-weight: 700;
  opacity: 0.45;
}
.app-mode-btn.active {
  opacity: 1;
  box-shadow: 0 0 10px 3px rgba(255,255,255,0.8);
}

/* Drawer card rows -- single horizontal strip per section (Admin cards,
   then the player's card collection), native touch-scroll/swipe instead
   of wrapping into a multi-row grid. */
.drawer-scroll-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}
.drawer-scroll-row > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Fade + chevron hinting that the row has more cards off-screen. JS
   toggles it off once the row is scrolled to its end (or never
   overflowed in the first place). */
.drawer-scroll-wrap {
  position: relative;
}
.drawer-scroll-hint {
  position: absolute;
  top: 0;
  bottom: 4px;
  right: 0;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2px;
  background: linear-gradient(to right, transparent, #131316 65%);
  color: #8a8a90;
  font-size: 1rem;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.drawer-scroll-hint.hidden {
  opacity: 0;
}

/* Season card back -- horizontal tab bar (Results/Respect/Awards).
   Colors come from CSS variables set per-card (division color varies),
   not a fixed palette. Selected tab swaps which of the two colors is
   the background vs. the icon, instead of just adding an outline. */
.back-tab-btn {
  background: transparent;
  border: none;
  color: var(--tab-color);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  padding: 0;
}
.back-tab-btn.active {
  background: var(--tab-color);
  color: var(--tab-active-fg);
}

/* Admin card stat cells -- each stat is its own grid cell (big number,
   small label centered underneath), same number size as the season
   card's standing/CHAMP text so the two read as one visual language. */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 0.25rem;
}
.admin-stat-cell {
  text-align: center;
}
.admin-stat-num {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
}
.admin-stat-label {
  font-size: 0.5rem;
  color: #9a9a9a;
  margin-top: 0.1rem;
}

/* Schedule grid -- one cell per 15-min slot per day column. Color alone
   carries the state (see schedule-cell--* below); a shared base handles
   sizing/shape so the grid stays compact at 7 columns wide. */
.schedule-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 2px;
  vertical-align: middle;
}
.schedule-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 32px;
  min-height: 32px;
  aspect-ratio: 1 / 1;
  padding: 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1px solid #2a2a2e;
  border-radius: 3px;
  background: transparent;
  color: #8a8a90;
  cursor: pointer;
  /* A touch that starts directly on a cell drives drag-select instead of
     the page's native scroll -- touches starting on the gutter/gaps
     around cells still scroll normally. */
  touch-action: none;
  user-select: none;
}
.schedule-cell--dragging {
  outline: 2px solid #c9a24b;
  outline-offset: -2px;
}
.schedule-cell--past {
  opacity: 0.35;
  cursor: default;
}
.schedule-cell--purple {
  background: #8a3ffc;
  border-color: #8a3ffc;
  color: #fff;
}
.schedule-cell--yellow {
  background: #ffd93d;
  border-color: #ffd93d;
  color: #1a1a1d;
}
.schedule-cell--green {
  background: #28a745;
  border-color: #28a745;
  color: #fff;
}
.schedule-cell--red {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
  cursor: default;
}
.schedule-cell--admin-edit:hover {
  outline: 2px dashed #c9a24b;
}
.schedule-day-header {
  text-align: center;
  font-size: 0.65rem;
  padding: 0.25rem 0;
  border-radius: 4px;
}
/* Marks the row matching the live current time slot, so scrolling
   through the grid still shows "you are here" at a glance. */
.schedule-now-row {
  background: #2a2410 !important;
  color: #c9a24b !important;
  font-weight: 700;
}
.schedule-calendar-tile {
  border-radius: 6px;
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #2a2a2e;
}

/* Non-active season cards dim to distinguish them from the active one(s)
   without needing the black "ACTIVE SEASON" bar -- brightens on hover
   (desktop) or once tapped (touch, via the .tapped class the card's own
   click handler adds, since :hover doesn't persist on mobile). */
.season-card-dim {
  filter: brightness(0.45);
  box-shadow: 0 2px 10px rgba(0,0,0,0.7);
  transition: filter 0.2s ease;
}
.season-card-dim:hover, .season-card-dim.tapped {
  filter: brightness(1);
}