/* ------------------------------------------------------------------------------------------------
   Arquivo: vws.css
   Descrição:
   - Folha de estilos base compartilhada do sistema VWS.
   - Centraliza componentes, temas e ajustes visuais reutilizáveis.

   Funcionalidades específicas:
   - Padronização visual global
   - Regras base de componentes compartilhados
   - Ajustes estruturais de layout e interação

   Cronologia:
   - 02/04/2026: Consolidação do visual em painel no border-group base e criação
     de slot opcional de cabeçalho com suporte a ícone Lucide
   - 02/04/2026: Ajuste da variante border-group--panel para usar contraste adaptativo
     baseado em text-primary e reforço tipográfico no título
   - 02/04/2026: Adição da variante visual border-group--panel para testes de agrupamento
     com cabeçalho integrado, sem substituir o border-group padrão
   - 27/03/2026: Ajuste do agrupamento visual base de accordions para que itens do mesmo conjunto
     se comportem como grupo contínuo, preservando sub-accordions
     (Autor: Marcelo A. Dias Amado - Vintage Words Studio)
   ------------------------------------------------------------------------------------------------ */
/* ================================================================================================
   SISTEMA DE TEMAS MODULAR - VWS
   ================================================================================================
   
   Os temas foram organizados em arquivos separados para facilitar a manutenção e extensibilidade.
   Cada tema possui suas próprias variáveis CSS que são aplicadas conforme o atributo data-bs-theme.
   
   Estrutura:
   - themes/mist_gray.css      → Tema claro (padrão)
   - themes/cold_gray.css      → Tema intermediário
   - themes/abyssal_blue.css   → Tema escuro azulado
   - themes/midnight_orchid.css → Tema escuro cinza
   
   Para adicionar um novo tema:
   1. Crie um arquivo CSS em themes/ com as variáveis do tema
   2. Importe o arquivo abaixo
   3. Use :root[data-bs-theme='nome-do-tema'] no seletor
   ================================================================================================ */

/* Importação dos temas */
@import url('themes/mist_gray.css');
@import url('themes/winter_breeze.css');
@import url('themes/winter_docks.css');
@import url('themes/graphite_gold.css');
@import url('themes/snow_mint.css');
@import url('themes/lavender.css');
@import url('themes/orchid.css');
@import url('themes/amber.css');
@import url('themes/lemon.css');
@import url('themes/coffee_bronze.css');
@import url('themes/coral.css');
@import url('themes/steampunk.css');
@import url('themes/cabernet_noir.css');
@import url('themes/sage.css');
@import url('themes/soft_slate.css');
@import url('themes/soft_mint.css');
@import url('themes/aqua_breeze.css');
@import url('themes/cold_gray.css');
@import url('themes/abyssal_blue.css');
@import url('themes/midnight_orchid.css');
@import url('themes/ocean_night.css');
@import url('themes/charcoal.css');
@import url('themes/semantyq.css');
@import "/static/css/vws.datatables.css";

:root {
  /* Fallbacks de contraste para textos de ações que não são definidos nos temas */
  --action-delete-text: var(--text-contrast);
  --action-export-text: var(--text-contrast);
  --action-print-text: var(--text-contrast);
  --action-filter-text: var(--text-contrast);
  --action-warning-text: var(--surface-contrast);
  --action-more-info-text: var(--text-contrast);
}


.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--surface-panel) 10%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border-strong) 25%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--text-primary) 6%, transparent);
  min-height: 60px;
  transition: background 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease;
  width: 100%;
  left: 0;
  right: 0;
}

.topbar .topbar-custom {
  gap: 1rem;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
}

.topbar-item {
  gap: 0.5rem;
}

.topbar .topbar-item li {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.topbar .welcome-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.topbar .welcome-text h3 {
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
  color: var(--text-secondary);
}

.topbar > hr {
  margin: 0;
  border-color: color-mix(in srgb, var(--border-strong) 40%, transparent);
  opacity: 0.7;
}

.topbar.scrolled {
  background: color-mix(in srgb, var(--surface-panel) 8%, transparent);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.topbar .nav-link {
  border-radius: 0.4rem;
  padding: 0.35rem 0.65rem;
  background: var(--surface-panel);
  color: var(--text-secondary);
  transition: background 0.25s ease, transform 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: 44px;
  gap: 0.35rem;
}

.topbar .nav-link img.thumb-sm,
.topbar .nav-link img.thumb-md {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 0.4rem;
}
.language-flag-avatar {
  width: 32px;
  height: 22px;
  object-fit: cover;
  border-radius: 0.4rem;
  box-shadow: var(--card-shadow-subtle, 0 3px 10px rgba(0, 0, 0, 0.12));
  border: 1px solid color-mix(in srgb, var(--border-strong) 50%, transparent);
}
.language-flag-option {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.topbar .dropdown-menu .thumb-md,
.topbar .dropdown-menu .thumb-sm {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 0.4rem;
}
.topbar-nav-menu {
  gap: 0.35rem;
}
.topbar-nav-menu .dropdown-menu.topbar-menu-dropdown {
  min-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
}
.notifications-dropdown-menu {
  width: min(380px, calc(100vw - 2rem));
  max-height: 70vh;
  border-radius: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--surface-section-border, var(--surface-card-border, var(--border-soft)));
  background: var(--surface-section, var(--surface-card, var(--surface-panel))) !important;
  box-shadow: var(--card-shadow-subtle, 0 8px 24px rgba(0, 0, 0, 0.22));
}
.notifications-dropdown-list {
  max-height: 380px;
  overflow-y: auto;
}
.notifications-dropdown-menu .topbar-component-header,
.notifications-dropdown-menu .topbar-component-footer {
  background: var(--surface-section-accent, var(--surface-card-accent, var(--surface-panel))) !important;
}
.notifications-dropdown-menu .notification-preview-card {
  display: block;
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid var(--surface-section-border, var(--surface-card-border, var(--border-soft)));
  background: transparent;
}
.notifications-dropdown-menu .notification-preview-card:last-child {
  border-bottom: none;
}
.notifications-dropdown-menu .notification-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}
.notifications-dropdown-menu .notification-preview-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.notifications-dropdown-menu .notification-preview-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 36px;
}
.notifications-dropdown-menu .notification-preview-sender {
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notifications-dropdown-menu .notification-preview-time {
  flex: 0 0 auto;
  font-size: 0.76rem;
  color: var(--text-secondary);
}
.notifications-dropdown-menu .notification-preview-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.notifications-dropdown-menu .notification-preview-title {
  font-size: 0.92rem;
  margin: 0;
  color: var(--text-primary);
  font-weight: 700;
}
.notifications-dropdown-menu .notification-preview-message {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.notifications-dropdown-menu .notification-expand-btn {
  padding: 0;
  margin-top: 0.15rem;
  font-size: 0.74rem;
  color: var(--text-secondary);
  text-decoration: none;
  box-shadow: none !important;
}
.notifications-dropdown-menu .notification-expand-btn:hover,
.notifications-dropdown-menu .notification-expand-btn:focus {
  color: var(--text-primary);
  text-decoration: underline;
}
.notifications-dropdown-menu .notification-preview-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
}
.notifications-dropdown-menu .notification-action-icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
  color: var(--brand-primary);
}
.notifications-dropdown-menu .notification-preview-actions .btn {
  font-size: 0.8rem;
}
.topbar-nav-menu .dropdown-item.disabled {
  opacity: 0.55;
  pointer-events: none;
}
.filter-dropdown-menu {
  min-width: 400px;
  padding: 0 !important;
  border-radius: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--surface-section-border, var(--surface-card-border, var(--border-soft)));
  background: var(--surface-section, var(--surface-card, var(--surface-panel))) !important;
  box-shadow: var(--card-shadow-subtle, 0 8px 24px rgba(0, 0, 0, 0.22));
}
.filter-dropdown-menu-save {
  min-width: 400px;
}
.filter-dropdown-menu-load {
  min-width: 450px;
}
.filter-dropdown-panel,
.filter-dropdown-empty {
  list-style: none;
  margin: 0;
  background: var(--surface-section, var(--surface-card, var(--surface-panel)));
  color: var(--text-primary);
}
.filter-dropdown-body {
  padding: 1rem;
  background: var(--surface-section, var(--surface-card, var(--surface-panel)));
}
.filter-dropdown-footer {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--surface-section-border, var(--surface-card-border, var(--border-soft)));
}
.filter-dropdown-menu .list-group-item {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--surface-section-border, var(--surface-card-border, var(--border-soft)));
}
.filter-dropdown-menu .list-group-item-action {
  color: var(--text-primary);
  text-decoration: none;
}
.filter-dropdown-menu .list-group-item-action:hover,
.filter-dropdown-menu .list-group-item-action:focus {
  color: var(--text-primary);
}
.filter-dropdown-menu .dropdown-item,
.filter-dropdown-menu .dropdown-item:hover,
.filter-dropdown-menu .dropdown-item:focus {
  background: transparent;
}
.topbar-nav-menu .dropdown-item .btn {
  background: transparent;
  border: none;
  color: inherit;
  box-shadow: none;
  padding: 0.35rem 0.75rem;
}
.topbar-nav-menu .dropdown-item .btn:hover,
.topbar-nav-menu .dropdown-item .btn:focus,
.topbar-nav-menu .dropdown-item .btn:active {
  background: transparent;
  color: inherit;
  box-shadow: none;
  outline: none;
}
.topbar-collapse-toggle,
.offcanvas-collapse-toggle {
  color: inherit !important;
  text-decoration: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: none !important;
}
.topbar-collapse-toggle:hover,
.topbar-collapse-toggle:focus,
.topbar-collapse-toggle:active,
.topbar-collapse-toggle:focus-visible,
.topbar-collapse-toggle:focus-within,
.offcanvas-collapse-toggle:hover,
.offcanvas-collapse-toggle:focus,
.offcanvas-collapse-toggle:active,
.offcanvas-collapse-toggle:focus-visible,
.offcanvas-collapse-toggle:focus-within {
  color: inherit !important;
  text-decoration: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove o efeito de foco do botão */
.topbar-collapse-toggle::before,
.topbar-collapse-toggle::after,
.offcanvas-collapse-toggle::before,
.offcanvas-collapse-toggle::after {
  display: none !important;
}

/* Garante que o dropdown-item não tenha fundo azul */
.dropdown-item.px-0 {
  background-color: transparent !important;
}
.dropdown-item.px-0:hover,
.dropdown-item.px-0:focus,
.dropdown-item.px-0:active {
  background-color: transparent !important;
}
/* Top-level items no topo sem fundo */
.topbar-nav-menu > li > .nav-link {
  background: transparent;
  box-shadow: none;
  border: none;
}
.topbar-nav-menu > li > .nav-link:hover,
.topbar-nav-menu > li > .nav-link:focus {
  background: transparent;
  transform: none;
}
/* Menu Superior (status_menu = 0) - esconde sidebar */
body[data-menu-type="0"] .startbar,
body[data-menu-type="0"] .startbar-overlay {
  display: none !important;
}
body[data-menu-type="0"] .page-wrapper {
  margin-left: 0 !important;
}
/* Esconde o hambúrguer no menu superior em telas largas; mostra só em mobile */
body[data-menu-type="0"] .mobile-menu-btn {
  display: none !important;
}

/* Menu Lateral (status_menu = 1) - mostra sidebar (prioridade sobre data-layout)
   IMPORTANTE: Esta regra deve vir ANTES das regras de data-layout=topbar para garantir prioridade */
body[data-menu-type="1"] .startbar,
body[data-menu-type="1"][data-layout=topbar] .startbar,
body[data-layout=topbar][data-menu-type="1"] .startbar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Overlay não é necessário quando menu lateral está sempre visível */
body[data-menu-type="1"] .startbar-overlay,
body[data-menu-type="1"][data-layout=topbar] .startbar-overlay,
body[data-layout=topbar][data-menu-type="1"] .startbar-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body[data-menu-type="1"] .page-wrapper,
body[data-menu-type="1"][data-layout=topbar] .page-wrapper,
body[data-layout=topbar][data-menu-type="1"] .page-wrapper {
  margin-left: 280px !important;
}

/* Mantém compatibilidade com data-layout=topbar (para não quebrar código existente)
   Mas só aplica se não houver data-menu-type="1" definido */
body[data-layout=topbar]:not([data-menu-type="1"]) .startbar,
body[data-layout=topbar]:not([data-menu-type="1"]) .startbar-overlay {
  display: none !important;
}
body[data-layout=topbar]:not([data-menu-type="1"]) .page-wrapper {
  margin-left: 0 !important;
}
body[data-layout=topbar]:not([data-menu-type="1"]) .mobile-menu-btn {
  display: none !important;
}
@media (max-width: 991.98px) {
  body[data-layout=topbar] .mobile-menu-btn {
    display: inline-flex !important;
  }
}

.topbar .nav-link:hover {
  background: var(--surface-muted);
  transform: translateY(-1px);
}

.topbar .nav-link.active {
  background: var(--brand-info);
  color: #fff;
}

.text-menu-icon {
  font-size: 1.3rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

svg.text-menu-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  stroke-width: 1.9;
}

.topbar .bg-topbar-items {
  border: 1px solid rgba(99, 102, 241, 0.25);
}

.topbar .app-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.topbar .app-search form {
  background: var(--surface-panel);
  border-radius: 0.4rem;
  border: 1px solid var(--border-strong);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 0.35rem;
  box-shadow: var(--card-shadow-subtle);
  width: min(360px, 60vw);
  transition: box-shadow 0.25s ease;
  height: 44px;
  min-height: 44px;
}

.topbar .app-search input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  padding: 0.45rem 0.75rem;
  font-size: 0.95rem;
  height: auto;
  min-height: 0;
}

.topbar .app-search button {
  border-radius: 0.4rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  flex-shrink: 0;
}


/* ================================================================================================
   ESTILOS CSS GERAIS DO SISTEMA
   A partir daqui estão os estilos que não dependem de tema
   ================================================================================================ */



/* === ANALYTICS BANNER STYLES ================================================================== */
.analytics-header {
  background: var(--color-analytics-bg);
  border-radius: 0.4rem;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-analytics-border);
  position: relative;
  overflow: hidden;
}

.analytics-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-analytics-accent);
}

.analytics-header h2 {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.analytics-header h2 i {
  color: var(--brand-secondary);
  margin-right: 0.75rem;
}

.analytics-header p {
  color: var(--text-secondary);
  margin-bottom: 0;
  font-size: 1.1rem;
}


/* === SELECT2 ================================================================================== */
.select2-container {  
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
    border-color: var(--border-soft) !important;

  
  }
  .select2-container .select2-selection--single {    
    font-size: 0.9rem !important;
    line-height: 1.6;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-color: var(--border-soft) !important;

  }
  .select2-container .select2-selection--single .select2-selection__rendered {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 0.9rem !important;
    padding-left: 0;
    padding-right: 0;
  }
  .select2-container .select2-selection--single .select2-selection__clear {
    background-color: transparent;
    border: none;
    font-size: 0.9rem !important;
  }
  .select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px;
  }
  .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0;
  }
  .select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    user-select: none;
    -webkit-user-select: none;
  }
  .select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline;
    list-style: none;
    padding: 0;
  }
  .select2-container .select2-selection--multiple .select2-selection__clear {
    background-color: transparent;
    border: none;
    font-size: 0.9rem !important;
  }
