/* ==================================================================== */
/* Admin Console (IFRJv2) - replica a identidade visual do login/conta.  */
/*                                                                       */
/* O Admin Console v2 (keycloak.v2) usa PatternFly 5, assim como o       */
/* Account Console. Em vez de reescrever a SPA, mapeamos os mesmos       */
/* valores dos outros temas (verde IFRJ, tipografia Open Sans/Raleway,   */
/* cantos arredondados e cores de fundo) para as variaveis do PatternFly.*/
/* ==================================================================== */

/* Mesmas fontes usadas no login/conta (Google Fonts). */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');

:root {
  /* Paleta IFRJ (identica ao login/conta). */
  --ifrj-primary: #2f855a;          /* verde principal */
  --ifrj-primary-hover: #276749;    /* verde mais escuro (hover/active) */
  --ifrj-secondary: #3c6e71;
  --ifrj-bg-light: #f0f4f9;
  --ifrj-bg-dark: #1e1f20;
  --ifrj-radius: 24px;

  /* Altura do logo no cabecalho (identica ao Account Console). */
  --ifrj-logo-height: 5rem;

  /* Tipografia (identica ao login/conta). */
  --ifrj-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ifrj-font-heading: 'Raleway', var(--ifrj-font-body);
}

/* -------------------------------------------------------------------- */
/* Cor primaria e links (PatternFly 5).                                  */
/* -------------------------------------------------------------------- */
:root {
  --pf-v5-global--primary-color--100: var(--ifrj-primary);
  --pf-v5-global--primary-color--200: var(--ifrj-primary-hover);
  --pf-v5-global--link--Color: var(--ifrj-primary);
  --pf-v5-global--link--Color--hover: var(--ifrj-primary-hover);
  --pf-v5-global--active-color--100: var(--ifrj-primary);
  --pf-v5-global--active-color--200: var(--ifrj-primary-hover);

  /* Tipografia global do PatternFly. */
  --pf-v5-global--FontFamily--text: var(--ifrj-font-body);
  --pf-v5-global--FontFamily--sans-serif: var(--ifrj-font-body);
  --pf-v5-global--FontFamily--heading: var(--ifrj-font-heading);

  /* Cantos arredondados como no login/conta. */
  --pf-v5-global--BorderRadius--sm: 8px;
  --pf-v5-global--BorderRadius--lg: var(--ifrj-radius);
}

/* Fonte do corpo e dos titulos. */
body,
.pf-v5-c-page,
.pf-v5-c-content {
  font-family: var(--ifrj-font-body);
}

h1, h2, h3, h4, h5, h6,
.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2,
.pf-v5-c-content h3 {
  font-family: var(--ifrj-font-heading);
}

/* Fundo da area de conteudo (claro), igual aos demais temas. */
.pf-v5-c-page__main {
  --pf-v5-c-page__main--BackgroundColor: var(--ifrj-bg-light);
}

/* -------------------------------------------------------------------- */
/* Botao primario: verde IFRJ solido.                                    */
/* -------------------------------------------------------------------- */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ifrj-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ifrj-primary-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ifrj-primary-hover);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ifrj-primary-hover);
  border-radius: var(--ifrj-radius);
}

/* Links. */
.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--ifrj-primary);
  --pf-v5-c-button--m-link--hover--Color: var(--ifrj-primary-hover);
}

/* Abas ativas (navegacao por abas dentro das telas). */
.pf-v5-c-tabs {
  --pf-v5-c-tabs__link--after--BorderColor: var(--ifrj-primary);
}

/* -------------------------------------------------------------------- */
/* Modo escuro: fundo escuro + verde mais claro nos links para contraste.*/
/* -------------------------------------------------------------------- */
.pf-v5-theme-dark {
  --pf-v5-global--primary-color--100: var(--ifrj-primary);
  --pf-v5-global--link--Color: #68d391;
  --pf-v5-global--link--Color--hover: #9ae6b4;
}

.pf-v5-theme-dark .pf-v5-c-page__main {
  --pf-v5-c-page__main--BackgroundColor: var(--ifrj-bg-dark);
}

