/* Project-wide interaction state system.
   Theme palettes define the semantic tokens; feature styles own geometry. */

/* Interaction states share one palette; roles only describe behavior. */
.tab.active,
.decision-os-tabs a.is-active,
[data-ui-role="segment"]:is([aria-pressed="true"], [aria-selected="true"]) {
  border-color: var(--ui-state-segment-selected-border);
  background: var(--ui-state-segment-selected-bg);
  color: var(--ui-state-segment-selected-fg);
  box-shadow: none;
}

:is(
  .tab.active,
  .decision-os-tabs a.is-active,
  [data-ui-role="segment"]:is([aria-pressed="true"], [aria-selected="true"])
):hover {
  border-color: var(--ui-state-segment-selected-border);
  background: var(--ui-state-segment-selected-bg);
  color: var(--ui-state-segment-selected-fg);
}

/* Period switches use the same calm selected surface without an inset line. */
.fbs-daily__toolbar [data-ui-role="segment"][aria-pressed="true"],
.fbs-sla-trend__toolbar [data-ui-role="segment"][aria-pressed="true"] {
  border-color: transparent;
  background: var(--ui-state-segment-selected-bg);
  box-shadow: none;
}

[role="option"][aria-selected="true"] {
  border-color: var(--ui-state-option-selected-border);
  background: var(--ui-state-option-selected-bg);
  color: var(--ui-state-option-selected-fg);
  box-shadow: none;
}

[role="option"][aria-selected="true"]::after {
  content: "✓";
  margin-inline-start: 0.45em;
  color: var(--ui-state-option-selected-indicator);
  font-weight: var(--ui-weight-semibold);
}

.quarter-btn.is-active,
.retouch-toggle:has(input:checked),
[data-ui-role="filter"]:is([aria-pressed="true"], :has(input:checked)) {
  border-color: var(--ui-state-filter-active-border);
  background: var(--ui-state-filter-active-bg);
  color: var(--ui-state-filter-active-fg);
  box-shadow: none;
}

.mobile-nav__item.is-active,
.mobile-sheet__choice.is-active,
.mobile-sheet__quick-link.is-active,
.feedback-pagination__btn.is-active,
[data-ui-role="navigation"][data-ui-orientation][aria-current="page"] {
  border-color: var(--ui-state-navigation-selected-border);
  background: var(--ui-state-navigation-selected-bg);
  color: var(--ui-state-navigation-selected-fg);
}

.mobile-nav__item.is-active,
.feedback-pagination__btn.is-active,
.mobile-sheet__choice.is-active,
.mobile-sheet__quick-link.is-active,
[data-ui-role="navigation"][data-ui-orientation="vertical"][aria-current="page"],
[data-ui-role="navigation"][data-ui-orientation="horizontal"][aria-current="page"] {
  box-shadow: none;
}

[data-ui-role="row"][aria-selected="true"],
[data-ui-role="card"]:is([data-ui-selected="true"], :has(input:checked)) {
  border-color: var(--ui-state-row-selected-border);
  background: var(--ui-state-row-selected-bg);
}

[data-ui-role="row"][aria-selected="true"] > td {
  background: var(--ui-state-row-selected-bg) !important;
}

[data-ui-role="card"]:is([data-ui-selected="true"], :has(input:checked)) {
  box-shadow: none;
}

[data-ui-role="row"][aria-selected="true"] > :first-child {
  box-shadow: none;
}

/* Feature controls that cannot expose a generic role still consume the same palette. */
.fbs-live-overview__hero.is-active,
.feedback-insight--summary-toggle.is-active {
  background: var(--ui-state-selected-bg);
  border-color: var(--ui-state-selected-border);
  color: var(--ui-state-selected-fg);
  box-shadow: none;
}

/* Selected state wins over pointer hover without changing its visual meaning. */
:is(
  .tab.active,
  .decision-os-tabs a.is-active,
  .quarter-btn.is-active,
  .retouch-toggle:has(input:checked),
  .mobile-nav__item.is-active,
  .mobile-sheet__choice.is-active,
  .mobile-sheet__quick-link.is-active,
  .feedback-pagination__btn.is-active,
  .table-cell-reason-comparison-menu__item.is-active,
  [data-ui-role="segment"]:is([aria-pressed="true"], [aria-selected="true"]),
  [role="option"][aria-selected="true"],
  [data-ui-role="filter"]:is([aria-pressed="true"], :has(input:checked)),
  [data-ui-role="navigation"][data-ui-orientation][aria-current="page"]
):hover {
  background: var(--ui-state-selected-bg);
  border-color: var(--ui-state-selected-border);
  color: var(--ui-state-selected-fg);
}

