/* NowDev UI v1.3.1 — ND135: somente o cabeçalho principal usa o gradiente oficial. */
:root {
  --nd-primary-hero-gradient:
    radial-gradient(circle at 88% 12%, rgba(127, 254, 255, .25), transparent 30%),
    linear-gradient(135deg, #0d429f 0%, #1861f1 54%, #0ac0fe 100%);
  --nd-primary-hero-border: rgba(255, 255, 255, .3);
  --nd-primary-hero-muted: rgba(255, 255, 255, .82);
  --nd-primary-hero-shadow: 0 20px 48px rgba(13, 66, 159, .24);
}

html[data-theme="dark"] {
  --nd-primary-hero-gradient:
    radial-gradient(circle at 88% 12%, rgba(127, 254, 255, .18), transparent 30%),
    linear-gradient(135deg, #09275f 0%, #1257c7 54%, #079bcc 100%);
  --nd-primary-hero-border: rgba(127, 218, 255, .28);
  --nd-primary-hero-muted: rgba(235, 247, 255, .82);
  --nd-primary-hero-shadow: 0 22px 52px rgba(0, 0, 0, .34);
}

/*
 * O gradiente pertence somente ao primeiro bloco de apresentação da página.
 * KPIs, cards, painéis, formulários e atalhos abaixo preservam suas superfícies
 * normais definidas pelas camadas oficiais anteriores.
 */
.nf-redesign :where(
  .module-hero,
  .dashboard-hero,
  .suite-hero,
  .support-hero,
  .intelligent-hero,
  .page-header,
  .settings-hub-hero,
  .profile-hero,
  .hero-card
),
.nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child {
  position: relative !important;
  isolation: isolate;
  min-height: clamp(152px, 14vw, 202px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 20px !important;
  margin: 0 0 20px !important;
  padding: clamp(25px, 3.2vw, 40px) !important;
  overflow: hidden !important;
  border: 1px solid var(--nd-primary-hero-border) !important;
  border-radius: 28px !important;
  color: #ffffff !important;
  background-color: #1861f1 !important;
  background-image: var(--nd-primary-hero-gradient) !important;
  box-shadow: var(--nd-primary-hero-shadow) !important;
}

.nf-redesign :where(
  .module-hero,
  .dashboard-hero,
  .suite-hero,
  .support-hero,
  .intelligent-hero,
  .page-header,
  .settings-hub-hero,
  .profile-hero,
  .hero-card
)::before,
.nf-redesign :where(
  .module-hero,
  .dashboard-hero,
  .suite-hero,
  .support-hero,
  .intelligent-hero,
  .page-header,
  .settings-hub-hero,
  .profile-hero,
  .hero-card
)::after,
.nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child::before,
.nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child::after {
  pointer-events: none;
}

.nf-redesign :where(
  .module-hero,
  .dashboard-hero,
  .suite-hero,
  .support-hero,
  .intelligent-hero,
  .page-header,
  .settings-hub-hero,
  .profile-hero,
  .hero-card
) > *,
.nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.nf-redesign :where(
  .module-hero,
  .dashboard-hero,
  .suite-hero,
  .support-hero,
  .intelligent-hero,
  .page-header,
  .settings-hub-hero,
  .profile-hero,
  .hero-card
) :where(h1,h2,h3,strong),
.nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child :where(h1,h2,h3,strong) {
  color: #ffffff !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  opacity: 1 !important;
}

.nf-redesign :where(
  .module-hero,
  .dashboard-hero,
  .suite-hero,
  .support-hero,
  .intelligent-hero,
  .page-header,
  .settings-hub-hero,
  .profile-hero,
  .hero-card
) :where(.muted,p:not(.page-kicker),small),
.nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child :where(.muted,p:not(.page-kicker),small) {
  color: var(--nd-primary-hero-muted) !important;
}

.nf-redesign :where(
  .module-hero,
  .dashboard-hero,
  .suite-hero,
  .support-hero,
  .intelligent-hero,
  .page-header,
  .settings-hub-hero,
  .profile-hero,
  .hero-card
) .page-kicker,
.nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child .page-kicker {
  color: #bffcff !important;
}

.nf-redesign :where(
  .module-hero,
  .dashboard-hero,
  .suite-hero,
  .support-hero,
  .intelligent-hero,
  .page-header,
  .settings-hub-hero,
  .profile-hero,
  .hero-card
) :where(.btn-primary,.btn-outline,.btn-ghost,.btn.ghost),
.nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child :where(.btn-primary,.btn-outline,.btn-ghost,.btn.ghost) {
  border-color: rgba(255, 255, 255, .52) !important;
}

.nf-redesign :where(
  .module-hero,
  .dashboard-hero,
  .suite-hero,
  .support-hero,
  .intelligent-hero,
  .page-header,
  .settings-hub-hero,
  .profile-hero
) .btn-primary,
.nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child .btn-primary {
  color: #0d4cab !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(3, 30, 80, .2) !important;
}

.nf-redesign :where(
  .module-hero,
  .dashboard-hero,
  .suite-hero,
  .support-hero,
  .intelligent-hero,
  .page-header,
  .settings-hub-hero,
  .profile-hero
) :where(.btn-outline,.btn-ghost,.btn.ghost),
.nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child :where(.btn-outline,.btn-ghost,.btn.ghost) {
  color: #ffffff !important;
  background: rgba(4, 35, 91, .22) !important;
}

/* Componentes internos do próprio cabeçalho permanecem legíveis como vidro. */
.nf-redesign :where(.intelligent-hero,.profile-hero) :where(
  .smart-highlight-card,
  .business-health-gauge,
  .profile-completion-card
) {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .24) !important;
  background: rgba(4, 35, 91, .2) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

.nf-redesign :where(.intelligent-hero,.profile-hero) :where(
  .smart-highlight-card,
  .business-health-gauge,
  .profile-completion-card
) :where(strong,span,small) {
  color: #ffffff !important;
}

/* Layouts independentes: só o cabeçalho do atendimento e do caixa recebe azul. */
:where(.support-staff-body,.support-portal-body) .support-staff-hero,
.pdv-terminal-body .pdv-workstation-header {
  color: #ffffff !important;
  border-color: var(--nd-primary-hero-border) !important;
  background-color: #1861f1 !important;
  background-image: var(--nd-primary-hero-gradient) !important;
  box-shadow: var(--nd-primary-hero-shadow) !important;
}

:where(.support-staff-body,.support-portal-body) .support-staff-hero :where(h1,h2,h3,strong),
.pdv-terminal-body .pdv-workstation-header :where(h1,h2,h3,strong) {
  color: #ffffff !important;
}

:where(.support-staff-body,.support-portal-body) .support-staff-hero :where(p,small,.muted),
.pdv-terminal-body .pdv-workstation-header :where(p,small,.muted) {
  color: var(--nd-primary-hero-muted) !important;
}

@media (max-width: 720px) {
  .nf-redesign :where(
    .module-hero,
    .dashboard-hero,
    .suite-hero,
    .support-hero,
    .intelligent-hero,
    .page-header,
    .settings-hub-hero,
    .profile-hero,
    .hero-card
  ),
  .nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child {
    min-height: 0 !important;
    display: block !important;
    padding: 23px !important;
    border-radius: 22px !important;
  }

  .nf-redesign :where(
    .module-hero,
    .dashboard-hero,
    .suite-hero,
    .support-hero,
    .intelligent-hero,
    .page-header,
    .settings-hub-hero,
    .profile-hero,
    .hero-card
  ) .hero-actions,
  .nf-redesign .page-stack > :where(.page-head,.commerce-page-head):first-child :where(.hero-actions,.commerce-head-actions) {
    margin-top: 16px;
  }
}

@media print {
  .pdv-terminal-body .pdv-workstation-header { display: none !important; }
}