/* SGPlus — harmonização global de layout.
   Normaliza campos, tabelas e responsividade; aplica o shell claro à área interna
   e a identidade DominusPlay de login, sem alterar os fluxos ou dados. */

html:not(:has(.auth-layout)),
body:not(:has(.auth-layout)) {
  max-width: 100% !important;
  overflow-x: clip !important;
}

body:not(:has(.auth-layout)) #kt_app_root,
body:not(:has(.auth-layout)) #kt_app_page,
body:not(:has(.auth-layout)) #kt_app_wrapper,
body:not(:has(.auth-layout)) #kt_wrapper,
body:not(:has(.auth-layout)) #kt_content,
body:not(:has(.auth-layout)) #kt_content_container,
body:not(:has(.auth-layout)) #kt_app_content,
body:not(:has(.auth-layout)) #kt_app_content_container,
body:not(:has(.auth-layout)) .app-container,
body:not(:has(.auth-layout)) .content,
body:not(:has(.auth-layout)) .post,
body:not(:has(.auth-layout)) .container-xxl,
body:not(:has(.auth-layout)) .container-fluid,
body:not(:has(.auth-layout)) .card,
body:not(:has(.auth-layout)) .el-card,
body:not(:has(.auth-layout)) .el-form,
body:not(:has(.auth-layout)) .el-form-item,
body:not(:has(.auth-layout)) .row {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Um único padrão claro para controles nativos, Bootstrap e Element Plus. */
body:not(:has(.auth-layout)) .form-control,
body:not(:has(.auth-layout)) .form-select,
body:not(:has(.auth-layout)) .select2-selection,
body:not(:has(.auth-layout)) .el-input__wrapper,
body:not(:has(.auth-layout)) .el-select__wrapper,
body:not(:has(.auth-layout)) .el-textarea__inner,
body:not(:has(.auth-layout)) .el-date-editor.el-input__wrapper,
body:not(:has(.auth-layout)) .el-range-editor.el-input__wrapper,
body:not(:has(.auth-layout)) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
body:not(:has(.auth-layout)) select,
body:not(:has(.auth-layout)) textarea {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  color: #1e293b !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  font: inherit;
  min-width: 0 !important;
  max-width: 100% !important;
}

body:not(:has(.auth-layout)) .el-input__wrapper,
body:not(:has(.auth-layout)) .el-select__wrapper,
body:not(:has(.auth-layout)) .el-date-editor.el-input__wrapper,
body:not(:has(.auth-layout)) .el-range-editor.el-input__wrapper {
  min-height: 40px !important;
  padding: 2px 11px !important;
}

body:not(:has(.auth-layout)) .el-input__inner,
body:not(:has(.auth-layout)) .el-select__input,
body:not(:has(.auth-layout)) .el-textarea__inner {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #1e293b !important;
}

body:not(:has(.auth-layout)) .el-input__inner,
body:not(:has(.auth-layout)) .el-select__input {
  min-width: 0 !important;
  padding: 0 4px !important;
}

body:not(:has(.auth-layout)) .form-control:focus,
body:not(:has(.auth-layout)) .form-select:focus,
body:not(:has(.auth-layout)) .el-input__wrapper.is-focus,
body:not(:has(.auth-layout)) .el-input__wrapper:focus-within,
body:not(:has(.auth-layout)) .el-select__wrapper.is-focused,
body:not(:has(.auth-layout)) .el-textarea__inner:focus,
body:not(:has(.auth-layout)) input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(:has(.auth-layout)) select:focus,
body:not(:has(.auth-layout)) textarea:focus {
  background-color: #ffffff !important;
  border-color: #00a896 !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 150, 0.16) !important;
  color: #1e293b !important;
  outline: none !important;
}

body:not(:has(.auth-layout)) .el-input__wrapper.is-focus .el-input__inner,
body:not(:has(.auth-layout)) .el-select__wrapper.is-focused .el-select__input {
  border: 0 !important;
  box-shadow: none !important;
}

body:not(:has(.auth-layout)) .el-input__inner::placeholder,
body:not(:has(.auth-layout)) .el-textarea__inner::placeholder,
body:not(:has(.auth-layout)) input::placeholder,
body:not(:has(.auth-layout)) textarea::placeholder,
body:not(:has(.auth-layout)) .el-select__placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

body:not(:has(.auth-layout)) .el-select__selected-item,
body:not(:has(.auth-layout)) .el-select__placeholder,
body:not(:has(.auth-layout)) .el-input-number__decrease,
body:not(:has(.auth-layout)) .el-input-number__increase {
  color: #334155 !important;
}

body:not(:has(.auth-layout)) .el-input-number__decrease,
body:not(:has(.auth-layout)) .el-input-number__increase {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

body:not(:has(.auth-layout)) .el-input-number__decrease:hover,
body:not(:has(.auth-layout)) .el-input-number__increase:hover {
  color: #008f80 !important;
}

body:not(:has(.auth-layout)) .el-input.is-disabled .el-input__wrapper,
body:not(:has(.auth-layout)) .el-select.is-disabled .el-select__wrapper,
body:not(:has(.auth-layout)) input:disabled,
body:not(:has(.auth-layout)) select:disabled,
body:not(:has(.auth-layout)) textarea:disabled {
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  cursor: not-allowed;
}

/* Dropdowns coerentes com o painel claro, inclusive selects do Element Plus. */
body:not(:has(.auth-layout)) .el-select__popper,
body:not(:has(.auth-layout)) .el-select-dropdown,
body:not(:has(.auth-layout)) .el-picker__popper,
body:not(:has(.auth-layout)) .el-picker-panel {
  background: #ffffff !important;
  border: 1px solid #dbe3ed !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
  color: #1e293b !important;
}

body:not(:has(.auth-layout)) .el-select-dropdown__item {
  color: #334155 !important;
}

body:not(:has(.auth-layout)) .el-select-dropdown__item.is-hovering,
body:not(:has(.auth-layout)) .el-select-dropdown__item:hover {
  background: #f0fdfa !important;
  color: #0f766e !important;
}

body:not(:has(.auth-layout)) .el-select-dropdown__item.is-selected {
  color: #008f80 !important;
  font-weight: 600 !important;
}

/* Checkboxes e radios usam o mesmo acento, sem caixas brancas perdidas. */
body:not(:has(.auth-layout)) input[type="checkbox"],
body:not(:has(.auth-layout)) input[type="radio"] {
  accent-color: #00a896 !important;
}

body:not(:has(.auth-layout)) .el-checkbox__inner,
body:not(:has(.auth-layout)) .el-radio__inner {
  background-color: #ffffff !important;
  border-color: #94a3b8 !important;
}

body:not(:has(.auth-layout)) .el-checkbox__input.is-checked .el-checkbox__inner,
body:not(:has(.auth-layout)) .el-radio__input.is-checked .el-radio__inner,
body:not(:has(.auth-layout)) .el-checkbox-button.is-checked .el-checkbox-button__inner {
  background-color: #00a896 !important;
  border-color: #00a896 !important;
}

body:not(:has(.auth-layout)) .el-checkbox__label,
body:not(:has(.auth-layout)) .el-radio__label,
body:not(:has(.auth-layout)) .el-checkbox-button__inner {
  color: #334155 !important;
}

/* Mantém cartões e tabelas dentro da largura útil; só tabelas largas rolam. */
body:not(:has(.auth-layout)) .card,
body:not(:has(.auth-layout)) .el-card,
body:not(:has(.auth-layout)) .dp-panel,
body:not(:has(.auth-layout)) .content-request-card {
  overflow-wrap: anywhere;
}

body:not(:has(.auth-layout)) .table-responsive,
body:not(:has(.auth-layout)) .dataTables_wrapper,
body:not(:has(.auth-layout)) .el-table__body-wrapper {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
}

/* A grade de 14 sistemas usa gutters Bootstrap negativos por padrão.
   Aqui ela fica dentro do cartão e não cria uma barra horizontal própria. */
body:not(:has(.auth-layout)) .scroll-y:has(.server-type-card) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body:not(:has(.auth-layout)) section.mb-5:has(.server-type-card) {
  max-width: 100% !important;
  min-width: 0 !important;
}

body:not(:has(.auth-layout)) section.mb-5:has(.server-type-card) > .row.g-3 {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body:not(:has(.auth-layout)) section.mb-5:has(.server-type-card) > .row.g-3 > [class*="col-"] {
  min-width: 0 !important;
}

body:not(:has(.auth-layout)) .server-type-card {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere;
}

/* Listagens mantêm a mesma hierarquia e densidade em todos os módulos. */
body:not(:has(.auth-layout)) .table,
body:not(:has(.auth-layout)) .el-table,
body:not(:has(.auth-layout)) .dataTables_wrapper table {
  --bs-table-bg: transparent !important;
  --bs-table-color: #334155 !important;
  --bs-table-hover-bg: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
  width: 100% !important;
}

body:not(:has(.auth-layout)) .table thead th,
body:not(:has(.auth-layout)) .el-table__header-wrapper th,
body:not(:has(.auth-layout)) .dataTables_wrapper table thead th {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em !important;
  padding: 12px 14px !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

body:not(:has(.auth-layout)) .table tbody td,
body:not(:has(.auth-layout)) .el-table__body-wrapper td,
body:not(:has(.auth-layout)) .dataTables_wrapper table tbody td {
  border-bottom: 1px solid #eef2f7 !important;
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

body:not(:has(.auth-layout)) .table tbody td .d-block.mt-3,
body:not(:has(.auth-layout)) .el-table__body-wrapper td .d-block.mt-3,
body:not(:has(.auth-layout)) .dataTables_wrapper table tbody td .d-block.mt-3 {
  margin-top: 4px !important;
}

body:not(:has(.auth-layout)) .table tbody tr:hover > *,
body:not(:has(.auth-layout)) .el-table__body tr:hover > td,
body:not(:has(.auth-layout)) .dataTables_wrapper table tbody tr:hover > * {
  background: #f8fafc !important;
}

body:not(:has(.auth-layout)) .pagination .page-link,
body:not(:has(.auth-layout)) .el-pagination button,
body:not(:has(.auth-layout)) .el-pager li {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  border-radius: 8px !important;
  color: #475569 !important;
}

body:not(:has(.auth-layout)) .pagination .page-item.active .page-link,
body:not(:has(.auth-layout)) .el-pager li.is-active {
  background: #00a896 !important;
  border-color: #00a896 !important;
  color: #ffffff !important;
}

/* Status preservam as cores semânticas, com forma e tipografia uniformes. */
body:not(:has(.auth-layout)) .badge,
body:not(:has(.auth-layout)) .el-tag {
  align-items: center;
  border-radius: 999px !important;
  display: inline-flex !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  justify-content: center;
  line-height: 1.25 !important;
  max-width: 100%;
  min-height: 24px;
  padding: 4px 9px !important;
  vertical-align: middle;
  white-space: nowrap;
}

body:not(:has(.auth-layout)) .table td .badge,
body:not(:has(.auth-layout)) .table td .el-tag,
body:not(:has(.auth-layout)) .el-table__body-wrapper td .el-tag {
  margin: 2px 4px 2px 0 !important;
}

/* Ícones de ação ficam com área de clique alinhada; suas cores continuam indicando a ação. */
body:not(:has(.auth-layout)) .table button.btn-icon,
body:not(:has(.auth-layout)) .table a.btn-icon,
body:not(:has(.auth-layout)) .el-table button.btn-icon,
body:not(:has(.auth-layout)) .el-table a.btn-icon {
  align-items: center;
  border-radius: 9px !important;
  display: inline-flex !important;
  flex: 0 0 32px;
  height: 32px !important;
  justify-content: center;
  min-width: 32px !important;
  padding: 0 !important;
  width: 32px !important;
}

body:not(:has(.auth-layout)) .table td:last-child .d-flex,
body:not(:has(.auth-layout)) .el-table__body-wrapper td:last-child .cell > .d-flex,
body:not(:has(.auth-layout)) .dataTables_wrapper table td:last-child .d-flex {
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

/* Abas seguem a mesma hierarquia visual em telas principais e embutidas. */
body:not(:has(.auth-layout)) .nav-tabs,
body:not(:has(.auth-layout)) .nav-pills {
  align-items: center;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body:not(:has(.auth-layout)) .nav-tabs {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  padding: 0 0 6px !important;
}

body:not(:has(.auth-layout)) .nav-pills {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 4px !important;
}

body:not(:has(.auth-layout)) .nav-tabs .nav-link,
body:not(:has(.auth-layout)) .nav-pills .nav-link,
body:not(:has(.auth-layout)) .el-tabs__item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #475569 !important;
  font-weight: 600 !important;
  min-width: 0 !important;
  padding: 9px 14px !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

body:not(:has(.auth-layout)) .nav-tabs .nav-link:hover,
body:not(:has(.auth-layout)) .nav-pills .nav-link:hover,
body:not(:has(.auth-layout)) .el-tabs__item:hover {
  background: #f0fdfa !important;
  color: #0f766e !important;
}

body:not(:has(.auth-layout)) .nav-tabs .nav-link.active,
body:not(:has(.auth-layout)) .nav-pills .nav-link.active,
body:not(:has(.auth-layout)) .el-tabs__item.is-active {
  background: #e6fffa !important;
  color: #0f766e !important;
}

body:not(:has(.auth-layout)) .el-tabs__header {
  margin-bottom: 16px !important;
}

body:not(:has(.auth-layout)) .el-tabs__nav-wrap::after {
  background-color: #e2e8f0 !important;
}

body:not(:has(.auth-layout)) .el-tabs__active-bar {
  background-color: #00a896 !important;
}

body:not(:has(.auth-layout)) .tab-content,
body:not(:has(.auth-layout)) .tab-pane,
body:not(:has(.auth-layout)) .el-tabs__content,
body:not(:has(.auth-layout)) .el-tab-pane {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Cartões dentro de outras telas ficam leves, sem empilhar sombras pesadas. */
body:not(:has(.auth-layout)) .card .card:not(.server-type-card),
body:not(:has(.auth-layout)) .el-card .el-card {
  background: #fbfdff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

/* Cartões de uma mesma grade alinham a altura; métricas ficam flexíveis. */
body:not(:has(.auth-layout)) .row > [class*="col-"] > .card:not(.server-type-card),
body:not(:has(.auth-layout)) .row > [class*="col-"] > .el-card {
  height: 100% !important;
}

body:not(:has(.auth-layout)) .card:has(.sg-stats-table) .min-w-125px.border-dashed.rounded {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
}

body:not(:has(.auth-layout)) .sg-stats-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  min-width: 0 !important;
}

/* Gráficos cabem no cartão e usam rótulos compactos e legíveis. */
body:not(:has(.auth-layout)) .statistics-widget-4-chart,
body:not(:has(.auth-layout)) .apexcharts-canvas,
body:not(:has(.auth-layout)) .apexcharts-svg {
  max-width: 100% !important;
  min-width: 0 !important;
}

body:not(:has(.auth-layout)) .statistics-widget-4-chart {
  overflow: hidden !important;
  width: 100% !important;
}

body:not(:has(.auth-layout)) .apexcharts-xaxis-label,
body:not(:has(.auth-layout)) .apexcharts-yaxis-label {
  fill: #64748b !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

body:not(:has(.auth-layout)) .apexcharts-gridline {
  stroke: #e2e8f0 !important;
}

/* Algumas listagens conservam fundo azul-marinho por linha; normaliza só as células de dados. */
body:not(:has(.auth-layout)) table.table > tbody > tr > td,
body:not(:has(.auth-layout)) table.table > tbody > tr > th,
body:not(:has(.auth-layout)) table.table.table-row-gray-100 > tbody > tr > td,
body:not(:has(.auth-layout)) table.table.table-striped > tbody > tr > td,
body:not(:has(.auth-layout)) .dataTables_wrapper table > tbody > tr > td,
body:not(:has(.auth-layout)) .el-table__body-wrapper .el-table__row > td {
  background-color: #ffffff !important;
  color: #334155 !important;
}

body:not(:has(.auth-layout)) table.table > tbody > tr:hover > td,
body:not(:has(.auth-layout)) .dataTables_wrapper table > tbody > tr:hover > td,
body:not(:has(.auth-layout)) .el-table__body-wrapper .el-table__row:hover > td {
  background-color: #f8fafc !important;
}

body:not(:has(.auth-layout)) table.table > tbody > tr > td .text-muted,
body:not(:has(.auth-layout)) .dataTables_wrapper table > tbody > tr > td .text-muted {
  color: #64748b !important;
  opacity: 1 !important;
}

@media (max-width: 767.98px) {
  body:not(:has(.auth-layout)) #kt_content_container,
  body:not(:has(.auth-layout)) #kt_app_content_container,
  body:not(:has(.auth-layout)) .container-fluid,
  body:not(:has(.auth-layout)) .container-xxl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body:not(:has(.auth-layout)) .el-form-item {
    margin-bottom: 14px !important;
  }
}


/* v6 — identidade clara de ponta a ponta, baseada na referência DominusPlay.
   Mantém os componentes/ações existentes; altera somente apresentação. */

/* Shell do painel: substitui o sidebar escuro/gradiente e o header translúcido. */
html body:not(:has(.auth-layout)) #kt_aside,
html body:not(:has(.auth-layout)) #kt_aside.aside,
html body:not(:has(.auth-layout)) #kt_app_sidebar,
html body:not(:has(.auth-layout)) .app-sidebar,
html body:not(:has(.auth-layout)) .aside {
  background: #ffffff !important;
  background-image: none !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
  color: #334155 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body:not(:has(.auth-layout)) .aside.aside-surface-dark {
  --aside-search-icon-color: #64748b;
  --aside-search-border-color: #dbe2ea;
  --aside-search-background-color: #ffffff;
  --aside-search-text-color: #334155;
  --aside-search-focus-border-color: #93c5fd;
  --aside-search-focus-shadow: 0 0 0 3px rgba(37, 132, 246, 0.12);
  --aside-search-label-color: #64748b;
  --aside-search-shortcut-color: #475569;
  --aside-search-shortcut-muted-color: #94a3b8;
}

@media (min-width: 992px) {
  html body:not(:has(.auth-layout)) #kt_aside,
  html body:not(:has(.auth-layout)) #kt_app_sidebar,
  html body:not(:has(.auth-layout)) .app-sidebar {
    width: 220px !important;
    min-width: 220px !important;
  }

  html body:not(:has(.auth-layout)) #kt_app_wrapper,
  html body:not(:has(.auth-layout)) .app-wrapper {
    margin-left: 220px !important;
  }
}

html body:not(:has(.auth-layout)) #kt_aside_menu_wrapper,
html body:not(:has(.auth-layout)) .app-sidebar .menu,
html body:not(:has(.auth-layout)) #kt_aside .menu {
  background: #ffffff !important;
  color: #334155 !important;
}

html body:not(:has(.auth-layout)) #kt_aside .menu-link,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-link,
html body:not(:has(.auth-layout)) .app-sidebar .menu-link,
html body:not(:has(.auth-layout)) .aside .menu-link {
  background: transparent !important;
  border-radius: 8px !important;
  color: #475569 !important;
  box-shadow: none !important;
}

html body:not(:has(.auth-layout)) #kt_aside .menu-link:hover,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-link:hover,
html body:not(:has(.auth-layout)) .app-sidebar .menu-link:hover,
html body:not(:has(.auth-layout)) .aside .menu-link:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}

html body:not(:has(.auth-layout)) #kt_aside .menu-item.active > .menu-link,
html body:not(:has(.auth-layout)) #kt_aside .menu-link.active,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-item.active > .menu-link,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-link.active,
html body:not(:has(.auth-layout)) .app-sidebar .menu-item.active > .menu-link,
html body:not(:has(.auth-layout)) .app-sidebar .menu-link.active {
  background: #eaf3ff !important;
  color: #1976d2 !important;
}

html body:not(:has(.auth-layout)) #kt_aside .menu-title,
html body:not(:has(.auth-layout)) #kt_aside .menu-section,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-title,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-section,
html body:not(:has(.auth-layout)) .app-sidebar .menu-title,
html body:not(:has(.auth-layout)) .app-sidebar .menu-section {
  color: #94a3b8 !important;
}

html body:not(:has(.auth-layout)) #kt_aside .menu-icon,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-icon,
html body:not(:has(.auth-layout)) .app-sidebar .menu-icon {
  color: #64748b !important;
}

html body:not(:has(.auth-layout)) .aside-user-link,
html body:not(:has(.auth-layout)) .aside-user-metric,
html body:not(:has(.auth-layout)) .aside-user-metric-secondary,
html body:not(:has(.auth-layout)) .aside-mobile-brand {
  color: #334155 !important;
}

html body:not(:has(.auth-layout)) #kt_header,
html body:not(:has(.auth-layout)) #kt_header .header,
html body:not(:has(.auth-layout)) #kt_app_header,
html body:not(:has(.auth-layout)) .app-header,
html body:not(:has(.auth-layout)) .header {
  min-height: 56px !important;
  height: 56px !important;
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
  color: #1e293b !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body:not(:has(.auth-layout)) #kt_toolbar,
html body:not(:has(.auth-layout)) #kt_app_toolbar,
html body:not(:has(.auth-layout)) .app-toolbar,
html body:not(:has(.auth-layout)) .toolbar {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

html body:not(:has(.auth-layout)) #kt_app_root,
html body:not(:has(.auth-layout)) #kt_app_page,
html body:not(:has(.auth-layout)) #kt_app_wrapper,
html body:not(:has(.auth-layout)) .app-wrapper {
  background-color: #f7f9fc !important;
  background-image: none !important;
}

html body:not(:has(.auth-layout)) #kt_app_content,
html body:not(:has(.auth-layout)) #kt_content {
  background: transparent !important;
  color: #1e293b !important;
}

/* Corrige os ícones do topo que estavam renderizados como pequenos traços. */
html body:not(:has(.auth-layout)) #kt_header .topbar-actions-button,
html body:not(:has(.auth-layout)) #kt_app_header .topbar-actions-button,
html body:not(:has(.auth-layout)) #kt_header .btn-icon,
html body:not(:has(.auth-layout)) #kt_app_header .btn-icon {
  align-items: center !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9px !important;
  color: #475569 !important;
  display: inline-flex !important;
  flex: 0 0 38px !important;
  height: 38px !important;
  justify-content: center !important;
  min-height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  width: 38px !important;
}

html body:not(:has(.auth-layout)) #kt_header .topbar-actions-button:hover,
html body:not(:has(.auth-layout)) #kt_app_header .topbar-actions-button:hover,
html body:not(:has(.auth-layout)) #kt_header .btn-icon:hover,
html body:not(:has(.auth-layout)) #kt_app_header .btn-icon:hover {
  background: #eaf3ff !important;
  border-color: #bfdbfe !important;
  color: #1976d2 !important;
}

html body:not(:has(.auth-layout)) #kt_header .topbar-actions-button .svg-icon,
html body:not(:has(.auth-layout)) #kt_app_header .topbar-actions-button .svg-icon,
html body:not(:has(.auth-layout)) #kt_header .btn-icon .svg-icon,
html body:not(:has(.auth-layout)) #kt_app_header .btn-icon .svg-icon {
  align-items: center !important;
  color: #475569 !important;
  display: inline-flex !important;
  font-size: 16px !important;
  height: 20px !important;
  justify-content: center !important;
  line-height: 1 !important;
  width: 20px !important;
}

html body:not(:has(.auth-layout)) #kt_header .topbar-actions-button svg,
html body:not(:has(.auth-layout)) #kt_app_header .topbar-actions-button svg,
html body:not(:has(.auth-layout)) #kt_header .btn-icon svg,
html body:not(:has(.auth-layout)) #kt_app_header .btn-icon svg {
  display: block !important;
  height: 18px !important;
  max-height: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  min-width: 18px !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 18px !important;
}

html body:not(:has(.auth-layout)) #kt_header .topbar-actions-button i,
html body:not(:has(.auth-layout)) #kt_app_header .topbar-actions-button i,
html body:not(:has(.auth-layout)) #kt_header .btn-icon i,
html body:not(:has(.auth-layout)) #kt_app_header .btn-icon i {
  color: #475569 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Login de referência: fundo luminoso, cartão branco e CTA azul.
   Somente CSS; nenhum campo ou fluxo de autenticação é alterado. */
html body:has(.auth-layout),
html body:has(.auth-layout) #app,
html body:has(.auth-layout) .d-flex.flex-root,
html body:has(.auth-layout) .auth-layout {
  background-color: #edf4ff !important;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(96, 165, 250, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 82% 74%, rgba(167, 139, 250, 0.28) 0%, transparent 43%),
    linear-gradient(135deg, #eff6ff 0%, #fbfaff 55%, #f3efff 100%) !important;
  background-attachment: fixed !important;
  color: #1e293b !important;
  color-scheme: light !important;
}

html body:has(.auth-layout) #app,
html body:has(.auth-layout) .d-flex.flex-root,
html body:has(.auth-layout) .auth-layout,
html body:has(.auth-layout) .auth-layout > div {
  background-color: transparent !important;
  background-image: none !important;
}

html body:has(.auth-layout) #app .auth-layout form.w-100 {
  background: #ffffff !important;
  border: 1px solid #e5eaf2 !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14) !important;
  color: #1e293b !important;
  max-width: 400px !important;
  padding: 34px 30px 26px !important;
}

html body:has(.auth-layout) #app .auth-layout .sign-in-branding-slot,
html body:has(.auth-layout) #app .auth-layout [data-test="sign-in-branding"] {
  margin-bottom: 22px !important;
}

html body:has(.auth-layout) #app .auth-layout .sign-in-branding-slot::before {
  filter: drop-shadow(0 4px 12px rgba(202, 162, 58, 0.18)) !important;
  height: 112px !important;
  width: 112px !important;
}

html body:has(.auth-layout) #app .auth-layout .sign-in-branding-slot::after {
  background: linear-gradient(180deg, #d9b94c 0%, #b68b21 100%) !important;
  content: "DOMINUSPLAY" !important;
  font-size: 22px !important;
  letter-spacing: 1.4px !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
}

html body:has(.auth-layout) #app .auth-layout label,
html body:has(.auth-layout) #app .auth-layout .form-label {
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html body:has(.auth-layout) #app .auth-layout input.form-control,
html body:has(.auth-layout) #app .auth-layout input.form-control-solid,
html body:has(.auth-layout) #app .auth-layout input[type="text"],
html body:has(.auth-layout) #app .auth-layout input[type="password"] {
  background-color: #f8fafc !important;
  background-image: none !important;
  border: 1px solid #dbe2ea !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  color: #1e293b !important;
  font-size: 14px !important;
  height: 48px !important;
  padding: 0 14px !important;
}

html body:has(.auth-layout) #app .auth-layout input.form-control:focus,
html body:has(.auth-layout) #app .auth-layout input.form-control-solid:focus,
html body:has(.auth-layout) #app .auth-layout input[type="text"]:focus,
html body:has(.auth-layout) #app .auth-layout input[type="password"]:focus {
  background: #ffffff !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(37, 132, 246, 0.14) !important;
  color: #1e293b !important;
}

