/*
  The lifepace.eu look over Bootstrap 5.3.8: the colours, font and radii of
  lifepace-website/style.css, set as Bootstrap's own CSS variables so every
  component (cards, forms, buttons, navs) takes them. The page sets
  data-bs-theme="dark"; these values replace Bootstrap's dark palette.
*/
:root,
[data-bs-theme="dark"] {
  --lp-bg: #0E1829;
  --lp-surface: #16243D;
  --lp-surface-2: #1C2D4B;
  --lp-mint: #5EE0B8;
  --lp-mint-rgb: 94, 224, 184;
  --lp-ink: #FFFFFF;
  --lp-secondary: #A3B3CC;
  --lp-tertiary: #6B7C98;
  --lp-line: rgba(255, 255, 255, 0.08);
  --lp-body: #DDE5F2;

  --bs-body-bg: var(--lp-bg);
  --bs-body-bg-rgb: 14, 24, 41;
  --bs-body-color: var(--lp-body);
  --bs-emphasis-color: var(--lp-ink);
  --bs-secondary-color: var(--lp-secondary);
  --bs-tertiary-color: var(--lp-tertiary);
  --bs-secondary-bg: var(--lp-surface);
  --bs-tertiary-bg: var(--lp-surface-2);
  --bs-border-color: var(--lp-line);
  --bs-border-color-translucent: var(--lp-line);
  --bs-heading-color: var(--lp-ink);
  --bs-link-color: var(--lp-mint);
  --bs-link-color-rgb: var(--lp-mint-rgb);
  --bs-link-hover-color: #8CEBCD;
  --bs-link-hover-color-rgb: 140, 235, 205;
  --bs-primary: var(--lp-mint);
  --bs-primary-rgb: var(--lp-mint-rgb);
  --bs-primary-text-emphasis: var(--lp-mint);
  --bs-primary-bg-subtle: rgba(var(--lp-mint-rgb), 0.12);
  --bs-primary-border-subtle: rgba(var(--lp-mint-rgb), 0.35);
  --bs-focus-ring-color: rgba(var(--lp-mint-rgb), 0.35);
  --bs-border-radius: 12px;
  --bs-border-radius-lg: 18px;
  --bs-body-font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
}

/* Buttons: mint on navy, as the site's links. */
.btn-primary {
  --bs-btn-color: var(--lp-bg);
  --bs-btn-bg: var(--lp-mint);
  --bs-btn-border-color: var(--lp-mint);
  --bs-btn-hover-color: var(--lp-bg);
  --bs-btn-hover-bg: #8CEBCD;
  --bs-btn-hover-border-color: #8CEBCD;
  --bs-btn-active-color: var(--lp-bg);
  --bs-btn-active-bg: #4CC9A3;
  --bs-btn-active-border-color: #4CC9A3;
  --bs-btn-disabled-color: var(--lp-bg);
  --bs-btn-disabled-bg: var(--lp-mint);
  --bs-btn-disabled-border-color: var(--lp-mint);
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--lp-mint);
  --bs-btn-border-color: var(--lp-mint);
  --bs-btn-hover-color: var(--lp-bg);
  --bs-btn-hover-bg: var(--lp-mint);
  --bs-btn-hover-border-color: var(--lp-mint);
  --bs-btn-active-color: var(--lp-bg);
  --bs-btn-active-bg: var(--lp-mint);
  --bs-btn-active-border-color: var(--lp-mint);
}

/* Cards: the site's .card, a surface with 18px corners and no border. */
.card {
  --bs-card-bg: var(--lp-surface);
  --bs-card-border-width: 0;
  --bs-card-border-radius: 18px;
  --bs-card-inner-border-radius: 18px;
  --bs-card-cap-bg: transparent;
}

.card-title { color: var(--lp-mint); font-size: 1.0625rem; font-weight: 700; }

