/* Marca Paróquia Santa Genoveva sobre o Vikunja v2.7.
   Injetado pelo nginx "marca" (sub_filter); só CSS, sem mexer no DOM do Vue.
   Os brasões vêm do Postiz (social.santagenoveva.org.br/psg-brand). */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap");

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

/* Claro: vermelho #932016 = hsl(5 74% 33%) e cinzas puxados para o creme */
html:root {
  --primary-h: 5deg;
  --primary-s: 74%;
  --primary-l: 33%;
  --grey-50-hsl: 40, 40%, 98%;
  --grey-50: hsl(var(--grey-50-hsl));
  --grey-100-hsl: 40, 30%, 94%;
  --grey-100: hsl(var(--grey-100-hsl));
  --grey-200: hsl(38, 20%, 87%);
  --grey-300: hsl(35, 14%, 78%);
  --grey-400: hsl(30, 9%, 58%);
  --grey-500-hsl: 28, 9%, 42%;
  --grey-500: hsl(var(--grey-500-hsl));
  --grey-600: hsl(25, 11%, 31%);
  --grey-700: hsl(22, 14%, 22%);
  --grey-800: hsl(20, 17%, 14%);
  --grey-900-hsl: 18, 22%, 9%;
  --grey-900: hsl(var(--grey-900-hsl));
}
html:root:not(.dark) {
  --site-background: #f4f0e5;
}

/* Escuro: tons de café no lugar do azul-marinho; links dourados */
html:root.dark {
  --primary-h: 5deg;
  --primary-s: 62%;
  --primary-l: 50%;
  --switch-view-active-background: hsl(5deg, 74%, 38%);
  --grey-900-hsl: 40, 33%, 96%;
  --grey-900: hsl(var(--grey-900-hsl));
  --grey-800: hsl(38, 25%, 91%);
  --grey-700: hsl(35, 16%, 83%);
  --grey-600: hsl(32, 11%, 73%);
  --grey-500-hsl: 28, 8%, 60%;
  --grey-500: hsl(var(--grey-500-hsl));
  --grey-400: hsl(24, 7%, 44%);
  --grey-300: hsl(20, 9%, 30%);
  --grey-200: hsl(18, 12%, 21%);
  --grey-100-hsl: 15, 16%, 13%;
  --grey-100: hsl(var(--grey-100-hsl));
  --grey-50-hsl: 12, 20%, 9%;
  --grey-50: hsl(var(--grey-50-hsl));
  --link: #d5c39a;
  --link-hover: #e8dcbc;
}

/* ---------- Login ---------- */

.no-auth-wrapper {
  background-image: none !important;
  justify-content: center;
  padding-block: 2rem !important;
}
.noauth-container {
  max-inline-size: 960px !important;
  min-block-size: 560px !important;
  border-radius: 20px !important;
  border: 1px solid hsla(40, 40%, 60%, 0.25);
  box-shadow: 0 30px 80px rgba(46, 10, 7, 0.22) !important;
}

/* Painel da paróquia */
.noauth-container .image {
  align-items: center;
  padding: 2.5rem !important;
  background:
    url(https://social.santagenoveva.org.br/psg-brand/brasao.svg) center 120px / 123px 128px no-repeat,
    radial-gradient(ellipse 65% 45% at 50% 34%, rgba(178, 145, 72, 0.22), transparent 70%),
    linear-gradient(160deg, #6e1810 0%, #5b140e 45%, #2e0a07 100%) !important;
}
.noauth-container .image::before {
  display: none !important;
}
.noauth-container .image::after {
  content: "Gestão Pascom";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 276px;
  padding-block-end: 20px;
  text-align: center;
  font: 600 36px/1.2 Cinzel, Georgia, serif;
  letter-spacing: 0.02em;
  color: #f4f0e5;
  background: linear-gradient(90deg, transparent, #b29148, transparent) center bottom / 140px 1px no-repeat;
}
/* "Bem-vindo de volta!" vira o nome da paróquia, logo abaixo do título */
.noauth-container .image-title {
  position: absolute !important;
  inset-inline: 0;
  inset-block-start: 352px;
  margin: 0 !important;
  font-size: 0 !important;
  text-align: center;
}
.noauth-container .image-title::before {
  content: "Paróquia Santa Genoveva";
  font: 600 13px/1.4 Cinzel, Georgia, serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d5c39a;
}

/* Formulário */
.noauth-container .content {
  padding: 3rem !important;
}
.noauth-container .title {
  font-family: Cinzel, Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 2rem !important;
  letter-spacing: 0.01em;
}
.noauth-container .api-config {
  font-size: 0.8rem;
  opacity: 0.7;
}
.noauth-container .input {
  block-size: 2.75rem;
  border-radius: 10px;
}
/* preenchimento automático do navegador sem o fundo azul */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--input-background-color) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
}
.noauth-container .input:focus {
  border-color: #b29148 !important;
  box-shadow: 0 0 0 3px rgba(178, 145, 72, 0.22) !important;
}
.noauth-container .button.is-primary {
  inline-size: 100%;
  block-size: 2.875rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.noauth-container .reset-password-link,
.noauth-container .inline-link {
  text-underline-offset: 3px;
}

@media screen and (max-width: 768px) {
  .noauth-container .content {
    padding: 2rem 1.5rem !important;
  }
}

/* Com o painel visível, o logo de cima repete a marca */
@media screen and (min-width: 769px) {
  .no-auth-wrapper > .logo {
    display: none;
  }
}

/* ---------- Outras telas ---------- */

/* Carregamento: brasão no lugar da lhama */
.vikunja-loading > svg.logo {
  display: none !important;
}
.vikunja-loading::before {
  content: "";
  inline-size: 100px;
  block-size: 104px;
  margin-block-end: 1rem;
  background: url(https://social.santagenoveva.org.br/psg-brand/brasao.svg) center / contain no-repeat;
}

/* "Nada para fazer": some a lhama */
svg.llama-cool {
  display: none !important;
}