.select2-container .select2-search--inline .select2-search__field {
  box-sizing: border-box;
  border: none;
  font-size: 100%;
  margin-top: 5px;
  margin-left: 5px;
  padding: 0;
  max-width: 100%;
  resize: none;
  height: 32px;
  vertical-align: bottom;
  font-family: var(--app-font);
  overflow: hidden;
  word-break: keep-all;
}
  .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
  
  .select2-dropdown {
    background-color: var(--surface-panel);
    border: var(--bs-border-width) solid var(--border-soft);
    border-radius: 0.4rem;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 1051;
  }
  
  .select2-results {
    display: block;
  }
  
  .select2-results__options {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .select2-results__option {
    padding: 6px;
    user-select: none;
    -webkit-user-select: none;
  }
  
  .select2-results__option--selectable {
    cursor: pointer;
  }
  
  .select2-container--open .select2-dropdown {
    font-size: 0.9rem !important;
    left: 0;
  }
  
  .select2-container--open .select2-dropdown--above {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .select2-container--open .select2-dropdown--below {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  
  .select2-search--dropdown {
    display: block;
    padding: 4px;
  }
  .select2-search--dropdown .select2-search__field {
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
  }
  .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
  .select2-search--dropdown.select2-search--hide {
    display: none;
  }
  
  .select2-close-mask {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 99;
    background-color: var(--surface-panel);
    filter: alpha(opacity=0);
  }
  
  .select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
  }
  
.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.4rem;
  height: 38px;
  min-height: 38px;
  padding: 0.375rem 2.5em 0.375rem 0.75rem;
  font-size: 0.9rem !important;
  color: #495057;
  box-shadow: none;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  display: flex;
  align-items: center;
  font-family: var(--app-font);
}
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #495057;
    line-height: 1.5;
    padding-left: 0;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 0.75rem;
    top: 0;
    width: 1.2em;
    display: flex;
    align-items: center;
  }
  .select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    height: 32px;
    margin-right: 20px;
    padding-right: 0px;
  }
  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--state-inactive-bg);
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--state-inactive-text) transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
  }
  .select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear {
    float: left;
  }
  .select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto;
  }
  .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--state-inactive-bg);
    cursor: default;
  }
  .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none;
  }
  .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
  }
.select2-container--default .select2-selection--multiple {
  background-color: var(--surface-panel);
  border: 1px solid var(--border-soft);
  border-radius: 0.4rem;
  cursor: text;
  padding-bottom: 5px;
  padding-right: 5px;
  position: relative;
  font-family: var(--app-font);
}
  .select2-container--default .select2-selection--multiple.select2-selection--clearable {
    padding-right: 25px;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    font-weight: bold;
    height: 20px;
    margin-right: 10px;
    margin-top: 5px;
    position: absolute;
    right: 0;
    padding: 1px;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--surface-panel);
    border: 1px solid var(--border-soft);
    border-radius: 0.4rem;
    box-sizing: border-box;
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px;
    padding: 0;
    padding-left: 20px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    color: var(--text-primary);
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    cursor: default;
    padding-left: 2px;
    padding-right: 5px;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent;
    border: none;
    border-right: 1px solid var(--border-soft);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: var(--state-inactive-bg);
    cursor: pointer;
    font-size: 0.9rem !important;
    font-weight: bold;
    padding: 0 4px;
    position: absolute;
    left: 0;
    top: 0;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: var(--surface-muted);
    color: var(--text-primary);
    outline: none;
  }
  .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice {
    margin-left: 5px;
    margin-right: auto;
  }
  .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 5px;
    padding-right: 2px;
    
  }
  .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
    border-left: 1px solid #aaa;
    border-right: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__clear {
    float: left;
    margin-left: 10px;
    margin-right: auto;
    
  }
  .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid black 1px;
    outline: 0;
    background-color: var(--surface-panel);
  }
  .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--state-inactive-bg);
    cursor: default;
  }
  .select2-container--default.select2-container--disabled .select2-selection__choice__remove {
    display: none;
  }
  .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-soft);
    
  }
  .select2-container--default .select2-search--inline .select2-search__field {
    background-color: var(--surface-panel);
    border: none;
    outline: 0;
    box-shadow: none;
  }
  .select2-container--default .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
    
  }
  .select2-container--default .select2-results__option .select2-results__option {
    padding-left: 1em;
  }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
    padding-left: 0;
  }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -1em;
    padding-left: 2em;
  }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -2em;
    padding-left: 3em;
  }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -3em;
    padding-left: 4em;
  }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -4em;
    padding-left: 5em;
  }
  .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -5em;
    padding-left: 6em;
  }
  .select2-container--default .select2-results__option--group {
    padding: 0;
  }
  .select2-container--default .select2-results__option--disabled {
    color: var(--state-inactive-bg);
  }
  .select2-container--default .select2-results__option--selected {
    background-color: color-mix(in srgb, var(--surface-accordion-hover, var(--brand-secondary)) 50%, var(--surface-panel) 50%);
    color: var(--surface-section-accent-text, var(--text-primary));
  }
  .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--surface-accordion-hover, var(--brand-secondary));
    color: var(--surface-section-accent-text, var(--text-contrast));
  }
  .select2-container--default .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px;
  }

  
  .select2-container--classic .select2-selection--single {
    background-color: var(--neutral-200);
    border: 1px solid var(--border-soft);
    border-radius: 0.4rem;
    outline: 0;
    background-repeat: repeat-x;    
  }
  .select2-container--classic .select2-selection--single:focus {
    border: 1px solid var(--brand-info);
  }
  .select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: var(--surface-contrast);
    line-height: 28px;
  }
  .select2-container--classic .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    height: 26px;
    margin-right: 20px;
  }
  .select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: var(--state-inactive-bg);
  }
  .select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: var(--state-inactive-bg);
    border: none;
    border-left: 1px solid #aaa;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    background-repeat: repeat-x;
    
  }
  .select2-container--classic .select2-selection--single .select2-selection__arrow b {
    border-color: var(--state-inactive-text) transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
  }
  .select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear {
    float: left;
  }
  .select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow {
    border: none;
    border-right: 1px solid #aaa;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    left: 1px;
    right: auto;
  }
  .select2-container--classic.select2-container--open .select2-selection--single {
    border: 1px solid #5897fb;
  }
  .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
    background: transparent;
    border: none;
  }
  .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
  }
  .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-repeat: repeat-x;
    
  }
  .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-repeat: repeat-x;
    
  }
  .select2-container--classic .select2-selection--multiple {
    background-color: var(--surface-panel);
    border: 1px solid var(--border-soft);
    border-radius: 0.4rem;
    cursor: text;
    outline: 0;
    padding-bottom: 5px;
    padding-right: 5px;
  }
  .select2-container--classic .select2-selection--multiple:focus {
    border: 1px solid var(--brand-info);
  }
  .select2-container--classic .select2-selection--multiple .select2-selection__clear {
    display: none;
  }
  .select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: var(--surface-panel);
    border: 1px solid var(--border-soft);
    border-radius: 0.4rem;
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px;
    padding: 0;
  }
  .select2-container--classic .select2-selection--multiple .select2-selection__choice__display {
    cursor: default;
    padding-left: 2px;
    padding-right: 5px;
  }
  .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent;
    border: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: var(--state-inactive-text);
    cursor: pointer;
    font-size: 0.9rem !important;
    font-weight: bold;
    padding: 0 4px;
  }
  .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #555;
    outline: none;
  }
  .select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice {
    margin-left: 5px;
    margin-right: auto;
  }
  .select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 5px;
    padding-right: 2px;
  }
  .select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .select2-container--classic.select2-container--open .select2-selection--multiple {
    border: 1px solid var(--brand-info);
  }
  .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .select2-container--classic .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-soft);
    outline: 0;
  }
  .select2-container--classic .select2-search--inline .select2-search__field {
    outline: 0;
    box-shadow: none;
  }
  .select2-container--classic .select2-dropdown {
    background-color: var(--surface-panel);
    border: 1px solid transparent;
  }
  .select2-container--classic .select2-dropdown--above {
    border-bottom: none;
  }
  .select2-container--classic .select2-dropdown--below {
    border-top: none;
  }
  .select2-container--classic .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
  }
  .select2-container--classic .select2-results__option--group {
    padding: 0;
  }
  .select2-container--classic .select2-results__option--disabled {
    color: var(--state-inactive-bg);
  }
  .select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--surface-accordion-hover, var(--brand-secondary));
    color: var(--surface-section-accent-text, var(--text-contrast));
  }
  .select2-container--classic .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px;
  }
  .select2-container--classic.select2-container--open .select2-dropdown {
    border-color: var(--brand-info);
  }
 
  .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--surface-panel);
    color: var(--text-primary);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0.4rem;
    min-height: 38px;
    padding: 6px 12px;
    font-size: var(--bs-body-font-size);
  }
  
  .select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--text-primary);
    line-height: 1.5;
  }
  
  .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: var(--state-inactive-text);
  }
  
  .select2-container--bootstrap-5 .select2-selection__arrow {
    top: 6px;
    right: 10px;
  }
  
  .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--surface-panel);
    color: var(--text-primary);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0.4rem;
  }
  
  .select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--surface-accordion-hover, var(--brand-secondary));
    color: var(--surface-section-accent-text, var(--text-contrast));
  }
  
  
  .select2-container--bootstrap-5 .select2-selection__arrow b {
    border-color: var(--text-primary) transparent transparent transparent !important;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    width: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
  }
  
  .select2-container--bootstrap-5.select2-container--focus .select2-selection {
    outline: none;
    border-color: #24c660;
    box-shadow: none;
  }
  
  .select2-container--default .select2-results > .select2-results__options {
    max-height: 250px;
    overflow-y: auto !important;
  }
  
  .select2-dropdown {
    z-index: 9999 !important;
  }
  
  .select2-dropdown-fixed {
    max-height: 240px !important;
    overflow-y: auto !important;
  }
  
.select2-selection--multiple {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start;
  height: auto !important;
  min-height: 38px;
  padding: 6px;
  box-sizing: border-box;
  overflow: visible !important;
}