.form-control,
.form-select {
  --bs-body-bg: var(--lp-surface-2);
  border-color: var(--lp-line);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--lp-mint-rgb), 0.6);
}

.form-check-input:checked {
  background-color: var(--lp-mint);
  border-color: var(--lp-mint);
}

.form-range::-webkit-slider-thumb { background-color: var(--lp-mint); }
.form-range::-moz-range-thumb { background-color: var(--lp-mint); }

.text-mint { color: var(--lp-mint) !important; }
.text-tertiary { color: var(--lp-tertiary) !important; }

/* The brand row: the site's header, icon with 9px corners beside the name. */
.lp-brand { color: var(--lp-ink); font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.lp-brand img { width: 32px; height: 32px; border-radius: 9px; }

/*
  Navigation. A phone gets a fixed tab bar at the bottom (Runna's tabs); from
  the lg breakpoint the same links sit in a sidebar on the left.
*/
.lp-tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1030;
  display: flex;
  justify-content: space-around;
  background: var(--lp-surface);
  border-top: 1px solid var(--lp-line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}

.lp-tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--lp-tertiary);
  text-decoration: none;
  font-size: 0.75rem;
}

.lp-tabbar a svg { width: 24px; height: 24px; }
.lp-tabbar a[aria-current="page"] { color: var(--lp-mint); }

.lp-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

.lp-sidebar { display: none; }

@media (min-width: 992px) {
  .lp-tabbar { display: none; }
  .lp-main { padding-bottom: 2rem; }

  .lp-sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 16px;
    border-right: 1px solid var(--lp-line);
  }

  .lp-sidebar a.lp-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--lp-secondary);
    text-decoration: none;
  }

  .lp-sidebar a.lp-nav svg { width: 22px; height: 22px; }
  .lp-sidebar a.lp-nav:hover { background: var(--lp-surface); color: var(--lp-ink); }
  .lp-sidebar a.lp-nav[aria-current="page"] { background: var(--lp-surface); color: var(--lp-mint); }
}

