/* ══════════════════════════════════════════════════════════════
   FORMS v17 — camada AUTORITÁRIA de formulários (carrega por último)
   ════════════════════════════════════════════════════════════════
   Objetivo: acabar DEFINITIVAMENTE com "texto branco em fundo branco".
   Não depende de variáveis de tema (que podem mudar a cor do texto);
   fixa cor escura sobre fundo claro em TODOS os campos, em qualquer
   tema/contexto, com alta especificidade e !important.

   Bónus: melhorias mobile (font 16px evita zoom no iOS, alvos de
   toque ≥44px, espaçamento confortável) e foco profissional.

   Exceções (texto claro intencional): .topbar-search-input.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. TEXTO SEMPRE LEGÍVEL em todos os campos ─────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.topbar-search-input),
select,
textarea,
.field-input,
.form-input,
.form-select,
.form-textarea {
  color: #243b53 !important;
  -webkit-text-fill-color: #243b53 !important;   /* iOS Safari */
  background-color: #ffffff !important;
  caret-color: #15569e !important;
  opacity: 1 !important;
}

/* Texto das opções dos <select> (dropdown nativo) */
select option,
select optgroup {
  color: #243b53 !important;
  background-color: #ffffff !important;
}

/* Placeholder sempre visível (cinza-azulado), nunca branco */
input::placeholder,
textarea::placeholder,
.field-input::placeholder,
.form-input::placeholder {
  color: #6b8aa3 !important;
  -webkit-text-fill-color: #6b8aa3 !important;
  opacity: 1 !important;
}

/* Autofill (Chrome/Safari pintam fundo amarelo + texto claro) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #243b53 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  caret-color: #15569e !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Disabled / readonly: cinza, mas SEMPRE legível */
input:disabled, textarea:disabled, select:disabled,
input:read-only, textarea:read-only {
  color: #56708a !important;
  -webkit-text-fill-color: #56708a !important;
  background-color: #eef3f9 !important;
  cursor: not-allowed;
}

/* ── 2. EXCEÇÃO: pesquisa na barra superior (fundo escuro) ──────── */
.topbar-search-input {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: rgba(255,255,255,.10) !important;
}
.topbar-search-input::placeholder {
  color: rgba(255,255,255,.6) !important;
  -webkit-text-fill-color: rgba(255,255,255,.6) !important;
}

/* ── 3. FORÇA também em modo escuro do SO (telemóveis) ──────────── */
@media (prefers-color-scheme: dark) {
  input:not(.topbar-search-input):not([type="checkbox"]):not([type="radio"]),
  select, textarea, .field-input, .form-input, .form-select, .form-textarea {
    color: #243b53 !important;
    -webkit-text-fill-color: #243b53 !important;
    background-color: #ffffff !important;
  }
}

/* ── 4. FOCO profissional + consistente ─────────────────────────── */
input:not(.topbar-search-input):focus,
select:focus, textarea:focus,
.field-input:focus, .form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: #15569e !important;
  box-shadow: 0 0 0 3px rgba(21,86,158,.18) !important;
  background-color: #ffffff !important;
}

/* ── 5. MOBILE — legibilidade e toque ───────────────────────────── */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not(.topbar-search-input),
  select, textarea,
  .field-input, .form-input, .form-select, .form-textarea {
    font-size: 16px !important;     /* impede o zoom automático do iOS */
    min-height: 44px;               /* alvo de toque acessível (WCAG) */
    padding: 11px 13px !important;
    border-radius: 11px !important;
  }
  textarea { min-height: 88px; }

  /* CRÍTICO: campos COM ícone à esquerda (login) precisam de espaço à
     esquerda — senão o ícone fica POR CIMA do texto. Especificidade alta
     (#login-screen) para vencer a regra de padding mobile acima. */
  #login-screen .field-wrap .field-input,
  #login-screen .field-wrap input,
  .field-wrap .field-input,
  .field-wrap input:not([type="checkbox"]):not([type="radio"]) {
    padding-left: 44px !important;
  }
  /* O ícone do campo fica alinhado e do tamanho certo */
  #login-screen .field-wrap .field-icon,
  .field-wrap .field-icon {
    left: 14px !important;
    width: 18px !important;
    height: 18px !important;
  }

  /* Botões com alvo de toque confortável */
  .btn, button:not(.icon-btn):not(.sidebar-toggle) {
    min-height: 44px;
  }

  /* Modais ocupam melhor o ecrã pequeno */
  .modal-box {
    width: 94vw !important;
    max-width: 94vw !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
  }
}