/* Overlay Next no portal VPS. Carrega DEPOIS de portal.css / mh2-cards.css.
   Login (.login-page) continua com login-next.css em page_styles. */

:root,
[data-theme="dark"] {
  --color-bg: var(--bg);
  --color-background: var(--bg);
  --color-surface: var(--surface);
  --color-surface-elevated: var(--surface-2);
  --color-input-bg: var(--surface-2);
  --color-sidebar-bg: var(--chrome);
  --color-dropdown-bg: var(--surface);
  --color-header-bg: var(--chrome);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-border-hover: var(--border-strong);
  --color-primary: var(--accent);
  --color-primary-dark: var(--accent-hover);
  --color-layout-shell: var(--chrome);
  --color-section-header-text: var(--text);
  --color-modal-bg: var(--modal-card);
  --color-card-border: var(--border);
  --mh2-mobile-header-h: 52px;
}

[data-theme="light"] {
  --color-bg: var(--bg);
  --color-background: var(--bg);
  --color-surface: var(--surface);
  --color-surface-elevated: var(--surface-2);
  --color-input-bg: var(--surface-2);
  --color-sidebar-bg: var(--chrome);
  --color-dropdown-bg: var(--surface);
  --color-header-bg: var(--chrome);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-border-hover: var(--border-strong);
  --color-primary: var(--accent);
  --color-primary-dark: var(--accent-hover);
  --color-layout-shell: var(--chrome);
  --color-section-header-text: var(--text);
  --color-modal-bg: var(--modal-card);
}

html,
html body.portal-public {
  font-family: var(--font, "Figtree", "Segoe UI", system-ui, sans-serif);
}

html body.portal-public .fa,
html body.portal-public .fas,
html body.portal-public .far,
html body.portal-public .fab,
html body.portal-public .fa-solid,
html body.portal-public .fa-regular,
html body.portal-public .fa-brands,
html body.portal-public .fa-light,
html body.portal-public .fa-thin,
html body.portal-public .fa-duotone {
  font-family: "Font Awesome 6 Free" !important;
}

html body.portal-public .fab,
html body.portal-public .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
}

html body.portal-public .fa-solid,
html body.portal-public .fas {
  font-weight: 900 !important;
}

html body.login-page .login-theme-bar,
html body.login-page .auth-theme {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 30;
  padding: 0 !important;
}

html body.portal-public:not(.login-page) {
  background-color: var(--bg);
  color: var(--text);
}

/* ---------- Header: 52px flex, sem título central ---------- */
html body.portal-public .base-main-header {
  height: var(--header-h, 52px) !important;
  min-height: var(--header-h, 52px) !important;
  padding: 0 !important;
}

html body.portal-public .base-header-content {
  display: flex !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  grid-template-rows: none !important;
  align-items: center !important;
  height: var(--header-h, 52px) !important;
  min-height: var(--header-h, 52px) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 16px !important;
  gap: 12px !important;
}

html body.portal-public .portal-header-page-title {
  display: none !important;
}

html body.portal-public .base-header-logo span {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

@media (min-width: 1025px) {
  html body.portal-public:has(.portal-app-layout--sidebar) .base-header-logo {
    display: none !important;
  }
}

/* ---------- Page title (Next .page-head) ---------- */
html body.portal-public .page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}

html body.portal-public .page-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: left;
}

/* ---------- Sidebar / shell offsets (portal.css força 60/240) ---------- */
html body.portal-public.portal-has-header .base-app-layout.portal-app-layout.portal-app-layout--sidebar {
  top: var(--header-h, 52px) !important;
  bottom: var(--footer-h, 40px) !important;
}

html body.portal-public.portal-has-header .portal-app-layout--sidebar .base-app-sidebar {
  top: var(--header-h, 52px) !important;
  bottom: var(--footer-h, 40px) !important;
  width: var(--sidebar-w, 228px) !important;
}

html body.portal-public.portal-has-header .portal-app-layout--sidebar .base-app-sidebar.collapsed {
  width: var(--sidebar-collapsed, 64px) !important;
}

html body.portal-public.portal-has-header .portal-app-layout--sidebar .portal-app-main {
  margin-left: var(--sidebar-w, 228px) !important;
  width: calc(100% - var(--sidebar-w, 228px)) !important;
  padding: 20px 24px 40px !important;
}

html body.portal-public.portal-has-header.sidebar-collapsed .portal-app-layout--sidebar .portal-app-main {
  margin-left: var(--sidebar-collapsed, 64px) !important;
  width: calc(100% - var(--sidebar-collapsed, 64px)) !important;
}

