/* Travelon admin theme — token layer over Tabler.
Dark mode is deliberately deferred: add a [data-bs-theme=dark] block
redefining ONLY these tokens. Do not hardcode colour below :root. */
:root {
/* Canvas is WHITE, not a tinted panel. A grey page with white cards on it
is the shape of a 2015 admin; the reference this follows puts content
directly on white and uses hairlines, not containers, to separate it.
--tw-surface-2 is now the navigation/inset tone rather than a card fill. */
/* Tabler's page rhythm, retuned rather than overridden. Stock is
--tblr-page-padding-y: var(--tblr-spacer-4) (~24px), which it applies as
.page-body's top AND bottom margin and .page-header's top margin — 72px
of vertical space before a table starts. Setting the variable moves all
three at once and leaves the variable telling the truth; overriding the
rules one by one would not. */
--tblr-page-padding: 8px;
--tblr-page-padding-y: 8px;
--tw-canvas: #ffffff;
--tw-surface: #ffffff;
--tw-surface-2: #f7fafc;
--tw-border: #e3e8ee;
--tw-border-strong: #d5dbe3;
--tw-border-soft: #f0f3f7;
/* Near-black rather than a blue-black, and a grey that is genuinely
readable. --tw-ink-faint is DECORATION ONLY (4.03:1 on white — chart
ticks, placeholder glyphs). Anything a person has to read uses
--tw-ink-muted at 4.78:1. */
--tw-ink: #1a1f36;
--tw-ink-2: #3c4257;
--tw-ink-muted: #697386;
--tw-ink-faint: #767f91;
/* Brand green, DARKENED. The logo's own greens cannot do this job:
#7EC242 is 2.17:1 on white and #28B34B is 2.75:1 — and because a filled
button is white-on-green, the deep one fails 2.75:1 in that direction
too. Both are unreadable as buttons, links or focus rings. So the raw
brand greens stay decorative (the logo, and the sidebar's active-nav
text where #7EC242 gets 8.14:1 against the dark), and everything
interactive uses these, which pass in both directions:
--tw-accent 5.08:1 on white AND under white
--tw-accent-ink 6.79:1 on white, 6.11:1 on --tw-accent-soft */
--tw-accent: #1B7F35;
--tw-accent-soft: #EAF6EC;
--tw-accent-ink: #17692C;
/* Status: deep ink on a pale tint, rather than a saturated fill. This is
most of why the reference reads calm while still carrying colour on
every row. All five land 6.07-6.46:1 — a tighter and higher band than
the 4.84-5.30 these replace. */
/* Success moved from green to TEAL when the accent became green. Left as
it was, "primary action" and "succeeded" would have been the same colour
family — a green Save button beside a green Paid badge, on exactly the
screens (bookings, payments) where the distinction carries money. Teal
keeps the calm ink-on-tint form and lands at 6.15:1, inside the
6.07-6.21 band the other four statuses hold. */
--tw-success: #0C6060;
--tw-success-soft: #D6F0F0;
--tw-success-ink: #0C6060;
--tw-warning: #ca8a04;
--tw-warning-soft: #fcedb9;
--tw-warning-ink: #983705;
--tw-danger: #dc2626;
--tw-danger-soft: #fde2e2;
--tw-danger-ink: #a41c1c;
--tw-neutral-soft: #f0f3f7;
--tw-neutral-ink: #4f5b6d;
/* Info: a fourth status colour so part-payment stops sharing green with
paid-in-full, in the same ink-on-tint form as the rest (6.46:1). */
--tw-info: #0284c7;
--tw-info-soft: #d6ecff;
--tw-info-ink: #0b5394;
/* Sidebar: DARK, and its own token set rather than reused content tokens.
The logo's wordmark is white — ~4,200 opaque white pixels across the
lower third of logo.png — so on the old #f7fafc sidebar the brand read
as a floating bird with half its name missing. A dark rail is what the
asset was drawn for.
Separate tokens because every one of these is measured against
--tw-sidebar, not against white; feeding --tw-ink-muted into a dark
surface would be the same class of mistake as the greens above.
ink 14.90:1 muted 7.06:1
active 10.45:1 (7.97:1 on its own fill) brand #7EC242 8.14:1 */
--tw-sidebar: #141A16;
--tw-sidebar-ink: #E8EDE9;
--tw-sidebar-muted: #B3C0B7;
--tw-sidebar-hover: #1E2A22;
--tw-sidebar-active: #1F2E1D;
--tw-sidebar-active-ink: #A9E07A;
--tw-sidebar-border: #23302A;
/* The thumb is the only sidebar surface with no line token that suits it:
--tw-sidebar-border is a 1.35:1 hairline, too faint to grab hold of.
Named here so it can never be reached for from the content palette,
which is how --tw-border-strong ended up painting it white. */
--tw-sidebar-scroll: #3A4A41;
/* The unprocessed-tickets count. Deliberately NOT --tw-danger: a queue
length is a workload, not an error, and danger is needed for things
that genuinely are. */
--tw-sidebar-badge: #2A3A2E;
--tw-sidebar-badge-ink: #C7D4CB;
/* The logo's own light green, used ONLY here and only against the dark
rail, where it measures 8.14:1. It must never appear on white. */
--tw-brand-green: #7EC242;
/* Login brand panel. A DARK-CENTRED field, not a flat gradient: the logo
and tagline sit in the middle, so the middle must stay dark enough for
white text (18:1 here) while the brand green blooms in the corners. A
flat dark-to-green gradient failed this — a tagline landed at 3.80:1 on
the bright end. */
--tw-auth-panel-base: #0E1712;
--tw-auth-panel-glow-1: rgba(126, 194, 66, .26);
--tw-auth-panel-glow-2: rgba(27, 127, 53, .40);
/* Smaller corners. 14px radii on every surface reads as a consumer app;
the reference stays at 6-8px, which is what makes dense data look
engineered rather than decorated. */
--tw-radius-card: 8px;
--tw-radius-control: 6px;
--tw-radius-nav: 6px;
--tw-control-h: 36px;
/* Type scale. Every size is a token so density stays adjustable from one
place rather than being sprinkled through component rules. */
--tw-text-base: 14px;
--tw-text-sm: 13px;
/* 12px is the floor AdminThemeTest holds this at. Reducing further is a
deliberate decision about legibility, not a styling tweak, and the test
exists to make that an explicit conversation rather than one more
reasonable-looking step. */
--tw-text-cell: 12px;
--tw-text-label: 11px;
--tw-text-micro: 10.5px;
--tw-text-h1: 30px;
/* The label column of the booking form's horizontal rows. A token rather
than a literal because the value is shared by three rules that must
agree — the label's own width, and the indent of the hint and the
validation message that sit UNDER the control, not under the label. */
--tw-field-label-w: 210px;
/* Depth is now reserved for things that genuinely float — popovers, the
pinned save bar. Content surfaces get a hairline instead. Shadows on
every card were a large part of what read as "busy": twenty soft
rectangles competing on one screen. */
--tw-shadow-raised: 0 1px 1px rgb(26 31 54 / .04);
--tw-shadow-card: none;
--tw-shadow-lift: 0 1px 1px rgb(26 31 54 / .04);
--tw-shadow-pop: 0 4px 16px rgb(26 31 54 / .16), 0 1px 3px rgb(26 31 54 / .08);
/* Motion. Durations are short enough to feel like feedback rather than
animation; the easing overshoots slightly on entry, which is what makes
a hover feel responsive instead of mechanical. Every use is wrapped by
the prefers-reduced-motion block at the foot of this file. */
--tw-motion-fast: 120ms;
--tw-motion: 180ms;
--tw-motion-slow: 320ms;
--tw-ease: cubic-bezier(.32, .72, .28, 1);
/* Brand green at the same alpha the indigo ring used. Hardcoded rgb()
rather than a token because color-mix() on a hex custom property is not
safe across the browsers this panel supports. If --tw-accent changes,
THIS LINE MUST CHANGE WITH IT — it is the one place the accent is not
read from its token. */
--tw-focus-ring: 0 0 0 3px rgb(27 127 53 / .28);
/* Placeholder text is TEXT, so AA applies: 4.5:1. Browser defaults sit
around 3:1, which is why this is set rather than inherited. #6b7587
measures 4.65:1 on white and is still far lighter than an entered value
(--tw-ink at 16.24:1), so a placeholder never reads as a filled field. */
--tw-placeholder: #6b7587;
/* Login cover panel: gradient placeholder built from existing tokens, standing
in for a licensed travel photograph. Replace this single declaration with
`url('/img/admin-login-cover.jpg')` (or similar) once a real, rights-cleared
image is available — no other file needs to change. */
--tw-auth-cover: linear-gradient(135deg, var(--tw-ink) 0%, var(--tw-accent-ink) 55%, var(--tw-accent) 100%);
/* Button foregrounds vary by background to ensure WCAG AA contrast on 13px
text. Warning (#ca8a04) is light enough that white fails at 2.94:1, so it
keeps dark ink.
Success FLIPPED to white when it became teal. On the old #059669 fill,
white was 3.77:1 and dark ink was the fix. On #0C6060 that reverses hard:
dark ink is 2.43:1 — worse than the problem it was introduced to solve —
while white is 7.35:1. Re-derive this pairing whenever a fill changes;
it is not a preference, it is a measurement. */
--tw-btn-fg-on-accent: #ffffff;
--tw-btn-fg-on-success: #ffffff;
--tw-btn-fg-on-warning: #0f172a;
--tw-btn-fg-on-danger: #ffffff;
/* Bridge into Tabler so untouched CRUD screens inherit. */
--tblr-body-bg: var(--tw-canvas);
--tblr-body-color: var(--tw-ink);
--tblr-primary: var(--tw-accent);
--tblr-border-color: var(--tw-border);
--tblr-border-radius: var(--tw-radius-control);
--tblr-secondary: var(--tw-ink-muted);
--tblr-success: var(--tw-success);
--tblr-warning: var(--tw-warning);
--tblr-danger: var(--tw-danger);
--tblr-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
/* Button foregrounds, via Tabler's own token rather than a `color`
declaration. tabler.min.css wires .btn-VARIANT's --tblr-btn-color,
--tblr-btn-hover-color, --tblr-btn-active-color AND
--tblr-btn-disabled-color all to var(--tblr-VARIANT-fg) — one token
drives every state. Setting `color` inside .btn-success instead would
fix only the base state: `.btn:hover { color: var(--tblr-btn-hover-color) }`
has specificity (0,2,0) and beats .btn-success's (0,1,0) in every
browser regardless of source order. Redefining the token means that
hover rule still wins the property but now resolves to OUR value.
Tabler's default for all four is var(--tblr-light) — near-white, which
fails AA on success (3.77:1) and warning (2.94:1). */
--tblr-primary-fg: var(--tw-btn-fg-on-accent);
--tblr-success-fg: var(--tw-btn-fg-on-success);
--tblr-warning-fg: var(--tw-btn-fg-on-warning);
--tblr-danger-fg: var(--tw-btn-fg-on-danger);
/* Hover/active background. Tabler's stock formula is
`color-mix(in oklab, var(--tblr-VARIANT), transparent 20%)` — it
LIGHTENS toward whatever is behind the button (our near-white canvas).
For the two variants carrying a white foreground that pushes contrast
below AA: primary 6.29 -> 4.03:1, danger 4.83 -> 3.35:1. Mixing 12%
toward black instead restores it (primary 8.08:1, danger 6.43:1) and
still reads as a darker, pressed state.
success/warning are deliberately absent: they pair a DARK foreground
(--tw-ink), so Tabler's lightening only improves them (6.41:1 and
7.76:1 respectively). Overriding those would make hover darker than
the base state for no contrast gain.
The literal hex on the first line of each pair is a fallback for
engines without color-mix() (Safari < 16.2): without it the invalid
declaration is dropped and the button falls back to Tabler's OWN
darken value, which is computed from Tabler's stock blue — a blue
hover on an indigo button. Tabler ships the same two-line pattern for
the same reason. Both values are inside :root, where literals are
allowed; they are the 12%-black mixes of --tw-accent and --tw-danger. */
--tblr-primary-darken: #413ac1;
--tblr-primary-darken: color-mix(in oklab, var(--tblr-primary), black 12%);
--tblr-danger-darken: #b91e1e;
--tblr-danger-darken: color-mix(in oklab, var(--tblr-danger), black 12%);
}
[data-bs-theme="light"],
[data-menu-theme="light"] {
--tblr-bg-surface: var(--tw-surface);
--tblr-bg-surface-tertiary: var(--tw-surface-2);
--tblr-bg-surface-backdrop: none;
--tblr-bg-surface-border: 1px solid var(--tw-border);
--tblr-bg-surface-shadow: none;
}
body {
background: var(--tw-canvas) !important;
background-image: none !important;
font-size: var(--tw-text-base);
-webkit-font-smoothing: antialiased;
}
/* ---- The content area ----
Full width by choice: these are operational screens whose tables carry ten
or more columns, and capping the measure pushed columns out of the layout
on exactly the screens that need them. The gutters still keep content off
the window edge, which is what the cap was really there to fix.
`container-xxl`, not `container-xl`: layouts/vertical.blade.php emits
`container-fluid` when options.useFluidContainers is true and
`container-xxl` when it is false. `.container-xl` was in this list and is
neither, so it matched nothing in either state — and would have kept
matching nothing on the day someone flipped the flag.
Gutters cut from 32px to 14px on 20 August 2026: at eleven columns the
32px each side was 64px that the table wanted more than the margin did. */
.page-body > .container-fluid,
.page-body > .container-xxl,
.page-header > .container-fluid,
.page-header > .container-xxl,
.header-operation.container-fluid {
max-width: none;
padding-left: 8px;
padding-right: 8px;
}
/* ---- Cards: a hairline, not a container ----
Boxes inside boxes inside boxes is what made the panel read as busy: a card
with a shadow, holding a bordered table, holding pills. A card now marks a
boundary and nothing more — no shadow, no fill, one hairline. */
.card {
border: 1px solid var(--tw-border);
border-radius: var(--tw-radius-card);
box-shadow: none;
}
.card-header {
border-bottom: 1px solid var(--tw-border);
font-size: 16px;
font-weight: 600;
color: var(--tw-ink);
background: transparent;
letter-spacing: -.01em;
padding: 15px 18px;
}
/* ---- Page headings ---- */
/* The jump from this to the metadata beneath it is where the page gets its
hierarchy — and its absence is why the old design read as flat: everything
sat within a few points of everything else.
`.page-body` is in the selector to beat theme-tabler's own
`.page-body .container-fluid h2 { font-size: 27px; font-weight: 400 }`
(style.css), which is (0,2,1) against the (0,1,1) this rule used to carry.
That vendor rule had been winning on EVERY page title in the panel, so the
heading size declared here has never once applied. Matching its specificity
is enough, since admin-theme.css is the last stylesheet in the document. */
.page-body .header-operation h1,
.page-body .header-operation h2,
.page-body .container-fluid h2.tw-title,
.header-operation h2,
h1.page-title {
font-size: var(--tw-text-h1);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.15;
color: var(--tw-ink);
}
/* Focus is visible on every interactive element. Tabler's default relies on
Bootstrap's box-shadow, which our card/control rules overwrite — leaving
keyboard users with no indicator at all on the very controls we restyled. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid transparent;
box-shadow: var(--tw-focus-ring);
border-radius: var(--tw-radius-nav);
}
.form-control:focus,
.form-select:focus {
border-color: var(--tw-accent);
box-shadow: var(--tw-focus-ring);
}
/* ---- Tables ---- */
/* Vertical padding is generous, horizontal is not, and that asymmetry is
deliberate. Roomier rows are most of what makes a table feel current, but
horizontal padding is what decides whether the columns fit: at 16px each
side this table outgrew a 1500px viewport, DataTables Responsive collapsed
Date of Excursion, Date Booked and Language behind a ⋮ expander, and a
bookings list silently lost its dates. Breathing room is worth less than the
data. */
.table td,
.table th {
/* Tightened again on 20 August 2026 from 12px/11px and a 1.5 line: the
reference these lists are being matched to runs ~39px rows, and at
13.5px on 12px of padding this table was at ~44px. Now ~34px. */
/* Tightened again 1 Sep 2026, 6px/9px -> 4px/8px. Rows go 39px -> ~35px,
which over a 25-row page is a hundred pixels of scrolling saved. Cells
wrap now, so vertical padding is no longer the only thing keeping rows
apart — the line box does some of that work. */
padding: 4px 8px !important;
font-size: var(--tw-text-cell) !important;
line-height: 1.45 !important;
vertical-align: middle !important;
}
/* The first and last cells keep the edge inset the rest give up. */
.table td:first-child,
.table th:first-child { padding-left: 10px !important; }
.table td:last-child,
.table th:last-child { padding-right: 10px !important; }
/* ---- Tables: one line per cell ---- */
/* CELLS DO NOT WRAP. Decided 1 Sep 2026 after seeing both measured side by side
on the bookings list:
wrapping 46px rows, 464px per page, table narrows to fit
nowrap 35px rows, 350px per page, table demands 1410px at any width
Shorter rows won. The cost is real and worth stating: a cell that cannot wrap
cannot narrow, so a wide table overflows and DataTables Responsive hides the
overflowing columns behind the ⋮ expander. The padding note above records that
happening before — a bookings list "silently lost its dates". Anyone widening
a list, or adding a long column to one, should check what falls off the end.
The rule is still declared rather than simply deleted: it also cancels the
`white-space: normal` that Bootstrap's .table sets, so removing it would not
give the same result.
!important and the doubled selector are both needed: DataTables ships
`table.dataTable.nowrap th/td`, one element selector more specific than
`.table.nowrap td`, and silently wins otherwise. */
table.dataTable.nowrap th,
table.dataTable.nowrap td,
.table.nowrap th,
.table.nowrap td { white-space: nowrap !important; }
/* Controls are the exception — an action button split across two lines reads as
two broken buttons. Applies wherever they appear, not just the last column. */
.table td .btn,
.table td .badge,
.table th .btn { white-space: nowrap; }
/* Header labels wrap like cells do. DataTables sizes each column to the wider
of its heading and its content, so a long heading sets the floor: "Product
ID" plus the select-all checkbox plus two sort arrows held that column at
195px to display "5,155". A heading that can take two lines stops deciding
the width of the data underneath it. */
.crud-table thead .dt-column-title,
.crud-table thead th { white-space: normal !important; }
/* Identifier columns hug their content. `width: 1%` under auto layout means
"as narrow as the content allows" — the browser gives the surplus to the
columns that want it instead of spreading it evenly.
EXACT attribute matches only. The rule set this replaces used substrings
(`*="product"`), which on the Products list matched product_name,
product_location, product_supplier_id AND product_status_id — handing
"Destination", holding "Lanzarote", the same 302px as a 48-character product
name. A substring match across thirty independently-named lists will always
hit something it was not aimed at. */
.crud-table th[data-column-name="id"],
.crud-table th[data-column-name="product_id"],
.crud-table th[data-column-name="booking_id"],
.crud-table th[data-column-name="transaction_id"] {
width: 1%;
/* Exempt from the wrapping heading rule above. `width: 1%` alone shrank
this to 64px — narrower than its own heading, so "Product ID" broke onto
two lines to fit a column holding "5,155". The column now hugs the wider
of the value and the heading kept on ONE line, which for an id is the
heading. */
white-space: nowrap !important;
}
.crud-table th[data-column-name="id"] .dt-column-title,
.crud-table th[data-column-name="product_id"] .dt-column-title,
.crud-table th[data-column-name="booking_id"] .dt-column-title,
.crud-table th[data-column-name="transaction_id"] .dt-column-title { white-space: nowrap !important; }
/* Whatever still will not fit scrolls the TABLE. The page itself must never
scroll sideways: a horizontal scrollbar on hides the sidebar and the
topbar controls along with it. */
/* 2.x class name only. `.dataTables_wrapper` is the retired 1.x prefix, and
AdminThemeTest fails the whole file if one appears — copy-paste from an old
answer is exactly how it would get back in. */
.dt-container { overflow-x: auto; }
@media (max-width: 575.98px) {
/* The search box shares its row with the filter navbar on a desktop; on a
phone that row has no slack, so it takes a line of its own. */
.datatable_search_stack { width: 100% !important; }
.table td, .table th { font-size: calc(var(--tw-text-cell) - 0.5px) !important; }
}
/* EVEN COLUMNS. Asked for on 20 August 2026 against a v1 screenshot: every
column the same width, filling the table, rather than each sized to whatever
it happens to contain.
`table-layout: fixed` is what does it — the browser stops measuring content
and divides the width by the column count. It only survives because Backpack
initialises DataTables with `autoWidth: false`
(datatable_logic.blade.php:308); with autoWidth on, DataTables measures the
content and writes an inline width onto every | , and inline styles beat
this file on every render.
This replaces a 210px cap that existed for the opposite reason — to stop one
long value starving the others. An even split solves that case by
construction: Quote Id, the 32-character string that once claimed 297px and
pushed the date columns out of the bookings list, now gets exactly the same
share as everything else. */
/* SUPERSEDED 1 September 2026 — columns size to their content again.
The even split above was the right answer while cells could not wrap: a long
value then forced a wide column, so dividing the width evenly was the only
way to stop one field starving the rest. Cells wrap now (see the nowrap
override earlier in this file), which removes that constraint — a long value
takes two lines instead of taking another column's width.
What the even split cost, and why it was raised: on Products, "Destination"
holds "Lanzarote" and was given 376px, the identical share as "Product Name"
at 33 characters. Every column the same width means every column is wrong
except by accident.
`auto` measures content again. The starvation case the 210px cap once
guarded against is handled by wrapping plus the max-width below, rather than
by refusing to measure anything. */
.crud-table {
table-layout: auto;
width: 100%;
}
/* No single column may take more than a third of the table. Wrapping means a
long value costs height rather than another column's width, and this caps
how much width it can claim before it starts wrapping. */
.crud-table td,
.crud-table th { max-width: 33%; }
/* NO first-child width, deliberately — and this is the second time that
conclusion has been reached.
Bulk select does not add a checkbox column. Backpack renders the select-all
checkbox INSIDE the existing first column: measured in the browser on the
payments list, column 0 is data-column-name="transaction_id" and contains
the checkbox. A 3% pin here was therefore squeezing a real data column to
49px on every list that took bulk select — "Transaction Id" had no room to
render at all.
If anything the first column now needs MORE room, not less, since it carries
a control as well as its value. */
/* PER-COLUMN WIDTH HINTS — REMOVED 1 September 2026.
They existed to compensate for `table-layout: fixed`: with the browser
refusing to measure content, each column had to be told its share by hand.
Auto layout measures again, so the hints are not just redundant, they are
wrong — and one was actively harmful.
`th[data-column-name*="product"] { width: 23% }` was written for the bookings
list, where exactly one column matches. On Products FOUR do — product_name,
product_location, product_supplier_id, product_status_id — so "Destination"
(holding "Lanzarote") was handed the same 302px as a 33-character product
name. That is the report this removal answers.
A substring match across 30 lists whose columns are named independently was
always going to hit something it was not aimed at. Nothing replaces these:
content decides, and the max-width above caps the outlier. */
/* Only the actions column is pinned. Three buttons in a 1/11th share would
be clipped, and a clipped button is worse than a narrow column.
The FIRST column is deliberately NOT pinned, though the v1 reference shows a
narrow checkbox cell there. v2 renders no bulk-select column at all — bulk
delete and bulk clone are backpack/pro operations and pro is not installed,
so no controller registers them. Verified in the rendered markup: the first
cell of the bookings list is "Booking Ref", not a checkbox. Pinning
:first-child to a checkbox width would have crushed the first DATA column of
all 26 lists. */
/* 11%, re-measured after the archive icon was removed and the gap cut to 1px.
Counted off the datatable response rather than assumed: an ordinary row
renders Preview, Edit, Delete and "Email the ticket" — four — with Restore
as a fifth on an archived row. Five at 26px with 1px between and 18px of
cell padding needs 152px; 11% is ~154px on a 1400px table.
Was 14% when the row still carried six buttons. The three points released
went to Product, which is the column that wanted them. */
.crud-table th:last-child,
.crud-table td:last-child { width: 9%; }
/* And never clipped. Every other cell hides its overflow and ellipsises; a
button cannot be ellipsised, and half a button is not a control. If the
viewport ever narrows past what the 14% holds, the buttons spill rather
than being sliced. */
.crud-table td:last-child {
overflow: visible;
}
/* With a fixed layout a cell can no longer widen to fit, so anything too long
is cut with an ellipsis rather than wrapped — wrapping would give each row a
different height and lose the even rhythm the reference has. */
.crud-table td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The header and footer have to agree with the body. They carry nowrap and,
before this, no overflow rule at all — so a label wider than its column
painted straight over its neighbour rather than being cut. "Booking Ref" is
~62px at 11.5px and its column was ~56px, so it crossed into Customer. */
.crud-table > thead > tr > th,
.crud-table > tfoot > tr > th {
overflow: hidden;
text-overflow: ellipsis;
}
/* Sticky header: on a 10-row table it barely matters, but "entries per page"
goes to 100, and scrolling a long list with the column names gone is the
single most common way a dense table becomes unreadable. */
/* Sentence case at body size, not shouted small-caps on a grey band. The
header is a label for the column, not a section of its own. */
.table thead th {
font-size: 11.5px !important;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
color: var(--tw-ink-muted);
white-space: nowrap;
background: var(--tw-surface);
border-bottom: 1px solid var(--tw-border);
position: sticky;
top: 0;
z-index: 2;
}
/* The same, at a specificity that beats DataTables.
DataTables 2.x ships `table.dataTable > thead > tr > th { position: relative }`
so it can absolutely position the sort arrow. That selector is (0,1,4); the
rule above is (0,1,2), so it lost — but ONLY on sortable columns, because the
rule only targets those. Measured on the Permissions list: "Permission" and
"Guard" computed `relative` while "Held by", "Used in code" and "Actions"
computed `sticky`. Two of five cells pinning is worse than none pinning.
Sticky is still a positioned ancestor, so the sort arrow is unaffected. */
table.dataTable.crud-table > thead > tr > th {
position: sticky;
top: 0;
z-index: 2;
}
/* A hairline between columns. The reference draws one, and across ten columns
of dates and identifiers it is what lets the eye stay on a row — the
argument for leaving them out (a list reads lighter than a grid) holds for
four columns and stops holding at ten. Soft rather than the full border
token, so the vertical lines stay quieter than the header rule. */
.crud-table > thead > tr > th,
.crud-table > tbody > tr > td,
.crud-table > tfoot > tr > th {
border-right: 1px solid var(--tw-border-soft);
}
/* Not on the outer edge, where it reads as a stray border rather than a
divider between two things. */
.crud-table > thead > tr > th:last-child,
.crud-table > tbody > tr > td:last-child,
.crud-table > tfoot > tr > th:last-child {
border-right: 0;
}
.table > :not(caption) > * > * {
box-shadow: none;
/* Row rules are lighter than structural borders, so a long table reads as
a list rather than a grid. */
border-bottom: 1px solid var(--tw-border-soft);
color: var(--tw-ink-2);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
background: transparent;
}
/* Hover marks the row with an accent edge as well as a tint, so the row under
the cursor is identifiable without relying on a colour difference this
subtle being perceivable. */
.table tbody tr {
transition: background var(--tw-motion-fast) var(--tw-ease);
}
.table tbody tr:hover > * {
background: #fafbfc;
}
/* No accent bar on hover: a whole-row tint is enough, and the bar was a
second signal for the same thing. */
/* Digits line up in a column. Applied to EVERY cell rather than to named
ones: the three `td[data-column-name=...]` selectors this replaces matched
nothing at all. The attribute is on the | only — | arrives from
DataTables over AJAX, so body cells carry no column identity — and these
rules named `td`. Tabular figures are harmless on text, so the blunt version
is the one that actually works. */
.table td,
.table td.text-end,
.table th.text-end {
font-variant-numeric: tabular-nums;
}
/* DataTables types each column by sampling its data and ships
`td.dt-type-numeric, td.dt-type-date { text-align: right }`. That singled
out Booking Ref — a bare integer, so typed numeric — and right-aligned it
alone, while Amount rendered "€99.00", sampled as a string and stayed left.
The one column worth right-aligning was not, and an identifier nobody sums
was.
Right alignment earns its place on quantities you compare down a column. An
id is a label. Rather than chase DataTables' guess per column, the automatic
alignment is switched off and everything reads from the same left edge.
Amount is deliberately NOT excepted here: body cells have no column identity
to target, so making it right-aligned needs a class added at the controller,
not a selector in this file. */
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
text-align: left;
}
/* ---- Row actions ----
Five unlabelled 11px icons in a row is the least understandable thing on the
list screen: nothing says which is which until you hover, and the targets
are below the 24px minimum that makes them comfortably clickable. Give them
real hit areas, a hover state that names the affordance, and a tooltip
driven by the title attribute Backpack already emits. */
.table td .btn,
.table td a.btn {
display: inline-flex;
align-items: center;
justify-content: center;
/* 26px, down from 30px. The box, not the text, is what set the row
height on every list — a 30px button under 8px of cell padding made a
46px row regardless of how small the type got. Kept at 26 rather than
taken lower: 24px is the floor at which these become uncomfortable to
hit, and AdminThemeTest holds it there. */
width: 26px;
height: 26px;
min-height: 26px;
padding: 0;
/* The glyph grows as the box shrinks. What made these hard to read was
never the button size, it was a 13px icon floating in a 30px box.
Raised to 17px on request, then settled back to 15px: 17 filled the
26px box to within ~4.5px a side, which read as heavy once five and six
buttons sat together in one cell. 15px keeps the glyph clearly bigger
than the 13px it started at without crowding its neighbours. */
font-size: 15px;
line-height: 1;
border-radius: var(--tw-radius-nav);
color: var(--tw-ink-muted);
transition: background var(--tw-motion-fast) var(--tw-ease),
color var(--tw-motion-fast) var(--tw-ease),
transform var(--tw-motion-fast) var(--tw-ease);
}
.table td .btn:hover,
.table td a.btn:hover {
background: var(--tw-surface-2);
color: var(--tw-accent);
transform: translateY(-1px);
}
.table td a.btn.text-danger:hover {
background: var(--tw-danger-soft);
color: var(--tw-danger-ink);
}
/* 1px, down from 2px. With four icons in a cell the gap is doing less work
than the width it costs, and each button already carries 26px of its own
box to separate the glyphs. */
.table td .btn + .btn { margin-left: 1px; }
/* The actions column is the one place a row should not read as clickable. */
.table td:last-child { white-space: nowrap; }
/* ---- List page header ----
Backpack renders the title and the record count as siblings on one baseline
(`Bookings
Showing 1 to 10 of 2,295 entries.
`), so the count
sat at nearly the title's weight and the two competed. Stacking them puts
the count where metadata belongs — underneath, quieter — which is the same
jump the dashboard uses. */
.header-operation.datatable-header {
flex-direction: column;
align-items: flex-start !important;
gap: 3px;
/* 10px -> 6px. Measured 1 Sep 2026: 186px sat above the first data row —
a 58px title band, an 82px toolbar row and their margins. The table is
what the screen is for; the furniture above it was taking a fifth of a
1000px viewport before anything was shown. */
margin-bottom: 6px !important;
}
.header-operation.datatable-header > p {
margin-left: 0 !important;
font-size: 13px;
color: var(--tw-ink-muted);
}
.header-operation h1 { text-transform: none !important; }
/* The record count, once admin-ui.js has moved it below the pager. Backpack
renders it into the page header beside the