/* Spiderz Roster (Tabler facelift)
   - Visual-only changes
   - Keeps existing IDs/classes used by search.js (e.g., #searchInput, #nextBtn, .highlight)
*/

/* Brand tokens */
:root{
  --spiderz-red:   #d71920;
  --spiderz-male:  #008083;
  --spiderz-female:#00BFB4;
}

/* ---------- Header ---------- */
.roster-navbar{
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  background: var(--tblr-card-bg, #fff);
}
.roster-navbar .navbar-brand img{
  height: 36px;
  width: auto;
  display: block;
}
.roster-title{
  line-height: 1.15;
}
.roster-title .title{
  font-weight: 600;
  font-size: 1.1rem;
}
.roster-title .subtitle{
  font-size: 0.875rem;
  color: var(--tblr-muted, #6c757d);
}

/* ---------- Search ---------- */
.search-results{
  margin-top: .5rem;
  font-weight: 600;
  color: var(--tblr-body-color, #1f2937);
}

/* ---------- Team cards (desktop) ---------- */
.section.team-table{
  /* "section" is kept for compatibility; spacing is controlled here */
  margin: 0 0 1.5rem 0;
}
.table-wrapper{
  /* default to block; only headers are flex */
  display: block;
}
.table-wrapper.team-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.team-info{
  min-width: 0;
}
.team-info h2{
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}
.team-info h3{
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--tblr-muted, #6c757d);
}
.no-top-margin{
  margin-top: 0;
}

/* Team photo */
.team-photo-wrap{
  flex: 0 0 auto;
}
.team-image{
  max-width: 220px;
  height: auto;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.15s ease;
}
.team-image:hover{
  transform: scale(1.02);
}

/* Table */
.roster-table th{
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--tblr-muted, #6c757d);
}
.roster-table td{
  font-size: 0.95rem;
}

/* Sex-based row accents (replaces inline background colors with a cleaner treatment) */
.roster-row td{
  text-align: left;
}
.roster-row-male td{
  background: rgba(0,128,131,0.08);
}
.roster-row-female td{
  background: rgba(0,191,180,0.08);
}
.roster-row-male td:first-child{
  border-left: 4px solid var(--spiderz-male);
}
.roster-row-female td:first-child{
  border-left: 4px solid var(--spiderz-female);
}

/* Search highlight (JS adds .highlight) */
.highlight{
  background-color: #fff3bf !important;
  color: #111 !important;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 .15rem;
}

/* ---------- Modal (kept, just slightly refined) ---------- */
.modal{
  display: none;
  position: fixed;
  z-index: 1000;
  padding: 60px 16px 16px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.82);
}
.modal-content{
  margin: auto;
  display: block;
  width: 900px;
  max-width: 95%;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.close{
  position: absolute;
  top: 18px;
  right: 22px;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

/* ---------- Mobile view ---------- */
.player-cards{
  display: none; /* default hidden on desktop */
}
.mobile-header{
  margin: 0 0 1rem 0;
  padding: 1rem;
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: 12px;
  background: var(--tblr-card-bg, #fff);
}
.mobile-header h2{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 650;
}
.mobile-header h3{
  margin: 0;
  font-size: .95rem;
  font-weight: 500;
  color: var(--tblr-muted, #6c757d);
}
.player-card{
  padding: 1rem;
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: 12px;
  background: var(--tblr-card-bg, #fff);
  color: var(--tblr-body-color, #1f2937);
  margin-bottom: .75rem;
}
.player-card h4{
  margin: 0 0 .5rem 0;
  font-size: 1rem;
  font-weight: 650;
}
.player-info p{
  margin: .25rem 0;
}
.player-info strong{
  color: var(--tblr-muted, #6c757d);
  font-weight: 600;
}

/* Switch between desktop tables and mobile cards */
@media (max-width: 768px){
  /* Hide the desktop sections entirely on mobile (matches your original behavior) */
  .section.team-table{
    display: none;
  }
  .table-wrapper{
    display: none;
  }
  .player-cards{
    display: block;
  }
  .team-image{
    max-width: 100%;
  }
}

/* ============================================================
   Spiderz-Red Theme Variant (visual-only)
   - Apply Spiderz red across primary actions + header accents
   - Make female rows more distinct (requested)
   ============================================================ */

/* Slightly deeper hover shade for brand */
:root{
  --spiderz-red-dark: #b8151b;
  --spiderz-red-soft: rgba(215,25,32,0.12);
  --spiderz-red-border: rgba(215,25,32,0.28);
}

/* Header accent */
.roster-navbar{
  border-bottom: 3px solid var(--spiderz-red);
}

/* Card accent (subtle red top rule) */
.page .card{
  border-top: 3px solid var(--spiderz-red-border);
}

/* Primary buttons => Spiderz red */
.page .btn.btn-primary{
  background-color: var(--spiderz-red);
  border-color: var(--spiderz-red);
}
.page .btn.btn-primary:hover,
.page .btn.btn-primary:focus{
  background-color: var(--spiderz-red-dark);
  border-color: var(--spiderz-red-dark);
}

/* Outline primary => Spiderz red */
.page .btn.btn-outline-primary{
  color: var(--spiderz-red);
  border-color: var(--spiderz-red);
}
.page .btn.btn-outline-primary:hover,
.page .btn.btn-outline-primary:focus{
  background-color: var(--spiderz-red);
  border-color: var(--spiderz-red);
  color: #fff;
}

/* Inputs focus ring */
.page .form-control:focus{
  border-color: var(--spiderz-red);
  box-shadow: 0 0 0 0.25rem rgba(215,25,32,0.15);
}

/* Links (if any appear) */
.page a{
  color: var(--spiderz-red);
}
.page a:hover{
  color: var(--spiderz-red-dark);
}

/* ===== Requested: female rows clearly identified =====
   Base file already distinguishes male vs female (both teal-ish).
   This variant increases contrast for females with a Spiderz-red tint
   while keeping male rows in the existing teal tint.
*/
.roster-row-female td{
  background: var(--spiderz-red-soft);
}
.roster-row-female td:first-child{
  border-left: 4px solid var(--spiderz-red);
}

/* Optional: slightly stronger hover contrast for readability */
.roster-row:hover td{
  filter: brightness(0.98);
}

/* ---------- Team header: right-align the uniform/team image ---------- */
.table-wrapper.team-header{
  /* already flex; ensure image column pushes to the right */
  align-items: flex-start;
}
.team-photo-wrap{
  margin-left: auto;              /* push image to far right */
  display: flex;
  justify-content: flex-end;
  text-align: right;
}
.team-photo-wrap .team-image{
  margin-left: auto;
}

/* ---------- FIX: ensure team header wrapper spans full card-header width ---------- */
.card-header .roster-team-header{
  width: 100%;
  flex: 1 1 auto;
}

/* ---------- FIX: right-align the team image in the mobile header ---------- */
.mobile-header .team-image{
  display: block;
  margin-left: auto;
}

/* ---------- FIX: apply male/female shading to MOBILE player cards ---------- */
.player-card.roster-row-male{
  background: rgba(0,128,131,0.08);
  border-left: 4px solid var(--spiderz-male);
}
.player-card.roster-row-female{
  background: var(--spiderz-red-soft);
  border-left: 4px solid var(--spiderz-red);
}