.select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px;
  width: 100%;
  padding: 0;
  margin: 0;
}



  
/* Estilos para campos desabilitados */
.field-disabled + .select2-container .select2-selection {
  background-color: var(--state-inactive-bg) !important;
  border-color: var(--border-soft) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

.field-disabled + .select2-container .select2-selection__rendered {
  color: var(--state-inactive-text, #6c757d) !important;
}

.field-disabled + .select2-container .select2-selection__arrow {
  display: none !important;
}



/* === BUTTONS ================================================================================== */

.btn {
  border-radius: 0.4rem;
  vertical-align: middle;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.btn:hover {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  filter: brightness(98%); /* sutil */
}

.btn-light {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--border-soft) !important;
  border-radius: 0.4rem;
}



.btn-add {
  border-color: var(--action-primary-bg) !important;
  color: var(--action-primary-bg) !important;
  border-style: solid;
  border-width: 1px;
}

.btn-add:hover {
  background-color: var(--action-primary-bg) !important;
  color: var(--neutral-0) !important;
}

.btn-api-consult {
  background-color: var(--brand-accent) !important;
  color: var(--text-contrast) !important;
}

.btn-back {
  background-color: var(--action-neutral-bg) !important;
  color: var(--neutral-0) !important;
}

.btn-clean {
  background-color: var(--action-filter-clean-bg) !important;
  color: var(--text-contrast) !important;
}

.btn-close-custom {
  background-color: var(--action-neutral-bg) !important;
  color: var(--text-contrast) !important;
  border-color: var(--neutral-400) !important;
  border-style: solid;
  border-width: 1px;
}

.btn-connections {  
  background-color: var(--brand-secondary) !important;
  color: var(--text-contrast) !important;
}

.btn-copy {
  background-color: var(--action-files-bg) !important;
  color: var(--text-contrast) !important;
}

.btn-create {
    background-color: var(--action-primary-bg) !important;
    color: var(--text-contrast) !important;
}

.btn-delete {
  background-color: var(--action-delete-bg) !important;
  color: var(--neutral-0) !important;
}

.btn-download {
  background-color: var(--action-files-bg) !important;
  color: var(--text-contrast) !important;
}

.btn-export {
  background-color: var(--action-export-bg) !important;
  color: var(--text-contrast) !important;
}

.btn-filter {
  background-color: var(--action-filter-bg) !important;
  color: var(--text-contrast) !important;
}

/* Grupo de botões de mídia (vídeo, QR Code, foto) usam um preenchimento suave por padrão */
.btn-upload-media,
.btn-generate-video,
.btn-generate-qrcode,
.btn-open-media,
.btn-view-qrcode,
.btn-photo {
  color: var(--text-contrast) !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Grupo de botões de mídia (vídeo, QR Code, foto) usam um preenchimento suave por padrão */
.btn-remove-img {
  color: var(--text-contrast) !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}


.btn-upload-media {
  background-color: var(--action-files-bg) !important;
  border: 1px solid color-mix(in srgb, var(--action-files-bg) 45%, var(--surface-panel) 55%) !important;
}

.btn-generate-video,
.btn-generate-qrcode,
.btn-open-media,
.btn-view-qrcode,
.btn-photo {
  background-color: var(--action-media-bg) !important;
  color: var(--text-contrast) !important;
  border: 1px solid color-mix(in srgb, var(--action-media-bg) 45%, var(--surface-panel) 55%) !important;
}

.btn-remove-img {
  background-color: color-mix(in srgb, var(--action-delete-bg) 85%, var(--surface-panel)) !important;
  color: var(--text-contrast) !important;
  border: 1px solid color-mix(in srgb, var(--action-delete-bg) 45%, var(--surface-panel) 55%) !important;
}

.btn-upload-media:hover {
  background-color: var(--action-files-bg) !important;
  color: var(--text-contrast) !important;
  border-color: var(--action-files-bg) !important;
}

.btn-generate-video:hover,
.btn-generate-qrcode:hover,
.btn-open-media:hover,
.btn-photo:hover {
  background-color: var(--action-media-bg) !important;
  color: var(--text-contrast) !important;
  border-color: var(--action-media-bg) !important;
}

.btn-remove-img:hover {
  background-color: var(--action-delete-bg) !important;
  color: var(--text-contrast) !important;
  border-color: var(--action-delete-bg) !important;
}

.btn-help {
    background-color: var(--brand-secondary) !important;
    color: var(--neutral-0) !important;
}

.btn-help i,
.btn-help svg,
.btn-help svg * {
  color: currentColor !important;
  stroke: currentColor !important;
}

.btn-history {
  border-color: var(--action-filter-bg) !important;
  color: var(--action-filter-bg) !important;
  border-style: solid;
  border-width: 1px;
}

.btn-import {
  background-color: var(--action-files-bg) !important;
  color: var(--action-files-text) !important;
}

.btn-load {
  background-color: var(--action-neutral-bg) !important;
  color: var(--text-contrast) !important;
}

.btn-map {
  background-color: var(--brand-secondary) !important;
  color: var(--text-secondary) !important;
}

.btn-mark-as-read {
  background-color: var(--brand-info) !important;
  color: var(--text-contrast) !important;
}

.btn-open-message {
  background-color: var(--brand-secondary) !important;
  color: var(--text-contrast) !important;
}


.btn-outline-secondary {  
  color: var(--text-muted) !important;
}

.btn-outline-success {
  color: var(--action-primary-bg)
}


.btn-preview {
  background-color: var(--action-print-bg) !important;
  color: var(--text-contrast) !important;
}

.btn-print {
    background-color: var(--action-print-bg) !important;
    color: var(--text-contrast) !important;
}

.btn-save {
  background-color: var(--action-primary-bg) !important;
  color: var(--action-primary-text) !important;
}

.btn-success {
  background-color: var(--action-primary-bg) !important;
  color: var(--action-primary-text) !important;
}

.btn-view-charts {
  background-color: var(--action-secondary-muted-bg) !important;
  color: var(--text-primary) !important;
}

.btn-fullcalendar {
  color: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
  border-style: solid;
  border-width: 1px;
}

.btn-undo {
  background-color: var(--brand-danger) !important;
  color: var(--text-contrast) !important;
}


.btn-views {
  background-color: var(--brand-primary) !important;
  color: var(--text-primary) !important;
}

.btn-warning {
  background-color: var(--brand-warning) !important;
  color: var(--text-contrast) !important;
}


/* === QUICK BUTTONS ================================================================================== */

.btn-quick-create {
  background-color: transparent !important;
  border: none !important;
  padding-top: 0.2rem !important;
  padding-right: 0 !important;
  padding-left: 0.3rem !important;
  padding-bottom: 0.2rem !important;
  margin-left: 0rem !important;
  margin-right: 0rem !important;
  font-size: 1.5rem !important;
}

.btn-quick-edit {
  background-color: transparent !important;
  border: none !important;
  padding-top: 0.2rem !important;
  padding-left: 0 !important;
  margin-left: 0rem !important;
  margin-right: 0rem !important;
}

/* === BUTTONS OUTLINE =========================================================================== */
.btn-clean-filter {
  border-color: var(--action-filter-bg) !important;
  border-style: solid;
  color: var(--brand-info) !important;
}


/* === DIVIDERS ================================================================================== */

.divider-drop {
  display: inline-block;
  width: 1px;
  height: 1rem; /* Alinhado com a altura do ícone e texto */
  background-color: currentColor;
  opacity: 0.5;
  margin: 0 4px; /* Espaçamento ao redor do divider */
  vertical-align: middle; /* Alinha verticalmente no meio do botão */
}


.divider-drop-clean-filter {
display: inline-block;
width: 1px;
height: 1rem; 
background-color: currentColor;
opacity: 0.5;
margin: 0 8px;
vertical-align: middle; 
}

.divider-drop-outline-danger {
  display: inline-block;
  width: 1px;
  height: 1rem; /* Alinhado com a altura do ícone e texto */
  background-color: var(--brand-danger); /* Cor do divider */
  margin: 0 8px; /* Espaçamento ao redor do divider */
  vertical-align: middle; /* Alinha verticalmente no meio do botão */
}

.divider-drop-outline-info {
  display: inline-block;
  width: 1px;
  height: 1rem; /* Alinhado com a altura do ícone e texto */
  background-color: var(--brand-info); /* Cor do divider */
  margin: 0 8px; /* Espaçamento ao redor do divider */
  vertical-align: middle; /* Alinha verticalmente no meio do botão */
}

.divider-drop-preview {
display: inline-block;
width: 1px;
height: 1rem; 
background-color: var(--border-strong) !important;
margin: 0 8px;
vertical-align: middle; 
}

.divider-drop-preview:hover {
display: inline-block;
width: 1px;
height: 1rem; 
background-color: var(--neutral-0) !important; 
margin: 0 8px;
vertical-align: middle; 
}

.hr-dashed {
border-top: 1px dashed var(--border-strong) !important;
border-color: var(--surface-card-border) !important;
margin-top: 1rem !important;
margin-bottom: 0.5rem !important;
margin-left: 0.5rem !important;
margin-right: 0.5rem !important;
}

.hr-subtitle-division {
  border-top: 4px solid var(--border-strong) !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
}


/* === BACKGROUNDS ================================================================================== */
.bg-active {
  background: var(--brand-primary-soft) !important;
}

.bg-card-body {
  background: var(--surface-section, var(--surface-card, var(--surface-panel))) !important;

}

.bg-card-footer {
  background: var(--surface-section-accent, var(--surface-card-accent, var(--surface-panel)));
  color: var(--surface-section-accent-text, var(--surface-card-accent-text, var(--text-secondary)));
}

.bg-card-header {
  background: var(--surface-section-accent, var(--surface-card-accent, var(--surface-panel)));
  color: var(--surface-section-accent-text, var(--surface-card-accent-text, var(--text-secondary)));
}
.bg-categories {
  background: var(--brand-warning);
}

.bg-chart-body {
  background: var(--surface-panel) !important;
}

.bg-chart-header {
  background: var(--surface-muted);
}

.bg-chart-footer {
  background: var(--surface-muted);
}

.bg-chart-pdf {
  background: var(--text-secondary);
}

.bg-circuit {
  background: var(--brand-info);
}

.bg-cities {
  background: var(--state-inactive-bg);
}  

.bg-danger {
  background: var(--brand-danger) !important;
}

.bg-dark {
  background: var(--neutral-800) !important;
}

.bg-disabled {
--bs-bg-opacity: 1;
background-color: var(--brand-accent-soft) !important;

}

.bg-events {
  background: color-mix(in srgb, var(--brand-secondary) 80%, var(--surface-contrast) 20%);
}

.bg-help-objective-header {
  background: var(--brand-secondary) !important;
}

.bg-help-toast-body {
  background: var(--brand-secondary-soft) !important;
}

.bg-help-toast-header {
  background: var(--brand-secondary) !important;
}

.bg-help-bg-form {
  background: var(--brand-secondary-soft) !important;
}

.help-toast-container {
  width: min(92vw, 760px);
  max-width: 760px;
}

.help-toast {
  width: 100%;
  max-width: none;
}

.help-toast .toast-header {
  align-items: center;
}

.help-toast-icon {
  flex-shrink: 0;
  min-width: 20px;
  min-height: 20px;
}

.help-toast-icon-symbol {
  color: rgb(86, 95, 97);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.help-toast-body {
  max-height: min(70vh, 650px);
  overflow-y: auto;
  text-align: justify;
}

.help-context-modal-dialog {
  max-width: min(92vw, 1140px);
}

.bg-inactive {
  background: var(--state-inactive-bg) !important;
}

.bg-inactive-line {
  background: var(--border-soft) !important;
}

.bg-modal-footer {
  background: var(--surface-section-accent, var(--surface-card-accent, var(--surface-panel)));
}
.bg-modal-header {
  background: var(--surface-section-accent, var(--surface-card-accent, var(--surface-panel)));
}

.bg-organizers {
  background: var(--brand-accent);
}

.bg-primary {
  background: var(--brand-primary) !important;
}

.bg-secondary {
  background: var(--brand-secondary) !important;
}

.bg-sidebar-menu {
  background: var(--surface-menu);
}

.bg-success {
  background: var(--brand-success) !important;
}

.bg-read {
  background: var(--action-primary-bg) !important;
}

.bg-small-card {
  background: var(--surface-panel) !important;
}

.bg-table-body {
  background: var(--surface-panel) !important;
}


.bg-topbar-items {
  background: var(--surface-panel) !important;
}

.bg-users {
  background: var(--brand-primary-soft);
}

.badge-warning {
  background-color: var(--brand-warning) !important;
  color: var(--neutral-0) !important;
}

/* === TEXT COLORS =============================================================================== */
.text-activated {
    color: var(--brand-primary-soft) !important;
}

.text-card-information-description {
  color: var(--text-secondary) !important;
  font-weight:normal !important;
  font-size: 1rem;
}

.text-card-information-title {
  color: var(--surface-card-accent-text) !important;
  font-weight:lighter !important;
  font-size: 0.9rem;
}

.text-card-title {
  color: var(--surface-card-accent-text) !important;
  font-size: 2rem;
  font-weight:normal !important;
}

.text-chart-pdf {
  color: var(--text-contrast) !important;
}

.text-circuit {
  color: var(--brand-info);
}

.text-create {
    color: var(--action-primary-bg) !important;
}

.text-danger.fw-bold {
  color: var(--brand-danger) !important; /* vermelho Bootstrap */
  font-weight: bold;
}

.text-delete {
    color: var(--action-delete-bg) !important;
}

.text-details {
  color: var(--brand-secondary) !important;
}

.text-disabled {
    color: var(--brand-accent) !important;
}

.text-duplicate {
    color: var(--brand-accent) !important;
}

.text-edit {
  color: var(--action-primary-bg) !important;
}

.text-filter {
  color: var(--action-filter-bg) !important;
}

.text-filter-description {
  color: var(--action-filter-bg) !important;
}

.text-information {
  color: var(--brand-info) !important;
}

.text-input-group {
  color: var(--brand-primary) !important;
  border-color: var(--bs-border-color) !important;
  width: 20px;
  height: 20px;
}

.text-map {
    color: var(--brand-secondary) !important;
}

.text-modal-header {
  color: var(--surface-section-accent-text) !important;
}

.text-modal-title {
  color: var(--surface-section-accent-text) !important;
}

.text-more-info {
    color: var(--brand-primary) !important;
}

.text-menu-icon {
  color: var(--text-muted) !important;
}

.text-no-records {
  color: var(--brand-danger) !important; /* vermelho Bootstrap */
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.text-quick-edit-icon {
  color: var(--action-primary-bg) !important;
}

.text-subtitle {
  font-weight:bold !important;
  font-size: 0.9rem;
}

.text-topbar {
  color: var(--text-secondary) !important;
}

.text-topbar-component-header {
  color: var(--text-primary) !important;
}

.text-topbar-component-item {
  color: var(--text-secondary) !important;
}

.text-toggle-on {
  color: var(--brand-primary) !important;
}

.text-toggle-off {
  color: var(--brand-primary) !important;
  opacity: 0.5;
}

.text-warning {
  color: var(--brand-warning) !important; /* seu laranja personalizado */
}





/* === TOOLTIPS ================================================================================== */

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--surface-contrast) !important;
}

.tooltip-categories .tooltip-inner {
  background-color: var(--brand-warning);
  color: var(--neutral-0);
}

.tooltip-circuit .tooltip-inner {
  background-color: var(--brand-info);
  color: var(--surface-contrast);
}

.tooltip-cities .tooltip-inner {
  background-color: var(--state-inactive-bg);
  color: var(--surface-contrast);
}

.tooltip-create .tooltip-inner {
  background-color: var(--action-primary-bg) !important;
  color: var(--neutral-0) !important;
}

.tooltip-delete .tooltip-inner {
  background-color: var(--action-delete-bg) !important;
  color: var(--neutral-0) !important;
}

.tooltip-details .tooltip-inner {
  background-color: var(--surface-muted) !important;
  color: var(--neutral-0) !important;
}

.tooltip-duplicate .tooltip-inner {
  background-color: var(--brand-accent) !important;
  color: var(--neutral-0) !important;
}

.tooltip-edit .tooltip-inner {
  background-color: var(--action-primary-bg) !important;
  color: var(--neutral-0) !important;
}

.tooltip-events .tooltip-inner {
  background-color: color-mix(in srgb, var(--brand-secondary) 80%, var(--surface-contrast) 20%);
  color: var(--neutral-0);
}

.tooltip-help .tooltip-inner {
  background-color: var(--brand-secondary) !important;
}

.tooltip-inner {

  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 0 6px var(--shadow-ring);
}

.tooltip-map .tooltip-inner {
  background-color: var(--brand-secondary) !important;
  color: var(--neutral-0) !important;
}

.tooltip-more-info .tooltip-inner {
  background-color: var(--brand-primary) !important;
  color: var(--neutral-0) !important;
}

.tooltip-organizers .tooltip-inner {
  background-color: var(--brand-accent);
  color: var(--surface-contrast);
}

.tooltip-required .tooltip-inner {
  background-color: var(--brand-warning) !important;
  color: var(--surface-contrast);
}

.tooltip-status .tooltip-inner {
  background-color: var(--surface-muted) !important;
  color: var(--neutral-0) !important;
}

.tooltip-users .tooltip-inner {
  background-color: var(--brand-primary-soft);
  color: var(--surface-contrast);
}



/* === COMPONENTS === */


/* ===== CABEÇALHO DOS DIAS DA SEMANA ===== */

.fc-col-header-cell {
  background-color: var(--surface-panel) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 8px 4px !important;
  border: none !important;
}



/* === SLIDERS =================================================================================== */

/* Estilização genérica para todos os sliders .form-range */
.form-range {
  --slider-filled-color: var(--brand-info);
  --slider-unfilled-color: var(--surface-panel);
  --slider-thumb-color: var(--brand-info);
  --slider-thumb-hover-color: var(--brand-info);
}

/* Para Chrome/Safari/Edge - Track com preenchimento dinâmico baseado no range real */
.form-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, 
    var(--slider-filled-color) 0%,
    var(--slider-filled-color) calc((var(--slider-value) - var(--slider-min)) / (var(--slider-max) - var(--slider-min)) * 100%),
    var(--slider-unfilled-color) calc((var(--slider-value) - var(--slider-min)) / (var(--slider-max) - var(--slider-min)) * 100%),
    var(--slider-unfilled-color) 100%
  );
  height: 8px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Para Firefox - Track com preenchimento dinâmico baseado no range real */
.form-range::-moz-range-track {
  background: linear-gradient(to right, 
    var(--slider-filled-color) 0%,
    var(--slider-filled-color) calc((var(--slider-value) - var(--slider-min)) / (var(--slider-max) - var(--slider-min)) * 100%),
    var(--slider-unfilled-color) calc((var(--slider-value) - var(--slider-min)) / (var(--slider-max) - var(--slider-min)) * 100%),
    var(--slider-unfilled-color) 100%
  );
  height: 8px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Thumb (bolinha) para Chrome/Safari/Edge */
.form-range::-webkit-slider-thumb {
  background-color: var(--slider-thumb-color);
  border: 2px solid var(--neutral-0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  /* Ajustar o posicionamento vertical para centralizar com a barra de 8px */
  margin-top: -4px;
}

.form-range::-webkit-slider-thumb:hover {
  background-color: var(--slider-thumb-hover-color);
  transform: scale(1.1);
}

.form-range::-webkit-slider-thumb:active {
  background-color: var(--slider-thumb-hover-color);
  transform: scale(1.05);
}

/* Thumb (bolinha) para Firefox */
.form-range::-moz-range-thumb {
  background-color: var(--slider-thumb-color);
  border: 2px solid var(--neutral-0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  /* Ajustar o posicionamento vertical para centralizar com a barra de 8px */
  margin-top: -4px;
}

.form-range::-moz-range-thumb:hover {
  background-color: var(--slider-thumb-hover-color);
  transform: scale(1.1);
}

.form-range::-moz-range-thumb:active {
  background-color: var(--slider-thumb-hover-color);
  transform: scale(1.05);
}

/* Estilos específicos para os sliders de marca d'água (garantir consistência) */
#default_watermark_opacity.form-range,
#default_watermark_size.form-range {
  --slider-filled-color: var(--brand-info) !important;
  --slider-unfilled-color: var(--surface-panel) !important;
  --slider-thumb-color: var(--brand-info) !important;
  --slider-thumb-hover-color: var(--brand-info) !important;
}

#default_watermark_opacity.form-range::-webkit-slider-runnable-track,
#default_watermark_size.form-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, 
    var(--slider-filled-color) 0%,
    var(--slider-filled-color) calc((var(--slider-value) - var(--slider-min)) / (var(--slider-max) - var(--slider-min)) * 100%),
    var(--slider-unfilled-color) calc((var(--slider-value) - var(--slider-min)) / (var(--slider-max) - var(--slider-min)) * 100%),
    var(--slider-unfilled-color) 100%
  ) !important;
}

#default_watermark_opacity.form-range::-moz-range-track,
#default_watermark_size.form-range::-moz-range-track {
  background: linear-gradient(to right, 
    var(--slider-filled-color) 0%,
    var(--slider-filled-color) calc((var(--slider-value) - var(--slider-min)) / (var(--slider-max) - var(--slider-min)) * 100%),
    var(--slider-unfilled-color) calc((var(--slider-value) - var(--slider-min)) / (var(--slider-max) - var(--slider-min)) * 100%),
    var(--slider-unfilled-color) 100%
  ) !important;
}

/* === AUDIO FILE PICKER ======================================================================== */
.audio-file-picker { 
  gap: 10px; 
  align-items: center; 
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}


.audio-file-picker audio {
  width: 100%;
  max-width: 100%;
  border-radius: 0.4rem;
  padding: 10px;
}

/* === CARDS ====================================================================================== */
.card {
  border-color: var(--surface-section-border, var(--surface-card-border, var(--border-soft)));
  border-width: 1.5px;
  border-style: solid;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-lg);
  /* overflow: hidden;  <-- Removido para não cortar selects */
}
.card .card-header {
  border-bottom: 1px solid var(--surface-section-border, var(--surface-card-border, var(--border-soft)));
  background: var(--surface-section-accent, var(--surface-card-accent, var(--surface-panel)));
  color: var(--surface-section-accent-text, var(--surface-card-accent-text, var(--text-primary)));
  padding-top: var(--bs-card-spacer-x);
  border-top-left-radius: calc(var(--radius-lg) - 1px);
  border-top-right-radius: calc(var(--radius-lg) - 1px);
}
.card .card-header .card-title {
  margin-bottom: 0;
  font-size: 16px;
  color: var(--surface-section-accent-text, var(--surface-card-accent-text, var(--bs-heading-color)));
}

