/* Weekly Planner Styles - Mobile First Approach */

/* Main Container */
.weekly-planner-container {
  width: 100%;
}

/* Header Bar */
.weekly-planner-header {
  background-color: var(--dark-gray);
  color: white;
  padding: 1rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.header-navigation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

.week-nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.week-nav .btn {
  padding: 0.5rem 1rem;
  font-weight: 600;
  border-radius: 0.25rem;
  transition: all 0.15s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.week-nav .btn-ghost {
  background-color: var(--medium-gray-dark);
  color: white;
}

.week-nav .btn-ghost:hover {
  background-color: var(--primary-color);
}

.week-nav .btn-primary {
  background-color: var(--primary-color);
  color: white;
}

.week-display {
  text-align: center;
}

.week-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--light-gray);
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Desktop: Single row header */
@media (min-width: 768px) {
  .header-navigation {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .week-display {
    flex: 1;
    text-align: left;
    margin-left: 1rem;
  }

  .header-actions {
    justify-content: flex-end;
  }
}

/* Gap Summary Bar */
/* Native <details> element. Collapsed by default — only the <summary>
   (gap-summary-header) is visible. Expanding shows the groups below.
   Rendered as a subtle inset panel against the dark planner background
   so it reads as secondary information, not a primary content block. */
.gap-summary-bar {
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  color: var(--medium-gray);
}

.gap-summary-bar[open] {
  padding-bottom: 0.75rem;
  background-color: rgba(0, 0, 0, 0.35);
}

details.gap-summary-bar[open] .gap-summary-groups {
  margin-top: 0.5rem;
}

/* Hide the default disclosure triangle; our own hint/rotation replaces it. */
.gap-summary-header::-webkit-details-marker {
  display: none;
}

.gap-summary-header::marker {
  content: "";
}

/* Override the global `summary { ... }` rule in utilities.css that otherwise
   paints every <summary> element with a light background, padding, and
   rounded corners. For this component we want the summary to blend into
   the details container so it reads as a single recessed panel. */
.gap-summary-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

.gap-summary-header:hover {
  background-color: transparent;
  color: inherit;
}

.gap-summary-chevron {
  color: var(--medium-gray);
  font-size: 0.75rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.15s ease;
}

.gap-summary-bar[open] .gap-summary-chevron {
  transform: rotate(90deg);
}

.gap-summary-title {
  color: var(--medium-gray-dark);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gap-summary-subtitle {
  color: var(--medium-gray-dark);
  font-size: 0.625rem;
}

.gap-summary-count {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.625rem;
  line-height: 1.4;
}

.gap-count-critical {
  background-color: var(--load-max);
  color: white;
}

.gap-count-moderate {
  background-color: var(--load-heavy);
  color: white;
}

.gap-count-minor {
  background-color: var(--medium-gray-dark);
  color: var(--light-gray);
}

.gap-summary-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  flex: 1;
  min-width: 0;
}

.gap-group {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.gap-group-label {
  color: var(--medium-gray);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.gap-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.gap-item {
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.1875rem;
  white-space: nowrap;
  cursor: default;
}

.gap-item-critical {
  background-color: var(--load-max);
  color: white;
}

.gap-item-moderate {
  background-color: var(--load-heavy);
  color: white;
}

.gap-item-minor {
  background-color: var(--medium-gray-dark);
  color: var(--light-gray);
}

@media (max-width: 767px) {
  .gap-summary-groups {
    gap: 0.375rem 0.75rem;
  }
}

/* Content Layout - Two Columns */
.weekly-planner-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  .weekly-planner-content {
    flex-direction: row;
    gap: 1rem;
  }
}

/* Column Headers */
.column-header {
  background-color: var(--medium-gray);
  padding: 0.75rem 1rem;
  border-radius: 0.25rem 0.25rem 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.column-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
}

.week-range {
  font-size: 0.875rem;
  color: var(--light-gray);
}

.column-body {
  background-color: var(--lightest-gray);
  padding: 0.5rem 0;
  border-radius: 0 0 0.25rem 0.25rem;
}

/* Actuals Column (Last Week) */
.actuals-column {
  flex: 1;
  min-width: 0;
}

@media (min-width: 1024px) {
  .actuals-column {
    flex: 0 0 25%;
  }
}

.actual-day {
  background-color: white;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--medium-gray-light);
  opacity: 0.85;
}

.actual-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--medium-gray-light);
}

