/* ===== CSS CUSTOM PROPERTIES - CORES BASE DO SISTEMA ===== */
/* Para alterar as cores dinamicamente via JS:
   document.documentElement.style.setProperty('--color-primary', '#nova-cor');
   Ou use o store: useCustomThemeStore().applyColors({ primary: '#nova-cor' })
*/
:root {
  /* Cores base */
  --color-primary: var(--color-primary-light);
  --color-primary-light: #0c1048;
  --color-primary-dark: #0c1048;
  --color-secondary: var(--color-secondary-light);
  --color-secondary-light: #102274;
  --color-secondary-dark: #102274;
  --color-accent: var(--color-accent-light);
  --color-accent-light: #82d616;
  --color-accent-dark: #82d616;
  /* Textos */
  --text-font-size: 14px;
  --text-font-weight: 400;
  --text-transform: none;
  --text-color-light: #181c32;
  --text-color-dark: #f8f9fa;
  /* Header */
  --color-header-bg: #0c1048;
  --header-bg-gradient-end: #0c1048;
  --header-bg-gradient-angle: 90deg;
  /* Sidebar */
  --sidebar-bg-gradient-end: #0c1048;
  --sidebar-bg-gradient-angle: 180deg;
  --color-active-item-bg: #102274;
  /* Fundo principal */
  --bg-gradient-start: #e9ecef;
  --bg-gradient-end: #e9ecef;
  --bg-gradient-angle: 135deg;
  /* Container */
  --container-bg: #f5f8fa;
  --container-bg-dark: #151521;
  --container-bg-gradient-end: #f5f8fa;
  --container-bg-gradient-angle: 135deg;
  /* Ícones */
  --icon-bg-start: #2152ff;
  --icon-bg-end: #21d4fd;
  --icon-text-color: #ffffff;
  /* Cards */
  --card-border-color: #dee2e6;
  --card-border-width: 1px;
  --card-border-radius: 8px;
  --card-shadow: none;
  --card-opacity: 1;
  --card-bg: #ffffff;
  --card-bg-dark: #1e293b;
  --card-text-light: #344767;
  --card-text-dark: #f8f9fa;
  --card-text-transform: none;
  --card-font-weight: 400;
  --card-bg-gradient-start: #ffffff;
  --card-bg-gradient-end: #ffffff;
  --card-bg-gradient-angle: 135deg;
  --card-bg-gradient-start-dark: #1e293b;
  --card-bg-gradient-end-dark: #1e293b;
  /* Seções de dashboard (.tc-section) */
  --section-bg: #ffffff;
  --section-bg-dark: #1e293b;
  /* Sombras / estados */
  --color-card-shadow-light: #0c1048;
  --color-card-shadow-dark: #f8f9fa;
  --color-datepicker-active: #102274;
  /* DatePicker background & shadow */
  --datepicker-bg: #ffffff;
  --datepicker-bg-dark: #1e1e2d;
  --datepicker-border-color: var(--form-control-border-color, #dee2e6);
  --datepicker-border-radius: var(--form-control-border-radius, 8px);
  --datepicker-shadow: var(--form-control-shadow, 0px 4px 16px 0px #00000022);
  --datepicker-range-bg: #c8d8f0;
  --datepicker-range-bg-dark: #1a2a4a;
  /* Select & DatePicker unified styling - HEREDITÁRIO PARA TODOS */
  --form-control-shadow: 0px 4px 16px 0px #00000022;
  --select-shadow: var(--form-control-shadow);
  --select-active-bg: #102274;
  --select-active-bg-dark: #2a3a5a;
  /* Form Controls unified - aplicado globalmente */
  --form-control-border-radius: 8px;
  --form-control-border-color: #dee2e6;
  --form-control-height: 41.59px;
  /* Input */
  --input-bg: #ffffff;
  --input-bg-dark: #1e1e2d;
  --input-border-color: #dee2e6;
  --input-border-radius: 6px;
  --input-shadow: none;
  --input-focus-bg: #f0f4ff;
  --input-focus-bg-dark: #1a2a4a;
  /* Botões */
  --btn-gradient-start: #0c1048;
  --btn-gradient-end: #0c1048;
  --btn-gradient-angle: 135deg;
  --btn-border-radius: 6px;
  --btn-border-width: 1px;
  --btn-border-color: #0c1048;
  --btn-text-transform: uppercase;
  --btn-font-weight: 600;
  /* Seletores - PADRONIZADO COM DATEPICKER */
  --select-bg: #ffffff;
  --select-bg-dark: #1e1e2d;
  --select-border-color: #dee2e6;
  --select-border-radius: 8px;
  --select-border-width: 1px;
  --select-text-transform: none;
  --select-font-weight: 400;
  /* Computed backgrounds (solid or gradient, overridden by JS) */
  --color-sidebar-bg: var(--color-primary);
  --header-background: var(--color-header-bg);
  --sidebar-background: var(--color-primary);
  --sidebar-background-dark: var(--color-primary-dark);
  --app-background: transparent;
  --container-background: transparent;
  --container-background-dark: transparent;
  --btn-background: var(--btn-gradient-start);
  /* Card computed backgrounds (overridden by JS) */
  --card-background: var(--card-bg);
  --card-background-dark: var(--card-bg-dark);
  --card-shadow-dark: none;
  /* Header active item (separate from sidebar) */
  --header-active-item-bg: #102274;
  /* Menu text transforms */
  --header-menu-text-transform: none;
  --sidebar-menu-text-transform: none;
  /* Sidebar menu text colors */
  --sidebar-menu-text-color: #ffffff;
  --sidebar-menu-text-hover-color: #ffffff;
  --sidebar-menu-text-active-color: #ffffff;
  --sidebar-menu-bg-hover: rgba(255, 255, 255, 0.14);
  --sidebar-menu-bg-active: rgba(255, 255, 255, 0.2);
  --sidebar-menu-text-color-dark: #ffffff;
  --sidebar-menu-text-hover-color-dark: #ffffff;
  --sidebar-menu-text-active-color-dark: #ffffff;
  --sidebar-menu-bg-hover-dark: rgba(255, 255, 255, 0.12);
  --sidebar-menu-bg-active-dark: rgba(255, 255, 255, 0.2);
  /* Menu text colors */
  --header-menu-text-color: #ffffff;
  --header-menu-text-hover-color: #ffffff;
  --header-menu-text-active-color: #ffffff;
  --header-menu-bg-hover: rgba(255, 255, 255, 0.14);
  --header-menu-bg-active: rgba(255, 255, 255, 0.2);
  --header-menu-text-color-dark: #ffffff;
  --header-menu-text-hover-color-dark: #ffffff;
  --header-menu-text-active-color-dark: #ffffff;
  --header-menu-bg-hover-dark: rgba(255, 255, 255, 0.12);
  --header-menu-bg-active-dark: rgba(255, 255, 255, 0.2);
  --sidebar-menu-text-color: #ffffff;
  /* Footer */
  --footer-bg: transparent;
  --footer-bg-dark: transparent;
  --footer-text: #64748b;
  --footer-text-dark: #94a3b8;
}

/* ---- Ensure primary/secondary/accent adapt to theme mode ---- */
html[data-bs-theme="light"] {
  --color-primary: var(--color-primary-light) !important;
  --color-secondary: var(--color-secondary-light) !important;
  --color-accent: var(--color-accent-light) !important;
}
html[data-bs-theme="dark"] {
  --color-primary: var(--color-primary-dark) !important;
  --color-secondary: var(--color-secondary-dark) !important;
  --color-accent: var(--color-accent-dark) !important;
}

/* ========================================================= */

/* ===== CARDS ===== */
/* Tipo 1: Bootstrap .card */
.card {
  border-color: var(--card-border-color) !important;
  border-width: var(--card-border-width) !important;
  border-style: solid !important;
  border-radius: var(--card-border-radius) !important;
  background: var(--card-background) !important;
  box-shadow: var(--card-shadow) !important;
  text-transform: var(--card-text-transform) !important;
  font-weight: var(--card-font-weight) !important;
}
/* Indicator number color — uses accent for strong contrast */
.card-indicators-number-color,
.card .card-indicators-number-color,
.v-card .card-indicators-number-color,
#card_main .card-indicators-number-color {
  color: var(--color-accent, var(--color-secondary)) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
/* Dark mode card background */
.v-theme--dark .card,
[data-bs-theme="dark"] .card {
  background: var(--card-background-dark) !important;
  color: var(--card-text-dark) !important;
  box-shadow: var(--card-shadow-dark) !important;
}
/* Tipo 2: Vuetify v-card */
.v-card {
  border-color: var(--card-border-color) !important;
  border-width: var(--card-border-width) !important;
  border-style: solid !important;
  border-radius: var(--card-border-radius) !important;
  box-shadow: var(--card-shadow) !important;
  text-transform: var(--card-text-transform) !important;
  font-weight: var(--card-font-weight) !important;
}
.v-theme--light .v-card {
  background: var(--card-background) !important;
}
.v-theme--dark .v-card {
  background: var(--card-background-dark) !important;
  color: var(--card-text-dark) !important;
}
/* Tipo 3: KPI #card_main */
#card_main {
  border: var(--card-border-width) solid var(--card-border-color) !important;
  border-radius: var(--card-border-radius) !important;
  background: var(--card-background) !important;
  box-shadow: var(--card-shadow) !important;
  text-transform: var(--card-text-transform) !important;
  font-weight: var(--card-font-weight) !important;
}
.v-theme--dark #card_main,
[data-bs-theme="dark"] #card_main {
  background: var(--card-background-dark) !important;
  box-shadow: var(--card-shadow-dark) !important;
}
/* Cor de texto do #card_main dark — exceto indicator/goal cards que têm cores próprias */
.v-theme--dark #card_main:not(.tc-indicator-card):not(.tc-goal-card),
[data-bs-theme="dark"] #card_main:not(.tc-indicator-card):not(.tc-goal-card) {
  color: var(--card-text-dark) !important;
}
/* ================= */

