/* ===== 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;
    box-sizing: border-box;
    overflow-x: hidden; /* Previne scroll horizontal */
}

/* 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 sub-kpis";
    gap: 20px;
    align-items: stretch; /* faz os cards da mesma linha igualarem a altura */
    max-width: 100%; /* Garante que não exceda o container */
}


/* Á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(5, 1fr); /* 5 colunas para 5 BUs */
    grid-template-rows: auto; /* Altura automática baseada no conteúdo */
    gap: 10px; /* Reduzido de 12px */
    max-width: 100%; /* Garante que não exceda o grid principal */
    overflow: hidden; /* Previne vazamento */
}

/* Layout específico para os 5 cards BU - TODOS EM UMA LINHA */
#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: 5; grid-row: 1; } /* Grow */

/* 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: 12px;
    position: relative;
}

/* Botões no header dos cards - forçar estilo */
.kpi-card-header .btn-mini,
button.btn-mini {
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:2px 6px !important;
  border-radius:999px !important;
  font-size:9px !important;
  font-weight:600 !important;
  background:#222 !important;
  color:#fff !important;
  border:1px solid #222 !important;
  cursor:pointer !important;
  text-decoration:none !important;
  line-height:1 !important;
}

.kpi-card-header .btn-mini:first-of-type {
  margin-left: auto !important;
}

.kpi-card-header .btn-mini + .btn-mini {
  margin-left: 8px !important;
}

button.btn-mini:hover,
.kpi-card-header .btn-mini:hover {
  background:#111 !important;
  border-color:#111 !important;
  color:#fff !important;
}

button.btn-mini i,
.kpi-card-header .btn-mini i {
  font-size:9px !important;
}

.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: 8px;
}

.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: 200px; /* Otimizado para aproveitar melhor o espaço do widget no index */
    padding-bottom: 10px; /* Reduzido para aproveitar mais espaço */
}

/* Aumenta altura dos cards SUB-KPI para dar mais espaço aos gráficos */
.sub-kpi-grid .card-chart-container {
    min-height: 140px; /* Ainda mais espaço nos cards menores */
}

/* ===== 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 (SUPER COMPACTOS) ===== */
.sub-kpi-grid .kpi-card {
    padding: 6px; /* Reduzido de 8px */
    height: auto;
    min-height: 100%;
    overflow: visible; /* Garante que nada seja cortado */
    min-width: 0; /* Permite que os cards encolham se necessário */
    box-sizing: border-box;
}
.sub-kpi-grid .kpi-card-header {
    margin-bottom: 4px; /* Reduzido de 6px */
    gap: 4px; /* Reduzido de 6px */
}
.sub-kpi-grid .kpi-card-icon {
    width: 16px; /* Reduzido de 18px */
    height: 16px;
}
.sub-kpi-grid .kpi-card-title {
    font-size: 10px; /* Reduzido de 11px */
    font-weight: 600;
}
.sub-kpi-grid .kpi-card-metrics {
    grid-template-columns: 1fr;
    gap: 3px; /* Reduzido de 4px */
    margin-bottom: 4px; /* Reduzido de 6px */
}
.sub-kpi-grid .kpi-metric .value {
    font-size: 12px; /* Reduzido de 13px */
}
.sub-kpi-grid .kpi-metric .label {
    font-size: 7px; /* Reduzido de 8px */
    text-transform: uppercase;
}
.sub-kpi-grid .kpi-metric .percentage {
    font-size: 8px; /* Reduzido de 9px */
    padding: 1px 3px; /* Reduzido de 1px 4px */
}

/* Ajusta altura dos gráficos nos cards BU - SEM cortar */
#sub-kpi-container .card-chart-container {
    min-height: 150px; /* Aumentado de 110px para 150px */
    height: 150px; /* Altura fixa para consistência */
    padding-bottom: 25px; /* Espaço para labels rotacionados */
    overflow: visible; /* Garante que gráficos não sejam cortados */
}

/* ===== MODO VISUALIZAÇÃO (viewmode) - Cards BU menores ===== */
html.viewmode-embed .sub-kpi-grid .kpi-card {
    padding: 4px !important;
}

html.viewmode-embed .sub-kpi-grid .kpi-card-header {
    margin-bottom: 2px !important;
    gap: 3px !important;
}

html.viewmode-embed .sub-kpi-grid .kpi-card-icon {
    width: 14px !important;
    height: 14px !important;
}

html.viewmode-embed .sub-kpi-grid .kpi-card-title {
    font-size: 9px !important;
}

html.viewmode-embed .sub-kpi-grid .kpi-card-metrics {
    gap: 2px !important;
    margin-bottom: 3px !important;
}

html.viewmode-embed .sub-kpi-grid .kpi-metric .value {
    font-size: 11px !important;
}

html.viewmode-embed .sub-kpi-grid .kpi-metric .label {
    font-size: 6px !important;
}

html.viewmode-embed .sub-kpi-grid .kpi-metric .percentage {
    font-size: 7px !important;
    padding: 1px 2px !important;
}

html.viewmode-embed #sub-kpi-container .card-chart-container {
    min-height: 120px !important;
    height: 120px !important;
    padding-bottom: 20px !important;
}

html.viewmode-embed #sub-kpi-container {
    gap: 6px !important;
}