@media (max-width: 900px) {
  .dashboard-card-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    max-width: 34px;
    max-height: 34px;
    font-size: 1.4rem;
    border-radius: 50% !important;
    margin-right: 6px;
  }
}
/* Estilo moderno para ícones dos cards do dashboard */
.dashboard-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e90ff 60%, #00c3ff 100%);
  color: #fff;
  font-size: 2rem;
  margin-right: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dashboard-card-icon.total-clientes {
  background: linear-gradient(135deg, #1e90ff 60%, #00c3ff 100%);
}
.dashboard-card-icon.vence-hoje {
  background: linear-gradient(135deg, #ffd700 60%, #ffb300 100%);
}
.dashboard-card-icon.clientes-vencidos {
  background: linear-gradient(135deg, #ff7043 60%, #ff9800 100%);
}
.dashboard-card-icon.entrada {
  background: linear-gradient(135deg, #00c3ff 60%, #1de9b6 100%);
}
.dashboard-card-icon.custo {
  background: linear-gradient(135deg, #ff1744 60%, #ff8a65 100%);
}
.dashboard-card-icon.lucro {
  background: linear-gradient(135deg, #43ea7f 60%, #00c853 100%);
}


/* Exemplo de uso no HTML:
<div class="dashboard-card-icon total-clientes"><i class="fa fa-users"></i></div>
*/
/* Subtítulo do bloco de cards (ex: Mês Atual - (jan. de 26)) */
.summary-subtitle {
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #b6c2d6 !important;
  margin-top: 0;
    margin-bottom: 2px !important;
  letter-spacing: 0.1px;
}

/* ===== DASHBOARD MODERNO E ELEGANTE ===== */

/* ----- AJUSTES DE LAYOUT ----- */
.dashboard-page .content {
  padding-top: clamp(0.5rem, 1vw, 0.75rem) !important;
}

/* ----- TÍTULOS E TEXTOS ----- */
.dashboard-charts-title {
    font-size: 17px !important;
    font-weight: 400 !important;
    color: #b6c2d6 !important;
    margin-top: 10;
    margin-bottom: 2px !important;
    letter-spacing: 0.1px;
}

.summary-title {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #b6c2d6 !important;
  margin-top: 0;
    margin-bottom: 4px !important;
  letter-spacing: 0.1px;
}

.dashboard-summary {
  margin-bottom: 8px;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

/* ===== CARDS E KPIS ===== */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-bottom: 10px;
}

/* Gradientes individuais para cada KPI */
/* MOBILE AJUSTES PARA INDICE NOS CARDS */
@media (max-width: 900px) {
  .card-index span {
    display: inline-block;
  }
  .card-index span:not(.arrow):not(.percent) {
    display: none !important;
  }
  .card-index {
    position: static !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    left: unset !important;
    bottom: unset !important;
    width: 100%;
    justify-content: flex-start;
    font-size: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .card-value + .card-index {
    margin-top: 8px !important;
    position: static !important;
  }
}
.kpi {
  border-radius: 16px;
  padding: 22px;
  position: relative;
  transition: all 0.3s ease;
  backdrop-filter: blur(15px);
  
}
.kpi-total {
  background: linear-gradient(135deg, #202b42 10%, #38bff84b 100%);
  border: 2px solid #2563eb44;
 
}
.kpi-vence-hoje {
  background: linear-gradient(135deg, #666434 10%, #fde68a36 100%);
  border: 2px solid #facc1544;
  
}
.kpi-vencidos {
  background: linear-gradient(135deg, #5c442d 10%, #ff730049 100%);
  border: 2px solid #f0804d50;
  
}

.kpi:hover {
  transform: translateY(-4px);
 
}

/* ÍCONE E TÍTULO */
.card-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.card-icon {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #b6c2d6 !important;
  margin-bottom: 18px !important;
  margin-top: 0;
  letter-spacing: 0.1px;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(59,130,246,0.05));
 
}

/* TÍTULO DO CARD */
.card-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: #e2e8f0;
  margin-bottom: 0 !important;
  letter-spacing: 0.6px;
}

/* VALOR DO CARD */
.card-value {
  font-size: 32px !important;
  font-weight: 800 !important;
  margin-top: 10px;
}

/* ===== CORES PERSONALIZADAS ===== */

.kpi-total .card-icon { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.kpi-vence-hoje .card-icon { background: linear-gradient(135deg, #ffe874, #fff3c3); color: #0a0a0a; }
.kpi-ativos .card-icon { background: linear-gradient(135deg, #2abe60, #76d499); }
.kpi-vencidos .card-icon { background: linear-gradient(135deg, #ef8344, #f8ae71); }

.card-entrada .card-icon { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.card-custo .card-icon { background: linear-gradient(135deg, #f43f5e, #f87171); }
.card-total .card-icon { background: linear-gradient(135deg, #1ca04c, #4ece7d); }

/* ===== CORES DOS VALORES ===== */

.kpi-total .card-value, .kpi-total  { color: #3b82f6 !important; }
.kpi-vence-hoje .card-value, .kpi-vence-hoje { color: #ffee96 !important; }
.kpi-vencidos .card-value, .kpi-vencidos  { color: #ffa162 !important; }

.card-entrada .card-value { color: #22d3ee !important; }
.card-custo .card-value { color: #f87171 !important; }
.card-total .card-value { color: #26ad58 !important; }

.kpi-total   { color: #5fbb13 !important; }



/* ===== SUMÁRIOS FINANCEIROS ===== */
.financial-summary {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

/* Índice de comparação nos cards */
.card-index {
  font-size: 16px;
  font-weight: 300;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  margin-bottom: 0;
  position: absolute;
  left: 5px;
  bottom: -5px;
  letter-spacing: 0.1px;
}
.card.summary .card-content {
  position: relative;
  padding-bottom: 24px;
}
.card-index .arrow {
  font-size: 16px;
  margin-right: 2px;
  font-weight: bold;
}
.card-index .percent {
  font-size: 16px;
  margin-right: 2px;
}
.card-index span:not(.arrow):not(.percent) {
  font-weight: 300 !important;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.01em;
}

.card-index.up .arrow, .card-index.up .percent {
  color: #2ccf41;
}
.card-index.down .arrow, .card-index.down .percent {
  color: #f87171;
}

/* Gradientes individuais para cada card de sumário */
.card.summary {
  border-radius: 14px;
  padding: 18px;
  transition: all 0.3s ease;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}

/* Brilho nas bordas */
.card.summary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 2;
  
  mix-blend-mode: lighten;
}

/* Pontos decorativos no canto inferior direito */
.card.summary {
  position: relative;
  overflow: hidden;
}

.card.summary::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 180px;
  height: 120px;
  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.18) 1.5px,
      transparent 2px
    );

  background-size: 12px 12px;
  opacity: 0.35;

  mask-image: radial-gradient(circle at bottom right, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at bottom right, black 40%, transparent 75%);
}


.card-entrada.card.summary {
  background: linear-gradient(135deg, #202b4263 10%, #38bff84b 100%);
  border: 2px solid #22d3ee44;

}
.card-custo.card.summary {
  background: linear-gradient(135deg, #3f1f1f6b 10%, rgba(250, 0, 0, 0.274) 100%);
  border: 2px solid #f8717144;

}
.card-total.card.summary {
  background: linear-gradient(135deg, #21422d6b 10%, #4ade8041 100%);
  border: 2px solid #22c55e44;

}


.card.summary:hover {
  transform: translateY(-4px);
}
   @media (max-width: 900px) {
      .global-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative;
        min-height: 56px;
      }

      .global-left {
        order: 2;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 56px !important;
      }

      .global-right {
        order: 3;
        position: absolute;
        right: 18px;
        top: 12px;
        z-index: 2200;
        display: flex;
        align-items: center;
      }

      #sidebarToggleBtn {
        order: 1;
        position: fixed !important;
        left: 18px !important;
        top: 18px !important;
        z-index: 2200 !important;
        display: block !important;
      }

      .due-left {
        margin-left: 0 !important;
        margin-right: 18px !important;
        display: flex;
        align-items: center;
      }

      .profile-info {
        display: none !important;
      }

      .avatar-wrapper {
        margin-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        height: 44px !important;
      }

      .avatar-large {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        background: #2563eb !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.6em !important;
        margin: 0 !important;
      }
    }
    /* Reduzir fontes dos cards na dashboard para mobile */
    @media (max-width: 900px) {
      .card-title,
      .card-value,
      .summary-title,
      .dashboard-charts-title {
        font-size: 0.85rem !important;
        word-break: break-word !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
      }
      .card-value {
        font-size: 1.6rem !important;
        word-break: break-word !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
      }
      .card-content {
        padding: 8px !important;
      }
      .kpi .card-value {
        font-size: 1.6rem !important;
      }
      .kpi, .card.summary {
        min-width: 0 !important;
        max-width: 100vw !important;
      }
      .summary-cards, .kpis {
        grid-template-columns: 1fr 1fr !important;
      }
      .chart {
        height: 260px !important;
        min-height: 200px !important;
        padding-bottom: 24px !important;
        overflow-x: auto !important;
      }


    }



/* ===== BASE: wrapper do gráfico (desktop e mobile) ===== */
.chart-wrapper {
  width: 100%;
  background:  linear-gradient(135deg, rgba(36, 66, 114, 0.116), rgba(8, 96, 238, 0.068));
  border-radius: 12px;
  border: 2px solid rgba(17, 156, 199, 0.349);
  padding: 20px;           /* padding padrão para desktop */
  box-sizing: border-box;
  min-height: 420px;       /* garante área visual */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;       /* overflow do wrapper é controlado pelo inner quando precisar */
}

/* canvas padrão: ocupa 100% da área disponível do wrapper */
.chart-wrapper canvas {
  display: block;
  width: 100%;
  height: 420px;           /* altura do gráfico em desktop */
  max-width: none;         /* evita limitar o tamanho por max-width globais */
}

/* ===== MOBILE: altera apenas o que precisa ===== */
@media (max-width: 900px) {

  /* wrapper móvel: padding lateral maior para afastar das bordas */
  .chart-wrapper {
    padding: 16px 20px 16px 20px; /* topo/direita/baixo/esq */
    min-height: 260px;
    align-items: flex-end; /* deixa barras “ancoradas” embaixo */
    overflow-x: auto;      /* permite scroll horizontal quando necessário */
    overflow-y: hidden;
  }

  /* canvas móvel: altura reduzida; largura será ajustada via JS quando necessário */
  .chart-wrapper canvas {
    height: 260px !important;
    width: 100% !important;   /* default: ocupe a largura do wrapper (dentro do padding) */
  }

  /* pequeno espaçamento extra na direita do conteúdo para evitar tocar a borda */
  .chart-wrapper::after {
    content: "";
    display: block;
    width: 28px; /* esse é o "gap" para a borda direita - ajuste se quiser maior/menor */
    flex: 0 0 28px;
  }
}