:is(
  [data-ui-role="row"][aria-selected="true"],
  [data-ui-role="card"]:is([data-ui-selected="true"], :has(input:checked))
):hover {
  background: var(--ui-state-selected-bg);
  border-color: var(--ui-state-selected-border);
}

.retouch-ref:hover:not(.is-selected):not(.is-disabled),
.retouch-card__slot--selectable:hover:not(.is-selected):not(.is-disabled),
.inventory-risk-card:hover:not(.is-active),
.inventory-risk-card__platform:hover:not(.is-active),
.table-cell-reason-comparison-menu__item:hover:not(.is-active) {
  border-color: var(--ui-state-hover-border);
  background: var(--ui-state-hover-bg);
  color: var(--ui-state-hover-fg);
  box-shadow: none;
}

.table-cell-reason-comparison-menu__item.is-active {
  border-color: var(--ui-state-filter-active-border);
  background: var(--ui-state-filter-active-bg);
  color: var(--ui-state-filter-active-fg);
  box-shadow: none;
}

/* Domain-selected controls keep their scoped accent contracts. */
.spp-history-modal__toggle.is-active {
  border-color: var(--app-spp-accent);
  background: color-mix(in srgb, var(--app-spp-accent) 12%, var(--ui-surface-base));
  color: var(--app-spp-accent);
  box-shadow: none;
}

/* Accessibility states compose with selected state instead of replacing it. */
:is(
  .tab.active,
  .decision-os-tabs a.is-active,
  .quarter-btn.is-active,
  .feedback-pagination__btn.is-active,
  .mobile-nav__item.is-active,
  .mobile-sheet__choice.is-active,
  .mobile-sheet__quick-link.is-active,
  [data-ui-role="segment"]:is([aria-pressed="true"], [aria-selected="true"]),
  [role="option"][aria-selected="true"],
  [data-ui-role="filter"]:is([aria-pressed="true"], :has(input:checked)),
  [data-ui-role="navigation"][data-ui-orientation][aria-current="page"],
  [data-ui-role="row"][aria-selected="true"],
  [data-ui-role="card"]:is([data-ui-selected="true"], :has(input:checked))
):focus-visible {
  outline: 2px solid var(--ui-state-focus-ring-color);
  outline-offset: 2px;
}

.retouch-toggle:has(input:checked:focus-visible) {
  outline: 2px solid var(--ui-state-focus-ring-color);
  outline-offset: 2px;
}

[data-ui-role="filter"]:has(input:focus-visible) {
  outline: 2px solid var(--ui-state-focus-ring-color);
  outline-offset: 2px;
}

[data-ui-role="card"]:has(input:focus-visible) {
  outline: 2px solid var(--ui-state-focus-ring-color);
  outline-offset: 2px;
}

/* Terminal states are declared last and always beat hover or selection. */
:is(
  .quarter-btn,
  .feedback-pagination__btn,
  .tab,
  .decision-os-tabs a,
  .mobile-nav__item,
  .mobile-sheet__choice,
  .mobile-sheet__quick-link,
  .table-cell-reason-comparison-menu__item,
  [data-ui-role="segment"],
  [role="option"],
  [data-ui-role="filter"],
  [data-ui-role="navigation"],
  [data-ui-role="row"],
  [data-ui-role="card"]
):is(:disabled, [aria-disabled="true"], .is-disabled) {
  border-color: var(--ui-state-disabled-border);
  background: var(--ui-state-disabled-bg);
  color: var(--ui-state-disabled-fg);
  box-shadow: none;
  cursor: var(--ui-disabled-cursor);
}

:is(
  .dropdown__option,
  [role="option"]
):is(:disabled, [aria-disabled="true"], .is-disabled)::after {
  content: none;
}

[data-ui-role="row"]:is(:disabled, [aria-disabled="true"], .is-disabled) > :first-child {
  box-shadow: none;
}

:is(
  .table-ads-toggle,
  .table-inventory-toggle,
  .table-finance-toggle,
  .table-price-index-toggle,
  .table-transpose-toggle,
  .retouch-toggle,
  .column-filter-popover__mode-chip,
  .table-comment-popover__tag-option
):has(input:disabled) {
  border-color: var(--ui-state-disabled-border);
  background: var(--ui-state-disabled-bg);
  color: var(--ui-state-disabled-fg);
  box-shadow: none;
  cursor: var(--ui-disabled-cursor);
}

:is(
  .table-ads-toggle,
  .table-inventory-toggle,
  .table-finance-toggle,
  .table-price-index-toggle,
  .table-transpose-toggle
) input:disabled + :is(.table-ads-toggle__slider, .table-inventory-toggle__slider, .table-finance-toggle__slider, .table-price-index-toggle__slider, .table-transpose-toggle__slider) {
  border-color: var(--ui-state-disabled-border);
  background: var(--ui-state-disabled-bg);
}