/**
 * Select3 Component Styles
 * ========================
 * 
 * Estilos customizáveis para os componentes Alpine.js select3
 * Versão: 2.1
 * Data: Fevereiro 2026
 */

/**
 * Variáveis CSS Customizáveis
 * ----------------------------
 * 
 * Sobrescreva estas variáveis no seu CSS para personalizar as cores:
 * 
 * Exemplo:
 * :root {
 *   --select3-primary: #009DA0;
 *   --select3-primary-hover: #007A7C;
 * }
 */

:root {
  /* Cores Primárias */
  --select3-primary: var(--color-primary, #3b82f6);
  --select3-primary-hover: var(--color-primary-hover, #2563eb);
  --select3-primary-light: color-mix(in oklab, var(--select3-primary) 20%, transparent);
  
  /* Bordas */
  --select3-border: #d1d5db;
  --select3-border-hover: #9ca3af;
  --select3-border-focus: var(--select3-primary);
  
  /* Backgrounds */
  --select3-bg: #ffffff;
  --select3-bg-hover: #f9fafb;
  --select3-bg-disabled: #f3f4f6;
  
  /* Texto */
  --select3-text: #111827;
  --select3-text-muted: #6b7280;
  --select3-placeholder: #9ca3af;
  
  /* Dropdown */
  --select3-dropdown-bg: #ffffff;
  --select3-dropdown-border: #e5e7eb;
  --select3-dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  
  /* Opções */
  --select3-option-hover: #f9fafb;
  --select3-option-selected-bg: var(--select3-primary);
  --select3-option-selected-text: #ffffff;
  
  /* Badge (Multi-select) */
  --select3-badge-default-bg: #6b7280;
  --select3-badge-default-text: #ffffff;
  
  /* Dimensões */
  --select3-height: 42px;
  --select3-dropdown-max-height: 240px;
  --select3-border-radius: 0.5rem;
  --select3-z-index: 9999;
}

/**
 * Utilities Tailwind Customizadas
 * --------------------------------
 * 
 * Cria classes que usam as variáveis CSS automaticamente
 * Compatível com Tailwind e funciona sem configuração adicional
 */

/* Background Colors */
.bg-brand-primary {
  background-color: var(--select3-primary) !important;
}

.bg-brand-primary\/10 {
  background-color: color-mix(in oklab, var(--select3-primary) 10%, transparent) !important;
}

.hover\:bg-brand-primary:hover {
  background-color: var(--select3-primary-hover) !important;
}

/* Text Colors */
.text-brand-primary {
  color: var(--select3-primary) !important;
}

.hover\:text-brand-primary:hover {
  color: var(--select3-primary-hover) !important;
}

.hover\:text-brand-primary\/80:hover {
  color: color-mix(in oklab, var(--select3-primary) 80%, transparent) !important;
}

/* Border Colors */
.border-brand-primary {
  border-color: var(--select3-primary) !important;
}

.focus-within\:border-brand-primary:focus-within {
  border-color: var(--select3-primary) !important;
}

.focus\:border-brand-primary:focus {
  border-color: var(--select3-primary) !important;
}

/* Ring Colors */
.ring-brand-primary {
  --tw-ring-color: var(--select3-primary) !important;
}

.ring-brand-primary\/20 {
  --tw-ring-color: color-mix(in oklab, var(--select3-primary) 20%, transparent) !important;
}

.focus-within\:ring-brand-primary:focus-within {
  --tw-ring-color: var(--select3-primary) !important;
}

.focus-within\:ring-brand-primary\/20:focus-within {
  --tw-ring-color: color-mix(in oklab, var(--select3-primary) 20%, transparent) !important;
}

.focus\:ring-brand-primary:focus {
  --tw-ring-color: var(--select3-primary) !important;
}

.focus\:ring-brand-primary\/20:focus {
  --tw-ring-color: color-mix(in oklab, var(--select3-primary) 20%, transparent) !important;
}

/**
 * Classe auxiliar para aplicar cores primárias
 * ---------------------------------------------
 * 
 * Use estas classes nos templates se quiser override inline
 */

.select3-primary-border {
  border-color: var(--select3-border-focus) !important;
}

.select3-primary-ring {
  --tw-ring-color: var(--select3-primary-light) !important;
}

.select3-primary-bg {
  background-color: var(--select3-primary) !important;
}

.select3-primary-text {
  color: var(--select3-primary) !important;
}

/**
 * Estilos Opcionais para Temas
 * -----------------------------
 * 
 * Descomente ou customize conforme necessário
 */

/* Tema Escuro (Dark Mode) */
@media (prefers-color-scheme: dark) {
  :root {
    --select3-border: #4b5563;
    --select3-border-hover: #6b7280;
    --select3-bg: #1f2937;
    --select3-bg-hover: #374151;
    --select3-bg-disabled: #111827;
    --select3-text: #f9fafb;
    --select3-text-muted: #d1d5db;
    --select3-placeholder: #9ca3af;
    --select3-dropdown-bg: #1f2937;
    --select3-dropdown-border: #374151;
    --select3-option-hover: #374151;
  }
}

/* Tema por Organização (exemplo) */
[data-domain="minhaagendavirtual.com.br"] {
  --select3-primary: #009da0;
  --select3-primary-hover: #007a7c;
}

[data-domain="eagenda.com.br"] {
  --select3-primary: #001f54;
  --select3-primary-hover: #001439;
}

/**
 * Utilities para facilitar customização
 * --------------------------------------
 */

/* Forçar cores específicas por contexto */
.select3-theme-dashboard {
  --select3-primary: var(--color-primary, #001f54);
}

.select3-theme-client {
  --select3-primary: var(--color-primary, #009da0);
}

.select3-theme-landpage {
  --select3-primary: var(--color-primary, #fe6a4a);
}

/**
 * Ajustes de acessibilidade
 * --------------------------
 */

/* Melhor contraste para WCAG AA */
.select3-high-contrast {
  --select3-border: #000000;
  --select3-text: #000000;
  --select3-primary: #0056b3;
}

/* Reduzir animações (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  .combobox-wrapper * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}