/*
 * QA890 semantic hover contract.
 *
 * Interactive cards keep their quiet resting edge. Hover and keyboard focus
 * borrow the same semantic color already used by the card icon, status accent,
 * or lead age line. The protected Painting estimator is intentionally excluded.
 */
.premium-app {
  --ifg-accent-green: #22c55e;
  --ifg-accent-yellow: #facc15;
  --ifg-accent-orange: #ff7a00;
  --ifg-accent-red: #ef4444;
  --ifg-accent-cyan: #22d3ee;
  --ifg-accent-blue: #38bdf8;
  --ifg-accent-purple: #c084fc;
  --ifg-accent-pink: #f472b6;
  --ifg-accent-gold: #eab308;
}

/* Shared tone classes already drive the icon and left-edge colors. */
.premium-app :is(.green,.tone-green,.lead-age-green,.queue-tone-green,.status-active-job) {
  --ifg-card-interaction: var(--ifg-accent-green) !important;
}
.premium-app :is(.yellow,.tone-yellow,.lead-age-yellow,.queue-tone-yellow,.gold,.tone-gold) {
  --ifg-card-interaction: var(--ifg-accent-yellow) !important;
}
.premium-app :is(.orange,.tone-orange,.lead-age-orange,.queue-tone-orange) {
  --ifg-card-interaction: var(--ifg-accent-orange) !important;
}
.premium-app :is(.red,.tone-red,.lead-age-red,.queue-tone-red,.status-customer,.status-completed-customer,.status-won) {
  --ifg-card-interaction: var(--ifg-accent-red) !important;
}
.premium-app :is(.cyan,.tone-cyan,.status-lead,.status-qualified,.status-appointment-set) {
  --ifg-card-interaction: var(--ifg-accent-cyan) !important;
}
.premium-app :is(.blue,.tone-blue,.lead-age-blue,.queue-tone-blue) {
  --ifg-card-interaction: var(--ifg-accent-blue) !important;
}
.premium-app :is(.purple,.tone-purple,.status-proposal-open,.status-balance-due) {
  --ifg-card-interaction: var(--ifg-accent-purple) !important;
}
.premium-app :is(.pink,.tone-pink) {
  --ifg-card-interaction: var(--ifg-accent-pink) !important;
}

/* Components whose accent lives on a child icon or a component token. */
.premium-app .mh-metric {
  --ifg-card-interaction: var(--mh-card-tone) !important;
}
.premium-app .ti-insight-card {
  --ifg-card-interaction: var(--ti-cyan) !important;
}
.premium-app .customer-summary-button-v8 {
  --ifg-card-interaction: var(--c8-violet) !important;
}
.premium-app .customer-card-v6:has(.customer-name-tag.green) {
  --ifg-card-interaction: var(--ifg-accent-green) !important;
}
.premium-app .customer-card-v6:has(.customer-name-tag.red) {
  --ifg-card-interaction: var(--ifg-accent-red) !important;
}
.premium-app .customer-card-v6:has(.customer-name-tag.purple) {
  --ifg-card-interaction: var(--ifg-accent-purple) !important;
}
.premium-app .customer-card-v6:has(.customer-name-tag.cyan) {
  --ifg-card-interaction: var(--ifg-accent-cyan) !important;
}
.premium-app .wfops-metric:has(.wfops-tone-cyan) {
  --ifg-card-interaction: var(--wf-cyan) !important;
}
.premium-app .wfops-metric:has(.wfops-tone-green) {
  --ifg-card-interaction: var(--wf-green) !important;
}
.premium-app .wfops-metric:has(.wfops-tone-violet) {
  --ifg-card-interaction: var(--wf-violet) !important;
}
.premium-app .wfops-metric:has(.wfops-tone-pink) {
  --ifg-card-interaction: var(--wf-pink) !important;
}
.premium-app .wfops-metric:has(.wfops-tone-orange) {
  --ifg-card-interaction: var(--ifg-accent-orange) !important;
}