.card .card-footer {
  background-color: var(--surface-section-accent, var(--surface-card-accent, var(--surface-panel)));
  color: var(--surface-section-accent-text, var(--surface-card-accent-text, var(--text-secondary)));
  border-top: 1px solid var(--surface-section-border, var(--surface-card-border, var(--border-soft)));
  padding: var(--bs-card-spacer-x);
  border-bottom-left-radius: calc(var(--radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}

.card-body {
  background-color: var(--surface-section, var(--surface-card, var(--surface-panel)));
}
.card-body-table {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-lg);
  background-color: var(--neutral-0);
}

/* === ACCORDION ================================================================================== */
.accordion-button:not(.collapsed) {
  background-color: var(--surface-accordion-header, var(--surface-panel)) !important;
  color: var(--text-primary) !important;
}

/* Melhorias visuais para accordions */
.accordion > .accordion-item {
  margin-bottom: 0;
  border: 1px solid var(--surface-accordion-border, var(--bs-border-color));
  border-radius: 0;
  /* overflow: hidden; <-- Removido para não cortar elementos internos */
}

.accordion > .accordion-item:first-of-type {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.accordion > .accordion-item:last-of-type {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.accordion > .accordion-item + .accordion-item {
  border-top: 0;
}

.accordion > .accordion-item > .accordion-header .accordion-button {
  border: none;
  border-radius: 0;
  transition: all 0.3s ease;
  font-weight: 500;
  background-color: var(--surface-section, var(--surface-card, var(--surface-panel))) !important;
  color: var(--text-primary) !important;
}

.accordion > .accordion-item:first-of-type > .accordion-header .accordion-button {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.accordion > .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.accordion > .accordion-item > .accordion-header .accordion-button:hover {
  background-color: var(--surface-accordion-hover, var(--surface-panel)) !important;
  color: var(--text-primary) !important;
}

.accordion > .accordion-item > .accordion-header .accordion-button:hover:not(.collapsed) {
  filter: brightness(85%);
}

.accordion > .accordion-item > .accordion-collapse > .accordion-body {
  background-color: var(--surface-accordion-body, var(--surface-panel)) !important;
  border-top: 1px solid var(--surface-accordion-border, var(--bs-border-color));
  padding: 1rem;
}

/* Estilo para sub-accordions dentro de accordions abertos */
.accordion .accordion .accordion-button {
  background-color: var(--surface-section, var(--surface-card, var(--surface-panel)));
  color: var(--text-primary);
  border-radius: 0.4rem;
  margin: 4px 0;
  font-size: 0.9em;
}

.accordion .accordion .accordion-item {
  margin-bottom: 8px;
  border-radius: 0.4rem;
}

.accordion .accordion .accordion-button:not(.collapsed) {
  background-color: var(--surface-accordion-header, var(--surface-panel)) !important;
  color: var(--text-primary) !important;
}

.accordion .accordion .accordion-body {
  background-color: var(--surface-accordion-body, var(--surface-panel));
  border: 1px solid var(--surface-accordion-border, var(--bs-border-color));
  border-radius: 0.4rem;
  margin: 4px 8px;
}


/* === PROGRESS BAR ============================================================================= */
.progress {
  /* Variáveis customizáveis */
  --progress-height: 2.5em;
  --progress-border-radius: 0.4rem;
  --progress-bar-bg: var(--brand-primary);
  --progress-bar-text: var(--neutral-0);
  --progress-value: 0%; /* defina inline para controlar a largura */

  position: relative;
  display: block;
  width: 100%;
  height: 4rem;
  background-color: var(--border-strong);
  border: 1px solid var(--border-soft);
  border-radius: var(--progress-border-radius);
  overflow: hidden;
}

.progress .progress-bar {
  width: var(--progress-value);
  background: var(--progress-bar-bg);
  color: var(--progress-bar-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  transition: width 0.3s ease;
}

/* Label central opcional sem afetar largura da barra */
.progress .progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-primary);
  pointer-events: none;
}

/* Tamanhos */
.progress.sm { --progress-height: 0.4rem; }
.progress.lg { --progress-height: 1rem; }

/* Estilo listrado e animação opcional */
.progress.striped .progress-bar {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.18) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.18) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

@keyframes progress-stripes {
  from { background-position: 0 0; }
  to { background-position: 1rem 0; }
}

.progress.animated.striped .progress-bar {
  animation: progress-stripes 1s linear infinite;
}

/* Variações de cor alinhadas às paletas do projeto */
.progress.save   { --progress-bar-bg: var(--action-primary-bg); }
.progress.delete { --progress-bar-bg: var(--action-delete-bg); }
.progress.help   { --progress-bar-bg: var(--brand-secondary); }
.progress.info   { --progress-bar-bg: var(--brand-info); }
.progress.warn   { --progress-bar-bg: var(--brand-warning); }




/* === DROP AREA ================================================================================== */

.drop-area {
  padding: 15px 10px; /* Mais espaço em cima/baixo */
  border: 1px dashed var(--border-strong);
  border-radius: 0.4rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.drop-area.dragging {
    border-color: var(--brand-info);
    
}

#drop-text {
  font-size: 12px;
  color: var(--state-inactive-text);
}

#logo-preview {
    display: block;
    margin: 0 auto 10px;
    max-width: 100px;
    height: auto;
    border-radius: 0.4rem;
}

#photo-preview {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px; /* Opcional: deixa a imagem mais arredondada */
  background: #fff;    /* Opcional: fundo branco para fotos PNG */
}

/* === FORM CHECK ================================================================================ */
.form-check-input {
  background-color: var(--surface-panel);
  border-color: var(--border-soft);
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.6rem;
}
.form-check-input:checked {
  background-color: var(--brand-info);
  border-color: var(--brand-info);
}

.form-check-input:focus {
    border-color: var(--brand-info);
    outline: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }

.form-check-label {
  margin-top: 0.55em;
  margin-left: 0.3em;
  color: var(--text-secondary);
}

.form-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-left: 0.4rem;
  margin-bottom: 0.1rem;
  padding-bottom: 0rem;
  padding-top: 0.6rem;
}


/* === SPINNER =================================================================================== */
.spinner-border {
    width: 3rem;
    height: 3rem;
}

  
/* === GROUPS =================================================================================== */
.border-group {
  background-color: var(--surface-panel) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 0.4rem;
  padding: 3rem 0.8rem 1rem 0.8rem !important;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-right: 0rem;
  margin-left: 0rem;
  position: relative;
  overflow: hidden;
}

.border-group::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.2rem;
  background: color-mix(in srgb, var(--surface-panel) 95%, var(--text-primary) 5%);
  border-bottom: 1px solid var(--border-soft);
  z-index: 0;
}

/* Grupo com título opcional */
.border-group[data-title]::before {
  content: attr(data-title);
  position: absolute;
  top: 0.55rem;
  left: 1.2rem;
  background: transparent;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-primary), transparent 40%);
  border: 0;
  border-radius: 0;
  z-index: 1;
  letter-spacing: 0;
}

/* Alias mantido para compatibilidade com telas piloto */
.border-group--panel {
  background-color: var(--surface-panel) !important;
}

.border-group--panel::after {
  background: color-mix(in srgb, var(--surface-panel) 90%, var(--text-primary) 10%);
}

.border-group--panel[data-title]::before {
  font-weight: 300;
}

/* Cabeçalho opcional quando for necessário usar ícone Lucide */
.border-group--header-slot[data-title]::before {
  content: none;
}

.border-group__header {
  position: absolute;
  top: 0.48rem;
  left: 1.5rem;
  right: 1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-primary);
  pointer-events: none;
}

.border-group__header i[data-lucide],
.border-group__header svg {
  width: 0.95rem;
  height: 0.95rem;
  stroke-width: 1.9;
  flex: 0 0 auto;
}

.border-group__title {
  font-size: 0.92rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.1;
}



.fieldset-group {
  border: 1px solid var(--bs-border-color, var(--border-soft)); /* usa variável do Bootstrap se existir */
  border-radius: 0.4rem;
  padding: 0rem 1rem 0rem;
  margin-bottom: 1rem;
  position: relative;
}

.fieldset-group legend {
  float: none;
  width: auto;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;  
  color:slategrey;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.list-group-item:hover .delete-filter-btn {
  display: inline !important;
}

/* === NOTIFICATION BELL ANIMATION =============================================================== */
/* Animação para o sininho de notificações quando chega nova notificação */
.notification-bell-animation {
    animation: bellNotificationCycle 3.6s ease-in-out;
    transform-origin: center !important;
}

@keyframes bellNotificationCycle {
    /* Primeiro ciclo - 0% a 33% */
    0% {
        transform: scale(1);
    }
    2% {
        transform: scale(1.4);
    }
    5%, 10%, 15%, 20%, 25% {
        transform: scale(1.3) translateX(-3px);
    }
    7%, 12%, 17%, 22%, 27% {
        transform: scale(1.3) translateX(3px);
    }
    33% {
        transform: scale(1);
    }
    
    /* Segundo ciclo - 33% a 66% */
    35% {
        transform: scale(1.4);
    }
    38%, 43%, 48%, 53%, 58% {
        transform: scale(1.3) translateX(-3px);
    }
    40%, 45%, 50%, 55%, 60% {
        transform: scale(1.3) translateX(3px);
    }
    66% {
        transform: scale(1);
    }
    
    /* Terceiro ciclo - 66% a 100% */
    68% {
        transform: scale(1.4);
    }
    71%, 76%, 81%, 86%, 91% {
        transform: scale(1.3) translateX(-3px);
    }
    73%, 78%, 83%, 88%, 93% {
        transform: scale(1.3) translateX(3px);
    }
    100% {
        transform: scale(1);
    }
}

/* Estado final da animação - sininho laranja e tamanho normal */
.notification-bell-final {
    color: #ff6b35 !important;
    transform: scale(1) !important;
    transition: all 0.3s ease-in-out;
}

/* Volta ao normal após 5 segundos */
.notification-bell-normal {
    color: var(--text-muted, #6c757d) !important;
    transform: scale(1) !important;
    transition: all 0.3s ease-in-out;
}

/* Debug: classe para testar se o CSS está sendo aplicado */
.notification-bell-debug {
    background-color: red !important;
    border: 2px solid yellow !important;
}

/* === NOTIFICATION DETAIL STYLES ===================================================================== */

/* Header da página de detalhes de notificação */
.notification-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
}

/* Conteúdo principal da notificação */
.notification-content {
    background: var(--card-bg-body);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-bottom: 2rem;
}

/* Metadados da notificação (remetente, data, etc.) */
.notification-meta {
    background: var(--card-bg-body);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Área de ações da notificação */
.notification-actions {
    background: var(--card-bg-body);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}

/* Avatar do remetente */
.sender-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

/* === INPUT GROUP ================================================================================ */
.input-group-inline {
  flex-wrap: nowrap;
}

.input-group-inline > .form-select {
  width: auto;
  flex: 1 1 auto;
}

.input-group-inline > .btn,
.input-group-inline > .input-group-text {
  width: auto;
  flex: 0 0 auto;
}

.input-group > .form-control,
.input-group > .form-select {
  border-radius: 0.4rem !important;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-text,
.input-group > .btn {
  border-radius: 0.4rem !important;
}

.input-group > .input-group-text:not(:first-child),
.input-group > .btn:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .input-group-text:not(:last-child),
.input-group > .btn:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.form-control {
  font-size: 0.9rem !important;
  background-color: var(--surface-panel) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-soft) !important;
  border-radius: 0.4rem !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--border-soft) !important;
}

.form-control-features {
  height: 1.2rem !important;
  width: 60px !important;
  font-size: 0.8rem !important;
  line-height: 0.8 !important;
}

/* === ICONS ===================================================================================== */
.required-icon {
  color: var(--brand-warning) !important; /* Laranja */
  width: 0.9rem !important;
  height: 0.9rem !important;
  margin-left: 3px !important;
  vertical-align: middle;
  margin-right: 0px !important;
  }

/* === BADGES E COLOR PILLS ====================================================================== */

.badge-close {
  background-color: var(--action-neutral-bg) !important;
  color: var(--text-contrast) !important;
}

.badge-delete {
  background-color: var(--action-delete-bg) !important;
  color: var(--action-delete-text) !important;
}

.badge-filter {
  background-color: var(--action-filter-bg) !important;
  color: var(--action-filter-text) !important;
}

.badge-identifier {
  border-radius: 0.4rem;
  background-color: var(--brand-primary) !important;
  color: var(--text-contrast) !important;
}

.badge-help {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  vertical-align: middle;
  line-height: 1;
}

.badge-id-number {
  border-radius: 0.4rem;
  background-color: var(--surface-muted) !important;
  color: var(--text-secondary) !important;
}

.badge-light-outline {
  color: var(--surface-contrast) !important;
  background-color: var(--neutral-200) !important;
  border: 1px solid var(--surface-contrast) !important;
}

.badge-load {
  background-color: var(--action-neutral-bg) !important;
  color: var(--text-contrast) !important;
}

.badge-movement-source {
  background-color: var(--surface-panel) !important;
  color: var(--text-primary) !important;
}

.badge-new-message {
  border-radius: 0.4rem;
  background-color: var(--brand-danger) !important;
  color: var(--text-contrast) !important;
}

.badge-print {
  background-color: var(--action-print-bg) !important;
  color: var(--action-print-text) !important;
}

.badge-received {
  border-radius: 0.35rem;
  background-color: var(--brand-success) !important;
  color: var(--text-contrast) !important;
}

.badge-save {
  background-color: var(--action-primary-bg) !important;
  color: var(--action-primary-text) !important;
}

.badge-sended {
  border-radius: 0.35rem;
  background-color: var(--brand-info) !important;
  color: var(--text-contrast) !important;
}

.badge-status-activated {
  border-radius: 0.35rem;
  background-color: var(--brand-success) !important;
  color: var(--text-contrast) !important;
}

.badge-status-deactivated {
  border-radius: 0.35rem;
  background-color: var(--brand-danger) !important;
  color: var(--text-contrast) !important;
}

.badge-status-canceled {
  border-radius: 0.35rem;
  background-color: var(--neutral-400) !important;
  color: var(--text-primary) !important;
}

.badge-status-overdue {
  border-radius: 0.35rem;
  background-color: var(--brand-danger) !important;
  color: var(--text-contrast) !important;
}

.badge-status-paid {
  border-radius: 0.35rem;
  background-color: var(--brand-success) !important;
  color: var(--text-contrast) !important;
}

.badge-status-partial {
  border-radius: 0.35rem;
  background-color: var(--brand-warning) !important;
  color: var(--surface-contrast) !important;
}

.badge-status-pending {
  border-radius: 0.35rem;
  background-color: var(--brand-info) !important;
  color: var(--text-contrast) !important;
}

.badge-status-scheduled {
  border-radius: 0.35rem;
  background-color: var(--brand-primary) !important;
  color: var(--text-contrast) !important;
}

.badge-quotation-status-awaiting {
  border-radius: 0.35rem;
  background-color: transparent !important;
  color: var(--surface-contrast) !important;
  border: 1px solid var(--surface-contrast) !important;
}

.badge-quotation-status-rejected {
  border-radius: 0.35rem;
  background-color: var(--brand-danger) !important;
  color: var(--text-contrast) !important;
}

.badge-quotation-status-approved {
  border-radius: 0.35rem;
  background-color: var(--brand-success) !important;
  color: var(--text-contrast) !important;
}

.badge-quotation-status-saled {
  border-radius: 0.35rem;
  background-color: var(--brand-primary) !important;
  color: var(--text-contrast) !important;
}

.badge-success {
  border-radius: 0.35rem;
  background-color: var(--brand-success) !important;
  color: var(--text-contrast) !important;
}

.badge-warning {
  border-radius: 0.35rem;
  background-color: var(--brand-warning) !important;
  color: var(--text-contrast) !important;
}


.color-pill {
  display: inline-block;
  min-width: 1.4em;
  height: 1.4em;
  border-radius: 5px;
  margin-right: 0.2em;
  vertical-align: middle;
}

/* === PERMISSION PILLS ========================================================================= */
.permission-pill-create {
    background-color: var(--action-primary-bg) !important;
    color: var(--action-primary-text, var(--text-contrast)) !important;
    border: 1px solid var(--action-primary-bg) !important;
}

.permission-pill-warning {
    background-color: var(--brand-warning) !important;
    color: var(--action-warning-text, var(--surface-contrast)) !important;
    border: 1px solid var(--brand-warning) !important;
}

.permission-pill-delete {
    background-color: var(--action-delete-bg) !important;
    color: var(--action-delete-text, var(--text-contrast)) !important;
    border: 1px solid var(--action-delete-bg) !important;
}

.permission-pill-export {
    background-color: var(--action-export-bg) !important;
    color: var(--action-export-text, var(--text-contrast)) !important;
    border: 1px solid var(--action-export-bg) !important;
}

.permission-pill-print {
    background-color: var(--action-print-bg) !important;
    color: var(--action-print-text, var(--text-contrast)) !important;
    border: 1px solid var(--action-print-bg) !important;
}

.permission-pill-more-info {
    background-color: var(--brand-primary) !important;
    color: var(--action-more-info-text, var(--text-contrast)) !important;
    border: 1px solid var(--brand-primary) !important;
}

.permission-pill-filter {
    background-color: var(--action-filter-bg) !important;
    color: var(--action-filter-text, var(--text-contrast)) !important;
    border: 1px solid var(--action-filter-bg) !important;
}

/* Estilo base para todos os pills de permissão */
.permission-pill {
    display: inline-block;
    max-height: 2rem;
    padding: 0.25rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
}

.permission-pill:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
  


/* === ALERTS ===================================================================================== */
.alert-header-help {
  --bs-alert-color: var(--text-contrast);
  --bs-alert-bg: var(--brand-secondary-soft);
  --bs-alert-border-color: var(--brand-secondary-soft);
  --bs-alert-link-color: var(--text-contrast);
}


.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--brand-danger) !important;
}