html body:has(.auth-layout) #app .auth-layout input::placeholder {
  color: #94a3b8 !important;
}

html body:has(.auth-layout) #app .auth-layout input:-webkit-autofill,
html body:has(.auth-layout) #app .auth-layout input:-webkit-autofill:hover,
html body:has(.auth-layout) #app .auth-layout input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1e293b !important;
  box-shadow: 0 0 0 1000px #f8fafc inset !important;
}

html body:has(.auth-layout) #app .auth-layout a.link-primary,
html body:has(.auth-layout) #app .auth-layout .link-primary {
  color: #2584f6 !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
}

html body:has(.auth-layout) #app .auth-layout a.link-primary:hover {
  color: #1769c2 !important;
  text-decoration: underline !important;
}

html body:has(.auth-layout) #app .auth-layout .fv-row:has(input[name="password"]) > div:last-child {
  display: flex !important;
}

html body:has(.auth-layout) #app .auth-layout .mt-8.px-2.rounded {
  background: transparent !important;
  border: 0 !important;
}

html body:has(.auth-layout) #app .auth-layout .el-checkbox__label {
  color: #64748b !important;
  font-size: 12.5px !important;
}

html body:has(.auth-layout) #app .auth-layout .el-checkbox__label::after {
  content: none !important;
}

