/*
 * Pipeline lead: tendina dello stato nella colonna "Stato" (.jo-lead-stage).
 * ------------------------------------------------------------------
 * Lo stato era un badge colorato e si cambiava da un'azione; ora si cambia
 * dalla colonna con una tendina (SelectColumn, owner 7-ott-2026). Il colore
 * resta quello del badge: data-color arriva da
 * LeadPipelineService::STAGE_COLORS, e testo, fondo e bordo seguono le
 * shade del badge Filament (600 + fondo 50; in dark 400 su fondo al 10%).
 * Le voci della tendina aperta tornano al colore normale. Il bordo di
 * focus resta quello primary di Filament (:not(:focus-within)).
 */
.jo-lead-stage {
  --jo-ls: var(--gray-600);
  --jo-ls-soft: var(--gray-50);
  --jo-ls-dark: var(--gray-400);
}

.jo-lead-stage[data-color='info'] {
  --jo-ls: var(--info-600);
  --jo-ls-soft: var(--info-50);
  --jo-ls-dark: var(--info-400);
}

.jo-lead-stage[data-color='warning'] {
  --jo-ls: var(--warning-600);
  --jo-ls-soft: var(--warning-50);
  --jo-ls-dark: var(--warning-400);
}

.jo-lead-stage[data-color='primary'] {
  --jo-ls: var(--primary-600);
  --jo-ls-soft: var(--primary-50);
  --jo-ls-dark: var(--primary-400);
}

.jo-lead-stage[data-color='success'] {
  --jo-ls: var(--success-600);
  --jo-ls-soft: var(--success-50);
  --jo-ls-dark: var(--success-400);
}

.jo-lead-stage .fi-input-wrp {
  background-color: rgb(var(--jo-ls-soft));
}

.jo-lead-stage .fi-input-wrp:not(:focus-within) {
  --tw-ring-color: rgba(var(--jo-ls), 0.3);
}

.jo-lead-stage .fi-select-input {
  color: rgb(var(--jo-ls));
  font-weight: 500;
}

.jo-lead-stage .fi-select-input option {
  color: rgb(var(--gray-950));
  font-weight: 400;
}

.dark .jo-lead-stage .fi-input-wrp,
[data-theme='dark'] .jo-lead-stage .fi-input-wrp {
  background-color: rgba(var(--jo-ls-dark), 0.1);
}

.dark .jo-lead-stage .fi-input-wrp:not(:focus-within),
[data-theme='dark'] .jo-lead-stage .fi-input-wrp:not(:focus-within) {
  --tw-ring-color: rgba(var(--jo-ls-dark), 0.3);
}

.dark .jo-lead-stage .fi-select-input,
[data-theme='dark'] .jo-lead-stage .fi-select-input {
  color: rgb(var(--jo-ls-dark));
}

.dark .jo-lead-stage .fi-select-input option,
[data-theme='dark'] .jo-lead-stage .fi-select-input option {
  color: #fff;
}