/* =============================================================================
 * pdr-layout.css — Shell UX global do Portal do Raio (Fase 1)
 *
 * Estilos do header global partilhado (renderizado por pdr-header.js).
 * Âmbito CONTIDO: todos os selectores têm prefixo .pdr-header / .pdr-mode
 * — este ficheiro não redefine estilos globais de nenhuma página.
 *
 * Paleta alinhada com a landing (index.html):
 *   fundo nav  #0a1520 · acento #F59E0B · texto #E5E7EB
 * ============================================================================= */

.pdr-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 64px;
  padding: 0 1.5rem;
  background: rgba(10, 21, 32, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245, 158, 11, 0.18);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  color: #E5E7EB;
  box-sizing: border-box;
}

/* ── Variante admin: distinção visual clara da área de administração ── */
.pdr-header--admin {
  border-bottom: 2px solid #8B5CF6;
  background: rgba(18, 12, 34, 0.96);
}

.pdr-header__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: #F3F4F6;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.pdr-header__brand:hover { color: #F59E0B; }

.pdr-header__bolt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  font-size: 1rem;
}

.pdr-header__name em,
.pdr-header__name { font-style: normal; }

.pdr-header__badge {
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.45);
  color: #C4B5FD;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Navegação principal ─────────────────────────────────────────── */
.pdr-header__nav {
  display: flex;
  /* Blindagem: algumas ferramentas têm um <nav> próprio (sidebar) estilizado
     com um selector "nav {}" nu (ex.: calculadora-spda: width:280px;
     flex-direction:column). Como o <nav> interno do header não declarava
     estas propriedades, herdava-as e empilhava os itens na vertical. Declará-
     las aqui (valores já pretendidos) torna o header imune a esse vazamento. */
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
.pdr-header__nav::-webkit-scrollbar { display: none; }

.pdr-header__link {
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  color: #9CA3AF;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.pdr-header__link:hover { color: #F3F4F6; background: rgba(255, 255, 255, 0.06); }
.pdr-header__link:focus-visible {
  outline: 2px solid #F59E0B;
  outline-offset: 2px;
}
.pdr-header__link.is-active {
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.10);
  font-weight: 600;
}

/* ── Conta / estado ───────────────────────────────────────────────── */
.pdr-header__account {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  margin-left: auto;
}

.pdr-header__mode {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pdr-mode--cloud       { color: #93C5FD; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.35); }
.pdr-mode--local       { color: #FCD34D; background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.35); }
.pdr-mode--unavailable { color: #FCA5A5; background: rgba(239, 68, 68, 0.12);  border-color: rgba(239, 68, 68, 0.40); }

.pdr-header__email {
  color: #9CA3AF;
  font-size: 0.82rem;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdr-header__logout,
.pdr-header__login {
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: transparent;
  color: #FCA5A5;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.pdr-header__logout:hover { background: rgba(239, 68, 68, 0.14); color: #FECACA; }
.pdr-header__logout:focus-visible,
.pdr-header__login:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }

.pdr-header__login {
  border-color: rgba(245, 158, 11, 0.5);
  color: #F59E0B;
  font-weight: 600;
}
.pdr-header__login:hover { background: rgba(245, 158, 11, 0.14); }

/* ── Variante tool (slim, 48px): substitui a pnav-bar legacy ──────── */
/* Ocupa o mesmo slot fixed de 48px que a pnav-bar ocupava, pelo que o
   body{padding-top:48px} existente nas páginas de ferramentas continua
   válido — zero layout shift. z-index alinhado com o antigo (9999). */
.pdr-header--tool {
  height: 48px;
  padding: 0 1rem;
  gap: 0.75rem;
  font-size: 0.82rem;
  z-index: 9999;
}
.pdr-header--tool .pdr-header__bolt { width: 26px; height: 26px; font-size: 0.85rem; border-radius: 6px; }
.pdr-header--tool .pdr-header__name { font-size: 0.85rem; }
.pdr-header--tool .pdr-header__link { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
.pdr-header--tool .pdr-header__logout,
.pdr-header--tool .pdr-header__login { padding: 0.28rem 0.65rem; font-size: 0.76rem; }

/* O dropdown "Ferramentas" (só existe no contexto tool) é position:absolute e
   desce ~300px abaixo do nav. O nav base tem overflow-x:auto (scroll horizontal
   dos links no contexto app) e o CSS força overflow-y a auto quando overflow-x
   não é visible — o que recorta o dropdown, tornando-o não clicável em TODAS as
   ferramentas. No contexto tool o nav tem apenas 2 itens curtos e não precisa de
   scroll, por isso deixamo-lo visible para o menu não ser cortado. */
.pdr-header--tool .pdr-header__nav { overflow: visible; }

.pdr-header__toolname {
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #F59E0B;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
  flex-shrink: 1;
}

/* Dropdown de ferramentas (catálogo único em pdr-header.js) */
.pdr-header__dropdown { position: relative; }
.pdr-header__dropdown-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
}
.pdr-header__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
  background: #0d1926;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 10000;
}
.pdr-header__dropdown-menu.is-open { display: block; }
.pdr-header__dropdown-item {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.8rem;
  white-space: nowrap;
}
.pdr-header__dropdown-item:hover {
  background: rgba(245, 158, 11, 0.10);
  color: #F59E0B;
}
.pdr-header__dropdown-item:focus-visible { outline: 2px solid #F59E0B; outline-offset: -2px; }
.pdr-header__dropdown-item.is-current { color: #F59E0B; font-weight: 700; }

/* ── Responsivo base ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  .pdr-header { gap: 0.6rem; padding: 0 0.85rem; }
  .pdr-header__name { display: none; }        /* fica só o raio como marca */
  .pdr-header__email { display: none; }       /* email omitido em ecrãs estreitos */
  .pdr-header__badge { font-size: 0.62rem; padding: 0.15rem 0.4rem; }
  .pdr-header__link { padding: 0.4rem 0.55rem; font-size: 0.82rem; }
  /* Em mobile o nome da ferramenta é redundante (está no header próprio da
     ferramenta, logo abaixo) — escondê-lo liberta espaço para a navegação. */
  .pdr-header__toolname { display: none; }
  .pdr-header--tool { gap: 0.45rem; padding: 0 0.6rem; }
}