.actual-day .day-name {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--dark-gray);
}

.actual-day .day-date {
  font-size: 0.7rem;
  color: var(--medium-gray-dark);
}

.actual-day-body {
  padding-top: 0.25rem;
}

.workout-summary {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* --- Day card occurrences --- */
.day-card-occurrences {
  border-top: 1px dashed var(--border, #d1d5db);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.day-card-occurrence {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--dark-gray, #374151);
}

.occurrence-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.occurrence-name {
  font-weight: 600;
  color: var(--dark-gray, #374151);
}

.occurrence-name-link {
  text-decoration: none;
  color: inherit;
}

.occurrence-name-link:hover {
  text-decoration: underline;
  cursor: pointer;
}

.occurrence-duration {
  font-size: 0.75rem;
  white-space: nowrap;
}

.occurrence-stimulus {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.occurrence-stimulus-label {
  font-size: 0.75rem;
}

.day-card-occurrence .energy-badge {
  font-size: 0.55rem;
  padding: 0.05rem 0.3rem;
}

.occurrence-elements {
  font-size: 0.65rem;
  width: 100%;
}

.deviation-warning {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  margin-top: 0.25rem;
  background: oklch(95% 0.05 55);
  border-radius: 4px;
  font-size: 0.75rem;
}

.deviation-icon {
  font-size: 0.875rem;
}

.actual-stimulus {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.actual-stimulus .energy-badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
}

.actual-elements {
  font-size: 0.68rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workout-name {
  font-weight: 600;
  color: var(--dark-gray);
  font-size: 0.9375rem;
}

.no-workout {
  font-size: 0.875rem;
  font-style: italic;
}

/* Plan Column (This Week) */
.plan-column {
  flex: 1;
  min-width: 0;
}

@media (min-width: 1024px) {
  .plan-column {
    flex: 1;
  }
}

/* Day Cards */
/* Day card uses a three-tone vertical hierarchy: darkest at the header
   (day info + template picker + Builder), medium in the top row (session
   details / occurrences / stimulus chips), lightest in the bottom row
   (drop zone + muscle impact). overflow: hidden clips the tinted
   backgrounds to the rounded corners so the cascade reads cleanly. */
.day-card {
  background-color: white;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
  border: 2px solid var(--medium-gray-light);
  transition: all 0.2s ease;
  overflow: hidden;
}

.day-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.day-card-today {
  border-color: var(--primary-color);
  border-width: 3px;
  box-shadow: 0 0 0 1px var(--primary-color);
}

.day-card-past {
  opacity: 0.7;
}

.day-card-pinned {
  border-left: 4px solid var(--success-color);
}

.day-card-pinned .day-card-header {
  border-bottom-color: color-mix(in oklch, var(--success-color) 30%, transparent);
}

.day-card-suggested {
  border-left: 4px solid var(--primary-color-light);
  opacity: 0.8;
}

.day-card-suggested .day-card-header {
  border-bottom-color: color-mix(in oklch, var(--primary-color-light) 30%, transparent);
}

.day-status-badge {
  font-size: 0.625rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}

.day-status-pinned {
  background-color: var(--success-color);
  color: white;
}

.day-status-suggested {
  background-color: var(--primary-color-light);
  color: var(--dark-gray);
}

/* Header layout: left = day info, middle = template selector, right = actions.
   Middle region flexes to consume remaining space and centers its contents.
   Darkest of the three day-card tones so it clearly frames the metadata. */
.day-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: oklch(88% 0.004 255);
}

.day-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.day-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark-gray);
  white-space: nowrap;
}

/* Layout wrapper for the two tinted rows — no padding or margin of its own,
   each row handles its own padding against the card edges so the backgrounds
   extend cleanly to the left and right. */
.day-card-body {
  display: flex;
  flex-direction: column;
}

/* Rest day badge lives inside .day-card-body without a tinted wrapper row.
   Add padding so it doesn't hug the card edges now that .day-card is
   unpadded. */
.rest-day-badge {
  padding: 0.75rem 1rem;
}

.session-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}

.session-name {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--dark-gray);
}

