/*
 * Tema EGS para o Forgejo — login, repositórios, issues, definições, admin.
 * Destino: /var/snap/forgejo/common/public/assets/css/custom.css
 * Carregado em todas as páginas pelo templates/custom/header.tmpl.
 *
 * COMO FUNCIONA
 * Duas partes:
 *   1. Tema global — redefine a rampa da cor primária, o acento e a tipografia.
 *      Aplica-se a tudo: repositórios, issues, definições, admin.
 *   2. Páginas de autenticação — redesenho completo do login e do resto do
 *      fluxo, ao estilo da home (fundo azul-marinho, logo, cartão branco).
 *
 * Nenhuma das duas toca em marcação, por isso isto sobrevive às atualizações do
 * Forgejo. Em particular, o formulário de login NÃO é substituído: continua a
 * ser o do Forgejo, com o token CSRF, os nomes dos campos e os caminhos de 2FA
 * e OAuth intactos. Substituí-lo por um template nosso arriscava partir a
 * autenticação e obrigava a reconciliar o template a cada atualização.
 *
 * A rampa do Forgejo tem uma convenção que é preciso respeitar:
 *   - `dark-N`  = mais contraste contra o fundo
 *   - `light-N` = menos contraste, aproxima-se do fundo
 * No tema claro isso significa dark→preto e light→branco. No tema ESCURO
 * inverte-se: dark→branco e light→preto, e o `contrast` (a cor do texto sobre a
 * primária) passa de branco a escuro. Os blocos abaixo seguem essa inversão.
 *
 * `hover` e `active` são aliases do próprio Forgejo (dark-2 / dark-4 no claro,
 * light-1 / light-2 no escuro), por isso não precisam de ser redefinidos.
 *
 * O QUE NÃO PERTENCE AQUI
 * O estilo da página inicial. Isso vive no egs-home.css, carregado só pelo
 * home.tmpl e limitado a `.egs-home`. Note-se que o egs-home.css declara
 * `--color-primary` e `--color-accent` com os mesmos nomes que o Forgejo — está
 * preso a `.egs-home` precisamente para os dois sistemas não colidirem.
 */

/* ------------------------------------------------------------------ fontes */
/* Os ficheiros são os que já vão no dist/ para assets/egs-home/. O caminho é
   relativo a este ficheiro (assets/css/ → assets/egs-home/). */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../egs-home/egs-home-montserrat-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../egs-home/egs-home-montserrat-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../egs-home/egs-home-montserrat-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../egs-home/egs-home-montserrat-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../egs-home/egs-home-montserrat-latin-800-normal.woff2") format("woff2");
}

/* --------------------------------------------------------------- tema claro */
:root {
  --fonts-proportional: "Montserrat", -apple-system, "Segoe UI", system-ui, "Noto Sans", Roboto, "Helvetica Neue", Arial;

  /* Azul da marca (#0B1E78) como primária. */
  --color-primary: #0b1e78;
  --color-primary-contrast: #ffffff;

  /* dark-N: para o escuro — os azuis-marinho da paleta. */
  --color-primary-dark-1: #0b1e78;
  --color-primary-dark-2: #00144e;
  --color-primary-dark-3: #00144e;
  --color-primary-dark-4: #001142;
  --color-primary-dark-5: #001142;
  --color-primary-dark-6: #001142;
  --color-primary-dark-7: #001142;

  /* light-N: para o claro — light-1 é o #033B82 da paleta, o resto é a mesma
     matiz a subir em luminosidade (fundos e bordas suaves). */
  --color-primary-light-1: #033b82;
  --color-primary-light-2: #1435d2;
  --color-primary-light-3: #3b5aed;
  --color-primary-light-4: #7389f2;
  --color-primary-light-5: #abb8f7;
  --color-primary-light-6: #d5dcfb;
  --color-primary-light-7: #eceffd;

  --color-primary-alpha-10: #0b1e7819;
  --color-primary-alpha-20: #0b1e7833;
  --color-primary-alpha-30: #0b1e784b;
  --color-primary-alpha-40: #0b1e7866;
  --color-primary-alpha-50: #0b1e7880;
  --color-primary-alpha-60: #0b1e7899;
  --color-primary-alpha-70: #0b1e78b3;
  --color-primary-alpha-80: #0b1e78cc;
  --color-primary-alpha-90: #0b1e78e1;

  --color-accent: #033b82;

  /* Cinzento da paleta na barra de navegação. */
  --color-nav-bg: #f1f1f1;
}