html body:has(.auth-layout) #app .auth-layout .el-checkbox__inner {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

html body:has(.auth-layout) #app .auth-layout .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #2584f6 !important;
  border-color: #2584f6 !important;
}

html body:has(.auth-layout) #app .auth-layout .el-checkbox__inner::after {
  border-color: #ffffff !important;
}

html body:has(.auth-layout) #app .auth-layout #kt_sign_in_submit,
html body:has(.auth-layout) #app .auth-layout .btn-primary {
  background: #2584f6 !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: 0 5px 14px rgba(37, 132, 246, 0.22) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 48px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body:has(.auth-layout) #app .auth-layout #kt_sign_in_submit:hover,
html body:has(.auth-layout) #app .auth-layout .btn-primary:hover {
  background: #1769c2 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

html body:has(.auth-layout) #app .auth-layout #kt_sign_in_submit .indicator-label {
  font-size: 14px !important;
}

html body:has(.auth-layout) #app .auth-layout #kt_sign_in_submit .indicator-label::after {
  content: none !important;
}

html body:has(.auth-layout) #app .auth-layout .mt-4.text-center.text-muted {
  color: #94a3b8 !important;
  font-size: 11.5px !important;
}

html body:has(.auth-layout) #app .auth-layout .mt-4.text-center.text-muted:first-of-type::after {
  color: #94a3b8 !important;
  content: "Sistema protegido contra bots e ferramentas de automação" !important;
  font-size: 11.5px !important;
}