/* Session steps: one row per step, its pace range set apart. */
.lp-step { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--lp-line); }
.lp-step:last-child { border-bottom: 0; }
.lp-pace { color: var(--lp-mint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-num { font-variant-numeric: tabular-nums; }

/*
  Charts are server-rendered SVG (internal/admin/viz); they fill the card,
  and on a narrow screen keep a readable width and scroll sideways,
  opening at their right end, the latest weeks (the right-to-left box
  starts its scroll there; the chart itself reads left to right). The
  charts carry classes only; their colours for the dark theme are at the
  end of this file.
*/
.lp-chart { margin: 0; overflow-x: auto; direction: rtl; }
.lp-chart svg { width: 100%; height: auto; display: block; direction: ltr; }
.lp-chart svg.viz { min-width: 600px; }

/* A lap table keeps each figure on one line; a phone leaves out the step. */
.lp-laps td, .lp-laps th { white-space: nowrap; }
@media (max-width: 767.98px) {
  .lp-laps .lp-lap-step { display: none; }
}

/* The content column: centred, at most 960px wide. */
.lp-content { max-width: 960px; }

/* The account menu's button on a phone: the icon alone. */
.lp-account { color: var(--lp-secondary); padding: 4px; border: 0; }
.lp-account:hover,
.lp-account[aria-expanded="true"] { color: var(--lp-ink); }
.lp-account svg { width: 28px; height: 28px; display: block; }

/* The login pages: one card in the middle of the screen. */
.lp-auth { max-width: 24rem; width: 100%; }
.lp-auth-icon { width: 64px; height: 64px; border-radius: 16px; }

/*
  Settings. The walk-through's steps as pills; an Advanced header's
  summary of what it states, one line under its title; a list's or table's
  boxes narrow enough for several in a row on a phone.
*/
.lp-steps { gap: 4px; padding-left: 0; }
.lp-steps .nav-link { padding: 4px 12px; font-size: 0.875rem; color: var(--lp-secondary); }
.lp-steps .nav-link.active { background-color: var(--lp-mint); color: var(--lp-bg); }
.lp-steps .nav-link.lp-done { color: var(--lp-mint); }
.lp-summary { font-size: 0.8125rem; color: var(--lp-tertiary); margin-top: 2px; overflow-wrap: anywhere; }
.lp-box { width: 7rem; }
.lp-table .lp-box { width: 100%; min-width: 6rem; }
.lp-table th { font-weight: 500; font-size: 0.8125rem; color: var(--lp-secondary); white-space: nowrap; }
.accordion { --bs-accordion-bg: var(--bs-body-bg); --bs-accordion-active-bg: rgba(var(--lp-mint-rgb), 0.08); --bs-accordion-active-color: var(--lp-ink); }

/*
  Plan and Today. A week's days as a list on a phone, as a 7-column
  calendar from the lg breakpoint; today outlined in mint, the days gone
  by dimmed. A pace band stays on one line; a reason in its place
  (lp-pace-reason) wraps.
*/
.lp-days { list-style: none; padding: 0; margin: 0; }
.lp-day { padding: 12px 0; border-top: 1px solid var(--lp-line); }
.lp-day:first-child { border-top: 0; }
.lp-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 4px; }
.lp-day-head a { color: var(--lp-ink); text-decoration: none; }
.lp-day-head a:hover { color: var(--lp-mint); }
.lp-today { background: rgba(var(--lp-mint-rgb), 0.08); box-shadow: inset 3px 0 0 var(--lp-mint); padding-left: 10px; padding-right: 10px; }
.lp-past { opacity: 0.7; }
.lp-session + .lp-session { margin-top: 8px; }
.lp-session-title { color: var(--lp-ink); font-weight: 600; }
.lp-session-amount { font-size: 0.8125rem; color: var(--lp-secondary); }
.lp-steps { font-size: 0.875rem; }
.lp-step > .lp-pace-reason { white-space: normal; text-align: right; max-width: 55%; }
.lp-step > .lp-num { white-space: nowrap; }
.lp-set { padding-left: 12px; border-left: 2px solid var(--lp-line); }
.lp-relief { color: var(--lp-secondary); }
.lp-note { font-size: 0.8125rem; color: var(--lp-tertiary); }
.lp-exercises { font-size: 0.8125rem; color: var(--lp-secondary); }
.lp-purpose { color: var(--lp-secondary); margin: 8px 0; font-size: 0.875rem; }
.lp-doses { padding-left: 1.25rem; margin: 8px 0 0; font-size: 0.875rem; }
.lp-rest, .lp-done, .lp-change { font-size: 0.8125rem; margin: 4px 0 0; }
.lp-rest { color: var(--lp-tertiary); }
.lp-done { color: var(--lp-mint); }
.lp-change { color: var(--bs-warning); }
.lp-week-current { border-color: rgba(var(--lp-mint-rgb), 0.35); }

@media (min-width: 992px) {
  .lp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .lp-day, .lp-day:first-child { border: 1px solid var(--lp-line); border-radius: 12px; padding: 8px; font-size: 0.8125rem; }
  .lp-today { box-shadow: none; border-color: var(--lp-mint); }
  .lp-days .lp-steps { font-size: 0.75rem; }
  .lp-days .lp-step { flex-direction: column; gap: 0; padding: 4px 0; }
  .lp-days .lp-step > .lp-pace { text-align: left; max-width: none; }
  .lp-days .lp-session-amount, .lp-days .lp-exercises, .lp-days .lp-note { font-size: 0.75rem; }
}

/*
  Runs. A week's runs as rows, each a link to its detail: the title and
  when on one line, distance, time, pace and heart rate below. A run's
  summary as a row of figures.
*/
.lp-runs { list-style: none; padding: 0; margin: 0; }
.lp-run { padding: 10px 0; border-top: 1px solid var(--lp-line); }
.lp-run:first-child { border-top: 0; }
.lp-run-link { display: block; color: inherit; text-decoration: none; }
.lp-run-link:hover .lp-session-title { color: var(--lp-mint); }
.lp-run-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.lp-run-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--lp-body); }
.lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 12px; }
.lp-stats dt { font-weight: 500; font-size: 0.8125rem; color: var(--lp-secondary); }
.lp-stats dd { margin: 0; font-size: 1.25rem; color: var(--lp-ink); }