/* ===== SEÇÕES DE DASHBOARD (.tc-section) ===== */
/* Adicione a classe tc-section a qualquer v-card ou container para
   que ele herde a cor de fundo configurável pelo ThemeConfigurator.
   A especificidade usa .v-theme--* para superar as regras de .v-card. */
/* Pai tem o tema (comportamento padrão Vuetify) */
.v-theme--light .tc-section,
[data-bs-theme="light"] .tc-section,
/* O próprio elemento tem o tema (:theme="..." no v-card) */
.tc-section.v-theme--light,
.tc-section {
  background-color: var(--section-bg) !important;
  background: var(--section-bg) !important;
}
.v-theme--dark .tc-section,
[data-bs-theme="dark"] .tc-section,
.tc-section.v-theme--dark {
  background-color: var(--section-bg-dark) !important;
  background: var(--section-bg-dark) !important;
}
/* ============================================= */

/* ===== ÍCONES DO DASHBOARD ===== */
.gradient-info {
  background: linear-gradient(
    195deg,
    var(--icon-bg-start),
    var(--icon-bg-end)
  ) !important;
  background-image: linear-gradient(
    195deg,
    var(--icon-bg-start),
    var(--icon-bg-end)
  ) !important;
  color: var(--icon-text-color, #ffffff) !important;
  fill: var(--icon-text-color, #ffffff) !important;
}
/* ============================= */

/* ===== GRADIENT DE FUNDO ===== */
/* Body recebe o gradiente via injectDynamicOverrides(); containers intermediários
   devem ser transparentes para que o gradiente do body apareça. */
body {
  background: var(--app-background) !important;
  min-height: 100%;
}
#kt_app_page,
#kt_app_wrapper,
#kt_app_main,
#kt_app_content {
  background: transparent !important;
  min-height: 100%;
}

.v-theme--dark > h6 {
  color: #f8f9fa;
}

.v-theme--dark #card:hover {
  background-color: lightgray;
}

.v-theme--dark #card {
  box-shadow: 0px 1px 5px var(--color-card-shadow-dark);
  color: var(--color-primary);
}

.v-theme--dark #card_draggable {
  box-shadow: 0px 1px 5px var(--color-card-shadow-dark);
}

.v-theme--dark #card_main,
[data-bs-theme="dark"] #card_main {
  box-shadow: var(--card-shadow-dark) !important;
}

.v-theme--light #card {
  box-shadow: 0px 1px 5px var(--color-card-shadow-light);
  color: var(--color-primary);
  z-index: 1;
}

.v-theme--light #card_main,
[data-bs-theme="light"] #card_main {
  box-shadow: var(--card-shadow) !important;
}

.v-theme--light > h6 {
  color: var(--color-primary);
}

.v-theme--light #card_draggable:hover {
  box-shadow: 0px 0px 20px 3.5px var(--color-primary);
}

.v-theme--dark #box_shadow_dropdown {
  box-shadow: 0px 1px 5px var(--color-card-shadow-dark);
}

.v-theme--light #box_shadow_dropdown {
  box-shadow: 0px 1px 5px var(--color-card-shadow-light);
}

.v-theme--dark .Kool__Caption {
  color: #f8f9fa;
}

.v-theme--light .Kool__Caption {
  color: var(--color-primary);
}

.v-theme--light .v-list-item--active {
  background-color: var(--select-active-bg) !important;
  color: white;
}

.v-theme--dark .v-list-item--active {
  background-color: var(--select-active-bg-dark) !important;
  color: white;
}

.v-theme--dark .Kool__Legend {
  background-color: black;
}

