/*
 * 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.
 */

/* Modifiers List Styling */
.modifiers-list {
  padding-left: 1rem;
  margin-top: 0.25rem;
}

.modifiers-list .modifier-item {
  line-height: 1.4;
  margin-bottom: 0.15rem;
}

.modifiers-list .modifier-bullet {
  margin-right: 0.25rem;
  color: #6c757d;
}

.modifiers-list .modifier-name {
  font-weight: 500;
}

.modifiers-list .modifier-details {
  font-weight: normal;
  color: #6c757d;
}

/* Nested modifiers (2nd level and deeper) */
.modifiers-list .modifiers-list {
  padding-left: 1.25rem;
  font-size: 0.95em;
}

/* Custom purple badge for source state */
.bg-purple {
  background-color: #6f42c1 !important;
}

/* Matte red for cancelled source states */
.bg-danger-muted {
  background-color: #a94442 !important;
}

/* Source state badge - allow text wrapping */
.badge-source-state {
  white-space: normal;
  max-width: 140px;
  text-align: left;
  line-height: 1.3;
  display: inline-flex;
  align-items: flex-start;
}

/* Utility class for clickable elements */
.cursor-pointer {
  cursor: pointer;
}

/* Mapping analysis chevron rotation */
.mapping-chevron {
  transition: transform 0.2s ease-in-out;
}

[aria-expanded="true"] .mapping-chevron {
  transform: rotate(180deg);
}

[aria-expanded="false"] .mapping-chevron {
  transform: rotate(0deg);
}