/*
 * pages.css — consolidated page-specific styles for the SPA shell.
 *
 * Before the SPA merge (see js/app.js header comment) each of history.html /
 * settings.html / training-plans.html / training-plan-edit.html carried its
 * own inline <style> block with page-specific rules not covered by
 * css/base.css. Now that all 7 screens live inside one shared shell
 * document with one shared <head>, those blocks have been moved here and
 * de-duplicated (several — `.toast`/`.toast--visible`, `.switch` and its
 * children — were byte-identical across two or three of the old files).
 * stats.html/session-detail.html already had their own dedicated stylesheets
 * (css/stats.css / css/session-detail.css) and are unaffected.
 */

/* ---------------- Back-button glyph sizing (history/settings/training-plan-edit) ---------------- */
.history-back,
.settings-back,
.edit-back,
.training-plans-back {
  font-size: 20px;
  line-height: 1;
}

/* ---------------- Shared toast (history/settings/training-plan-edit/session-detail) ---------------- */
/*
 * One shared #appToast element now lives once in the shell body (see
 * js/ui/toast.js) instead of each page creating/reusing its own — see that
 * module's header comment.
 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(12px);
  background: var(--color-card-bg-dark);
  color: var(--color-text-primary);
  border: 1px solid var(--color-pencil-line-soft);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 14px;
  max-width: 90vw;
  text-align: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

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

/* ---------------- Shared switch control (settings/training-plans) ---------------- */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch__track {
  position: absolute;
  inset: 0;
  background: var(--color-card-bg-dark);
  border: 1px solid var(--color-pencil-line-soft);
  border-radius: 13px;
  transition: background 0.15s ease;
}

.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-text-primary);
  transition: transform 0.15s ease;
}

.switch input:checked + .switch__track .switch__thumb {
  transform: translateX(18px);
}

/*
 * Bug found 2026-09-29 (user report: "el botón del toggle, en una posición
 * se ve bien, pero en la otra no (pasa en todos los toggles)"). Root cause:
 * `opacity: 0.35` was applied to .switch__track to get a translucent-aqua
 * "on" tint — but .switch__thumb is a CHILD of .switch__track (see the
 * markup: <span class="switch__track"><span class="switch__thumb">), and
 * CSS opacity applies to an element's entire rendered subtree, not just its
 * own background. So the checked/"on" state was fading the visible white
 * thumb circle down to 35% too, making it look washed-out/low-contrast next
 * to the crisp, fully-opaque thumb in the unchecked/"off" state — exactly
 * the "looks fine in one position, not the other" symptom. Fix: use an
 * rgba() background instead of a flat color + element-wide opacity, so only
 * the track's own fill is translucent and the thumb stays fully opaque in
 * both states. --color-aqua-rgb already exists for exactly this purpose
 * (see its other rgba() uses in base.css's .status-dot).
 */
.switch input:checked + .switch__track {
  background: rgba(var(--color-aqua-rgb), 0.35);
  border-color: var(--color-aqua);
}

/* ================== history ================== */

.history-list-wrap {
  margin-top: 14px;
}

/* Six-column weighted row scheme (SPEC.md §7.3/§10): Fecha 56, Hora 46,
   Largos/Metros 62, Media/Mejor 100m 54, Tiempo 52, spacer(delete) 26. */
/*
 * Bug found 2026-09-29 (user report: "elimina esa línea divisoria que has
 * añadido entre sesiones"). Confirmed against the Android original
 * (HistoryActivity.kt buildSessionRow()): each row uses bg_card (no fill,
 * no stroke — see base.css's own .card comment) with only a bottomMargin
 * for spacing; there is no RecyclerView/DividerItemDecoration and no <View>
 * divider anywhere in the native layout. The `border-bottom` here was
 * extra chrome never in the original design — replaced with matching
 * margin-only spacing.
 */
.history-row {
  display: flex;
  align-items: center;
  padding: 10px 4px;
  margin-bottom: 4px;
  cursor: pointer;
}

.history-col {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-primary);
  padding: 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-col--date { flex: 56 0 0; }
.history-col--hour { flex: 46 0 0; }
.history-col--lapsdist { flex: 62 0 0; }
.history-col--pace { flex: 54 0 0; }
.history-col--duration { flex: 52 0 0; }
.history-col--delete { flex: 26 0 0; text-align: center; }

.history-header-row {
  display: flex;
  margin-bottom: 8px;
  padding: 0 4px;
}