.session-duration {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.block-breakdown {
  font-size: 0.8125rem;
  color: var(--medium-gray-dark);
  margin-bottom: 0.5rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.block-item {
  white-space: normal;
}

/* Flex row summary: name on the left, duration pinned right via
   margin-left: auto on the duration element. Summary spans the full
   block-breakdown width so long stimulus names and durations don't
   cram together. */
.block-item-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.block-item-summary::-webkit-details-marker {
  display: none;
}

.block-item-summary::marker {
  display: none;
}

.block-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.block-item-duration {
  flex-shrink: 0;
}

.block-item-explanation {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
  margin: 0.25rem 0 0 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--border, #e5e7eb);
}

.no-plan {
  font-size: 0.875rem;
  color: var(--medium-gray-dark);
  font-style: italic;
}

.day-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* --- Day card internal grid (redesign 2026-04-08) --- */

/* Top row of the day card body: three columns — session details, occurrences,
   stimulus chips. Middle tone of the three-tier hierarchy so the session
   context visually groups with the metadata header but reads as a step
   lighter and less dense. */
.day-card-top-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(180px, 1fr) minmax(200px, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: oklch(94% 0.003 255);
}

.day-card-top-row > * {
  min-width: 0;
}

.day-card-session-col,
.day-card-occurrences-col,
.day-card-muscle-col {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Action area pinned to the bottom of a day-card column (e.g. Use template
   in the Planned Work column, Build Session in the Scheduled Work column).
   margin-top: auto absorbs the remaining flex space so the action sits
   flush at the bottom of the column regardless of content length above. */
.day-card-col-action {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Bottom row of the day card body: three columns — planned-elements drop
   target with the Suggest chip beneath it, scheduled-elements read-only
   list, and the muscle impact chart. Lightest tone (white, inherited from
   the card) so the primary action area reads as the focal point. */
.day-card-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.day-card-bottom-row > * {
  min-width: 0;
}

.day-card-drop-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.day-card-scheduled-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.day-card-stimulus-col {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.day-card-planned-elements-pane {
  min-width: 0;
  min-height: 3rem;
  padding: 0.5rem;
  border: 1px dashed oklch(80% 0.005 255);
  border-radius: 0.375rem;
  background: transparent;
}

/* Read-only list of elements from workout_occurrences scheduled on this day.
   Same geometry as the planned-elements pane so the two boxes read as a
   matched pair, but with a solid border and no drop-target data-action to
   signal that it's informational, not editable. */
.day-card-scheduled-elements-pane {
  min-width: 0;
  min-height: 3rem;
  padding: 0.5rem;
  border: 1px solid oklch(80% 0.005 255);
  border-radius: 0.375rem;
  background: transparent;
}

/* Suggest chip lives under the drop zone, flush-left and self-sized so the
   drop target can remain wide. */
.day-card-drop-col .suggest-chip {
  align-self: flex-start;
}

.day-card-muscle-impact .muscle-impact-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--medium-gray-dark);
  margin: 0 0 0.25rem 0;
}

.day-card-muscle-impact .muscle-bar-row {
  /* tighter columns in the narrower day-card cell */
  grid-template-columns: 90px 1fr 60px;
}

/* Day-info expands to take all remaining flex space in the header row so
   any trailing element (the Pinned / Suggested status pill) is pushed
   flush to the right edge. Single-class rule — no compound selectors. */
.day-info {
  flex: 1;
}

.day-status-badge {
  align-self: flex-start;
}

/* Mobile: stack the three columns in each content row below 900px. */
@media (max-width: 899px) {
  .day-card-top-row,
  .day-card-bottom-row {
    grid-template-columns: 1fr;
  }
}

/* Day Edit Modal */
.current-selection-section {
  display: flex;
  flex-direction: column;
}

.alternative-option {
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.alternative-option.border-affirm {
  border-color: var(--success-color) !important;
  border-width: 2px;
}

.alternative-option.bg-affirm-light {
  background-color: color-mix(in oklch, var(--success-color) 10%, white) !important;
}

/* Template Selector */
.template-select {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--medium-gray);
  background-color: white;
  color: var(--dark-gray);
  font-size: 0.8125rem;
  cursor: pointer;
}

.template-select:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}

/* Energy Badges */
.energy-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.energy-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
  color: white;
}

.energy-badge--phosphagen { background-color: var(--energy-phosphagen); }
.energy-badge--glycolytic { background-color: var(--energy-glycolytic); }
.energy-badge--oxidative  { background-color: var(--energy-oxidative); }
.energy-badge--skill      { background-color: var(--energy-skill); }

/* Footer with Energy Budget */
.weekly-planner-footer {
  background-color: var(--dark-gray);
  padding: 1.5rem;
  border-radius: 0.25rem;
  margin-top: 2rem;
}

.energy-budget-container {
  max-width: 800px;
  margin: 0 auto;
}

.budget-header {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.budget-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.budget-total {
  color: var(--light-gray);
  font-size: 0.9375rem;
  font-weight: 500;
}

.budget-minutes {
  font-size: 0.8125rem;
  font-weight: 400;
}

.budget-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.budget-bar-container {
  background-color: var(--medium-gray-dark);
  padding: 0.75rem;
  border-radius: 0.25rem;
}

.budget-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.budget-label {
  font-weight: 600;
  color: white;
  font-size: 0.875rem;
}

.budget-values {
  font-size: 0.875rem;
}

.budget-values .text-muted {
  color: var(--light-gray);
}

.budget-bar-track {
  background-color: var(--medium-gray);
  height: 1.5rem;
  border-radius: 0.25rem;
  overflow: hidden;
  position: relative;
}

.budget-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.5rem;
  color: white;
  font-weight: 600;
  font-size: 0.75rem;
}

/* Recovery Group Indicators */
.recovery-indicators {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.recovery-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--lightest-gray);
  border: 1px solid var(--medium-gray-light);
}