@media (max-width: 1024px) {
  html body.portal-public .base-header-content {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    padding: 0 12px !important;
  }

  html body.portal-public.portal-has-header .portal-app-layout--sidebar .portal-app-main {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ---------- Cards / opções: medidas do Next (.login-unidade / .unidade-card) ---------- */
html body.portal-public .portal-option,
html body.portal-public .portal-unidade-option,
html body.portal-public .portal-unidade-card,
html body.portal-public .portal-ativ-card {
  min-height: 92px !important;
  padding: 12px 10px !important;
  border-radius: 12px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  overflow: hidden;
  gap: 8px !important;
}

html body.portal-public .portal-option::before,
html body.portal-public .portal-option::after {
  display: none !important;
}

html body.portal-public .portal-option:hover,
html body.portal-public .portal-unidade-option:hover {
  transform: none !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

html body.portal-public .portal-option-icon,
html body.portal-public .portal-unidade-logo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 16px !important;
}

html body.portal-public .portal-option-icon i,
html body.portal-public .portal-unidade-logo i {
  font-size: 16px !important;
  color: var(--muted) !important;
}

html body.portal-public .portal-unidade-logo img,
html body.portal-public .portal-option-icon img {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  object-fit: contain !important;
  border-radius: 8px;
}

html body.portal-public .portal-option-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  color: var(--text) !important;
}

html body.portal-public .portal-option-desc,
html body.portal-public .portal-unidade-place,
html body.portal-public .portal-ativ-card-periodos {
  color: var(--muted) !important;
  font-size: 12px !important;
}

html body.portal-public .portal-unidades-intro {
  text-align: left;
  margin: 0 0 16px;
  max-width: none;
}

html body.portal-public .portal-unidades-intro h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--text) !important;
}

html body.portal-public .portal-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 12px) !important;
  box-shadow: var(--shadow) !important;
}

html body.portal-public .portal-unidade-action {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transform: none !important;
}

html body.portal-public .portal-unidade-action:hover,
html body.portal-public .portal-unidade-action:focus-visible {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  transform: none !important;
}

html body.portal-public .portal-unidade-action i {
  color: inherit !important;
  font-size: 13px !important;
}

html body.portal-public .portal-btn-entrar {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 36px !important;
  min-height: 36px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: var(--accent) !important;
  color: var(--accent-text, #fff) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body.portal-public .portal-btn-entrar i {
  font-size: 14px !important;
  color: inherit !important;
}

html body.portal-public .portal-btn-entrar .nav-text,
html body.portal-public .portal-btn-entrar span {
  display: inline !important;
  font-size: 14px !important;
}

html body.portal-public .portal-btn-primary,
html body.portal-public .portal-btn-submit,
html body.portal-public .portal-btn-import {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ---------- Dashboard / section headers: sem gradiente azul ---------- */
html body.portal-public .portal-dashboard {
  width: min(1100px, 100%);
}

html body.portal-public .portal-dashboard-panel,
html body.portal-public .section-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 12px) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body.portal-public .portal-dashboard-panel-head,
html body.portal-public .section-card-header,
html body.portal-public .section-card-header.mh2-modal__header,
html body.portal-public .base-selecionar-suporte-container > .section-card-header.mh2-modal__header,
html body.portal-public .portal-unidade-dialog .mh2-modal__header.section-card-header,
html body.portal-public .portal-unidade-dialog .section-card-header.mh2-modal__header {
  background: color-mix(in srgb, var(--chrome) 78%, transparent) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 40px;
  padding: 0 12px !important;
}

html body.portal-public .section-card-header::before,
html body.portal-public .portal-unidade-dialog .mh2-modal__header.section-card-header::before {
  display: none !important;
}

html body.portal-public .portal-dashboard-panel-head h2,
html body.portal-public .section-card-header h2,
html body.portal-public .section-card-header h3,
html body.portal-public .base-selecionar-suporte-container > .section-card-header.mh2-modal__header h2,
html body.portal-public .portal-unidade-dialog .mh2-modal__header h2 {
  color: var(--text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body.portal-public .section-card-header i,
html body.portal-public .portal-dashboard-panel-head i,
html body.portal-public .mh2-modal__header h2 i {
  color: var(--text) !important;
  opacity: 1 !important;
  font-size: 14px !important;
}

html body.portal-public .portal-dashboard-count {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border) !important;
}

html body.portal-public .portal-dashboard-alert {
  background: var(--warn-soft) !important;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)) !important;
  border-radius: var(--radius, 12px);
  color: var(--text);
}

html body.portal-public .mh2-modal__close,
html body.portal-public .base-btn-fechar-modal,
html body.portal-public .base-selecionar-suporte-container .mh2-modal__close.base-btn-fechar-modal {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: 8px !important;
}

html body.portal-public .mh2-modal__close:hover,
html body.portal-public .base-btn-fechar-modal:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

html body.portal-public .base-selecionar-suporte-container,
html body.portal-public .mh2-modal__dialog,
html body.portal-public .portal-unidade-dialog {
  background: var(--modal-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius, 12px) !important;
  box-shadow: var(--shadow) !important;
}

html body.portal-public .portal-unidade-modal-logo {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

html body.portal-public input,
html body.portal-public select,
html body.portal-public textarea,
html body.portal-public .form-control {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
  border-radius: var(--radius-sm, 8px);
}

html body.portal-public .base-menu-button.is-active {
  background: var(--accent-soft) !important;
  border-color: transparent !important;
}