html body:has(.auth-layout) #app .auth-layout .mt-4.text-center.text-muted:last-of-type {
  display: block !important;
}

@media (max-width: 480px) {
  html body:has(.auth-layout) #app .auth-layout form.w-100 {
    border-radius: 14px !important;
    margin: 16px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 28px 22px 22px !important;
  }

  html body:has(.auth-layout) #app .auth-layout .sign-in-branding-slot::before {
    height: 92px !important;
    width: 92px !important;
  }
}


/* O CSS legado aplicava o gradiente escuro diretamente ao elemento raiz html. */
html:has(.auth-layout),
html:has(.auth-layout) body,
html:has(.auth-layout) body.app-blank,
html:has(.auth-layout) body.bg-body {
  background-color: #edf4ff !important;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(96, 165, 250, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 82% 74%, rgba(167, 139, 250, 0.28) 0%, transparent 43%),
    linear-gradient(135deg, #eff6ff 0%, #fbfaff 55%, #f3efff 100%) !important;
  background-attachment: fixed !important;
  color-scheme: light !important;
}


/* Normalização reforçada: algumas listagens usam tabela sem .table ou marcam a própria linha/célula com bg-dark. */
html body:not(:has(.auth-layout)) table tbody > tr,
html body:not(:has(.auth-layout)) .el-table__body tr.el-table__row {
  background: #ffffff !important;
  background-image: none !important;
  color: #334155 !important;
}
html body:not(:has(.auth-layout)) table tbody > tr > :is(td, th),
html body:not(:has(.auth-layout)) table tbody > tr > td.bg-dark,
html body:not(:has(.auth-layout)) table tbody > tr > th.bg-dark,
html body:not(:has(.auth-layout)) .el-table__body-wrapper .el-table__row > .el-table__cell,
html body:not(:has(.auth-layout)) .el-table__body-wrapper .el-table__row > td > .cell {
  background: #ffffff !important;
  background-image: none !important;
  color: #334155 !important;
}
html body:not(:has(.auth-layout)) table tbody > tr:hover > :is(td, th),
html body:not(:has(.auth-layout)) .el-table__body-wrapper .el-table__row:hover > .el-table__cell {
  background: #f8fbff !important;
}


/* v7 — identidade DominusPlay Gold no shell e nas páginas do painel.
   Mantém componentes, dados, permissões e fluxos existentes. */
:root {
  --dp-gold: #e6b938;
  --dp-gold-soft: #ffdc70;
  --dp-gold-pale: #fff4c7;
  --dp-gold-line: #e8d7a3;
  --dp-graphite: #151515;
  --dp-paper: #fffdf8;
  --dp-paper-soft: #f8f4e8;
  --dp-ink: #15110a;
  --dp-muted: #877a5b;
}

html body:not(:has(.auth-layout)) {
  --bs-primary: #c69a19;
  --bs-primary-rgb: 198, 154, 25;
  --bs-primary-active: #8e6d0d;
  --bs-primary-light: #fff4c7;
  --bs-primary-inverse: #15110a;
  --bs-border-color: #e8d7a3;
  --bs-body-bg: #fffdf8;
  --bs-body-color: #15110a;
  --el-color-primary: #b58c1c;
  --el-color-primary-light-3: #d0ad51;
  --el-color-primary-light-5: #e5d3a1;
  --el-color-primary-light-7: #f1e5c3;
  --el-color-primary-light-8: #f6efd7;
  --el-color-primary-light-9: #fff8e2;
  --el-color-primary-dark-2: #8e6d0d;
  color-scheme: light;
}

html body:not(:has(.auth-layout)) #kt_app_root,
html body:not(:has(.auth-layout)) #kt_app_page,
html body:not(:has(.auth-layout)) #kt_app_wrapper,
html body:not(:has(.auth-layout)) #kt_wrapper,
html body:not(:has(.auth-layout)) .app-wrapper {
  background-color: var(--dp-paper-soft) !important;
  background-image:
    radial-gradient(circle at 82% 8%, rgba(230, 185, 56, .12), transparent 26rem),
    linear-gradient(180deg, var(--dp-paper) 0%, #f5efe0 100%) !important;
}

/* Sidebar compartilhada: grafite, texto marfim e acentos dourados. */
html body:not(:has(.auth-layout)) #kt_aside,
html body:not(:has(.auth-layout)) #kt_app_sidebar,
html body:not(:has(.auth-layout)) .app-sidebar,
html body:not(:has(.auth-layout)) .aside {
  background-color: var(--dp-graphite) !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(230, 185, 56, .18), transparent 16rem),
    linear-gradient(180deg, #1d1b16 0%, #0c0d10 100%) !important;
  border-right: 1px solid rgba(230, 185, 56, .28) !important;
  box-shadow: 8px 0 28px rgba(26, 20, 7, .08) !important;
  color: #eee4c5 !important;
}

@media (min-width: 992px) {
  html body:not(:has(.auth-layout)) #kt_aside,
  html body:not(:has(.auth-layout)) #kt_app_sidebar,
  html body:not(:has(.auth-layout)) .app-sidebar {
    width: 264px !important;
    min-width: 264px !important;
  }

  html body:not(:has(.auth-layout)) #kt_app_wrapper,
  html body:not(:has(.auth-layout)) .app-wrapper {
    margin-left: 264px !important;
  }
}

html body:not(:has(.auth-layout)) #kt_aside_menu_wrapper,
html body:not(:has(.auth-layout)) #kt_aside .menu,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu,
html body:not(:has(.auth-layout)) .app-sidebar .menu {
  background: transparent !important;
  color: #eee4c5 !important;
}

html body:not(:has(.auth-layout)) #kt_aside .menu-link,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-link,
html body:not(:has(.auth-layout)) .app-sidebar .menu-link,
html body:not(:has(.auth-layout)) .aside .menu-link {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  color: #efe8d0 !important;
}

html body:not(:has(.auth-layout)) #kt_aside .menu-link:hover,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-link:hover,
html body:not(:has(.auth-layout)) .app-sidebar .menu-link:hover,
html body:not(:has(.auth-layout)) .aside .menu-link:hover {
  background: rgba(230, 185, 56, .10) !important;
  border-color: rgba(230, 185, 56, .18) !important;
  color: var(--dp-gold-soft) !important;
}

html body:not(:has(.auth-layout)) #kt_aside .menu-item.active > .menu-link,
html body:not(:has(.auth-layout)) #kt_aside .menu-link.active,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-item.active > .menu-link,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-link.active,
html body:not(:has(.auth-layout)) .app-sidebar .menu-item.active > .menu-link,
html body:not(:has(.auth-layout)) .app-sidebar .menu-link.active {
  background: linear-gradient(90deg, var(--dp-gold-soft), var(--dp-gold)) !important;
  border-color: var(--dp-gold) !important;
  box-shadow: 0 10px 24px rgba(230, 185, 56, .18) !important;
  color: #17130a !important;
}

html body:not(:has(.auth-layout)) #kt_aside .menu-title,
html body:not(:has(.auth-layout)) #kt_aside .menu-section,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-title,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-section,
html body:not(:has(.auth-layout)) .app-sidebar .menu-title,
html body:not(:has(.auth-layout)) .app-sidebar .menu-section {
  color: #bda65e !important;
}

html body:not(:has(.auth-layout)) #kt_aside .menu-icon,
html body:not(:has(.auth-layout)) #kt_aside .menu-link i,
html body:not(:has(.auth-layout)) #kt_aside .menu-link svg,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-icon,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-link i,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-link svg {
  color: var(--dp-gold-soft) !important;
}

html body:not(:has(.auth-layout)) #kt_aside .menu-item.active .menu-icon,
html body:not(:has(.auth-layout)) #kt_aside .menu-item.active .menu-link i,
html body:not(:has(.auth-layout)) #kt_aside .menu-item.active .menu-link svg,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-item.active .menu-icon,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-item.active .menu-link i,
html body:not(:has(.auth-layout)) #kt_app_sidebar .menu-item.active .menu-link svg {
  color: #17130a !important;
}

