/* File: assets/css/components/sfv-form.css */
/* =========================================================
   SFV » Form
   Responsabilidade:
   - estrutura de formulário
   - labels
   - inputs
   - estados de focus/autofill
   - mensagens de erro
   - consome apenas TOKENS CONTEXTUAIS de form/input
   ========================================================= */

/* ===== Login / estrutura ===== */
#sfv-prestador-app .sfv-login,
#sfv-area-prestador .sfv-login,
#sfv-area-cliente .sfv-login,
.sfv-scope .sfv-login{
  display: grid;
  gap: var(--sfv-space-3, 14px);
}

#sfv-prestador-app .sfv-field,
#sfv-area-prestador .sfv-field,
#sfv-area-cliente .sfv-field,
.sfv-scope .sfv-field{
  display: grid;
  gap: 6px;
}

#sfv-prestador-app .sfv-label,
#sfv-area-prestador .sfv-label,
#sfv-area-cliente .sfv-label,
.sfv-scope .sfv-label{
  font-size: .95rem;
  color: var(--sfv-input-label);
}

/* ===== Inputs ===== */
#sfv-prestador-app .sfv-input,
#sfv-prestador-app input.sfv-input,
#sfv-area-prestador .sfv-input,
#sfv-area-prestador input.sfv-input,
#sfv-area-cliente .sfv-input,
#sfv-area-cliente input.sfv-input,
.sfv-scope .sfv-input,
.sfv-scope input.sfv-input{
  width: 100%;
  border: 1px solid var(--sfv-input-border) !important;
  background: var(--sfv-input-bg) !important;
  background-color: var(--sfv-input-bg) !important;
  color: var(--sfv-input-fg) !important;
  -webkit-text-fill-color: var(--sfv-input-fg) !important;
  border-radius: 12px;
  padding: .72rem .9rem;
  outline: none;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    color .2s ease;
  caret-color: var(--sfv-input-fg);
  appearance: none;
  -webkit-appearance: none;
}

#sfv-prestador-app .sfv-input::placeholder,
#sfv-area-prestador .sfv-input::placeholder,
#sfv-area-cliente .sfv-input::placeholder,
.sfv-scope .sfv-input::placeholder{
  color: color-mix(in srgb, var(--sfv-input-fg) 42%, var(--sfv-input-bg)) !important;
  opacity: 1 !important;
}

#sfv-prestador-app .sfv-input::-webkit-input-placeholder,
#sfv-area-prestador .sfv-input::-webkit-input-placeholder,
#sfv-area-cliente .sfv-input::-webkit-input-placeholder,
.sfv-scope .sfv-input::-webkit-input-placeholder{
  color: color-mix(in srgb, var(--sfv-input-fg) 42%, var(--sfv-input-bg)) !important;
  opacity: 1 !important;
}

#sfv-prestador-app .sfv-input::-moz-placeholder,
#sfv-area-prestador .sfv-input::-moz-placeholder,
#sfv-area-cliente .sfv-input::-moz-placeholder,
.sfv-scope .sfv-input::-moz-placeholder{
  color: color-mix(in srgb, var(--sfv-input-fg) 42%, var(--sfv-input-bg)) !important;
  opacity: 1 !important;
}

#sfv-prestador-app .sfv-input:-ms-input-placeholder,
#sfv-area-prestador .sfv-input:-ms-input-placeholder,
#sfv-area-cliente .sfv-input:-ms-input-placeholder,
.sfv-scope .sfv-input:-ms-input-placeholder{
  color: color-mix(in srgb, var(--sfv-input-fg) 42%, var(--sfv-input-bg)) !important;
  opacity: 1 !important;
}

#sfv-prestador-app .sfv-input::-ms-input-placeholder,
#sfv-area-prestador .sfv-input::-ms-input-placeholder,
#sfv-area-cliente .sfv-input::-ms-input-placeholder,
.sfv-scope .sfv-input::-ms-input-placeholder{
  color: color-mix(in srgb, var(--sfv-input-fg) 42%, var(--sfv-input-bg)) !important;
  opacity: 1 !important;
}

#sfv-prestador-app .sfv-input:focus,
#sfv-area-prestador .sfv-input:focus,
#sfv-area-cliente .sfv-input:focus,
.sfv-scope .sfv-input:focus{
  background: var(--sfv-input-bg) !important;
  background-color: var(--sfv-input-bg) !important;
  color: var(--sfv-input-fg) !important;
  -webkit-text-fill-color: var(--sfv-input-fg) !important;
  border-color: var(--sfv-input-focus-border) !important;
  box-shadow: 0 0 0 4px var(--sfv-input-focus-ring) !important;
}

