/* AFDES Election View — tablet/laptop responsive bridge.
 * Presentation only. Keeps the approved desktop alignment and mobile selector,
 * while giving election-type buttons enough room at 601–1023px.
 */

@media (min-width: 601px) and (max-width: 1023px) {
  .election-view-bar {
    display: grid !important;
    grid-template-columns: auto minmax(92px, 132px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 7px !important;
    row-gap: 6px !important;
  }

  .election-view-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .election-cycle-select {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  .election-type-buttons {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .election-type-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 6px !important;
    font-size: clamp(.56rem, 1.25vw, .63rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .election-type-mobile {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .election-view-bar {
    display: grid !important;
    grid-template-columns: minmax(88px, 108px) minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .election-view-heading {
    min-width: 0 !important;
  }

  .election-cycle-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .election-type-buttons {
    display: none !important;
  }

  .election-type-mobile {
    display: block !important;
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 520px) {
  .election-view-bar {
    grid-template-columns: 1fr 1fr !important;
  }

  .election-view-heading {
    grid-column: 1 / -1 !important;
  }
}