html body:not(:has(.auth-layout)) #kt_aside .aside-user-link,
html body:not(:has(.auth-layout)) #kt_aside .aside-user-metric,
html body:not(:has(.auth-layout)) #kt_aside .aside-user-metric-secondary,
html body:not(:has(.auth-layout)) #kt_aside .aside-mobile-brand,
html body:not(:has(.auth-layout)) #kt_app_sidebar .aside-user-link,
html body:not(:has(.auth-layout)) #kt_app_sidebar .aside-user-metric {
  color: #eee4c5 !important;
}

html body:not(:has(.auth-layout)) .aside.aside-surface-dark {
  --aside-search-icon-color: #ccb981;
  --aside-search-border-color: rgba(255, 220, 112, .2);
  --aside-search-background-color: rgba(255, 255, 255, .06);
  --aside-search-text-color: #fffdf8;
  --aside-search-focus-border-color: #e6b938;
  --aside-search-focus-shadow: 0 0 0 3px rgba(230, 185, 56, .16);
  --aside-search-label-color: #ccb981;
  --aside-search-shortcut-color: #efe8d0;
  --aside-search-shortcut-muted-color: #bda65e;
}

/* Cabeçalho e barra de título em marfim, com filete dourado. */
html body:not(:has(.auth-layout)) #kt_header,
html body:not(:has(.auth-layout)) #kt_header .header,
html body:not(:has(.auth-layout)) #kt_app_header,
html body:not(:has(.auth-layout)) .app-header,
html body:not(:has(.auth-layout)) .header {
  min-height: 72px !important;
  height: 72px !important;
  background: rgba(255, 253, 248, .96) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--dp-gold-line) !important;
  box-shadow: 0 4px 18px rgba(117, 86, 12, .04) !important;
  color: var(--dp-ink) !important;
  backdrop-filter: blur(14px) !important;
}

