/* * Scoped to .edr-booking-requests-table — the DataTable container div on the * backoffice booking-requests list only; no other DataTable is affected. * Mirrors the portal's /bookings table (bookings-table.css): horizontal * scroll on the container, a sticky header row, and a sticky/shadowed * action column — with a compact 40–60px column width band (content * beyond that is clipped with an ellipsis) instead of the portal's * content-sized columns. */ .edr-booking-requests-table { overflow-x: auto; } /* * width: max-content — the table is exactly as wide as its columns need, * never squeezed to fit the viewport; the container scrolls instead. * min-width: 100% keeps it filling the card when content is narrow. */ .edr-booking-requests-table table { table-layout: auto; width: max-content; min-width: 100%; } /* Compact column band: 40px floor, 60px ceiling, ellipsis past that. */ .edr-booking-requests-table th, .edr-booking-requests-table td:not([colspan]) { min-width: 40px; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * Full-width rows (loading skeleton / error / empty state) span every * column via colspan — leave their sizing and wrapping alone. */ .edr-booking-requests-table td[colspan] { max-width: none; white-space: normal; } /* Sticky header row. */ .edr-booking-requests-table thead th { position: sticky; top: 0; z-index: 1; } /* * Fixed, sticky action column. Overrides the inline width DataTable stamps * from tanstack's column size (`size: 140` on the actions column) — hence * !important. `:not([colspan])` keeps the full-width error/empty rows out. */ .edr-booking-requests-table th:last-child, .edr-booking-requests-table td:last-child:not([colspan]) { width: 60px !important; min-width: 60px; max-width: 60px; 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-booking-requests-table td:last-child:not([colspan]) { background: #f5f8fb; z-index: 2; } /* Row hover uses the tailwind `hover:bg-accent` class on the . */ .edr-booking-requests-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-booking-requests-table th:last-child { background: #f4f7fa; z-index: 3; }