/* ============================================================================
   PAGE HEADER (17/09/2026) — topo único do portal.
   Quatro níveis de altura fixa: contexto (breadcrumb) · identificação (título,
   subtítulo, meta, ações) · ferramentas locais (abas, busca, filtros,
   seletores) · indicadores (faixa de KPIs, no conteúdo).
   O JS (assets/page-header.js) converte os cabeçalhos legados (.topbar,
   .page-header) nesta estrutura no carregamento — nada de funcionalidade
   muda de lugar sem manter o handler. As classes legadas de abas, buscas e
   alternadores recebem aqui o MESMO desenho (aliases), sem reescrever as
   telas. Cores: tokens já existentes do portal.
   ============================================================================ */
:root{ --ph-x:28px; --ph-rail:calc(var(--top-actions-w, 280px) + 28px); }

.ph{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
     backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
     border-bottom:1px solid var(--border); padding:0 var(--ph-x); color:var(--text);
     font-family:var(--font); }
.ph > *{ min-width:0; }

/* Nível 1 — contexto */
.ph-ctx{ display:flex; align-items:center; gap:6px; height:22px; padding:6px var(--ph-rail) 0 0; font-size:12px; color:var(--text-light); white-space:nowrap; overflow:hidden; }
.ph-ctx a, .ph-ctx button{ color:inherit; text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; font-family:var(--font); }
.ph-ctx a:hover, .ph-ctx button:hover{ color:var(--text); text-decoration:underline; }
.ph-ctx b{ color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.ph-ctx .sep{ opacity:.45; }

/* Nível 2 — identificação */
.ph-id{ display:flex; align-items:center; gap:16px; min-height:58px; padding:9px var(--ph-rail) 9px 0; }
.ph-ctx + .ph-id{ min-height:50px; padding-top:3px; }
.ph-idl{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.ph-tl{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; min-width:0; }
.ph-title, .ph .tbt, .ph .page-title{ font-size:20px; font-weight:700; letter-spacing:-.3px; line-height:1.2; color:var(--text); margin:0; display:flex; align-items:center; gap:8px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-title > *{ flex-shrink:0; }
#page-home .ph .tbt.home-tbt{ font-weight:700 !important; font-size:20px !important; }
.ph-sub, .ph .tbs, .ph .page-subtitle{ font-size:12.5px; color:var(--text-light); line-height:1.35; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:90ch; }
.ph-meta{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ph-chip{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:10px; background:var(--surface-alt,#F2F0ED); color:var(--text-mid,#4A5563); font-size:11px; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.ph-chip.ok{ background:#E4EDE6; color:#2F5E3B; } .ph-chip.warn{ background:#F7EFDD; color:#8A6A1E; } .ph-chip.bad{ background:#F8E1E1; color:#8E3B46; }

/* Ações — barra de comandos (referência Admin Center): comandos limpos, ícone +
   rótulo, sem preenchimento nem borda; UMA ação principal em tinta (navy), sem
   cor de marca. Bordô e dourado ficam para o conteúdo. */
:root{ --ph-ink:var(--navy, #2B3847); --ph-ink-h:#1F2A37; --ph-ring:rgba(43,56,71,.14); }
.ph-act{ margin-left:auto; display:flex; align-items:center; gap:2px; flex-shrink:0; position:relative; }
.ph-act .btn, .ph-act button.home-btn-sec, .ph-act .home-btn-sec{
  height:32px; padding:0 10px; font-size:12.5px; font-weight:600; border-radius:6px; line-height:1;
  background:transparent !important; border:1px solid transparent !important; color:var(--text) !important; box-shadow:none !important;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; width:auto; min-width:32px; }
.ph-act .btn:hover, .ph-act .home-btn-sec:hover{ background:var(--surface-alt) !important; border-color:transparent !important; }
.ph-act .btn svg, .ph-act .btn [data-icon]{ opacity:.85; }
.ph-act .btn-red, .ph-act .home-btn-brand, .ph-act .btn-danger{ background:var(--ph-ink) !important; color:#fff !important; border-color:var(--ph-ink) !important; margin-left:8px; padding:0 14px; }
.ph-act .btn-red:hover, .ph-act .home-btn-brand:hover, .ph-act .btn-danger:hover{ background:var(--ph-ink-h) !important; }
.ph-act .btn-red svg, .ph-act .btn-red [data-icon]{ opacity:1; }
.ph-act .btn:focus-visible, .ph-more:focus-visible{ outline:2px solid var(--ph-ink); outline-offset:1px; }
.ph-more{ width:32px; height:32px; border-radius:6px; border:1px solid transparent; background:transparent; color:var(--text); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:17px; line-height:1; letter-spacing:1px; font-family:var(--font); padding:0 0 4px; margin-left:2px; }
.ph-more:hover{ background:var(--surface-alt); }
.ph-menu{ position:absolute; right:0; top:38px; min-width:210px; background:var(--surface,#fff); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 28px rgba(43,56,71,.16); padding:6px; display:none; z-index:80; flex-direction:column; gap:2px; }
.ph-menu.open{ display:flex; }
.ph-menu .btn, .ph-menu button, .ph-menu a{ display:flex; width:100%; justify-content:flex-start; height:32px; padding:0 10px; background:none; border:0; border-radius:6px; font-family:var(--font); font-size:12.5px; font-weight:500; color:var(--text); cursor:pointer; text-align:left; box-shadow:none; gap:8px; align-items:center; }
.ph-menu .btn:hover, .ph-menu button:hover, .ph-menu a:hover{ background:var(--surface-alt); }
.ph-menu .btn-red{ color:var(--text); }

/* Nível 3 — ferramentas locais */
.ph-tools{ display:flex; align-items:center; gap:10px; min-height:44px; border-top:1px solid var(--border-soft, rgba(0,0,0,.06)); flex-wrap:wrap; padding:0; }
.ph-tools:empty, .ph-tools.is-empty{ display:none; }
.ph-tools-l{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; flex:1 1 auto; }
.ph-tools-r{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ph-tools-l:empty, .ph-tools-r:empty{ display:none; }
.ph-tools .ph-count{ font-size:12px; color:var(--text-light); white-space:nowrap; }

/* Abas — um desenho só. Aliases das 7 implementações legadas. */
.ph-tabs, .ph-tools .cprofile-tabs, .ph-tools #rn-tabs, .ph-tools .year-tabs-wrap, .ph-tools .year-tabs, .ph-tools .quarter-tabs,
.ph-tools .wfc-views, .ph-tools .ldg-tabgs, .ph-tools .ph-tabrow{
  display:flex; align-items:flex-end; gap:2px; border:0 !important; margin:0 !important; padding:0 !important; background:none !important; box-shadow:none; align-self:stretch; min-height:44px; overflow-x:auto; }
.ph-tools .year-tabs-wrap{ flex-direction:row; align-items:flex-end; gap:14px; }
.ph-tools .year-tabs-wrap > *{ min-height:0; }
.ph-tools .year-tabs-wrap .quarter-tabs{ padding-bottom:9px; }
.ph-tab, .ph-tools .cprofile-tab, .ph-tools .rn-tab, .ph-tools .tab-btn, .ph-tools .year-tab, .ph-tools .quarter-tab, .ph-tools .wfc-view, .ph-tools .ldg-tabb{
  background:none !important; border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important; margin:0 !important;
  padding:13px 12px 12px !important; font-family:var(--font) !important; font-size:13px !important; font-weight:600 !important; color:var(--text-light) !important;
  cursor:pointer; white-space:nowrap; line-height:1 !important; height:44px; display:inline-flex; align-items:center; gap:6px; transition:color .12s, border-color .12s; }
.ph-tab:hover, .ph-tools .cprofile-tab:hover, .ph-tools .rn-tab:hover, .ph-tools .tab-btn:hover, .ph-tools .year-tab:hover, .ph-tools .quarter-tab:hover, .ph-tools .wfc-view:hover, .ph-tools .ldg-tabb:hover{ color:var(--text) !important; background:none !important; }
.ph-tab.on, .ph-tab.active, .ph-tools .cprofile-tab.active, .ph-tools .rn-tab.rn-tab-active, .ph-tools .tab-btn.on, .ph-tools .year-tab.active, .ph-tools .quarter-tab.active, .ph-tools .wfc-view.on, .ph-tools .ldg-tabb.on{
  color:var(--text) !important; border-bottom-color:var(--ph-ink) !important; font-weight:700 !important; }
.ph-tools .ldg-tabb.sub{ color:var(--text-mid) !important; }
.ph-tools .ldg-tabg{ display:flex; flex-direction:column; }
.ph-tools .ldg-tabg-l{ padding:6px 12px 0; margin:0; line-height:1; }
.ph-tools .ldg-tabg .ldg-tabb{ height:32px; padding:8px 12px 10px !important; }
.ph-tools .ldg-tabgs{ gap:20px; }
.ph-tools .ldg-tabg-x{ display:none; }
.ph-tools .tab-count, .ph-tools .wfc-view-n{ font-size:10.5px; font-weight:600; color:var(--text-light); background:var(--surface-alt); border-radius:8px; padding:1px 6px; margin-left:2px; }

/* Busca — ícone à esquerda, 32px, 240px. Aliases das buscas legadas. */
.ph-search, .ph-tools .acct-search, .ph-tools .wfc-search, .ph-tools .fc-search{ position:relative; display:inline-flex; align-items:center; width:240px; max-width:100%; }
.ph-search > input, .ph-tools .acct-search input, .ph-tools .wfc-search input, .ph-tools .fc-search input, .ph-tools .ph-search input.fi, .ph-tools .ph-search input.filter-control{
  width:100% !important; height:32px !important; min-height:0 !important; padding:0 10px 0 30px !important; border:1px solid var(--border-strong) !important; border-radius:7px !important;
  font-family:var(--font) !important; font-size:12.5px !important; font-weight:500; background:var(--surface) !important; color:var(--text); outline:none; box-sizing:border-box; flex:none !important; min-width:0 !important; }
.ph-search > input:focus, .ph-tools .acct-search input:focus, .ph-tools .wfc-search input:focus, .ph-tools .fc-search input:focus{ border-color:var(--ph-ink) !important; box-shadow:0 0 0 3px var(--ph-ring); }
.ph-search-ico, .ph-tools .acct-search-ico, .ph-tools .wfc-search-ico, .ph-tools .fc-search-ico{ position:absolute; left:9px; top:50%; transform:translateY(-50%); display:inline-flex; color:var(--text-light); pointer-events:none; }
.ph-search-ico svg{ width:14px; height:14px; }
.ph-tools .crm-q-wrap{ flex:none; width:260px; min-width:0; }
.ph-tools .crm-q-wrap .filter-search{ height:32px; min-height:0; padding:0 30px 0 10px; font-size:12.5px; border-radius:7px; }

/* Selects, inputs, chips e checkboxes nas ferramentas */
.ph-tools select.fi, .ph-tools input.fi:not(.ph-search input), .ph-tools .filter-control, .ph-tools .fsel, .ph-tools select, .ph-tools input:not([type=checkbox]):not([type=radio]){
  height:32px; min-height:0; padding:0 10px; border:1px solid var(--border-strong); border-radius:7px; background:var(--surface); color:var(--text);
  font-family:var(--font); font-size:12.5px; font-weight:500; outline:none; box-sizing:border-box; }
.ph-tools select.fi:focus, .ph-tools .filter-control:focus, .ph-tools input:focus{ border-color:var(--ph-ink); box-shadow:0 0 0 3px var(--ph-ring); }
.ph-tools .filter-select{ width:auto; min-width:120px; max-width:190px; }
.ph-tools select.fi{ min-width:120px; max-width:220px; }
.ph-tools .filter-check, .ph-tools label.ph-chk, .ph-tools > label, .ph-tools-l > label, .ph-tools-r > label{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border:1px solid var(--border); border-radius:7px; background:var(--surface-alt); color:var(--text-mid); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; margin:0; }
.ph-tools .filter-panel{ background:none; border:0; padding:0; margin:0; box-shadow:none; }
.ph-tools .filter-bar{ gap:8px; }
.ph-tools .crm-presets{ display:flex; gap:6px; flex-wrap:wrap; }
.ph-tools .crm-chip{ height:32px; display:inline-flex; align-items:center; }
.ph-tools .wfc-fbtn, .ph-tools .fc-fbtn{ height:32px; }
.ph-tools .wfc-toolbar{ margin:0; }
.ph-tools #wf-cart-views, .ph-tools #chk-views{ align-self:stretch; display:flex; align-items:flex-end; }
.ph-tools #wf-cart-toolbar, .ph-tools #chk-toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-height:44px; }
.ph-tools .btn-xs{ height:32px; padding:0 12px; font-size:12px; border-radius:7px; }

/* Alternadores de visão (segmentado) — um desenho */
.ph-seg, .ph-tools .emp-view-toggle, .ph-tools .crm-view-sw{ display:inline-flex; border:1px solid var(--border-strong); border-radius:7px; overflow:hidden; height:32px; }
.ph-seg button, .ph-tools .emp-view-toggle .emp-view-btn, .ph-tools .crm-view-sw button{ border:0; border-right:1px solid var(--border-strong); background:var(--surface); color:var(--text-mid); padding:0 12px; font-family:var(--font); font-size:12px; font-weight:600; cursor:pointer; height:100%; }
.ph-seg button:last-child, .ph-tools .emp-view-toggle .emp-view-btn:last-child, .ph-tools .crm-view-sw button:last-child{ border-right:0; }
.ph-seg button.active, .ph-tools .emp-view-toggle .emp-view-btn.active, .ph-tools .crm-view-sw button.active{ background:var(--ph-ink); color:#fff; }

/* Régua global (Online · Review Notes · sino) alinhada à linha de identificação */
.top-actions{ top:13px; right:28px; }

/* Legados neutralizados */
.page-actions{ margin-right:0; }
.page-shell > .page-header{ display:none; }
.ph + .page-shell, .ph + .content{ padding-top:20px; }
.ph.ph-legacy + .content > .cmd-stats{ margin-top:0; }

/* 4Ledger: o cabeçalho da empresa É o page header (o topbar do módulo some) */
#page-ledger.ldg-co > .ph, #page-ledger.ldg-co > .topbar{ display:none; }
.ldg-hd.ph{ margin:-20px -28px 18px; padding:0 28px; top:0; border-bottom:1px solid var(--border); color:var(--text); }
.ldg-hd.ph .ph-ctx b{ max-width:60vw; }
.ldg-hd.ph .ph-tools{ flex-wrap:nowrap; }
.ldg-hd.ph .ph-tools-l{ flex:1 1 0; min-width:0; overflow-x:auto; flex-wrap:nowrap; }
.ldg-hd.ph .ph-tools-r{ flex-shrink:0; }
.ldg-hd.ph .ldg-hd-sw{ width:200px; height:32px; font-size:12.5px; }
.ldg-hd.ph .ldg-co-drop{ left:auto; right:0; width:380px; }
.ldg-hd.ph .ldg-bd-chip{ height:32px; border-radius:6px; border-color:var(--border-strong); padding:0 12px; }
.ph-tools .wfc-fbtn.on, .ph-tools .fc-fbtn.on{ border-color:#B9C0C8; background:#EEF0F3; color:var(--text); }
.ph-tools .wfc-kpi.on{ border-color:var(--ph-ink); box-shadow:0 0 0 3px var(--ph-ring); }
.ldg-hd.ph .ph-sub .kv{ white-space:nowrap; }
.ldg-hd.ph .ph-sub .kv + .kv::before{ content:"·"; margin:0 7px; opacity:.5; }
.ldg-hd.ph .ph-sub .kl{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-light); margin-right:4px; }
.ldg-hd.ph .ph-sub .kvv{ font-weight:600; color:var(--text); }

/* Sidebar: um cabeçalho de seção só — SÓ tipografia. A COR fica com o
   styles.css (tema glass, navy): o branco da era escura aqui por cima
   deixava os cabeçalhos fechados invisíveis no vidro claro (22/09, print
   do Victor — sidebar "apagada" quando os grupos começam recolhidos). */
.nst, .menu-sep{ font-size:10px; font-weight:700; letter-spacing:1.2px; padding:10px 12px; margin:8px 0 2px; }

/* Páginas embutidas (financeiro / faturamento / rh): o portal desenha níveis 1–2;
   aqui dentro só ferramentas e indicadores, com o mesmo desenho */
body.embed .sh-title, body.embed .sh-sub{ display:none; }
body.embed .sh{ margin-bottom:10px; }
body.embed .sh:has(> div:first-child:empty){ display:none; }
body.embed .fc-views, body.embed .wfc-views{ min-height:40px; }
body.embed .fc-view{ padding:12px 12px 11px; font-size:13px; }
body.embed .fc-view.on{ border-bottom-color:#2B3847; font-weight:700; }
body.embed .fc-search{ width:240px; } body.embed .fc-search input.fi{ height:32px; padding:0 10px 0 30px; border-width:1px; border-radius:7px; font-size:12.5px; }
body.embed .fc-search input.fi:focus{ border-color:#2B3847; box-shadow:0 0 0 3px rgba(43,56,71,.14); }
body.embed .fc-fbtn{ height:32px; border-radius:7px; }
body.embed .fc-fbtn.on{ border-color:#B9C0C8; background:#EEF0F3; color:#2B3847; }
body.embed .fc-kpi.on{ border-color:#2B3847; box-shadow:0 0 0 3px rgba(43,56,71,.10); }
body.embed .fc-mode{ height:32px; border-radius:7px; }
body.embed .fsel{ height:32px; border-width:1px; border-radius:7px; font-size:12.5px; padding:0 10px; }
body.embed .bar{ min-height:32px; margin-bottom:12px; }
body.embed .bar input, body.embed .bar select{ height:32px; padding:0 10px; border-radius:7px; font-size:12.5px; }
body.embed .bar h3{ font-size:14px; font-weight:700; }

/* Larguras estreitas (tablet / janela reduzida): a régua encolhe (só Review Notes e sino)
   para não cobrir título e breadcrumb; --top-actions-w é remedida pelo JS */
@media (max-width:1000px){
  .top-actions .presence-bar, .top-actions #crm-org-switcher{ display:none !important; }
  :root{ --ph-x:20px; }
  .ph-sub{ max-width:60ch; }
}
/* Mobile (mesmas classes do resto do portal) */
body.mobile-active.mob-show-main .ph, body.mobile-desktop-pinned .ph{ padding:0 12px; }
body.mobile-active.mob-show-main .ph-id, body.mobile-desktop-pinned .ph-id{ padding-right:0; min-height:48px; gap:10px; }
body.mobile-active.mob-show-main .ph-title, body.mobile-desktop-pinned .ph-title, body.mobile-active.mob-show-main .ph .tbt, body.mobile-desktop-pinned .ph .tbt{ font-size:16px; }
body.mobile-active.mob-show-main .ph-sub, body.mobile-desktop-pinned .ph-sub{ display:none; }
body.mobile-active.mob-show-main .ph-tools, body.mobile-desktop-pinned .ph-tools{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
body.mobile-active.mob-show-main .ph-tools-l, body.mobile-desktop-pinned .ph-tools-l{ flex-wrap:nowrap; }
body.mobile-active.mob-show-main .ph-search, body.mobile-desktop-pinned .ph-search{ width:180px; }
@media print{ .ph{ position:static; } .ph-act, .ph-tools{ display:none !important; } }