/* ===================================================
   MODALS
=================================================== */
.modal-wrap {
  position:fixed; inset:0;
  background:rgba(10,0,16,0.78);
  backdrop-filter:blur(5px);
  z-index:300;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .2s;
}
.modal-wrap.show { opacity:1; pointer-events:all; }

.modal {
  background:var(--bg-card);
  border:1px solid var(--border-hi);
  border-radius:16px;
  width:480px;
  max-height:82vh;
  display:flex; flex-direction:column;
  transform:translateY(18px);
  transition:transform .22s;
}
.modal-wrap.show .modal { transform:translateY(0); }
.modal-hdr {
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
}
.modal-hdr h3 { font-size:17px; font-weight:700; }
.modal-x {
  margin-left:auto;
  background:transparent; border:none;
  color:var(--text-muted); font-size:24px; cursor:pointer; line-height:1;
}
.modal-body { padding:22px; overflow-y:auto; flex:1; }
.modal-foot {
  padding:14px 22px;
  border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px;
}

/* Form fields */
.fg { margin-bottom:16px; }
.fl { display:block; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; }
.fi, .fs {
  width:100%;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 13px;
  color:var(--text);
  font-family:'Outfit',sans-serif;
  font-size:13.5px;
  transition:border-color .18s;
}
.fi:focus, .fs:focus { outline:none; border-color:var(--neon); }
.fs option { background:var(--bg-dark); }
.fr { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Booking type selector */
.bk-type-sel { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:2px; }
.bk-type-opt {
  padding:12px 8px;
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  text-align:center;
  transition:all .18s;
}
.bk-type-opt .toi { font-size:22px; }
.bk-type-opt .ton { font-size:11px; font-weight:700; margin-top:4px; }
.bk-type-opt:hover { border-color:var(--border-hi); }
.bk-type-opt.sel.rental { background:var(--rental-bg); border-color:var(--rental); color:var(--rental); }
.bk-type-opt.sel.tourn  { background:var(--tourn-bg);  border-color:var(--tourn);  color:var(--tourn); }
.bk-type-opt.sel.manual { background:var(--manual-bg); border-color:var(--manual); color:var(--manual); }

/* scrollbars for modals */
.modal-body::-webkit-scrollbar { width:5px; }
.modal-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ===================================================
   TWO / THREE TOGGLE
=================================================== */
.two-toggle, .three-toggle {
  display: flex;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px;
  gap: 3px;
}
.tt-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s;
}
.tt-btn.active {
  background: var(--neon-dim);
  color: var(--neon);
  border: 1px solid var(--neon-dim);
}

/* ===================================================
   DATE TAGS
=================================================== */
.date-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(200,85,255,0.12);
  border: 1px solid var(--neon-dim);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--neon-glow);
}
.date-tag span { cursor: pointer; color: var(--text-muted); font-size: 14px; line-height: 1; }
.date-tag span:hover { color: var(--red); }
#rec-dates-list, #tourn-dates-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  padding: 4px 0;
}

/* ===================================================
   PITCH CHECK GRID
=================================================== */
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.18s;
}
.check-grid label:hover { border-color: var(--border-hi); }
.check-grid input[type="checkbox"]:checked + span { color: var(--neon); }

/* ===================================================
   STANDINGS TABLE
=================================================== */
.standings-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.standings-table th {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: center;
}
.standings-table td {
  padding: 7px 8px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.standings-table .st-name { text-align: left; }
.standings-table tr.st-first td { background: rgba(255,215,0,0.06); }
.standings-table tr.st-top   td { background: rgba(200,85,255,0.05); }

/* ===================================================
   BRACKET
=================================================== */
.bracket { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; }
.bracket-round { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 140px; }
.br-round-lbl {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
  text-align: center; padding-bottom: 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.br-match {
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}
.br-match.br-tbd { opacity: 0.45; border-style: dashed; }
.br-team {
  font-size: 12px; font-weight: 600; padding: 3px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.br-vs { font-size: 9px; color: var(--text-muted); text-align: center; padding: 2px 0; letter-spacing: 1px; }

/* ===================================================
   GESTIONAR INFO GRID
=================================================== */
.gi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px; }
.gi-item { background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.gi-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; }
.gi-val   { font-size: 13px; font-weight: 600; }
.gi-teams-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}
.gi-teams { background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.gi-team-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.gi-team-row:last-child { border-bottom: none; }
.gi-team-num  { font-size: 11px; color: var(--text-muted); width: 20px; flex-shrink: 0; }
.gi-team-name { font-size: 13px; font-weight: 500; }

/* ===================================================
   TOURNAMENT CALENDAR LIST
=================================================== */
.tcl-list { display: flex; flex-direction: column; gap: 6px; }
.tcl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--bg-input); border: 1px solid var(--border);
  transition: border-color 0.18s;
}
.tcl-row.tcl-current { background: rgba(200,85,255,0.10); border-color: var(--neon-dim); }
.tcl-row.tcl-past    { opacity: 0.5; }
.tcl-j    { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: var(--neon); min-width: 28px; }
.tcl-date-col { flex: 1; }
.tcl-dn   { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.tcl-dd   { font-size: 13px; font-weight: 600; }
.tcl-time  { font-size: 12px; color: var(--text-muted); }
.tcl-pitch { font-size: 12px; color: var(--text-muted); }
.tcl-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  color: #0A0010; background: var(--neon);
  border-radius: 20px; padding: 3px 8px; white-space: nowrap;
}
.tcl-done { color: var(--green); font-size: 14px; }

/* ===================================================
   AVAILABILITY GRID
=================================================== */
.avail-grid { display: flex; flex-direction: column; gap: 8px; }
.avail-row  { display: flex; align-items: center; gap: 10px; }
.avail-day  { width: 80px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.avail-time { width: 90px !important; }
.avail-sep  { font-size: 14px; color: var(--text-muted); flex-shrink: 0; }

/* Availability modal stacks above pitch/edit-pitch modals */
#modal-avail { z-index: 400; }