/* Winner Tênis Clube — direção "Night Match" (tokens do handoff) */
:root {
  color-scheme: dark;
  --bg-grad: linear-gradient(175deg, #0A142E, #0F1F45 60%, #122a5e);
  --navy-1: #0A142E; --navy-2: #12275A;
  --card: rgba(255,255,255,.05);
  --card-bd: rgba(255,255,255,.08);
  --card-bd-strong: rgba(255,255,255,.12);
  --brand: #2E9BF0; --brand-glow: rgba(46,155,240,.45);
  --txt: #EDF3FA; --txt-2: #93A9CC; --txt-dis: #4d6390; --txt-dis2: #5a6d94;
  --lbl: #5E9FD8; --lbl-2: #7FBDEE;
  --ok: #3ddc84; --ok-bg: rgba(61,220,132,.1); --ok-txt: #8fd6a9;
  --warn: #ffc140; --warn-txt: #e8cf9a;
  --err: #ff7a7a; --err-bg: rgba(255,80,80,.06); --destr: #c0392b;
  --r-card: 18px; --r-btn: 14px; --r-pill: 99px;
  --nav-bg: rgba(10,20,46,.85);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--bg-grad) fixed;
  color: var(--txt);
  font-family: Archivo, system-ui, sans-serif;
  min-height: 100vh;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--lbl-2); }
button { font-family: inherit; }
input, select, textarea {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--card-bd-strong);
  border-radius: var(--r-btn);
  padding: 15px 18px;
  font: 500 13.5px Archivo, sans-serif;
  color: var(--txt);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--txt-2); }
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, [tabindex]:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* rótulos e títulos */
.lbl { font: 600 10px Archivo; letter-spacing: .22em; color: var(--lbl); text-transform: uppercase; }
.lbl2 { font: 600 9.5px Archivo; letter-spacing: .12em; color: var(--txt-2); text-transform: uppercase; }
.h-screen { font: 900 22px Archivo; text-transform: uppercase; letter-spacing: .02em; }
.sub { font: 500 12.5px Archivo; color: var(--txt-2); }

/* cartões */
.card {
  background: var(--card);
  border: 1px solid var(--card-bd);
  border-radius: var(--r-card);
}
.card.hov { cursor: pointer; transition: background .15s, border-color .15s; }
.card.hov:hover { background: rgba(255,255,255,.08); border-color: var(--card-bd-strong); }

