edr-platform/apps/edr-freight-web/backoffice/src/pages/contracts/contract-clearance-table.css

/*
 * 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;
}

/*
 * Booking (col 1) and Contract (col 2) carry free-text company/contract names.
 * Cap those two columns and let their content wrap onto 2+ lines so a very long
 * name (e.g. "SHAFICI PHARMACEUTICAL MEDICAL SUPPLIES WHOLESALER PARTINERSHIP")
 * stacks inside its own cell instead of shoving the next column off-screen.
 * Everything below the header row so the header labels still sit on one line.
 */
.edr-clearance-table tbody td:not([colspan]):nth-child(1) {
  max-width: 240px;
  white-space: normal;
}
.edr-clearance-table tbody td:not([colspan]):nth-child(2) {
  max-width: 200px;
  white-space: normal;
}

/*
 * 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;
}

/*
 * Opt-out for long free text (company/customer names). The blanket nowrap rule
 * above keeps every cell on one line so columns size to content; a very long
 * name would otherwise force the column absurdly wide. Mark such text with
 * `cell-wrap` to cap it and wrap onto 2+ lines instead of pushing the layout.
 */
.edr-clearance-table .cell-wrap,
.edr-clearance-table .mantine-Group-root > .cell-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
  line-height: 1.3;
}

/*
 * 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: -10px 0 14px -8px rgba(16, 32, 47, 0.12);
}

/*
 * 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: var(--mantine-color-body);
  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: #f7fbf9;
}

/* Header cell is sticky on both axes — it must outrank the body's sticky column. */
.edr-clearance-table th:last-child {
  background: var(--mantine-color-gray-0);
  z-index: 3;
}

/* ── Design pass: flat head band, 64px rows, hairline dividers ─────────── */
.edr-clearance-table thead th {
  height: 38px;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--mantine-color-gray-0);
  border-bottom: 1px solid var(--mantine-color-edr-divider-6);
}

.edr-clearance-table tbody td:not([colspan]) {
  height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mantine-color-edr-divider-6);
}

.edr-clearance-table tbody tr:last-child td:not([colspan]) {
  border-bottom: 0;
}

.edr-clearance-table tbody tr:hover td {
  background: #f7fbf9;
}