/* Brand kit You Soluções aplicado ao console de conta do Keycloak (realm you),
 * a tela que o colaborador vê depois de entrar em sso.youisp.com.br.
 *
 * Paleta oficial: navy #001A61 e #0A1240 (fundo real de modo escuro), salmão
 * #F09879, terracota #C95E5C. Fonte Plus Jakarta Sans. Nunca roxo.
 *
 * O console é uma aplicação React do Keycloak sobre PatternFly 5. Este arquivo
 * carrega depois do CSS dela e só redefine variáveis e a moldura: barra
 * superior, menu lateral, tipografia, ação primária, link e foco. Cor de alerta
 * fica como o PatternFly entrega, mesma regra do tema de login e do NetBox.
 *
 * Fontes e logo são cópia do kit em network-iac/branding/, igual ao tema de
 * login deste mesmo diretório. Trocar a marca lá e copiar para os dois.
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
 * Tokens
 * -------------------------------------------------------------------------- */
:root {
  --you-navy: #001a61;
  --you-navy-deep: #0a1240;
  --you-salmon: #f09879;
  --you-terracotta: #c95e5c;
  --you-ink: #0a1240;
  --you-muted: #4a5578;
  --you-surface: #f4f6fb;

  --you-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    helvetica, arial, sans-serif;

  --pf-v5-global--FontFamily--text: var(--you-font);
  --pf-v5-global--FontFamily--heading: var(--you-font);
  --pf-v5-global--primary-color--100: var(--you-navy);
  --pf-v5-global--primary-color--200: var(--you-navy-deep);
  --pf-v5-global--active-color--100: var(--you-navy);
  --pf-v5-global--link--Color: var(--you-navy);
  --pf-v5-global--link--Color--hover: var(--you-navy-deep);
}

body {
  font-family: var(--you-font);
}

/* Tela de carregamento, antes de o React montar: navy em vez de branco. */
.keycloak__loading-container {
  background-color: var(--you-navy-deep) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
 * Barra superior: navy, com a faixa salmão e terracota do cartão de login
 * -------------------------------------------------------------------------- */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--you-navy);
  background-color: var(--you-navy);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--you-salmon), var(--you-terracotta)) 1;
}
.pf-v5-c-masthead img {
  height: 3rem;
  width: auto;
  max-height: none;
}
/* Rótulo ao lado do logo, para ninguém confundir o console com um dos
 * sistemas. O lockup empilhado é estreito, então o texto cabe ao lado. */
.pf-v5-c-masthead__brand::after {
  content: "Minha conta";
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-family: var(--you-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pf-v5-c-masthead__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* No celular o rótulo empurrava a barra para duas linhas. */
@media (max-width: 767px) {
  .pf-v5-c-masthead__brand::after {
    display: none;
  }
  .pf-v5-c-masthead img {
    height: 2.5rem;
  }
}

/* Menu do usuário na barra (nome e avatar) */
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--Color: #fff;
  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
  --pf-v5-c-menu-toggle--before--BorderColor: rgba(255, 255, 255, 0.3);
  --pf-v5-c-menu-toggle--hover--before--BorderColor: var(--you-salmon);
  --pf-v5-c-menu-toggle--expanded--before--BorderColor: var(--you-salmon);
  color: #fff;
  font-family: var(--you-font);
  font-weight: 600;
  border-radius: 0.5rem;
}

/* --------------------------------------------------------------------------
 * Menu lateral: navy profundo, item atual marcado em salmão
 * -------------------------------------------------------------------------- */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--you-navy-deep);
  background-color: var(--you-navy-deep);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: rgba(255, 255, 255, 0.82);
  --pf-v5-c-nav__link--hover--Color: #fff;
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(255, 255, 255, 0.06);
  --pf-v5-c-nav__link--hover--after--BorderColor: rgba(240, 152, 121, 0.5);
  --pf-v5-c-nav__link--m-current--Color: #fff;
  /* Branco translúcido, não salmão: salmão translúcido sobre o navy vira
   * lilás, a mesma armadilha do fundo do login. O salmão fica só na barra. */
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(255, 255, 255, 0.09);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--you-salmon);
  --pf-v5-c-nav__item--before--BorderColor: rgba(255, 255, 255, 0.08);
  font-family: var(--you-font);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current {
  font-weight: 700;
}
/* O subitem atual (ex.: Segurança da conta > Entrando) desenha a barra por
 * outra regra do PatternFly e ficava azul. */
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav .pf-v5-c-nav__link.pf-m-current::after {
  border-color: var(--you-salmon) !important;
}

/* --------------------------------------------------------------------------
 * Conteúdo
 * -------------------------------------------------------------------------- */
.pf-v5-c-page {
  --pf-v5-c-page--BackgroundColor: var(--you-surface);
}
.pf-v5-c-page__main-section h1,
.pf-v5-c-page__main-section .pf-v5-c-title.pf-m-2xl {
  color: var(--you-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pf-v5-c-page__main-section .pf-v5-c-title {
  color: var(--you-ink);
  font-weight: 700;
}

/* Botões: navy, cantos arredondados como no login */
.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 0.5rem;
  --pf-v5-c-button--m-primary--BackgroundColor: var(--you-navy);
  --pf-v5-c-button--m-primary--Color: #fff;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--you-navy-deep);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--you-navy-deep);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--you-navy-deep);
  --pf-v5-c-button--m-secondary--Color: var(--you-navy);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--you-navy);
  --pf-v5-c-button--m-secondary--hover--Color: var(--you-navy-deep);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--you-navy-deep);
  --pf-v5-c-button--m-link--Color: var(--you-navy);
  --pf-v5-c-button--m-link--hover--Color: var(--you-navy-deep);
  font-family: var(--you-font);
}
.pf-v5-c-button.pf-m-primary {
  font-weight: 700;
}
.pf-v5-c-button:focus-visible {
  outline: 3px solid var(--you-salmon);
  outline-offset: 2px;
}
/* O botão do menu (hambúrguer) vive sobre o navy */
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
  --pf-v5-c-button--m-plain--Color: #fff;
  --pf-v5-c-button--m-plain--hover--Color: var(--you-salmon);
}

/* Campos: foco em navy com halo salmão */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--focus--after--BorderColor: var(--you-navy);
  --pf-v5-c-form-control--hover--after--BorderColor: var(--you-navy);
}
.pf-v5-c-form-control:focus-within {
  box-shadow: 0 0 0 3px rgba(240, 152, 121, 0.45);
}

/* "Ir para a seção": item atual em salmão, como o menu */
.pf-v5-c-jump-links {
  --pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(--you-salmon);
  --pf-v5-c-jump-links__link--hover--before--BorderColor: rgba(240, 152, 121, 0.5);
}

a {
  color: var(--you-navy);
}
a:hover {
  color: var(--you-navy-deep);
}