/* === SWAL ====================================================================================== */
.swal2-spacing {
  margin: 0 5px; /* Adiciona uma margem horizontal de 5px em ambos os lados */
}

.swal2-popup {
  background: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: var(--radius-lg) !important;  /* Aumente ou diminua conforme desejado */
  min-height: 0 !important;
  padding: 1.25rem 1.25rem 1rem !important;
}

.swal2-popup .swal2-title {
  color: var(--bs-body-color) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

.swal2-popup .swal2-html-container {
  color: var(--bs-body-color) !important;
  margin: 0.65rem 0 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
}

.swal2-popup .swal2-input {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: none !important;
}

.swal2-popup .swal2-input::placeholder {
  color: var(--bs-secondary-color) !important;
  opacity: 1 !important;
}

.swal2-popup .swal2-input:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

.swal2-popup .swal2-icon {
  margin: 0 auto 0.9rem !important;
}

.swal2-success-solid {
  background: var(--bs-body-bg) !important;
}

/* Espaçamento adequado entre botões do SweetAlert */
.swal2-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  row-gap: 12px !important;
  width: 100% !important;
  justify-content: center !important;
  padding: 0.9rem 0 0 !important;
  margin: 0 !important;
}

/* Ajusta largura dos botões */
.swal2-actions > button {
  flex: 0 1 auto !important;
  white-space: nowrap !important;
  min-width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}


/* === CUSTOM DASHBOARD CARD ===================================================================== */
.custom-dashboard-card {
  background: var(--neutral-0);
  border-radius: var(--radius-lg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 100px;
}

.custom-dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  background-color: var(--neutral-200);
}

.custom-dashboard-card .icon-section {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.custom-dashboard-card .text-section {
  flex-grow: 1;
}

/* === HELP LIST ================================================================================== */
.help-list > li {
  margin-top: 0.5rem; 
  border-bottom: 1px dashed var(--brand-secondary) !important;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  list-style-type: none;
}

.help-list > li > ul {
  text-align: justify;
  font-size: 0.9rem;
  padding-left: 1.25rem; 
  margin-bottom: 1rem;
}


/* === INPUTS E SELECTS TEMA COLD GRAY ===================================================================== */


.help-group-title::before {
  content: "\F1B3"; /* Código do ícone bi-folder-fill */
  font-family: "bootstrap-icons";
  margin-right: 0.5rem;
  font-size: 0.8rem;
}

.help-group-title {
  font-size: 0.9rem !important;
  font-weight: 500 !important ;
  color: var(--brand-secondary) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  padding-bottom: 0.5rem !important;
}

.help-group-title::before {
  content: "\A";
  white-space: pre;
  display: block;
}

.text-help {
  color: var(--brand-secondary) !important;
  width: 0.9rem !important;
  height: 0.9rem !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  margin-left: 0px !important;
}

.help-alert-trigger * {
  pointer-events: none;
}

.text-help-header {
color: var(--text-contrast) !important;
font-weight:lighter !important;
font-size: 1.3rem;
}

.text-help-body {
color: var(--text-primary) !important;
font-weight:lighter !important;
font-size: 0.9rem;
text-align: justify !important;
}

.text-help-footer {
color: var(--text-contrast) !important;
font-weight:lighter !important;
font-size: 0.7rem;
text-align: center !important;
}

.text-help-tabs {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brand-secondary);
  margin-bottom: 1rem;
}

.text-help-tabs::before {
  content: "";
  background-color: var(--brand-secondary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4zm3 1a1 1 0 0 0-1 1v1h12V6a1 1 0 0 0-1-1H5zm13 2H4v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7z'/></svg>") no-repeat center;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4zm3 1a1 1 0 0 0-1 1v1h12V6a1 1 0 0 0-1-1H5zm13 2H4v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7z'/></svg>") no-repeat center;
  mask-size: contain;
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}


/* === MISC ====================================================================================== */
/* Para o container ter espaço no scroll */
#helpAlertContainer {
  scroll-margin-top: 100px; /* dá uma folga no topo */
}

/* === STARTBAR ================================================================================== */
.startbar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--bs-startbar-width);
  background-color: var(var(--surface-menu));
  -webkit-transition: 0.3s;
  transition: 0.3s;
  z-index: 1005;
  -webkit-box-shadow: 0 3px 16px rgba(142, 134, 171, 0.05);
          box-shadow: 0 3px 16px rgba(142, 134, 171, 0.05);
}
.startbar .brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: sticky;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  padding: 0.25rem 0;
  margin: 0;
  width: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.startbar .brand .logo-lg {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin-left: 4px;
}
.startbar .startbar-menu {
  padding-bottom: var(--bs-topbar-height);
  height: 100vh;
}
.startbar .startbar-menu .startbar-collapse {
  padding: 0 16px 16px;
  height: calc(100vh - 120px);
  overflow-y: auto;
}
.startbar .startbar-menu .navbar-nav .menu-label {
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--bs-menu-label-color);
  padding: 14px 8px 14px 20px;
  text-align: start;
  letter-spacing: 1px;
}
.startbar .startbar-menu .navbar-nav .menu-label small {
  display: none;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link {
  position: relative;
  color: var(--bs-menu-link-color);
  font-size: 13px;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 0.4rem;
  padding: 10px 16px;
  line-height: 20px;
  margin-bottom: 3px;
  border: 1px solid transparent;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover, .startbar .startbar-menu .navbar-nav .nav-item .nav-link.active {
  color: var(--text-secondary);
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover::before, .startbar .startbar-menu .navbar-nav .nav-item .nav-link.active::before {
  border-color: var(--surface-panel) !important;
  background-color: var(--surface-panel) !important;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link::before {
  content: "";
  border: 2px solid transparent;
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  border-radius: 0.4rem;
  width: 6px;
  background-color: transparent;
}
/* Remove o ::after antigo que usava Line Awesome (não carregada) */
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse]:after {
  display: none !important;
  content: none !important;
}

/* Seta de dropdown agora é renderizada via Lucide no template */
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse] .collapse-arrow {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: none !important;
  animation: none !important;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse][aria-expanded=true] {
  background-color: var(--surface-muted);
  border-radius: 10px;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse][aria-expanded=true] .collapse-arrow {
  transform: rotate(90deg);
  color: var(--text-primary);
  transition: none !important;
  animation: none !important;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse][aria-expanded=true] i,
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse][aria-expanded=true] span {
  color: var(--text-secondary);
  font-weight: 600;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse][aria-expanded=true]::before {
  content: "";
  border: 2px solid var(--surface-panel);
  background-color: var(--surface-panel);
}
.startbar .startbar-menu .navbar-nav .nav-item .nav .nav-item {
  padding-left: 12px;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav .nav-item .nav-link {
  padding: 6px 16px 6px 40px;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav .nav-item .nav-link:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border: 1px solid var(--bs-nav-link-disc-color);
  border-radius: 50%;
  background: rgba(137, 151, 189, 0.2);
  left: 12px;
  top: auto;
  bottom: auto;
}
.startbar .startbar-menu .menu-icon {
  font-size: 16px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-left: 0px;
  color: var(--text-muted);
  transition: none !important;
  animation: none !important;
}

/* Scrollbar do Simplebar - acompanha o tema */
.startbar .simplebar-scrollbar:before {
  background: color-mix(in srgb, var(--border-strong) 50%, transparent) !important;
  border-radius: 7px;
}
.startbar .simplebar-scrollbar.simplebar-visible:before {
  background: color-mix(in srgb, var(--border-strong) 70%, transparent) !important;
  opacity: 1 !important;
}
.startbar .simplebar-track {
  background: transparent !important;
}
.startbar .simplebar-track.simplebar-vertical {
  background: transparent !important;
  width: 10px;
}
/* Garante que o fundo do track acompanhe o tema */
.startbar .simplebar-wrapper,
.startbar .simplebar-mask,
.startbar .simplebar-offset,
.startbar .simplebar-content-wrapper,
.startbar .simplebar-content {
  background: transparent !important;
}
/* Garante que o track vertical tenha fundo transparente */
.startbar [data-simplebar] .simplebar-track.simplebar-vertical {
  background: transparent !important;
}

/* Logo no Topbar */
.topbar-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  max-width: 200px;
}
.topbar-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0.25rem 0;
}
.topbar-logo-link:hover {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}


input.loading {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  padding-right: 35px;
}


/* Para campos de input normais desabilitados */
.field-disabled {
  background-color: var(--state-inactive-bg) !important;
  border-color: var(--border-soft) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
  color: var(--state-inactive-text, #6c757d) !important;
}

.field-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Estilos genéricos para campos disabled - usam variáveis CSS para combinar com o tema */
input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--state-inactive-bg) !important;
  border-color: var(--border-soft) !important;
  cursor: not-allowed !important;
  color: var(--state-inactive-text, #6c757d) !important;
  opacity: 0.85;
}

/* Estilos para select2 disabled */
select:disabled + .select2-container .select2-selection {
  background-color: var(--state-inactive-bg) !important;
  border-color: var(--border-soft) !important;
  cursor: not-allowed !important;
  opacity: 0.85;
}

