:root {
  --pawsby-azul-petroleo: #1E5B7A;
  --pawsby-azul-petroleo-escuro: #163f57;
  --pawsby-verde-saude: #2FBF71;
  --pawsby-laranja-recompensas: #FF9F1C;

  --bs-primary: var(--pawsby-azul-petroleo);
  --bs-primary-rgb: 30, 91, 122;
  --bs-success: var(--pawsby-verde-saude);
  --bs-success-rgb: 47, 191, 113;
  --bs-warning: var(--pawsby-laranja-recompensas);
  --bs-warning-rgb: 255, 159, 28;
  --bs-link-color: var(--pawsby-azul-petroleo);
  --bs-link-hover-color: var(--pawsby-azul-petroleo-escuro);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--pawsby-verde-saude);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---- Paleta Pawsby ---- */

.navbar-dark.bg-dark {
  background-color: var(--pawsby-azul-petroleo) !important;
}

.btn-primary {
  background-color: var(--pawsby-azul-petroleo);
  border-color: var(--pawsby-azul-petroleo);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--pawsby-azul-petroleo-escuro) !important;
  border-color: var(--pawsby-azul-petroleo-escuro) !important;
}

.btn-success {
  background-color: var(--pawsby-verde-saude);
  border-color: var(--pawsby-verde-saude);
}

.btn-warning {
  background-color: var(--pawsby-laranja-recompensas);
  border-color: var(--pawsby-laranja-recompensas);
  color: #212529;
}

.card-title,
h1, h2, h3 {
  color: var(--pawsby-azul-petroleo);
}

a {
  color: var(--pawsby-azul-petroleo);
}

a:hover {
  color: var(--pawsby-azul-petroleo-escuro);
}

.badge-pawsby-recompensa {
  background-color: var(--pawsby-laranja-recompensas);
  color: #212529;
}

.badge-pawsby-saude {
  background-color: var(--pawsby-verde-saude);
  color: #fff;
}

/* ---- Popups (modais Bootstrap): scroll interno, não a janela do navegador ----
   Aplica o mesmo comportamento de .modal-dialog-scrollable (header/footer fixos,
   só o modal-body rola) a QUALQUER modal do projeto, mesmo que a classe não tenha
   sido adicionada explicitamente no .cshtml -- reforço para não depender de
   lembrar de marcar cada modal novo. */
.modal-dialog {
  max-height: calc(100vh - 3.5rem);
  display: flex;
}

.modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-body {
  overflow-y: auto;
}

/* ---- Indicação de campo obrigatório ----
   Todo formulário do projeto é AJAX (botões type="button", sem submit nativo) --
   os atributos required existentes nos inputs nunca disparam o balão do
   navegador, então até agora não havia nenhuma pista visual de quais campos são
   obrigatórios antes de tentar salvar (o usuário só descobria pela mensagem de
   erro vinda do servidor). :has() detecta automaticamente qualquer label
   seguido de um campo required dentro do mesmo grupo, sem precisar marcar cada
   .cshtml manualmente -- cobre toda tela atual e futura que siga o padrão já
   usado no projeto (<label class="form-label">Texto</label> logo antes do
   input/select/textarea required). */
.form-label:has(+ input[required])::after,
.form-label:has(+ select[required])::after,
.form-label:has(+ textarea[required])::after {
  content: " *";
  color: var(--bs-danger, #dc3545);
}