/* The dashboard: the progress bars, the Exercise Progression chart, and today's session panel
   beside them. The panel itself, the chart pane, the toggle group and the averages row are all
   shared components and are styled in components.css; what is here is this page's own layout
   and the progress bars, which nothing else uses. */

.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto 1fr;
  column-gap: 24px;
  width: 75%;
  margin: 0 auto;
}

.dashboard-layout > .section-label {
  grid-column: 1;
  grid-row: 1;
  font-variant: small-caps;
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.55;
  margin-bottom: 14px;
}

.progress-section {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.dashboard-layout #day-panel {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 320px;
}

/* ---- the progress bars ----
   A real <details>, so the overall bar and the three it holds open and close with no script.
   The overall bar sits in the summary row beside its label; expanding reveals the three
   category rows, one bar each. */

details.group {
  background: rgba(241, 231, 219, 0.04);
  border: 1px solid rgba(241, 231, 219, 0.12);
  border-radius: 4px;
  margin-bottom: 14px;
  overflow: hidden;
}

details.group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 26px;
  font-variant: small-caps;
  font-size: 19px;
  letter-spacing: 0.02em;
}
details.group > summary::-webkit-details-marker { display: none; }

details.group > summary .chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
details.group[open] > summary .chevron { transform: rotate(-135deg); }

.group-body { padding: 4px 26px 26px; }

.bar-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}
.bar-row:last-child { margin-bottom: 0; }

.bar-row .bar-label {
  font-variant: small-caps;
  font-size: 14px;
  opacity: 0.75;
  width: 190px;
  flex-shrink: 0;
}
.bar-row .bar-track {
  flex: 1;
  height: 12px;
  background: rgba(241, 231, 219, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.bar-row .bar-fill {
  height: 100%;
  background: var(--color-accent);
}
.bar-row .bar-stat {
  font-size: 13px;
  opacity: 0.7;
  width: 130px;
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}
.bar-row .bar-stat strong {
  opacity: 1;
  font-weight: 600;
}

/* The overall bar, inside the summary row rather than below it. */
details.group > summary .summary-bar-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}
details.group > summary .summary-bar-row .bar-label {
  font-variant: small-caps;
  font-size: 19px;
  letter-spacing: 0.02em;
  opacity: 1;
  width: auto;
  flex-shrink: 0;
}
details.group > summary .summary-bar-row .bar-track {
  flex: 1;
  max-width: 260px;
  height: 12px;
  background: rgba(241, 231, 219, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
details.group > summary .summary-bar-row .bar-fill {
  height: 100%;
  background: var(--color-accent);
}
details.group > summary .summary-bar-row .bar-stat {
  font-size: 15px;
  opacity: 0.85;
  flex-shrink: 0;
  white-space: nowrap;
  width: auto;
  text-align: left;
}
details.group > summary .summary-bar-row .bar-stat strong { font-weight: 700; }

@media (max-width: 1100px) {
  /* The chart and the day panel sit side by side down to 1100px; below that the panel drops
     beneath the chart, the same arrangement the schedule uses. This is also what stops the
     progress bars losing their tracks between 1085 and 1000. */
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-layout #day-panel { grid-column: 1; grid-row: 3; width: auto; margin-top: 24px; }
}

@media (max-width: 880px) {
  .dashboard-layout { width: 100%; }
}