:root {
  --radius: clamp(0.5rem, 1vw, 1.25rem);
  /* Cores principais agora são injetadas dinamicamente via template */
  /* Mantém apenas cores auxiliares que não variam por cliente */
  --cancel: hsl(22, 94%, 56%);
  --finish: hsl(354, 70%, 44%);
  
  /*adicionando variaveis responsivas para espaçamento */
  --spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --spacing-sm: clamp(0.5rem, 1vw, 1rem);
  --spacing-md: clamp(1rem, 2vw, 1.5rem);
  --spacing-lg: clamp(1.5rem, 3vw, 2.5rem);
  --spacing-xl: clamp(2rem, 4vw, 3.5rem);
  
  /* adicionando variáveis responsivas para fontes */
  --font-xs: clamp(0.75rem, 1.5vw, 0.875rem);
  --font-sm: clamp(0.875rem, 2vw, 1rem);
  --font-md: clamp(1rem, 2.5vw, 1.125rem);
  --font-lg: clamp(1.25rem, 3vw, 1.5rem);
  --font-xl: clamp(1.5rem, 4vw, 2rem);
  --font-2xl: clamp(2rem, 5vw, 3.5rem);
  --font-3xl: clamp(2.5rem, 6vw, 4rem);
}

/* ============================================
   SELECT2 DROPDOWN MODAL - ESTILOS PRINCIPAIS
   ============================================ */

/* --------------------------------------------
   BACKDROP (Desabilitado - não usamos mais)
   -------------------------------------------- */
.select2-dropdown-backdrop {
  display: none !important;
}

/* --------------------------------------------
   DROPDOWN PRINCIPAL (Posicionamento Absoluto)
   -------------------------------------------- */
.select2-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 400px !important;
  z-index: 10051 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  background-color: #fff !important;
  border: 1px solid #ddd !important;
}

/* --------------------------------------------
   VARIAÇÕES DE POSICIONAMENTO
   -------------------------------------------- */
.select2-dropdown--below {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 0 !important;
  transform: none !important;
}

.select2-dropdown--above {
  position: absolute !important;
  bottom: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-bottom: 4px !important;
  transform: none !important;
}

/* --------------------------------------------
   RESULTADOS (Lista de Itens)
   -------------------------------------------- */
.select2-results__options {
  max-height: 300px !important;
  overflow-y: auto !important;
}

/* --------------------------------------------
   SCROLLBAR DOS RESULTADOS
   -------------------------------------------- */
.select2-results__options::-webkit-scrollbar {
  width: 8px;
}

.select2-results__options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.select2-results__options::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.jazzmin-login-page {
  align-items: center;
  background-image: url(../images/loginBckg.webp);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100%;
}

.login-box {
  .login-logo {
    padding-bottom: 2rem;
  }

  .card {
    border-radius: 1rem;

    .card-body {
      background-color: #fff;
      border-radius: var(--radius);
      padding: 3rem 5rem;
      gap: 2rem;
      display: flex;
      flex-direction: column;

      form {
        display: flex;
        flex-direction: column;
      }
    }

    .login-box-msg {
      color: var(--primary);
      font-size: 1.875rem;
      font-weight: 700;
      margin-bottom: 1rem;
      text-align: center;
    }
  }
}

div.input-group>input {
  height: 3rem;
}

.btn-danger {
  color: var(--primary);
}

.btn-primary {
  background-color: var(--primary);
}

.btn-info {
  background-color: var(--primary-dark);
}

.btn-success {
  /*background-color: var(--primary);*/
  background-color: var(--success);
  border: none;
}

.btn-block {
  font-size: 0.975rem;
  line-height: 3.25rem;
  /*display: flex;*/
  /*flex-direction: column;*/
  /*justify-content: center;*/
  justify-items: center;
}

#jazzy-sidebar {
  background-color: var(--primary);

  .active {
    background-color: var(--primary-dark);
  }
}


#jazzy-sidebar.sidebar-product-aferineu,
#jazzy-sidebar.sidebar-product-telmonitor,
#jazzy-sidebar.sidebar-product-pneufit,
#jazzy-sidebar.sidebar-product-aferifacil {
  background-color: var(--primary);

  .active {
    background-color: var(--primary-dark);
  }
}

