/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

wa-slider.rpe-slider::part(track) {
  background: linear-gradient(
    90deg,
    #2563eb 0%,
    #16a34a 25%,
    #eab308 50%,
    #f97316 75%,
    #dc2626 100%
  );
}

wa-slider.rpe-slider::part(indicator) {
  background: transparent;
}

#plan-week-select::part(combobox) {
  min-block-size: 2.125rem;
}

#plan-week-select::part(display-input) {
  line-height: 1.1;
  padding-block: 0;
}

.analytics-mileage-chart-card,
.analytics-mileage-chart-card::part(base),
.analytics-mileage-chart-card::part(body),
.analytics-mileage-chart-frame,
.analytics-mileage-chart {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.analytics-mileage-chart {
  display: block;
}

.home-day-tabs wa-tab::part(base),
.plan-weekly-summary-tabs wa-tab::part(base),
.race-details-tabs wa-tab::part(base),
.races-index-tabs wa-tab::part(base) {
  padding-block-start: 0;
  padding-block-end: var(--wa-space-xs);
  padding-inline: var(--wa-space-s);
}

.plan-activity-date-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: var(--wa-space-2xs);
  min-inline-size: 3.75rem;
  margin: 0;
  padding: var(--wa-space-2xs) var(--wa-space-xs);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-heading);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.plan-activity-date-label--today {
  background: linear-gradient(135deg, #ffc766 0%, #ffab3d 100%);
  color: #2f1b00;
  border-radius: 999px 850px 980px 760px / 880px 1040px 760px 980px;
  box-shadow: 0 0.4rem 1rem rgba(255, 171, 61, 0.28);
  transform: rotate(-4deg);
}

.today-activity-card .today-activity-state-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin: 0;
  padding: var(--wa-space-2xs) var(--wa-space-s);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-heading);
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border-radius: 999px 850px 980px 760px / 880px 1040px 760px 980px;
  box-shadow: 0 0.35rem 0.9rem rgba(17, 24, 39, 0.12);
  transform: rotate(4deg);
  flex-shrink: 0;
}

.today-activity-card .today-activity-state-label--pending {
  background: linear-gradient(
    135deg,
    var(--wa-color-gray-85, #e5e7eb) 0%,
    var(--wa-color-gray-75, #d1d5db) 100%
  );
  color: var(--wa-color-gray-15, #1f2937);
  box-shadow: 0 0.35rem 0.9rem rgba(107, 114, 128, 0.22);
}

.today-activity-card .today-activity-state-label--completed {
  background: linear-gradient(
    135deg,
    var(--wa-color-green-85, #bbf7d0) 0%,
    var(--wa-color-green-75, #86efac) 100%
  );
  color: var(--wa-color-green-15, #14532d);
  box-shadow: 0 0.35rem 0.9rem rgba(34, 197, 94, 0.24);
}

.today-activity-card .today-activity-state-label--rest {
  background: linear-gradient(
    135deg,
    var(--wa-color-blue-85, #bfdbfe) 0%,
    var(--wa-color-blue-75, #93c5fd) 100%
  );
  color: var(--wa-color-blue-15, #1e3a8a);
  box-shadow: 0 0.35rem 0.9rem rgba(59, 130, 246, 0.24);
}

.feedback-details::part(content) {
  padding-block-start: 0;
}

.plan-dialog-summary-details::part(content) {
  padding-block-start: 0;
}

.plan-dialog-summary-preview--expanded {
  display: none;
}

.plan-dialog-summary-details[open] .plan-dialog-summary-preview--collapsed,
.feedback-details[open] .plan-dialog-summary-preview--collapsed {
  display: none;
}

.plan-dialog-summary-details[open] .plan-dialog-summary-preview--expanded,
.feedback-details[open] .plan-dialog-summary-preview--expanded {
  display: inline;
}