/* DMI Utilities — common feedback, settings and administrative primitives. */
.modal-bg { background: var(--dmi-overlay) !important; backdrop-filter: blur(5px) !important; }
.modal { border-radius: var(--dmi-radius-lg) var(--dmi-radius-lg) 0 0 !important; box-shadow: 0 -10px 36px rgba(9,39,83,.18); }
.modal-header { border-color: var(--dmi-border) !important; }
.modal-title { color: var(--dmi-primary) !important; }
.modal-close { background: var(--dmi-primary-soft) !important; color: var(--dmi-primary) !important; }
.toast { border-radius: var(--dmi-radius-md) !important; box-shadow: var(--dmi-shadow-md) !important; }
.toast.success { background: var(--dmi-success) !important; }
.toast.error { background: var(--dmi-error) !important; }
.empty-state { border-radius: var(--dmi-radius-lg); color: var(--dmi-text-secondary) !important; }
.empty-title { color: var(--dmi-text) !important; }
.faq { border-bottom-color: var(--dmi-border) !important; }
.faq-q { color: var(--dmi-primary) !important; }
.faq-a { color: var(--dmi-text-secondary) !important; }

/* Secondary product pages and settings forms. */
#page-prefsmenu .acc-row, #page-ferramentas .acc-row { border-color: var(--dmi-border) !important; border-radius: var(--dmi-radius-md) !important; background: var(--dmi-surface) !important; }
#page-prefsmenu .acc-row:hover, #page-ferramentas .acc-row:hover { border-color: var(--dmi-border-strong) !important; background: #fbfcfe !important; }
.sp-save { min-height: 44px; background: var(--dmi-primary) !important; color: #fff !important; border-radius: var(--dmi-radius-sm) !important; box-shadow: var(--dmi-shadow-sm) !important; }
.sp-save:hover { background: var(--dmi-primary-hover) !important; }

/* Régua desktop do Funil: o conteúdo começa a 18px da área útil, logo após
   a sidebar. Estes módulos usam a mesma largura contínua, sem uma segunda
   caixa centralizada ou recuos diferentes entre si. */
@media (min-width:1024px) {
  #page-dashboard.active,
  #page-leads.active,
  #page-agenda.active,
  #page-followup.active,
  #page-relatorios.active,
  #page-ferramentas.active,
  #page-indicacao.active,
  #page-prefsmenu.active {
    box-sizing:border-box !important;
    width:calc(100% + 36px) !important;
    max-width:none !important;
    margin-left:-18px !important;
    margin-right:-18px !important;
    padding:0 !important;
  }
  /* Perfil e todas as telas abertas a partir dele usam exatamente a mesma
     borda útil do Kanban (18px), inclusive quando exibem formulários. */
  #page-conta.active,
  #page-dados.active,
  #page-endereco.active,
  #page-creci.active,
  #page-profissional.active,
  #page-redes.active,
  #page-integemail.active {
    box-sizing:border-box !important;
    width:calc(100% + 36px) !important;
    max-width:none !important;
    margin-left:-18px !important;
    margin-right:-18px !important;
    padding:0 !important;
  }

  /* O desktop antigo escondia todas as setas de subpágina. Nas telas que
     partem do Perfil, o retorno precisa ficar sempre disponível. */
  #page-dados .subpage-top,
  #page-endereco .subpage-top,
  #page-creci .subpage-top,
  #page-profissional .subpage-top,
  #page-redes .subpage-top,
  #page-integemail .subpage-top {
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    position:static !important;
  }
  #page-dados .subpage-back,
  #page-endereco .subpage-back,
  #page-creci .subpage-back,
  #page-profissional .subpage-back,
  #page-redes .subpage-back,
  #page-integemail .subpage-back {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:36px;
    height:36px;
    background:var(--dmi-primary) !important;
    color:#fff !important;
    border:0;
    border-radius:50% !important;
    font-size:20px;
  }
}

/* Admin is intentionally information-dense while following the same tokens. */
.adm-hero { border-radius: var(--dmi-radius-lg) !important; background: linear-gradient(135deg,var(--dmi-primary-active),var(--dmi-primary-hover)) !important; }
.adm-atalho, .adm-kpi, .adm-bar, .adm-users, .adm-ad, .adm-health-card { border-color: var(--dmi-border) !important; border-radius: var(--dmi-radius-md) !important; box-shadow: var(--dmi-shadow-xs) !important; }
.adm-atalho:hover { border-color: var(--dmi-border-strong); box-shadow: var(--dmi-shadow-sm) !important; transform: translateY(-2px); }
.adm-kpi .kn, .adm-bar .bt, .adm-uhead .ut, .adm-ad .adt2 { color: var(--dmi-primary) !important; }
.adm-kpi .kl, .adm-hint, .adm-lbl, .adm-ue, .adm-health-head span { color: var(--dmi-text-secondary) !important; }
.adm-adbtn { min-height: 42px; background: var(--dmi-primary) !important; border-radius: var(--dmi-radius-sm) !important; }
.adm-mini { border-color: var(--dmi-border) !important; border-radius: var(--dmi-radius-sm) !important; color: var(--dmi-primary) !important; }
.adm-mini:hover { background: var(--dmi-primary-soft) !important; }

@media (min-width:768px) {
  .modal { max-width: min(680px,calc(100vw - 64px)) !important; margin: auto; border-radius: var(--dmi-radius-lg) !important; }
  .modal-bg { align-items: center !important; }
}
@media (max-width:767px) {
  .adm-atalhos { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* Contraste dos títulos de navegação e das seções de primeiro nível.
   O design system aplicava o azul institucional também sobre cabeçalhos
   azuis; no tema escuro, os títulos diretos da página herdavam a mesma cor
   do fundo. O escopo direto preserva títulos internos dos cartões claros. */
.page > .subpage-top .subpage-title,
.page > .subpage-top .subpage-back {
  color:#fff !important;
}
.page > .subpage-top .subpage-title {
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
html[data-dmi-theme="dark"] .page.active > .page-title,
html[data-dmi-theme="dark"] .page.active > .rel-title {
  color:#f4f7fb !important;
}
html[data-dmi-theme="dark"] .page.active > .section-title {
  color:#e2c970 !important;
}
@media (prefers-reduced-motion:reduce) { .toast, .modal, .adm-atalho { transition:none !important; } }