/* ============================================================================
   floating-label.css — Floating Label "outlined" (estilo Flowbite floating_outlined)
   ----------------------------------------------------------------------------
   Componente AUTOSSUFICIENTE: NÃO depende do Tailwind JIT/CDN gerar as variantes
   peer-* (que falham quando o HTML é injetado via Ajax/prismpage). Basta
   referenciar este CSS na página e usar a marcação abaixo.

   USO (em qualquer página — só precisa deste CSS + a JS da máscara):

     <div class="floating-field">
       <input type="text" id="valor" class="floating-input" placeholder=" " data-currency>
       <label for="valor" class="floating-label">Valor (Moeda)</label>
     </div>

   Regras:
   - O <input> PRECISA do atributo placeholder=" " (um espaço) — é o que dispara
     o estado "vazio" (:placeholder-shown) que centraliza o label.
   - O <label> deve vir LOGO APÓS o <input> (irmão imediato), com o mesmo for/id.
   - Tema claro/escuro automático via variáveis de variables.css.
   ============================================================================ */

.floating-field {
  position: relative;
}

/* ---- Input ---------------------------------------------------------------- */
.floating-input {
  display: block;
  width: 100%;
  padding: 1rem 0.625rem 0.5rem 0.625rem;   /* pt-4 / pb-2 / px-2.5 */
  font-size: 0.875rem;                        /* text-sm */
  line-height: 1.25rem;
  color: var(--text-primary, #0f172a);
  background-color: transparent;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 0.5rem;                      /* rounded-lg */
  appearance: none;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.floating-input::placeholder {
  color: transparent;   /* placeholder=" " fica invisível; quem aparece é o label */
}

.floating-input:focus {
  border-color: var(--color-primary-600, #0066cc);
  box-shadow: 0 0 0 1px var(--color-primary-600, #0066cc);   /* anel sutil sem deslocar layout */
}

/* ---- Icon dentro do floating-input (lado esquerdo) ----------------------- */
/* Mesma lupa do input-native: empurra o texto e o label para dar respiro.    */
.floating-field:has(.input-native-icon) .floating-input {
  padding-left: 2.25rem;
}

.floating-field:has(.input-native-icon) .floating-label {
  left: 1.75rem;
}

/* ---- Label ---------------------------------------------------------------- */
.floating-label {
  position: absolute;
  top: 50%;
  left: 0.5rem;                               /* alinha com o padding do input */
  transform: translateY(-50%);                /* ESTADO REPOUSO: centralizado vertical */
  transform-origin: 0 center;
  z-index: 10;
  margin: 0;
  padding: 0 0.5rem;
  font-size: 0.875rem;                         /* mesmo tamanho do texto digitado */
  line-height: 1;
  color: var(--text-muted, #6b7280);
  /* Precisa de fundo para "cortar" a borda do input atras do texto (efeito
     notch do Flowbite floating_outlined). var(--card-bg) sozinho quebra em
     temas com --card-bg translucido (glassmorphism, ex.: ZEUS): o dialog ja
     pinta essa cor translucida por tras do label, e pintar de novo por cima
     compoe duas vezes, deixando o retangulo do label visivelmente mais opaco
     que o resto do card. Empilhar a MESMA cor em varias camadas de
     background (abaixo) resolve os dois casos com uma unica regra: em tema
     opaco (--card-bg com alpha 1) empilhar nao muda nada; em tema translucido
     a pilha se auto-satura perto de alpha 1, entao o label fica um pouco mais
     solido que o vidro ao redor (leve, aceitavel) em vez de um retangulo
     visivelmente "dobrado" como antes. */
  background-color: var(--card-bg, #ffffff);
  background-image:
    linear-gradient(var(--card-bg, #ffffff), var(--card-bg, #ffffff)),
    linear-gradient(var(--card-bg, #ffffff), var(--card-bg, #ffffff)),
    linear-gradient(var(--card-bg, #ffffff), var(--card-bg, #ffffff));
  pointer-events: none;
  white-space: nowrap;
  transition: transform .2s ease, color .2s ease, top .2s ease;
}

/* ---- ESTADO FLUTUANTE: focado OU preenchido ------------------------------- */
.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
  top: 0;
  transform: translateY(-50%) scale(0.85);     /* sobe e encosta na borda superior */
}

.floating-input:focus ~ .floating-label {
  color: var(--color-primary-600, #0066cc);
}

.dark .floating-input:focus ~ .floating-label {
  color: var(--color-primary-400, #1a8cff);
}

/* date/datetime-local/time sempre flutuam — browser nunca mostra placeholder */
.floating-input[type="date"] ~ .floating-label,
.floating-input[type="datetime-local"] ~ .floating-label,
.floating-input[type="time"] ~ .floating-label {
  top: 0;
  transform: translateY(-50%) scale(0.85);
}

/* textarea sempre flutua — campo alto, nao faz sentido centralizar o label */
textarea.floating-input ~ .floating-label {
  top: 0;
  transform: translateY(-50%) scale(0.85);
}

/* Fix: select nativo em dark mode (dropdown options precisam de bg explicito) */
.dark select.floating-input {
  background-color: var(--bg-surface, #1e293b);
  color: var(--text-primary, #f1f5f9);
}

.dark select.floating-input option {
  background-color: var(--bg-surface, #1e293b);
  color: var(--text-primary, #f1f5f9);
}

/* Fix: time input em dark mode (browser picker usa fundo branco por padrao) */
.dark input[type="time"].floating-input {
  color-scheme: dark;
}