/* Related Element Warnings - Matches stratified day section aesthetic */

.related-warnings-container {
  padding: 0.75rem;
  background-color: oklch(93% 0.005 25);
  border-left: 4px solid var(--badge-warning);
  border-radius: 0.25rem;
  margin: 0.75rem 0;
}

.related-warnings-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.related-warnings-help {
  font-size: 0.8125rem;
  color: var(--medium-gray-dark);
  margin-bottom: 0.75rem;
  font-style: italic;
}

.related-warnings-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.warning-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0.5rem;
  background-color: white;
  border-radius: 0.25rem;
  border-left: 3px solid var(--badge-warning);
}

.warning-badge {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

.warning-recency {
  font-size: 0.8125rem;
  color: var(--medium-gray-dark);
  font-weight: 500;
}

/* Active-recovery Suggestions - same callout family as related warnings,
   but a calmer blue/teal tone so it reads as restorative rather than a
   warning. Used in the builder live preview (.recovery-suggestions-container)
   and in the occurrence modal body (.recovery-suggestions). */

.recovery-suggestions-container,
.recovery-suggestions {
  padding: 0.75rem;
  background-color: var(--badge-info-bg);
  border-left: 4px solid var(--badge-secondary);
  border-radius: 0.25rem;
  margin: 0.75rem 0;
}

.recovery-suggestions-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.recovery-suggestions-help {
  font-size: 0.8125rem;
  color: var(--medium-gray-dark);
  margin-bottom: 0.75rem;
  font-style: italic;
}

.recovery-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Builder preview line item. */
.recovery-suggestion-item {
  padding: 0.375rem 0.5rem;
  background-color: white;
  border-radius: 0.25rem;
  border-left: 3px solid var(--badge-secondary);
  font-size: 0.8125rem;
  color: var(--dark-gray);
}

/* Occurrence modal row: suggestion text plus an "Add to athlete notes"
   button. The .btn.btn-small button keeps its existing styling. */
.recovery-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0.5rem;
  background-color: white;
  border-radius: 0.25rem;
  border-left: 3px solid var(--badge-secondary);
  margin-bottom: 0.375rem;
}

.recovery-suggestion:last-child {
  margin-bottom: 0;
}

.recovery-suggestion-text {
  font-size: 0.8125rem;
  color: var(--dark-gray);
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* Muscle Fatigue Summary */

.muscle-fatigue-summary {
  padding: 0.75rem;
  background-color: oklch(95% 0.01 240);
  border-left: 4px solid var(--badge-notice);
  border-radius: 0.25rem;
  margin: 0.75rem 0;
}

.muscle-fatigue-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
}

.muscle-fatigue-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fatigue-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  background-color: white;
  border-radius: 0.25rem;
}

.fatigue-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fatigue-level {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.fatigue-contributors {
  font-size: 0.75rem;
  color: var(--medium-gray-dark);
  padding-left: 0.25rem;
}

/* Day Details Modal: intensity section */
.day-details-intensity {
  margin-bottom: 1rem;
}

.day-details-intensity-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
}

