:root {
    --pl-verde-escuro: #003F35;
    --pl-verde-medio: #006E51;
    --pl-amarelo: #F2C700;
    --pl-fundo: #F5F5F5;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--pl-fundo);
    color: #222222;
    margin: 0;
    overflow: hidden;
}

.app-wrapper {
    height: 100vh;
}

/* HEADER */
.pl-header {
    background: var(--pl-verde-escuro);
    color: #FFFFFF;
    border-bottom: 3px solid var(--pl-amarelo);
    padding: 6px 0;
}

.pl-header h1 {
    font-size: 1.4rem;
}

.pl-header p {
    font-size: 0.85rem;
    opacity: 0.9;
}

.logo-conecta {
    max-height: 40px;
}

/* MAIN */
.dashboard-main {
    overflow: hidden;
}

/* FILTROS */
.pl-label {
    font-weight: 600;
    color: var(--pl-verde-escuro);
}

/* KPIs */
.pl-card-kpi {
    border-top: 4px solid var(--pl-amarelo);
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.pl-card-kpi .card-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--pl-verde-medio);
}

.kpi-valor {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--pl-verde-escuro);
}

/* CONTEÚDO PRINCIPAL */
.conteudo-row {
    padding: 4px 0 4px 0;
    overflow: hidden;
}

/* TABELA */
.pl-card-tabela {
    border-left: 4px solid var(--pl-amarelo);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.tabela-container {
    overflow-y: auto;
    max-height: calc(100vh - 280px);
}

.table {
    font-size: 0.72rem;
}

.table thead th,
.table tbody td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 260px;
}

.table thead {
    background-color: var(--pl-verde-escuro);
    color: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table tbody tr:hover {
    background-color: #FFF7CC;
}

/* GRÁFICOS */
.pl-card-grafico {
    border-left: 4px solid var(--pl-verde-medio);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ✅ ESSENCIAL: o wrapper do canvas precisa ter altura real */
.grafico-canvas-wrapper {
    position: relative;
    min-height: 0;     /* evita overflow em flex containers */
}

.grafico-canvas-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

/* =========================
   AJUSTE DEFINITIVO – PÁGINA GRÁFICOS
   ========================= */

/* libera rolagem da página */
body {
  overflow-y: auto !important;
}

/* garante que o main possa crescer */
.dashboard-main {
  overflow: visible !important;
}

/* cada card de gráfico fica mais alto */
.pl-card-grafico {
  min-height: 420px;
}

/* canvas ocupa o card inteiro */
.grafico-canvas-wrapper {
  height: 100%;
  min-height: 340px;
}

.grafico-canvas-wrapper canvas {
  width: 100% !important;
  height: 100% !important;
}

/* layout 2x1 com rolagem natural */
.graficos-grid-section {
  padding-bottom: 1rem;
}

/* mobile: gráficos ainda maiores */
@media (max-width: 991.98px) {
  .pl-card-grafico {
    min-height: 460px;
  }
}