.history-header-cell {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}

.history-col--pace.pace--avg { color: var(--color-aqua); }
.history-col--pace.pace--best { color: var(--color-gold); }

.history-delete-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}

.history-delete-btn--armed {
  color: var(--color-danger-red);
}

.history-bottom-row {
  display: flex;
  margin-top: 12px;
  gap: 12px;
}

.history-bottom-row .btn-pill {
  flex: 1;
}

.btn-clear-history {
  width: 100%;
  margin-top: 10px;
  color: var(--color-coral);
}

/* ================== settings ================== */

.settings-field {
  margin-top: 14px;
}

.settings-field:first-child {
  margin-top: 0;
}

.settings-field__label {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

/* --- Theme switch card --- */
.theme-switch-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.theme-swatch {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-pencil-line-soft);
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s ease;
}

/*
 * SPEC.md 7.6: swatch colors are fixed per-theme (NOT ?attr/-driven — i.e.
 * NOT the currently-active --color-bg-top/bottom vars, which change with
 * data-theme). Hardcoded literal light/dark bg colors here on purpose, one
 * for each theme option regardless of which theme is currently active.
 */
.theme-swatch--light {
  background: #F7F5EF;
}

.theme-swatch--dark {
  background: #121210;
}

/*
 * The app-logo icon inside each swatch (activity_settings.xml: a 38dp
 * circle containing ic_app_logo with ~8dp padding, i.e. the icon occupies
 * roughly 58% of the circle -> 22px inside a 38px circle here). Each swatch
 * tints the SAME logo mask with the FIXED (theme-independent) text-primary
 * color that theme would use — see css/theme.css's
 * --color-text-primary-theme-light/-dark for why these aren't the normal,
 * currently-active-theme-driven --color-text-primary variable.
 *
 * Uses CSS mask-image (not a `filter()` chain) for an exact tint, since the
 * source PNG is a single-color-with-alpha image — see css/base.css's
 * .app-header__logo comment for why a filter() approximation was explicitly
 * rejected elsewhere in this project; a mask-image tint here is a genuinely
 * different (and exact) technique, not the same rejected hack.
 *
 * Bug found on real-device/live verification (2026-09-29): the first version
 * of this rule masked with ic_launcher_fish_mono.png, which LOOKS like the
 * obvious "monochrome logo" choice by name, but is actually an Android
 * adaptive-icon FOREGROUND layer — those are drawn tiny and thin inside a
 * much larger transparent canvas (the OS crops/scales them specially), so at
 * a normal icon size it's ~98.7% transparent and reads as a blank circle.
 * ic_app_logo.png (the SAME image already used successfully, untinted, in
 * every header) turns out to ALSO be a single solid color (white) with a
 * varying alpha channel — i.e. already a valid mask source — and covers
 * ~26% of its frame instead of ~1.6%, which is what actually renders as a
 * visible mark at 22px. Verified live on pezillo.com before committing this
 * fix. mask-size: contain still letterboxes it correctly even though the
 * source is a wide (461x215), non-square image, exactly like object-fit:
 * contain does for the plain <img> use of this same file in the header.
 */
.theme-swatch__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  pointer-events: none;
  mask-image: url('../assets/images/ic_app_logo.png');
  -webkit-mask-image: url('../assets/images/ic_app_logo.png');
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.theme-swatch--light .theme-swatch__icon {
  background-color: var(--color-text-primary-theme-light);
}

.theme-swatch--dark .theme-swatch__icon {
  background-color: var(--color-text-primary-theme-dark);
}

/*
 * SPEC.md 7.6 originally called for "only the inactive theme's swatch
 * shows color" (the active one fading toward transparent) — tried at 0.12
 * opacity, then at 0.4 + an aqua border after a 2026-09-29 bug report that
 * 0.12 made the active swatch vanish. User feedback on THAT fix (still
 * 2026-09-29): the two swatches now visibly differ depending on which is
 * selected, and that differential highlight isn't wanted at all — "que
 * estén igual" (both should look the same regardless of selection). Both
 * swatches are now unconditionally styled the same; `.theme-swatch--active`
 * is intentionally not given any rule here (see settings.js, which no
 * longer toggles that class either).
 */

/* Developer mode row (.dev-mode-row/.dev-mode-row__label) removed
   2026-09-29 along with the rest of developer mode, per explicit user
   request — see DEVELOPER_MODE_RESTORE.md at the project root. */