.recovery-pill.ready {
  background-color: oklch(90% 0.1 145);
  border-color: oklch(70% 0.15 145);
  color: oklch(30% 0.1 145);
}

.recovery-pill.fatigued {
  background-color: oklch(90% 0.1 25);
  border-color: oklch(70% 0.15 25);
  color: oklch(30% 0.1 25);
}

/* Utility Classes */
.text-muted {
  color: var(--medium-gray-dark);
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

/* Badge General Styles */
.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Training Days Configuration */
.training-days-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background-color: var(--lightest-gray);
  border-radius: 0.25rem;
}

.training-days-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.training-day-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: normal;
}

.training-day-checkbox input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.training-day-checkbox span {
  font-size: 1rem;
}

.training-days-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.program-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.program-selector label {
  font-weight: 600;
  color: white;
  font-size: 0.875rem;
  margin: 0;
}

.program-select {
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid var(--medium-gray-light);
  background-color: white;
  color: var(--dark-gray);
  font-size: 0.875rem;
  cursor: pointer;
}

.program-select:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .training-days-checkboxes {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .training-day-checkbox {
    flex: 0 0 auto;
  }
}

/* --- Element Drawer (bottom sheet) --- */
.element-drawer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: height 0.25s ease;

  /* Default snap: peek (header only) */
  height: 48px;
}

.element-drawer[data-snap="half"] {
  height: 50vh;
}

.element-drawer[data-snap="full"] {
  height: 90vh;
}

/* Desktop default open: lower third */
@media (min-width: 768px) {
  .element-drawer[data-snap="half"] {
    height: 33vh;
  }
}

.drawer-peek-bar {
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface-raised, #f9fafb);
}

.drawer-handle-grip {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--medium-gray, #d1d5db);
  margin: 3px auto 0;
}

/* Use baseline alignment so text in h3 and input share the same
   baseline. The close button is sized to match the input's visual
   height so it centers naturally on the same row. */
.drawer-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.3rem 1rem 0.45rem;
  min-height: 0;
}

.drawer-header h3 {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--dark-gray, #1f2937);
}

.drawer-total-count {
  font-weight: 400;
}

.drawer-search {
  flex: 1;
  max-width: 320px;
}

.drawer-search .form-input {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  line-height: 1.4;
}

/* Close button — purpose-built to avoid basecoat .btn sizing conflicts.
   Baseline-aligned with the header's text so the ⌄ glyph sits on the
   same baseline as "Elements" and the search input text. */
.drawer-close-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.1rem 0.35rem;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--medium-gray-dark, #5a5c5d);
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background 0.15s, color 0.15s;
}

.drawer-close-btn:hover {
  background: var(--light-gray);
  color: var(--dark-gray);
}

/* Panes — single column on mobile, two-pane on desktop */
.drawer-panes {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  min-height: 0;
}

@media (min-width: 768px) {
  .drawer-panes {
    grid-template-columns: minmax(280px, 33%) 1fr;
  }
}

.drawer-pane {
  overflow-y: auto;
  padding: 0.75rem 1rem;
  min-height: 0;
}

