/* --- Sesja LIVE: sticky bottom action bar (mobile-first) --- */
.live-action-bar{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 1055;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: flex-start;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}

.live-action-actions{
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}

/* Dokładnie pół na pół na mobile (anchor + form) */
.live-action-actions > *{ flex: 1 1 50%; }

/* Równa wysokość i wyśrodkowanie treści (różne warianty btn-outline vs btn-brand) */
.live-action-actions .btn,
.live-action-actions a.btn{
  width: 100%;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}

@media (min-width: 768px){
  .live-action-bar{ left: 50%; right: auto; width: min(980px, calc(100% - 24px)); transform: translateX(-50%); }
}


@media (max-width: 420px){
  .live-progress-label{ display:none; }
  .live-progress-sub{ font-size: 10px; }
}

.live-progress{ display:flex; flex-direction:column; gap: 4px; }
.live-progress-top{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; }
.live-progress-label{ font-size: 11px; opacity: .78; }
.live-progress-value{ font-size: 11px; font-weight:700; letter-spacing: .2px; font-variant-numeric: tabular-nums; }
.live-progress-sub{ display:flex; justify-content:space-between; align-items:center; gap: 10px; font-size: 11px; opacity: .78; }
.live-progress-next{ color: var(--brand); text-decoration: none; font-weight:700; white-space: nowrap; }
.live-progress-next:active{ transform: translateY(1px); }

.progress.progress-brand{
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.10);
}
.progress.progress-brand .progress-bar{
  border-radius: 999px;
  background: linear-gradient(90deg, var(--progress), var(--progress2));
}
:root[data-theme="light"] .progress.progress-brand{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.08);
}