#jazzy-logo {
  background-color: white !important;
}

/* Garantir que o logo container seja sempre branco, independente do produto */
#jazzy-sidebar .sidebar-logo-container,
#jazzy-sidebar.sidebar-product-aferifacil .sidebar-logo-container,
#jazzy-sidebar.sidebar-product-pneufit .sidebar-logo-container,
#jazzy-sidebar.sidebar-product-aferineu .sidebar-logo-container,
#jazzy-sidebar.sidebar-product-telmonitor .sidebar-logo-container,
#jazzy-sidebar #jazzy-logo,
#jazzy-sidebar.sidebar-product-aferifacil #jazzy-logo,
#jazzy-sidebar.sidebar-product-pneufit #jazzy-logo,
#jazzy-sidebar.sidebar-product-aferineu #jazzy-logo,
#jazzy-sidebar.sidebar-product-telmonitor #jazzy-logo {
  background-color: white !important;
}

h1.h4 {
  color: var(--primary);
  font-size: 1.875rem;
  font-weight: 700;
  text-transform: capitalize;
}

.breadcrumb {
  a {
    color: var(--secondary-light) !important;

    &:hover {
      text-decoration: underline;
    }
  }
}

#result_list {
  a {
    color: var(--primary);
    font-weight: 600;
  }

  td {
    color: var(--primary);
  }
}

/* Até a linha 162 está focado em fazer com que todos os títulos de colunas tenham a mesma aparência, mesmo que sejam clicáveis. */
#result_list thead th,
#changelist table thead th,
table thead th {
  color: var(--primary) !important;
  font-weight: 600 !important;
}


#result_list thead th a,
#changelist table thead th a,
table thead th a {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* Forms*/
.container-fluid {
  #content {
    #content-main {
      form {
        .card {
          a {
            color: var(--primary);
          }
        }
      }
    }
  }
}

/* ============================================
   SELECT2 - CONTAINERS E SELEÇÕES
   ============================================ */

/* --------------------------------------------
   Container de Autocomplete do Admin
   -------------------------------------------- */
.select2-container--admin-autocomplete {
  background-color: #fff;
}

.select2-container--admin-autocomplete .select2-selection--single,
.select2-container--admin-autocomplete .select2-selection--multiple {
  min-height: 38px !important;
}

/* --------------------------------------------
   Seta do Select2 no Filtro de Busca
   -------------------------------------------- */
#changelist-search>span>span:nth-child(1)>span>span.selection>span>span.select2-selection__arrow {
  top: 6px;
}

h6 {
  strong {
    font-size: 2rem;
  }
}

/* Esconder os ícones de editar, visualizar e adicionar em campos autocomplete */
.related-widget-wrapper .add-related,
.related-widget-wrapper .change-related,
.related-widget-wrapper .view-related,
.related-widget-wrapper .lookup-id-related {
  display: none !important;
}

#search_group>span {
  padding-left: 11px;
}

body.sidebar-collapse #jazzy-sidebar {
  z-index: 1030 !important;
}

#search-results {
  display: none;
  padding: 2rem 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.size {
  width: 75%;
  box-shadow: 1px 1px 4px #3333334b;
}

.padding {
  padding: 0 7.5px;
}


@media (max-width: 992px) {
  .size {
    width: 100%;
  }
}

@media (min-width: 992px) {

  .sidebar-mini.sidebar-collapse .content-wrapper,
  .sidebar-mini.sidebar-collapse .main-footer,
  .sidebar-mini.sidebar-collapse .main-header {
    margin-left: 0px !important;
  }
}

/* Garantir que o footer não invada o sidebar */
.main-footer {
  z-index: 1020 !important;
}

/* Mobile: footer sempre sem margin */
@media (max-width: 991.98px) {
  .main-footer {
    margin-left: 0 !important;
  }
}


@media (min-width: 992px) {
  body:not(.sidebar-collapse) .main-footer {
    margin-left: 275px;
  }

  body.sidebar-collapse .main-footer {
    margin-left: 0 !important; /* Sidebar completamente colapsado (width: 0) */
  }
}

input.btn.btn-danger.form-control {
  color: #fff !important;
}

@media (min-width: 576px) and (max-width: 837px) {
  .col-sm-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}



