/* Baltrix – Sporty Modern Overrides
   - Login (bx-login-*) polish
   - Training page (body.training) alignment to tokens
*/

/* ===== Login polish (optional, non-breaking) ===== */
.bx-login-body :focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.bx-input:focus{
  border-color: var(--brand-3);
  box-shadow: 0 0 0 1px rgba(255,222,120,.35);
}

.bx-button-primary{
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.14) inset;
}

@media (prefers-reduced-motion: reduce){
  .bx-button-primary:hover:not(:disabled){ transform: none; }
}

/* ===== Training page =====
   We add body class="training" in antrenament.html (safe; JS doesn’t rely on body classes).
*/
body.training{
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(900px 520px at 82% 0%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg, var(--bg), #05070c);
  color: var(--text);
  font-family: var(--font-ui);
}

body.training .container{
  max-width: 960px;
  margin: 56px auto;
  padding: 0 16px;
}

body.training .panel{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-2);
  box-shadow: var(--sh-1);
}

body.training hr{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

body.training input[type="number"],
body.training input[type="text"],
body.training input[type="email"],
body.training select{
  border-radius: var(--r-1);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
}

body.training button{
  border-radius: var(--r-1);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
body.training button:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
body.training button.primary{
  color: #071018;
  font-weight: 900;
  border-color: rgba(0,0,0,.34);
  background: linear-gradient(180deg, var(--brand-3), var(--brand-2));
}

body.training .chip{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
body.training .chip.selected{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

body.training .log,
body.training .card{
  background: rgba(0,0,0,.18);
  border: 1px dashed rgba(255,255,255,.16);
}

body.training :focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce){
  body.training button:hover{ transform:none; }
}


/* ===== QoL: Training mobile comfort ===== */
body.training input[type="checkbox"]{
  width: 18px;
  height: 18px;
}

@media (max-width: 640px){
  body.training .container{ margin: 28px auto; }
  body.training .panel{ padding: 16px 14px; }
  body.training .row{ gap: 10px; }
  body.training button,
  body.training input[type="number"],
  body.training select{
    min-height: 44px;
  }
  body.training input[type="number"]{ width: 110px; }
  body.training .log{ max-height: 260px; }
}