/* Workout site — app styles (Bootstrap 5 augment). Usable down to 360px.
 * Theme: "Claude" — warm ivory surfaces, coral accent. */

:root {
  --ws-accent: #d97757;
  --ws-accent-hover: #c6613f;
  --ws-accent-active: #b85835;
  --ws-curriculum-w: 380px;
}

/* Warm ivory base over Bootstrap's light theme. */
[data-bs-theme="light"] {
  --bs-body-bg: #faf9f5;
  --bs-body-color: #3d3d3a;
  --bs-tertiary-bg: #f0eee6;
  --bs-border-color: #e3e0d5;
  --bs-link-color: #c6613f;
  --bs-link-hover-color: #a84b2b;
  --bs-link-color-rgb: 198, 97, 63;
  --bs-link-hover-color-rgb: 168, 75, 43;
}

/* Coral primary (buttons, badges, progress, focus). */
.btn-primary {
  --bs-btn-bg: var(--ws-accent);
  --bs-btn-border-color: var(--ws-accent);
  --bs-btn-hover-bg: var(--ws-accent-hover);
  --bs-btn-hover-border-color: var(--ws-accent-hover);
  --bs-btn-active-bg: var(--ws-accent-active);
  --bs-btn-active-border-color: var(--ws-accent-active);
  --bs-btn-disabled-bg: var(--ws-accent);
  --bs-btn-disabled-border-color: var(--ws-accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--ws-accent-hover);
  --bs-btn-border-color: var(--ws-accent);
  --bs-btn-hover-bg: var(--ws-accent);
  --bs-btn-hover-border-color: var(--ws-accent);
  --bs-btn-active-bg: var(--ws-accent-active);
  --bs-btn-active-border-color: var(--ws-accent-active);
}
.text-bg-primary { background-color: var(--ws-accent) !important; }
.text-bg-info { background-color: #f0e2d9 !important; color: #7c3f26 !important; }
.progress-bar { background-color: var(--ws-accent); }
.form-control:focus, .form-select:focus {
  border-color: rgba(217, 119, 87, .5);
  box-shadow: 0 0 0 .25rem rgba(217, 119, 87, .2);
}
.form-check-input:checked { background-color: var(--ws-accent); border-color: var(--ws-accent); }
.form-check-input:focus {
  border-color: rgba(217, 119, 87, .5);
  box-shadow: 0 0 0 .25rem rgba(217, 119, 87, .2);
}

/* White cards pop against the ivory page. */
.card { --bs-card-bg: #ffffff; }

.brand-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, #d97757, #e8a87c);
  box-shadow: 0 0 12px rgba(217, 119, 87, .55);
}
.brand-dot-lg { width: 22px; height: 22px; }

/* ---------- login ---------- */
.login-page { background: radial-gradient(1200px 600px at 20% 0%, #f3e4d8 0%, #faf9f5 55%); }
.login-card { width: min(420px, calc(100vw - 2rem)); border: 1px solid rgba(61, 61, 58, .1); }

/* ---------- dashboard ---------- */
.stat-list dt { font-weight: 500; color: var(--bs-secondary-color); }
.stat-list dd { margin-bottom: .35rem; }

/* ---------- player layout ---------- */
.player-body { overflow: hidden; }
.main-fluid { padding: 0; }
.player-wrap {
  display: flex;
  height: calc(100vh - 57px);            /* below sticky navbar */
}
.curriculum {
  width: var(--ws-curriculum-w);
  flex: 0 0 var(--ws-curriculum-w);
  border-right: 1px solid var(--bs-border-color);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bs-body-bg);
}
.curriculum-progress { padding: 1rem; }
.curriculum-days { overflow-y: auto; flex: 1 1 auto; }
.stage { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.stage-topbar {
  display: flex; align-items: center;
  padding: .5rem .75rem; border-bottom: 1px solid var(--bs-border-color);
}
.stage-inner { overflow-y: auto; padding: 1rem 1rem 4rem; }
@media (min-width: 992px) {
  .stage-inner { padding: 1.5rem 2rem 4rem; }
}

/* On <lg the curriculum becomes an offcanvas drawer (Bootstrap handles it). */
@media (max-width: 991.98px) {
  .player-wrap { height: auto; min-height: calc(100vh - 57px); }
  .player-body { overflow: auto; }
  .curriculum { width: min(86vw, 380px); border-right: 0; }
  .stage { display: block; overflow: visible; }
  .stage-inner { overflow: visible; }
}

/* ---------- curriculum items ---------- */
.ex-item {
  display: flex; gap: .75rem; align-items: flex-start;
  width: 100%; text-align: left;
  background: transparent; border: 0;
  border-top: 1px solid var(--bs-border-color-translucent);
  padding: .65rem 1rem;
  color: var(--bs-body-color);
  cursor: pointer;
}
.ex-item:hover { background: rgba(61, 61, 58, .05); }
.ex-item.active { background: rgba(217, 119, 87, .12); box-shadow: inset 3px 0 0 var(--ws-accent); }
.ex-check {
  flex: 0 0 20px; height: 20px; width: 20px; margin-top: 2px;
  border: 2px solid var(--bs-secondary-color); border-radius: 50%;
  position: relative; transition: all .15s ease;
}
.ex-item.done .ex-check { background: #2fb877; border-color: #2fb877; }
.ex-item.done .ex-check::after {
  content: "✓"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.ex-item-main { min-width: 0; }
.ex-item-name { display: block; font-size: .92rem; line-height: 1.25; }
.ex-item.done .ex-item-name { color: var(--bs-secondary-color); }
.ex-item-meta { display: block; font-size: .75rem; color: var(--bs-secondary-color); margin-top: 2px; }

/* ---------- stage: media + chips ---------- */
.media-box { background: #000; border-radius: .75rem; overflow: hidden; }
.media-box video, .media-box iframe, .media-box img { border: 0; }
.media-placeholder { background: linear-gradient(135deg, #f0eee6, #e6ddcd); height: 100%; }
.ph-icon { font-size: 3rem; }

.detail-chips .chip {
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
  border-radius: .6rem; padding: .5rem .75rem; height: 100%;
}
.chip-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.chip-value { font-weight: 600; }

/* ---------- timer ---------- */
.timer-display {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 8vw, 4rem);
  font-weight: 700; letter-spacing: .02em; line-height: 1;
}
.timer-display.timer-zero { color: #ff6b6b; animation: ws-pulse 1s ease 3; }
@keyframes ws-pulse { 50% { opacity: .25; } }

/* ---------- record table ---------- */
.record-table th { font-size: .72rem; text-transform: uppercase; color: var(--bs-secondary-color); }

/* ---------- toasts ---------- */
.ws-toast {
  position: fixed; left: 50%; bottom: 1rem; transform: translate(-50%, 20px);
  opacity: 0; transition: all .25s ease; z-index: 2000;
  margin: 0; padding: .5rem .9rem; box-shadow: 0 6px 24px rgba(61,61,58,.18);
}
.ws-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- history ---------- */
.history-scroll { max-height: 560px; overflow-y: auto; }
.history-picker { min-width: min(420px, 100%); }

/* ---------- admin ---------- */
.table-actions { white-space: nowrap; }

/* ---------- tiny screens (360px) ---------- */
@media (max-width: 400px) {
  .stage-inner { padding: .75rem .6rem 3rem; }
  .btn-group .btn { padding-left: .5rem; padding-right: .5rem; }
  .detail-chips .chip { padding: .4rem .5rem; }
}