/* 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;
}

.movement-warning {
  padding: 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0.375rem;
  border-left: 3px solid var(--badge-warning);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.movement-warning.rank-danger {
  border-left-color: var(--badge-danger);
}

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

.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;
  }
}