/* -------------------------------------------------------------- tema escuro */
/*
 * Dois seletores, para cobrir as três situações:
 *   - `forgejo-auto` (predefinido): segue o sistema operativo → media query.
 *     O `:not([data-theme*="light"])` evita aplicar-se a quem forçou o claro.
 *   - `forgejo-dark` e variantes: escolha explícita → seletor de atributo.
 * O `*=` apanha também as variantes (forgejo-dark-tritanopia, gitea-dark, ...).
 *
 * Sobre o azul: #60a5fa é o mesmo tom que a home e o egs-statusfrontend usam
 * no escuro. O azul-marinho da marca é ilegível sobre fundo escuro, por isso a
 * primária clareia e o texto sobre ela passa a ser o azul-marinho.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme*="light"]) {
    --color-primary: #60a5fa;
    --color-primary-contrast: #001142;

    /* Invertido: dark-N clareia. */
    --color-primary-dark-1: #60a5fa;
    --color-primary-dark-2: #88bcfb;
    --color-primary-dark-3: #88bcfb;
    --color-primary-dark-4: #b0d2fd;
    --color-primary-dark-5: #b0d2fd;
    --color-primary-dark-6: #d3e6fd;
    --color-primary-dark-7: #d3e6fd;

    /* Invertido: light-N escurece, até ao azul-marinho da paleta. */
    --color-primary-light-1: #2f8af9;
    --color-primary-light-2: #076ce8;
    --color-primary-light-3: #0658bc;
    --color-primary-light-4: #04438f;
    --color-primary-light-5: #032e63;
    --color-primary-light-6: #001142;
    --color-primary-light-7: #001142;

    --color-primary-alpha-10: #60a5fa19;
    --color-primary-alpha-20: #60a5fa33;
    --color-primary-alpha-30: #60a5fa4b;
    --color-primary-alpha-40: #60a5fa66;
    --color-primary-alpha-50: #60a5fa80;
    --color-primary-alpha-60: #60a5fa99;
    --color-primary-alpha-70: #60a5fab3;
    --color-primary-alpha-80: #60a5facc;
    --color-primary-alpha-90: #60a5fae1;

    --color-accent: #60a5fa;
  }
}

:root[data-theme*="dark"] {
  --color-primary: #60a5fa;
  --color-primary-contrast: #001142;

  --color-primary-dark-1: #60a5fa;
  --color-primary-dark-2: #88bcfb;
  --color-primary-dark-3: #88bcfb;
  --color-primary-dark-4: #b0d2fd;
  --color-primary-dark-5: #b0d2fd;
  --color-primary-dark-6: #d3e6fd;
  --color-primary-dark-7: #d3e6fd;

  --color-primary-light-1: #2f8af9;
  --color-primary-light-2: #076ce8;
  --color-primary-light-3: #0658bc;
  --color-primary-light-4: #04438f;
  --color-primary-light-5: #032e63;
  --color-primary-light-6: #001142;
  --color-primary-light-7: #001142;

  --color-primary-alpha-10: #60a5fa19;
  --color-primary-alpha-20: #60a5fa33;
  --color-primary-alpha-30: #60a5fa4b;
  --color-primary-alpha-40: #60a5fa66;
  --color-primary-alpha-50: #60a5fa80;
  --color-primary-alpha-60: #60a5fa99;
  --color-primary-alpha-70: #60a5fab3;
  --color-primary-alpha-80: #60a5facc;
  --color-primary-alpha-90: #60a5fae1;

  --color-accent: #60a5fa;
}

/* ==========================================================================
   PÁGINAS DE AUTENTICAÇÃO — desenho EGS
   ==========================================================================
   Login, registo, recuperar/redefinir senha, ativação. Fundo com o gradiente
   azul-marinho da marca e os círculos da home, logo EGS por cima, e UM cartão
   branco que inclui o formulário e o rodapé com o "Esqueceu a sua senha?".

   COMO O CARTÃO É MONTADO
   O Forgejo põe o formulário e o bloco do "Esqueceu a sua senha?" em dois
   `.ui.container.fluid` irmãos. Com CSS não se movem nós, por isso o cartão é a
   própria `.column`: é ela que leva o fundo, o raio, o `overflow: hidden` e a
   sombra, e os dois blocos ficam lá dentro, achatados, separados por uma linha.
   Como a `.column` passou a ser o cartão, o logo teve de subir para o
   ::before da grelha — dentro da coluna ficaria dentro do cartão.

   A marcação varia entre estas páginas: no login o cartão está dentro de
   `.ui.container.fluid` e o título é um <h4>; no recuperar senha está dentro de
   `form.ui.form` e o título é um <h2>. Daí os seletores serem por classe do
   Fomantic e não por elemento.

   ATENÇÃO ao `:not(.segment)` nos seletores do cabeçalho: o bloco do rodapé tem
   as classes `ui attached segment header top`, que também casam com
   `.ui.top.attached.header`. Sem o `:not()`, o rodapé recebia o kicker e o
   tamanho de título.

   O cartão é forçado a branco nos dois temas, claro e escuro: sobre o
   azul-marinho a leitura é a mesma e o ecrã fica igual para todos. É também por
   isso que o botão e as ligações levam valores fixos em vez de seguirem a rampa
   da primária, que clareia no escuro.

   Se o Forgejo acrescentar uma página de autenticação com outra classe, ela
   fica com o aspeto normal do Forgejo — degrada, não quebra.
   ========================================================================== */