/* ===== Blindagem forte contra autofill WebKit ===== */
#sfv-prestador-app .sfv-input:-webkit-autofill,
#sfv-prestador-app .sfv-input:-webkit-autofill:hover,
#sfv-prestador-app .sfv-input:-webkit-autofill:focus,
#sfv-prestador-app input.sfv-input:-webkit-autofill,
#sfv-prestador-app input.sfv-input:-webkit-autofill:hover,
#sfv-prestador-app input.sfv-input:-webkit-autofill:focus,
#sfv-area-prestador .sfv-input:-webkit-autofill,
#sfv-area-prestador .sfv-input:-webkit-autofill:hover,
#sfv-area-prestador .sfv-input:-webkit-autofill:focus,
#sfv-area-prestador input.sfv-input:-webkit-autofill,
#sfv-area-prestador input.sfv-input:-webkit-autofill:hover,
#sfv-area-prestador input.sfv-input:-webkit-autofill:focus,
#sfv-area-cliente .sfv-input:-webkit-autofill,
#sfv-area-cliente .sfv-input:-webkit-autofill:hover,
#sfv-area-cliente .sfv-input:-webkit-autofill:focus,
#sfv-area-cliente input.sfv-input:-webkit-autofill,
#sfv-area-cliente input.sfv-input:-webkit-autofill:hover,
#sfv-area-cliente input.sfv-input:-webkit-autofill:focus,
.sfv-scope .sfv-input:-webkit-autofill,
.sfv-scope .sfv-input:-webkit-autofill:hover,
.sfv-scope .sfv-input:-webkit-autofill:focus,
.sfv-scope input.sfv-input:-webkit-autofill,
.sfv-scope input.sfv-input:-webkit-autofill:hover,
.sfv-scope input.sfv-input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--sfv-input-fg) !important;
  caret-color: var(--sfv-input-fg) !important;
  border-color: var(--sfv-input-border) !important;
  -webkit-box-shadow:
    0 0 0 1000px var(--sfv-input-bg) inset !important;
  box-shadow:
    0 0 0 1000px var(--sfv-input-bg) inset !important;
  background: var(--sfv-input-bg) !important;
  background-color: var(--sfv-input-bg) !important;
  transition:
    background-color 99999s ease-in-out 0s,
    color 99999s ease-in-out 0s !important;
}

/* quando autofill estiver focado, mantém nosso ring/estado visual */
#sfv-prestador-app .sfv-input:-webkit-autofill:focus,
#sfv-prestador-app input.sfv-input:-webkit-autofill:focus,
#sfv-area-prestador .sfv-input:-webkit-autofill:focus,
#sfv-area-prestador input.sfv-input:-webkit-autofill:focus,
#sfv-area-cliente .sfv-input:-webkit-autofill:focus,
#sfv-area-cliente input.sfv-input:-webkit-autofill:focus,
.sfv-scope .sfv-input:-webkit-autofill:focus,
.sfv-scope input.sfv-input:-webkit-autofill:focus{
  border-color: var(--sfv-input-focus-border) !important;
  -webkit-box-shadow:
    0 0 0 1000px var(--sfv-input-bg) inset,
    0 0 0 4px var(--sfv-input-focus-ring) !important;
  box-shadow:
    0 0 0 1000px var(--sfv-input-bg) inset,
    0 0 0 4px var(--sfv-input-focus-ring) !important;
}

/* reforço para texto digitado/valor presente */
#sfv-prestador-app .sfv-input:not(:placeholder-shown),
#sfv-prestador-app input.sfv-input:not(:placeholder-shown),
#sfv-area-prestador .sfv-input:not(:placeholder-shown),
#sfv-area-prestador input.sfv-input:not(:placeholder-shown),
#sfv-area-cliente .sfv-input:not(:placeholder-shown),
#sfv-area-cliente input.sfv-input:not(:placeholder-shown),
.sfv-scope .sfv-input:not(:placeholder-shown),
.sfv-scope input.sfv-input:not(:placeholder-shown){
  color: var(--sfv-input-fg) !important;
  -webkit-text-fill-color: var(--sfv-input-fg) !important;
}

/* ===== Erros ===== */
#sfv-prestador-app .sfv-erro,
#sfv-area-prestador .sfv-erro,
#sfv-area-cliente .sfv-erro,
.sfv-scope .sfv-erro{
  border: 1px solid var(--sfv-form-error-border);
  background: var(--sfv-form-error-bg);
  color: var(--sfv-form-error-fg);
  padding: .625rem .75rem;
  border-radius: 10px;
}

#sfv-prestador-app .sfv-erro:empty,
#sfv-area-prestador .sfv-erro:empty,
#sfv-area-cliente .sfv-erro:empty,
.sfv-scope .sfv-erro:empty{
  display: none;
}