/* Container Queries Support for GenericTable */

/* Enable container queries on the GenericTable wrapper */
.\@container {
  container-type: inline-size;
  container-name: generic-table;
}

/* Prevent horizontal scroll - make table fit container */
.\@container table {
  table-layout: auto;
  width: 100%;
}

/* Allow text to wrap in cells instead of forcing horizontal scroll */
.\@container table td,
.\@container table th {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 0; /* Force equal distribution of available space */
}


/* Responsive spacing - More breathing room on small screens */
@container generic-table (max-width: 639px) {
  /* Reduce padding on small screens but keep it breathable */
  table td, table th {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
  }
  
  /* Slightly smaller text on mobile for better fit */
  table td {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.4 !important;
  }
  
  /* Badges more compact on mobile */
  table td .inline-flex {
    font-size: 0.6875rem !important; /* 11px */
    padding: 0.25rem 0.5rem !important;
  }
}

/* Container query breakpoints matching Tailwind's defaults */

/* @sm: 640px */
@container generic-table (min-width: 640px) {
  .\@sm\:table-cell {
    display: table-cell !important;
  }
}

/* @md: 768px */
@container generic-table (min-width: 768px) {
  .\@md\:table-cell {
    display: table-cell !important;
  }
  
  /* More generous spacing on medium+ screens */
  table td, table th {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* @lg: 1024px */
@container generic-table (min-width: 1024px) {
  .\@lg\:table-cell {
    display: table-cell !important;
  }
}

/* @xl: 1280px */
@container generic-table (min-width: 1280px) {
  .\@xl\:table-cell {
    display: table-cell !important;
  }
}

/* @2xl: 1536px */
@container generic-table (min-width: 1536px) {
  .\@2xl\:table-cell {
    display: table-cell !important;
  }
}

/* Additional breathing improvements */
@container generic-table (max-width: 639px) {
  /* Add more vertical spacing between rows on mobile */
  table tbody tr {
    border-bottom-width: 2px !important;
  }
  
  /* Make header more prominent with better spacing */
  table thead th {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    font-size: 0.6875rem !important; /* 11px */
    letter-spacing: 0.05em !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */