/*
 * Health dashboard.
 *
 * Built on the shared tokens in modern-theme.css rather than fixed colours, so the
 * dashboard follows the light/dark switch without a second set of overrides.
 */

.health-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-xl);
  color: white;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.health-hero h1 {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0;
}

.health-hero p {
  color: rgb(255 255 255 / 0.8);
  font-size: 0.875rem;
  margin: 0.35rem 0 0;
  max-width: 46ch;
}

/* Translucent buttons so the hero keeps one accent colour instead of a row of competing ones. */
.health-hero .btn {
  background: rgb(255 255 255 / 0.15);
  border: 1px solid rgb(255 255 255 / 0.25);
  color: white;
  font-weight: 500;
}

.health-hero .btn:hover,
.health-hero .btn:focus {
  background: rgb(255 255 255 / 0.28);
  border-color: rgb(255 255 255 / 0.4);
  color: white;
}

.health-hero .btn-light-solid {
  background: white;
  border-color: white;
  color: var(--primary-dark);
}

.health-hero .btn-light-solid:hover,
.health-hero .btn-light-solid:focus {
  background: rgb(255 255 255 / 0.9);
  border-color: rgb(255 255 255 / 0.9);
  color: var(--primary-dark);
}

.health-section-title {
  align-items: center;
  display: flex;
  font-size: 0.8125rem;
  font-weight: 600;
  gap: 0.5rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.health-card {
  background: var(--theme-card-bg);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.health-card-header {
  align-items: center;
  border-bottom: 1px solid var(--theme-border-light);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.875rem 1.125rem;
}

.health-card-title {
  align-items: center;
  display: flex;
  font-weight: 600;
  gap: 0.5rem;
  margin: 0;
}

/* Day navigation sits beside the streak badge in the Today header. */
.health-day-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.health-day-nav .btn {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.15rem;
  line-height: 1.2;
}

.health-card-body {
  padding: 1.125rem;
}

/* ---- Goal rings ---- */

.health-rings {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 992px) {
  .health-rings {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.health-ring {
  align-items: center;
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border-light);
  border-radius: var(--radius-lg);
  display: flex;
  gap: 0.875rem;
  padding: 1rem;
}

/* Side by side leaves too little room for the caption on a narrow phone. */
@media (max-width: 575.98px) {
  .health-ring {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 0.5rem;
    text-align: center;
  }

  .health-ring svg {
    height: 56px;
    width: 56px;
  }
}

.health-ring svg {
  flex: 0 0 auto;
  height: 64px;
  width: 64px;
  /* 12 o'clock start, so progress reads like a clock face rather than from the right. */
  transform: rotate(-90deg);
}

.health-ring-track {
  fill: none;
  stroke: var(--theme-border);
  stroke-width: 7;
}

.health-ring-fill {
  fill: none;
  stroke-linecap: round;
  stroke-width: 7;
  transition: stroke-dashoffset 0.6s ease;
}

.health-ring-label {
  color: var(--theme-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.health-ring-value {
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.health-ring-compare {
  color: var(--theme-text-muted);
  font-size: 0.6875rem;
}

/* ---- Compact stats ---- */

.health-stats {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .health-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.health-stat {
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border-light);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
}

.health-stat-label {
  align-items: center;
  color: var(--theme-text-muted);
  display: flex;
  font-size: 0.75rem;
  gap: 0.35rem;
}

.health-stat-value {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.15rem;
}

.health-stat-unit {
  color: var(--theme-text-muted);
  font-size: 0.6875rem;
}

/* ---- Segmented range control ---- */

/* The caret sits on top of the label at some widths without a little extra room. */
.health-card-header .form-select {
  padding-right: 2.5rem;
}

.health-segmented {
  background: var(--theme-bg-tertiary);
  border-radius: var(--radius);
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.1875rem;
}

.health-segmented button {
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius) - 0.1875rem);
  color: var(--theme-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.3125rem 0.75rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.health-segmented button:hover {
  color: var(--theme-text);
}

.health-segmented button.active {
  background: var(--theme-card-bg);
  box-shadow: var(--shadow-sm);
  color: var(--theme-text);
}

/* ---- Workout list ---- */

.health-workout {
  border-bottom: 1px solid var(--theme-border-light);
  display: flex;
  gap: 0.875rem;
  padding: 0.875rem 1.125rem;
}

.health-workout:last-child {
  border-bottom: 0;
}

.health-workout:hover {
  background: var(--theme-table-hover);
}

.health-workout-icon {
  align-items: center;
  background: var(--theme-primary-subtle);
  border-radius: var(--radius);
  color: var(--primary);
  display: flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.health-workout-title {
  font-weight: 600;
}

.health-workout-meta {
  color: var(--theme-text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  gap: 0.75rem;
  margin-top: 0.2rem;
}

.health-workout-meta span {
  align-items: center;
  display: inline-flex;
  gap: 0.3rem;
  white-space: nowrap;
}

.health-empty {
  color: var(--theme-text-muted);
  padding: 2.5rem 1.125rem;
  text-align: center;
}

.health-empty i {
  color: var(--theme-border-medium);
  display: block;
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

/* Chart canvases need a bounded box or Chart.js grows them on every resize. */
.health-chart {
  height: 260px;
  position: relative;
}

/* Hourly/daily ranges can have 70+ buckets; rather than squashing every bar into the
   card's width, the chart gets a wider fixed canvas (sized in JS per bucket count) and
   this wrapper scrolls horizontally so each bar stays readable. */
.health-chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.health-chart-scroll .health-chart {
  min-width: 100%;
}