html body:not(:has(.auth-layout)) #kt_toolbar,
html body:not(:has(.auth-layout)) #kt_app_toolbar,
html body:not(:has(.auth-layout)) .app-toolbar,
html body:not(:has(.auth-layout)) .toolbar {
  background: rgba(255, 253, 248, .94) !important;
  border-color: var(--dp-gold-line) !important;
  color: var(--dp-ink) !important;
}

html body:not(:has(.auth-layout)) #kt_header .topbar-actions-button,
html body:not(:has(.auth-layout)) #kt_app_header .topbar-actions-button,
html body:not(:has(.auth-layout)) #kt_header .btn-icon,
html body:not(:has(.auth-layout)) #kt_app_header .btn-icon {
  background: #fffaf0 !important;
  border-color: var(--dp-gold-line) !important;
  color: #6c5a25 !important;
}

html body:not(:has(.auth-layout)) #kt_header .topbar-actions-button:hover,
html body:not(:has(.auth-layout)) #kt_app_header .topbar-actions-button:hover,
html body:not(:has(.auth-layout)) #kt_header .btn-icon:hover,
html body:not(:has(.auth-layout)) #kt_app_header .btn-icon:hover {
  background: var(--dp-gold-pale) !important;
  border-color: var(--dp-gold) !important;
  color: #17130a !important;
}

html body:not(:has(.auth-layout)) #kt_app_content,
html body:not(:has(.auth-layout)) #kt_content,
html body:not(:has(.auth-layout)) #kt_content_container,
html body:not(:has(.auth-layout)) #kt_app_content_container {
  color: var(--dp-ink) !important;
}

