/* f82-overrides.css — Production-panel overrides for F82 integration.
 *
 * Layered ON TOP of mod-menu.css / right-panel.css to fix issues caught
 * during live integration:
 *
 *  1. Active slot/category chip text now BLACK on yellow/gold so it's readable
 *  2. Slot-detail badge `.is-active` state gets black text + bold weight
 *  3. Comparison-mode toggles inherit readable colors
 */

/* When a chip is in the "active" state (any of the active-state class names
 * the various panel systems use), render the text BLACK so it's legible
 * against the gold accent background. */
.cph-chip.is-active,
.cph-chip.is-selected,
.cph-chip[data-selected="true"],
.cph-chip[aria-selected="true"],
.cph-chip[aria-pressed="true"],
.cph-chip--active,
.am-chip--active,
.zone-chip.is-active,
.slot-part__variant-chip.is-active,
.slot-detail__nav-chip.is-active {
  background: linear-gradient(135deg, var(--c-active) 0%, var(--c-active) 100%) !important;
  border-color: var(--c-active) !important;
  color: #0a0a0a !important;          /* BLACK text so the label is readable */
  font-weight: 700 !important;
  text-shadow: none !important;
}

.cph-chip.is-active .cph-chip__count,
.cph-chip.is-selected .cph-chip__count,
.cph-chip--active .cph-chip__count {
  background: rgba(0, 0, 0, 0.18) !important;
  color: #0a0a0a !important;
  font-weight: 800 !important;
}

/* Same for any section header in the part-area-selector that gets highlighted */
.cph-section--active .cph-section__title,
.cph-section.is-open .cph-section__title,
.mv-section-active .mv-section__title {
  color: var(--c-active) !important;
  font-weight: 700;
}

/* Category-row hover/active inside the chip rail */
.cph-section__title-row.is-active,
.cph-section__title-row[aria-expanded="true"] {
  color: var(--c-active);
}

/* Slot-detail header — when on the slot list, make the slot name pop */
.slot-detail__nav-chip {
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.slot-detail__nav-chip:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

/* F82 video-modal "Sounds"/"Install" tabs and the named-clip pills below —
 * these should match the existing G82 modal styling: yellow active pill,
 * black text, named clip label. */
.media-modal__tab.is-active,
.media-modal__clip-chip.is-active,
.media-modal__filter-chip.is-active,
.video-modal__tab.is-active,
.video-modal__filter-chip.is-active {
  background: linear-gradient(135deg, var(--c-active) 0%, var(--c-active) 100%) !important;
  color: #0a0a0a !important;
  font-weight: 700 !important;
  border-color: var(--c-active) !important;
}

/* If a part has a Compare toggle, make the active state visually distinct */
.am-card__compare-toggle.is-active,
.part-card__compare-btn.is-active,
.slot-part__compare.is-active {
  background: linear-gradient(135deg, var(--c-active) 0%, var(--c-active) 100%) !important;
  color: #0a0a0a !important;
  font-weight: 700 !important;
}