/* Tablet and compact desktop layout: 768px to 1180px. */
@media (min-width: 768px) and (max-width: 1180px) {
  .topbar {
    padding-inline: 14px;
  }

  .toolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "municipality municipality search search"
      "source source region uf"
      "year pmsb status status"
      "program program transfergov transfergov"
      "action action clear clear";
    padding-inline: 14px;
  }

  .filter-actions {
    justify-content: flex-end;
  }

  .map-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 35%);
  }

  .map-context-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .map-legend {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .detail-panel-body,
  .detail-panel > .detail-panel-body {
    padding: 16px;
  }

  .table-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "municipality municipality search search"
      "source source region uf"
      "year pmsb status status"
      "program program transfergov transfergov"
      "action action clear clear";
  }

  .table-filter-actions {
    width: 100%;
  }

  .table-reset-filters {
    justify-content: center;
  }

  .table-result-toolbar {
    gap: 10px;
  }

  .desktop-table-shell .dash-table-container {
    overflow-x: auto;
  }

  .desktop-table-shell .dash-table-container .column-0,
  .desktop-table-shell .dash-table-container .column-1 {
    position: sticky;
    background: var(--surface);
  }

  .desktop-table-shell .dash-table-container .column-0 {
    left: 0;
    z-index: 4;
  }

  .desktop-table-shell .dash-table-container .column-1 {
    left: 170px;
    z-index: 3;
    box-shadow: 1px 0 0 var(--border-strong);
  }

  .desktop-table-shell .dash-table-container th.column-0,
  .desktop-table-shell .dash-table-container th.column-1 {
    z-index: 6;
    background: #e8f3f8 !important;
  }

  .desktop-table-shell .dash-spreadsheet-inner tbody tr:hover td.column-0,
  .desktop-table-shell .dash-spreadsheet-inner tbody tr:hover td.column-1 {
    background: #f3f8fb !important;
  }

  .table-detail-drawer {
    width: min(450px, 58%);
  }
}

/* Tablets em paisagem mantêm os cinco indicadores em duas linhas equilibradas. */
@media (min-width: 981px) and (max-width: 1180px) {
  .metric-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .metric {
    grid-column: span 2;
  }

  .metric:nth-child(3) {
    border-right: 0;
  }

  .metric:nth-child(n + 4) {
    grid-column: span 3;
    border-top: 1px solid var(--border);
  }
}

/* Compact desktops need two stable rows for the convention-specific filters. */
@media (min-width: 1181px) and (max-width: 1400px) {
  .toolbar,
  .table-controls {
    grid-template-columns: repeat(16, minmax(0, 1fr));
    grid-template-areas:
      "municipality municipality municipality search search search source source source region region uf uf pmsb pmsb pmsb"
      "year year status status status program program program transfergov transfergov transfergov action action action clear clear";
  }

  .filter-actions,
  .table-filter-actions {
    justify-content: flex-end;
  }

  .map-context-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .map-legend {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .transfergov-program-field .Select-menu-outer,
  .action-field .Select-menu-outer {
    right: auto;
    left: 0;
  }
}

/* Portrait tablets use the same lower detail sheet as phones. */
@media (min-width: 768px) and (max-width: 980px),
  (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric:nth-child(2) {
    border-right: 0;
  }

  .metric:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .metric:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0;
  }

  .map-workspace {
    grid-template-columns: 1fr;
    position: relative;
  }

  .detail-panel {
    width: 100%;
    height: auto;
    max-height: 70%;
    position: absolute;
    inset: auto 0 0;
    z-index: 25;
    border-top: 1px solid var(--border-strong);
    border-left: 0;
    box-shadow: 0 -12px 34px rgba(23, 43, 58, 0.17);
  }

  .detail-sheet-handle {
    width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: var(--surface);
    border: 0;
    color: var(--funasa-blue-dark);
    cursor: pointer;
  }

  .sheet-grip {
    width: 28px;
    height: 4px;
    display: block;
    border-radius: 2px;
    background: var(--border-strong);
  }

  .detail-panel > .detail-panel-body {
    display: none;
  }

  .detail-panel.sheet-open > .detail-panel-body {
    display: block;
    height: auto;
    max-height: calc(70vh - 48px);
    overflow: auto;
  }
}