/* -------------------------------------------------------------------- */
/* Cabecalho (masthead): identico ao Account Console.                    */
/* Mantemos o fundo escuro padrao do keycloak.v2 (nao pintamos de verde) */
/* e apenas controlamos a altura do logo pela variavel.                  */
/* -------------------------------------------------------------------- */

/* Logo no cabecalho: controla a altura pela variavel. !important para
   vencer eventual altura fixa aplicada pelo componente. */
.pf-v5-c-masthead__brand,
.pf-v5-c-brand,
.pf-v5-c-masthead img {
  height: var(--ifrj-logo-height) !important;
  max-height: var(--ifrj-logo-height) !important;
  width: auto !important;
  max-width: none !important;
}

/* Garante espaco vertical no cabecalho para o logo maior nao ser cortado. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--MinHeight: calc(var(--ifrj-logo-height) + 1.5rem);
  min-height: calc(var(--ifrj-logo-height) + 1.5rem);
}

/* -------------------------------------------------------------------- */
/* Cabecalho: avatar do usuario + botao com o nome ("admin") viram uma    */
/* UNICA pilula (foto a esquerda, nome a direita) - identico ao Account.  */
/*                                                                       */
/* No DOM (toolbar) sao dois .pf-v5-c-toolbar__item irmaos:              */
/*   - nome:   .pf-v5-c-toolbar__item  >  .pf-v5-c-menu-toggle (texto)   */
/*   - avatar: .pf-v5-c-toolbar__item.pf-m-overflow-menu (contem .avatar)*/
/*                                                                       */
/* O fundo + a borda + o raio de pilula ficam SOMENTE no botao do nome.   */
/* O avatar entra dentro desse mesmo botao visualmente (order menor + a   */
/* margem negativa o sobrepoe a borda esquerda). Sem contorno duplo.      */
/* -------------------------------------------------------------------- */

.pf-v5-c-toolbar__content-section:has(.pf-v5-c-avatar) {
  align-items: center;
}

/* Zera qualquer decoracao/margem dos DOIS itens do usuario. */
.pf-v5-c-toolbar__item:has(> .pf-v5-c-avatar),
.pf-v5-c-toolbar__item:has(.pf-v5-c-menu-toggle__text) {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  display: inline-flex;
  align-items: center;
}

/* Ordem: FOTO a esquerda (order 1), NOME a direita (order 2). */
.pf-v5-c-toolbar__item:has(> .pf-v5-c-avatar) {
  order: 1;
}
.pf-v5-c-toolbar__item:has(.pf-v5-c-menu-toggle__text) {
  order: 2;
}

/* A PILULA (unico contorno): fundo + borda + raio no botao do nome.
   padding-left generoso abre espaco para o avatar se sobrepor por cima. */
.pf-v5-c-toolbar__item:has(.pf-v5-c-menu-toggle__text) .pf-v5-c-menu-toggle {
  background-color: color-mix(in srgb, var(--ifrj-primary) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--ifrj-primary) 35%, transparent) !important;
  border-radius: 999px !important;
  padding: 3px 14px 3px 40px !important;
  min-height: 2.5rem;
}
.pf-v5-c-toolbar__item:has(.pf-v5-c-menu-toggle__text) .pf-v5-c-menu-toggle::before,
.pf-v5-c-toolbar__item:has(.pf-v5-c-menu-toggle__text) .pf-v5-c-menu-toggle::after {
  display: none !important;
}

/* Avatar sobreposto sobre a borda esquerda da pilula (sem contorno proprio).
   A margem negativa a direita o empurra por cima do padding-left do botao. */
.pf-v5-c-toolbar__item:has(> .pf-v5-c-avatar) > .pf-v5-c-avatar {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: -38px;
  position: relative;
  z-index: 1;
}

/* Modo escuro: realce um pouco mais forte na pilula. */
.pf-v5-theme-dark .pf-v5-c-toolbar__item:has(.pf-v5-c-menu-toggle__text) .pf-v5-c-menu-toggle {
  background-color: color-mix(in srgb, var(--ifrj-primary) 24%, transparent) !important;
  border-color: color-mix(in srgb, var(--ifrj-primary) 45%, transparent) !important;
}

