/* Design System — cabeçalho de página, abas internas e filtros aplicados: UM padrão só (docs/design-system-page-header.md).
   Camada canônica, carregada por último: vale para todas as páginas (Central, CRM, Comercial, Marketing, Tarefas,
   Workspace, Configurações, Base de conhecimento…), por cima das variações antigas.

   Ordem única (MixUI.modulePageHeader):
     1. título (MixUI.pageTitle: ícone + título)          | barra de ferramentas à direita (+ segundo andar)
     2. menu de abas interno (MixUI.tabs), logo abaixo, com espaçamento padrão
     3. filtros aplicados como etiquetas com X (MixUI.filterBar)
   Abas: todas as variações antigas (.mix-tabs, .mix-subtabs, .ta-tabs, .task-page-tabs, .crm-360-tabs,
   .mix-module-navigation-tabs, .referrals-mode-switch, .structure-employment-tabs, .department-workspace-tabs,
   .trainings-tabs) têm o mesmo desenho do componente único MixUI.tabs. */

/* ---------- 1. Cabeçalho ---------- */
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "title tools" "tabs tabs" "filters filters" !important;
  align-items: center !important;
  gap: 0 var(--mix-space-3, 12px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header::before { content: none !important; }
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header > .mix-module-page-header__title {
  grid-area: title !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header > .mix-module-page-header__title h1 {
  margin: 0 !important;
  overflow: hidden;
  font-size: var(--mix-type-page-size, 20px) !important;
  font-weight: 700 !important;
  line-height: var(--mix-type-page-line, 1.2) !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--mix-navy, #17283e) !important;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header .mix-page-header__icon {
  display: inline-grid !important;
  flex: 0 0 32px !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border: 1px solid var(--mix-liquid-border, rgb(255 255 255 / 50%)) !important;
  border-radius: 10px !important;
  background: var(--mix-liquid-fill-soft, rgb(255 255 255 / 40%)) !important;
  color: var(--mix-blue, #1470b8) !important;
  box-shadow: var(--mix-liquid-shadow, none) !important;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header .mix-page-header__icon svg { width: 16px !important; height: 16px !important; }
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header > .mix-module-page-header__tools {
  grid-area: tools !important;
  align-self: center !important;
  justify-self: end !important;
  min-width: 0;
  padding: 0 !important;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header > .mix-module-page-header__tabs {
  grid-area: tabs !important;
  justify-self: start !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: var(--mix-space-3, 12px) 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header > .mix-module-page-header__tabs:empty,
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header > .mix-module-page-header__filters:empty { display: none !important; }
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header > .mix-module-page-header__filters { grid-area: filters !important; min-width: 0; margin: 10px 0 0 !important; }
/* Espaço padrão entre o cabeçalho e o conteúdo da página. */
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header + * { margin-top: var(--mix-space-4, 16px) !important; }

/* ---------- 2. Abas internas: um desenho só ----------
   #81: menu de abas menor e mais delicado que o título (12px, peso 500, pílula 28px); vale para todo o sistema. */
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) :is(.mix-tabs, .mix-subtabs, .ta-tabs, .task-page-tabs, .crm-360-tabs, .mix-module-navigation-tabs, .referrals-mode-switch, .structure-employment-tabs, .department-workspace-tabs, .trainings-tabs) {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 2px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0;
  padding: 2px !important;
  overflow-x: auto !important;
  border: 1px solid var(--mix-liquid-border, rgb(255 255 255 / 50%)) !important;
  border-radius: 12px !important;
  background: var(--mix-liquid-fill-soft, rgb(255 255 255 / 40%)) !important;
  box-shadow: var(--mix-liquid-shadow, none) !important;
  backdrop-filter: var(--mix-liquid-blur, blur(20px)) !important;
  -webkit-backdrop-filter: var(--mix-liquid-blur, blur(20px)) !important;
  scrollbar-width: none;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) :is(.mix-tabs, .mix-subtabs, .ta-tabs, .task-page-tabs, .crm-360-tabs, .mix-module-navigation-tabs, .referrals-mode-switch, .structure-employment-tabs, .department-workspace-tabs, .trainings-tabs) > :is(button, a) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 var(--mix-space-3, 12px) !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mix-muted, #5f6f86) !important;
  font: 500 var(--mix-type-label-size, 12px)/1 var(--mix-font-sans, inherit) !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) :is(.mix-tabs, .mix-subtabs, .ta-tabs, .task-page-tabs, .crm-360-tabs, .mix-module-navigation-tabs, .referrals-mode-switch, .structure-employment-tabs, .department-workspace-tabs, .trainings-tabs) > :is(button, a):hover { background: rgb(255 255 255 / 40%) !important; color: var(--mix-navy, #17283e) !important; }
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) :is(.mix-tabs, .mix-subtabs, .ta-tabs, .task-page-tabs, .crm-360-tabs, .mix-module-navigation-tabs, .referrals-mode-switch, .structure-employment-tabs, .department-workspace-tabs, .trainings-tabs) > :is(button, a):is(.active, .is-active, [aria-current="page"], [aria-selected="true"]) {
  background: rgb(255 255 255 / 82%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 4px 12px -8px rgb(24 61 96 / 55%) !important;
  color: var(--mix-navy, #17283e) !important;
  font-weight: 600 !important;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) :is(.mix-tabs, .mix-subtabs, .ta-tabs, .task-page-tabs, .crm-360-tabs, .mix-module-navigation-tabs, .referrals-mode-switch, .structure-employment-tabs, .department-workspace-tabs, .trainings-tabs) > :is(button, a) svg { width: 14px !important; height: 14px !important; }
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) :is(.mix-tabs, .mix-subtabs, .ta-tabs, .task-page-tabs, .crm-360-tabs, .mix-module-navigation-tabs) > :is(button, a):disabled { opacity: .45; cursor: not-allowed; }

/* Botões com texto na barra (ex.: Criar formulário) mantêm o tamanho do botão da DS. */
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header .mix-page-toolbar .mf-toolbar-actions { display: inline-flex; gap: var(--mix-space-2, 8px); }
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header .mix-page-toolbar .mf-toolbar-actions .mix-btn { width: auto !important; min-width: 0 !important; padding: 0 14px !important; }

/* ---------- 3. Filtros aplicados: etiquetas com X (MixUI.filterBar) ---------- */
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header > .mix-module-page-header__filters .mix-filter-bar { margin: 0 !important; }
/* Variante "filtros na linha das abas" (MixUI.modulePageHeader({ inlineFilters: true })): as etiquetas ficam à direita
   das abas, na mesma linha, e o cabeçalho não cresce. Sem espaço, a fileira rola na horizontal e o "Limpar filtros"
   fica sempre visível na ponta direita. Para páginas de altura fixa (Inbox: o campo de escrever não sai da tela). */
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header.mix-module-page-header--inline-filters {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto !important;
  grid-template-areas: "title title tools" "tabs filters filters" !important;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header--inline-filters > .mix-module-page-header__filters {
  justify-self: end !important;
  align-self: center !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 12px 0 0 !important;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header--inline-filters > .mix-module-page-header__filters .mix-filter-bar {
  flex-wrap: nowrap !important;
  max-width: 100% !important;
  margin: -3px 0 !important;
  padding: 3px 0 3px 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header--inline-filters > .mix-module-page-header__filters .mix-filter-bar::-webkit-scrollbar { display: none; }
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header--inline-filters > .mix-module-page-header__filters .mix-filter-tag { flex: 0 0 auto !important; max-width: none !important; }
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header--inline-filters > .mix-module-page-header__filters .mix-filter-tag strong { max-width: 180px; }
html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header--inline-filters > .mix-module-page-header__filters .mix-filter-bar__clear {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--mix-bg, #f1f4f8) !important;
  box-shadow: -10px 0 10px -2px var(--mix-bg, #f1f4f8);
}

@media (max-width: 700px) {
  html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header { grid-template-areas: "title tools" "tabs tabs" "filters filters" !important; }
  /* No celular as abas ocupam a largura: as etiquetas descem para a linha própria, ainda numa fileira só (sem quebrar). */
  html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header.mix-module-page-header--inline-filters { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "title tools" "tabs tabs" "filters filters" !important; }
  html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header--inline-filters > .mix-module-page-header__filters { justify-self: stretch !important; margin: 8px 0 0 !important; }
  html[data-mix-theme="mix-fiscal-default"] body #app:not(#mix-page-header-layer) header.mix-module-page-header > .mix-module-page-header__title h1 { font-size: 1.1rem !important; }
}