/* ===== Container geral (copiado exatamente do index.css) ===== */
.resultado-container{
    width:100%;
    max-width:1400px; /* garante 2 colunas mesmo com sidebar expandida em telas comuns */
    margin:0 auto;
    padding:0 15px;
}

/* Expande gradualmente em monitores maiores, mas mantém proporções */
@media (min-width: 1600px) {
  .resultado-container {
    max-width: 1600px; /* expande moderadamente */
  }
}

@media (min-width: 1920px) {
  .resultado-container {
    max-width: 1800px; /* expande mais, mas não excessivamente */
  }
}

/* ===== GRID PRINCIPAL ===== */
.page-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "main-kpi current-month"
        "sub-kpis .";
    gap: 20px;
    align-items: stretch; /* faz os cards da mesma linha igualarem a altura */
}


/* Áreas nomeadas */
#main-kpi-container {
    grid-area: main-kpi;
    display: flex;
    flex-direction: column;
}
#current-month-container {
    grid-area: current-month;
    display: flex;
    flex-direction: column;
    align-self: stretch; /* força ocupar a altura da linha do grid */
    height: 100%;
}
#sub-kpi-container {
    grid-area: sub-kpis;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}

/* Layout específico para os 5 cards BU - Nova ordem: Cidades primeiro */
#sub-kpi-container .kpi-card:nth-child(1) { grid-column: 1; grid-row: 1; } /* Cidades */
#sub-kpi-container .kpi-card:nth-child(2) { grid-column: 2; grid-row: 1; } /* Industrial */  
#sub-kpi-container .kpi-card:nth-child(3) { grid-column: 3; grid-row: 1; } /* Esportivo */
#sub-kpi-container .kpi-card:nth-child(4) { grid-column: 4; grid-row: 1; } /* Usinas */
#sub-kpi-container .kpi-card:nth-child(5) { grid-column: 1; grid-row: 2; } /* Grow - abaixo de Cidades */

/* Placeholder para ícones sem imagem */
.placeholder-icon {
    width: 20px;
    height: 20px;
    background: #e0e0e0;
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}

/* Responsivo: empilha tudo */
@media (max-width: 1200px) {
    .page-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main-kpi"
            "current-month"
            "sub-kpis";
    }
}

/* ===== CARD BASE ===== */
.kpi-card {
    background-color: #fff;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kpi-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    position: relative; 
}

.kpi-card-header .btn-mini {
  position: absolute;
  top: 0;
  right: 0;
}

.kpi-card-icon { width: 40px; height: 40px; flex-shrink: 0; }
.kpi-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.kpi-card-title { font-size: 18px; font-weight: 600; }

.kpi-card-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.kpi-metric .label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-color-light);
    margin-bottom: 2px;
}
.kpi-metric .value {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
}
.kpi-metric .percentage {
    font-weight: 600;
    font-size: 11px;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 12px;
}

/* Cores de porcentagem */
.percentage.positive { background-color: rgba(40, 167, 69, 0.1); color: #28a745; }
.percentage.warning { background-color: rgba(255, 193, 7, 0.15); color: #b98900; }
.percentage.negative { background-color: rgba(220, 53, 69, 0.1); color: #dc3545; }

/* Barra de Progresso */
.progress-bar-container {
    width: 100%;
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #F6C847 0%, #F03200 65%, #7F3F98 100%);
}

/* Área de gráfico no card */
.card-chart-container {
    width: 100%;
    flex-grow: 1;
    min-height: 80px;
}

/* ===== WIDGET RESULTADO DO MÊS ===== */
.current-month-card .widget {
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 300px; /* mais alto para aproximar do Silicon Geral */
    flex: 1 1 auto;
}
.current-month-card .widget-title {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
}
.current-month-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}
.current-month-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border-color);
}
.current-month-item:last-child { border-bottom: none; }
.current-month-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.current-month-item-info img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.current-month-item-info span { font-size: 12px; }
.current-month-item-value { font-size: 12px; font-weight: 600; }

/* ===== SUB-KPIs ===== */
.sub-kpi-grid .kpi-card {
    padding: 12px;
    height: 100%;
}
.sub-kpi-grid .kpi-card-header {
    margin-bottom: 10px;
    gap: 8px;
}
.sub-kpi-grid .kpi-card-icon {
    width: 24px;
    height: 24px;
}
.sub-kpi-grid .kpi-card-title {
    font-size: 13px;
}
.sub-kpi-grid .kpi-card-metrics {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.sub-kpi-grid .kpi-metric .value {
    font-size: 16px;
}
.sub-kpi-grid .kpi-metric .label {
    font-size: 9px;
}