/* ============================================================
   GF Page Header — HERO padrão das Pages custom GF (v2)
   Card navy (referência: Controle de Limpeza) unificado:
   gradiente #0d2b3e→#15455f, radius 14, título branco 22/700,
   subtítulo 13 .8, ações à direita (ghost / primária dourada).
   Tokens em tokens.css (--gf-hero-*).
   ============================================================ */

.gf-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--gf-hero-padding, 18px 24px);
  background: var(--gf-hero-bg, linear-gradient(135deg, #0d2b3e 0%, #15455f 100%));
  color: #fff;
  border: none;
  border-radius: var(--gf-hero-radius, 14px);
  box-shadow: var(--gf-hero-shadow, 0 6px 20px rgba(13, 43, 62, .25));
  margin: 0 0 18px;
}

/* Grid: ícone à esquerda (2 linhas), título e subtítulo empilhados ao lado.
   Funciona pros 3 markups existentes: icon+h1 / icon+h1+p / icon+div(h1+p).
   !important vence o flex-direction:column legado do desk_override_v4. */
.gf-page-header .gf-page-header__title {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center !important;
  column-gap: 12px;
  row-gap: 0;
  flex-shrink: 0;
  min-width: 0;
}

.gf-page-header .gf-page-header__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.gf-page-header__title > h1,
.gf-page-header__title > div,
.gf-page-header__title > .gf-page-header__subtitle {
  grid-column: 2;
  min-width: 0;
}

.gf-page-header__title > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gf-page-header__icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}

.gf-page-header h1 {
  font-size: var(--gf-hero-title-size, 22px);
  font-weight: var(--gf-weight-bold, 700);
  color: #fff;
  margin: 0;
  font-family: var(--gf-font-sans);
}

.gf-page-header .gf-page-header__subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: #fff !important;
  opacity: .85;
  font-family: var(--gf-font-sans);
}

/* Ações movidas pelo uxfixes (v4) também viram ghost sobre o navy */
.gf-page-header .gf-page-header__actions [data-gf-moved-action] {
  background: rgba(255, 255, 255, .14);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .35);
}

.gf-page-header .gf-page-header__actions [data-gf-moved-action]:hover {
  background: rgba(255, 255, 255, .26);
}

.gf-page-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 auto;
}

/* Ações sobre o fundo navy: botões ghost por padrão, primária dourada */
.gf-page-header .gf-topnav__action {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.gf-page-header .gf-topnav__action:hover {
  background: rgba(255, 255, 255, .26);
  color: #fff;
}

.gf-page-header .gf-topnav__action--primary {
  background: var(--gf-hero-accent, #E7B846);
  color: #0d2b3e;
  border: none;
  font-weight: 700;
}

.gf-page-header .gf-topnav__action--primary:hover {
  background: #f0c860;
  color: #0d2b3e;
}

/* Inputs e selects dentro do hero: pílula branca (padrão limpeza) */
.gf-page-header input[type="search"],
.gf-page-header input[type="text"],
.gf-page-header input[type="date"],
.gf-page-header select {
  border: none;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  background: #fff;
  color: #0d2b3e;
}

/* Hero injetado em list views nativas (ex.: Reservas) */
.gf-hero-list {
  margin: 10px 20px 4px;
}

@media (max-width: 768px) {
  .gf-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
  }
  .gf-page-header__actions {
    justify-content: flex-start;
  }
  .gf-hero-list {
    margin: 8px 10px 4px;
  }
}

/* gf-mobile-480 — ajuste fino pra telas de celular */
@media (max-width: 480px) {
  .gf-page-header h1 { font-size: 18px; }
  .gf-page-header .gf-page-header__icon { font-size: 22px; }
  .gf-page-header .gf-page-header__subtitle { font-size: 12px; }
  .gf-page-header .gf-topnav__action { padding: 7px 10px; font-size: 12px; }
}