/* Superfícies e controles principais compartilham o mesmo acabamento. */
html body:not(:has(.auth-layout)) .card,
html body:not(:has(.auth-layout)) .el-card,
html body:not(:has(.auth-layout)) .dp-panel,
html body:not(:has(.auth-layout)) .content-request-card,
html body:not(:has(.auth-layout)) .cd-card {
  background-color: var(--dp-paper) !important;
  border-color: var(--dp-gold-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(117, 86, 12, .08) !important;
  color: var(--dp-ink) !important;
}

html body:not(:has(.auth-layout)) .card .card:not(.server-type-card),
html body:not(:has(.auth-layout)) .el-card .el-card {
  background: #fffaf0 !important;
  border-color: #efe4c4 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html body:not(:has(.auth-layout)) .btn-primary,
html body:not(:has(.auth-layout)) .btn.btn-primary,
html body:not(:has(.auth-layout)) .el-button--primary,
html body:not(:has(.auth-layout)) .el-button--primary:hover,
html body:not(:has(.auth-layout)) .nav-pills .nav-link.active {
  background: linear-gradient(90deg, var(--dp-gold-soft), var(--dp-gold)) !important;
  border-color: var(--dp-gold) !important;
  box-shadow: 0 8px 18px rgba(230, 185, 56, .16) !important;
  color: #17130a !important;
}

html body:not(:has(.auth-layout)) .btn-primary:hover,
html body:not(:has(.auth-layout)) .btn.btn-primary:hover,
html body:not(:has(.auth-layout)) .el-button--primary:hover {
  background: #e6b938 !important;
  border-color: #c99d24 !important;
  color: #17130a !important;
  transform: translateY(-1px);
}

html body:not(:has(.auth-layout)) .btn-secondary,
html body:not(:has(.auth-layout)) .btn-light,
html body:not(:has(.auth-layout)) .el-button:not(.el-button--primary) {
  border-color: var(--dp-gold-line) !important;
}

html body:not(:has(.auth-layout)) .text-primary,
html body:not(:has(.auth-layout)) .link-primary,
html body:not(:has(.auth-layout)) a.link-primary,
html body:not(:has(.auth-layout)) .svg-icon-primary {
  color: #9a7212 !important;
}

html body:not(:has(.auth-layout)) .form-control:focus,
html body:not(:has(.auth-layout)) .form-select:focus,
html body:not(:has(.auth-layout)) .el-input__wrapper.is-focus,
html body:not(:has(.auth-layout)) .el-input__wrapper:focus-within,
html body:not(:has(.auth-layout)) .el-select__wrapper.is-focused,
html body:not(:has(.auth-layout)) .el-textarea__inner:focus,
html body:not(:has(.auth-layout)) input:not([type="checkbox"]):not([type="radio"]):focus,
html body:not(:has(.auth-layout)) select:focus,
html body:not(:has(.auth-layout)) textarea:focus {
  border-color: #c69a19 !important;
  box-shadow: 0 0 0 3px rgba(230, 185, 56, .18) !important;
}

html body:not(:has(.auth-layout)) input[type="checkbox"],
html body:not(:has(.auth-layout)) input[type="radio"] {
  accent-color: #b58c1c !important;
}

html body:not(:has(.auth-layout)) .el-checkbox__input.is-checked .el-checkbox__inner,
html body:not(:has(.auth-layout)) .el-radio__input.is-checked .el-radio__inner,
html body:not(:has(.auth-layout)) .el-checkbox-button.is-checked .el-checkbox-button__inner {
  background-color: #c69a19 !important;
  border-color: #c69a19 !important;
}

html body:not(:has(.auth-layout)) .el-select-dropdown__item.is-hovering,
html body:not(:has(.auth-layout)) .el-select-dropdown__item:hover {
  background: #fff4c7 !important;
  color: #6c5311 !important;
}

/* Tabelas e abas seguem legíveis, com acentos Gold; cores semânticas de status permanecem. */
html body:not(:has(.auth-layout)) .table,
html body:not(:has(.auth-layout)) .el-table,
html body:not(:has(.auth-layout)) .dataTables_wrapper table {
  --bs-table-color: #5f543b !important;
  --bs-table-hover-bg: #fff8e6 !important;
  border-color: #efe4c4 !important;
  color: #5f543b !important;
}

html body:not(:has(.auth-layout)) .table thead th,
html body:not(:has(.auth-layout)) .el-table__header-wrapper th,
html body:not(:has(.auth-layout)) .dataTables_wrapper table thead th {
  background: #fffaf0 !important;
  border-color: #efe4c4 !important;
  color: #877a5b !important;
}

html body:not(:has(.auth-layout)) table tbody > tr > :is(td, th),
html body:not(:has(.auth-layout)) .el-table__body-wrapper .el-table__row > .el-table__cell {
  background: var(--dp-paper) !important;
  border-color: #f1e9d2 !important;
  color: #5f543b !important;
}

html body:not(:has(.auth-layout)) table tbody > tr:hover > :is(td, th),
html body:not(:has(.auth-layout)) .el-table__body-wrapper .el-table__row:hover > .el-table__cell {
  background: #fff8e6 !important;
}

html body:not(:has(.auth-layout)) .pagination .page-item.active .page-link,
html body:not(:has(.auth-layout)) .el-pager li.is-active {
  background: var(--dp-gold) !important;
  border-color: #c69a19 !important;
  color: #17130a !important;
}

html body:not(:has(.auth-layout)) .nav-pills {
  background: #fffaf0 !important;
  border-color: var(--dp-gold-line) !important;
}

html body:not(:has(.auth-layout)) .nav-tabs .nav-link.active,
html body:not(:has(.auth-layout)) .nav-pills .nav-link.active,
html body:not(:has(.auth-layout)) .el-tabs__item.is-active {
  background: var(--dp-gold-pale) !important;
  color: #6c5311 !important;
}

html body:not(:has(.auth-layout)) .nav-tabs .nav-link:hover,
html body:not(:has(.auth-layout)) .nav-pills .nav-link:hover,
html body:not(:has(.auth-layout)) .el-tabs__item:hover {
  background: #fff8e2 !important;
  color: #6c5311 !important;
}

html body:not(:has(.auth-layout)) .el-tabs__active-bar {
  background-color: var(--dp-gold) !important;
}

/* Dashboard oficial: widgets reais e preferências continuam funcionando; só troca a paleta. */
html body:not(:has(.auth-layout)) .cd {
  --surface: var(--dp-paper) !important;
  --surface-2: #fff8e2 !important;
  --surface-3: #f6efd7 !important;
  --border: var(--dp-gold-line) !important;
  --border-2: #d6c58f !important;
  --text: var(--dp-ink) !important;
  --muted: #6e654f !important;
  --dim: var(--dp-muted) !important;
  --accent: #b58c1c !important;
  --accent-hover: #8e6d0d !important;
  --accent-soft: var(--dp-gold-pale) !important;
}

html body:not(:has(.auth-layout)) .cd-card {
  background: var(--dp-paper) !important;
  border-color: var(--dp-gold-line) !important;
}

/* Cores ajustáveis em Configurações > Estilo; os valores vêm de /api/theme.css. */
html.panel-route-dashboard body:not(:has(.auth-layout)) #kt_app_content,
html.panel-route-dashboard body:not(:has(.auth-layout)) #kt_content,
html.panel-route-dashboard body:not(:has(.auth-layout)) .cd {
  background: linear-gradient(135deg, var(--dp-dashboard-bg-start, #f6f2e8), var(--dp-dashboard-bg-end, #fffdf8)) !important;
}

html.panel-route-dashboard body:not(:has(.auth-layout)) #kt_app_content_container {
  background: transparent !important;
}

html.panel-route-dashboard body:not(:has(.auth-layout)) .cd {
  --accent: var(--dp-dashboard-chart-primary, #b58c1c) !important;
  --accent-hover: var(--dp-dashboard-chart-secondary, #8b5cf6) !important;
}

html.panel-route-dashboard body:not(:has(.auth-layout)) .apexcharts-series[rel="1"] :is(.apexcharts-bar-area, .apexcharts-area),
html.panel-route-dashboard body:not(:has(.auth-layout)) .apexcharts-series[rel="1"] .apexcharts-line,
html.panel-route-dashboard body:not(:has(.auth-layout)) .apexcharts-series[rel="1"] .apexcharts-marker {
  fill: var(--dp-dashboard-chart-primary, #b58c1c) !important;
  stroke: var(--dp-dashboard-chart-primary, #b58c1c) !important;
}

html.panel-route-dashboard body:not(:has(.auth-layout)) .apexcharts-series[rel="2"] :is(.apexcharts-bar-area, .apexcharts-area),
html.panel-route-dashboard body:not(:has(.auth-layout)) .apexcharts-series[rel="2"] .apexcharts-line,
html.panel-route-dashboard body:not(:has(.auth-layout)) .apexcharts-series[rel="2"] .apexcharts-marker {
  fill: var(--dp-dashboard-chart-secondary, #8b5cf6) !important;
  stroke: var(--dp-dashboard-chart-secondary, #8b5cf6) !important;
}

html.panel-route-dashboard body:not(:has(.auth-layout)) .sd-dashboard .sd-bar-fill,
html.panel-route-dashboard body:not(:has(.auth-layout)) .sd-dashboard .sd-chart-line {
  background: linear-gradient(90deg, var(--dp-dashboard-chart-primary, #b58c1c), var(--dp-dashboard-chart-secondary, #8b5cf6)) !important;
  stroke: var(--dp-dashboard-chart-primary, #b58c1c) !important;
}

html.panel-route-dashboard body:not(:has(.auth-layout)) .sd-dashboard .sd-chart-dot {
  fill: var(--dp-dashboard-chart-primary, #b58c1c) !important;
}

/* O aviso promocional Beta não pertence ao Dashboard clássico; mantém os botões úteis. */
html.panel-route-dashboard body #kt_app_content_container .alert.alert-success:has(.badge.bg-success) {
  display: none !important;
}

/* Login mantém sua estrutura e seus campos; agora usa a mesma assinatura Gold. */
html:has(.auth-layout),
html:has(.auth-layout) body,
html:has(.auth-layout) body.app-blank,
html:has(.auth-layout) body.bg-body,
html:has(.auth-layout) #app,
html:has(.auth-layout) .d-flex.flex-root,
html:has(.auth-layout) .auth-layout {
  background-color: #f8f4e8 !important;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(230, 185, 56, .22) 0%, transparent 40%),
    radial-gradient(circle at 82% 74%, rgba(255, 220, 112, .24) 0%, transparent 43%),
    linear-gradient(135deg, #fffdf8 0%, #f8f4e8 100%) !important;
  color: var(--dp-ink) !important;
}

html body:has(.auth-layout) #app .auth-layout form.w-100 {
  border-color: var(--dp-gold-line) !important;
  box-shadow: 0 22px 60px rgba(117, 86, 12, .14) !important;
}

html body:has(.auth-layout) #app .auth-layout input.form-control:focus,
html body:has(.auth-layout) #app .auth-layout input.form-control-solid:focus,
html body:has(.auth-layout) #app .auth-layout input[type="text"]:focus,
html body:has(.auth-layout) #app .auth-layout input[type="password"]:focus {
  border-color: #c69a19 !important;
  box-shadow: 0 0 0 3px rgba(230, 185, 56, .18) !important;
}

html body:has(.auth-layout) #app .auth-layout .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #c69a19 !important;
  border-color: #c69a19 !important;
}

html body:has(.auth-layout) #app .auth-layout a.link-primary,
html body:has(.auth-layout) #app .auth-layout .link-primary {
  color: #9a7212 !important;
}

html body:has(.auth-layout) #app .auth-layout #kt_sign_in_submit,
html body:has(.auth-layout) #app .auth-layout .btn-primary {
  background: linear-gradient(90deg, var(--dp-gold-soft), var(--dp-gold)) !important;
  border: 1px solid #c69a19 !important;
  box-shadow: 0 5px 14px rgba(230, 185, 56, .22) !important;
  color: #17130a !important;
}

html body:has(.auth-layout) #app .auth-layout #kt_sign_in_submit:hover,
html body:has(.auth-layout) #app .auth-layout .btn-primary:hover {
  background: #e6b938 !important;
  color: #17130a !important;
}

/* Premium somente em Conexões Ao Vivo: fundo azul-acinzentado e painel branco amplo.
   A sidebar Gold e o conteúdo real da API permanecem intactos. */
html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_app_root,
html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_app_page,
html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_app_wrapper,
html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_wrapper,
html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_app_content,
html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_content {
  background: #bed2e5 !important;
  background-image: none !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_toolbar,
html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_app_toolbar {
  background: #e4edf5 !important;
  border-color: #d7e3ec !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .card,
html.panel-route-live-premium body:not(:has(.auth-layout)) .el-card {
  background: #ffffff !important;
  border: 1px solid #d7e3ec !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 42px rgba(37, 35, 68, .10) !important;
  color: #252344 !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .card-body,
html.panel-route-live-premium body:not(:has(.auth-layout)) .border-0.pt-6.px-6 {
  background: #ffffff !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .form-control,
html.panel-route-live-premium body:not(:has(.auth-layout)) .form-select,
html.panel-route-live-premium body:not(:has(.auth-layout)) .el-input__wrapper,
html.panel-route-live-premium body:not(:has(.auth-layout)) .el-select__wrapper {
  background: #ffffff !important;
  border-color: #d7e3ec !important;
  border-radius: 9px !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .form-control:focus,
html.panel-route-live-premium body:not(:has(.auth-layout)) .el-input__wrapper.is-focus,
html.panel-route-live-premium body:not(:has(.auth-layout)) .el-select__wrapper.is-focused {
  border-color: #f2a51b !important;
  box-shadow: 0 0 0 3px rgba(242, 165, 27, .16) !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .table {
  min-width: 980px !important;
  background: #ffffff !important;
  border-color: #d7e3ec !important;
  color: #5b6384 !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .table thead th {
  background: #fbfdff !important;
  border-bottom: 1px solid #d7e3ec !important;
  color: #7b83a0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .table tbody > tr > td,
html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .table tbody > tr > th {
  background: #ffffff !important;
  border-bottom: 1px solid #edf2f7 !important;
  color: #5b6384 !important;
  font-size: 12px !important;
  padding: 14px 14px !important;
  vertical-align: middle !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .table tbody > tr:hover > td,
html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .table tbody > tr:hover > th {
  background: #f7f9fc !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .table a,
html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .table .text-primary {
  color: #252344 !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .pagination .page-item.active .page-link,
html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .el-pager li.is-active {
  background: #f2a51b !important;
  border-color: #e59a13 !important;
  color: #252344 !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .pagination .page-link {
  border-color: #d7e3ec !important;
  color: #5b6384 !important;
}

@media (max-width: 767.98px) {
  html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_app_content,
  html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_content {
    background: #bed2e5 !important;
  }

  html.panel-route-live-premium body:not(:has(.auth-layout)) .dataTables_wrapper .table {
    min-width: 980px !important;
  }
}


/* v7.1 — prioridade explícita para a variante de sidebar usada pelo painel. */
html body:not(:has(.auth-layout)) #kt_aside.aside.aside-surface-dark,
html body:not(:has(.auth-layout)) #kt_app_sidebar.aside.aside-surface-dark,
html body:not(:has(.auth-layout)) .app-sidebar.aside.aside-surface-dark,
html body:not(:has(.auth-layout)) .aside.aside-surface-dark {
  background: linear-gradient(180deg, #1d1b16 0%, #0c0d10 100%) !important;
  background-color: #151515 !important;
  border-right-color: rgba(230, 185, 56, .28) !important;
  color: #eee4c5 !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .table thead th,
html.panel-route-live-premium body:not(:has(.auth-layout)) table thead th,
html.panel-route-live-premium body:not(:has(.auth-layout)) .el-table__header-wrapper th {
  background: #fbfdff !important;
  border-color: #d7e3ec !important;
  color: #7b83a0 !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .table tbody > tr > :is(td, th),
html.panel-route-live-premium body:not(:has(.auth-layout)) table tbody > tr > :is(td, th),
html.panel-route-live-premium body:not(:has(.auth-layout)) .el-table__body-wrapper .el-table__row > .el-table__cell {
  background: #ffffff !important;
  border-color: #edf2f7 !important;
  color: #5b6384 !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) .table tbody > tr:hover > :is(td, th),
html.panel-route-live-premium body:not(:has(.auth-layout)) table tbody > tr:hover > :is(td, th),
html.panel-route-live-premium body:not(:has(.auth-layout)) .el-table__body-wrapper .el-table__row:hover > .el-table__cell {
  background: #f7f9fc !important;
}

/* Modais Bootstrap são renderizados dentro do cartão da listagem. O blur de vidro
   do cartão cria um stacking context que pode prender o modal abaixo do backdrop. */
body:not(:has(.auth-layout)).modal-open .card:has(.modal.show) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_app_content .btn-primary,
html.panel-route-live-premium body:not(:has(.auth-layout)) #kt_app_content .el-button--primary {
  background: #f2a51b !important;
  border-color: #e59a13 !important;
  box-shadow: 0 8px 18px rgba(242, 165, 27, .18) !important;
  color: #252344 !important;
}