/**
 * Ticket #35: dim (not hide) non-selected items in the "Test Method Name /
 * Short Name" ECL multi-select once one is picked. Applied by tsar-
 * search.js. The picked one stays clickable (to un-pick); the rest fade.
 */
.tsar-dimmed {
  opacity: 0.4;
  pointer-events: none;
}

.tsar-dimmed input[type="checkbox"] {
  cursor: not-allowed;
}

/*
 * Inline hint under a filter -- generic italic. Used for both combinatorial
 * (OR-within / AND-across) filters and direct-picker (Name / Number)
 * filters, differentiated by an extra class.
 */
.tsar-or-hint {
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
  margin-top: 0.25rem;
  display: block;
}

.tsar-direct-hint {
  color: #b8730f;
}

/*
 * Ticket #35: two visual sections wrapping the exposed filters.
 *  - .tsar-search-section--direct: Name + Number (each picks exactly one TM)
 *  - .tsar-search-section--combo:  everything else (OR-within / AND-across)
 * Each section has its own legend with a colour-coded badge.
 */
.tsar-search-section {
  border: 1px solid #d0d7de;
  border-radius: 4px;
  margin: 0 0 1.25rem 0;
  padding: 0.5rem 1rem 1rem;
}

.tsar-search-section--direct {
  background-color: #fdf6ec;
  border-color: #e8c98d;
}

.tsar-search-section--combo {
  background-color: #f4f8fc;
  border-color: #bcd3ea;
}

/*
 * Mutual-exclusive lock. Set on a section or slot when a direct picker
 * (Name / Number) is active: the block fades and a transparent overlay
 * (::after) sits on top to catch every click. The form-level capture-phase
 * click handler then shows a warning alert. `pointer-events: none` is NOT
 * set on the block itself, otherwise the overlay would inherit it and
 * clicks would fall through to the widgets underneath.
 */
.tsar-locked {
  opacity: 0.45;
  position: relative;
}

.tsar-locked::after {
  content: '';
  cursor: not-allowed;
  inset: 0;
  position: absolute;
  z-index: 10;
}

/*
 * Ticket #35 hotfix: custom centred notice replacing window.alert(),
 * which rendered inconsistently across browsers (dark chrome on
 * Firefox, white on Chrome, native OS dialog on IE / Edge) and did
 * not sit in the middle of the viewport.
 */
.tsar-notice-overlay {
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 10000;
}

.tsar-notice {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  color: #222;
  font-size: 1rem;
  max-width: 640px;
  min-width: 420px;
  width: 90%;
}

.tsar-notice__header {
  align-items: center;
  background: #1b6ec2;
  border-radius: 6px 6px 0 0;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
}

.tsar-notice__title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tsar-notice__close {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.25rem;
}

.tsar-notice__body {
  padding: 1.25rem 1.25rem 1.5rem;
}

.tsar-notice__subtitle {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.tsar-notice__message {
  line-height: 1.4;
}

/*
 * Ticket #53: cascading / faceted filters. Options whose value would
 * produce zero results with the current filter combination are marked
 * `.tsar-facet-empty` (both the native <option> and the ECL checkbox
 * item). They stay visible but greyed and not clickable, so the user
 * sees what is excluded rather than silently disappearing.
 */
.tsar-facet-empty {
  color: #999;
  opacity: 0.55;
}

.ecl-checkbox.tsar-facet-empty {
  cursor: not-allowed;
  pointer-events: none;
}

.ecl-checkbox.tsar-facet-empty .ecl-checkbox__label,
.ecl-checkbox.tsar-facet-empty label {
  color: #999;
}

option.tsar-facet-empty {
  background-color: #f4f4f4;
}

.tsar-search-section__legend {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 0.5rem;
}

.tsar-search-section__hint {
  color: #444;
  display: inline-block;
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 400;
  margin-left: 0.5rem;
}

/*
 * Ticket #52: help modal body served by SearchHelpController.
 */
.tsar-search-help__modal h3 {
  font-size: 1rem;
  margin: 1rem 0 0.3rem;
}

.tsar-search-help__modal ul {
  margin: 0.25rem 0 0.75rem 1.25rem;
}

.tsar-search-help__modal li {
  margin-bottom: 0.2rem;
}

.tsar-search-help__badge {
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 0.4rem;
  padding: 0.15rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tsar-search-help__badge--direct {
  background-color: #b8730f;
}

.tsar-search-help__badge--combo {
  background-color: #1b6ec2;
}