/* Central Gestão — ajustes visuais globais (v102).
   Só aparência: cabeçalho do topo, título de página no padrão de Clientes e menu
   recolhível no celular. Nenhum campo, evento ou integração é alterado. */

/* Cabeçalho do topo: o bloco da direita (usuário e Sair) nunca é empurrado para fora. */
.top-header { gap: 1rem; min-width: 0; }
.top-header .header-left { flex: 1 1 auto; min-width: 0; gap: 0.9rem; overflow: hidden; }
.top-header .header-right { flex: 0 0 auto; display: flex; align-items: center; gap: 0.75rem; }
.top-header .context-selectors, .top-header .context-box { min-width: 0; }
.top-header #header-context-select { max-width: min(420px, 34vw); text-overflow: ellipsis; }
.top-header .segment-pills { min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.top-header .segment-pill { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 1.35; }
.top-header #header-operational-badge { flex: 0 0 auto; display: flex; gap: 0.35rem; align-items: center; }
.top-header #header-operational-badge .status-badge { white-space: nowrap; font-size: 0.72rem; }
.top-header .user-profile { min-width: 0; }
.top-header .user-name, .top-header .user-role { display: block; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Selos de segmento só cabem inteiros em telas largas; abaixo disso ficam ocultos. */
@media (max-width: 1600px) {
  .top-header .segment-pills { display: none; }
}
@media (max-width: 1180px) {
  .top-header #header-operational-badge { display: none; }
}

/* Título de página: mesmo tamanho da tela de Clientes (18px, peso 750). */
#page-content :is(h1.page-title, h2.page-title, .page-header h1, .page-header h2, .ca-header h2, .pr-page-header h2) {
  font-size: 18px !important;
  font-weight: 750 !important;
  line-height: 1.3 !important;
  color: #243c5c !important;
  letter-spacing: 0 !important;
}

/* Botão do menu: só aparece no celular/tablet estreito. */
.cg-mobile-menu-btn { display: none; }
.cg-menu-backdrop { display: none; }
body.pos-fullscreen-active .cg-mobile-menu-btn, body.pos-fullscreen-active .cg-menu-backdrop { display: none !important; }

@media (max-width: 900px) {
  .cg-mobile-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border-color, #cbd5e1);
    background: #fff; color: #0f172a; font-size: 1.25rem; cursor: pointer;
  }
  .cg-mobile-menu-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

  /* Menu lateral vira gaveta: fora da tela até tocar no botão. */
  /* #sidebar: precisa vencer navigation_stability.css (position: sticky por ID). */
  body:not(.pos-fullscreen-active) .app-container > #sidebar,
  body:not(.pos-fullscreen-active) .app-container > #sidebar.collapsed {
    position: fixed; top: 0; bottom: 0; left: 0; height: 100dvh; max-height: 100dvh;
    width: min(280px, 84vw) !important;
    transform: translateX(-102%); transition: transform 0.22s ease; z-index: 1200;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  body.cg-menu-open:not(.pos-fullscreen-active) .app-container > #sidebar {
    transform: translateX(0); box-shadow: 12px 0 32px rgba(15, 23, 42, 0.35);
  }
  /* Na gaveta, o menu sempre aparece expandido (com nomes). */
  body:not(.pos-fullscreen-active) .app-container > #sidebar.collapsed .menu-item-label,
  body:not(.pos-fullscreen-active) .app-container > #sidebar.collapsed .menu-section-title { display: revert; }
  body.cg-menu-open .cg-menu-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 1150;
  }
  .app-container > .main-wrapper { width: 100%; margin-left: 0 !important; }

  /* Cabeçalho do topo no celular: uma linha, só o essencial. */
  .top-header { height: auto; min-height: 56px; padding: 0.4rem 0.75rem; gap: 0.5rem; }
  .top-header .header-left { gap: 0.5rem; }
  .top-header .context-label { display: none; }
  .top-header #header-context-select { max-width: 100%; width: 100%; font-size: 0.8rem; }
  .top-header .segment-pills, .top-header #header-operational-badge, .top-header .user-info,
  .top-header .header-right > span { display: none; }
  .top-header .context-selectors, .top-header .context-box { flex: 1 1 auto; width: 100%; }
  .top-header .header-right { gap: 0.4rem; }
  .content-body { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .app-container > #sidebar { transition: none !important; }
}