/* Desktop: sticky progress card (right column) */
.session-progress-inline{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
:root[data-theme="light"] .session-progress-inline{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.session-progress-card{ position: sticky; top: 92px; }

/* --- LIVE: Rest timer (between sets) --- */
.rest-timer-pill{
  position: fixed;
  left: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 1062;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.rest-timer-pill.is-ready{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Place above the LIVE action bar when present */
.has-action-bar .rest-timer-pill{ bottom: calc(env(safe-area-inset-bottom, 0px) + var(--actionbar-h, 0px) + 18px); }

/* Compact when action bar is visible */
.has-action-bar .rest-timer-pill{ padding: 6px 8px; gap: 6px; }
.has-action-bar .rest-timer-sub{ display:none; }
.has-action-bar .rest-timer-toggle{ padding: 4px 10px; }


/* Desktop (mouse/trackpad): keep timer on the right.
   Leave it on the left for touch tablets (iPad) to avoid clashing with the scroll-to-top button. */
@media (min-width: 992px) and (pointer: fine){
  body:not(.has-action-bar) .rest-timer-pill{
    left: auto;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); /* sits above the scroll-to-top FAB */
  }
  body.has-action-bar .rest-timer-pill{
    left: auto;
    right: 16px;
  }
}

body.set-sheet-open .rest-timer-pill,
body.timer-sheet-open .rest-timer-pill{ opacity: 0; pointer-events:none; transform: translateY(10px); }

.rest-timer-open{
  border: 0;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  text-align: left;
}
.rest-timer-ic{ font-size: 16px; opacity: .9; }
.rest-timer-time{
  font-weight:700;
  font-size: 16px;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.rest-timer-sub{ font-size: 12px; opacity: .72; white-space: nowrap; }
.rest-timer-pill .btn.rest-timer-toggle{
  border-radius: 999px;
  padding: .25rem .6rem;
  font-weight:700;
  min-height: 32px;
}

:root[data-theme="light"] .rest-timer-pill{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
  color: #0b0b0d;
}

/* Bottom-sheet for timer (mobile-first) */
.timer-sheet-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 1063;
  opacity: 0;
  transition: opacity .18s ease;
}
.timer-sheet{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 1064;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  padding: 10px;
  max-height: calc(100svh - env(safe-area-inset-bottom, 0px) - 24px);
  max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(12px);
  transition: transform .18s ease, opacity .18s ease;
}
.timer-sheet[hidden],
.timer-sheet-backdrop[hidden]{ display: none !important; }
.timer-sheet.is-open{ opacity: 1; transform: translateY(0); }
.timer-sheet-backdrop.is-open{ opacity: 1; }

body.timer-sheet-open .live-action-bar{ opacity: 0; pointer-events: none; transform: translateY(10px); }

:root[data-theme="light"] .timer-sheet{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
}

.timer-sheet-handle{
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 2px auto 10px;
}
:root[data-theme="light"] .timer-sheet-handle{ background: rgba(0,0,0,.12); }

.timer-sheet-header{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.timer-sheet-heading{ min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.timer-sheet-title{ font-weight:700; font-size: 18px; line-height: 1.15; }
.timer-sheet-sub{ font-size: 12px; opacity: .78; }

.timer-big{
  font-size: 44px;
  font-weight:700;
  letter-spacing: .5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 6px;
}

.timer-quick{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.timer-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (min-width: 992px){
  /* On desktop, timer is still useful but avoid the bottom-sheet; keep it functional (sheet will still work) */
}

/* --- LIVE: bottom-sheet control panel for adding sets (premium mobile UX) --- */
.set-sheet-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 1065;
  opacity: 0;
  transition: opacity .18s ease;
}
.set-sheet{
  position: fixed;
  left: 12px;
  right: 12px;
  /* Keyboard-safe sheet: keep the panel above the visible keyboard, but do not stretch
     its content. JS writes --cp-kb from visualViewport using the pre-keyboard layout height. */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 1066;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  padding: 10px;
  height: auto;
  max-height: calc(var(--cp-sheet-vh, 100svh) - env(safe-area-inset-bottom, 0px) - 20px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(110%);
  will-change: transform, opacity;
  transition: transform .32s cubic-bezier(.32,.72,.24,1), opacity .22s ease;
  display: flex;
  flex-direction: column;
}

/* Keep submit buttons outside the scrollable values area. The fields may scroll on
   small screens, but + Dodaj serię / Szybko +2 stay visible above the keyboard. */
.set-sheet-form{
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1 1 auto;
  overflow:hidden;
}
.set-sheet-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(8px + var(--cp-setsheet-action-lift, 0px));
  scroll-padding-bottom: calc(16px + var(--cp-setsheet-action-lift, 0px));
}
.set-sheet-actions{
  position: relative;
  flex:0 0 auto;
  bottom:auto;
  margin-top: 8px;
  padding-top: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  background: rgba(10,10,12,.94);
  backdrop-filter: blur(14px);
  transform: translateY(calc(-1 * var(--cp-setsheet-action-lift, 0px)));
  transition: transform .14s ease;
}


/* While the sheet is open, hide the fixed action bar to avoid overlap on short viewports (tablet/landscape) */
body.set-sheet-open .live-action-bar{ opacity: 0; pointer-events: none; transform: translateY(10px); }

/* Landscape/tablet: slightly tighter margins */
@media (orientation: landscape) and (max-height: 520px){
  .set-sheet{ left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); max-height: calc(var(--cp-sheet-vh, 100dvh) - env(safe-area-inset-bottom, 0px) - 16px); }
  .set-sheet-scroll{ max-height: none; }
}

/* Open state (we still toggle the [hidden] attribute in JS for accessibility) */
.set-sheet.is-open{ opacity: 1; transform: translateY(0); }
.set-sheet-backdrop.is-open{ opacity: 1; }

/* Ensure hidden truly hides (some browsers keep transitions alive otherwise) */
.set-sheet[hidden],
.set-sheet-backdrop[hidden]{ display: none !important; }
:root[data-theme="light"] .set-sheet{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.18);
}
:root[data-theme="light"] .set-sheet-actions{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
}
:root[data-theme="light"] .set-sheet-actions{ background: rgba(255,255,255,.96); }
.set-sheet-handle{
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  margin: 2px auto 10px;
}
:root[data-theme="light"] .set-sheet-handle{ background: rgba(0,0,0,.12); }

.set-sheet-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.set-sheet-heading{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}

.set-sheet-close{ margin-left: auto; }
.set-sheet-title{
  font-weight:700;
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.set-sheet-sub{
  font-size: 12px;
  opacity: .78;
  white-space: nowrap;
}

/* LIVE: bottom-sheet set entry (mobile) - 3-column steppers with stacked fields */
.set-sheet-stack{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.set-sheet-row{
  display: grid;
  /* Wider steppers so labels like +2,5 / +1 stay readable (mobile-first) */
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  gap: 10px;
  align-items: end;
}
.set-sheet-mid{
  min-width: 0;
}
.set-sheet-row .set-sheet-input{
  width: 100%;
}
.set-sheet-row .btn-stepper{
  /* Bigger tap targets for a more "native" feel */
  min-height: 66px;
  border-radius: 18px;
  padding: 12px 0;
  font-size: 18px;
  letter-spacing: .01em;
  touch-action: manipulation;
}

/* Premium press/hold feedback */
.btn-stepper.cp-holding{
  transform: translateY(1px) scale(.985);
  filter: brightness(1.06);
}

.set-sheet-hint{
  font-size: 12px;
  opacity: .72;
  text-align: center;
  margin-top: 8px;
}
@media (max-width: 360px){
  .set-sheet-row{ grid-template-columns: 64px minmax(0,1fr) 64px; }
}

.set-sheet-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.set-sheet-col{ min-width: 0; }
.set-sheet-label{
  font-size: 12px;
  opacity: .75;
  margin-bottom: 6px;
}
.set-sheet-input{
  text-align: center;
  font-size: 18px;
  font-weight:700;
  border-radius: 16px;
}
.set-sheet-tip{
  opacity: .72;
  line-height: 1.25;
}
.set-sheet-stepper{ display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
.set-sheet-stepper .btn-stepper{ min-height: 44px; }

.set-sheet-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.set-sheet-actions .btn{ border-radius: 18px; }

.set-sheet.is-open{ opacity: 1; transform: translateY(0); }

/* Desktop inline steppers */
.desktop-stepper{
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.btn-stepper-lg{
  flex: 1;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 15px;
  font-weight:700;
  border-radius: 14px;
}
@media (min-width: 1200px){
  .btn-stepper-lg{ font-size: 16px; }
}

/* extra small screens: 2 columns to keep it tight */
@media (max-width: 360px){
  .set-sheet-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hide sheet on larger desktop only (allow tablets/iPad to use the more ergonomic bottom-sheet) */
@media (min-width: 1200px){
  html:not(.cp-touch) .set-sheet, html:not(.cp-touch) .set-sheet-backdrop{ display:none !important; }
}

/* Fallback for touch devices: keep bottom-sheet even if cp-touch class isn't present */
@media (min-width: 992px) and (pointer: coarse){
  .set-sheet, .set-sheet-backdrop{ display: block !important; }
}

/* Touch devices (iPad/tablet) should keep the bottom-sheet controls even on wide viewports */
@media (min-width: 1200px){
  html.cp-touch .cp-touch-show-xl{ display: grid !important; }
  html.cp-touch .cp-touch-hide-xl{ display: none !important; }
}

.live-action-actions form{flex:1; margin:0;}
.live-action-actions .btn{
  flex: 1;
  border-radius: 999px;
  padding: .55rem .9rem;
}

/* LIVE bottom action bar (mobile): keep both buttons perfectly equal */
.live-action-actions .btn,
.live-action-actions a.btn{
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
:root[data-theme="light"] .live-action-bar{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
@media (min-width: 1200px){
  html:not(.cp-touch) .live-action-bar{ display:none; }
}

/* Fallback for touch devices: keep LIVE action bar visible even if cp-touch class isn't present */
@media (min-width: 992px) and (pointer: coarse){
  .live-action-bar{ display: flex !important; }
}

/* Fallback for touch devices: always show LIVE bottom bar on tablets/iPad */
@media (min-width: 992px) and (pointer: coarse){
  .live-action-bar{ display: flex !important; }
}

/* Prevent background scroll when modals/bottom-sheets are open */
body.no-scroll{ overflow: hidden; }

/* Make room for sticky bar (only when present) */
.has-action-bar main.container{
  /* Make room for sticky LIVE bar (exact height is measured in JS and stored in --actionbar-h) */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--actionbar-h, 0px) + 26px) !important;
}

/* Keep cookie notice above action bar when both are visible */
.has-action-bar .cookie-notice{
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--actionbar-h, 0px) + 18px);
}

/* Scroll button sits above action bar on LIVE pages */
.has-action-bar .fab-scroll-top{
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--actionbar-h, 0px) + 18px + var(--fab-extra-bottom, 0px));
}

/* --- LIVE: mobile cards + szybkie uzupełnianie serii z planu --- */
.set-log-card{
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  margin-bottom: 10px;
}
:root[data-theme="light"] .set-log-card{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.set-log-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 420px){
  .set-log-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


.set-log-row .badge{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight:600;
  border-radius: 999px;
  padding: 6px 10px;
}

/* LIVE: compact one-badge set summary (premium, less clutter on mobile) */
.set-log-line{
  display: block;
}
.set-log-badge{
  display: block;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight:700;
  border-radius: 999px;
  padding: 7px 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* LIVE: mobile table for completed sets (compact + readable) */
.table-mobile-sets th,
.table-mobile-sets td{
  padding: 10px 10px;
  white-space: nowrap;
}
.table-mobile-sets thead th{
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.table-mobile-sets tbody td{
  font-size: .92rem;
}
.table-mobile-sets .col-set{ width: 40px; }
.table-mobile-sets .col-mode{ width: 62px; }
.table-mobile-sets .col-reps{ width: 90px; }
.table-mobile-sets .col-kg{ width: 84px; }
.table-mobile-sets .col-rir{ width: 58px; }
.table-mobile-sets .col-vol{ width: 70px; }
.table-mobile-sets .col-act{ width: 44px; }

/* Small “X” button for table rows */
.btn-xs{
  padding: 2px 8px;
  font-size: .80rem;
  line-height: 1.35;
  border-radius: 10px;
}

/* Light theme: make table headers/body readable */
:root[data-theme="light"] .table-mobile-sets thead th{
  color: rgba(0,0,0,.62);
}
:root[data-theme="light"] .table-mobile-sets tbody td{
  color: rgba(0,0,0,.88);
}

/* LIVE: prevent “stuck pressed” look on iOS buttons (focus/active) */
.js-step,
.js-open-set-sheet,
.set-sheet button{
  -webkit-tap-highlight-color: transparent;
}
.js-step:focus,
.js-step:active,
.js-open-set-sheet:focus,
.js-open-set-sheet:active,
.set-sheet button:focus,
.set-sheet button:active{
  outline: none !important;
  box-shadow: none !important;
}

/* Short press feedback that always resets (used by JS to avoid iOS stuck :active) */
.cp-pressed{
  transform: translateY(1px);
  filter: brightness(1.08);
}

.set-log-badge::-webkit-scrollbar{ display:none; }

/* Light theme: keep set summaries readable */
:root[data-theme="light"] .set-log-badge{
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.86);
}

/* Responsive set-entry mode: phones and portrait tablets use the same compact sheet.
   Landscape tablets and desktop keep the inline form. */
.cp-live-set-sheet-trigger{ display:none; }
.cp-live-set-inline{ display:block; }

@media (max-width:767.98px),
       (min-width:768px) and (max-width:1199.98px) and (orientation:portrait){
  .cp-live-set-sheet-trigger{
    display:grid;
  }
  .cp-live-set-inline{
    display:none;
  }
}

@media (min-width:768px) and (max-width:1199.98px) and (orientation:portrait){
  .set-sheet{
    left:50%;
    right:auto;
    width:min(620px,calc(100% - 32px));
    transform:translate(-50%,110%);
  }
  .set-sheet.is-open{
    transform:translate(-50%,0);
  }
}

/* Desktop inline add-set form (LIVE) */
.desktop-set-form .desktop-mode-time{ display:none; }
.desktop-set-form.mode-time .desktop-mode-time{ display:block; }
.desktop-set-form.mode-time .desktop-mode-reps{ display:none; }

/* LIVE: keep the desktop inline "Dodaj serię" form out of the way on smaller screens.
   Mobile uses the bottom-sheet controls; if CSS fails to load, the form remains as a functional fallback. */
@media (max-width: 991.98px){
  .desktop-set-form-wrap{ display:none; }
}

/* LIVE: premium steppers (mobile-first) */
.live-stepper{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.btn-stepper{
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  font-size: 18px;
  font-weight:700;
  border-radius: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.btn-stepper:focus,
.btn-stepper:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
.btn-stepper:active{
  transform: translateY(1px);
}

/* If a browser keeps a persistent active/focus look, the JS toggles this class briefly. */
.btn-stepper.cp-pressed{
  transform: translateY(1px);
  filter: brightness(1.08);
}

/* Long-press feedback (auto-repeat steppers) */
.btn-stepper.cp-holding{
  transform: translateY(1px) scale(.99);
  filter: brightness(1.12);
}

@media (hover: none){
  /* iOS Safari potrafi "przyklejać" :active – na dotykowych wyłączamy i zostawiamy feedback z JS (.cp-pressed) */
  .btn-stepper:active{ transform: none !important; }
}


.btn-stepper-plus{
  border-color: rgba(255,123,0,.55);
  background: linear-gradient(180deg, rgba(255,123,0,.26), rgba(255,123,0,.14));
  color: #fff;
}
.btn-stepper-minus{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.88);
}


/* Stepper label colors (theme-aware)
   Light theme: black text for readability on bright buttons.
   Dark theme: white text for consistent contrast.
*/
.btn-stepper,
.btn-stepper-plus,
.btn-stepper-minus{
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
html[data-theme="light"] .btn-stepper,
html[data-theme="light"] .btn-stepper-plus,
html[data-theme="light"] .btn-stepper-minus{
  color: #0B0B0D !important;
}
html[data-theme="dark"] .btn-stepper,
html[data-theme="dark"] .btn-stepper-plus,
html[data-theme="dark"] .btn-stepper-minus{
  color: rgba(255,255,255,.92) !important;
}

/* LIVE: compact labels & tighter vertical rhythm inside quick-add panel */
.js-set-form .form-label-compact{
  margin-bottom: 4px;
}
.js-set-form .form-control,
.js-set-form .form-select{
  min-height: 44px;
}

/* Very small screens: avoid cramped 3-up; fall back to 2-up */
@media (max-width: 360px){
  .js-set-form .live-col{ flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 420px){
  .btn-stepper{ font-size: 18px; }
}
.bulk-sets{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
}
:root[data-theme="light"] .bulk-sets{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.01);
}
.bulk-sets-summary{
  cursor: pointer;
  list-style: none;
  font-weight:700;
}
.bulk-sets-summary::-webkit-details-marker{ display:none; }

.bulk-tools{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px){
  .bulk-tools{ grid-template-columns: 1fr 1fr; }
}

.bulk-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px){
  .bulk-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px){
  .bulk-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

.set-entry-card{
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
:root[data-theme="light"] .set-entry-card{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
}

.set-entry-head{ display:flex; align-items:center; justify-content:space-between; }
.set-entry-title{ display:flex; flex-wrap:wrap; align-items:center; }

.set-entry-inputs{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.set-entry-inputs[data-mode="time"]{ grid-template-columns: repeat(2, minmax(0,1fr)); }

.input-compact{
  min-height: 44px;
  padding: .55rem .75rem;
  border-radius: 14px;
}

.set-entry-note summary{ cursor: pointer; list-style: none; }
.set-entry-note summary::-webkit-details-marker{ display:none; }

/* --- Plan item form: mobile-friendly segmented controls --- */
.plan-item-form .btn-group{ width: 100%; }
.plan-item-form .btn-group .btn{ flex: 1; }

/* --- Accordion brand (dark/light) --- */
.accordion-brand{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
}
:root[data-theme="light"] .accordion-brand{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.01);
}
.accordion-brand .accordion-button{
  background: transparent;
  color: inherit;
  font-weight:700;
  border-radius: 16px;
}
.accordion-brand .accordion-button:focus{
  box-shadow: 0 0 0 .25rem rgba(255,106,31,.18);
  border-color: rgba(255,106,31,.35);
}
.accordion-brand .accordion-body{ padding-top: 10px; }

/* FAQ (accordion) - premium readable styling */
.accordion-brand .accordion-item{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 10px;
}
.accordion-brand .accordion-item:last-child{ margin-bottom: 0; }
.accordion-brand .accordion-button{
  padding: 16px 18px;
  background: transparent;
}
.accordion-brand .accordion-button:not(.collapsed){
  background: rgba(255,140,0,.10);
  color: inherit;
}
.accordion-brand .accordion-collapse{
  background: rgba(0,0,0,.10);
}
.accordion-brand .accordion-body{
  color: var(--text-85);
}
.accordion-brand .accordion-button::after{
  filter: invert(1);
  opacity: .85;
}
:root[data-theme="light"] .accordion-brand .accordion-item{
  background: rgba(255,255,255,.86);
  border-color: rgba(0,0,0,.10);
}
:root[data-theme="light"] .accordion-brand .accordion-collapse{
  background: rgba(255,255,255,.92);
}
:root[data-theme="light"] .accordion-brand .accordion-button::after{
  filter: none;
}


/* Dark theme: FAQ readability (force contrast in accordion) */
:root[data-theme="dark"] .accordion-brand .accordion-item{
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.12);
}
:root[data-theme="dark"] .accordion-brand .accordion-button{
  color: rgba(255,255,255,.92) !important;
}
:root[data-theme="dark"] .accordion-brand .accordion-button.collapsed{
  background: rgba(255,255,255,.02);
}
:root[data-theme="dark"] .accordion-brand .accordion-button:hover{
  background: rgba(255,255,255,.04);
}
:root[data-theme="dark"] .accordion-brand .accordion-button:not(.collapsed){
  background: rgba(255,106,31,.16);
  color: rgba(255,255,255,.96) !important;
}
:root[data-theme="dark"] .accordion-brand .accordion-collapse{
  background: rgba(0,0,0,.20);
}
:root[data-theme="dark"] .accordion-brand .accordion-body{
  color: rgba(255,255,255,.80);
}



/* =========================
   Switches (Bootstrap form-switch)
   ========================= */

/* Make all ON states use brand orange instead of bootstrap blue */
.form-switch .form-check-input:checked{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Focus ring in brand orange (avoid blue glow on mobile) */
.form-switch .form-check-input:focus{
  border-color: rgba(255,106,31,.75);
  box-shadow: 0 0 0 .25rem rgba(255,106,31,.25);
}

/* Keep a subtle ring also when checked + focused */
.form-switch .form-check-input:checked:focus{
  box-shadow: 0 0 0 .25rem rgba(255,106,31,.28);
}

/* =========================
   Report ready (PDF) – mobile friendly actions
   ========================= */

.report-ready-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
  margin-top: .25rem;
}

@media (min-width: 420px){
  .report-ready-actions{
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px){
  .report-ready-actions{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
}

.report-ready-actions .btn{
  width: 100%;
}

/* =========================
   Small toast notifications
   ========================= */

.coachpro-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(14, 14, 16, .92);
  color: #fff;
  font-size: 14px;
  max-width: 92vw;
  box-shadow: 0 12px 34px rgba(0,0,0,.38);
  z-index: 3000;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.coachpro-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.has-action-bar .coachpro-toast{
  bottom: 104px;
}

/* =========================
   PDF preview modal (mobile/PWA)
   ========================= */

.report-ready-page{max-width:760px;margin:0 auto;}
.report-ready-card{padding:18px;}

/* Lock background scroll when preview open */
.pdf-preview-open{overflow:hidden;}

.pdf-preview-modal{
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0,0,0,.58);
  padding: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pdf-preview-sheet{
  width: 100%;
  max-width: 980px;
  height: calc(100vh - 24px);
  background: rgba(18, 18, 22, .98);
  color: rgba(242,242,243,0.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

.pdf-preview-header{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}


.pdf-preview-sheet .text-muted{ color: var(--muted) !important; }
.pdf-preview-title{
  font-weight:700;
  letter-spacing: .2px;
}

.pdf-preview-close{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  width: 40px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Light theme: make the sheet clearly visible (white surface + dark text) */
html[data-theme="light"] .pdf-preview-sheet{
  background: rgba(255,255,255,0.98);
  color: rgba(11,11,13,0.92);
  border: 1px solid rgba(11,11,13,0.10);
  box-shadow: 0 24px 70px rgba(11,11,13,0.20);
}
html[data-theme="light"] .pdf-preview-header{
  border-bottom: 1px solid rgba(11,11,13,0.10);
  background: linear-gradient(180deg, rgba(11,11,13,.03), rgba(11,11,13,0));
}
html[data-theme="light"] .pdf-preview-close{
  background: rgba(11,11,13,.06);
  border: 1px solid rgba(11,11,13,.12);
  color: rgba(11,11,13,0.90);
}

.pdf-preview-close:active{
  transform: translateY(1px);
}

.pdf-preview-frame{
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}

@media (min-width: 992px){
  .pdf-preview-modal{align-items: center;}
  .pdf-preview-sheet{height: calc(100vh - 60px);}
}


/* Wider desktop containers (restored Bootstrap defaults) */

/* Client detail: don't reserve empty space under the list when it is short.
   Enable scroll only when the list is long (template adds .is-scroll). */
#client-history-card .trainings-list-client{
  max-height: none;
  overflow: visible;
}

#client-history-card .trainings-list-client.is-scroll{
  overflow: auto;
  max-height: 520px;
}

@media (min-width: 992px){
  #client-history-card .trainings-list-client.is-scroll{
    /* scale with viewport, but never explode the layout */
    max-height: clamp(280px, 45vh, 520px);
  }
}

@media (max-width: 576px){
  #client-history-card .trainings-list-client.is-scroll{ max-height: 360px; }
}


/* Mobile preview - brand mark under CTA */
.mobile-preview-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.mobile-preview-brand .brandmark{
  display:block;
  height:34px;
  width:auto;
  max-width:360px;
  opacity:.92;
}
html[data-theme="dark"] .mobile-preview-brand .brandmark-light{ display:none; }
html[data-theme="light"] .mobile-preview-brand .brandmark-dark{ display:none; }

@media (max-width: 576px){
  .mobile-preview-brand .brandmark{
    height:30px;
    max-width:280px;
  }
}