/*
  The charts' colours on the dark theme, one rule per class the charts
  draw (internal/admin/viz; the backoffice's light colours are its own).
*/
.lp-chart svg.viz { background: var(--lp-surface-2); border-radius: 12px; }
.lp-chart svg.viz text { font: 11px ui-rounded, system-ui, -apple-system, sans-serif; fill: var(--lp-secondary); }
.lp-chart svg.viz .note { text-anchor: middle; fill: var(--lp-tertiary); }
.lp-chart svg.viz .week .band { fill: rgba(255, 255, 255, 0.03); stroke: none; }
.lp-chart svg.viz .week.alt .band { fill: rgba(255, 255, 255, 0.07); }
.lp-chart svg.viz .week-label { font-weight: 600; fill: var(--lp-body); }
.lp-chart svg.viz .day .tick { stroke: rgba(255, 255, 255, 0.15); }
.lp-chart svg.viz .day.monday .tick { stroke: rgba(255, 255, 255, 0.35); }
.lp-chart svg.viz .day-label { text-anchor: middle; font-size: 10px; }
.lp-chart svg.viz .monday .day-label { font-weight: 600; fill: var(--lp-body); }
.lp-chart svg.viz .week-rules .week-rule { stroke: var(--lp-line); }
.lp-chart svg.viz .today-badge { fill: var(--lp-mint); stroke: none; }
.lp-chart svg.viz .today .day-label { font-weight: 700; fill: var(--lp-bg); }
.lp-chart svg.viz .today-column { fill: none; stroke: var(--lp-mint); stroke-width: 1.5; }
.lp-chart svg.viz .scale .level { stroke: var(--lp-line); }
.lp-chart svg.viz .scale-label { text-anchor: end; font-size: 10px; }
.lp-chart svg.viz .bar .part { stroke: var(--lp-surface-2); stroke-width: 1; }
.lp-chart svg.viz .part-easy { fill: #4C9F86; }
.lp-chart svg.viz .part-hard { fill: #F2A65A; }
.lp-chart svg.viz .part-other { fill: #4C9F86; }
.lp-chart svg.viz .series .line { fill: none; stroke: var(--lp-mint); stroke-width: 2; }
.lp-chart svg.viz .series .point { fill: var(--lp-mint); }
.lp-chart svg.viz .series.current .point { stroke: var(--lp-surface-2); stroke-width: 1; }
.lp-chart svg.viz.load .series .line { stroke: var(--lp-ink); stroke-dasharray: 4 3; }
.lp-chart svg.viz.load .series .point { fill: var(--lp-ink); }
.lp-chart svg.viz .series.older { opacity: 0.3; }
.lp-chart svg.viz .band .band-area { fill: rgba(var(--lp-mint-rgb), 0.12); stroke: rgba(var(--lp-mint-rgb), 0.45); }
.lp-chart svg.viz .band-label { font-size: 10px; fill: var(--lp-mint); }
.lp-chart svg.viz .lap-bars .lap { stroke: none; }
.lp-chart svg.viz .lap-work { fill: #F2A65A; }
.lp-chart svg.viz .lap-other { fill: #7FB2FF; }
.lp-chart svg.viz .hr .hr-line { fill: none; stroke: #FF6B6B; stroke-width: 1.5; }
.lp-chart svg.viz .hr-point { fill: #FF6B6B; }
.lp-chart svg.viz .km .km-label { text-anchor: middle; font-size: 10px; }