/* ========================================
   Scenario Tabs
   ======================================== */

#opus-price-builder-app .scenario-tabs {
  @apply flex gap-1 p-1 bg-surface-secondary rounded-lg;
}

#opus-price-builder-app .scenario-tab {
  @apply flex items-center gap-2 px-4 py-2;
  @apply text-sm font-medium text-text-muted;
  @apply rounded-md;
  @apply transition-all duration-[--transition-fast];
  @apply cursor-pointer select-none;

  &:hover {
    @apply text-text bg-surface;
  }

  &[data-active="true"] {
    @apply text-text bg-surface shadow-sm;
  }

  &:focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2;
  }
}

/* ========================================
   Settings Tabs
   ======================================== */

#opus-price-builder-app .settings-tabs-list {
  @apply flex gap-1 border-b border-border mb-4;
}

#opus-price-builder-app .settings-tab {
  @apply px-3 py-2 text-xs font-medium text-text-muted;
  @apply border-b-2 border-transparent;
  @apply transition-colors duration-[--transition-fast];

  &:hover {
    @apply text-text;
  }

  &[data-state="active"] {
    @apply text-primary border-primary;
  }
}

#opus-price-builder-app .settings-tab-content {
  @apply outline-none;
}
 .settings-tab-content {
  @apply outline-none;
}