.day-details-occurrence {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  background-color: white;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.day-details-occurrence-name {
  font-weight: 600;
  color: var(--dark-gray);
}

.day-details-intensity-note {
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.day-details-occurrence-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.day-details-occurrence-summary {
  font-size: 0.75rem;
}

.day-details-movements {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.375rem 0 0.25rem 0.5rem;
}

.day-details-movement {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.day-details-movement-name {
  font-weight: 600;
  min-width: 8rem;
}

.day-details-comparisons {
  margin-top: 1rem;
}

.day-details-comparisons-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
}

.day-details-comparison {
  margin-bottom: 0.75rem;
}

.day-details-comparison-name {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Workout Muscle Focus */

.workout-muscle-focus {
  padding: 0.75rem;
  background-color: oklch(95% 0.01 240);
  border-left: 4px solid var(--badge-notice);
  border-radius: 0.25rem;
  margin: 0.75rem 0;
}

.workout-muscle-focus__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
}

.workout-muscle-focus__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.workout-muscle-focus__entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem;
  background-color: white;
  border-radius: 0.25rem;
}

.workout-muscle-focus__badge-col {
  display: flex;
  align-items: flex-start;
  padding-top: 0.0625rem;
}

.workout-muscle-focus__detail-col {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.workout-muscle-focus__level {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.workout-muscle-focus__insight,
.workout-muscle-focus__sources {
  font-size: 0.75rem;
  color: var(--medium-gray-dark);
  line-height: 1.3;
}

/* Per-movement consolidated warning boxes */
.day-movement-warnings {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* The accent edge encodes time direction: LEFT = affected by past work
   ("1d ago"), RIGHT = affects future days ("in 1d"). A tile can carry both.
   Severity picks the accent color via --warning-accent.

   The edge is a fat border with SQUARED corners on its side — rounding
   lets the border color creep around the curve onto the top/bottom edges.
   A single-direction tile gets an equal empty margin on the opposite side
   so tiles stay the same width and centered whichever edge they carry;
   a both-directions tile wears both borders and needs no margin. */
.movement-warning {
  --warning-accent: var(--badge-warning);
  --warning-edge: 6px;
  padding: 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.movement-warning.rank-danger {
  --warning-accent: var(--badge-danger);
}

.movement-warning.rank-caution {
  --warning-accent: var(--badge-caution, var(--badge-notice));
}

.movement-warning--past {
  border-left: var(--warning-edge) solid var(--warning-accent);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.movement-warning--past:not(.movement-warning--future) {
  margin-right: var(--warning-edge);
}

.movement-warning--future {
  border-right: var(--warning-edge) solid var(--warning-accent);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.movement-warning--future:not(.movement-warning--past) {
  margin-left: var(--warning-edge);
}

.warning-offset {
  font-weight: 600;
  white-space: nowrap;
}

.warning-offset--past {
  color: color-mix(in oklch, var(--warning-accent) 80%, black);
}

.warning-offset--future {
  color: color-mix(in oklch, var(--warning-accent) 80%, black);
  font-style: italic;
}

.movement-warning-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--dark-gray);
}

.movement-warning-line {
  font-size: 0.75rem;
  color: var(--medium-gray-dark);
  line-height: 1.3;
}

.movement-warning-line a {
  color: var(--link-color, var(--badge-secondary));
  text-decoration: underline;
}

/* Calendar Day Warnings */
.day-warnings {
  margin-top: 0.5rem;
}

/* Collapsible day-warnings: a <details> collapsed by default, expanding to the
   movement tiles and badges. */
.day-warnings-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
}

.day-warnings-summary::-webkit-details-marker {
  display: none;
}

.day-warnings--high > .day-warnings-summary {
  color: var(--badge-danger);
  background-color: color-mix(in oklch, var(--badge-danger) 12%, white 88%);
}

.day-warnings--medium > .day-warnings-summary {
  color: var(--badge-warning);
  background-color: color-mix(in oklch, var(--badge-warning) 14%, white 86%);
}

.day-warnings-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.day-warnings .badge {
  font-size: 0.75rem;
  padding: 0.375rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1.2;
  white-space: normal;
  word-wrap: break-word;
}

/* Warning Groups - for movement patterns and muscle groups */
.warning-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.375rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0.375rem;
  border-left: 3px solid var(--badge-warning);
}

.warning-group-high {
  border-left-color: var(--badge-danger);
}

.warning-group-medium {
  border-left-color: var(--badge-warning);
}

.warning-group-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--medium-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.warning-group-icon {
  font-size: 0.75rem;
}

.warning-group-label {
  font-size: 0.65rem;
}

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

.warning-badge-grouped {
  font-size: 0.65rem;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

/* Clickable warning badges */
.warning-badge--clickable {
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}

.warning-badge--clickable:hover {
  opacity: 0.85;
}

/* Clickable movement-warning tiles */
.movement-warning[role="button"] {
  cursor: pointer;
}

.movement-warning[role="button"]:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Movement Comparison Modal */
.compare-table-wrapper {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.compare-table th,
.compare-table td {
  padding: 0.375rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid oklch(90% 0 0);
}

.compare-muscle-col {
  width: 8rem;
  font-weight: 600;
  color: var(--dark-gray);
}

.compare-element-col {
  font-weight: 600;
  color: var(--dark-gray);
  min-width: 10rem;
}

.compare-category-row {
  background: oklch(96% 0.005 240);
}

.compare-category-label {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--medium-gray-dark);
  padding: 0.5rem 0.5rem 0.25rem;
}

.compare-muscle-name {
  font-size: 0.8125rem;
  color: var(--dark-gray);
}

.compare-cell--highlight {
  background: oklch(95% 0.02 80);
}

.compare-bar-wrapper {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.compare-bar {
  height: 0.5rem;
  border-radius: 0.25rem;
  min-width: 0.25rem;
}

.compare-bar--primary {
  background: oklch(55% 0.15 145);
}

.compare-bar--secondary {
  background: oklch(65% 0.12 210);
}

.compare-bar--supporting {
  background: oklch(75% 0.08 240);
}

.compare-bar-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-gray);
  white-space: nowrap;
}

.compare-empty {
  color: oklch(75% 0 0);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .day-warnings .badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.4rem;
  }

  .warning-group {
    padding: 0.25rem;
  }

  .warning-badge-grouped {
    font-size: 0.6rem;
    padding: 0.1rem 0.25rem;
  }

  .warning-group-label {
    font-size: 0.6rem;
  }
}

/* Planning guidance chips (empty current/future days): Avoid / Fresh rows */
.day-guidance {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.day-guidance-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.day-guidance-heading {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dark-gray);
  background-color: oklch(98% 0 0 / 0.9);
  padding: 0.1rem 0.35rem;
  border-radius: 0.625rem;
  border: 1px solid oklch(85% 0 0);
}

.day-guidance-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 0.625rem;
  background-color: oklch(93% 0.005 25);
  color: var(--dark-gray);
  white-space: nowrap;
}

.day-guidance-chip--high {
  background-color: var(--badge-danger, oklch(60% 0.2 25));
  color: white;
}

.day-guidance-chip--medium {
  background-color: var(--badge-warning, oklch(75% 0.15 70));
  color: var(--dark-gray);
}

.day-guidance-chip--target {
  background-color: oklch(90% 0.06 150);
  color: oklch(35% 0.09 150);
}

/* Day-details modal: full planning outlook lists */
.day-details-outlook {
  margin-top: 0.75rem;
}

.day-details-outlook-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-gray);
  margin-bottom: 0.5rem;
}

