/*
 * Customização Adaptive para o Account Console (Keycloak 26.6 / PatternFly v5).
 *
 * O Account Console v3 (módulo keycloak-account-ui, Keycloakify) é um React app
 * que renderiza com classes pf-v5-c-*. As regras abaixo são alvo dessa
 * nomenclatura específica vista no DOM (inspecionado em 2026-05-05).
 * Mantenho fallback para v4 (.pf-c-*) e v6 (.pf-v6-c-*) caso o PatternFly suba.
 */

:root {
  --primary-blue: #19569D;
  --primary-blue-dark: #0B396D;
  --primary-blue-hover: #1a6ac4;
  --primary-blue-active: #1e528d;
  --primary-blue-pressed: #0e3256;
  --primary-blue-focus: #4d9ffb;
}

/* ==========================================================================
   Masthead (header superior) — fundo azul Adaptive, texto branco.
   Sem forçar height; deixamos o PF v5 controlar a altura nativa.
   ========================================================================== */
.pf-v5-c-masthead,
.pf-v6-c-masthead,
.pf-c-masthead {
  background-color: var(--primary-blue) !important;
  --pf-v5-c-masthead--BackgroundColor: var(--primary-blue);
  --pf-v6-c-masthead--BackgroundColor: var(--primary-blue);
  /* Compactar a altura pra ~46px (parecido com o tema antigo do KC22).
     Usar a CSS variable nativa do PF v5 e zerar padding vertical pra
     evitar overflow. */
  --pf-v5-c-masthead--MinHeight: 46px;
  --pf-v6-c-masthead--MinHeight: 46px;
  --pf-v5-c-masthead--inset: 1rem;
  min-height: 46px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: #ffffff !important;
}

.pf-v5-c-masthead__main,
.pf-v6-c-masthead__main,
.pf-c-masthead__main {
  min-height: 46px;
}

/* Toolbar dentro do masthead — fundo transparente, padding zerado pra
   compactar a altura do header. */
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v6-c-masthead .pf-v6-c-toolbar {
  background-color: transparent !important;
  --pf-v5-c-toolbar--BackgroundColor: transparent;
  --pf-v6-c-toolbar--BackgroundColor: transparent;
  --pf-v5-c-toolbar--RowGap: 0;
  --pf-v5-c-toolbar--PaddingTop: 0;
  --pf-v5-c-toolbar--PaddingBottom: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 46px !important;
}

.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v6-c-masthead .pf-v6-c-toolbar__content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 46px !important;
}

.pf-v5-c-masthead .pf-v5-c-toolbar__content-section,
.pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
  min-height: 46px !important;
}

