/**
 * Responsive Styles
 * 
 * Mobile-first responsive design for NewtonVotes
 * Breakpoints:
 *   - Small (mobile): < 640px
 *   - Medium (tablet): 640px - 1024px
 *   - Large (desktop): > 1024px
 */

/* ===== Mobile (< 640px) ===== */
@media (max-width: 640px) {
  /* Base Layout */
  body {
    font-size: 14px;
  }

  /* Container Padding */
  .container,
  .content-wrapper {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  /* Race Detail Layout */
  .race-detail-layout {
    padding: var(--spacing-md) !important;
    gap: var(--spacing-lg) !important;
  }

  /* Breadcrumb */
  .breadcrumb {
    font-size: 12px;
  }

  /* Typography - Scale down on mobile */
  .race-title,
  h1 {
    font-size: 28px;
  }

  .race-subtitle,
  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }

  /* Race Description */
  .race-description {
    /* No extra horizontal padding needed - use container padding */
  }

  /* Turnout Stats - Stack vertically */
  .turnout-stats {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .stat-card {
    min-width: 100%;
  }

  /* Race List */
  .race-list {
    padding-left: 0;
    padding-right: 0;
  }

  .race-section {
    margin-bottom: var(--spacing-lg);
  }

  .race-section-title {
    font-size: 18px;
  }

  .race-detail-button {
    font-size: 0; /* Hide text on mobile */
    padding: var(--spacing-xs);
    min-width: 36px;
    justify-content: center;
  }

  .race-detail-button::after {
    content: '→';
    font-size: 18px;
    display: inline-block;
  }

  /* Results Tables - FULL BLEED */
  .results-table {
    margin-left: calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    width: calc(100% + 2 * var(--spacing-md));
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .results-metadata {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .result-content {
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .result-option-name {
    font-size: var(--font-size-sm);
  }

  .result-percent,
  .result-votes {
    font-size: var(--font-size-sm);
  }

  /* Results Source */
  .results-source {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    font-size: 12px;
  }

  /* Ward Results Table - FULL BLEED with horizontal scroll */
  .ward-results-table-container {
    margin-left: calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    width: calc(100% + 2 * var(--spacing-md));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  .ward-results-table {
    width: 100%;
    min-width: 500px; /* Ensure table doesn't collapse too small */
    max-width: none;
    font-size: 13px;
    margin: var(--spacing-xl) 0;
  }

  .ward-results-table th,
  .ward-results-table td {
    padding: var(--spacing-xs) 5px;
  }

  /* Ward Results Table - Hide margin column on very small screens */
  .ward-col,
  .ward-name {
    width: 20%;
    min-width: 60px;
  }

  .margin-col {
    display: none; /* Hide margin on mobile to save space */
  }

  .ward-margin {
    display: none;
  }

  .option-col,
  .ward-option-percent {
    width: auto;
    min-width: 45px;
    font-size: 12px;
  }

  .total-col,
  .ward-total {
    width: 15%;
    min-width: 50px;
    font-size: 12px;
  }

  /* Map Container - constrain to viewport */
  .map-container {
    padding: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .map-svg {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .race-detail-sidebar {
    padding: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .map-legend {
    padding: var(--spacing-md);
  }

  .legend-label {
    width: 80px;
    font-size: 12px;
  }

  .legend-scale-labels {
    padding-left: 90px;
    font-size: 12px;
  }

  .legend-swatch {
    width: 40px;
  }

  /* Details Toggle Button */
  .details-toggle {
    /* No extra horizontal margin - use container padding */
  }
}

/* ===== Small to Medium (640px - 1024px) ===== */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Container Padding */
  .container,
  .content-wrapper {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  /* Race Detail Layout */
  .race-detail-layout {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
    gap: var(--spacing-xl) !important;
  }

  /* Typography */
  .race-title,
  h1 {
    font-size: 32px;
  }

  .race-subtitle,
  h2 {
    font-size: 24px;
  }

  /* Results Tables - FULL BLEED */
  .results-table {
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
    width: calc(100% + 2 * var(--spacing-lg));
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .results-metadata {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  /* Results Source */
  .results-source {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  /* Ward Results Table - FULL BLEED with horizontal scroll */
  .ward-results-table-container {
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
    width: calc(100% + 2 * var(--spacing-lg));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ward-results-table {
    width: 100%;
    min-width: 600px;
    max-width: none;
    margin: var(--spacing-xl) 0;
  }

  /* Show margin column on tablet */
  .margin-col,
  .ward-margin {
    display: table-cell;
  }
}

/* ===== Large (> 1024px) ===== */
@media (min-width: 1025px) {
  /* Ensure margin column is visible on desktop */
  .margin-col,
  .ward-margin {
    display: table-cell;
  }
}

/* ===== Race Detail Two-Column Layout ===== */
@media (max-width: 1200px) {
  .race-detail-layout {
    grid-template-columns: 1fr !important;
  }

  /* Keep natural order: main content first, then map */
  .race-detail-main,
  .race-detail-sidebar {
    max-width: 100%;
    min-width: 0;
  }
}

/* ===== Header Responsive ===== */
@media (max-width: 768px) {
  .header-main {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
  }

  .site-logo {
    font-size: 24px;
  }

  .header-nav {
    width: 100%;
  }

  .election-selector {
    width: 100%;
  }

  .election-selector-button {
    width: 100%;
    font-size: 14px;
    padding: var(--spacing-sm) var(--spacing-md);
    justify-content: space-between;
  }

  .election-selector-dropdown {
    left: var(--spacing-md);
    right: var(--spacing-md);
    width: auto;
  }
}

/* ===== Precinct Popup Responsive ===== */
@media (max-width: 640px) {
  .precinct-popup {
    max-width: calc(100vw - 20px);
    min-width: 180px;
    padding: var(--spacing-sm);
  }

  .popup-title {
    font-size: 14px;
  }

  .popup-metadata {
    font-size: 11px;
  }

  .popup-result-name {
    font-size: 12px;
  }

  .popup-result-percent,
  .popup-result-votes {
    font-size: 12px;
  }
}