/* -------------------------------------------------------------------- */
/* Navegacao lateral: item ativo em verde IFRJ (formato pill).           */
/* Por padrao o item atual usa o azul do PatternFly. Trocamos pelo verde */
/* e arredondamos o item, como no Account Console.                       */
/* -------------------------------------------------------------------- */
:root,
.pf-v5-theme-dark {
  --pf-v5-global--active-color--100: var(--ifrj-primary);
  --pf-v5-global--active-color--200: var(--ifrj-primary-hover);
  --pf-v5-global--active-color--300: var(--ifrj-primary);
  --pf-v5-global--active-color--400: var(--ifrj-primary);
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link.pf-m-current::after {
  --pf-v5-c-nav__link--after--BorderColor: var(--ifrj-primary);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--ifrj-primary);
}

/* Remove a barra vertical do item ativo (o fundo pill ja indica selecao). */
.pf-v5-c-nav__link.pf-m-current::after {
  display: none !important;
}

/* Itens de menu como pill buttons, com espacamento entre eles. */
.pf-v5-c-nav__link {
  border-radius: 999px !important;
  margin: 4px 8px;
}

/* -------------------------------------------------------------------- */
/* Evita o scroll horizontal na navegacao lateral.                       */
/* Por padrao o PatternFly usa white-space: nowrap nos itens, entao      */
/* textos longos (ex: "Workflows") transbordam e criam a barra de rolagem*/
/* horizontal. Permitimos a quebra de linha e travamos o overflow-x para */
/* o texto ocupar o espaco disponivel em vez de rolar.                   */
/* -------------------------------------------------------------------- */
.pf-v5-c-nav,
.pf-v5-c-nav__list,
.pf-v5-c-nav__item,
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body {
  overflow-x: hidden !important;
}

.pf-v5-c-nav__link {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Item ativo: fundo verde suave (formato pill) e texto em negrito. */
.pf-v5-c-nav__link.pf-m-current {
  background-color: color-mix(in srgb, var(--ifrj-primary) 18%, transparent) !important;
  font-weight: 700 !important;
}

/* Hover nos demais itens tambem em formato pill. */
.pf-v5-c-nav__link:hover {
  background-color: color-mix(in srgb, var(--ifrj-primary) 10%, transparent) !important;
}

/* -------------------------------------------------------------------- */
/* Campos de texto arredondados, como nos temas de login/conta.          */
/*                                                                       */
/* No PatternFly 5 o .pf-v5-c-form-control desenha a borda com dois       */
/* pseudo-elementos (::before/::after). Ao arredondar, a linha inferior   */
/* "escapa" do canto. Solucao: desligar os pseudos e desenhar uma borda   */
/* completa arredondada no proprio wrapper.                               */
/* -------------------------------------------------------------------- */
.pf-v5-c-form-control {
  border: 1px solid var(--pf-v5-global--BorderColor--100, #8a8d90) !important;
  border-radius: var(--ifrj-radius) !important;
  overflow: hidden;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  display: none !important;
}

.pf-v5-c-form-control:focus-within {
  border-color: var(--ifrj-primary) !important;
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea,
.pf-v5-c-form-control input,
.pf-v5-c-form-control select,
.pf-v5-c-form-control textarea {
  border-radius: inherit !important;
  background: transparent !important;
}

.pf-v5-c-form-control:has(textarea),
.pf-v5-c-form-control > textarea,
.pf-v5-c-form-control textarea {
  border-radius: 12px !important;
}

/* -------------------------------------------------------------------- */
/* Dropdowns / selects.                                                  */
/* -------------------------------------------------------------------- */
.pf-v5-c-menu-toggle,
.pf-v5-c-dropdown__toggle {
  border-radius: var(--ifrj-radius) !important;
}

.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after,
.pf-v5-c-dropdown__toggle::before,
.pf-v5-c-dropdown__toggle::after {
  border-radius: var(--ifrj-radius) !important;
}

.pf-v5-c-menu-toggle:focus-within {
  border-color: var(--ifrj-primary) !important;
}

/* O menu que abre (lista de opcoes) tambem arredondado, mais suave. */
.pf-v5-c-menu {
  border-radius: 12px !important;
}