select:disabled + .select2-container .select2-selection__rendered {
  color: var(--state-inactive-text, #6c757d) !important;
}

select:disabled + .select2-container .select2-selection__arrow {
  opacity: 0.6;
}

/* Document File Upload Styles */
.drop-area-small {
    border: 2px dashed #dee2e6;
    border-radius: 0.4rem;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--surface-panel) !important;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.drop-area-small:hover {
    background-color: var(--surface-muted);
}

.drop-area-small.drop-area-highlight {
    border-color: var(--brand-info);
    background-color: var(--surface-muted);
    transform: scale(1.02);
}

.img-thumbnail {
  padding: 0.1rem;
  background-color: var(--bs-gray-200);
  border: 0px solid var(--bs-border-color);
  border-radius: 4px;
  max-width: 100%;
  height: auto;
}

.img-thumbnail-rounded {
  padding: 0.25rem;
  background-color: var(--bs-white);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 50%;
  max-width: 100%;
  height: 100%;
}

.img-thumbnail-square {
  padding: 0rem;
  background-color: var(--bs-white);
  border: 0;
  border-radius: 0.4rem;
}


.img-thumbnail-small {
    border: 1px solid #dee2e6;
    border-radius: 0.4rem;
    padding: 2px;
    background-color: white;
    max-width: 100px;
    max-height: 100px;
    height: auto;
    object-fit: cover;
}

.drop-area-small p {
    margin: 5px 0 0 0;
    font-size: 0.875rem;
    color: #6c757d;
}

.drop-area-small:hover p {
    color: #669b87;
}

/* Área de upload de documentos (principal e adicionais) */
.document-upload-area {
    border: 1px dashed #aaa;
    border-radius: 0.4rem;
    min-height: 60px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    max-width: 350px;
}
.document-upload-area .document-preview {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.document-upload-area .document-preview img,
.document-upload-area .document-preview i {
    max-width: 40px;
    max-height: 40px;
}
.document-upload-area .document-upload-text {
    font-size: 0.9em;
    color: var(--brand-secondary) !important;
    margin-left: 2px;
    margin-right: 2px;
    line-height: 1.2;
}

/* Preview PDF no drag and drop */
.pdf-preview-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pdf-only-preview,
.pdf-only-preview * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.pdf-only-preview.drop-area-small,
.pdf-only-preview.document-upload-area {
    background: transparent !important;
    border: none !important;
}
.drag-drop-filename {
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 0.45rem !important;
    display: block;
}

/* Remove fundo e borda de todos os níveis do drop-area quando for PDF */
.drop-area-small.pdf-only-preview,
.document-upload-area.pdf-only-preview,
.drop-area-small.pdf-only-preview *,
.document-upload-area.pdf-only-preview * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove fundo e borda de todos os pais até o .col-md-2 */
.col-md-2 .pdf-only-preview,
.col-md-2 .pdf-only-preview * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Garante que o nome do arquivo nunca extrapole */
.pdf-preview-container,
.pdf-preview-container * {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.drag-drop-filename {
    max-width: 90vw !important;
    font-size: 0.75rem !important;
    display: block !important;
    text-align: center !important;
}

/* Garante que apenas o preview customizado apareça para PDF */
.pdf-only-preview * {
    all: unset;
    display: revert;
}

.pdf-only-preview embed,
.pdf-only-preview object {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Garante contorno sempre visível na área de upload */
.drag-drop-area {
    border: 1px dashed #666 !important;
    border-radius: 0.4rem;
    background: #232323;
    min-height: 60px;
    position: relative;
    transition: border-color 0.2s;
}

.drag-drop-area.dragging {
    border-color: #007bff !important;
}

.drag-drop-area.pdf-only-preview {
    border: 2px dashed #666 !important;
    background: #232323 !important;
}

.document-upload-area .img-thumbnail-small {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.form-icon-img {
  width: 32px;
  height: 32px;
  display: block;
  margin: 0;
  padding: 0;
  object-fit: contain;
  background: none;
  box-shadow: none;
}

.input-group .btn.btn-light {
    min-width: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 0;
}

/* Evita quebra de linha e mostra reticências em selects e Select2 */
.form-select,
select.form-control {
    font-size: 0.9rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary) !important;
    background-color: var(--surface-panel) !important;
    border-color: var(--border-soft) !important;
    border-radius: 0.4rem !important;
    padding-right: 2.5rem !important;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position:
        calc(100% - 1.05rem) calc(50% - 0.16rem),
        calc(100% - 0.72rem) calc(50% - 0.16rem) !important;
    background-size: 0.38rem 0.38rem, 0.38rem 0.38rem !important;
    background-repeat: no-repeat !important;
}

.form-select[multiple],
.form-select[size]:not([size="1"]),
select.form-control[multiple],
select.form-control[size]:not([size="1"]) {
    padding-right: 0.75rem !important;
    background-image: none !important;
}


.select2-selection__rendered {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* === MENUS AND NAVIGATORS ====================================================================== */

/* Separador discreto para submenus */
.menu-separator {
  width: 80%;
  margin-left: 16px;
  border-top: 1px solid var(--border-strong);
  opacity: 0.5;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Divisor para Select2 */
.select2-results__option[data-divider="true"] {
  border-top: 1px solid var(--border-strong) !important;
  opacity: 0.5 !important;
  height: 8px !important;
  padding: 0 !important;
  margin: 4px 8px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background: transparent !important;
  color: transparent !important;
}

.select2-results__option[data-divider="true"]:hover {
  background: transparent !important;
}

/* Controle de altura para Select2 */
.select2-results__options {
  max-height: 300px !important;
  overflow-y: auto !important;
}

.select2-dropdown {
  max-height: 350px !important;
}

/* Ajuste para ícones do menu */
.menu-icon {
  min-width: 18px;
  text-align: center;
  font-size: 16px;
  opacity: 0.85;
}

.nav-tabs {
  background-color: var(--surface-menu);
  border-radius: 0.4rem;
  border: 0px;
  padding: 0.4rem 0.75rem 0;
  border-bottom: 1px solid var(--surface-section-border, var(--surface-card-border, var(--border-soft)));
  margin-bottom: 0.75rem;
}


/* Remove bullets dos menus e submenus */
.nav,
.nav ul,
.nav.flex-column {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

/* Estilo dos links do menu principal */
.nav .nav-link {
    padding-left: 16px;
    color: var(--text-secondary);
    font-size: 15px;
    border-radius: 0.4rem;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav .nav-link:hover,
.nav .nav-link.active {
    background: var(--surface-panel);
    color: var(--text-secondary);

}

/* Submenu de segundo nível (mais recuado) */
.nav .nav .nav-link {
    padding-left: 32px;
    font-size: 14px;
}


/* Remove bullets de todos os níveis do menu lateral */
.sidebar-menu ul,
.sidebar-menu ul ul,
.sidebar-menu li ul,
.sidebar-menu li ul li ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.topbar .topbar-custom.nav-sticky {
  background: color-mix(in srgb, var(--surface-panel) 8%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-box-shadow: 0 3px 4px color-mix(in srgb, var(--text-primary) 6%, transparent);
          box-shadow: 0 3px 4px color-mix(in srgb, var(--text-primary) 6%, transparent);
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* === IMPRESSÃO ================================================================================== */

/* Estilos específicos para impressão da ajuda */
@media print {
  /* Corrige o tamanho dos títulos de agrupamento na impressão */
  .help-group-title {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--brand-secondary) !important;
    border-bottom: 2px solid var(--border-soft) !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 1rem !important;
    page-break-after: avoid;
  }
  
  /* Melhora a legibilidade dos títulos de abas na impressão */
  .text-help-tabs {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: var(--brand-secondary) !important;
    margin-bottom: 1rem !important;
    page-break-after: avoid;
  }
  
  /* Melhora o espaçamento da lista de ajuda na impressão */
  .help-list > li {
    margin-top: 0.75rem !important;
    border-bottom: 1px solid var(--border-strong) !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.75rem !important;
    page-break-inside: avoid;
  }
  
  /* Evita quebra de página em elementos importantes */
  .help-list > li > ul {
    page-break-inside: avoid;
  }
  
  /* Melhora a legibilidade do texto da ajuda na impressão */
  .text-help-body {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  
  /* Garante que os alertas sejam bem visíveis na impressão */
  .alert-header-help {
    border: 2px solid var(--brand-secondary) !important;
    background-color: #f8f9fa !important;
    color: #000 !important;
    page-break-inside: avoid;
  }
  
  /* Remove elementos desnecessários na impressão */
  .btn,
  .modal-footer,
  .btn-close {
    display: none !important;
  }

  
  /* Garante que o conteúdo seja legível */
  .modal-body {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Melhora o contraste para impressão */
  .text-help {
    color: #000 !important;
  }
  
  .text-help-header {
    color: #000 !important;
    font-weight: 600 !important;
  }
  
  .text-help-body {
    color: #333 !important;
  }
}

/* === AJUDA ====================================================================================== */

/* help-list */
.help-list > li {
  margin-top: 0.5rem; 
  border-bottom: 1px dashed var(--brand-secondary) !important;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  list-style-type: none;
}

.help-list > li > ul {
  text-align: justify;
  font-size: 0.9rem;
  padding-left: 1.25rem; 
  margin-bottom: 1rem;
}

/* === DASHBOARDS ================================================================================== */

/* Estilos para gráficos dos dashboards */
.equal-chart {
    width: 100% !important;
    height: 300px !important;
}

.doughnut-chart {
    height: 350px !important;
    min-height: 400px !important;
}

.chart-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
}

.chart-container {
    flex: 1;
    height: 100%;
    position: relative;
}

/* Estilos específicos para gráficos circulares */
.chart-circular-container {
    height: 420px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 10px;
}

.chart-circular {
    width: 100% !important;
    height: 400px !important;
    max-height: 400px !important;
    max-width: 100% !important;
}


/* Previne distorção em cards com gráficos */
.card-footer:has(canvas) {
    min-height: 320px;
}

/* Ajustes para containers de gráficos em cards */
.card-footer .chart-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Força aspect ratio correto para gráficos circulares */
canvas[id*="Chart"]:not(.equal-chart) {
    aspect-ratio: 1 / 1 !important;
}


/* ===== CARDS DE MÉTRICAS MODERNOS ===== */

/* Cards de métricas modernos */
.metric-card-modern {
    background: var(--neutral-0);
    backdrop-filter: blur(2px);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 0.5rem;
}

.metric-card-modern:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.06);
}

.card-link:hover .metric-card-modern {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background-color: var(--neutral-200);
}

.card-link:hover {
    cursor: pointer !important;
}

.card-link .metric-card-modern {
    cursor: pointer;
}

.metric-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric-icon-wrapper {
    width: auto;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.metric-content {
    flex: 1;
    min-width: 0;
    /* Garante que o flex não interfira com a largura da barra de progresso */
    flex-shrink: 1;
}

.metric-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--neutral-600);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.metric-label {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.metric-footer {
    margin-top: auto;
    padding-top: 0.2rem;
}

.metric-status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-align: center;
}

/* Cor do icone das metricas */
.metric-color .metric-icon-wrapper {
    background: transparent;
    color: var(--brand-info);
}

.metric-card-storage {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--surface-muted) 92%, transparent),
        color-mix(in srgb, var(--surface-panel) 94%, transparent)
    );
    padding: 1.2rem 1.25rem 0.85rem;
}

.metric-card-storage-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.metric-card-storage .metric-icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--brand-info) 15%, var(--surface-panel));
}

.metric-card-storage-copy {
    flex: 1;
    min-width: 0;
}

.metric-card-storage-value {
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.metric-card-storage-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.metric-card-storage-description {
    margin-top: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    max-width: 20rem;
}

.metric-card-storage-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.badge-dashboard-success-soft {
    background: color-mix(in srgb, var(--brand-success) 18%, var(--surface-panel)) !important;
    color: var(--brand-success) !important;
    border: 1px solid color-mix(in srgb, var(--brand-success) 36%, transparent);
}

.badge-dashboard-neutral-soft {
    background: color-mix(in srgb, var(--text-secondary) 12%, var(--surface-panel)) !important;
    color: var(--text-secondary) !important;
    border: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
}

.metric-card-warning-state {
    border-color: color-mix(in srgb, var(--brand-warning) 42%, var(--bs-border-color)) !important;
    background: color-mix(in srgb, var(--brand-warning) 8%, var(--neutral-0)) !important;
}

.metric-card-warning-state .metric-icon-wrapper,
.metric-card-warning-state .metric-value,
.metric-card-warning-state .metric-label {
    color: var(--brand-warning) !important;
}

.metric-card-warning-state .metric-progress-bar {
    background: var(--brand-warning) !important;
}

.metric-card-danger-state {
    border-color: color-mix(in srgb, var(--brand-danger) 42%, var(--bs-border-color)) !important;
    background: color-mix(in srgb, var(--brand-danger) 8%, var(--neutral-0)) !important;
}

.metric-card-danger-state .metric-icon-wrapper,
.metric-card-danger-state .metric-value,
.metric-card-danger-state .metric-label {
    color: var(--brand-danger) !important;
}

.metric-card-danger-state .metric-progress-bar {
    background: var(--brand-danger) !important;
}

.badge-deployment-status-active {
    background-color: var(--brand-success) !important;
    color: var(--text-contrast) !important;
}

.badge-deployment-status-maintenance {
    background-color: var(--brand-warning) !important;
    color: var(--surface-contrast) !important;
}

.badge-deployment-status-suspended {
    background-color: var(--brand-danger) !important;
    color: var(--text-contrast) !important;
}

/* Estilos para outros elementos dos dashboards */
.kpi-card, .performance-card, .status-card {
    background: var(--surface-muted) !important;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.kpi-header, .performance-header, .status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.kpi-header h6, .performance-header h6, .status-header h6 {
    margin: 0;
    color: var(--bs-body-color);
    font-weight: 600;
}

.kpi-header i, .performance-header i, .status-header i {
    font-size: 1.9rem;
    color: var(--brand-info);
}

.kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-muted);
    margin-bottom: 0.5rem;
}

.kpi-description {
    font-size: 0.875rem;
    color: var(--bs-secondary);
}

.performance-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.performance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--bs-border-color);
}

.performance-label {
    color: var(--bs-body-color);
    font-weight: 500;
}

.performance-value {
    color: var(--brand-info);
    font-weight: 600;
}

.performance-card .text-card-title {
  color: var(--text-primary) !important;
  font-size: 1.2rem;
  font-weight:lighter !important;
}

/* === DASHBOARD GROUPED LISTS (performance groups) ============================================= */
.performance-card .performance-items .performance-item.group-title {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  border-top: none;
  border-bottom: none;
  margin-top: 0.4rem;
}

.performance-card .performance-items .performance-item {
  border-bottom: 1px dashed var(--bs-border-color);
}
.performance-card .performance-items .performance-item.group-title {
  border-bottom: none;
}

.performance-card .performance-items .performance-item.group-child {
  padding-left: 1rem;
  border-left: 2px solid var(--bs-border-color);
  margin-left: 0.25rem;
}



/* === DASHBOARD PERFORMANCE LINKS ============================================================== */
.performance-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.2s ease;
}

.performance-link:hover {
  text-decoration: none;
  color: inherit;
}

.performance-link:hover .performance-item {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
  border-left: 5px solid var(--text-muted);
  padding-left: 10px;
}

.performance-link:hover .performance-value {
  color: var(--text-muted);
  font-weight: 800;
  font-size: 1.2rem;
}

.hybrid-storage-history-card {
  border-radius: var(--radius-lg);
}

.hybrid-storage-history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.storage-history-filters {
  margin-left: auto;
}

.storage-history-filters-grid {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.storage-history-custom-range {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.storage-history-custom-range > div,
.storage-history-filters-grid > div {
  min-width: 160px;
}

.storage-history-action {
  display: flex;
  align-items: flex-end;
}

.storage-history-summary-tile {
  background: color-mix(in srgb, var(--surface-muted) 86%, transparent);
  border: 1px solid var(--bs-border-color);
  border-radius: calc(var(--radius-lg) - 4px);
  padding: 1rem 1.1rem;
  height: 100%;
}

.storage-history-summary-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.86rem;
  margin-bottom: 0.35rem;
}

.storage-history-summary-value {
  display: block;
  color: var(--text-primary);
  font-size: 1.35rem;
  font-weight: 700;
}

.storage-history-chart-shell {
  position: relative;
  min-height: 360px;
}

.storage-history-empty {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 220px;
  justify-content: center;
  text-align: left;
  color: var(--text-secondary);
}

.storage-history-empty i {
  width: 2rem;
  height: 2rem;
  color: var(--brand-info);
}

@media (max-width: 991.98px) {
  .metric-card-storage-value {
    font-size: 1.45rem;
  }

  .hybrid-storage-history-header {
    flex-direction: column;
    align-items: stretch;
  }

  .storage-history-filters {
    width: 100%;
  }
}

.status-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-body-color);
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator.success {
    background: var(--bs-success);
}

.status-indicator.warning {
    background: var(--bs-warning);
}

.status-indicator.danger {
    background: var(--bs-danger);
}

.status-indicator.info {
    background: var(--bs-info);
}

/* ===== BARRAS DE PROGRESSO CUSTOMIZADAS (DIVS) ===== */

/* Container da barra de progresso */
.metric-progress-container {
    width: 100%;
    height: 4px;
    background-color: var(--bs-secondary-bg);
    border-radius: 2px;
    overflow: hidden;
    /* Força o comportamento correto */
    display: block !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Barra de preenchimento */
.metric-progress-bar {
    height: 100%;
    background: var(--brand-primary) !important;
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%; /* Largura padrão 0% */
    /* Força que a largura seja aplicada */
    display: block !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Thumbnails for property units in performance groups */
.pu-thumb {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--bs-border-color);
  vertical-align: middle;
}

/* === DASHBOARD CLICKABLE CARDS ================================================================ */
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-link:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
}


.card-link:active {
  transform: translateY(0);
}


/* === TEXTAREA FIXES ============================================================================ */
/* Força textareas a respeitar o atributo rows - solução genérica */
textarea.form-control[rows] {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  /* Remove qualquer altura fixa que possa estar sendo aplicada */
  line-height: 1.5;
  /* Permite que o navegador calcule a altura baseada no atributo rows */
}

