/* Estilos Gerais */
.dash-container { display: flex; flex-direction: column; gap: 20px; margin: 20px; }

/* Filtros */
.filter-row { display: center; gap: 10px; }
.filter-object { flex: 1; max-height: 70px; background: #fff; border: 1px solid #ccc; border-radius: 6px; }
.filter-section { flex: 1; display: flex; flex-direction: column; }
.filter-title { font-size: 1.1em; margin-bottom: 6px; color: #333; }

/* KPIs */
.kpi-row { display: flex; gap: 20px; justify-content: center; }
.kpi-section { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 200px; }
.kpi-object { flex: 1; min-height: 120px; background: #fff; border: 1px solid #ccc; border-radius: 6px;}

/* Seções de Gráficos e Tabelas */
.chart-section, .table-section {
  display: flex; flex-direction: column; background: #fff; border-radius: 8px; padding: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chart-title { margin: 0 0 8px; font-size: 1.3rem; color: #333; }
.chart-description, .table-description { font-size: 0.95rem; color: #444; margin-bottom: 12px; line-height: 1.4; max-width: 800px; }
.table-controls { display: flex; gap: 8px; margin-bottom: 12px; }
.table-controls .tableSearch { flex: 1; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; }

/* Botões */
.control-btn { padding: 8px 16px; background: #0074d9; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
.control-btn:hover { background: #005fa3; }
.btn-icon { margin-right: 6px; }

/* Objetos Qlik */
.qvplaceholder, .qvobject {
  flex: 1 1 auto;
  height: 300px;
  min-width: 400px;
  margin: 45px 0 0 45px;
}

/* Container de filtros agrupado */
.combined-filter-section {
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

/* AJUSTE PRINCIPAL: Faz o objeto do cálculo ter altura automática */
.calculo-section .qvobject {
  height: auto !important;      /* Altura se ajusta ao conteúdo (a fórmula) */
  min-height: unset;           /* Remove a altura mínima herdada */
  margin: 0 !important;        /* Zera as margens internas do objeto */
  min-width: unset;            /* Remove a largura mínima herdada */
}

/* Seção dos botões dentro do container agrupado */
.route-selection-section {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

/* Dobra o tamanho da fonte do título específico */
.route-title {
  font-size: 2.2em !important;
  margin-bottom: 15px !important;
}

.concessionaria-controls {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 15px;
}

/* Aumenta o tamanho dos botões e define uma largura mínima para igualá-los */
.concessionaria-controls .btn-toggle {
  padding: 12px 24px;
  font-size: 1.1rem;
  min-width: 250px;
  text-align: center;
}

/* Estilos de estado para os botões de seleção de rota */
.btn-toggle {
  background-color: #6c757d;
  border: 1px solid #5a6268;
}
.btn-toggle:hover {
  background-color: #5a6268;
}
.btn-toggle.active {
  background-color: #0074d9;
  border: 1px solid #0074d9;
}
.btn-toggle.active:hover {
  background: #005fa3;
}

/* Responsividade */
@media (max-width: 768px) {
  body { font-size: 14px; padding: 10px; }
  .filter-row, .kpi-row { flex-direction: column; }
  .chart-section, .table-section { padding: 12px; }
  .chart-title { font-size: 1.1rem; }
  .chart-description, .table-description { font-size: 0.95rem; }
  .control-btn { font-size: 0.9rem; padding: 8px; width: auto; flex-grow: 1; }
  .table-controls { flex-direction: column; gap: 6px; }
  .table-controls input { width: 100%; }
  .qvobject { margin: 20px 0 0 0; min-width: unset; height: 250px !important; }

  .concessionaria-controls {
    flex-direction: column;
  }
  .concessionaria-controls .control-btn {
    width: 100%;
  }
}

.btnMax {
  max-width: 300px;
}

/* Botão de maximizar no canto superior direito do bloco */
.chart-section {
  position: relative;
}

.chart-section .btnMax {
  position: absolute;
  right: 16px;
  top: 16px;
  margin: 0;              /* zera margens para não “empurrar” nada */
  max-width: none;        /* opcional: remove limite se quiser */
}

/* Regra para alinhar o novo botão/link à direita */
.btn-align-right {
  /* 1. Alinhamento e layout (existentes) */
  margin-left: auto;
  min-width: 200px;
  box-sizing: border-box;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ▼▼ ADIÇÕES DE COR (NOVO) ▼▼ */
  background-color: #00913E; /* Sua nova cor de fundo */
  border-color: #00913E;     /* Igualando a cor da borda */
  color: #ffffff;            /* Garantindo que o texto (e ícone) fique branco */
}

/* Efeito 'hover' para o novo botão verde */
.btn-align-right:hover {
  background-color: #007a34; /* Um tom de verde um pouco mais escuro */
  border-color: #007a34;
  color: #ffffff;            /* Mantém o texto branco */
}

/* Em telas pequenas, deixa o botão ocupar a linha inteira acima do gráfico */
@media (max-width: 768px) {
  .chart-section .btnMax {
    position: static;
    align-self: flex-end;  /* mantém à direita dentro do fluxo */
    margin-bottom: 8px;
  }
}

/* =========================================================
   ✅ MUDANÇA 1: GRID no topo do card (desktop)
   título/descrição à esquerda + botão à direita (sem sobrepor)
   ========================================================= */
@media (min-width: 769px) {
  .chart-section {
    display: grid; /* sobrescreve o flex do card de gráfico */
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "title btn"
      "desc  btn"
      "viz   viz";
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
  }

  .chart-section > .chart-title {
    grid-area: title;
  }

  .chart-section > .chart-description {
    grid-area: desc;
  }

  .chart-section > .btnMax {
    grid-area: btn;
    position: static !important;  /* derruba o absolute do desktop */
    justify-self: end;
    align-self: start;
    margin: 0;
    max-width: 300px;
    white-space: nowrap;
    z-index: 1;
  }

  .chart-section > .qvobject,
  .chart-section > .qvplaceholder {
    grid-area: viz;
    min-width: 0; /* evita estouro horizontal dentro do grid */
  }
}

/* =========================================================
   ✅ KPIs 50% maiores (em relação a 320x160)
   ========================================================= */
.kpi-row {
  align-items: stretch;
}

/* KPI 50% maior */
.kpi-row .kpi-object {
  flex: 0 0 480px;       /* 320 * 1.5 = 480 */
  max-width: 540px;      /* 360 * 1.5 = 540 (mantém limite coerente) */
  min-height: 240px;     /* 160 * 1.5 = 240 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* O card do gráfico ao lado ganha o resto do espaço */
.kpi-row .chart-section {
  flex: 1 1 auto;
  min-width: 0;
}

/* KPI é .qvobject -> sobrescreve regras globais (300px/400px/45px) */
.kpi-row .kpi-object.qvobject,
.kpi-row .kpi-object.qvplaceholder {
  height: 240px !important;  /* 160 * 1.5 */
  min-width: 0 !important;   /* mata min-width: 400px global */
  margin: 0 !important;      /* mata margin: 45px global */
}

/* Mobile: também 50% maior */
@media (max-width: 768px) {
  .kpi-row .kpi-object {
    flex: 1 1 auto;
    max-width: none;
    min-height: 210px;        /* 140 * 1.5 = 210 */
  }
  .kpi-row .kpi-object.qvobject,
  .kpi-row .kpi-object.qvplaceholder {
    height: 210px !important; /* 140 * 1.5 */
  }
}
``