.settings-save-btn {
  width: 100%;
  margin-top: 16px;
}

/* ================== training-plans ================== */

/* SPEC.md 7.9 point 2: btnNewTrainingPlan uses bg_card_accent_top, 15sp bold aqua text. */
.btn-new-plan {
  display: block;
  width: 100%;
  margin-top: 20px;
  font-size: 15px;
  font-weight: bold;
  color: var(--color-aqua);
  text-align: center;
  cursor: pointer;
}

.empty-plans {
  margin-top: 24px;
  font-size: 16px;
  color: var(--color-text-secondary);
}

.plans-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*
 * Plan-summary card: title-or-fallback + interval count + active toggle
 * (SPEC.md 7.9 point 4, "plan-summary cards injected in code").
 *
 * Bug found 2026-09-29 (user report: "el fondo que tiene un entrenamiento,
 * que ahora está como negro, ponlo transparente también"). Confirmed
 * against the Android original (TrainingPlansActivity.kt buildPlanRow()):
 * these rows use the SAME `bg_card` drawable as every other card in the
 * app — no fill, no stroke (see base.css's own .card comment) — not a
 * solid dark fill. `var(--color-card-bg-dark)` was the wrong shared token
 * to reach for here (that one's reserved for the debug/log-style panels
 * that DO keep a solid fill, per base.css's .card--dark comment).
 */
.plan-card {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: transparent;
  border-radius: 12px;
  padding: 14px;
}

.plan-card__info {
  flex: 1;
  min-width: 0;
}

.plan-card__title {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-card__count {
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* "Usar este plan" / "En uso" control (see js/pages/training-plans.js doc
   comment for the ambiguity this resolves — SPEC.md 13.5 describes a Switch
   per row on Android; ported here as a small pill button). */
.plan-card__activate {
  flex-shrink: 0;
  border-radius: 45px;
  border: 1px solid var(--color-pencil-line-soft);
  background: transparent;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: bold;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.plan-card__activate--active {
  color: var(--color-aqua);
  border-color: var(--color-aqua);
  cursor: default;
}

/* --- Training-alert toggle row (SPEC.md 7.9 point 5) --- */
.training-alert-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
}

.training-alert-row__label {
  font-size: 15px;
  font-weight: bold;
  color: var(--color-text-primary);
}

/* ================== training-plan-edit ================== */

.plan-title-input {
  margin-top: 18px;
}

/* btnPasteTrainingPlan (SPEC.md 7.8 point 3): transparent bg, aqua text, 14sp. */
.btn-paste {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: transparent;
  border: none;
  color: var(--color-aqua);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

.intervals-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* item_training_interval_row.xml (SPEC.md 7.12). */
.interval-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 8px 4px;
}

.interval-row__reorder {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.interval-row__reorder-btn {
  width: 24px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.interval-row__reorder-btn:disabled {
  color: var(--color-text-muted);
  cursor: default;
  opacity: 0.4;
}

.interval-row__amount {
  width: 72px;
  flex-shrink: 0;
  text-align: center;
  font-size: 13px;
  padding: 8px;
}

.interval-row__unit {
  width: 76px;
  flex-shrink: 0;
  border-radius: 45px;
  background: transparent;
  border: 1px solid var(--color-aqua);
  color: var(--color-aqua);
  font-weight: bold;
  font-size: 12px;
  padding: 8px 4px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
}

.interval-row__label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  padding: 8px;
}

.interval-row__delete {
  flex-shrink: 0;
  width: 30px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

.btn-add-row {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-aqua);
  text-align: center;
  cursor: pointer;
}

.btn-save-plan {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.btn-delete-plan {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

/* --- Paste-plan dialog (dialog_paste_training_plan.xml, SPEC.md 7.11) ---
   No reusable JS helper exists for this one (it has a <textarea> instead of
   just text+buttons), so it's built by hand in js/pages/training-plan-edit.js
   re-using the same .dialog-overlay/.dialog-box classes confirmDialog.js
   relies on. */
.paste-dialog__help {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.paste-dialog__textarea {
  display: block;
  width: 100%;
  height: 140px;
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid var(--color-pencil-line-soft);
  background: transparent;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 15px;
  padding: 12px;
  resize: vertical;
}

.paste-dialog__textarea:focus {
  outline: none;
  border-color: var(--color-aqua);
}