/*
 * Lead cards follow the line the operator can actually see. The board line is
 * stage-based, while the Call Back Queue line is urgency-based.
 */
.premium-app .lead-kanban .lead-ticket {
  --ifg-card-interaction: var(--lead-stage-color, var(--ifg-accent-orange)) !important;
}
.premium-app .request-queue-panel .request-card {
  --ifg-card-interaction: var(--queue-tone, var(--ifg-accent-orange)) !important;
}

.premium-app :is(
  .lead-ticket,
  .request-card,
  .estimate-request-card,
  .crm-shared-lead-row,
  .dashboard-lead-row
) {
  --ifg-card-interaction: var(--ifg-accent-orange);
  transition:
    border-color .14s ease,
    outline-color .14s ease,
    background-color .14s ease,
    box-shadow .14s ease !important;
}

/* The same contract applies to the rest of the semantic card families. */
.premium-app :is(
  .dashboard-kpi-card,
  .dashboard-insight,
  .dashboard-pipeline-card,
  .dashboard-list-row,
  .dashboard-schedule-stats article,
  .command-kpi,
  .calendar-focus-metric:not([data-calendar-focus="new-appointment"]),
  .lead-stat-card,
  .lead-clickable-panel,
  .lead-ticket,
  .request-card,
  .estimate-request-card,
  .crm-shared-lead-row,
  .customer-card-v6,
  .customer-summary-button-v8,
  .jobs-kpi-card,
  .jobs-action-card,
  .job-schedule-card-slot,
  .proposal-reference-metric,
  .if-draft-card,
  .invoice-reference-kpi,
  .wfops-metric,
  .report-kpi,
  .report-library-card,
  .ti-insight-card,
  .blast-metric-card,
  .blast-audience-card,
  .mh-metric
):not(:disabled):hover {
  border-color: var(--ifg-card-interaction, var(--ifg-accent-orange)) !important;
  outline: 2px solid var(--ifg-card-interaction, var(--ifg-accent-orange)) !important;
  outline-offset: -2px !important;
  box-shadow:
    inset 0 0 0 1px color-mix(
      in srgb,
      var(--ifg-card-interaction, var(--ifg-accent-orange)) 38%,
      transparent
    ),
    0 0 14px color-mix(
      in srgb,
      var(--ifg-card-interaction, var(--ifg-accent-orange)) 15%,
      transparent
    ) !important;
  transform: none !important;
}

.premium-app :is(
  .dashboard-kpi-card,
  .dashboard-insight,
  .dashboard-pipeline-card,
  .dashboard-list-row,
  .command-kpi,
  .calendar-focus-metric:not([data-calendar-focus="new-appointment"]),
  .lead-stat-card,
  .lead-clickable-panel,
  .lead-ticket,
  .request-card,
  .estimate-request-card,
  .crm-shared-lead-row,
  .customer-card-v6,
  .customer-summary-button-v8,
  .jobs-kpi-card,
  .jobs-action-card,
  .proposal-reference-metric,
  .if-draft-card,
  .invoice-reference-kpi,
  .wfops-metric,
  .report-kpi,
  .report-library-card,
  .ti-insight-card,
  .blast-metric-card,
  .blast-audience-card,
  .mh-metric
):not(:disabled):focus-visible {
  border-color: var(--ifg-card-interaction, var(--ifg-accent-orange)) !important;
  outline: 2px solid var(--ifg-card-interaction, var(--ifg-accent-orange)) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .premium-app :is(
    .dashboard-kpi-card,
    .dashboard-insight,
    .dashboard-pipeline-card,
    .dashboard-list-row,
    .lead-stat-card,
    .lead-ticket,
    .request-card,
    .estimate-request-card,
    .customer-card-v6,
    .jobs-kpi-card,
    .jobs-action-card,
    .proposal-reference-metric,
    .invoice-reference-kpi,
    .report-kpi,
    .report-library-card,
    .blast-metric-card,
    .blast-audience-card,
    .mh-metric
  ) {
    transition: none !important;
  }
}