/* Middle State: Condensed Table for Tablets/Small Laptops */
@media (max-width: 1465px) and (min-width: 901px) {
  /* Allow wrapping on all cells to prevent table cutting */
  .races-table td,
  .races-table th,
  .races-table .txt-nowrap {
    white-space: normal !important;
  }
  
  /* Reduce padding to maximize space */
  .races-table th.pad,
  .races-table td.pad {
    padding: var(--block-space-half) var(--inline-space-half);
  }

  /* Slightly reduce font size if needed */
  .races-table {
    font-size: var(--text-x-small);
  }

  /* Ensure Action button doesn't overflow */
  .races-table .btn {
    padding-inline: 0.5rem;
    font-size: var(--text-x-small);
  }
}

/* Mobile State: Card View */
@media (max-width: 900px) {
  .mobile-sort-bar {
    display: block;
  }

  .mobile-sort-form {
    display: grid;
    gap: var(--block-space-half);
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }

  .mobile-sort-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .mobile-sort-action {
    min-width: 6rem;
  }

  .races-table-container {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .races-table {
    display: block;
    width: 100%;
  }

  .races-table thead {
    display: none;
  }

  .races-table tbody {
    display: block;
    width: 100%;
  }

  .races-table tr {
    display: block;
    width: 100%;
    margin-block-end: var(--block-space);
    border: var(--border-size, 1px) var(--border-style, solid) var(--color-ink-lighter);
    border-radius: var(--border-radius);
    padding: var(--block-space);
    background-color: var(--color-canvas);
    box-shadow: var(--shadow);
  }

  .races-table td {
    display: flex;
    justify-content: flex-start; /* Aligns content to the left */
    align-items: center;
    gap: var(--inline-space); /* Adds space between label and value */
    padding-block: var(--block-space-half);
    padding-inline: 0;
    text-align: left;
    border-bottom: 1px solid var(--color-ink-lightest);
  }

  .races-table td:last-child {
    border-bottom: none;
  }

  .races-table td::before {
    content: attr(data-label);
    font-weight: 900;
    text-align: left;
    min-width: 100px; /* Ensures consistent alignment of values */
    margin-inline-end: var(--inline-space);
    color: var(--color-ink-dark);
    flex-shrink: 0;
  }

  /* Specific tweaks */
  .races-table td[data-label="Name"] {
    display: block;
    text-align: left;
    border-bottom: 2px solid var(--color-ink-lighter);
    margin-block-end: var(--block-space-half);
    padding-block-start: 0;
  }

  .races-table td[data-label="Name"]::before {
    display: none;
  }
  
  /* Reset utility class alignments for card view */
  .races-table td.txt-align-center,
  .races-table td.txt-align-start {
    text-align: left;
  }

  /* Handle the country flag alignment */
  .races-table td[data-label="Loc"] .flex {
    justify-content: flex-start;
  }

  /* Action button full width */
  .races-table td[data-label="Action"] {
    display: block;
    padding-block-start: var(--block-space);
    text-align: center;
  }
  
  .races-table td[data-label="Action"]::before {
    display: none;
  }

  /* Allow multiline for content */
  .races-table td > * {
    white-space: normal;
  }
  
  /* Hide details by default on mobile */
  .races-table .mobile-detail {
    display: none !important;
  }
  
  /* Show details when expanded */
  .races-table tr.expanded .mobile-detail {
    display: flex !important;
  }

  /* Ensure the toggle button is only visible on mobile */
  .races-table [data-action="click->row-toggle#toggle"] {
    display: block;
  }
}

@media (min-width: 901px) {
  .mobile-sort-bar {
    display: none;
  }

  /* Hide the toggle button on desktop */
  .races-table [data-action="click->row-toggle#toggle"] {
    display: none;
  }
}

@media (max-width: 480px) {
  .mobile-sort-form {
    grid-template-columns: 1fr;
  }
}

/* Compact Mode Styles */
.races-table.compact th.pad,
.races-table.compact td.pad {
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
}

.races-table.compact {
  font-size: var(--text-x-small);
}

/* Compact Mobile State */
@media (max-width: 900px) {
  .races-table.compact tr {
    margin-block-end: 0.25rem;
    padding: 0.25rem;
  }

  .races-table.compact td {
    padding-block: 0.1rem;
    gap: 0.25rem;
    min-height: auto;
  }
  
  .races-table.compact td[data-label="Name"] {
    margin-block-end: 0.1rem;
    padding-block-start: 0;
    border-bottom-width: 1px;
  }
  
  .races-table.compact td[data-label="Action"] {
    padding-block-start: 0.25rem;
  }
  
  /* Reduce flag size in compact mode */
  .races-table.compact .txt-large {
    font-size: 1rem;
  }
}

/* Next Edition Dialog Styles */
.next-edition-dialog {
  border: none;
  border-radius: var(--border-radius-large, 12px);
  padding: 0;
  max-width: 400px;
  width: 90vw;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  background-color: var(--color-canvas);
}

.next-edition-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.next-edition-content {
  padding: var(--block-space-double);
}

/* Header */
.next-edition-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--block-space-double);
  padding-bottom: var(--block-space);
  border-bottom: 1px solid var(--color-ink-lightest);
}

.next-edition-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--inline-space);
}

.next-edition-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--color-primary-lightest, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1));
  color: var(--color-primary);
  flex-shrink: 0;
}

.next-edition-title {
  font-size: var(--text-large);
  font-weight: 700;
  margin: 0.25rem 0 0 0;
  color: var(--color-ink);
  line-height: 1.3;
}

.next-edition-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--border-radius);
  background-color: transparent;
  color: var(--color-ink-light);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.next-edition-close:hover {
  background-color: var(--color-ink-lightest);
  color: var(--color-ink);
}

/* Details */
.next-edition-details {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
}

.next-edition-detail-item {
  display: flex;
  align-items: flex-start;
  gap: var(--inline-space);
}

.next-edition-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: var(--color-ink-lightest);
  color: var(--color-ink-light);
  flex-shrink: 0;
}

.next-edition-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-positive);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Actions */
.next-edition-actions {
  margin-top: var(--block-space-double);
  padding-top: var(--block-space);
  border-top: 1px solid var(--color-ink-lightest);
}

.next-edition-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--border-radius);
  background-color: #22c55e;
  color: #ffffff !important;
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}

.next-edition-btn:hover {
  background-color: #16a34a;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.next-edition-btn:active {
  transform: translateY(0);
}