.v-field__input {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Keep multi-select chips contained inside filter comboboxes */

.filter-combobox .v-input__control,
.filter-combobox .v-field__field {
  overflow: hidden;
}

.filter-combobox .v-field__input {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 42px;
  max-height: 42px;
}

.filter-combobox .v-chip {
  margin: 2px 4px 2px 0;
}

.v-field.v-field--active.v-field--appended.v-field--center-affix {
  display: flex;
  align-items: center;
}

/* Old conflicting rules removed - using unified theme rules below */

/* ===== DATEPICKER BACKGROUND & SHADOW ===== */
.dp__menu {
  background: var(--datepicker-bg) !important;
  border-color: var(--select-border-color) !important;
  border-radius: var(--select-border-radius) !important;
  box-shadow: var(--select-shadow) !important;
  border-style: solid !important;
  border-width: 1px !important;
}
[data-bs-theme="dark"] .dp__menu,
.v-theme--dark .dp__menu,
.dp__theme_dark.dp__menu {
  background: var(--datepicker-bg-dark) !important;
}
/* DatePicker input - uses SAME border vars as select_custom */
.dp__main .dp__input_wrap input.dp__input {
  background: var(--select-bg) !important;
  border: 1px solid var(--select-border-color) !important;
  border-radius: var(--select-border-radius) !important;
  box-shadow: var(--select-shadow) !important;
  height: 42px !important;
}
[data-bs-theme="dark"] .dp__main .dp__input_wrap input.dp__input,
.v-theme--dark .dp__main .dp__input_wrap input.dp__input,
.dp__theme_dark .dp__main .dp__input_wrap input.dp__input {
  background: var(--select-bg-dark) !important;
}
/* ============================================ */

/* ===== SELECT STYLING ===== */
.select_custom > .v-input__control,
.select_custom .v-input__control {
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
}
.select_custom .v-field {
  background: var(--select-bg) !important;
  border: 1px solid var(--select-border-color, #dee2e6) !important;
  border-radius: var(--select-border-radius) !important;
  box-shadow: var(--select-shadow) !important;
  padding: 0 12px !important;
  min-height: 42px !important;
}
/* Kill the ENTIRE outline system — display:none hides all children + pseudos */
.select_custom .v-field__outline {
  display: none !important;
}
.select_custom .v-field__overlay {
  display: none !important;
}
.v-theme--dark .select_custom .v-field {
  background: var(--select-bg-dark) !important;
}
/* ============================================ */

/* ===== SELECTOR-MODE & DATEPICKER UNIFIED THEME ===== */
/* Ensures SelectorMode v-autocomplete and DateRangePicker
   share the same visual style via CSS custom properties */

/* Remove border from v-input__control to prevent double border */
.selector-mode-container .v-autocomplete > .v-input__control,
.selector-mode-container .v-select > .v-input__control {
  border: none !important;
  background: transparent !important;
}
/* Border on .v-field, outline system completely hidden */
.selector-mode-container .v-autocomplete .v-field,
.selector-mode-container .v-select .v-field {
  background: var(--select-bg) !important;
  box-shadow: var(--select-shadow) !important;
  border-radius: var(--select-border-radius) !important;
  border: 1px solid var(--select-border-color, #dee2e6) !important;
  font-weight: var(--select-font-weight, 400) !important;
  text-transform: var(--select-text-transform, none) !important;
}
.selector-mode-container .v-autocomplete .v-field__outline,
.selector-mode-container .v-select .v-field__outline {
  display: none !important;
}
.selector-mode-container .v-autocomplete .v-field__overlay,
.selector-mode-container .v-select .v-field__overlay {
  display: none !important;
}
[data-bs-theme="dark"]
  .selector-mode-container
  .v-autocomplete
  > .v-input__control,
[data-bs-theme="dark"] .selector-mode-container .v-select > .v-input__control,
.v-theme--dark .selector-mode-container .v-autocomplete > .v-input__control,
.v-theme--dark .selector-mode-container .v-select > .v-input__control {
  border: none !important;
  background: transparent !important;
}
[data-bs-theme="dark"] .selector-mode-container .v-autocomplete .v-field,
[data-bs-theme="dark"] .selector-mode-container .v-select .v-field,
.v-theme--dark .selector-mode-container .v-autocomplete .v-field,
.v-theme--dark .selector-mode-container .v-select .v-field {
  background: var(--select-bg-dark) !important;
  box-shadow: var(--select-shadow) !important;
  border-radius: var(--select-border-radius) !important;
  border: 1px solid var(--select-border-color, #dee2e6) !important;
}

/* DateRangePicker input inside selector-mode-container */
.selector-mode-container .dp__main .dp__input_wrap input.dp__input {
  background: var(--select-bg, var(--datepicker-bg)) !important;
  border-color: var(
    --select-border-color,
    var(--datepicker-border-color)
  ) !important;
  border-radius: var(
    --select-border-radius,
    var(--datepicker-border-radius)
  ) !important;
  box-shadow: var(--select-shadow, var(--datepicker-shadow)) !important;
  border-style: solid !important;
  border-width: var(--select-border-width, 1px) !important;
  height: var(--form-control-height, 41.59px) !important;
}
[data-bs-theme="dark"]
  .selector-mode-container
  .dp__main
  .dp__input_wrap
  input.dp__input,
.v-theme--dark
  .selector-mode-container
  .dp__main
  .dp__input_wrap
  input.dp__input {
  background: var(--select-bg-dark, var(--datepicker-bg-dark)) !important;
}

/* Active item in select dropdown */
.v-list-item--active {
  background: var(--select-active-bg, #102274) !important;
  color: #ffffff !important;
}
.v-list-item--active > .v-list-item__overlay {
  display: none !important;
}
.v-list-item--active .v-list-item-title,
.v-list-item--active .v-list-item__content {
  color: #ffffff !important;
}
[data-bs-theme="dark"] .v-list-item--active,
.v-theme--dark .v-list-item--active {
  background: var(--select-active-bg-dark, #2a3a5a) !important;
}
[data-bs-theme="dark"] .v-list-item--active .v-list-item-title,
[data-bs-theme="dark"] .v-list-item--active .v-list-item__content,
.v-theme--dark .v-list-item--active .v-list-item-title,
.v-theme--dark .v-list-item--active .v-list-item__content {
  color: #ffffff !important;
}

/* Hover item in select dropdown */
.v-list-item:hover > .v-list-item__overlay {
  background: var(--select-active-bg, #102274) !important;
  opacity: 0.08 !important;
}
.v-list-item--active:hover > .v-list-item__overlay {
  display: none !important;
}
[data-bs-theme="dark"] .v-list-item:hover > .v-list-item__overlay,
.v-theme--dark .v-list-item:hover > .v-list-item__overlay {
  background: var(--select-active-bg-dark, #2a3a5a) !important;
  opacity: 0.15 !important;
}

/* List item text uses theme color */
.v-list-item-title {
  color: var(--color-primary, #0c1048);
  font-size: var(--text-font-size, 13px) !important;
}
[data-bs-theme="dark"] .v-list-item-title,
.v-theme--dark .v-list-item-title {
  color: var(--text-color-dark, #f8f9fa);
}
/* ===================================================== */

/* ===== INPUT BACKGROUND, BORDER & SHADOW ===== */
.form-control {
  background: var(--input-bg) !important;
  border-color: var(--input-border-color) !important;
  border-radius: var(--input-border-radius) !important;
  box-shadow: var(--input-shadow) !important;
}
.form-control:focus {
  background: var(--input-focus-bg) !important;
}
[data-bs-theme="dark"] .form-control {
  background: var(--input-bg-dark) !important;
}
[data-bs-theme="dark"] .form-control:focus {
  background: var(--input-focus-bg-dark) !important;
}
/* ============================================== */

/* v-field__overlay border removed - handled per-component */

.align-height-field {
  margin-top: 4px !important;
}

.v-switch .v-switch__thumb {
  background-color: #424242;
  color: rgb(var(--v-theme-on-surface-bright));
}

.v-switch__thumb.bg-success {
  background-color: var(--color-accent);
}

.v-label {
  opacity: 1 !important;
}

.dp__range_end,
.dp__range_start,
.dp__active_date {
  background-color: var(--color-datepicker-active) !important;
}

.dp__range_between {
  background-color: var(--datepicker-range-bg) !important;
}
[data-bs-theme="dark"] .dp__range_between,
.dp__theme_dark .dp__range_between {
  background-color: var(--datepicker-range-bg-dark) !important;
}

.dp__action_select {
  background-color: var(--color-datepicker-active) !important;
}

.v-field__input .v-select__selection-text {
  font-size: 13px;
}

/* #kt_app_header{
   background-image: url('media/background-4.jpeg');
   background-position-y: center;
   background-size: cover;
} */

.default-icons-size {
  font-size: 20px !important;
}

.icons-theme-light-color {
  color: white !important;
}

.icons-theme-dark-color {
  color: var(--color-secondary) !important;
}

/* ===================================================
   HEADER & SIDEBAR — DYNAMIC THEME OVERRIDES
   Targets all layout variants: dark-sidebar,
   light-sidebar, dark-header, light-header
   =================================================== */

/* ---- Header menu: default text/icon/arrow colors ---- */
.app-header-menu .menu .menu-item .menu-link .menu-title,
.app-header-menu .menu .menu-item .menu-link .menu-arrow {
  color: var(--header-menu-text-color, var(--color-secondary)) !important;
}
.app-header-menu .menu .menu-item .menu-link .menu-icon i,
.app-header-menu .menu .menu-item .menu-link .menu-icon svg {
  color: var(--header-menu-text-color, var(--color-secondary)) !important;
}

/* ---- Header menu: hover state ---- */
.app-header-menu .menu .menu-item .menu-link:hover {
  background-color: var(
    --header-menu-bg-hover,
    rgba(255, 255, 255, 0.14)
  ) !important;
}
.app-header-menu .menu .menu-item .menu-link:hover .menu-title,
.app-header-menu .menu .menu-item .menu-link:hover .menu-arrow,
.app-header-menu .menu .menu-item.show > .menu-link .menu-title,
.app-header-menu .menu .menu-item.show > .menu-link .menu-arrow {
  color: var(
    --header-menu-text-hover-color,
    var(--header-menu-text-color, var(--color-accent))
  ) !important;
}
.app-header-menu .menu .menu-item .menu-link:hover .menu-icon i,
.app-header-menu .menu .menu-item .menu-link:hover .menu-icon svg {
  color: var(
    --header-menu-text-hover-color,
    var(--header-menu-text-color, var(--color-accent))
  ) !important;
}

/* ---- Header menu: active/here state ---- */
.app-header-menu .menu .menu-item .menu-link.active {
  background-color: var(
    --header-menu-bg-active,
    rgba(255, 255, 255, 0.2)
  ) !important;
}
.app-header-menu .menu .menu-item .menu-link.active .menu-title,
.app-header-menu .menu .menu-item .menu-link.here .menu-title,
.app-header-menu .menu .menu-item.here > .menu-link .menu-title {
  color: var(
    --header-menu-text-active-color,
    var(--header-menu-text-color, var(--color-accent))
  ) !important;
}
.app-header-menu .menu .menu-item .menu-link.active .menu-icon i,
.app-header-menu .menu .menu-item .menu-link.active .menu-icon svg,
.app-header-menu .menu .menu-item .menu-link.here .menu-icon i,
.app-header-menu .menu .menu-item .menu-link.here .menu-icon svg {
  color: var(
    --header-menu-text-active-color,
    var(--header-menu-text-color, var(--color-accent))
  ) !important;
}

/* ---- Header background (all layouts) ---- */
[data-kt-app-layout="light-sidebar"][data-kt-app-header-fixed="true"]
  .app-header,
[data-kt-app-layout="light-sidebar"]:not([data-kt-app-header-fixed="true"])
  .app-header,
[data-kt-app-layout="dark-sidebar"] .app-header,
[data-kt-app-layout="dark-header"] .app-header {
  background: var(--sidebar-background) !important;
}
[data-bs-theme="dark"]
  [data-kt-app-layout="light-sidebar"][data-kt-app-header-fixed="true"]
  .app-header,
[data-bs-theme="dark"]
  [data-kt-app-layout="light-sidebar"]:not([data-kt-app-header-fixed="true"])
  .app-header,
[data-bs-theme="dark"] [data-kt-app-layout="dark-sidebar"] .app-header,
[data-bs-theme="dark"] [data-kt-app-layout="dark-header"] .app-header {
  background: var(--sidebar-background-dark) !important;
}

/* ---- Toolbar inherits header background ---- */
#kt_app_toolbar {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ---- Header menu text color — FIRST LEVEL ONLY (não afeta dropdowns) ---- */
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu
  > .menu-item
  > .menu-link
  .menu-title,
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu
  > .menu-item
  > .menu-link
  .menu-arrow {
  color: var(--header-menu-text-color, #fff) !important;
}
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu
  > .menu-item
  > .menu-link:hover
  .menu-title,
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu
  > .menu-item
  > .menu-link:hover
  .menu-arrow,
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu
  > .menu-item
  > .menu-link.active
  .menu-title,
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu
  > .menu-item
  > .menu-link.here
  .menu-title,
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu
  > .menu-item.here
  > .menu-link
  .menu-title,
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu
  > .menu-item.show
  > .menu-link
  .menu-title,
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu
  > .menu-item.show
  > .menu-link
  .menu-arrow {
  color: var(--color-accent) !important;
}
/* ---- Dropdown items: reset to card text color ---- */
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu-sub
  .menu-item
  .menu-link
  .menu-title,
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu-sub
  .menu-item
  .menu-link
  .menu-arrow {
  color: var(--card-text-light, #344767) !important;
}
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu-sub
  .menu-item
  .menu-link:hover
  .menu-title,
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu-sub
  .menu-item
  .menu-link:hover
  .menu-arrow,
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu-sub
  .menu-item.show
  > .menu-link
  .menu-title,
[data-kt-app-layout="light-sidebar"]
  .app-header-menu
  .menu-sub
  .menu-item.show
  > .menu-link
  .menu-arrow {
  color: var(--color-accent) !important;
}

/* ---- Navbar icons (light-sidebar + dark-sidebar) ---- */
.app-header .app-navbar .btn-icon i,
.app-header .app-navbar .btn-custom i,
.app-header .app-navbar .btn-icon svg,
.app-header .app-navbar .ki-outline,
.app-header .app-navbar .ki-duotone,
.app-header .app-navbar .ki-solid {
  color: var(--header-menu-text-color, #fff) !important;
}
.app-header .app-navbar .btn-active-color-primary:hover i,
.app-header .app-navbar .btn-active-color-primary:hover svg,
.app-header .app-navbar .btn-active-color-primary:hover .ki-outline,
.app-header .app-navbar .btn-active-color-primary.active i,
.app-header .app-navbar .btn-active-color-primary.active svg {
  color: var(--color-primary) !important;
}
[data-bs-theme="dark"]
  .app-header
  .app-navbar
  .btn-active-color-primary:hover
  i,
[data-bs-theme="dark"]
  .app-header
  .app-navbar
  .btn-active-color-primary:hover
  svg,
[data-bs-theme="dark"]
  .app-header
  .app-navbar
  .btn-active-color-primary:hover
  .ki-outline,
[data-bs-theme="dark"]
  .app-header
  .app-navbar
  .btn-active-color-primary.active
  i,
[data-bs-theme="dark"]
  .app-header
  .app-navbar
  .btn-active-color-primary.active
  svg {
  color: var(--color-primary-dark) !important;
}

/* ---- ALL dropdowns (navbar + header-menu flyouts): background override ---- */
/* Covers both menu-sub-dropdown and menu-sub-lg-dropdown so flyouts are never dark by default */
.menu-sub-dropdown,
.menu-sub-lg-dropdown {
  background-color: var(--card-bg, #ffffff) !important;
  box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15) !important;
}
[data-bs-theme="dark"] .menu-sub-dropdown,
[data-bs-theme="dark"] .menu-sub-lg-dropdown {
  background-color: var(--card-bg-dark, #1e293b) !important;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.4) !important;
}

/* ---- Dropdown menu active item: background follows theme ---- */
.menu-sub-dropdown .menu-item .menu-link.active {
  background-color: var(--bs-gray-100, #f5f8fa) !important;
  color: var(--color-accent) !important;
}
.menu-sub-dropdown .menu-item .menu-link.active .menu-title,
.menu-sub-dropdown .menu-item .menu-link.active .menu-icon i,
.menu-sub-dropdown .menu-item .menu-link.active .menu-icon .ki-outline,
.menu-sub-dropdown .menu-item .menu-link.active .menu-icon .ki-duotone,
.menu-sub-dropdown .menu-item .menu-link.active .menu-icon .ki-solid {
  color: var(--color-accent) !important;
}
[data-bs-theme="dark"] .menu-sub-dropdown .menu-item .menu-link.active {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .menu-sub-dropdown .menu-item .menu-link.active .menu-title,
[data-bs-theme="dark"] .menu-sub-dropdown .menu-item .menu-link.active .menu-icon i,
[data-bs-theme="dark"] .menu-sub-dropdown .menu-item .menu-link.active .menu-icon .ki-outline,
[data-bs-theme="dark"] .menu-sub-dropdown .menu-item .menu-link.active .menu-icon .ki-duotone,
[data-bs-theme="dark"] .menu-sub-dropdown .menu-item .menu-link.active .menu-icon .ki-solid {
  color: var(--color-accent) !important;
}

/* ---- Navbar dropdown submenus: reset icon & text to dropdown-appropriate colors ---- */
.app-header .app-navbar .menu-sub-dropdown .ki-outline,
.app-header .app-navbar .menu-sub-dropdown .ki-duotone,
.app-header .app-navbar .menu-sub-dropdown .ki-solid,
.app-header .app-navbar .menu-sub-dropdown i {
  color: var(--bs-gray-600) !important;
}
.app-header .app-navbar .menu-sub-dropdown .menu-title,
.app-header .app-navbar .menu-sub-dropdown .menu-content span,
.app-header .app-navbar .menu-sub-dropdown .menu-link {
  color: var(--bs-gray-800) !important;
}
[data-bs-theme="dark"] .app-header .app-navbar .menu-sub-dropdown .ki-outline,
[data-bs-theme="dark"] .app-header .app-navbar .menu-sub-dropdown .ki-duotone,
[data-bs-theme="dark"] .app-header .app-navbar .menu-sub-dropdown .ki-solid,
[data-bs-theme="dark"] .app-header .app-navbar .menu-sub-dropdown i {
  color: var(--bs-gray-400) !important;
}
[data-bs-theme="dark"] .app-header .app-navbar .menu-sub-dropdown .menu-title,
[data-bs-theme="dark"]
  .app-header
  .app-navbar
  .menu-sub-dropdown
  .menu-content
  span,
[data-bs-theme="dark"] .app-header .app-navbar .menu-sub-dropdown .menu-link {
  color: var(--bs-gray-300) !important;
}
/* Hover state inside navbar dropdowns */
.app-header
  .app-navbar
  .menu-sub-dropdown
  .menu-item:hover
  > .menu-link
  .menu-title,
.app-header
  .app-navbar
  .menu-sub-dropdown
  .menu-item.active
  > .menu-link
  .menu-title {
  color: var(--color-accent) !important;
}

/* ---- Header-menu flyout (menu-sub-lg-dropdown): text colors ---- */
.app-header-menu .menu-sub-lg-dropdown .menu-item .menu-link .menu-title,
.app-header-menu .menu-sub-lg-dropdown .menu-item .menu-link .menu-arrow {
  color: var(--card-text-light, #344767) !important;
}
.app-header-menu .menu-sub-lg-dropdown .menu-item .menu-link:hover .menu-title,
.app-header-menu
  .menu-sub-lg-dropdown
  .menu-item.show
  > .menu-link
  .menu-title {
  color: var(--color-accent) !important;
}
[data-bs-theme="dark"]
  .app-header-menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-title,
[data-bs-theme="dark"]
  .app-header-menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-arrow {
  color: var(--card-text-dark, #f8f9fa) !important;
}

/* --- Sidebar background follows primary theme color --- */
#kt_app_sidebar {
  background: var(--color-primary) !important;
}
[data-bs-theme="dark"] #kt_app_sidebar {
  background: var(--color-primary-dark) !important;
}

/* --- Sidebar active menu item (dark-sidebar) --- */
[data-kt-app-layout="dark-sidebar"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active,
[data-kt-app-layout="dark-sidebar"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover {
  background-color: var(--color-active-item-bg) !important;
}

/* --- Sidebar logo border (dark-sidebar) --- */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-logo {
  border-bottom-color: color-mix(
    in srgb,
    var(--color-primary) 60%,
    #fff
  ) !important;
}

/* --- Header navbar icons color (dark-header) --- */
[data-kt-app-layout="dark-header"] .app-navbar .btn-icon,
[data-kt-app-layout="dark-header"] .app-navbar .btn-custom {
  color: #fff !important;
}
[data-kt-app-layout="dark-header"] .app-navbar .menu-link,
[data-kt-app-layout="dark-header"] .app-navbar .menu-title {
  color: #fff !important;
}

/* --- Header active/hover menu item (dark-header) --- */
[data-kt-app-layout="dark-header"]
  .app-header-menu
  .menu
  .menu-item
  .menu-link.active,
[data-kt-app-layout="dark-header"]
  .app-header-menu
  .menu
  .menu-item
  .menu-link:hover {
  background-color: var(--header-active-item-bg) !important;
  color: #fff !important;
}

/* --- Header + sidebar (light-sidebar) — coberto pelo bloco principal acima --- */

/* ===== CONTAINER ===== */
/* Transparent so the body gradient shows through */
#kt_app_content,
#kt_app_content_container,
.v-theme--light #kt_app_content,
.v-theme--light #kt_app_content_container {
  background: transparent !important;
}
/* Dark — also transparent */
.v-theme--dark #kt_app_content,
.v-theme--dark #kt_app_content_container,
[data-bs-theme="dark"] #kt_app_content,
[data-bs-theme="dark"] #kt_app_content_container {
  background: transparent !important;
}
/* ===================== */

/* ===== TEXTOS GLOBAIS ===== */
/* .app-content,
.app-content
  *:not(i):not(svg):not(path):not(use):not([class*="ki-"]):not(
    [class*="badge"]
  ):not([class*="bullet"]) {
  font-size: var(--text-font-size) !important;
  font-weight: var(--text-font-weight) !important;
  text-transform: var(--text-transform) !important;
  color: var(--text-color-light) !important;
} */
/* Dark mode — covers both Vuetify's .v-theme--dark and Keenthemes' data-bs-theme="dark" on <html> */
/* Exclui descendentes de .tc-indicator-card e .tc-goal-card (cores controladas pelo Theme Configurator) */
.v-theme--dark .app-content,
[data-bs-theme="dark"] .app-content,
.v-theme--dark
  .app-content
  *:not(i):not(svg):not(path):not(use):not([class*="ki-"]):not(
    [class*="badge"]
  ):not([class*="bullet"]):not(.tc-indicator-card):not(.tc-goal-card):not(
    .tc-indicator-card *
  ):not(.tc-goal-card *),
[data-bs-theme="dark"]
  .app-content
  *:not(i):not(svg):not(path):not(use):not([class*="ki-"]):not(
    [class*="badge"]
  ):not([class*="bullet"]):not(.tc-indicator-card):not(.tc-goal-card):not(
    .tc-indicator-card *
  ):not(.tc-goal-card *) {
  color: var(--text-color-dark) !important;
}
/* Restore card-specific text colors — higher specificity (.card added) beats the global rule above */
/* Exclui .tc-indicator-card e .tc-goal-card cujas cores são controladas pelo Theme Configurator */
.v-theme--dark .app-content .card:not(.tc-indicator-card):not(.tc-goal-card),
[data-bs-theme="dark"]
  .app-content
  .card:not(.tc-indicator-card):not(.tc-goal-card),
.v-theme--dark
  .app-content
  .card:not(.tc-indicator-card):not(.tc-goal-card)
  *:not(i):not(svg):not(path):not(use):not([class*="ki-"]):not(
    [class*="badge"]
  ):not([class*="bullet"]):not(.tc-indicator-card *):not(.tc-goal-card *),
[data-bs-theme="dark"]
  .app-content
  .card:not(.tc-indicator-card):not(.tc-goal-card)
  *:not(i):not(svg):not(path):not(use):not([class*="ki-"]):not(
    [class*="badge"]
  ):not([class*="bullet"]):not(.tc-indicator-card *):not(.tc-goal-card *),
.v-theme--dark .app-content .v-card:not(.tc-indicator-card):not(.tc-goal-card),
[data-bs-theme="dark"]
  .app-content
  .v-card:not(.tc-indicator-card):not(.tc-goal-card),
.v-theme--dark
  .app-content
  .v-card:not(.tc-indicator-card):not(.tc-goal-card)
  *:not(i):not(svg):not(path):not(use):not([class*="ki-"]):not(
    [class*="badge"]
  ):not([class*="bullet"]):not(.tc-indicator-card *):not(.tc-goal-card *),
[data-bs-theme="dark"]
  .app-content
  .v-card:not(.tc-indicator-card):not(.tc-goal-card)
  *:not(i):not(svg):not(path):not(use):not([class*="ki-"]):not(
    [class*="badge"]
  ):not([class*="bullet"]):not(.tc-indicator-card *):not(.tc-goal-card *) {
  color: var(--card-text-dark) !important;
}
/* ========================== */

/* ===== BOTÕES ===== */
.btn-primary {
  background: var(--btn-background) !important;
  border: var(--btn-border-width) solid var(--btn-border-color) !important;
  border-radius: var(--btn-border-radius) !important;
}
.btn {
  text-transform: var(--btn-text-transform) !important;
  font-weight: var(--btn-font-weight) !important;
  border-radius: var(--btn-border-radius) !important;
}
/* ================== */

/* ===== SELETORES ===== */
.v-theme--light .form-control,
.v-theme--light .form-select {
  background-color: var(--select-bg) !important;
  border-color: var(--select-border-color) !important;
  border-width: var(--select-border-width) !important;
  border-radius: var(--select-border-radius) !important;
  text-transform: var(--select-text-transform) !important;
  font-weight: var(--select-font-weight) !important;
}
.v-theme--dark .form-control,
.v-theme--dark .form-select {
  background-color: var(--select-bg-dark) !important;
  border-color: var(--select-border-color) !important;
  border-width: var(--select-border-width) !important;
  border-radius: var(--select-border-radius) !important;
  text-transform: var(--select-text-transform) !important;
  font-weight: var(--select-font-weight) !important;
}
.v-field__input {
  border-radius: var(--select-border-radius) !important;
  text-transform: var(--select-text-transform) !important;
  font-weight: var(--select-font-weight) !important;
}
/* ===================== */

/* ===== MENU TEXT TRANSFORMS & COLORS ===== */
.app-header-menu .menu .menu-item .menu-link .menu-title {
  text-transform: var(--header-menu-text-transform) !important;
}
.app-sidebar .menu .menu-item .menu-link .menu-title {
  text-transform: var(--sidebar-menu-text-transform) !important;
}
/* Sidebar menu text color — overrides hardcoded text-white in SidebarMenu.vue */
.app-sidebar .menu .menu-item .menu-link .menu-title,
.app-sidebar .menu .menu-item .menu-link .menu-arrow,
.app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet {
  color: var(--sidebar-menu-text-color, #ffffff) !important;
}
/* Sidebar menu icon color */
.app-sidebar .menu .menu-item .menu-link .menu-icon i,
.app-sidebar .menu .menu-item .menu-link .menu-icon .ki-outline,
.app-sidebar .menu .menu-item .menu-link .menu-icon .ki-duotone,
.app-sidebar .menu .menu-item .menu-link .menu-icon .ki-solid {
  color: var(--sidebar-menu-text-color, #ffffff) !important;
}

/* Sidebar menu hover/active colors */
.app-sidebar .menu .menu-item .menu-link:hover {
  background-color: var(
    --sidebar-menu-bg-hover,
    rgba(255, 255, 255, 0.14)
  ) !important;
  transition: background-color 0.18s ease !important;
}
.app-sidebar .menu .menu-item .menu-link:hover .menu-title,
.app-sidebar .menu .menu-item .menu-link:hover .menu-arrow,
.app-sidebar .menu .menu-item .menu-link:hover .menu-icon i,
.app-sidebar .menu .menu-item .menu-link:hover .menu-icon .ki-outline,
.app-sidebar .menu .menu-item .menu-link:hover .menu-icon .ki-duotone,
.app-sidebar .menu .menu-item .menu-link:hover .menu-icon .ki-solid {
  color: var(
    --sidebar-menu-text-hover-color,
    var(--sidebar-menu-text-color, #ffffff)
  ) !important;
}
.app-sidebar .menu .menu-item .menu-link.active {
  background-color: var(
    --sidebar-menu-bg-active,
    rgba(255, 255, 255, 0.2)
  ) !important;
}
.app-sidebar .menu .menu-item .menu-link.active .menu-title,
.app-sidebar .menu .menu-item .menu-link.active .menu-arrow,
.app-sidebar .menu .menu-item .menu-link.active .menu-icon i,
.app-sidebar .menu .menu-item .menu-link.active .menu-icon .ki-outline,
.app-sidebar .menu .menu-item .menu-link.active .menu-icon .ki-duotone,
.app-sidebar .menu .menu-item .menu-link.active .menu-icon .ki-solid {
  color: var(
    --sidebar-menu-text-active-color,
    var(--sidebar-menu-text-color, #ffffff)
  ) !important;
}

[data-bs-theme="dark"] .app-sidebar .menu .menu-item .menu-link:hover {
  background-color: var(
    --sidebar-menu-bg-hover-dark,
    rgba(255, 255, 255, 0.12)
  ) !important;
}
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover
  .menu-title,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover
  .menu-arrow,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover
  .menu-icon
  i,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover
  .menu-icon
  .ki-outline,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover
  .menu-icon
  .ki-duotone,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover
  .menu-icon
  .ki-solid {
  color: var(
    --sidebar-menu-text-hover-color-dark,
    var(--sidebar-menu-text-color-dark, #ffffff)
  ) !important;
}
[data-bs-theme="dark"] .app-sidebar .menu .menu-item .menu-link.active {
  background-color: var(
    --sidebar-menu-bg-active-dark,
    rgba(255, 255, 255, 0.2)
  ) !important;
}
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active
  .menu-title,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active
  .menu-arrow,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active
  .menu-icon
  i,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active
  .menu-icon
  .ki-outline,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active
  .menu-icon
  .ki-duotone,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active
  .menu-icon
  .ki-solid {
  color: var(
    --sidebar-menu-text-active-color-dark,
    var(--sidebar-menu-text-color-dark, #ffffff)
  ) !important;
}

/* ---- Minimized sidebar: reset full menu-link styles ---- */
/* Reset background/border on the full-width menu-link — it includes hidden text space */
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child {
  background-color: transparent !important;
  border-left: none !important;
}
/* Reset hover on the full menu-link when minimized — hover effect goes on .menu-icon only */
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover {
  background-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Base state: transition on .menu-icon so enter AND leave are smooth */
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link
  .menu-icon {
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link
  .menu-icon
  i,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link
  .menu-icon
  .ki-outline,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link
  .menu-icon
  .ki-duotone,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link
  .menu-icon
  .ki-solid {
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    font-size 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Hover effect on menu-icon only (matches active icon style) */
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover
  .menu-icon {
  background-color: var(
    --sidebar-menu-bg-hover,
    rgba(255, 255, 255, 0.14)
  ) !important;
  border-radius: 8px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transform: scale(1.08) !important;
}
/* Hover icon color */
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover
  .menu-icon
  i,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover
  .menu-icon
  .ki-outline,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover
  .menu-icon
  .ki-duotone,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link:hover
  .menu-icon
  .ki-solid {
  color: var(
    --sidebar-menu-text-hover-color,
    var(--sidebar-menu-text-color, #ffffff)
  ) !important;
  font-size: 1.15rem !important;
}
/* Compact background only on the icon wrapper — slightly larger than inactive icons */
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active
  .menu-icon,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-icon {
  background-color: var(
    --sidebar-menu-bg-active,
    rgba(255, 255, 255, 0.2)
  ) !important;
  border-radius: 8px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
/* Icon: slightly bigger + uses the editable "Cor do Texto (Ativo)" variable */
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active
  .menu-icon
  i,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active
  .menu-icon
  .ki-outline,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active
  .menu-icon
  .ki-duotone,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active
  .menu-icon
  .ki-solid,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-icon
  i,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-icon
  .ki-outline,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-icon
  .ki-duotone,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-icon
  .ki-solid {
  color: var(
    --sidebar-menu-icon-active-color,
    var(--sidebar-menu-text-active-color, #ffffff)
  ) !important;
  font-size: 1.15rem !important;
  transition: font-size 0.15s ease !important;
}
/* Remove ::after dot in minimized state */
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.active::after,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child::after {
  display: none !important;
}

/* ---- Sidebar flyout submenu (menu-sub-lg-dropdown): fix opacity + height + colors ---- */

/* 1. Restore opacity: 0 and height: 0 applied by sidebar-minimize rule */
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .app-sidebar-menu
  .menu-sub-lg-dropdown
  .menu-title,
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .app-sidebar-menu
  .menu-sub-lg-dropdown
  .menu-content {
  opacity: 1 !important;
  transition: none !important;
}
[data-kt-app-sidebar-minimize="on"]
  .app-sidebar
  .app-sidebar-menu
  .menu-item.show
  > .menu-sub-lg-dropdown {
  height: auto !important;
  overflow: visible !important;
}

/* 2. Flyout background = card/white (not dark sidebar bg) */
.app-sidebar .menu .menu-sub-lg-dropdown {
  background-color: var(--bs-body-bg, #ffffff) !important;
  box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15) !important;
}
[data-bs-theme="dark"] .app-sidebar .menu .menu-sub-lg-dropdown {
  background-color: var(--bs-dark-bg-subtle, #1e1e2d) !important;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Text colors — dark on light bg, light on dark bg */
.app-sidebar .menu .menu-sub-lg-dropdown .menu-item .menu-link .menu-title,
.app-sidebar .menu .menu-sub-lg-dropdown .menu-item .menu-link .menu-arrow,
.app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-bullet
  .bullet {
  color: var(--bs-gray-800, #344767) !important;
}
.app-sidebar .menu .menu-sub-lg-dropdown .menu-item .menu-link .menu-icon i,
.app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-icon
  .ki-outline,
.app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-icon
  .ki-duotone,
.app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-icon
  .ki-solid {
  color: var(--bs-gray-600, #7e8299) !important;
}
.app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item:hover
  > .menu-link
  .menu-title,
.app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item.active
  > .menu-link
  .menu-title {
  color: var(--color-accent) !important;
}
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-title,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-arrow,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-bullet
  .bullet {
  color: var(--bs-gray-300, #d1d3e0) !important;
}
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-icon
  i,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-icon
  .ki-outline,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-icon
  .ki-duotone,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-sub-lg-dropdown
  .menu-item
  .menu-link
  .menu-icon
  .ki-solid {
  color: var(--bs-gray-400, #b5b5c3) !important;
}
/* ========================================== */

/* ===== FOOTER ===== */
/* Background and text driven by ThemeConfigurator CSS vars */
.app-footer {
  background: var(--footer-bg, transparent) !important;
}
[data-bs-theme="dark"] .app-footer,
.v-theme--dark .app-footer {
  background: var(--footer-bg-dark, transparent) !important;
}
.app-footer,
.app-footer a,
.app-footer span,
.app-footer * {
  color: var(--footer-text, #64748b) !important;
}
[data-bs-theme="dark"] .app-footer,
[data-bs-theme="dark"] .app-footer a,
[data-bs-theme="dark"] .app-footer span,
[data-bs-theme="dark"] .app-footer *,
.v-theme--dark .app-footer,
.v-theme--dark .app-footer * {
  color: var(--footer-text-dark, #64748b) !important;
}
/* ================== */

/* ===== MANAGEMENT VIEWS (Accommodation, Pension, Tariff, Channel, Fluctuation) ===== */

/* --- Barra de ações (botões fora do v-card) --- */
[data-bs-theme="dark"] .btn-dark {
  background-color: #4a5568 !important;
  border-color: #4a5568 !important;
  color: #f8f9fa !important;
}
[data-bs-theme="dark"] .btn-outline-secondary {
  color: #a0aec0 !important;
  border-color: #4a5568 !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: #4a5568 !important;
  color: #f8f9fa !important;
}
[data-bs-theme="dark"] .btn-outline-danger {
  color: #fc8181 !important;
  border-color: #fc8181 !important;
}
[data-bs-theme="dark"] .btn-outline-danger:hover {
  background-color: #fc8181 !important;
  color: #1a202c !important;
}

/* --- Period card header --- */
.v-theme--light .period-card__header {
  background: var(--card-bg, #ffffff);
}
.v-theme--dark .period-card__header {
  background: rgba(255, 255, 255, 0.05);
}
.v-theme--dark .period-card__header h5 {
  color: var(--card-text-dark, #f8f9fa) !important;
}
.v-theme--dark .period-card__header .text-muted {
  color: #a0aec0 !important;
}

/* --- Accommodation block --- */
.v-theme--light .accommodation-block {
  border-left-color: #27ae60;
}
.v-theme--dark .accommodation-block {
  border-left-color: #2ecc71;
}
.v-theme--dark .accommodation-block h6 {
  color: var(--card-text-dark, #f8f9fa) !important;
}

/* --- Fluctuation block --- */
.v-theme--light .fluctuation-block {
  background: #fefefe;
  border-left-color: #e74c3c;
}
.v-theme--dark .fluctuation-block {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: #ff6b6b;
}
.v-theme--dark .fluctuation-block h6 {
  color: var(--card-text-dark, #f8f9fa) !important;
}

/* --- Tables --- */
.v-theme--dark .pension-table,
.v-theme--dark .tariff-table,
.v-theme--dark .category-table,
.v-theme--dark .channel-table {
  color: var(--card-text-dark, #f8f9fa);
}

/* --- Text muted inside dark cards --- */
.v-theme--dark .text-muted {
  color: #a0aec0 !important;
}

/* --- Management modals --- */
.modal-content {
  background-color: var(--card-bg, #ffffff);
  color: var(--card-text-light, #1e293b);
}
[data-bs-theme="dark"] .modal-content {
  background-color: var(--card-bg-dark, #1e293b);
  color: var(--card-text-dark, #f8f9fa);
}
[data-bs-theme="dark"] .modal-header {
  border-bottom-color: #2d3748;
}
[data-bs-theme="dark"] .modal-header .modal-title {
  color: var(--card-text-dark, #f8f9fa) !important;
}
[data-bs-theme="dark"] .modal-footer {
  border-top-color: #2d3748;
}
[data-bs-theme="dark"] .modal-body .form-label {
  color: #cbd5e0 !important;
}
/* ================================================================================== */

/* --- Accordion parent highlight when a child route is active --- */
.app-sidebar .menu .menu-item .menu-link.has-active-child {
  background-color: var(
    --sidebar-menu-bg-active,
    rgba(255, 255, 255, 0.2)
  ) !important;
  border-left: 3px solid var(--color-accent) !important;
}
.app-sidebar .menu .menu-item .menu-link.has-active-child .menu-title,
.app-sidebar .menu .menu-item .menu-link.has-active-child .menu-arrow,
.app-sidebar .menu .menu-item .menu-link.has-active-child .menu-bullet .bullet {
  color: var(
    --sidebar-menu-text-active-color,
    var(--sidebar-menu-text-color, #ffffff)
  ) !important;
}
.app-sidebar .menu .menu-item .menu-link.has-active-child .menu-icon i,
.app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-icon
  .ki-outline,
.app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-icon
  .ki-duotone,
.app-sidebar .menu .menu-item .menu-link.has-active-child .menu-icon .ki-solid {
  color: var(
    --sidebar-menu-text-active-color,
    var(--sidebar-menu-text-color, #ffffff)
  ) !important;
}
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child {
  background-color: var(
    --sidebar-menu-bg-active-dark,
    rgba(255, 255, 255, 0.2)
  ) !important;
}
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-title,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-arrow,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-icon
  i,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-icon
  .ki-outline,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-icon
  .ki-duotone,
[data-bs-theme="dark"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link.has-active-child
  .menu-icon
  .ki-solid {
  color: var(
    --sidebar-menu-text-active-color-dark,
    var(--sidebar-menu-text-color-dark, #ffffff)
  ) !important;
}

/* --- Active menu item border accent (all layouts) --- */
.app-sidebar .menu .menu-item .menu-link.active,
.app-header-menu .menu .menu-item > .menu-link.active {
  border-left: 3px solid var(--color-accent) !important;
}

/* --- Sidebar toggle button --- */
#kt_app_sidebar_toggle {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/* --- Header top border accent (light-header) --- */
[data-kt-app-layout="light-header"] .app-header {
  border-bottom: 3px solid var(--color-primary) !important;
}

/* --- Force header transparent when not scrolled (no background) --- */
[data-kt-app-layout="light-sidebar"] .app-header:not(.scrolled),
[data-kt-app-layout="dark-sidebar"] .app-header:not(.scrolled),
[data-kt-app-layout="dark-header"] .app-header:not(.scrolled),
[data-kt-app-layout="light-header"] .app-header:not(.scrolled),
#kt_app_header:not(.scrolled),
#kt_app_toolbar,
.app-navbar {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* --- Navbar background when header is scrolled --- */
.app-header.scrolled .app-navbar {
  background: var(--header-scroll-bg) !important;
}
[data-bs-theme="dark"] .app-header.scrolled .app-navbar {
  background: var(--header-scroll-bg-dark) !important;
}

@media (max-width: 576px) {
  .display-events-buttons {
    display: grid;
    justify-items: center;
    grid-template-rows: repeat(6, 1fr);
    gap: 5px;
  }
}

@media (max-width: 900px) {
  .display-events-buttons {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
  }
}

@media (min-width: 1024px) {
  .buttons_area {
    margin-top: 0.2rem;
  }

  .responsive_mobile {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .buttons_adjust {
    margin-left: 1rem;
  }

  .seletor_indicadores {
    display: flex;
    justify-content: end;
  }

  .responsive_button {
    display: flex;
    justify-content: end;
  }

  .responsive_large {
    display: flex;
    margin-left: 3.5rem;
    margin-bottom: 0.2rem;
  }

  .responsive_button {
    display: flex;
    align-items: start;
  }

  .display-events-buttons {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
  }
}

@media (min-width: 1200px) {
  .seletor_indicadores {
    display: flex;
    align-items: center;
  }

  .responsive_button {
    display: flex;
    justify-content: start;
    align-items: center;
  }
}

@media (min-width: 1600px) {
  .responsive_button {
    display: flex;
    align-items: center;
    margin-top: 0.2rem;
  }

  .buttons_area {
    display: flex !important;
    align-items: center !important;
    justify-content: start !important;
    margin-bottom: 0.5rem !important;
  }

  .display-events-buttons {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(6, 16%);
  }
}