.drawer-pane-left {
  border-right: 1px solid var(--border, #e5e7eb);
}

/* Stale buckets — column layout on desktop */
.drawer-stale-header h4 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-gray, #1f2937);
}

.drawer-stale-buckets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  height: calc(100% - 2rem);
}

@media (min-width: 768px) {
  .drawer-stale-buckets {
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    grid-template-columns: none;
    gap: 0.5rem;
  }

  .drawer-bucket-empty {
    grid-column: span 1;
    max-width: 60px;
  }
}

/* Mobile stale buckets — stacked accordion-like layout */
@media (max-width: 767px) {
  .drawer-stale-buckets {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: auto;
  }

  .drawer-bucket {
    border-radius: 0.25rem;
  }

  .drawer-bucket-elements {
    flex-direction: column;
    overflow-y: visible;
  }

  .drawer-bucket-empty {
    display: none;  /* hide empty buckets entirely on mobile to save space */
  }
}

.drawer-bucket {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 0.375rem;
  padding: 0.5rem;
  background: var(--surface, #fff);
}

.drawer-bucket-empty {
  opacity: 0.5;
}

.drawer-bucket-header {
  display: flex;
  align-items: baseline;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--dark-gray, #1f2937);
}

.drawer-bucket-elements {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
}

/* Drawer section (left pane) */
.drawer-section {
  margin-bottom: 0.75rem;
}

.element-drawer .section-title {
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.5rem 0;
  color: var(--dark-gray, #1f2937);
  background: none;
}

.element-drawer .section-count {
  font-size: 0.8rem;
}

.section-elements {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.5rem;
}

.drawer-element-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--surface-raised, #f9fafb);
  cursor: grab;
  font-size: 0.8rem;
  transition: background 0.15s;
}

.drawer-element-chip:hover {
  background: var(--surface-hover, #f3f4f6);
}

.drawer-element-chip.dragging {
  opacity: 0.5;
}

.drawer-element-chip--used-this-week {
  border: 2px solid var(--dark-gray);
}

/* Reset the global .element-name background inside drawer chips so the
   tile color shows through cleanly. Dark text is readable on every
   usage_type tile background. */
.drawer-element-chip .element-name {
  background: transparent;
  margin: 0;
  color: var(--dark-gray);
}

/* Element chip backgrounds by usage_type — tile color identifies type at a glance.
   Color tokens live in base.css under :root. */
.drawer-element-chip-workout-partner {
  background: var(--chip-partner-bg);
}
.drawer-element-chip-workout-partner:hover {
  background: var(--chip-partner-bg-hover);
}

.drawer-element-chip-activation {
  background: var(--chip-activation-bg);
}
.drawer-element-chip-activation:hover {
  background: var(--chip-activation-bg-hover);
}

.drawer-element-chip-stretching {
  background: var(--chip-stretching-bg);
}
.drawer-element-chip-stretching:hover {
  background: var(--chip-stretching-bg-hover);
}

/* Recovery baseline tint on element chips. Replaces the former recovery-dot
   indicator — the chip's own background now carries the recovery status,
   which saves horizontal space and is readable at a glance. Softened with
   white so the default dark element-name text stays legible.
   Fatigue-load classes (see below) override these when a candidate would
   land on muscles that are heavily loaded already. */
.drawer-element-chip--recovery-ready {
  background-color: color-mix(in oklch, var(--load-rest) 25%, white);
}

.drawer-element-chip--recovery-partial {
  background-color: color-mix(in oklch, var(--load-light) 55%, white);
}

.drawer-element-chip--recovery-fatigued {
  background-color: color-mix(in oklch, var(--load-heavy) 40%, white);
}

/* Recency badges */
.recency-badge {
  font-size: 0.7rem;
  color: var(--text-muted, #6b7280);
  margin-left: auto;
}

.recency-stale {
  color: oklch(55% 0.22 25);
  font-weight: 600;
}

.recency-in-use {
  color: oklch(55% 0.15 85);
  font-weight: 600;
}

.frequency-badge {
  font-size: 0.65rem;
}

/* --- Element Chips on Day Cards --- */
.planned-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.375rem;
}

.planned-elements-label {
  display: block;
  width: 100%;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--medium-gray);
  margin-bottom: 0.125rem;
}

.element-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  line-height: 1.4;
}

.element-chip-manual {
  background: oklch(90% 0.03 250);
  color: oklch(30% 0.05 250);
}

