/* Conteúdo movido de templates/downloads.html */

#geo-scope {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none;
  padding: 0;
  margin: 0 auto;
  max-width: 363px;
}

#downloads-form > div.grid-top > div:nth-child(2) > div,
#downloads-form > div.box-light.box-content-textual > div,
#downloads-form > div.box-light.box-content-textual > div > div:nth-child(2) {
  margin: 0 auto;
  width: fit-content;
}

#downloads-form > div.box-light.box-content-textual > div > label > span {
  /* font-size: 14px; */
  font-weight: 400;
  font-style: italic;
}

#geo-scope label {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

#state-options,
#municipality-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 40px;
}

#state-options > div {
  display: flex;
  flex-direction: column;
}

#reanalyze-controls,
#forecast-controls {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding-left: 40px;
}

.checkbox-row label,
.radio-row--item {
  border: solid 1px var(--sisam-color-border-ui);
  padding: 8px;
  border-radius: 4px;
  background-color: var(--sisam-color-surface-item);
  cursor: pointer;
  transition: background-color 140ms ease;
}

.checkbox-row label:hover,
.radio-row--item:hover {
  background-color: var(--sisam-color-border-soft);
}

.input-style {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid var(--sisam-color-border-ui);
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 14px;
}

/* ícones SVG dos indicadores (cor suave) */
.grid-indicators .checkbox-row label svg {
  stroke: var(--sisam-color-icon-muted);
  fill: none;
}

.box-content-textual form > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.box-content-textual label {
  display: flex;
  gap: 4px;
  font-weight: 400;
  align-items: center;
  margin-bottom: 8px;
}

.box-content-textual label > select,
.box-content-textual label > input {
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--sisam-color-border-ui);
  border-radius: 4px;
  margin-right: 6px;
}

.box-content-textual .checkbox-row {
  display: flex;
  column-gap: 18px;
  row-gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.grid-indicators > .box-light.box-content-textual:nth-child(1) .checkbox-row label {
  min-width: 110px;
}

.grid-indicators > .box-light.box-content-textual:nth-child(2) .checkbox-row label {
  min-width: 205px;
}

#downloads-form > div:nth-child(2) > div {
  display: flex;
  flex-direction: column;
  /* gap: 16px; */
}

.box-content-textual hr {
  border: none;
  border-top: 1px solid var(--sisam-border-color);
  /* margin: 12px 0; */
}

.box-content-textual h1 {
  padding-top: 0;
}

/* Linha fina abaixo do título dos boxes */
.box-light h1 {
  border-bottom: 1px solid var(--sisam-color-border-soft);
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.box-content-textual button {
  padding: 10px 36px;
  border-radius: 4px;
  border: none;
  background: var(--sisam-color-interactive-strong);
  color: var(--sisam-color-text-on-strong);
  cursor: pointer;
  margin-top: 12px;
  font-size: 16px;
}

/* evitar overflow horizontal */
.box-content-textual {
  overflow: visible;
}

/* Search dropdown styles */
.search-dropdown {
  background: var(--sisam-color-surface);
  border: 1px solid var(--sisam-color-separator);
  max-height: 280px;
  overflow-y: auto;
  box-shadow: var(--sisam-shadow-overlay-sm);
  border-radius: 4px;
}

.search-dropdown .search-item {
  font-size: 14px;
  font-weight: 400;
  padding: 8px 10px;
  cursor: pointer;
}

.search-dropdown .search-item.search-item-state {
  font-weight: 600;
}

.search-dropdown .search-item:hover {
  background: var(--sisam-color-surface-subtle);
}

#downloads-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top grid: two columns for first row (geographic + temporal) */
.grid-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 900px) {
  .grid-top {
    grid-template-columns: 1fr;
  }
}

/* Expanded grid to support two rows with two columns and a full-width row */
.grid-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.grid-main .full {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .grid-main {
    grid-template-columns: 1fr;
  }

  .grid-main .full {
    grid-column: auto;
  }
}

/* Indicators row: first column 1/3, second column 2/3 */
.grid-indicators {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

/* Indicators row: first column 1/3, second column 2/3 (layout simple e estável) */
.grid-indicators {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  align-items: stretch; /* faz as colunas ocuparem mesma altura da row */
}

@media (max-width: 900px) {
  .grid-indicators {
    grid-template-columns: 1fr;
  }
}

/* Fazer cada box agir como coluna flexível e preencher a célula do grid */
.grid-indicators > .box-light.box-content-textual {
  display: flex;
  flex-direction: column;
}

/* Faz o wrapper interno ocupar o espaço disponível para empurrar a checkbox-row */
.grid-indicators > .box-light.box-content-textual > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Permite que a linha de checkboxes ocupe o espaço vertical restante */
.box-content-textual .checkbox-row {
  flex: 1 1 auto;
  align-items: stretch;
}

.box-content-textual .checkbox-row label {
  display: flex;
  align-items: center;
  align-self: stretch;
  height: auto;
}

/* Garantir que cada box dentro da grid ocupe totalmente a célula (altura igual) */
.grid-indicators > .box-light.box-content-textual {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.box-content-textual p {
  margin-bottom: var(--spacing-16);
  text-align: center;
}

#btn-export {
  color: var(--color-btn-label);
  background-color: var(--color-btn-bg);
  border-color: var(--color-btn-bg);
}

#btn-export:hover {
  color: var(--color-btn-label--hover);
  background-color: var(--color-btn-bg--hover);
  border-color: var(--color-btn-bg--hover);
}

#btn-export:active {
  color: var(--color-btn-label--active);
  background-color: var(--color-btn-bg--active);
  border-color: var(--color-btn-bg--active);
}