/*
  GO-CONTACT — tema do Portal MH

  Carregado no FIM da página (depois dos ~80 blocos de estilo internos),
  junto com css/mh-ui.css. Liga os elementos da GO-CONTACT ao estilo comum
  das dashboards (o mesmo da Storys): fundo, painéis, indicadores,
  separadores, botões, campos, janelas e letra.

  As regras começam por "html:not(#mh-tema) body" (vale como um #id) e usam
  !important, porque o index.html tem muitas regras com #id e !important.

  html.mh-embutido = aberta dentro do portal: sem título, utilizador, sair
  e alterar password (estão no portal).
*/

html:root {
  --bg: #0b0d14 !important;
  --bg2: #0d1019 !important;
  --panel: #0f121b !important;
  --panel2: #131726 !important;
  --text: #e6e9f2 !important;
  --muted: #8b93a7 !important;
  --line: rgba(255, 255, 255, .06) !important;
  --good: #34d399 !important;
  --warn: #f59e0b !important;
  --bad: #fb7185 !important;
  --accent: #22d3ee !important;
}

/* ---------------- Base ---------------- */

html:not(#mh-tema) body {
  background: var(--mh-fundo) !important;
  color: var(--mh-texto) !important;
  font-family: var(--mh-letra) !important;
  -webkit-font-smoothing: antialiased;
}

html:not(#mh-tema) body * {
  font-family: inherit !important;
}

html:not(#mh-tema) body .container {
  max-width: 1440px !important;
  padding: 24px !important;
}

/* ---------------- Topo (título, filtros, acções) ---------------- */