.day-details-outlook-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--medium-gray-dark);
  margin: 0.5rem 0 0.25rem;
}

.day-details-outlook-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}

.day-details-outlook-sources {
  font-size: 0.75rem;
}

/* Element swap picker modal */
.swap-picker-error {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 0.25rem;
  background-color: oklch(93% 0.04 25);
  border-left: 4px solid var(--badge-danger, oklch(60% 0.2 25));
  color: var(--dark-gray);
  font-size: 0.875rem;
}

.swap-picker-notice {
  font-size: 0.8125rem;
  margin-bottom: 0.75rem;
}

.swap-picker-group {
  margin-bottom: 1rem;
}

.swap-picker-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--medium-gray-dark);
  margin-bottom: 0.375rem;
}

.swap-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid oklch(92% 0 0);
}

.swap-picker-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.swap-picker-name {
  font-weight: 600;
  color: var(--dark-gray);
}

.swap-picker-tier,
.swap-picker-muscles {
  font-size: 0.75rem;
}

.movement-warning-swap-link {
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* Planned-only collisions: advice, not warnings. Soft blue/gray so it never
   reads as the orange/red warning stack. */
.day-movement-advice {
  margin-top: 0.375rem;
}

.day-movement-advice-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
  color: var(--badge-secondary, #4b5563);
  background-color: color-mix(in oklch, var(--badge-secondary, #6b7280) 10%, white 90%);
}

.day-movement-advice-summary::-webkit-details-marker {
  display: none;
}

.day-movement-advice-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.movement-advice {
  font-size: 0.75rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  border-left: 3px solid var(--badge-secondary, #6b7280);
  background-color: color-mix(in oklch, var(--badge-secondary, #6b7280) 6%, white 94%);
  color: var(--dark-gray);
}

.movement-advice-title {
  font-weight: 700;
  margin-bottom: 0.125rem;
}

.movement-advice-line {
  color: var(--medium-gray, #6b7280);
}

/* Day-fit reason chips in the schedule picker results */
.schedule-modal-reason-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.schedule-modal-reason-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 0.625rem;
  background-color: oklch(95% 0 0);
  color: var(--dark-gray);
  white-space: nowrap;
}

.schedule-modal-reason-chip--fresh {
  background-color: oklch(90% 0.06 150);
  color: oklch(35% 0.09 150);
}

.schedule-modal-reason-chip--conflict {
  background-color: oklch(93% 0.04 25);
  color: oklch(40% 0.12 25);
}

.schedule-modal-reason-chip--avoids {
  background-color: oklch(93% 0.02 240);
  color: oklch(40% 0.06 240);
}

/* Calibration scenarios tab */
.calibration-scenario-card {
  padding: 0.75rem;
  background-color: white;
  border-radius: 0.375rem;
  border: 1px solid oklch(90% 0 0);
  margin-bottom: 0.75rem;
}

.calibration-scenario-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.calibration-scenario-title {
  font-weight: 700;
  color: var(--dark-gray);
}

.calibration-scenario-note {
  font-size: 0.8125rem;
  margin: 0.25rem 0 0.5rem;
}

.calibration-scenario-checks {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: collapse;
}

.calibration-scenario-checks th,
.calibration-scenario-checks td {
  text-align: left;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid oklch(94% 0 0);
}

.calibration-scenario-check--out td {
  background-color: oklch(95% 0.03 25);
  font-weight: 600;
}

.calibration-scenario-panel {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background-color: oklch(97% 0 0);
  border-radius: 0.375rem;
}

.unresolved-movements {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border-left: 3px solid var(--caution-color, #d97706);
  background-color: color-mix(in oklch, var(--caution-color, #d97706) 8%, white);
}

.unresolved-movements__message {
  margin: 0;
  font-weight: 600;
}

.unresolved-movements__name {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--caution-color, #d97706);
  text-decoration: underline;
  cursor: pointer;
}

.unresolved-movements__hint {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
}