/* Responsive Tables CSS */

/* Basic responsive table styles */
.responsive-table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #2F855A rgba(0, 0, 0, 0.1);
  position: relative;
}

/* Custom scrollbars for WebKit browsers */
.responsive-table-container::-webkit-scrollbar {
  height: 6px;
}

.responsive-table-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.responsive-table-container::-webkit-scrollbar-thumb {
  background-color: #2F855A;
  border-radius: 3px;
}

/* Visual scroll indicator for mobile */
@media (max-width: 768px) {
  .responsive-table-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.05));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .responsive-table-container:not([data-scrolled="true"])::after {
    opacity: 1;
  }
}

/* Ensure tables don't overflow their containers */
table {
  width: 100%;
  border-collapse: collapse;
}

/* Add some space between table rows on mobile */
@media (max-width: 640px) {
  tr {
    margin-bottom: 0.5rem;
  }
  
  /* Enhance tap targets for mobile */
  td, th {
    padding: 0.75rem 0.5rem;
  }
  
  /* Make sure action buttons are easy to tap */
  .action-button {
    display: block;
    text-align: center;
    padding: 0.5rem;
    width: 100%;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Improve focus styles for keyboard navigation */
.table-cell:focus-within {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

/* Make the table container keyboard navigable */
.responsive-table-container:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Visible focus styles on table rows for keyboard users */
tr:focus-within {
  background-color: rgba(47, 133, 90, 0.1);
}

/* Create more space for the flavor profile bars */
.flavor-bars-container {
  max-width: 100%;
  padding-right: 1rem;
}

/* Enhanced table hover effects */
tr:hover {
  background-color: rgba(47, 133, 90, 0.05); /* Light green for hover state */
}

/* Style for the mobile indicators */
.mobile-indicators {
  display: flex;
  flex-direction: column;
  margin-top: 0.25rem;
}

@media (min-width: 640px) {
  .mobile-indicators {
    display: none;
  }
}