@media (max-width: 768px) {


  .content-header .breadcrumb,
  .content .breadcrumbs,
  .breadcrumb {
    display: none !important;
  }

 
  .content-header .page-title,
  .content .page-title {
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {

  /* cabeçalho e conteúdo principal */
  .content-header,
  .content-wrapper>.content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* container-fluid padrão do admin */
  .content-wrapper .container-fluid,
  .content .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    /* evita “recuos” do .row */
    margin-right: 0 !important;
  }

  /* as linhas do Bootstrap costumam recolocar margens negativas */
  .content .container-fluid>.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* opcional: cartão sem “bordas internas” colado na tela */
  .content .card {
    border-radius: 0;
  }

  .wrapper>.content-wrapper>.content:not(.mb-2) {
    padding-top: 0 !important;
  }

  .wrapper>.content-wrapper>.content>.container-fluid>.content>.row>.card-body {
    padding-top: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: 0 !important;
    /* evita “recuos” do .row */
    margin-right: 0 !important;
    margin-top: 0 !important;
  }

  .content-wrapper .mb-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Login */
.login-logo {
  opacity: 0 !important;
}

/* Barra superior (marca do canto esquerdo) */
.main-header .brand-image,
.main-header .brand-text,
.main-header .navbar-brand,
.brand-link .brand-image,
.brand-link .brand-text {
  opacity: 0 !important;
}


.sidebar-fixed-header {
  display: flex;
  flex-direction: column;
  height: 120px;
  max-height: 120px;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: inherit;
  border: none;
  border-top: none;
  border-bottom: none;
  overflow: hidden;
}

.sidebar-logo-container {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  min-height: 60px;
  max-height: 60px;
  height: 60px;
  background-color: white !important;
  overflow: hidden;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.sidebar-logo-container .brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 60px;
  padding: 8px 15px;
  margin: 0;
  text-decoration: none;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  overflow: hidden;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.sidebar-logo-container .brand-image.elevation-3,
.sidebar-logo-container .brand-image {
  width: auto;
  max-width: 80%;
  height: auto;
  max-height: 44px !important;
  object-fit: contain;
  opacity: 1 !important; 
  display: block; 
  margin: 0 auto;
  object-position: center;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.sidebar-user-container {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 10px;
  min-height: 60px;
  max-height: 60px;
  height: 60px;
  overflow: hidden;
}

.sidebar-user-container .user-panel {
  width: 100%;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: none !important;
}

.sidebar-user-container .user-panel .image {
  margin-right: 10px;
}

.sidebar-user-container .user-panel .image img {
  width: 40px;
  height: 40px;
}

.sidebar-user-container .user-panel .image i {
  font-size: 2rem;
}

.sidebar-user-container .user-panel .info {
  flex: 1;
  overflow: hidden;
}

.sidebar-user-container .user-panel .info a,
.sidebar-user-container .user-panel .info span {
  color: white;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

.sidebar-scrollable {
  height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-scrollable::-webkit-scrollbar {
  width: 8px;
  display: block;
}

.sidebar-scrollable::-webkit-scrollbar-track {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

.sidebar-scrollable::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  border: none;
  margin: 0;
  padding: 0;
}

.sidebar-scrollable::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.sidebar-scrollable::-webkit-scrollbar-button,
.sidebar-scrollable::-webkit-scrollbar-button:start:decrement,
.sidebar-scrollable::-webkit-scrollbar-button:end:increment,
.sidebar-scrollable::-webkit-scrollbar-button:vertical:start:decrement,
.sidebar-scrollable::-webkit-scrollbar-button:vertical:end:increment,
.sidebar-scrollable::-webkit-scrollbar-button:vertical:start:increment,
.sidebar-scrollable::-webkit-scrollbar-button:vertical:end:decrement,
.sidebar-scrollable::-webkit-scrollbar-button:single-button,
.sidebar-scrollable::-webkit-scrollbar-button:double-button,
.sidebar-scrollable::-webkit-scrollbar-button:double-button:vertical:start:decrement,
.sidebar-scrollable::-webkit-scrollbar-button:double-button:vertical:end:increment {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
  background-color: transparent !important;
  content: "" !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

.sidebar-scrollable::-webkit-scrollbar-corner {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
}

.sidebar-scrollable .nav:first-child .nav-item:first-child,
.sidebar-scrollable nav .nav-item:first-child {
  margin-top: 15px !important;
  padding-top: 10px !important;
}

.sidebar-scrollable .nav:first-child .nav-item:first-child .nav-link,
.sidebar-scrollable nav .nav-item:first-child .nav-link {
  margin-top: 0 !important;
}

/* Regras de collapse mantidas para compatibilidade */
body.sidebar-collapse .main-sidebar,
body.sidebar-collapse #jazzy-sidebar {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  transition: width 0.3s ease;
}

body.sidebar-collapse .sidebar-fixed-header,
body.sidebar-collapse .sidebar-scrollable {
  width: 0 !important;
  overflow: hidden !important;
}

.sidebar-scrollable .sidebar {
  padding-bottom: 10px;
}

.sidebar-mini .sidebar-fixed-header {
  height: 120px;
}

.sidebar-mini .sidebar-scrollable {
  height: calc(100vh - 120px);
}

@media (max-width: 768px) {
  .sidebar-fixed-header {
    height: 100px;
    max-height: 100px;
  }

  .sidebar-logo-container {
    flex: 0 0 50px;
    min-height: 50px;
    max-height: 50px;
    height: 50px;
  }

  .sidebar-user-container {
    flex: 0 0 50px;
    min-height: 50px;
    max-height: 50px;
    height: 50px;
  }

  .sidebar-logo-container .brand-image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    opacity: 1 !important; 
    display: block; 
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    object-position: center;
    box-shadow: none !important;
    filter: none !important;
    background: transparent !important;
  }

  .sidebar-user-container .user-panel .image img {
    width: 35px;
    height: 35px;
  }

  .sidebar-user-container .user-panel .image i {
    font-size: 1.5rem;
  }

  body.sidebar-collapse .main-sidebar,
  body.sidebar-collapse #jazzy-sidebar {
    width: 0 !important;
    transform: translateX(-100%);
  }
}

@media (min-width: 992px) {
  .sidebar-mini.sidebar-collapse .sidebar-fixed-header {
    height: 0 !important;
    overflow: hidden !important;
  }

  .sidebar-mini.sidebar-collapse .sidebar-scrollable {
    height: 0 !important;
    overflow: hidden !important;
  }
}

.dashboard-container {
    padding: var(--spacing-sm);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.stat-card {
    background: #ffffff;
    border-radius: clamp(12px, 2vw, 20px);
    padding: clamp(1.25rem, 3vw, 2.5rem);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: none;
    height: 100%;
    min-height: clamp(200px, 30vh, 300px);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    width: 100%;
    box-sizing: border-box;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(3px, 0.5vw, 5px);
    background: linear-gradient(90deg, var(--card-color-start), var(--card-color-end));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: clamp(12px, 2vw, 20px) clamp(12px, 2vw, 20px) 0 0;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--card-color-start) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(clamp(-4px, -1vw, -12px)) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card:hover::after {
    opacity: 0.05;
}

.stat-card-icon {
    width: clamp(60px, 8vw, 80px);
    height: clamp(60px, 8vw, 80px);
    border-radius: clamp(12px, 2vw, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(1rem, 2vw, 1.75rem);
    background: linear-gradient(135deg, var(--icon-bg-start), var(--icon-bg-end));
    box-shadow: 0 10px 30px var(--icon-shadow), 0 0 0 0 rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.stat-card:hover .stat-card-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 40px var(--icon-shadow), 0 0 0 4px rgba(255, 255, 255, 0.3);
}

.stat-card-icon i {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: #ffffff;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.stat-card-content {
    flex: 1;
    min-width: 0;
}

.stat-card-number {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    color: var(--text-color);
    background: linear-gradient(135deg, var(--text-color), var(--text-color-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: -1px;
    transition: all 0.3s ease;
    word-break: break-word;
    overflow-wrap: break-word;
}

.stat-card:hover .stat-card-number {
    transform: scale(1.05);
}

.stat-card-label {
    font-size: clamp(0.75rem, 1.5vw, 0.95rem);
    font-weight: 600;
    color: #6c757d;
    margin: clamp(0.5rem, 1vw, 0.75rem) 0 0 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    line-height: 1.4;
}

.stat-card:hover .stat-card-label {
    opacity: 1;
}

.stat-card-footer {
    margin-top: auto;
    padding-top: clamp(1rem, 2vw, 1.75rem);
    border-top: none;
    position: relative;
}

.stat-card-footer::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--card-color-start), var(--card-color-end));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover .stat-card-footer::before {
    width: 100%;
}

.stat-card-link {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    display: inline-flex;
    align-items: center;
    gap: clamp(0.25rem, 0.5vw, 0.5rem);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.75rem, 1.5vw, 1rem);
    border-radius: clamp(6px, 1vw, 8px);
    background: rgba(0, 0, 0, 0.02);
    margin-left: clamp(-0.5rem, -1vw, -1rem);
    white-space: nowrap;
}

.stat-card-link:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--link-color), var(--link-hover-color));
    gap: clamp(0.5rem, 1vw, 0.75rem);
    margin-left: 0;
    box-shadow: 0 4px 12px var(--icon-shadow);
    transform: translateX(4px);
}

.stat-card-link i {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card-link:hover i {
    transform: translateX(4px);
}

/* Cores específicas para cada card - Harmoniosas e Profissionais */
.stat-card-primary {
    --card-color-start: #4b6cb7;
    --card-color-end: #6b8cd9;
    --icon-bg-start: #4b6cb7;
    --icon-bg-end: #6b8cd9;
    --icon-shadow: rgba(75, 108, 183, 0.35);
    --text-color: #4b6cb7;
    --text-color-light: #6b8cd9;
    --link-color: #4b6cb7;
    --link-hover-color: #3a5a9a;
}

.stat-card-success {
    --card-color-start: #28a745;
    --card-color-end: #48d66b;
    --icon-bg-start: #28a745;
    --icon-bg-end: #48d66b;
    --icon-shadow: rgba(40, 167, 69, 0.35);
    --text-color: #28a745;
    --text-color-light: #48d66b;
    --link-color: #28a745;
    --link-hover-color: #218838;
}

.stat-card-warning {
    --card-color-start: #ff9800;
    --card-color-end: #ffb74d;
    --icon-bg-start: #ff9800;
    --icon-bg-end: #ffb74d;
    --icon-shadow: rgba(255, 152, 0, 0.35);
    --text-color: #f57c00;
    --text-color-light: #ff9800;
    --link-color: #f57c00;
    --link-hover-color: #e65100;
}

.stat-card-info {
    --card-color-start: #17a2b8;
    --card-color-end: #4dd0e1;
    --icon-bg-start: #17a2b8;
    --icon-bg-end: #4dd0e1;
    --icon-shadow: rgba(23, 162, 184, 0.35);
    --text-color: #17a2b8;
    --text-color-light: #4dd0e1;
    --link-color: #17a2b8;
    --link-hover-color: #138496;
}


@media (max-width: 575.98px) {
    .dashboard-container {
        padding: var(--spacing-xs);
    }
    
    .stat-card {
        padding: clamp(1rem, 4vw, 1.5rem);
        min-height: auto;
    }
    
    .stat-card:hover {
        transform: translateY(-4px) scale(1.01);
    }
}


@media (min-width: 576px) and (max-width: 767.98px) {
    .dashboard-container {
        padding: var(--spacing-sm);
    }
}


@media (min-width: 768px) and (max-width: 991.98px) {
    .stat-card {
        padding: clamp(1.5rem, 3vw, 2rem);
    }
}


@media (min-width: 992px) and (max-width: 1199.98px) {
    .stat-card {
        padding: clamp(2rem, 3vw, 2.5rem);
    }
}


@media (min-width: 1200px) {
    .dashboard-container {
        padding: var(--spacing-md);
    }
}



.row.mb-4 {
    margin-left: calc(-1 * var(--spacing-sm));
    margin-right: calc(-1 * var(--spacing-sm));
}

.row.mb-4 > [class*="col-"] {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

/* Garantir que os cards ocupem 100% da largura em mobile */
@media (max-width: 767.98px) {
    .row.mb-4 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* 
   RESPONSIVIDADE PARA ZOOM
   */

/* Adaptação para diferentes níveis de zoom */
@media (min-resolution: 150dpi) {
    .stat-card {
        padding: clamp(1.5rem, 2.5vw, 2.5rem);
    }
}

/* 
   Adicionando uma animação de entrada:
    */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card {
    animation: fadeInUp 0.6s ease-out;
}

.stat-card:nth-child(1) {
    animation-delay: 0.1s;
}

.stat-card:nth-child(2) {
    animation-delay: 0.2s;
}

.stat-card:nth-child(3) {
    animation-delay: 0.3s;
}

.stat-card:nth-child(4) {
    animation-delay: 0.4s;
}

/* ============================================
   SIDEBAR - ESTRUTURA LIMPA E RESPONSIVA
   ============================================ */

/* === BASE - Propriedades fundamentais === */
.main-sidebar,
#jazzy-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  z-index: 1030 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  pointer-events: auto !important;
  touch-action: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* === SCROLLABLE - Área de scroll === */
.sidebar-scrollable {
  height: calc(100vh - 120px) !important;
  max-height: calc(100vh - 120px) !important;
  min-height: 200px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  will-change: scroll-position !important;
  z-index: 1 !important;
}

/* === ELEMENTOS INTERATIVOS === */
.sidebar-scrollable *,
#jazzy-sidebar *,
.main-sidebar * {
  pointer-events: auto !important;
  touch-action: auto !important;
}

#jazzy-sidebar a,
#jazzy-sidebar .nav-link,
#jazzy-sidebar .nav-item a,
.main-sidebar a,
.main-sidebar .nav-link {
  cursor: pointer !important;
  touch-action: manipulation !important;
}

/* === PSEUDO-ELEMENTOS === */
.main-sidebar::before,
.main-sidebar::after,
#jazzy-sidebar::before,
#jazzy-sidebar::after,
.sidebar-scrollable::before,
.sidebar-scrollable::after {
  display: none !important;
  pointer-events: none !important;
  content: none !important;
}

/* === HEADER FIXO === */
.sidebar-fixed-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: inherit !important;
  pointer-events: auto !important;
  touch-action: auto !important;
}

/* === DESKTOP (≥992px) === */
@media (min-width: 992px) {
  .main-sidebar,
  #jazzy-sidebar {
    max-width: 275px !important;
    width: 275px !important;
  }

  body:not(.sidebar-collapse) .content-wrapper {
    margin-left: 275px !important;
  }

  body.sidebar-collapse .content-wrapper {
    margin-left: 0 !important;
  }
}

/* === TABLET/MOBILE (<992px) === */
@media (max-width: 991.98px) {
  .main-sidebar,
  #jazzy-sidebar {
    max-width: 280px !important;
    width: 280px !important;
    z-index: 1040 !important;
  }

  body:not(.sidebar-collapse) .content-wrapper {
    margin-left: 280px !important;
  }

  body.sidebar-collapse .main-sidebar,
  body.sidebar-collapse #jazzy-sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
  }

  .sidebar-scrollable {
    height: calc(100vh - 100px) !important;
    max-height: calc(100vh - 100px) !important;
  }
}

/* === MOBILE PEQUENO (<768px) === */
@media (max-width: 767.98px) {
  .main-sidebar,
  #jazzy-sidebar {
    max-width: 280px !important;
    width: 280px !important;
    z-index: 1040 !important;
  }

  body:not(.sidebar-collapse) .content-wrapper {
    margin-left: 0 !important;
  }

  body.sidebar-collapse .main-sidebar,
  body.sidebar-collapse #jazzy-sidebar {
    transform: translateX(-100%) !important;
  }

  .sidebar-scrollable {
    height: calc(100vh - 100px) !important;
    max-height: calc(100vh - 100px) !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }
}

/* === ZOOM ALTO - Garantir funcionalidade === */
@media screen and (min-resolution: 192dpi),
       screen and (-webkit-min-device-pixel-ratio: 2) {
  .main-sidebar,
  #jazzy-sidebar {
    max-width: 275px !important;
    width: 275px !important;
    pointer-events: auto !important;
    touch-action: auto !important;
  }

  .sidebar-scrollable {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
  }

  .sidebar-scrollable * {
    pointer-events: auto !important;
    touch-action: auto !important;
  }
}

/* === CONTEÚDO PRINCIPAL === */
.content-wrapper,
.main-content,
.content {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}