.element-chip-cycle {
  background: color-mix(in oklch, var(--accent-cycle) 18%, white);
  color: var(--accent-cycle);
}

.element-chip-occurrence {
  background: oklch(93% 0.005 250);
  color: oklch(45% 0.02 250);
  cursor: default;
}

.element-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
}

.element-chip-remove:hover {
  opacity: 1;
}

.chip-badge {
  font-size: 0.6rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
}

.chip-badge-cycle {
  background: color-mix(in oklch, var(--accent-cycle) 18%, white);
  color: var(--accent-cycle);
}

.chip-badge-workout-partner {
  background: oklch(82% 0.1 280);
  color: oklch(30% 0.12 280);
}

.chip-badge-activation {
  background: var(--chip-activation-bg);
  color: oklch(35% 0.12 220);
}

.chip-badge-stretching {
  background: oklch(85% 0.08 200);
  color: oklch(32% 0.1 200);
}

/* --- Stimulus Type Selector --- */
.stimulus-type-selector {
  padding: 0.5rem 0;
}

.stimulus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.stimulus-chip {
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  border: 1px solid var(--border, #d1d5db);
  background: var(--surface, #fff);
  color: var(--dark-gray, #374151);
  cursor: pointer;
  transition: all 0.15s;
}

.stimulus-chip:hover {
  border-color: var(--border-emphasis, #9ca3af);
}

.stimulus-chip-phosphagen-active {
  background: var(--load-max);
  color: white;
  border-color: transparent;
}

.stimulus-chip-glycolytic-active {
  background: var(--load-heavy);
  color: white;
  border-color: transparent;
}

.stimulus-chip-oxidative-active {
  background: var(--load-moderate);
  color: oklch(20% 0.05 70);
  border-color: transparent;
}

.stimulus-chip-skill-active {
  background: var(--accent-skill);
  color: white;
  border-color: transparent;
}

.block-duration-editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--medium-gray, #9ca3af);
  padding: 0 0.1rem;
  flex-shrink: 0;
}

.block-duration-editable:hover {
  border-bottom-color: var(--primary-color, #3b82f6);
  color: var(--primary-color, #3b82f6);
}

.block-duration-input {
  width: 3rem;
  font-size: inherit;
  padding: 0 0.2rem;
  border: 1px solid var(--primary-color, #3b82f6);
  border-radius: 0.25rem;
  text-align: center;
  outline: none;
}

.template-shortcut {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

/* Heads-up rendered when the user opens the "Use template..." dropdown.
   Reminds them that picking a template wipes any stimulus chips / block
   times they've already configured for this day. */
.template-shortcut-warning {
  margin: 0.375rem 0;
  font-size: 0.7rem;
  line-height: 1.35;
  padding: 0.375rem 0.5rem;
  background-color: oklch(95% 0.02 85);
  border-left: 2px solid oklch(70% 0.12 85);
  border-radius: 0.25rem;
}

/* --- Drop Target Highlight --- */
.day-card-drop-target {
  outline: 2px dashed var(--primary-color);
  outline-offset: -2px;
  background: color-mix(in oklch, var(--primary-color) 8%, white);
}

/* --- Search Results --- */
.drawer-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1rem;
}

.hidden {
  display: none;
}

/* --- Builder Plan Context Panel --- */
.plan-context-panel {
  position: relative;
  background: var(--surface-raised, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--dark-gray, #374151);
}

.panel-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

/* --- Occurrence rows --- */
.plan-occ-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: flex-start;
}

.plan-occ-row:last-child {
  border-bottom: none;
}

.plan-occ-name {
  font-weight: 600;
  font-size: 0.85rem;
}

.plan-occ-stimulus {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
}

.plan-occ-stimulus-matched {
  color: var(--accent-cycle);
}

.plan-occ-stimulus-unplanned {
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

.plan-occ-stimulus-missing {
  color: oklch(55% 0.15 55);
}

.plan-occ-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.plan-occ-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 0 0 180px;
  width: 180px;
  overflow: hidden;
}

.plan-occ-right {
  flex: 1 1 auto;
  border-left: 2px solid var(--border, #e5e7eb);
  padding-left: 0.75rem;
}

.plan-occ-explanation {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
  margin: 0;
}

.plan-block-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.plan-element-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.7rem;
}

.plan-element-planned {
  background: color-mix(in oklch, var(--accent-cycle) 18%, white);
  color: var(--accent-cycle);
}

.plan-element-extra {
  background: oklch(92% 0.02 200);
  color: oklch(50% 0.02 200);
}

.plan-element-pending {
  background: oklch(88% 0.06 250);
  color: oklch(30% 0.08 250);
  font-weight: 500;
}

/* --- Unfulfilled section --- */
.plan-unfulfilled {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border, #d1d5db);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.plan-unfulfilled-stimulus,
.plan-unfulfilled-elements {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.plan-unfulfilled-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: oklch(55% 0.12 55);
  white-space: nowrap;
}

/* --- Day card suggestions panel --- */
/* Wrapper that holds the day card and the persistent suggestions panel.
   Flex column so the suggestions sit directly under the card with no gap.
   Reset the day card's own bottom margin here — the wrapper owns day spacing. */
.plan-day {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.plan-day > .day-card {
  margin-bottom: 0;
}

/* Suggestions panel sits flush beneath the day card as a sibling so it persists
   through day-card re-renders (drop → Turbo Stream replace of the card only).
   Visually tied to the card above: no top margin, no top border, only bottom
   corners rounded. Left border stripe marks it as day-specific. */
.day-card-suggestions {
  margin: 0 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface-raised, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-top: none;
  border-left: 3px solid var(--primary, #3b82f6);
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.day-card-suggestions--collapsed {
  display: none;
}

.suggestion-tier {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.suggestion-tier-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, oklch(55% 0 0));
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-subtle, #eef0f3);
}

.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Suggestion chip variant of the shared drawer chip. Only tweaks the size
   and adds a subtle border — no background override, so the recovery and
   fatigue tints set on the chip root flow through unmolested. */
.suggestion-chip {
  border: 1px solid var(--border, #e5e7eb);
  font-size: 0.75rem;
  padding: 0.3125rem 0.5rem;
}

.suggestion-empty {
  font-size: 0.75rem;
  margin: 0;
  color: var(--text-muted, oklch(55% 0 0));
}

/* Two-column layout inside the suggestions panel: main tiers on the left,
   narrow "Already in this week" sidebar on the right. Stacks on mobile. */
.day-card-suggestions-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .day-card-suggestions-layout {
    grid-template-columns: 1fr minmax(200px, 28%);
  }
}

.day-card-suggestions-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.day-card-suggestions-sidebar {
  padding: 0.5rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.04);
  border-left: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.25rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.already-in-week-header h4 {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, oklch(55% 0 0));
}

.already-in-week-hint {
  margin: 0 0 0.5rem;
  font-size: 0.65rem;
  line-height: 1.35;
}

.already-in-week-empty {
  font-size: 0.7rem;
  margin: 0;
}

/* Sidebar list flexes to fill the remaining space in its grid cell, which
   is sized by the taller main-tiers column. When many elements are scheduled
   across the week the list scrolls instead of pushing the panel taller. */
.already-in-week-elements {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* Compact sidebar chip variant. The shared ElementChip component renders
   here too; this just shrinks it to fit the narrow sidebar column. */
.suggestion-chip-in-use {
  font-size: 0.7rem;
  padding: 0.1875rem 0.375rem;
}

/* Loading state shown while the suggestion panel is fetching from the server. */
.suggestion-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.8rem;
  color: var(--text-muted, oklch(55% 0 0));
}

.suggestion-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border, #e5e7eb);
  border-top-color: var(--primary, #3b82f6);
  border-radius: 50%;
  animation: suggestion-spin 0.9s linear infinite;
}

@keyframes suggestion-spin {
  to {
    transform: rotate(360deg);
  }
}

.suggestion-loading-text {
  font-variant-numeric: tabular-nums;
}

.suggest-chip {
  cursor: pointer;
}

/* Cumulative fatigue tint on an element chip. Applied to the chip root when
   the candidate would land on muscles already heavily loaded by prior-day
   work. Uses the project's rank color tokens (base.css --badge-*) softened
   with white via color-mix so the default dark element-name text stays
   clearly readable on top. Severity is still unmistakable because the hue
   stays dominant even after the mix. */
.drawer-element-chip--load-moderate {
  background-color: color-mix(in oklch, var(--load-light) 75%, white);
}

.drawer-element-chip--load-high {
  background-color: color-mix(in oklch, var(--load-moderate) 65%, white);
}

.drawer-element-chip--load-very-high {
  background-color: color-mix(in oklch, var(--load-heavy) 60%, white);
}