html:not(#mh-tema) body .dashboard-hero,
html:not(#mh-tema) body .top > .panel.dashboard-hero {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(#mh-tema) body .dashboard-hero h1 {
  margin: 0 0 16px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: var(--mh-texto) !important;
}

html.mh-embutido:not(#mh-tema) body .dashboard-hero h1,
html.mh-embutido:not(#mh-tema) body #go-auth-userbar,
html.mh-embutido:not(#mh-tema) body .go-user-profile-v235,
html.mh-embutido:not(#mh-tema) body .go-user-name-v235 {
  display: none !important;
}

html:not(#mh-tema) body .filters-row {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(#mh-tema) body .filters-row select,
html:not(#mh-tema) body .go-date-nav-v167 button,
html:not(#mh-tema) body .selector-wrap select,
html:not(#mh-tema) body select {
  min-height: 42px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 10px !important;
  background-color: var(--mh-campo) !important;
  color: var(--mh-texto) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

html:not(#mh-tema) body select:focus,
html:not(#mh-tema) body input:focus {
  outline: 2px solid rgba(34, 211, 238, .6) !important;
  outline-offset: 1px !important;
}

/* Botões de acção (Gerar Resumo Executivo, Gerir agentes, …) */
html:not(#mh-tema) body .action-buttons button,
html:not(#mh-tema) body .action-buttons a,
html:not(#mh-tema) body #executive-summary-btn,
html:not(#mh-tema) body #manage-agents-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 15px !important;
  border: 1px solid var(--mh-linha-forte) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--mh-texto) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  transform: none !important;
}

html:not(#mh-tema) body .action-buttons button:hover,
html:not(#mh-tema) body .action-buttons a:hover,
html:not(#mh-tema) body #executive-summary-btn:hover,
html:not(#mh-tema) body #manage-agents-btn:hover {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(34, 211, 238, .35) !important;
  filter: none !important;
}

/* Aviso de ausentes (passa para a barra de cima do portal no ponto 6) */
html:not(#mh-tema) body #absent-warning {
  border: 1px solid rgba(251, 113, 133, .35) !important;
  border-radius: 999px !important;
  background: rgba(251, 113, 133, .08) !important;
  color: #fecdd3 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ---------------- Indicadores (KPI) ---------------- */

html:not(#mh-tema) body .quick .kpi,
html:not(#mh-tema) body #quick-kpis .kpi {
  min-height: 0 !important;
  padding: 17px !important;
  border: 1px solid rgba(255, 255, 255, .05) !important;
  border-radius: 14px !important;
  background: var(--mh-mosaico) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

html:not(#mh-tema) body #quick-kpis .kpi.status-filter-kpi:hover,
html:not(#mh-tema) body #quick-kpis .kpi.active,
html:not(#mh-tema) body #quick-kpis .kpi.selected {
  border-color: rgba(34, 211, 238, .3) !important;
  box-shadow: 0 0 24px rgba(34, 211, 238, .08) !important;
}

html:not(#mh-tema) body #quick-kpis .kpi .label {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--mh-suave) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}

html:not(#mh-tema) body #quick-kpis .kpi .value {
  margin-top: 10px !important;
  color: var(--mh-texto) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}

html:not(#mh-tema) body #quick-kpis .kpi small {
  color: var(--mh-mudo) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

html:not(#mh-tema) body .calls-direction {
  border: 1px solid var(--mh-linha) !important;
  border-radius: 10px !important;
  background: var(--mh-campo) !important;
  box-shadow: none !important;
}

/* ---------------- Separadores ---------------- */

html:not(#mh-tema) body .operational-tabs-panel,
html:not(#mh-tema) body #operational-tabs {
  padding: 5px !important;
  border: 1px solid var(--mh-linha) !important;
  border-radius: 12px !important;
  background: #0d1019 !important;
  box-shadow: none !important;
}

html:not(#mh-tema) body .operational-tabs-panel {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html:not(#mh-tema) body #operational-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  width: fit-content !important;
  max-width: 100% !important;
}

html:not(#mh-tema) body #operational-tabs .operational-tab-btn,
html:not(#mh-tema) body button.operational-tab-btn {
  width: auto !important;
  min-height: 38px !important;
  padding: 0 15px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--mh-mudo) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  grid-column: auto !important;
}


html:not(#mh-tema) body #operational-tabs .operational-tab-btn:hover,
html:not(#mh-tema) body button.operational-tab-btn:hover {
  background: rgba(255, 255, 255, .04) !important;
  color: var(--mh-texto) !important;
}

html:not(#mh-tema) body #operational-tabs .operational-tab-btn.active,
html:not(#mh-tema) body .operational-tabs-panel .operational-tab-btn.active,
html:not(#mh-tema) body button.operational-tab-btn.active {
  border-color: rgba(34, 211, 238, .28) !important;
  background: rgba(34, 211, 238, .08) !important;
  color: var(--mh-ciano-claro) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, .10) !important;
}

/* ---------------- Painéis e títulos ---------------- */

html:not(#mh-tema) body .panel:not(.dashboard-hero),
html:not(#mh-tema) body .hourly-chart-card,
html:not(#mh-tema) body .performance-card {
  border: 1px solid var(--mh-linha) !important;
  border-radius: 18px !important;
  background: var(--mh-painel) !important;
  box-shadow: var(--mh-sombra) !important;
}

html:not(#mh-tema) body .panel h2,
html:not(#mh-tema) body .section-title,
html:not(#mh-tema) body .ops-section-title,
html:not(#mh-tema) body .expanded-section-title,
html:not(#mh-tema) body .agent-v25-section-title {
  color: var(--mh-texto) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

html:not(#mh-tema) body .eyebrow,
html:not(#mh-tema) body .legend-title,
html:not(#mh-tema) body .agent-detail-eyebrow {
  color: var(--mh-ciano-claro) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

html:not(#mh-tema) body .panel p,
html:not(#mh-tema) body .note,
html:not(#mh-tema) body .sub,
html:not(#mh-tema) body .muted {
  color: var(--mh-mudo) !important;
}

/* Cartões dos agentes e mosaicos internos */
html:not(#mh-tema) body .state-card {
  border: 1px solid var(--mh-linha) !important;
  border-radius: 18px !important;
  background: var(--mh-painel) !important;
  box-shadow: var(--mh-sombra) !important;
}

html:not(#mh-tema) body .state-card .metric,
html:not(#mh-tema) body .metrics .metric,
html:not(#mh-tema) body .info-box,
html:not(#mh-tema) body .info-grid > div {
  border: 1px solid rgba(255, 255, 255, .05) !important;
  border-radius: 12px !important;
  background: var(--mh-mosaico) !important;
  box-shadow: none !important;
}

html:not(#mh-tema) body .metric .label,
html:not(#mh-tema) body .state-card .label {
  color: var(--mh-suave) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

html:not(#mh-tema) body .metric .value,
html:not(#mh-tema) body .state-card .value {
  color: var(--mh-texto) !important;
  font-weight: 800 !important;
}

/* Etiquetas (Estável, EA, NN, …) */
html:not(#mh-tema) body .pill,
html:not(#mh-tema) body .legend-state {
  border: 1px solid var(--mh-linha) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .06) !important;
  color: var(--mh-texto-2) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* ---------------- Tabelas ---------------- */

html:not(#mh-tema) body .table-wrap,
html:not(#mh-tema) body .table-scroll {
  border: 1px solid var(--mh-linha) !important;
  border-radius: 14px !important;
  background: var(--mh-painel) !important;
}

html:not(#mh-tema) body table th {
  background: transparent !important;
  color: var(--mh-seccao) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-color: var(--mh-linha) !important;
}

html:not(#mh-tema) body table td {
  border-color: rgba(255, 255, 255, .04) !important;
}

/* ---------------- Janelas (agentes, detalhe, datas) ---------------- */

html:not(#mh-tema) body .agents-panel,
html:not(#mh-tema) body .agent-detail-panel,
html:not(#mh-tema) body .go-date-card-v167,
html:not(#mh-tema) body .user-password-panel {
  border: 1px solid rgba(34, 211, 238, .18) !important;
  border-radius: 20px !important;
  background: var(--mh-painel) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6) !important;
}

html:not(#mh-tema) body .agents-backdrop,
html:not(#mh-tema) body .agent-detail-overlay,
html:not(#mh-tema) body .go-date-backdrop-v167 {
  background: rgba(4, 6, 12, .7) !important;
  backdrop-filter: blur(4px) !important;
}

/* Botões "i" de informação */
html:not(#mh-tema) body .field-info {
  border-color: rgba(34, 211, 238, .35) !important;
  background: rgba(34, 211, 238, .08) !important;
  color: var(--mh-ciano-claro) !important;
}


/* ---------------- Afinações (2.ª passagem) ---------------- */

/* Caixa dos filtros: sem moldura, só os campos */
html:not(#mh-tema) body .selector-wrap {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Separadores: barra compacta como na Storys (não um painel em grelha) */
html:not(#mh-tema) body .panel.operational-tabs-panel {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(#mh-tema) body #operational-tabs.operational-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 5px !important;
  border: 1px solid var(--mh-linha) !important;
  border-radius: 12px !important;
  background: #0d1019 !important;
  grid-template-columns: none !important;
}

html:not(#mh-tema) body #operational-tabs.operational-tabs {
  justify-content: flex-start !important;
  align-items: center !important;
}

html:not(#mh-tema) body #operational-tabs .operational-tab-btn {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  text-transform: none !important;   /* os textos já estão escritos como frase */
}

html:not(#mh-tema) body #operational-tabs .operational-tab-btn::first-letter {
  text-transform: none !important;
}

/* Dentro do portal, "Gerir utilizadores" está no menu lateral */
html.mh-embutido:not(#mh-tema) body #manage-users-btn {
  display: none !important;
}

/* Cartões dos agentes */
html:not(#mh-tema) body .agent-card {
  border: 1px solid var(--mh-linha) !important;
  border-radius: 18px !important;
  background: var(--mh-painel) !important;
  box-shadow: var(--mh-sombra) !important;
}

html:not(#mh-tema) body .agent-card .agent-v25-compact-grid > *,
html:not(#mh-tema) body .agent-card [class*="metric"]:not([class*="metrics"]) {
  border: 1px solid rgba(255, 255, 255, .05) !important;
  border-radius: 12px !important;
  background: var(--mh-mosaico) !important;
  box-shadow: none !important;
}

html:not(#mh-tema) body .agent-card .agent-v25-alert {
  border: 1px solid var(--mh-linha) !important;
  border-radius: 12px !important;
  background: var(--mh-campo) !important;
  box-shadow: none !important;
  color: var(--mh-texto-2) !important;
}

html:not(#mh-tema) body .agent-detail-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid var(--mh-linha-forte) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--mh-texto) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html:not(#mh-tema) body .agent-detail-btn:hover {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(34, 211, 238, .35) !important;
}

html:not(#mh-tema) body .agent-group-badge-v297 {
  border: 1px solid var(--mh-linha-forte) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: var(--mh-texto-2) !important;
  box-shadow: none !important;
}

/* Estado nas etiquetas: cor do texto, fundo neutro */
html:not(#mh-tema) body .pill.status-pill.stable   { color: var(--mh-ok) !important; }
html:not(#mh-tema) body .pill.status-pill.warning,
html:not(#mh-tema) body .pill.status-pill.attention { color: var(--mh-aviso) !important; }
html:not(#mh-tema) body .pill.status-pill.partial  { color: var(--mh-mudo) !important; }
html:not(#mh-tema) body .pill.status-pill.critical,
html:not(#mh-tema) body .pill.status-pill.bad      { color: var(--mh-erro) !important; }

/* ---------------- Afinações (3.ª passagem) ---------------- */

/* Todos os mosaicos de indicadores iguais aos do topo */
html:not(#mh-tema) body .kpi {
  border: 1px solid rgba(255, 255, 255, .05) !important;
  border-radius: 14px !important;
  background: var(--mh-mosaico) !important;
  box-shadow: none !important;
}

html:not(#mh-tema) body .kpi .label {
  color: var(--mh-suave) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

html:not(#mh-tema) body .kpi .value {
  color: var(--mh-texto) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}

/* Blocos de leitura / conclusão: mosaico, sem barra colorida à esquerda */
html:not(#mh-tema) body .hourly-insight-block,
html:not(#mh-tema) body .conclusion,
html:not(#mh-tema) body .compact-reading-conclusion,
html:not(#mh-tema) body .stable-message,
html:not(#mh-tema) body .qc-intro {
  border: 1px solid rgba(255, 255, 255, .05) !important;
  border-left-width: 1px !important;
  border-radius: 14px !important;
  background: var(--mh-mosaico) !important;
  box-shadow: none !important;
  color: var(--mh-texto-2) !important;
}

html:not(#mh-tema) body .hourly-insight-block strong:first-child,
html:not(#mh-tema) body .hourly-insight-block h3,
html:not(#mh-tema) body .conclusion > strong:first-child {
  color: var(--mh-ciano-claro) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

/* ---------------- Afinações (4.ª passagem) ---------------- */

/* Detalhe do dia: colunas fixas (Agente, Hora) com o fundo do painel */
html:not(#mh-tema) body #daily-detail-content .day-detail-table thead th:nth-child(-n+2) {
  background: #11141e !important;
}
html:not(#mh-tema) body #daily-detail-content .day-detail-table tbody td:nth-child(-n+2) {
  background: #11141e !important;
  border-right-color: var(--mh-linha) !important;
  box-shadow: none !important;
}
html:not(#mh-tema) body #daily-detail-content .day-detail-table tbody tr:hover td:nth-child(-n+2) {
  background: #161a27 !important;
}
html:not(#mh-tema) body #daily-detail-content .day-detail-table-wrap::after {
  border: 1px solid var(--mh-linha) !important;
  background: var(--mh-campo) !important;
  color: var(--mh-mudo) !important;
}

/* Textos introdutórios em mosaico precisam de margem interior */
html:not(#mh-tema) body .qc-intro {
  padding: 12px 14px !important;
}

/* ---------------- Janelas: botões e campos ---------------- */

/* Botões dentro das janelas: contorno (como no portal) */
html:not(#mh-tema) body :is(#agents-modal, #users-modal, .agent-detail-panel, .go-date-card-v167, .user-password-panel) button:not(.operational-tab-btn):not(.field-info) {
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid var(--mh-linha-forte) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--mh-texto) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transform: none !important;
}

html:not(#mh-tema) body :is(#agents-modal, #users-modal, .agent-detail-panel, .go-date-card-v167, .user-password-panel) button:not(.operational-tab-btn):not(.field-info):hover {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(34, 211, 238, .35) !important;
}

/* Botão principal (guardar): degradê do portal */
html:not(#mh-tema) body :is(#save-agent-btn, [id*="save"][type="button"], [id*="guardar"], button[type="submit"]) {
  border: 0 !important;
  background: var(--mh-degrade-botao) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

html:not(#mh-tema) body :is(#agents-modal, #users-modal, .user-password-panel) :is(input, select) {
  min-height: 40px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 10px !important;
  background-color: var(--mh-campo) !important;
  color: var(--mh-texto) !important;
  box-shadow: none !important;
}

html:not(#mh-tema) body :is(#agents-modal, #users-modal) .agent-head h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Botão principal dentro das janelas (ganha à regra de contorno acima) */
html:not(#mh-tema) body :is(#agents-modal, #users-modal, .user-password-panel) :is(#save-agent-btn, [id*="save"], [id*="guardar"], button[type="submit"]) {
  border: 0 !important;
  background: var(--mh-degrade-botao) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Calendário: dia seleccionado em ciano (não amarelo) */
html:not(#mh-tema) body .go-date-day-v167.selected-v167 {
  border-color: rgba(34, 211, 238, .5) !important;
  background: rgba(34, 211, 238, .16) !important;
  color: var(--mh-ciano-claro) !important;
  box-shadow: 0 0 14px rgba(34, 211, 238, .2) !important;
}

html:not(#mh-tema) body #go-date-button-v167 {
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 10px !important;
  background: var(--mh-campo) !important;
  box-shadow: none !important;
}

html:not(#mh-tema) body .legend-selected-v167 {
  background: var(--mh-ciano-claro) !important;
  box-shadow: 0 0 10px rgba(34, 211, 238, .45) !important;
}
html:not(#mh-tema) body .legend-data-v167 {
  background: var(--mh-texto-2) !important;
  box-shadow: none !important;
}

html:not(#mh-tema) body .agent-detail-header,
html:not(#mh-tema) body .agent-head {
  border-bottom: 1px solid var(--mh-linha) !important;
  background: var(--mh-painel) !important;
  box-shadow: none !important;
}


/* Dentro do portal: o aviso de ausentes vai para a barra de cima do portal */
html.mh-embutido:not(#mh-tema) body #absent-warning {
  display: none !important;
}

/* =====================================================================
   FILTROS no formato da Storys (js/portal-filtros.js)
   ===================================================================== */

html:not(#mh-tema) body .filters-row.mh-filtros-linha {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(#mh-tema) body .mh-filtros-barra {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html:not(#mh-tema) body .mh-filtros-resumo {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--mh-mudo) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
html:not(#mh-tema) body .mh-filtros-resumo strong { color: var(--mh-texto) !important; font-weight: 700 !important; }
html:not(#mh-tema) body .mh-filtros-resumo .mh-sep { color: var(--mh-seccao) !important; }

html:not(#mh-tema) body .mh-filtros-botao {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 15px !important;
  border: 1px solid var(--mh-linha-forte) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--mh-texto) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
html:not(#mh-tema) body .mh-filtros-botao .mh-icone { display: inline-flex !important; color: var(--mh-ciano-claro) !important; }
html:not(#mh-tema) body .mh-filtros-botao:hover { background: rgba(255, 255, 255, .05) !important; border-color: rgba(34, 211, 238, .35) !important; }
html:not(#mh-tema) body .mh-filtros-botao[aria-expanded="true"] {
  border-color: rgba(34, 211, 238, .35) !important;
  background: rgba(34, 211, 238, .08) !important;
  color: var(--mh-ciano-claro) !important;
}

html:not(#mh-tema) body .mh-filtros {
  padding: 18px !important;
  border: 1px solid var(--mh-linha) !important;
  border-radius: 18px !important;
  background: var(--mh-painel) !important;
  box-shadow: var(--mh-sombra) !important;
}
html:not(#mh-tema) body .mh-filtros.hidden { display: none !important; }

html:not(#mh-tema) body .mh-filtros-titulo {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
html:not(#mh-tema) body .mh-filtros-titulo > div { display: flex !important; flex-direction: column !important; gap: 4px !important; }
html:not(#mh-tema) body .mh-filtros-titulo strong { color: var(--mh-texto) !important; font-size: 15px !important; font-weight: 700 !important; }

html:not(#mh-tema) body .mh-limpar-filtros {
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 1px solid var(--mh-linha-forte) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--mh-texto-2) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html:not(#mh-tema) body .mh-filtros-grelha {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}

html:not(#mh-tema) body .mh-campo-filtro {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}
html:not(#mh-tema) body .mh-campo-filtro > span {
  color: var(--mh-suave) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
html:not(#mh-tema) body .mh-campo-filtro select,
html:not(#mh-tema) body .mh-campo-filtro #go-date-button-v167 {
  width: 100% !important;
  min-height: 42px !important;
  flex: none !important;
}
html:not(#mh-tema) body .mh-campo-data .selector-wrap {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
/* O botão da data mostra só a data (o nome do campo já está por cima) */
html:not(#mh-tema) body .mh-campo-data #go-date-button-v167 small { display: none !important; }
html:not(#mh-tema) body .mh-campo-data #go-date-button-v167 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
}

/* =====================================================================
   Dentro do portal: separadores e acções estão no menu lateral
   ===================================================================== */

html.mh-embutido:not(#mh-tema) body .panel.operational-tabs-panel,
html.mh-embutido:not(#mh-tema) body .action-buttons {
  display: none !important;
}

/* Painel da vista aberta: logo abaixo dos indicadores */
html.mh-embutido:not(#mh-tema) body .operational-tab-panel {
  margin-top: 16px !important;
}

/* "Ver detalhe": mesmo aspecto do botão principal (como "Guardar métricas") */
html:not(#mh-tema) body .agent-detail-btn {
  border: 0 !important;
  background: var(--mh-degrade-botao) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
html:not(#mh-tema) body .agent-detail-btn:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 0 22px rgba(34, 211, 238, .3) !important;
  background: var(--mh-degrade-botao) !important;
}

/* Cartão "Resumo executivo" (js/portal-vistas.js) */
.mh-resumo-cartao {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 60000;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  width: min(560px, calc(100vw - 32px));
  padding: 18px 20px;
  border: 1px solid rgba(34, 211, 238, .25);
  border-radius: 16px;
  background: #0f121b;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  font-family: var(--mh-letra);
}
.mh-resumo-cartao[hidden] { display: none; }
.mh-resumo-cartao > div:first-child { display: flex; flex-direction: column; gap: 3px; flex: 1 1 240px; }
.mh-resumo-cartao strong { color: var(--mh-texto); font-size: 15px; }
.mh-resumo-cartao small { color: var(--mh-mudo); font-size: 12px; }
.mh-resumo-botoes { display: flex; gap: 8px; }

/* Os seletores de ano/mês/dia são internos (o botão da data substitui-os) */
html:not(#mh-tema) body .mh-campo-data .selector-wrap > select {
  display: none !important;
}

/* =====================================================================
   Telemóvel (verificado a 390 px)
   ===================================================================== */

/* Data legível em qualquer largura (a regra antiga só valia para ≥ 821 px) */
html:not(#mh-tema) body #go-date-button-v167,
html:not(#mh-tema) body #go-date-button-v167 strong,
html:not(#mh-tema) body #go-date-button-v167 b {
  color: var(--mh-texto) !important;
}
html:not(#mh-tema) body #go-date-button-v167 strong { font-weight: 700 !important; }

/* Ícone do botão "Filtros" alinhado com o texto */
html:not(#mh-tema) body .mh-filtros-botao .mh-icone svg { display: block !important; }

/* Etiquetas dos indicadores podem passar à linha seguinte (ex.: ATIVIDADE PARCIAL ⓘ) */
html:not(#mh-tema) body .kpi .label {
  flex-wrap: wrap !important;
  row-gap: 4px !important;
}

@media (max-width: 640px) {
  html:not(#mh-tema) body .mh-filtros-botao {
    width: 100% !important;
    justify-content: center !important;
  }
  html:not(#mh-tema) body .mh-filtros-titulo {
    flex-wrap: wrap !important;
  }
  html:not(#mh-tema) body .mh-filtros-titulo > div { flex: 1 1 auto !important; }
  html:not(#mh-tema) body .mh-limpar-filtros { width: auto !important; flex: none !important; }
  html:not(#mh-tema) body .mh-filtros-resumo { font-size: 12px !important; }
}

/* Etiqueta dos indicadores como texto corrido: ponto, nome e ⓘ seguem juntos */
html:not(#mh-tema) body #quick-kpis .kpi .label,
html:not(#mh-tema) body .kpi .label {
  display: block !important;
}
html:not(#mh-tema) body .kpi .label .field-info { vertical-align: 1px !important; margin-left: 4px !important; }
html:not(#mh-tema) body .kpi .label { white-space: normal !important; overflow: visible !important; }

/* Detalhe do dia: paginação e controlos no estilo comum (e compactos no telemóvel) */
html:not(#mh-tema) body #daily-detail-content .day-detail-pagination,
html:not(#mh-tema) body #daily-detail-content .day-detail-horizontal-controls {
  border: 1px solid var(--mh-linha) !important;
  background: var(--mh-mosaico) !important;
}
html:not(#mh-tema) body #daily-detail-content .day-detail-page-btn {
  min-height: 36px !important;
  height: auto !important;
  border: 1px solid var(--mh-linha-forte) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--mh-texto) !important;
  box-shadow: none !important;
}
@media (max-width: 760px) {
  html:not(#mh-tema) body #daily-detail-content .day-detail-pagination-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
  }
  html:not(#mh-tema) body #daily-detail-content .day-detail-pagination-actions > * {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
}
@media (max-width: 760px) {
  /* Em coluna, "flex: 1 1 185px" dava 185 px de ALTURA ao texto "A mostrar…" */
  html:not(#mh-tema) body #daily-detail-content .day-detail-pagination-info {
    flex: 0 0 auto !important;
  }
}
html:not(#mh-tema) body #daily-detail-content .day-detail-page-current {
  display: inline-flex !important;
  justify-content: center !important;
  gap: 4px !important;
}

/* Painel de filtros com a altura do conteúdo (uma regra antiga esticava-o para ~300 px) */
html:not(#mh-tema) body .filters-row.mh-filtros-linha > .mh-filtros,
html:not(#mh-tema) body .filters-row.mh-filtros-linha > .mh-filtros-barra {
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
html:not(#mh-tema) body .mh-filtros { display: block !important; }
html:not(#mh-tema) body .mh-filtros.hidden { display: none !important; }

/* Botão "Filtros": ícone centrado com a palavra (como na Storys) */
html:not(#mh-tema) body .mh-filtros-botao > span {
  display: inline-flex !important;
  align-items: center !important;
  height: 16px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html:not(#mh-tema) body .mh-filtros-botao .mh-icone svg { width: 16px !important; height: 16px !important; }

/* =====================================================================
   Dentro do portal: indicadores só no Dashboard (vista "agentes")
   ===================================================================== */
html.mh-embutido[data-vista]:not([data-vista="agentes"]):not(#mh-tema) body #quick-kpis {
  display: none !important;
}

/* =====================================================================
   Dentro do portal: "Gerir agentes" é uma página (não uma janela)
   ===================================================================== */
html.mh-embutido:not(#mh-tema) body #agents-modal:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 50 !important;
  display: block !important;
  overflow-y: auto !important;
  padding: 24px !important;
  background: var(--mh-fundo) !important;
}
html.mh-embutido:not(#mh-tema) body #agents-modal .agents-backdrop,
html.mh-embutido:not(#mh-tema) body #agents-modal #close-agents-modal {
  display: none !important;
}
html.mh-embutido:not(#mh-tema) body #agents-modal .agents-panel {
  position: static !important;
  transform: none !important;
  width: min(1392px, 100%) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html.mh-embutido:not(#mh-tema) body #agents-modal .agent-head {
  padding: 0 0 18px !important;
  margin-bottom: 18px !important;
  background: transparent !important;
}
html.mh-embutido:not(#mh-tema) body #agents-modal .agent-head h2 {
  font-size: 22px !important;
}
/* Formulário e tabela em painéis, como a página Utilizadores do portal */
html.mh-embutido:not(#mh-tema) body #agents-modal .agents-panel > :not(.agent-head) {
  max-height: none !important;
}
html.mh-embutido:not(#mh-tema) body #agents-modal .table-wrap,
html.mh-embutido:not(#mh-tema) body #agents-modal .table-scroll {
  max-height: none !important;
  border: 1px solid var(--mh-linha) !important;
  border-radius: 18px !important;
  background: var(--mh-painel) !important;
  box-shadow: var(--mh-sombra) !important;
}

/* =====================================================================
   Resumo executivo como página (js/portal-vistas.js)
   ===================================================================== */
.mh-resumo-pagina {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  padding: 24px;
  background: var(--mh-fundo);
  font-family: var(--mh-letra);
  color: var(--mh-texto);
}
.mh-resumo-pagina[hidden] { display: none; }
.mh-resumo-topo {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px;
  width: min(1392px, 100%); margin: 0 auto 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--mh-linha);
}
.mh-resumo-topo h2 { margin: 4px 0 2px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.mh-resumo-filtros { margin: 0; color: var(--mh-mudo); font-size: 13px; }
.mh-resumo-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-resumo-papel {
  width: min(1392px, 100%); margin: 0 auto;
  border: 1px solid var(--mh-linha); border-radius: 18px; overflow: hidden;
  background: #ffffff; box-shadow: var(--mh-sombra);
}
.mh-resumo-papel iframe { display: block; width: 100%; min-height: 600px; border: 0; background: #ffffff; }

/* Ponto de estado sempre junto ao nome do indicador */
html:not(#mh-tema) body .kpi .label .mh-ponto { float: left !important; margin-top: 4px !important; }

/* Ícones SVG: anular a regra geral "svg { margin-top:14px; fundo; contorno }"
   do mapa de eficiência (descia o ícone do Filtros e punha-lhe um círculo) */
html:not(#mh-tema) body .mh-icone svg,
html:not(#mh-tema) body .mh-filtros-botao svg,
html:not(#mh-tema) body .mh-resumo-pagina svg {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Causa do painel de filtros "enorme": dentro de um contentor flex em coluna,
   o browser media a grelha auto-fit na largura mínima (3 campos empilhados,
   ~305 px) e mantinha essa altura. Contentor normal + colunas fixas. */
html:not(#mh-tema) body .filters-row.mh-filtros-linha {
  display: block !important;
}
html:not(#mh-tema) body .mh-filtros-barra { margin-bottom: 16px !important; }
html:not(#mh-tema) body .mh-filtros-grelha {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 640px) {
  html:not(#mh-tema) body .mh-filtros-grelha {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Páginas "Gerir agentes" e "Resumo executivo" por cima de tudo (o botão da
   data tem uma camada alta), mas abaixo do calendário (9999999) */
html.mh-embutido:not(#mh-tema) body #agents-modal:not(.hidden) { z-index: 90000 !important; }
.mh-resumo-pagina { z-index: 90001 !important; }

/* =====================================================================
   Números de saída (js/portal-numeros.js) — página como o Resumo
   ===================================================================== */
.mh-numeros-pagina {
  position: fixed; inset: 0; z-index: 90001 !important;
  overflow-y: auto; padding: 24px;
  background: var(--mh-fundo); font-family: var(--mh-letra); color: var(--mh-texto);
}
.mh-numeros-pagina[hidden] { display: none !important; }
html:not(#mh-tema) body .mh-numeros-pagina code {
  padding: 1px 6px; border-radius: 6px; background: var(--mh-campo); color: var(--mh-ciano-claro);
  font-size: 12px; white-space: nowrap;
}
html:not(#mh-tema) body .mh-numeros-pagina svg {
  width: 16px !important; height: 16px !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
}
html:not(#mh-tema) body .mh-numeros-pagina .mh-botao { display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.mh-num-corpo { width: min(1392px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.mh-num-msg { margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 13px; border: 1px solid var(--mh-linha); background: var(--mh-painel); color: var(--mh-texto-2); }
.mh-num-msg.ok { border-color: rgba(52, 211, 153, .35); color: var(--mh-ok); }
.mh-num-msg.erro { border-color: rgba(251, 113, 133, .35); color: var(--mh-erro); }
.mh-num-msg[hidden], .mh-num-form[hidden], .mh-num-pendentes[hidden], .mh-num-erro[hidden] { display: none !important; }
html:not(#mh-tema) body .mh-numeros-pagina label[hidden] { display: none !important; }

.mh-num-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mh-num-chips { display: inline-flex; padding: 3px; border: 1px solid var(--mh-linha); border-radius: 12px; background: var(--mh-painel); }
html:not(#mh-tema) body .mh-num-chips button {
  height: 34px !important; padding: 0 14px !important; border: 0 !important; border-radius: 9px !important;
  background: transparent !important; color: var(--mh-suave) !important; font: 600 13px var(--mh-letra) !important;
  cursor: pointer; box-shadow: none !important; margin: 0 !important;
}
html:not(#mh-tema) body .mh-num-chips button b { margin-left: 6px; color: var(--mh-mudo); font-weight: 700; }
html:not(#mh-tema) body .mh-num-chips button.ativo { background: rgba(34, 211, 238, .12) !important; color: var(--mh-ciano-claro) !important; }
html:not(#mh-tema) body :is(.mh-num-barra, .mh-num-form) :is(input, select) {
  height: 40px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important;
  border: 1px solid var(--mh-linha-forte) !important; border-radius: 10px !important;
  background: var(--mh-campo) !important; color: var(--mh-texto) !important;
  font: 500 13px var(--mh-letra) !important; box-shadow: none !important; width: 100% !important; box-sizing: border-box !important;
}
html:not(#mh-tema) body .mh-num-barra select { width: auto !important; }
html:not(#mh-tema) body .mh-num-barra input { flex: 1 1 240px; width: auto !important; }
html:not(#mh-tema) body .mh-num-form input[type=date] { color-scheme: dark; }

.mh-num-tabela-wrap { overflow-x: auto; border: 1px solid var(--mh-linha); border-radius: 18px; background: var(--mh-painel); box-shadow: var(--mh-sombra); }
html:not(#mh-tema) body .mh-num-tabela { width: 100% !important; min-width: 960px; border-collapse: collapse !important; font-size: 13px !important; background: none !important; margin: 0 !important; }
html:not(#mh-tema) body .mh-num-tabela th {
  position: static !important; padding: 12px 14px !important; text-align: left !important; white-space: nowrap;
  background: none !important; color: var(--mh-seccao) !important; border: 0 !important; border-bottom: 1px solid var(--mh-linha) !important;
  font: 700 11px var(--mh-letra) !important; letter-spacing: .08em !important; text-transform: uppercase !important;
}
html:not(#mh-tema) body .mh-num-tabela td {
  padding: 12px 14px !important; vertical-align: middle !important; text-align: left !important;
  border: 0 !important; border-bottom: 1px solid var(--mh-linha) !important; background: none !important; color: var(--mh-texto-2) !important;
}
html:not(#mh-tema) body .mh-num-tabela tbody tr:last-child td { border-bottom: 0 !important; }
html:not(#mh-tema) body .mh-num-tabela tbody tr:hover td { background: rgba(255, 255, 255, .02) !important; }
html:not(#mh-tema) body .mh-num-tabela tr.spam td { color: var(--mh-mudo) !important; }
.mh-num-tabela td small { display: block; margin-top: 2px; color: var(--mh-mudo); font-size: 11.5px; }
.mh-num-numero strong { color: var(--mh-texto); font-size: 14px; font-variant-numeric: tabular-nums; }
.mh-num-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mh-num-desc { min-width: 180px; max-width: 250px; }
.mh-num-vazio { text-align: center !important; color: var(--mh-mudo) !important; padding: 28px !important; }
.mh-num-estado { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mh-num-estado .mh-ponto { margin: 0 !important; }
.mh-num-estado.uso { background: rgba(52, 211, 153, .1); color: var(--mh-ok); }
.mh-num-estado.spam { background: rgba(251, 113, 133, .1); color: var(--mh-erro); }
html:not(#mh-tema) body .mh-num-editar { width: 34px !important; height: 34px !important; padding: 0 !important; justify-content: center !important; }
.mh-num-tabela.sem-mudanca .mh-num-mudanca { display: none; }
.mh-num-tabela td:last-child { width: 1%; }

.mh-num-form, .mh-num-pendentes {
  padding: 18px; border: 1px solid var(--mh-linha); border-radius: 18px; background: var(--mh-painel); box-shadow: var(--mh-sombra);
  display: flex; flex-direction: column; gap: 14px;
}
.mh-num-form { border-color: rgba(34, 211, 238, .25); }
.mh-num-grelha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mh-num-largo { grid-column: span 2; }
.mh-num-form .mh-resumo-botoes { justify-content: flex-end; }
.mh-num-erro { margin: 0; color: var(--mh-erro); font-size: 13px; }
.mh-num-pendentes h3 { margin: 0; font-size: 15px; }
.mh-num-pendentes p { margin: -8px 0 0; color: var(--mh-mudo); font-size: 12.5px; }
.mh-num-pendentes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mh-num-pendentes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mh-linha); }
.mh-num-pendentes li > div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; color: var(--mh-texto-2); }
.mh-num-pendentes li small { flex-basis: 100%; color: var(--mh-mudo); font-size: 11.5px; }
.mh-num-rodape { margin: 0; color: var(--mh-mudo); font-size: 12px; }

@media (max-width: 900px) { .mh-num-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .mh-numeros-pagina { padding: 16px; }
  .mh-num-grelha { grid-template-columns: 1fr; }
  .mh-num-largo { grid-column: auto; }
  html:not(#mh-tema) body .mh-num-barra select { width: 100% !important; }
  .mh-num-chips { width: 100%; }
  html:not(#mh-tema) body .mh-num-chips button { flex: 1; padding: 0 8px !important; }
}
html:not(#mh-tema) body .mh-num-form input[readonly] { color: var(--mh-mudo) !important; background: transparent !important; cursor: default; }
.mh-num-estado.livre { background: rgba(96, 165, 250, .1); color: var(--mh-info); }
html:not(#mh-tema) body .mh-num-tabela tr.livre td { color: var(--mh-suave) !important; }
.mh-num-reservas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 16px; border: 1px solid var(--mh-linha); border-radius: 14px; background: var(--mh-painel); font-size: 13px; color: var(--mh-texto-2); }
.mh-num-reserva { display: inline-flex; align-items: baseline; gap: 6px; }
.mh-num-reserva strong { font-size: 18px; color: var(--mh-info); font-variant-numeric: tabular-nums; }
.mh-num-reserva.pouca strong { color: var(--mh-aviso); }
.mh-num-acoes { white-space: nowrap; }
.mh-num-acoes > * + * { margin-left: 6px !important; }
html:not(#mh-tema) body .mh-num-removido { height: 34px !important; padding: 0 12px !important; font-size: 12.5px !important; }
html:not(#mh-tema) body .mh-num-tabela :is(th, td) { padding-left: 11px !important; padding-right: 11px !important; }