/* ============================================================================
   floating-label-standard.css — Campo "standard" (underline + label acima)
   ----------------------------------------------------------------------------
   Visual identico ao disabled_standard do Flowbite: label pequeno uppercase
   fixo acima de um input com apenas border-bottom. Ideal para totalizadores
   readonly onde o Delphi define o valor.

   USO:
     <div class="standard-field">
       <label for="campo" class="standard-label">Label</label>
       <input type="text" id="campo" class="standard-input" value="R$ 0,00" readonly>
     </div>

   Modificadores:
     .standard-input--md       width: 6rem
     .standard-input--lg       width: 7rem  +  font-size: 1rem
     .standard-input--danger   cor vermelha (Desconto)
     .standard-input--success  cor verde    (Total NF)
     .standard-label--brand    cor primária (label de destaque)
     .standard-field--sep      borda esquerda separadora
   ============================================================================ */

/* ---- Wrapper -------------------------------------------------------------- */
.standard-field {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Label ---------------------------------------------------------------- */
.standard-label {
  font-size: 0.625rem;           /* ~10px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
  margin-bottom: 0.125rem;       /* mb-0.5 */
  white-space: nowrap;
}

/* ---- Input ---------------------------------------------------------------- */
.standard-input {
  display: block;
  width: 5rem;                   /* w-20 — tamanho padrão */
  padding: 0.25rem 0;            /* py-1 px-0 */
  font-size: 0.875rem;           /* text-sm */
  font-weight: 600;
  text-align: center;
  color: var(--text-primary, #0f172a);
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--border-color, #d1d5db);
  appearance: none;
  outline: none;
  cursor: default;
}

/* ---- Modificadores de largura / tamanho ---------------------------------- */
.standard-input--md { width: 6rem; }
.standard-input--lg { width: 7rem; font-size: 1rem; }

/* ---- Modificadores de cor ------------------------------------------------ */
.standard-input--danger  { color: #dc2626; }
.standard-input--success { color: #16a34a; }
.standard-label--brand   { color: var(--color-primary-600, #0066cc); }

/* ---- Separador lateral --------------------------------------------------- */
.standard-field--sep {
  padding-left: 1rem;
  border-left: 1px solid var(--border-color, #d1d5db);
}

/* ---- Dark mode ----------------------------------------------------------- */
.dark .standard-input {
  color: var(--text-primary-dark, #f1f5f9);
  border-bottom-color: var(--border-color-dark, #4b5563);
}

.dark .standard-label {
  color: var(--text-muted-dark, #9ca3af);
}

.dark .standard-input--danger  { color: #f87171; }
.dark .standard-input--success { color: #4ade80; }
.dark .standard-label--brand   { color: var(--color-primary-400, #1a8cff); }

.dark .standard-field--sep {
  border-left-color: var(--border-color-dark, #4b5563);
}