.pf-v5-c-masthead .pf-v5-c-toolbar__item,
.pf-v6-c-masthead .pf-v6-c-toolbar__item {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Avatar redondo no header — reduzir de pf-m-md (36px) pra ~28px */
.pf-v5-c-masthead .pf-v5-c-avatar,
.pf-v6-c-masthead .pf-v6-c-avatar {
  width: 28px !important;
  height: 28px !important;
}

/* Brand link (área do logo) */
.pf-v5-c-masthead__brand,
.pf-v6-c-masthead__brand,
.pf-c-masthead__brand {
  display: flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Logo: o <img> tem classe gerada por CSS Modules (_brand_xxx_1), então
   alvo é o <img> diretamente filho do __brand link. */
.pf-v5-c-masthead__brand img,
.pf-v6-c-masthead__brand img,
.pf-c-masthead__brand img {
  height: 22px !important;
  max-height: 22px !important;
  width: auto !important;
}

/* Botão hamburger (toggle da sidebar) — branco no fundo azul */
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v6-c-masthead .pf-v6-c-button.pf-m-plain {
  color: #ffffff !important;
}

/* Menu-toggle do nome do usuário — fundo transparente pra herdar o azul
   do masthead, texto branco. Sem isso, em dark mode o botão fica cinza
   escuro destoando do header. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v6-c-masthead .pf-v6-c-menu-toggle {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
  --pf-v6-c-menu-toggle--BackgroundColor: transparent;
  --pf-v5-c-menu-toggle--BorderColor: transparent;
  --pf-v6-c-menu-toggle--BorderColor: transparent;
  --pf-v5-c-menu-toggle--Color: #ffffff;
  --pf-v6-c-menu-toggle--Color: #ffffff;
  color: #ffffff !important;
  box-shadow: none !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:focus,
.pf-v6-c-masthead .pf-v6-c-menu-toggle:hover,
.pf-v6-c-masthead .pf-v6-c-menu-toggle:focus {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle::before,
.pf-v5-c-masthead .pf-v5-c-menu-toggle::after,
.pf-v6-c-masthead .pf-v6-c-menu-toggle::before,
.pf-v6-c-masthead .pf-v6-c-menu-toggle::after {
  border-color: transparent !important;
  border: none !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__controls,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__toggle-icon,
.pf-v6-c-masthead .pf-v6-c-menu-toggle__text,
.pf-v6-c-masthead .pf-v6-c-menu-toggle__controls,
.pf-v6-c-masthead .pf-v6-c-menu-toggle__toggle-icon {
  color: #ffffff !important;
}

/* ==========================================================================
   Sidebar — fundo azul escuro
   ========================================================================== */
.pf-v5-c-page__sidebar,
.pf-v6-c-page__sidebar,
.pf-c-page__sidebar {
  background-color: var(--primary-blue-dark) !important;
  --pf-v5-c-page__sidebar--BackgroundColor: var(--primary-blue-dark);
  --pf-v6-c-page__sidebar--BackgroundColor: var(--primary-blue-dark);
}

.pf-v5-c-page__sidebar-body,
.pf-v6-c-page__sidebar-body,
.pf-c-page__sidebar-body {
  padding-top: 0;
}

/* ==========================================================================
   Nav (itens da sidebar) — texto branco, hover/current azul mais claro
   ========================================================================== */
.pf-v5-c-nav__link,
.pf-v6-c-nav__link,
.pf-c-nav__link {
  color: #ffffff !important;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current="page"],
.pf-v6-c-nav__link.pf-m-current,
.pf-c-nav__link.pf-m-current {
  background-color: var(--primary-blue-hover) !important;
  color: #ffffff !important;
}

.pf-v5-c-nav__link:hover,
.pf-v6-c-nav__link:hover,
.pf-c-nav__link:hover {
  background-color: var(--primary-blue-pressed) !important;
  color: #ffffff !important;
}

.pf-v5-c-nav__link:active,
.pf-v5-c-nav__link:focus,
.pf-v6-c-nav__link:active,
.pf-v6-c-nav__link:focus,
.pf-c-nav__link:active,
.pf-c-nav__link:focus {
  background-color: var(--primary-blue-active) !important;
  color: #ffffff !important;
}

.pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav__link::after,
.pf-v6-c-nav__link.pf-m-current::after,
.pf-c-nav__link.pf-m-current::after,
.pf-c-nav__link::after {
  border-color: var(--primary-blue-focus) !important;
}

.pf-v5-c-nav__item.pf-m-expandable::before,
.pf-v6-c-nav__item.pf-m-expandable::before,
.pf-c-nav__item.pf-m-expandable::before {
  border-bottom: 0 !important;
}

.pf-v5-c-nav__link::before,
.pf-v6-c-nav__link::before,
.pf-c-nav__link::before {
  border-bottom-width: 0 !important;
}

/* Ícone de seta do nav expandable também branco */
.pf-v5-c-nav__toggle-icon,
.pf-v6-c-nav__toggle-icon {
  color: #ffffff !important;
}

/* ==========================================================================
   Conteúdo principal — títulos em azul, textos default
   ========================================================================== */
.pf-v5-c-title,
.pf-v6-c-title,
.pf-c-title {
  color: var(--primary-blue) !important;
}

.pf-v5-c-content h1,
.pf-v5-c-content h2,
.pf-v6-c-content h1,
.pf-v6-c-content h2,
.pf-c-content h1,
.pf-c-content h2 {
  color: var(--primary-blue) !important;
}

.pf-v5-c-icon,
.pf-v6-c-icon,
.pf-icon {
  color: var(--primary-blue) !important;
}

.pf-v5-c-card,
.pf-v6-c-card,
.pf-c-card {
  border-radius: 8px !important;
}

/* Botão primário (Salvar etc) na cor da marca */
.pf-v5-c-button.pf-m-primary,
.pf-v6-c-button.pf-m-primary,
.pf-c-button.pf-m-primary {
  background-color: var(--primary-blue) !important;
  --pf-v5-c-button--m-primary--BackgroundColor: var(--primary-blue);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--primary-blue-hover);
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v6-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover {
  background-color: var(--primary-blue-hover) !important;
}

/* Jump links ("Ir para a seção") */
.pf-v5-c-jump-links__link,
.pf-v6-c-jump-links__link,
.pf-c-jump-links__link {
  color: var(--primary-blue) !important;
}

/* ==========================================================================
   Personal info / forms (regras originais portadas)
   ========================================================================== */
.personal-info-form .pf-v5-c-form__group-control,
.personal-info-form .pf-c-form__group-control {
  max-width: 600px;
}

.delete-button {
  width: 150px;
  height: 50px;
}

@media (max-width: 320px) {
  .delete-button {
    width: 120px;
    height: 50px;
  }
}

/* Lista de dispositivos / signing in */
.signed-in-device-list .pf-v5-c-data-list__item-row,
.signed-in-device-list .pf-c-data-list__item-row {
  --pf-v5-c-data-list__item-row--PaddingRight: 0;
  --pf-v5-c-data-list__item-row--PaddingLeft: 0;
  --pf-c-data-list__item-row--PaddingRight: 0;
  --pf-c-data-list__item-row--PaddingLeft: 0;
}

.signed-in-device-list .pf-v5-c-data-list__expandable-content-body,
.signed-in-device-list .pf-c-data-list__expandable-content-body {
  --pf-v5-c-data-list__expandable-content-body--PaddingRight: 0;
  --pf-c-data-list__expandable-content-body--PaddingRight: 0;
}

.signed-in-device-grid {
  grid-template-columns: auto repeat(11, [col-start] 1fr);
}

/* Title-case auxiliares */
.title-case:first-letter,
.cred-title:first-letter,
#otp-not-set-up .pf-v5-c-empty-state__body:first-letter,
#otp-not-set-up .pf-c-empty-state__body:first-letter {
  text-transform: capitalize;
}

/* Aplicações */
#applications-list-header .pf-v5-c-data-list__item-content,
#applications-list-header .pf-c-data-list__item-content {
  --pf-v5-c-data-list__item-content--md--PaddingBottom: 1rem;
  --pf-c-data-list__item-content--md--PaddingBottom: 1rem;
}