/* botões */
.btn {
  display: block; width: 100%; border: 0; cursor: pointer; text-align: center;
  border-radius: var(--r-btn); padding: 16px 0;
  font: 900 14.5px Archivo; letter-spacing: .04em; color: #fff; text-transform: uppercase;
}
.btn-primary { background: var(--brand); box-shadow: 0 10px 28px var(--brand-glow); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { background: #26355c; color: var(--txt-dis2); box-shadow: none; cursor: not-allowed; }
.btn-ghost { background: transparent; border: 1px solid var(--card-bd-strong); color: var(--txt-2); }
.btn-ghost:hover { color: var(--txt); border-color: rgba(255,255,255,.25); }
.btn-danger { background: transparent; border: 1px solid rgba(255,122,122,.4); color: var(--err); }
.btn-danger:hover { background: var(--destr); border-color: var(--destr); color: #fff; }
.btn-sm { padding: 9px 14px; font-size: 10.5px; width: auto; display: inline-block; border-radius: var(--r-pill); }

/* badges */
.badge { display: inline-block; border-radius: var(--r-pill); padding: 5px 11px; font: 800 9.5px Archivo; letter-spacing: .14em; text-transform: uppercase; }
.badge-ok { background: var(--ok-bg); color: var(--ok-txt); border: 1px solid rgba(61,220,132,.25); }
.badge-warn { background: rgba(255,193,64,.1); color: var(--warn-txt); border: 1px solid rgba(255,193,64,.3); }
.badge-err { background: var(--err-bg); color: var(--err); border: 1px solid rgba(255,122,122,.3); }
.badge-mut { background: rgba(255,255,255,.06); color: var(--txt-2); border: 1px solid var(--card-bd); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; }

/* chips de dia */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; border-radius: var(--r-pill); border: 1px solid var(--card-bd-strong);
  padding: 9px 15px; font: 800 11px Archivo; letter-spacing: .08em; color: var(--txt-2);
  cursor: pointer; background: transparent; text-transform: uppercase; white-space: nowrap;
}
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 18px var(--brand-glow); }
.chip.lock { color: var(--txt-dis); cursor: not-allowed; }

/* grade de blocos */
.grid-blocos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grid-blocos.g8 { grid-template-columns: repeat(8, 1fr); gap: 9px; }
.bloco {
  border-radius: 12px; border: 1px solid var(--card-bd);
  background: rgba(255,255,255,.04);
  padding: 11px 0; text-align: center; cursor: pointer;
  font: 700 12px Archivo; color: var(--txt-2); min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.bloco:hover { border-color: var(--card-bd-strong); color: var(--txt); }
.bloco.sel { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 16px var(--brand-glow); }
.bloco.ocupado, .bloco.aula, .bloco.bloqueado { color: var(--txt-dis); text-decoration: line-through; cursor: not-allowed; background: rgba(255,255,255,.02); }
.bloco.aula { text-decoration: none; color: var(--lbl); }
.bloco.meu { border-color: rgba(46,155,240,.6); color: var(--lbl-2); cursor: not-allowed; text-decoration: none; }
.bloco.passado { opacity: .28; cursor: not-allowed; text-decoration: none; }
.bloco.janela { color: var(--txt-dis); cursor: not-allowed; }
.bloco.janela::after { content: ' 🔒'; font-size: 9px; }

/* stat cards */
.stats { display: flex; gap: 10px; }
.stat { flex: 1; text-align: center; padding: 13px 6px; }
.stat .v { font: 900 19px Archivo; }
.stat .v.b { color: var(--brand); }
.stat .v.w { color: var(--warn); }
.stat .k { font: 600 9.5px Archivo; letter-spacing: .08em; color: var(--txt-2); text-transform: uppercase; margin-top: 3px; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 0);
  background: rgba(10,20,46,.95); border: 1px solid var(--brand);
  color: var(--txt); border-radius: var(--r-pill);
  padding: 12px 22px; font: 700 12.5px Archivo;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  z-index: 999; animation: toastIn .25s ease; max-width: min(86vw, 420px); text-align: center;
}
#toast.err { border-color: var(--err); }

/* modal / bottom-sheet */
.overlay { position: fixed; inset: 0; background: rgba(4,8,18,.65); backdrop-filter: blur(3px); z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.overlay.center { align-items: center; padding: 20px; }
.sheet {
  width: 100%; max-width: 430px; background: #0d1a3d;
  border: 1px solid var(--card-bd-strong); border-bottom: 0;
  border-radius: 24px 24px 0 0; padding: 22px 24px 30px;
  animation: sheetIn .28s ease; max-height: 82vh; overflow-y: auto;
}
.modal {
  width: 100%; max-width: 440px; background: #0d1a3d;
  border: 1px solid var(--card-bd-strong); border-radius: 20px;
  padding: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: fadeIn .25s ease;
}

/* skeleton / loading */
.skel { border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: skel 1.2s infinite; }
.center-msg { text-align: center; color: var(--txt-2); font: 500 13px Archivo; padding: 40px 24px; }

/* avatar */
.avatar { border-radius: 50%; background: linear-gradient(135deg, #2E9BF0, #1B6FD4); display: grid; place-items: center; font: 900 15px Archivo; color: #fff; flex: 0 0 auto; }

.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.mono { font-variant-numeric: tabular-nums; }
.hr { height: 1px; background: var(--card-bd); border: 0; margin: 14px 0; }
.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheetIn { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(46,155,240,.12), 0 0 40px rgba(46,155,240,.25); }
  50% { box-shadow: 0 0 0 14px rgba(46,155,240,.18), 0 0 70px rgba(46,155,240,.4); }
}
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.fade { animation: fadeIn .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .fade, .sheet, .modal, #toast { animation: none !important; }
  .qr-pulse { animation: none !important; }
  .skel { animation: none; }
}

/* selects com o tema Night Match (dropdown nativo escuro via color-scheme) */
select {
  appearance: none; -webkit-appearance: none;
  background: #0F1B3D url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237FBDEE' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") no-repeat right 14px center;
  color: var(--txt); border: 1px solid var(--card-bd); border-radius: 12px;
  padding: 12px 38px 12px 14px; font: 600 13px Archivo, sans-serif; width: 100%;
}
select:focus { outline: none; border-color: var(--brand); }
select option, select optgroup { background: #0F1B3D; color: var(--txt); }
input[type="date"] { color-scheme: dark; }