/* Sem barra de navegação: o ecrã de autenticação é dedicado. */
body:has(.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account)) #navbar { display: none !important; }
body:has(.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account)) .full.height { padding-bottom: 0 !important; }

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0 !important;
  padding: 3rem 1.5rem !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(102, 140, 255, 0.2), transparent 55%),
    linear-gradient(135deg, #001142 0%, #0b1e78 100%);
}

/* Os mesmos círculos decorativos do herói da home. */
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account)::before,
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account)::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account)::before { width: 640px; height: 640px; top: -230px; right: -190px; }
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account)::after { width: 480px; height: 480px; bottom: -170px; left: -150px; }

/* A grelha leva o logo e centra o cartão. */
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .ui.middle.very.relaxed.page.grid {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 !important;
  width: 100%;
}

/* Logo. O PNG é quadrado e tem uma margem transparente enorme, por isso é
   recortado pela caixa (mesma técnica do .egs-logo-mark da home) em vez de
   encaixado com `contain`, que o deixaria minúsculo. */
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .ui.middle.very.relaxed.page.grid::before {
  content: "";
  display: block;
  width: 156px;
  height: 80px;
  margin: 0 auto 1.6rem;
  background: url("../egs-home/egs-home-logoW.png") center no-repeat;
  background-size: auto 260px;
}

/* O cartão. O `padding: 0` é essencial: as colunas da grelha do Fomantic têm
   padding horizontal, que inseria os blocos 35px e deixava a linha divisória
   sem atravessar o cartão. */
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .column {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 24px 48px rgba(0, 17, 66, 0.38), 0 2px 6px rgba(0, 17, 66, 0.18);
}

/* Os blocos do Forgejo ficam achatados dentro do cartão. */
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .column > * {
  width: 100%;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Linha divisória, para os dois blocos lerem como um cartão só. */
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .column > * + * { border-top: 1px solid #eef2f7; }

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .ui.top.attached.header:not(.segment) {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  padding: 1.9rem 2rem 0.1rem !important;
  color: #001142 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: center;
}

/* Kicker acima do título, como as secções da home. */
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .ui.top.attached.header:not(.segment)::before {
  content: "EGS GIT";
  color: #0b1e78;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.75;
}

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .ui.attached.segment {
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  padding: 1.3rem 2rem 2rem !important;
  box-shadow: none !important;
  color: #475569 !important;
}

/* Campos */
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .field { margin-bottom: 1.1rem !important; }

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) label {
  color: #001142 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) input[type="text"],
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) input[type="email"],
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) input[type="password"] {
  border-radius: 10px !important;
  border: 1px solid #dde5f0 !important;
  background: #ffffff !important;
  color: #18181b !important;
  padding: 0.85rem 0.9rem !important;
  font-size: 0.95rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) input::placeholder { color: #94a3b8 !important; }

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) input[type="text"]:focus,
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) input[type="email"]:focus,
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) input[type="password"]:focus {
  border-color: #0b1e78 !important;
  box-shadow: 0 0 0 3px rgba(11, 30, 120, 0.13) !important;
}

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .ui.checkbox input[type="checkbox"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  accent-color: #0b1e78 !important;
}

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .ui.checkbox input[type="checkbox"]:checked {
  background: #0b1e78 !important;
  border-color: #0b1e78 !important;
}

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .ui.checkbox label {
  color: #64748b !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

/* Botão */
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .ui.primary.button {
  border-radius: 10px !important;
  padding: 0.95rem 1.2rem !important;
  font-size: 0.97rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  background: linear-gradient(135deg, #0b1e78 0%, #001142 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(0, 17, 66, 0.28) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .ui.primary.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0, 17, 66, 0.36) !important;
}

.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) a {
  color: #0b1e78 !important;
  font-weight: 600 !important;
}

/* Rodapé do cartão ("Esqueceu a sua senha?"). Tem de vir depois das regras do
   cabeçalho e do segmento, que também o apanham. */
.page-content.user:is(.signin, .signup, .forgot, .reset, .activate, .link-account) .ui.attached.segment.header.top {
  display: block !important;
  gap: 0 !important;
  padding: 1.1rem 2rem !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 0.87rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-align: center;
}