/* ===== 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: 14px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 20px;
  margin-top: 0;
  letter-spacing: 0.6px;
}

.summary-title {
  font-size: 14px !important;
  margin-top: 0;
}

.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;
}

.kpi {
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px;
  position: relative;
  transition: all 0.3s ease;
  backdrop-filter: blur(15px);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
}
.kpi:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 35px rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.2);
}

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

.card-icon {
  font-size: 22px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(59,130,246,0.05));
  box-shadow: inset 0 0 10px rgba(255,255,255,0.15);
}

/* 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: 34px !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, #ef4444, #f87171); }

.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: #f87171 !important; }

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



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

.card.summary {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.6), rgba(31, 41, 55, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px;
  transition: all 0.3s ease;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card.summary:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 35px rgba(0, 0, 0, 0.5);
}
   @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: 2rem !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: #111927;
  border-radius: 12px;
  padding: 20px;           /* padding padrão para desktop */
  margin-top: 20px;
  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;
  }
}