/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Shared admin data-table styling: vertical & horizontal grid lines, zebra
   striped rows, and a slightly darker header so rows are easy to scan. Apply
   by adding `admin-table` to the <table>. Rows that should opt out of the
   zebra background (e.g. an inline-edit row whose own amber highlight should
   show through) add the `admin-table-edit-row` marker class. */
.admin-table {
  border-collapse: collapse;
}

.admin-table > thead {
  background-color: rgb(241 245 249); /* slate-100 */
}

.admin-table > thead > tr > th,
.admin-table > tbody > tr > th,
.admin-table > tbody > tr > td {
  border-right: 1px solid rgb(226 232 240); /* slate-200 */
  border-bottom: 1px solid rgb(226 232 240); /* slate-200 */
}

.admin-table > thead > tr > th {
  border-bottom-color: rgb(203 213 225); /* slate-300 */
}

.admin-table > thead > tr > th:last-child,
.admin-table > tbody > tr > th:last-child,
.admin-table > tbody > tr > td:last-child {
  border-right: 0;
}

.admin-table > tbody > tr:nth-child(even):not(.admin-table-edit-row) {
  background-color: rgb(248 250 252); /* slate-50 */
}

.admin-table > tbody > tr:hover:not(.admin-table-edit-row) {
  background-color: rgb(241 245 249); /* slate-100 — wins over zebra */
}