/* Baltrix – Sporty Modern Component Skin
   Scoped to the SPA shell (body.bg) to avoid impacting login/training unexpectedly.
   Loaded AFTER existing CSS.
*/

/* -------- Base polish (SPA only) -------- */
body.bg{
  font-family: var(--font-ui);
  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);
}

/* subtle speed-lines overlay */
body.bg::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity: .12;
  background:
    linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.08) 40% 41%, transparent 41% 100%),
    linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,.06) 58% 59%, transparent 59% 100%),
    linear-gradient(115deg, transparent 0 74%, rgba(255,255,255,.05) 74% 75%, transparent 75% 100%);
  transform: translateY(-8%);
}

@media (prefers-reduced-motion: reduce){
  body.bg::before{ opacity: .07; }
}

/* keyboard focus (don’t remove outlines without replacement) */
body.bg :focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* -------- Layout -------- */
body.bg .container{
  max-width: 1100px;
  margin: 74px auto 0;
  padding: 0 16px;
}

body.bg .footer{
  opacity: .65;
  text-align:center;
  padding: 24px 0;
}

/* -------- Topbar / brand / nav -------- */
body.bg .topbar{
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(8,11,20,.76), rgba(8,11,20,.45));
  box-shadow: 0 10px 40px rgba(0,0,0,.22);
}

body.bg .topbar{
  position: sticky;
  top: 0;
  z-index: 20;
}

body.bg .brand{
  display:flex;
  align-items:center;
  gap: 10px;
}

body.bg .brand-logo{
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

body.bg .brand-name{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .3px;
}

/* nav links -> sporty pills */
body.bg .nav .nav-link{
  margin-right: 6px;
  padding: 7px 12px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.72);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
body.bg .nav .nav-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: var(--text);
}
body.bg .nav .nav-link.active{
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

/* injected training link (ant-nav) – align with pills */
body.bg .ant-nav-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 12px;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.72);
  text-decoration:none;
  font-weight: 700;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
body.bg .ant-nav-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: var(--text);
}
body.bg .ant-nav-link.active{
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}
body.bg .ant-nav-link .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand-3);
  box-shadow: 0 0 0 2px rgba(0,0,0,.28);
}

/* -------- Cards / panels -------- */
body.bg .card{
  border-radius: var(--r-2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--sh-1);
}

body.bg .hr{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}

/* -------- Buttons -------- */
body.bg .btn{
  border-radius: var(--r-1);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 9px 14px;
  min-height: 40px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
body.bg .btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}
body.bg .btn:active{ transform: translateY(0); filter: brightness(.98); }

body.bg .btn.primary{
  color: #071018;
  font-weight: 900;
  border-color: rgba(0,0,0,.34);
  background: linear-gradient(180deg, var(--brand-3), var(--brand-2));
  box-shadow: 0 14px 34px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.12) inset;
}

body.bg .btn:disabled,
body.bg .btn.disabled{
  opacity: .58;
  cursor: not-allowed;
  transform: none !important;
}

/* -------- Inputs -------- */
body.bg .input{
  border-radius: var(--r-1);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 10px 12px;
  min-height: 40px;
}

/* -------- Sections (settings rows) -------- */
body.bg .section{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: var(--r-2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

body.bg .section.is-disabled{ opacity:.55; }

/* Switch rows rely on the flex spacer inside */
body.bg .section > div[style*="flex:1"]{ min-width: 8px; }

/* Slider layout: make range full-width, value+number align below */
body.bg .section .slider{ flex: 1 1 100%; }
body.bg .section .value-badge{ margin-left:auto; }

body.bg .kicker{
  color: rgba(234,240,255,.62);
}

/* Collapsible header row */
body.bg .section.header-row{
  cursor: pointer;
  padding: 12px 12px;
  border-radius: var(--r-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

body.bg .section.header-row .label{
  font-weight: 800;
  letter-spacing: .2px;
  background: linear-gradient(90deg, var(--brand-3), #ffffff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

body.bg .section.header-row .chev{ transition: transform .22s ease; display:inline-block; opacity:.9; }
body.bg .section.header-row.open .chev{ transform: rotate(90deg); }

/* -------- Switch (role="switch") -------- */
body.bg .switch{
  width: 52px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
body.bg .switch::after{
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(234,240,255,.92);
  box-shadow: 0 8px 20px rgba(0,0,0,.38);
  transition: transform .18s ease;
}
body.bg .switch.active{
  border-color: rgba(0,0,0,.25);
  background: linear-gradient(180deg, var(--brand-3), var(--brand));
}
body.bg .switch.active::after{ transform: translateX(22px); }

/* -------- Slider (range) -------- */
body.bg .slider{ height: 28px; background: transparent; }
body.bg .slider::-webkit-slider-runnable-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
body.bg .slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  margin-top: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
body.bg .slider:focus-visible::-webkit-slider-thumb{ border-color: var(--brand-3); }

body.bg .slider::-moz-range-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
body.bg .slider::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
body.bg .slider:focus-visible::-moz-range-thumb{ border-color: var(--brand-3); }

/* value badge */
body.bg .value-badge{
  border-radius: var(--r-1);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 7px 10px;
  min-width: 84px;
  font-variant-numeric: tabular-nums;
}

/* -------- Color picker / chips -------- */
body.bg .color-row{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.bg .preset{ display:flex; flex-wrap:wrap; gap: 8px; }

body.bg .chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding: 7px 10px;
  cursor: pointer;
  user-select:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
body.bg .chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }

body.bg .dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,.28);
}

body.bg .swatch{
  width: 34px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 10px 22px rgba(0,0,0,.30);
}

/* -------- Badges -------- */
body.bg .badge{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-variant-numeric: tabular-nums;
}
body.bg .badge.green{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.35); }
body.bg .badge.red{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }

/* -------- Modal / sheet -------- */
body.bg .modal{
  background:
    radial-gradient(1200px 800px at 50% -200px, rgba(255,255,255,.08), transparent),
    rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

body.bg .sheet{
  border-radius: var(--r-3);
  border: 1px solid rgba(255,255,255,.12);
  background: var(--glass-bg);
  box-shadow: var(--sh-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.bg .sheet-head{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

body.bg .sheet-head .title{
  font-weight: 900;
  letter-spacing: .2px;
}

body.bg .sheet-body{ padding: 14px 14px; }

body.bg .sheet-foot{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.06));
}

/* Improve the 2-column settings layout + responsive collapse */
body.bg .sheet-body .cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 920px){
  body.bg .container{ margin-top: 70px; }
  body.bg .sheet{ border-radius: var(--r-2); }
  body.bg .sheet-body .cols{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  body.bg .btn{ width: 100%; min-height: 44px; }
  body.bg .input{ min-height: 44px; }
}



/* -------- QoL: device grid responsiveness -------- */
@media (max-width: 980px){
  body.bg .grid.cols-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  body.bg .grid.cols-3{ grid-template-columns: 1fr; }
}

/* -------- QoL: toast placement + dismiss affordance -------- */
body.bg .toast-wrap{
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
}
body.bg .toast{ cursor: pointer; }

/* -------- QoL: reduce motion friendly -------- */
@media (prefers-reduced-motion: reduce){
  body.bg .section.header-row .chev{ transition: none; }
  body.bg .btn{ transition: none; }
  body.bg .chip{ transition: none; }
}

/* ===== Responsive extras (tablet/phone comfort) ===== */
@media (max-width: 768px){
  /* topbar wraps nicely on tablets/phones */
  body.bg .topbar{ flex-wrap: wrap; gap: 10px; }
  body.bg .nav{ display:flex; flex-wrap: wrap; gap: 8px; }
  body.bg .nav .nav-link{ margin-right: 0; }
}

@media (max-width: 520px){
  /* modal -> bottom-sheet feel on phones */
  body.bg .modal.open{ place-items: end center; padding: 10px; }
  body.bg .modal.open .sheet{
    width: 100%;
    border-radius: var(--r-3) var(--r-3) 0 0;
  }
  /* keep actions visible if the sheet scrolls */
  body.bg .modal.open .sheet-foot{ position: sticky; bottom: 0; }

  /* iOS safe areas */
  body.bg .modal.open{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}