/**
 * Settings Page Styles
 *
 * Styles for the Price Builder Opus settings page.
 */

/* Settings page wrapper */
.oppb-settings-page {
  @apply max-w-4xl mx-auto p-6;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Loading and error states */
.oppb-settings-loading,
.oppb-settings-error {
  @apply flex items-center justify-center gap-3 p-8 text-text-muted;
}

.oppb-settings-error {
  @apply text-danger bg-danger/10 rounded-lg;
}

/* Header */
.oppb-settings-header {
  @apply mb-8;
}

.oppb-settings-header__title {
  @apply flex items-center gap-3 text-2xl font-semibold text-text mb-2;
}

.oppb-settings-header__description {
  @apply text-text-muted;
}

/* Content */
.oppb-settings-content {
  @apply space-y-8;
}

/* Section */
.oppb-settings-section {
  @apply space-y-4;
}

.oppb-settings-section__header {
  @apply flex items-center gap-2 text-lg font-medium text-text;
}

/* Card */
.oppb-settings-card {
  @apply bg-surface rounded-lg border border-border p-6 space-y-6;
}

/* Info box */
.oppb-settings-info-box {
  @apply bg-surface-secondary rounded-md p-4 text-sm text-text-muted space-y-2;
}

/* Row */
.oppb-settings-row {
  @apply flex items-start justify-between gap-8;
}

.oppb-settings-row--nested {
  @apply pt-4 border-t border-border;
}

.oppb-settings-row__info {
  @apply flex-1 min-w-0;
}

.oppb-settings-row__label {
  @apply block font-medium text-text mb-1;
}

.oppb-settings-row__description {
  @apply text-sm text-text-muted;
}

.oppb-settings-row__message {
  @apply text-sm mt-2 flex items-center gap-1.5;
}

.oppb-settings-row__message--success {
  @apply text-success;
}

.oppb-settings-row__message--error {
  @apply text-danger;
}

/* Switch */
.oppb-switch {
  @apply w-11 h-6 bg-border rounded-full relative cursor-pointer transition-colors;
  @apply data-[state=checked]:bg-primary;
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50;
}

.oppb-switch__thumb {
  @apply block w-5 h-5 bg-white rounded-full shadow-sm transition-transform;
  @apply translate-x-0.5 data-[state=checked]:translate-x-[22px];
}

/* Button */
.oppb-button {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md font-medium text-sm;
  @apply transition-colors cursor-pointer;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
}

.oppb-button--primary {
  @apply bg-primary text-white;
  @apply hover:bg-primary/90;
}

.oppb-button--secondary {
  @apply bg-surface-secondary text-text border border-border;
  @apply hover:bg-surface-secondary/80;
}

.oppb-button--ghost {
  @apply text-text-muted;
  @apply hover:text-text hover:bg-surface-secondary;
}

/* Input */
.oppb-input {
  @apply px-3 py-2 rounded-md border border-border bg-surface text-text;
  @apply placeholder:text-text-muted;
  @apply focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
}

.oppb-input--wide {
  @apply w-64;
}

/* Input group */
.oppb-settings-input-group {
  @apply flex items-center gap-2;
}

/* Select trigger */
.oppb-select-trigger {
  @apply inline-flex items-center justify-between gap-2 px-3 py-2 rounded-md border border-border;
  @apply bg-surface text-text cursor-pointer;
  @apply hover:border-primary/50;
  @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
  @apply data-[placeholder]:text-text-muted;
}

.oppb-select-trigger--wide {
  @apply min-w-[200px];
}

/* Select content */
.oppb-select-content {
  @apply bg-surface rounded-md border border-border shadow-lg overflow-hidden z-50;
  @apply max-h-[300px] overflow-y-auto;
}

/* Select item */
.oppb-select-item {
  @apply relative flex flex-col px-3 py-2 cursor-pointer;
  @apply text-text text-sm;
  @apply hover:bg-surface-secondary;
  @apply focus:outline-none focus:bg-surface-secondary;
  @apply data-[highlighted]:bg-surface-secondary;
  @apply data-[disabled]:opacity-50 data-[disabled]:cursor-default;
}

.oppb-select-item__label {
  @apply font-medium;
}

.oppb-select-item__description {
  @apply text-xs text-text-muted;
}

.oppb-select-item__indicator {
  @apply absolute right-2 top-1/2 -translate-y-1/2 text-primary;
}

/* Status */
.oppb-settings-status {
  @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm;
}

.oppb-settings-status--success {
  @apply bg-success/10 text-success;
}

.oppb-settings-status--warning {
  @apply bg-warning/10 text-warning;
}

/* Footer */
.oppb-settings-footer {
  @apply mt-8 pt-6 border-t border-border;
}

.oppb-settings-footer__actions {
  @apply flex items-center justify-end gap-4;
}

.oppb-settings-footer__success {
  @apply inline-flex items-center gap-2 text-sm text-success;
}
