/* ============================================================
   Cruzz — readable form fields on the glass theme.

   theme-mel-glass.css fills inputs with a near-transparent white so they melt
   into whatever is behind them. That works over a plain surface and fails over
   the ambient gradient this app uses: the field stops looking like a field. So
   every screen that renders a form on glass loads this and gets an opaque well
   with a slate border, an inset shadow and a honey focus ring.

   Shared by the app (carteira_base, carteira_form_base) and the public
   calculators (calculadora_base), which is why it is its own file: the two
   chains have no other stylesheet in common, and a form has to look the same in
   both. Load it *after* theme-mel-glass.css and *before* the page stylesheet,
   so a page can still override it.
   ============================================================ */

[data-theme="glass"] .input,
[data-theme="glass"] .select,
[data-theme="glass"] .textarea {
  background-color: rgba(255, 255, 255, .82);
  border-color: color-mix(in srgb, var(--slate-400), transparent 55%);
  box-shadow: inset 0 1px 2px rgba(20, 28, 40, .08);
}
[data-theme="glass"] .input:hover,
[data-theme="glass"] .select:hover,
[data-theme="glass"] .textarea:hover {
  border-color: color-mix(in srgb, var(--slate-500), transparent 40%);
}
[data-theme="glass"] .input:focus,
[data-theme="glass"] .select:focus,
[data-theme="glass"] .textarea:focus {
  background-color: #fff;
  border-color: var(--honey-500);
}
[data-theme="glass"] .input::placeholder,
[data-theme="glass"] .textarea::placeholder { color: var(--slate-500); }
[data-theme="glass"] .input-group-text {
  background-color: rgba(255, 255, 255, .7);
  border-color: color-mix(in srgb, var(--slate-400), transparent 55%);
}