/* === LOGIN SCREEN STYLES ====================================================================== */
.login-container {
  min-height: 100vh;
  background: var(--surface-body);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.login-form-container {
  background: var(--surface-panel);
  border-radius: 0.9rem;
  padding: 40px;
  width: 100%;
  max-width: 600px;
  border: 1px solid var(--border-soft);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-logo {
  width: 250px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-logo svg,
.login-logo .lucide {
  width: 5.5rem;
  height: 5.5rem;
  color: var(--text-primary);
  stroke-width: 1.6;
}

.login-title {
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 8px;
}

.login-subtitle {
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
}

.login-form-container .form-group {
  margin-bottom: 20px;
}

.forgot-password {
  color: var(--action-primary-bg);
  text-decoration: none;
  font-size: 14px;
}

.forgot-password:hover {
  color: var(--action-primary-bg);
  text-decoration: underline;
}

.btn-login {
  background: var(--action-primary-bg) !important;
  color: var(--action-primary-text) !important;
  border: none;
  width: 100%;
}

.btn-login:hover {
  background: var(--action-primary-hover) !important;
  color: var(--action-primary-text) !important;
  border-color: transparent !important;
  opacity: 1 !important;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
}

.login-info-text {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

.login-secondary-action {
  width: 100%;
  border: 2px solid var(--border-soft);
  color: var(--text-primary);
  background: transparent;
  padding: 16px 32px;
  border-radius: 0.4rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.login-secondary-action:hover {
  color: var(--text-primary);
  border-color: var(--action-primary-bg);
  background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 480px) {
  .login-form-container {
    padding: 30px 20px;
    margin: 10px;
  }
  
  .login-title {
    font-size: 24px;
  }
  
  .login-logo {
    width: 120px;
    height: 120px;
  }
}

/* === PERMISSIONS TOOLBAR ======================================================================= */

.permissions-toolbar {
  background: var(--surface-panel);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.4rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.toolbar-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bs-border-color);
  display: flex;
  align-items: center;
}

.toolbar-title i {
  color: var(--brand-info);
  margin-right: 0.5rem;
}

/* Tabela de permissões */
.permissions-table {
  margin-bottom: 0;
}

.permissions-table thead th {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 1rem 0.5rem;
  border-bottom: 2px solid var(--bs-border-color);
  border-right: 1px solid var(--bs-border-color);
  border-left: 1px solid var(--bs-border-color);
  border-top: 1px solid var(--bs-border-color);
}

.permissions-table tbody td {
  padding: 1rem 0.5rem;
  vertical-align: middle;
  background-color: var(--surface-panel);
  border-right: 1px solid var(--bs-border-color);
  border-left: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
}

.permissions-table .d-flex {
  flex-wrap: wrap;
}

.permissions-table .btn {
  min-width: 80px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.permissions-table .btn i {
  margin-right: 0.25rem;
}

/* Responsividade para telas menores */
@media (max-width: 992px) {
  .permissions-table .d-flex {
    flex-direction: column;
    gap: 0.5rem !important;
  }
  
  .permissions-table .btn {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .permissions-toolbar {
    padding: 1rem;
  }
  
  .permissions-table thead th {
    font-size: 0.8rem;
    padding: 0.75rem 0.25rem;
  }
  
  .permissions-table tbody td {
    padding: 0.75rem 0.25rem;
  }
  
  .permissions-table thead th i {
    display: none;
  }
  
  .permissions-table .divider-drop {
    display: none;
  }
}

@media (max-width: 576px) {
  .toolbar-title {
    font-size: 0.9rem;
  }
  
  .toolbar-title i {
    font-size: 1rem;
  }
  
  .permissions-table thead th {
    font-size: 0.75rem;
    padding: 0.5rem 0.25rem;
  }
  
  .permissions-table .btn {
    font-size: 0.7rem;
    padding: 0.4rem 0.6rem;
  }
}

/* ========================================
   CHART.JS LEGEND STYLING
   ======================================== */

/* Legendas dos gráficos Chart.js */
.chartjs-legend,
.chartjs-legend ul,
.chartjs-legend li {
  color: var(--text-secondary) !important;
  background-color: var(--color-chart-legend-bg) !important;
}

/* Texto das legendas */
.chartjs-legend-text,
.chartjs-legend li span {
  color: var(--text-secondary) !important;
}

/* Container das legendas */
.chart-legend {
  color: var(--text-secondary);
  background-color: var(--color-chart-legend-bg);
}

/* Legendas customizadas do Chart.js */
canvas + div,
.chart-container .legend,
.chart-container .chartjs-legend {
  color: var(--text-secondary) !important;
}

/* Integration Test Styles */
.disabled-tab {
    opacity: 0.6;
    pointer-events: none;
}

.nav-link.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Animação de loading para o ícone do teste de conexão */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Status Cards específicos para integração */
.integration-status-card {
    background: var(--surface-panel) !important;
    border: 1px solid var(--border-soft);
    border-radius: 0.9rem;
    padding: 0.7rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.integration-status-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.integration-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-soft);
}

.integration-status-title {
    margin: 0;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
}

.integration-status-icon {
    font-size: 1.25rem;
}

.integration-status-body {
    padding-top: 0.25rem;
}

.integration-status-value {
    font-size: 1rem;
    font-weight: 300;
    margin: 0;
}

.chart-container .legend ul li,
.chart-container .chartjs-legend ul li {
  color: var(--text-secondary) !important;
}

/* ========================================
   TAB FORM VALIDATION STYLES
   ======================================== */

/* Indicador visual para abas com erro */
.nav-tab-error {
    border-bottom: 3px solid var(--brand-danger) !important;
    color: var(--brand-danger) !important;
    position: relative;
}

.nav-tab-error::after {
    content: " ⚠";
    color: var(--brand-danger);
    font-weight: bold;
    margin-left: 0.25rem;
}

/* Resumo de erros de validação */
.tab-validation-summary {
    background-color: var(--color-tab-error-bg);
    border: 1px solid var(--brand-danger);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    color: color-mix(in srgb, var(--brand-danger) 70%, var(--surface-contrast) 30%);
    animation: slideInDown 0.3s ease-out;
}

.tab-validation-summary h6 {
    color: color-mix(in srgb, var(--brand-danger) 70%, var(--surface-contrast) 30%);
    margin-bottom: 0.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.tab-validation-summary h6::before {
    content: "⚠️";
    margin-right: 0.5rem;
}

.tab-validation-summary ul {
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.tab-validation-summary li {
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* Animação para o resumo de erros */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Destaque para campos com erro em abas */
.tab-pane .form-control.is-invalid,
.tab-pane .form-select.is-invalid {
    border-color: var(--brand-danger);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Responsividade para o resumo de erros */
@media (max-width: 768px) {
    .tab-validation-summary {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .tab-validation-summary h6 {
        font-size: 0.9rem;
    }
    
    .tab-validation-summary ul {
        padding-left: 1.25rem;
    }
}

/* ========================================
   Global Search Styles
   ======================================== */

/* Estilos para o campo de busca */
.app-search {
    position: relative;
    min-width: 400px; /* Largura mínima aumentada */
    max-width: 500px; /* Largura máxima aumentada */
    border-radius: 6px;
}

.app-search .form-control.top-search {
    width: 100%;
    min-width: 400px; /* Largura mínima do input */
    max-width: 500px; /* Largura máxima do input */
    padding-right: 50px; /* Espaço para o botão */    
}

.topbar-component-dropdown {
    position: absolute;
    top: 100%;
    padding: 5px;
    background: var(--surface-panel);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    max-height: 700px;
    margin-top: 8px;
    backdrop-filter: blur(10px);
    animation: slideDown 0.3s ease-out;
    min-width: 300px; /* Largura mínima da janela */
    max-width: 500px; /* Largura máxima da janela */
    display: none; /* Escondido por padrão */
    flex-direction: column;
    border: 2px solid var(--border-soft);
    border-radius: 0.4rem;
}

.topbar-component-dropdown.show {
    display: flex; /* Mostra apenas quando tem classe 'show' */
}

.topbar-component-content {
    flex: 1;
    overflow-y: auto;
    max-height: 450px; /* Altura máxima para o conteúdo com scroll (reduzida para compensar header fixo) */
}

.topbar-component-content .topbar-component-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface-muted) !important;
}

.topbar-component-view-message {
  padding: 0.75rem 1rem;
  background-color: var(--surface-panel) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 8px;
}

.topbar-component-view-message:hover {
  background-color: var(--surface-muted);
  color: var(--brand-info);
}

/* Fix simples para modal de notificações */
#notificationModal .modal-dialog {
  max-height: 80vh;
}

#notificationModal .modal-body {
  max-height: 60vh;
  overflow-y: auto;
}


@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.topbar-component-loading {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
}

.topbar-component-header {
    background: var(--surface-muted) !important;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.875rem;
    color: var(--text-primary);
    flex-shrink: 0; /* Não encolhe */
    padding: 0.75rem 1rem;
}

.topbar-component-category {
  padding: 0;
  margin: 0;
  background-color: var(--brand-secondary-soft) !important;
  border-bottom: 1px dashed var(--border-soft) !important;
}

.topbar-component-category:last-child {
    border-bottom: none;
}

.topbar-component-category-header {
  background: var(--brand-secondary-soft) !important;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.topbar-component-category-items {
    max-height: 200px;
    overflow-y: auto;
}

.topbar-component-item {
    display: block;
    padding: 0.875rem 1rem;
    background-color: var(--surface-panel);
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-soft);
    transition: all 0.2s ease-in-out;
}

.topbar-component-item:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.topbar-component-item.active {
    background: var(--surface-muted);
    color: var(--text-primary);
    transform: translateX(4px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-primary) 15%, transparent);
    border-left: 3px solid var(--brand-primary);
}

.topbar-component-item:last-child {
    border-bottom: none;
}

.topbar-component-item i {
    width: 18px;
    text-align: center;
    font-size: 16px;
    color: var(--brand-primary);
}

.topbar-component-item i.text-muted {
    color: var(--text-secondary) !important;
}

.topbar-component-category-header i {
    color: var(--brand-primary);
    font-size: 16px;
}

.topbar-component-category-header .badge {
    background: var(--brand-primary) !important;
    border: none;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    color: var(--neutral-0) !important;
}

.topbar-component-empty {
    color: var(--text-muted);
    font-style: italic;
}

.topbar-component-error {
    color: var(--brand-danger);
    font-weight: 500;
}

.topbar-component-footer {
    background: var(--surface-muted) !important;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    color: var(--text-primary);
    text-align: center;
    flex-shrink: 0; /* Não encolhe */
    margin-top: auto; /* Empurra para baixo */
}

/* Responsividade para busca global */
@media (max-width: 768px) {
    .app-search {
        min-width: 250px; /* Largura menor em mobile */
        max-width: 300px;
    }
    
    .app-search .form-control.top-search {
        min-width: 250px;
        max-width: 300px;
    }
    
    .topbar-component-dropdown {
        left: -8px;
        right: -8px;
        max-height: 300px;
        min-width: 250px;
        max-width: 300px;
    }
    
    .topbar-component-item {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .topbar-component-category-header {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .app-search {
        min-width: 200px; /* Largura ainda menor em telas muito pequenas */
        max-width: 250px;
    }
    
    .app-search .form-control.top-search {
        min-width: 200px;
        max-width: 250px;
    }
    
    .topbar-component-dropdown {
        min-width: 200px;
        max-width: 250px;
    }
}

/* Estilos para informação do campo encontrado na busca global */
/* Sobrescreve classes do Bootstrap para usar variáveis do tema */
.topbar-component-item .text-dark {
    color: var(--text-primary) !important;
}

.topbar-component-item .text-muted {
    color: var(--text-secondary) !important;
}

.topbar-component-item .text-muted.small {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--text-secondary) !important;
}

.topbar-component-item .text-muted.small .fw-medium {
    color: var(--text-primary) !important;
    font-weight: 500;
}

.topbar-component-item:hover .text-muted.small .fw-medium {
    color: var(--text-primary) !important;
}

.topbar-component-item .fw-medium {
    color: var(--text-primary) !important;
}

.topbar-component-item .fw-medium.text-dark {
    color: var(--text-primary) !important;
}

/* Estilos para itens inativos na busca global */
.topbar-component-item-inactive {
    opacity: 0.7;
    border-left: 3px solid var(--bs-warning);
}

.topbar-component-item-inactive:hover {
    opacity: 0.9;
    color: var(--state-inactive-text) !important;
    background-color: var(--state-inactive-bg) !important;
}

.topbar-component-item-inactive .fw-medium {
    color: var(--text-primary) !important;
}

.topbar-component-item-inactive .fw-medium.text-dark {
    color: var(--text-primary) !important;
}

.topbar-component-item-inactive .text-dark {
    color: var(--text-primary) !important;
}

.topbar-component-item-inactive .text-warning {
    color: var(--bs-warning) !important;
    font-weight: 500;
}

.topbar-component-item-inactive .text-muted {
    color: var(--text-secondary) !important;
}

/* Estilos para destaque do termo de busca */
.search-highlight {
    background-color: #fff3cd;
    color: #856404;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 600;
}

/* Formulário de resposta no topo */
.reply-form-container {
  border-left: 4px solid var(--action-primary-bg) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.reply-form-container h6 {
  color: var(--action-primary-bg);
  font-weight: 600;
  margin-bottom: 15px;
}

/* =================================================================================
 * Menu Contextual Genérico para Selects
 * ================================================================================= */

.generic-context-menu {
  position: absolute;
  z-index: 9999;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  font-size: 14px;
  font-family: inherit;
}

.generic-context-menu-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.generic-context-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--bs-body-color);
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.generic-context-menu-item:hover:not(.disabled) {
  background-color: var(--surface-muted);
  color: var(--bs-body-color);
}

.generic-context-menu-item.disabled {
  color: var(--bs-secondary-color) !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.generic-context-menu-item.disabled:hover {
  color: var(--bs-secondary-color) !important;
}

.generic-context-menu-item i {
  width: 16px;
  text-align: center;
  margin-right: 8px;
  color: var(--bs-menu-icon-color);
}

.generic-context-menu-divider {
  height: 1px;
  background-color: var(--bs-border-color);
  margin: 4px 0;
}

/* Estados especiais do menu */
.generic-context-menu-item[data-action="addNew"] {
  font-weight: 500;
}

.generic-context-menu-item[data-action="editCurrent"] {
  color: var(--bs-body-color);
}

.generic-context-menu-item[data-action="goToCadastro"] {
  color: var(--brand-primary);
}

/* Responsividade */
@media (max-width: 768px) {
  .generic-context-menu {
    min-width: 180px;
    font-size: 13px;
  }
  
  .generic-context-menu-item {
    padding: 10px 14px;
  }
}

/* Tema escuro */
[data-bs-theme="dark"] .generic-context-menu {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .generic-context-menu-item {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .generic-context-menu-item:hover {
  background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .generic-context-menu-item i {
  color: var(--bs-menu-icon-color);
}

/* Ícones em menu ativo - contraste adequado */
.nav-link.active i,
.nav-item.active i,
.sidebar-menu .active i,
.startbar .nav-link.active i {
  color: var(--brand-primary) !important;
}

/* Ícones e texto em menu selecionado (expandido) - contraste adequado */
.nav-link.selected i,
.nav-item.selected i,
.sidebar-menu .selected i,
.startbar .nav-link.selected i,
.nav-link[aria-expanded="true"] i,
.nav-item[aria-expanded="true"] i,
.sidebar-menu [aria-expanded="true"] i {
  color: var(--brand-primary) !important;
}

.nav-link.selected,
.nav-item.selected,
.sidebar-menu .selected,
.startbar .nav-link.selected,
.nav-link[aria-expanded="true"],
.nav-item[aria-expanded="true"],
.sidebar-menu [aria-expanded="true"] {
  color: var(--brand-primary) !important;
}


[data-bs-theme="dark"] .generic-context-menu-divider {
  background-color: var(--bs-border-color);
}

/* Força contraste em qualquer elemento com fundo verde claro */
*[style*="background-color: #f0fdf4"],
*[style*="background: #f0fdf4"] {
  color: var(--brand-primary) !important;
}

*[style*="background-color: #f0fdf4"] i,
*[style*="background: #f0fdf4"] i {
  color: var(--brand-primary) !important;
}


/* FullCalendar Event Height Fix */
.fc-event {
  min-height: 24px !important;
  padding: 4px 6px !important;
}

.fc-event .fc-event-title,
.fc-event .fc-event-main {
  line-height: 1.2 !important;
  display: block !important;
  font-weight: bold !important;
}

/* FullCalendar Month View - Layout com horário fixo e título cortado */
.fc-daygrid-event {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.fc-daygrid-event .fc-event-time {
  flex-shrink: 0 !important;
  font-weight: bold !important;
  min-width: 50px !important;
  color: inherit !important;
}

.fc-daygrid-event .fc-event-title {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: normal !important;
}

/* Tooltip personalizado para eventos do calendário */
.tooltip-calendar .tooltip-inner {
  background-color: var(--surface-contrast) !important;
  color: var(--neutral-0) !important;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 0 6px var(--shadow-ring);
  max-width: 300px;
  text-align: left;
}

/* FullCalendar Day Current Background - usando as mesmas cores do DataTables */
.fc-day-today {
  background-color: var(--brand-secondary-soft) !important;
  background-image: none !important;
}

.fc-day-today .fc-daygrid-day-number {
  background-color: transparent !important;
  background-image: none !important;
  color: color-mix(in srgb, var(--brand-secondary) 65%, var(--surface-contrast) 35%) !important;
  font-weight: bold !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
  align-items: unset !important;
  justify-content: unset !important;
}

/* ========================================
   EFEITOS VISUAIS PARA ACCORDIONS
   ======================================== */

/* Efeito de clique nos botões de accordion */
.accordion-button.clicked {
  transform: scale(0.98);  
  border-color: var(--brand-primary-soft, #007bff) !important;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15) !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Transição suave para todos os botões de accordion */
.accordion-button {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  background-color: var(--surface-panel) !important;
}

/* Efeito hover sutil - funciona em ambos os estados */
.accordion-button:hover {
  background-color: var(--neutral-200, #f8f9fa) !important;
  border-color: var(--brand-primary-soft, #007bff) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.1) !important;
}


/* Melhoria visual para ícones de accordion */
.accordion-button .fas,
.accordion-button .fa {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

/* Animação reversa quando accordion fecha */
.accordion-button.collapsed .fas,
.accordion-button.collapsed .fa {
  animation: accordionIconSpinReverse 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.accordion-button:not(.collapsed) .fas,
.accordion-button:not(.collapsed) .fa {
  animation: accordionIconSpin 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animação de rotação e destaque do ícone (abrir) */
@keyframes accordionIconSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1.8);
  }
}

/* Animação reversa do ícone (fechar) */
@keyframes accordionIconSpinReverse {
  0% {
    transform: rotate(180deg) scale(1.4);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

/* Efeito de destaque permanente quando accordion está aberto */
.accordion-button:not(.collapsed) .fas,
.accordion-button:not(.collapsed) .fa {
  transform: rotate(180deg) scale(1.4);
  color: var(--brand-primary-soft, #007bff);
}

/* Efeito de foco melhorado */
.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25) !important;
  border-color: var(--brand-primary-soft, #007bff) !important;
}

/* Estilos para eventos passados */
.fc-event-past {
  opacity: 0.7 !important;
  cursor: pointer !important;
}

.fc-event-past:hover {
  opacity: 0.7 !important;
  transform: none !important;
}

/* Desabilitar drag-and-drop para eventos passados */
.fc-event-past.fc-event-draggable {
  cursor: default !important;
}

/* Animação suave para abrir/fechar conteúdo do accordion */
.accordion-collapse {
  transition: height 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.accordion-collapse.collapsing {
  transition: height 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Animação suave para o conteúdo interno */
.accordion-body {
  transition: opacity 0.015s ease-in-out 0.05s !important;
}

.accordion-collapse:not(.show) .accordion-body {
  opacity: 0;
}

.accordion-collapse.show .accordion-body {
  opacity: 1;
}

/* Animação de rotação e escala para ícones do menu principal */
.menu-icon {
  transition: transform 1.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

/* Animação quando o menu está expandido */
.nav-link[aria-expanded="true"] .menu-icon {
  animation: menuIconSpin 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animação reversa quando o menu está fechado */
.nav-link[aria-expanded="false"] .menu-icon {
  animation: menuIconSpinReverse 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animação de rotação e destaque do ícone do menu (abrir) */
@keyframes menuIconSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1.2);
  }
}

/* Animação reversa do ícone do menu (fechar) */
@keyframes menuIconSpinReverse {
  0% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

/* Efeito de destaque permanente quando menu está aberto */
.nav-link[aria-expanded="true"] .menu-icon {
  transform: rotate(180deg) scale(1.2);
  color: var(--brand-primary-soft, #007bff) !important;
}

/* Select2 multiple - FORÇA QUEBRA DE LINHA */
.select2-container--default .select2-selection--multiple {
  height: auto !important;
  min-height: 38px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 2px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  max-width: calc(50% - 2px) !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  margin: 2px !important;
}


/* Help Image Styles */
.help-image-container {
  margin: 1rem 0;
}

.help-image {
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.help-image:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.help-image-link {
  display: inline-block;
  text-decoration: none;
}

.help-image-link:hover {
  text-decoration: none;
}

.help-image-title {
  font-size: 0.875rem;
  color: #6c757d;
  font-weight: 600;
}

/* Lightbox customization for help images */
.ekko-lightbox .modal-dialog {
  max-width: 90vw;
  max-height: 90vh;
}

.ekko-lightbox .modal-body {
  padding: 0;
  text-align: center;
}

.ekko-lightbox .modal-body img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

/* === SUMMERNOTE EDITOR ====================================================================================== */

/* CSS ULTRA AGRESSIVO - força cores mesmo com estilos inline */
.note-editor .note-toolbar {
  background: var(--surface-panel) !important;
  background-color: var(--surface-panel) !important;
  border-bottom: 1px solid var(--border-soft) !important;
}

.note-editor .note-toolbar .btn,
.note-editor .note-toolbar .btn-group .btn,
.note-editor .note-toolbar button,
.note-editor .note-toolbar .btn-group button {
  background: var(--surface-muted) !important;
  background-color: var(--surface-muted) !important;
  border: 1px solid var(--border-soft) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

.note-editor .note-toolbar .btn:hover,
.note-editor .note-toolbar .btn-group .btn:hover,
.note-editor .note-toolbar button:hover,
.note-editor .note-toolbar .btn-group button:hover {
  background: var(--neutral-200) !important;
  background-color: var(--neutral-200) !important;
  color: var(--text-primary) !important;
}

.note-editor .note-toolbar .btn.active,
.note-editor .note-toolbar .btn-group .btn.active,
.note-editor .note-toolbar button.active,
.note-editor .note-toolbar .btn-group button.active {
  background: var(--brand-info) !important;
  background-color: var(--brand-info) !important;
  color: var(--text-contrast) !important;
}

.note-editor .note-editable {
  background: var(--surface-panel) !important;
  background-color: var(--surface-panel) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-soft) !important;
}

.note-editor .note-placeholder {
  color: var(--text-muted) !important;
}

/* FORÇA ABSOLUTA - sobrescreve qualquer estilo inline */
.note-editor .note-toolbar * {
  background: var(--surface-panel) !important;
  background-color: var(--surface-panel) !important;
  color: var(--text-primary) !important;
}

.note-editor .note-toolbar .btn,
.note-editor .note-toolbar .btn-group .btn {
  background: var(--surface-muted) !important;
  background-color: var(--surface-muted) !important;
}

.note-editor .note-toolbar .btn *,
.note-editor .note-toolbar .btn-group .btn *,
.note-editor .note-toolbar .btn-group .btn-group .btn * {
  background: var(--surface-muted) !important;
  background-color: var(--surface-muted) !important;
  color: inherit !important;
}

/* Força fundo uniforme em elementos específicos do Summernote */
.note-editor .note-toolbar .btn-group .btn-group .btn,
.note-editor .note-toolbar .btn-group .btn-group .btn *,
.note-editor .note-toolbar .dropdown-toggle,
.note-editor .note-toolbar .dropdown-toggle * {
  background: var(--surface-muted) !important;
  background-color: var(--surface-muted) !important;
}

/* FORÇA FUNDO DOS ÍCONES - máxima especificidade */
.note-editor .note-toolbar .btn i,
.note-editor .note-toolbar .btn span,
.note-editor .note-toolbar .btn-group .btn i,
.note-editor .note-toolbar .btn-group .btn span,
.note-editor .note-toolbar .btn-group .btn-group .btn i,
.note-editor .note-toolbar .btn-group .btn-group .btn span,
.note-editor .note-toolbar button i,
.note-editor .note-toolbar button span {
  background: var(--surface-muted) !important;
  background-color: var(--surface-muted) !important;
  color: var(--text-primary) !important;
}

/* Força fundo em elementos internos dos ícones */
.note-editor .note-toolbar .btn *,
.note-editor .note-toolbar .btn-group .btn *,
.note-editor .note-toolbar .btn-group .btn-group .btn *,
.note-editor .note-toolbar button * {
  background: var(--surface-muted) !important;
  background-color: var(--surface-muted) !important;
}

/* ===== MODAL DE PERFIL DO USUÁRIO ===== */
/* Garante cursor pointer em elementos interativos */
#userProfileModal .drop-area,
#userProfileModal .form-select,
#userProfileModal .form-check-input,
#userProfileModal .form-check-label,
#userProfileModal label[for],
#userProfileModal .btn,
#userProfileModal .capture-buttons button {
  cursor: pointer !important;
}

/* Área de drop da foto */
#userProfileModal .drop-area {
  cursor: pointer !important;
  transition: all 0.3s ease;
}

#userProfileModal .drop-area:hover {
  border-color: var(--brand-primary) !important;
  background-color: var(--color-drop-area-hover, rgba(102, 155, 135, 0.05)) !important;
}

/* Selects e inputs */
#userProfileModal .form-select,
#userProfileModal select {
  cursor: pointer !important;
}

/* Checkboxes e labels */
#userProfileModal .form-check-input {
  cursor: pointer !important;
}

#userProfileModal .form-check-label {
  cursor: pointer !important;
  user-select: none;
}

/* Botões de captura de imagem */
#userProfileModal .capture-buttons button {
  cursor: pointer !important;
}

/* Destaque do card e linha do movimento atual no modal de pattern movements */
.current-movement-highlight {
  border: 2px solid var(--brand-info) !important;
  box-shadow: 0 0 8px 0 rgba(var(--bs-info-rgb), 0.3) !important;
}




/* === ENTITY INTEGRATION TAB ================================================================== */
/* Estilos para aba de integração de entidades (Customer, Supplier, Collaborator, Marketplace) */

.integration-item-card {
    background: var(--surface-panel);
    border: 1px solid var(--border-soft);
    border-radius: 0.4rem;
    padding: 1rem;
}

.integration-provider-badge {
    font-size: 1.1rem;
}

.integration-status-badge {
    font-size: 0.8rem !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1.7 !important;
    border-radius: 6px !important;
}

.integration-status-badge i {
    font-size: 1.1rem;
    margin-right: 0.25rem;
}

.integration-external-id code {
    background: var(--surface-panel);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.integration-data-container {
    background: var(--surface-panel);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 1rem;
}

.form-label-sm {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.entity-integration-data {
    min-height: 100px;
}

/* === ENTITY INTEGRATION DATA - Ajustes de layout === */
.entity-integration-data .performance-item {
    display: grid;
    grid-template-columns: minmax(140px, 35%) 1fr;
    gap: 2rem;
    justify-content: flex-start;
    align-items: start;
}

.entity-integration-data .performance-label {
    text-align: left;
    white-space: nowrap;
}

.entity-integration-data .performance-value {
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.deployment-operation-details {
    height: auto;
    min-height: 0;
    overflow: hidden;
}

.deployment-rollback-notes {
    text-align: justify;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.support-installation-footer {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    min-width: min(92vw, 620px);
    max-width: 92vw;
    padding: 0.85rem 1.15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-topbar-bg);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
}

.support-installation-footer__chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 0;
}

.support-installation-footer__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.support-installation-footer__value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.support-installation-footer__divider {
    width: 1px;
    align-self: stretch;
    background: var(--bs-border-color);
    opacity: 0.9;
}

.maintenance-page-card {
    max-width: 760px;
}

.maintenance-page-logo {
    max-height: 64px;
}

.maintenance-page-body {
    background: var(--surface-body);
}

.maintenance-page-panel {
    background: var(--surface-panel);
    border: 1px solid var(--border-soft) !important;
}

.maintenance-page-panel .card-body {
    color: var(--text-primary);
}

.maintenance-page-panel .h3 {
    color: var(--text-primary);
}

.maintenance-page-panel .text-body-secondary {
    color: var(--text-secondary) !important;
}

.maintenance-page-info-card {
    background: color-mix(in srgb, var(--surface-panel) 85%, var(--surface-body));
    border-color: var(--border-soft) !important;
}

.maintenance-page-info-label {
    color: var(--text-secondary);
}

.maintenance-page-info-value {
    color: var(--text-primary);
}

@media (max-width: 767.98px) {
    .support-installation-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        min-width: calc(100vw - 1.5rem);
        bottom: 0.75rem;
    }

    .support-installation-footer__divider {
        width: auto;
        height: 1px;
    }
}


/* === SYNTAX HIGHLIGHTING - Preview de Exportações === */

/* JSON Syntax Highlighting */
.json-key {
    color: #881391;
    font-weight: bold;
}

.json-string {
    color: #0b7500;
}

.json-number {
    color: #1c00cf;
}

.json-boolean {
    color: #0000ff;
    font-weight: bold;
}

.json-null {
    color: #808080;
    font-style: italic;
}

/* XML Syntax Highlighting */
.xml-declaration {
    color: #0000ff;
    font-style: italic;
}

.xml-tag {
    color: #800000;
    font-weight: bold;
}

.xml-attr-name {
    color: #ff0000;
}

.xml-attr-value {
    color: #0000ff;
}

.xml-value {
    color: #000000;
}

.xml-comment {
    color: #008000;
    font-style: italic;
}

/* Dark Mode - Syntax Highlighting */
[data-bs-theme="dark"] .json-key {
    color: #9cdcfe;
}

[data-bs-theme="dark"] .json-string {
    color: #ce9178;
}

[data-bs-theme="dark"] .json-number {
    color: #b5cea8;
}

[data-bs-theme="dark"] .json-boolean {
    color: #569cd6;
}

[data-bs-theme="dark"] .json-null {
    color: #808080;
}

[data-bs-theme="dark"] .xml-declaration {
    color: #569cd6;
    font-style: italic;
}

[data-bs-theme="dark"] .xml-tag {
    color: #569cd6;
}

[data-bs-theme="dark"] .xml-attr-name {
    color: #9cdcfe;
}

[data-bs-theme="dark"] .xml-attr-value {
    color: #ce9178;
}

[data-bs-theme="dark"] .xml-value {
    color: #d4d4d4;
}

[data-bs-theme="dark"] .xml-comment {
    color: #6a9955;
}

/* HTML Syntax Highlighting (para preview de código) */
.html-doctype {
    color: #808080;
    font-style: italic;
}

.html-tag {
    color: #800000;
    font-weight: bold;
}

.html-attr-name {
    color: #ff0000;
}

.html-attr-value {
    color: #0000ff;
}

.html-comment {
    color: #008000;
    font-style: italic;
}

.html-style {
    color: #000080;
}

/* Dark Mode - HTML Syntax Highlighting */
[data-bs-theme="dark"] .html-doctype {
    color: #808080;
}

[data-bs-theme="dark"] .html-tag {
    color: #569cd6;
    font-weight: bold;
}

[data-bs-theme="dark"] .html-attr-name {
    color: #9cdcfe;
}

[data-bs-theme="dark"] .html-attr-value {
    color: #ce9178;
}

[data-bs-theme="dark"] .html-comment {
    color: #6a9955;
}

[data-bs-theme="dark"] .html-style {
    color: #b5cea8;
}



/* ========================================
   Preview de Parcelas/Recorrências - Tema Dark
   ======================================== */
/* Garante que todas as células da tabela de preview respeitem o tema */
#installments-table tbody td,
#recurrences-table tbody td {
    background-color: var(--table-bg) !important;
    color: var(--text-color) !important;
}

/* Linha de total - substitui table-info do Bootstrap */
#installments-table tfoot tr.table-info th,
#recurrences-table tfoot tr.table-info th {
    background-color: var(--primary-color) !important;
    color: var(--text-color) !important;
    font-weight: 600;
    border-top: 2px solid var(--border-color);
}

/* Zebra striping respeitando o tema */
#installments-table tbody tr:nth-of-type(odd) td,
#recurrences-table tbody tr:nth-of-type(odd) td {
    background-color: var(--table-striped-bg) !important;
}

/* Hover respeitando o tema */
#installments-table tbody tr:hover td,
#recurrences-table tbody tr:hover td {
    background-color: var(--table-hover-bg) !important;
}

.btn-icon {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.btn-icon i,
.btn-icon svg {
    width: 20px;
    height: 20px;
    color: inherit;
}


.modal *, 
.modal {
    transition: none !important;
    animation: none !important;
}
.datatable-loading-wrap {
  position: relative;
}

.datatable-loading-wrap .datatable-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--surface-panel) 50%, transparent);
  backdrop-filter: blur(2px);
  z-index: 5;
}

.datatable-loading-wrap .datatable-spinner .spinner-border {
  width: 2.25rem;
  height: 2.25rem;
  border-width: 0.25rem;
  color: var(--brand-secondary, var(--brand-primary));
}

.datatable-loading-wrap.datatable-loading .datatable-spinner {
  display: flex;
}

.datatable-loading-wrap.datatable-loading table,
.datatable-loading-wrap.datatable-loading .dataTables_wrapper {
  opacity: 0;
}

/* Diferenciação visual de movimentações: Entrada (income) e Saída (expense) */
/* Cor diferenciada nos valores para entrada e saída */
#datatable_movements tbody tr.movement-income td.text-end {
  color: color-mix(in srgb, var(--brand-success) 85%, var(--text-primary) 15%);
}

#datatable_movements tbody tr.movement-expense td.text-end {
  color: color-mix(in srgb, var(--brand-danger) 85%, var(--text-primary) 15%);
}

/* Diferenciação visual de datas de vencimento */
#datatable_movements tbody tr td .due-date-today {
  color: var(--bs-warning) !important;
  font-weight: 500;
}

#datatable_movements tbody tr td .due-date-overdue {
  color: var(--brand-danger) !important;
  font-weight: 500;
}

.swal2-loading-transparent {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 1rem !important;
  padding: 0.75rem !important;
  width: auto !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

.swal2-loading-transparent .swal2-loader {
  width: 5.25rem !important;
  height: 5.25rem !important;
  margin: 0 !important;
  border-width: 0.55rem !important;
  border-radius: 50% !important;
  color: var(--action-primary-bg) !important;
  border-color: var(--action-primary-bg) transparent var(--action-primary-bg) transparent !important;
}

body.swal2-shown:has(.swal2-loading-transparent),
body.swal2-height-auto:has(.swal2-loading-transparent) {
  overflow-x: hidden !important;
}