/*
 * Scoped to .edr-clearance-table — the DataTable container div on the
 * Document Clearance hubs (GL Ethiopia + GL Djibouti). Mirrors the portal's /bookings table
 * (bookings-table.css): content-sized columns with a 100px floor, no
 * truncation, horizontal scroll when the table outgrows the card, sticky
 * header row and a sticky shadowed action column.
 */
.edr-clearance-table {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
}

/*
 * width: max-content — the table is exactly as wide as its columns' content
 * needs, never squeezed to fit the viewport; the container scrolls instead.
 * min-width: 100% keeps it filling the card when content is narrow.
 */
.edr-clearance-table table {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}

/* 100px floor, no ceiling: cells grow to fit their text, nothing is clipped. */
.edr-clearance-table th,
.edr-clearance-table td:not([colspan]) {
  min-width: 100px;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/*
 * Mantine Badge caps itself at max-width: 100%; inside an auto-layout table
 * cell that resolves against min-content and clips the label. Let badges size
 * to their text so the column grows to fit them.
 */
.edr-clearance-table .mantine-Badge-root {
  max-width: none;
}

/*
 * Mantine Group's preventGrowOverflow caps every child at 100%/N of the cell.
 * In an auto-width table cell that resolves against min-content and collapses
 * the badges/text in the Type, Route and Status columns to nothing. Let group
 * children size to their content; the column grows and the container scrolls.
 */
.edr-clearance-table .mantine-Group-root > * {
  max-width: none;
  flex-shrink: 0;
}

/* Sticky header row. */
.edr-clearance-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/*
 * Sticky action column, shrunk to its content. The width overrides the inline
 * width DataTable stamps from tanstack's column size — hence !important.
 * `:not([colspan])` keeps the full-width error/empty rows out.
 */
.edr-clearance-table th:last-child,
.edr-clearance-table td:last-child:not([colspan]) {
  width: 1% !important;
  min-width: 0;
  position: sticky;
  right: 0;
  box-shadow: -12px 0 16px -6px rgba(16, 32, 47, 0.3);
}

/*
 * Sticky cells sit above the scrolling ones, so they need their own opaque
 * background or the columns underneath show through.
 */
.edr-clearance-table td:last-child:not([colspan]) {
  background: #f5f8fb;
  z-index: 2;
}

/* Row hover uses the tailwind `hover:bg-accent` class on the <tr>. */
.edr-clearance-table tbody tr:hover td:last-child:not([colspan]) {
  background: var(--accent, #f4fbf8);
}

/* Header cell is sticky on both axes — it must outrank the body's sticky column. */
.edr-clearance-table th:last-child {
  background: #f4f7fa;
  z-index: 3;
}