/* Fonte PrimeIcons ou FontAwesome para os ícones */
@import url('https://unpkg.com/primeicons/primeicons.css');

:root {
  --pbdoc-header-bg: #0f2a47;
  --pbdoc-header-text: #ffffff;
  --pbdoc-header-border: rgba(255, 255, 255, 0.15);
}

/* Container Fixo Superior */
.pbdoc-header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  margin: 0;
  padding: 0;
}

/* Header Element */
.pbdoc-header {
  background-color: var(--pbdoc-header-bg);
  color: var(--pbdoc-header-text);
  border-bottom: 1px solid var(--pbdoc-header-border);
  width: 100%;
  min-height: 66px;
  max-height: 66px;
  box-sizing: border-box;
}

.header__esquerda {
  min-width: 0;
}

.header__marca {
  flex-shrink: 0;
  transform: translateY(2px);
}

/* Logos do header */
.header__logo {
  height: 28px;
}

/* Wrappers de badge/versão sob a marca */
.header__badge-wrap  { margin-top: 3px; }
.header__versao-wrap { margin-top: 2px; }

/* Versão textual exibida em produção */
.header__versao--prd {
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

/* Botão Hambúrguer Sidebar */
.sidebar-toggle-btn {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  width: 32px;
  height: 30px;
  padding: 0 !important;
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Botão de Notificações — colapsado (apenas ícone), expande no hover/foco */
.notification-bell__toggle {
  max-width: 2.25rem;
  height: 2.25rem;
  overflow: visible;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 6px;
  position: relative;
  transition: max-width 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.notification-bell__toggle:hover,
.notification-bell__toggle:focus,
.notification-bell__toggle[aria-expanded="true"] {
  max-width: 10rem;
  background-color: var(--pbdoc-header-text);
  border-color: var(--pbdoc-header-text);
  color: var(--pbdoc-primary-default) !important;
  justify-content: flex-start !important;
}

.notification-bell__label {
  display: inline-block;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0;
  font-size: 0.85rem;
  font-weight: 700;
  transition: opacity 0.2s ease 0.05s, max-width 0.3s ease, margin-left 0.3s ease;
}

/* Animação suave de abertura/fechamento do dropdown de notificações */
.notification-bell__dropdown {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.notification-bell__dropdown.show,
.notification-bell__dropdown.notification-bell__dropdown--hiding {
  display: block;
}

.notification-bell__dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.notification-bell__dropdown.notification-bell__dropdown--hiding {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
}

.notification-bell__toggle:hover .notification-bell__label,
.notification-bell__toggle:focus .notification-bell__label,
.notification-bell__toggle[aria-expanded="true"] .notification-bell__label {
  opacity: 1;
  max-width: 6rem;
  margin-left: 0.5rem;
}

/* Badge de notificações não vistas (ancorado no ícone do sino) */
.notification-bell__badge {
  z-index: 2;
  font-size: 0.65rem;
  padding: 0.25em 0.45em;
  line-height: 1;
  pointer-events: none;
}


/* Botões de Ação (Protocolo / Relatórios) */
.header__action-btn {
  background-color: transparent !important;
  color: var(--pbdoc-header-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.header__action-btn:hover {
  background-color: #ffffff !important;
  color: var(--pbdoc-header-bg) !important;
  border-color: #ffffff !important;
}

/* Pill / Tag de Versão */
.header__versao {
  background-color: #d85635;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px !important;
  height: 1.15rem !important;
  line-height: 1.15rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header__versao--nao-prd {
  color: #ffffff !important;
}

/* Avatar do Usuário (Iniciais) */
.header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background-color: #1b3a5c;
  color: #ffffff;
  border: 2px solid #c9a25a;
  font-size: 0.78rem;
  font-weight: 700;
}

/* Nome do Usuário */
.header__nome {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700 !important;
  white-space: nowrap;
}

/* Select de Lotação Estilo Pill */
.header__lotacao .lotacao-select {
  border: 1px solid #000000 !important;
  border-radius: 2rem !important;
  max-width: 9rem;
  min-height: 2.25rem !important;
  height: 2.25rem !important;
  background-color: #e2e8f0 !important;
  color: #000000 !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  padding: 0.25rem 1.8rem 0.25rem 0.6rem !important;
  cursor: pointer;
  box-shadow: none !important;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z' fill='%23000000'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
}

.header__lotacao .lotacao-select:hover {
  background-color: #ffffff !important;
  border-color: #000000 !important;
}

/* Botão Sair (Logout) */
.header__sair {
  background-color: var(--pbdoc-header-bg) !important;
  color: var(--pbdoc-header-text) !important;
  border: 1px solid rgba(97, 97, 97, 0.815) !important;
  border-radius: 4px;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.header__sair:hover {
  background-color: #ffffff !important;
  color: var(--pbdoc-header-bg) !important;
  border-color: #ffffff !important;
}