/* ==========================================================================
   TransferRide portal - reservations list + edit reservation
   Ported from the "TransferRide Admin - Reservations" design project
   (admin-res.css).

   Depends on tr-portal.css for the --trp-* tokens, .trp-btn and .pill.

   Production adaptations vs. the design file:
   - Scoped under .tr-portal, a-* renamed trp-*; see the tr-portal.css header.
   - No KPI tile row, no Export CSV, no "Saved views", no activity feed and no
     "Export selection" in the bulk bar: nothing in the plugin backs them, and a
     control that does nothing is worse than an absent one.
   - The table gets a horizontal scroll container instead of the design's fixed
     1440 frame, and collapses to stacked cards under 900px. The design was
     drawn desktop-only; dispatchers open this on a phone.
   - Edit-screen fields keep the .tr-input class alongside the design's .fld so
     the email-suggestion behaviour in transfer-ride-core-public.js:132 keeps
     working. That class carries `border: 1px solid #d8d8d8 !important` from
     transfer-ride-core-public.css:184, so the border here needs !important too;
     specificity alone cannot win against it.
   ========================================================================== */

/* ==========================================================================
   Panel
   ========================================================================== */

.tr-portal .trp-panel {
	background: var(--trp-surface);
	border: 1px solid var(--trp-line);
	border-radius: var(--trp-r-lg);
	box-shadow: var(--trp-sh-1);
	overflow: hidden;
}

.tr-portal .trp-panel.is-busy {
	opacity: .55;
	pointer-events: none;
	transition: opacity 120ms ease;
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.tr-portal .trp-tabs {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--trp-line-2);
	flex-wrap: wrap;
}

.tr-portal .trp-tab {
	border: 0;
	background: none;
	height: 34px;
	padding: 0 12px;
	border-radius: 9px;
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	color: var(--trp-muted);
	display: inline-flex;
	gap: 7px;
	align-items: center;
	cursor: pointer;
}

.tr-portal .trp-tab .n {
	font-size: 11px;
	font-weight: 800;
	background: var(--trp-line-2);
	color: var(--trp-ink-2);
	border-radius: 20px;
	padding: 2px 7px;
	font-variant-numeric: tabular-nums;
}

.tr-portal .trp-tab.on {
	background: var(--trp-blue-050);
	color: var(--trp-blue-800);
}

.tr-portal .trp-tab.on .n {
	background: #fff;
	color: var(--trp-blue-700);
}

/* ==========================================================================
   Filter bar
   ========================================================================== */

.tr-portal .trp-fbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 12px 16px;
	border-bottom: 1px solid var(--trp-line-2);
	background: #fbfcfd;
}

/* Elementor's kit styles every form control in the page:

     .elementor-kit-15 input:not([type="button"]):not([type="submit"])
       { width: 100%; padding: 15px; border: 2px solid; border-radius: 15px; … }   (0,3,1)
     .elementor-kit-15 input:focus:not([type="button"]):not([type="submit"])        (0,4,1)

   A plain `.tr-portal .trp-in` is (0,2,0) and loses to both, which is what put
   every date box and select on its own full-width row instead of in the bar.
   Mirroring the kit's own shape under the doubled root lands the idle rule at
   (0,5,1) and the focus rule at (0,6,1). tr-search.css:114 documents the same
   collision - do not collapse the doubled class or the selector back down. */
.tr-portal.tr-portal .trp-fbar .trp-in,
.tr-portal.tr-portal .trp-fbar input:not([type="button"]):not([type="submit"]),
.tr-portal.tr-portal .trp-fbar select {
	height: 38px;
	min-height: 0;
	border: 1.5px solid var(--trp-line);
	border-radius: var(--trp-r-sm);
	background: #fff;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--trp-ink);
	padding: 0 10px;
	margin: 0;
	width: auto;
	max-width: 100%;
	line-height: normal;
	box-shadow: none;
}

.tr-portal.tr-portal .trp-fbar .trp-in:focus,
.tr-portal.tr-portal .trp-fbar input:focus:not([type="button"]):not([type="submit"]),
.tr-portal.tr-portal .trp-fbar select:focus {
	outline: 0;
	border: 1.5px solid var(--trp-blue-600);
	box-shadow: 0 0 0 3px rgba(8, 121, 186, .14);
}

/* Explicit track widths. Without them the date inputs size to their intrinsic
   content and the three selects to their longest option, which at partner names
   like "Marko Babic — Kvarner Ride" is most of the bar. */
.tr-portal.tr-portal .trp-fbar input[type="date"] {
	flex: 0 0 auto;
	width: 148px;
}

.tr-portal.tr-portal .trp-fbar select {
	flex: 0 1 auto;
	width: auto;
	min-width: 132px;
	max-width: 200px;
}

/* Label, both dates and the arrow travel together, so the range never wraps
   into "TRAVEL DATE" on one line and its own inputs on the next two. */
.tr-portal .trp-daterange {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.tr-portal .trp-search {
	flex: 1;
	min-width: 200px;
	max-width: 300px;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	border: 1.5px solid var(--trp-line);
	border-radius: var(--trp-r-sm);
	background: #fff;
	padding: 0 11px;
	color: var(--trp-muted);
}

.tr-portal .trp-search:focus-within {
	border-color: var(--trp-blue-600);
	box-shadow: 0 0 0 3px rgba(8, 121, 186, .14);
}

/* Same kit collision as .trp-in above: this input sits inside its own bordered
   shell, so it has to be stripped back to nothing at a weight that clears
   (0,4,1) or it draws a second 2px border and 15px of padding inside the first. */
.tr-portal.tr-portal .trp-search input:not([type="button"]):not([type="submit"]),
.tr-portal.tr-portal .trp-search input:focus:not([type="button"]):not([type="submit"]) {
	border: 0;
	outline: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	width: 100%;
	min-width: 0;
	background: none;
	color: var(--trp-ink);
	padding: 0;
	margin: 0;
	height: 100%;
	min-height: 0;
	border-radius: 0;
	box-shadow: none;
	line-height: normal;
}

/* Safari renders type=search with a rounded native shell and an inner cancel
   button that sits on top of the shell's own border. */
.tr-portal.tr-portal .trp-search input[type="search"] {
	appearance: none;
	-webkit-appearance: none;
}

.tr-portal .trp-search input::placeholder {
	color: #9bafba;
	font-weight: 600;
}

.tr-portal .trp-search svg {
	flex: 0 0 14px;
}

.tr-portal .trp-dash {
	color: var(--trp-muted);
	font-size: 12px;
	font-weight: 800;
}

.tr-portal .trp-lbl {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--trp-muted);
	margin-left: 6px;
}

.tr-portal .trp-clear {
	background: none;
	border: 0;
	font: inherit;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--trp-blue-700);
	margin-left: auto;
	cursor: pointer;
	padding: 0;
}

/* ==========================================================================
   Result count + active filter chips
   ========================================================================== */

.tr-portal .trp-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--trp-muted);
	border-bottom: 1px solid var(--trp-line-2);
	flex-wrap: wrap;
}

.tr-portal .trp-meta b {
	color: var(--trp-ink);
}

.tr-portal .trp-chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.tr-portal .trp-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--trp-blue-050);
	color: var(--trp-blue-800);
	border-radius: 8px;
	padding: 5px 9px;
	font-size: 11.5px;
	font-weight: 800;
}

.tr-portal .trp-chip button {
	border: 0;
	background: none;
	color: var(--trp-blue-700);
	font-size: 13px;
	font-weight: 800;
	padding: 0;
	line-height: 1;
	cursor: pointer;
}

/* ==========================================================================
   Bulk bar
   ========================================================================== */

.tr-portal .trp-bulk {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	background: var(--trp-blue-900);
	color: #fff;
	flex-wrap: wrap;
}

.tr-portal .trp-bulk[hidden] {
	display: none;
}

.tr-portal .trp-bulk b {
	font-size: 13px;
	font-weight: 800;
}

.tr-portal .trp-bulk .bb {
	background: rgba(255, 255, 255, .15);
	border: 0;
	color: #fff;
	height: 32px;
	padding: 0 12px;
	border-radius: 8px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 800;
	cursor: pointer;
}

.tr-portal .trp-bulk .bb:hover {
	background: rgba(255, 255, 255, .24);
}

.tr-portal .trp-bulk .bb:disabled {
	opacity: .45;
	cursor: default;
}

.tr-portal .trp-bulk-select {
	height: 32px;
	border-radius: 8px;
	border: 0;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font: inherit;
	font-size: 12.5px;
	font-weight: 800;
	padding: 0 8px;
	max-width: 230px;
}

/* The options themselves render in the OS palette, so they need dark text. */
.tr-portal .trp-bulk-select option {
	color: var(--trp-ink);
	background: #fff;
}

.tr-portal .trp-bulk .x {
	margin-left: auto;
	background: none;
	border: 0;
	color: #bcd8e8;
	font: inherit;
	font-size: 12.5px;
	font-weight: 800;
	cursor: pointer;
}

/* ==========================================================================
   Table
   ========================================================================== */

.tr-portal .trp-tablewrap {
	overflow-x: auto;
}

/* 940px, not the design's 1440 frame: with the route cell capped this is what
   the nine columns actually need, and it fits inside the content area next to a
   236px rail on a 1280px screen without a scrollbar. Wider screens get the
   columns' natural widths because the table is still width:100%. */
.tr-portal .trp-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 940px;
}

.tr-portal .trp-table th {
	text-align: left;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--trp-muted);
	padding: 11px 14px;
	border-bottom: 1px solid var(--trp-line);
	white-space: nowrap;
	background: #fff;
}

.tr-portal .trp-table th.s {
	cursor: pointer;
	user-select: none;
}

.tr-portal .trp-table th.s:hover {
	color: var(--trp-blue-700);
}

.tr-portal .trp-table th .ar {
	margin-left: 5px;
	font-size: 9px;
	color: #c7d5dd;
}

.tr-portal .trp-table th.act {
	color: var(--trp-blue-800);
}

.tr-portal .trp-table th.act .ar {
	color: var(--trp-blue-700);
}

.tr-portal .trp-table th.r,
.tr-portal .trp-table td.r {
	text-align: right;
}

.tr-portal .trp-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--trp-line-2);
	font-size: 13px;
	font-weight: 600;
	color: var(--trp-ink-2);
	vertical-align: middle;
}

.tr-portal .trp-table tbody tr:hover {
	background: #f8fbfc;
}

.tr-portal .trp-table tbody tr.sel {
	background: var(--trp-blue-050);
}

.tr-portal .trp-cbcell {
	width: 34px;
}

.tr-portal .trp-na {
	color: var(--trp-muted);
}

/* --- cells --- */

.tr-portal .rid a {
	font-family: var(--trp-mono);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--trp-ink);
	text-decoration: none;
}

.tr-portal .rid a:hover {
	color: var(--trp-blue-700);
	text-decoration: underline;
}

/* Reservation vs day trip. It was a hover tooltip; at 13px in a dense table an
   always-visible line costs nothing and answers the question without a hover. */
.tr-portal .trp-kind {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--trp-muted);
	margin-top: 3px;
	white-space: nowrap;
}

.tr-portal .rdate b {
	display: block;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--trp-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tr-portal .rdate small {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--trp-muted);
}

.tr-portal .rname b {
	display: block;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--trp-ink);
}

.tr-portal .rname small {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--trp-muted);
	word-break: break-word;
}

/* A pick-up is often saved as a whole street address rather than a city, and
   with nowrap and no cap two of those push the row past 1600px - which is what
   put a horizontal scrollbar under a table that should fit. The cell is capped
   and the endpoints ellipsis; the full text is on the row's title attribute. */
.tr-portal .rroutecell > div {
	max-width: 320px;
}

.tr-portal .rroute {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--trp-ink-2);
	white-space: nowrap;
	min-width: 0;
}

.tr-portal .rroute > span {
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.tr-portal .rroute > span.ar2 {
	overflow: visible;
	flex: 0 0 auto;
}

.tr-portal .rroute i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--trp-blue-700);
	flex: 0 0 6px;
}

.tr-portal .rroute i.d {
	background: var(--trp-blue-900);
}

.tr-portal .rroute .ar2 {
	color: #b9c8d1;
	font-weight: 800;
}

.tr-portal .trp-table td .rroute + small {
	display: block;
	font-weight: 600;
	color: var(--trp-muted);
	font-size: 11px;
	margin-top: 3px;
}

.tr-portal .rprice {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--trp-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tr-portal .rprice small {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--trp-muted);
	margin-top: 3px;
}

.tr-portal .drvchip {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--trp-ink);
}

.tr-portal .drvchip .av {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: repeating-linear-gradient(135deg, #e6edf2 0 6px, #dde6ec 6px 12px);
	flex: 0 0 24px;
	display: grid;
	place-items: center;
	font-size: 9px;
	font-weight: 800;
	color: #5f7d8d;
}

/* Unassigned is the one thing on this row that needs chasing, so it is the one
   thing that is not grey. */
.tr-portal .drvchip.none {
	color: var(--trp-bad-ink);
	font-weight: 800;
	font-size: 12px;
}

.tr-portal .trp-cb {
	width: 17px;
	height: 17px;
	border-radius: 5px;
	border: 1.5px solid #bccbd4;
	background: #fff;
	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
}

.tr-portal .trp-cb.on {
	background: var(--trp-blue-700);
	border-color: var(--trp-blue-700);
}

.tr-portal .trp-cb.on::after {
	content: "";
	width: 9px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translateY(-1px);
}

.tr-portal .rowbtn {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--trp-line);
	background: #fff;
	border-radius: 8px;
	height: 30px;
	padding: 0 11px;
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	color: var(--trp-blue-700);
	text-decoration: none !important;
	cursor: pointer;
}

.tr-portal .rowbtn:hover {
	border-color: var(--trp-blue-600);
	color: var(--trp-blue-800);
}

.tr-portal .trp-empty {
	padding: 56px 20px;
	text-align: center;
	color: var(--trp-muted);
	font-size: 13.5px;
	font-weight: 700;
}

.tr-portal .trp-empty .trp-clear {
	margin: 0;
}

/* ==========================================================================
   Pager
   ========================================================================== */

.tr-portal .trp-pag {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--trp-muted);
	flex-wrap: wrap;
}

.tr-portal .trp-pag b {
	color: var(--trp-ink);
	font-variant-numeric: tabular-nums;
}

.tr-portal .trp-pag .pg {
	margin-left: auto;
	display: flex;
	gap: 6px;
	align-items: center;
}

.tr-portal .trp-pag .pg button {
	min-width: 32px;
	height: 32px;
	border: 1.5px solid var(--trp-line);
	background: #fff;
	border-radius: 8px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--trp-ink-2);
	padding: 0 9px;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.tr-portal .trp-pag .pg button.on {
	background: var(--trp-blue-700);
	border-color: var(--trp-blue-700);
	color: #fff;
}

.tr-portal .trp-pag .pg button:disabled {
	opacity: .4;
	cursor: default;
}

.tr-portal .trp-pag .pg .gap {
	color: var(--trp-muted);
	padding: 0 2px;
}

/* ==========================================================================
   Edit reservation
   ========================================================================== */

.tr-portal .trp-dtop {
	background: var(--trp-surface);
	border: 1px solid var(--trp-line);
	border-radius: var(--trp-r-lg);
	box-shadow: var(--trp-sh-1);
	padding: 16px 20px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.tr-portal .trp-dtop h1 {
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 7px 0 0;
	display: flex;
	align-items: center;
	gap: 11px;
	flex-wrap: wrap;
}

.tr-portal .trp-dtop h1 .idm {
	font-family: var(--trp-mono);
	font-weight: 500;
	font-size: 20px;
	color: var(--trp-muted);
}

.tr-portal .crumb {
	font-size: 12px;
	font-weight: 700;
	color: var(--trp-muted);
}

.tr-portal .crumb a {
	text-decoration: none;
	color: var(--trp-blue-700);
}

.tr-portal .dmeta {
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--trp-muted);
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
}

.tr-portal .dmeta b {
	color: var(--trp-ink-2);
}

.tr-portal .trp-dtop .right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 4px;
	flex-wrap: wrap;
}

.tr-portal .trp-dgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 18px;
	align-items: start;
}

.tr-portal .trp-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.tr-portal .trp-card {
	background: var(--trp-surface);
	border: 1px solid var(--trp-line);
	border-radius: var(--trp-r-lg);
	box-shadow: var(--trp-sh-1);
	overflow: hidden;
}

.tr-portal .trp-card > .hd {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--trp-line-2);
	flex-wrap: wrap;
}

.tr-portal .trp-card > .hd h2 {
	font-size: 14.5px;
	font-weight: 800;
	margin: 0;
	letter-spacing: -.01em;
}

.tr-portal .trp-card > .hd .r {
	margin-left: auto;
	display: flex;
	gap: 10px;
	align-items: center;
}

.tr-portal .trp-card .bd2 {
	padding: 16px 18px;
}

.tr-portal .locked {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--trp-muted);
}

/* --- the four-up read-only trip strip --- */

.tr-portal .facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tr-portal .facts .f2 {
	padding: 13px 18px;
	border-right: 1px solid var(--trp-line-2);
	border-bottom: 1px solid var(--trp-line-2);
	min-width: 0;
}

.tr-portal .facts .f2:nth-child(4n) {
	border-right: 0;
}

.tr-portal .facts .k {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--trp-muted);
}

.tr-portal .facts .v {
	font-size: 14px;
	font-weight: 800;
	color: var(--trp-ink);
	margin-top: 5px;
}

.tr-portal .facts .v small {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--trp-muted);
	margin-top: 3px;
}

/* --- fields --- */

.tr-portal .frow {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 13px 16px;
}

.tr-portal .frow.one {
	grid-template-columns: minmax(0, 1fr);
}

.tr-portal .fld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	position: relative;
}

.tr-portal .fld label {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--trp-ink-2);
	margin: 0;
}

/* .tr-input input in transfer-ride-core-public.css:184 sets border and outline
   with !important, which no amount of specificity beats - so those two, and only
   those two, are re-declared !important here. Everything else about the field is
   handled by the specificity rules further down. The .tr-input class stays on the
   wrapper because the email-suggestion handler in
   transfer-ride-core-public.js:132 looks for it. */
.tr-portal .fld.tr-input input,
.tr-portal .fld.tr-input select {
	border: 1.5px solid var(--trp-line) !important;
	outline: 0 !important;
}

.tr-portal .fld.tr-input input:focus,
.tr-portal .fld.tr-input select:focus {
	border-color: var(--trp-blue-600) !important;
}

.tr-portal .fld .h {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--trp-muted);
}

/* Belt and braces for the float-label collision described in
   new-reservation-admin.php: .tr-input.inline-input label (0,2,1) takes the
   label out of flow and drops it on top of the input. A .fld is a stacked
   field - label above, control below - so if that class ever comes back through
   another template the label stays where the layout expects it. */
.tr-portal .fld.inline-input label,
.tr-portal .fld.tr-input label {
	position: static;
	transform: none;
	top: auto;
	left: auto;
	pointer-events: auto;
	font-size: 10.5px;
}

/* Elementor's kit outranks a plain .tr-portal .fld input (0,2,0) with
     .elementor-kit-15 input:not([type="button"]):not([type="submit"])   (0,3,1)
   and its :focus twin at (0,4,1) - the same collision that flattened the filter
   bar. Mirroring their shape under the doubled root lands these at (0,5,1) and
   (0,6,1), which is also what finally makes the 42px field height stick instead
   of the kit's 15px padding. */
.tr-portal.tr-portal .fld input:not([type="button"]):not([type="submit"]),
.tr-portal.tr-portal .fld select,
.tr-portal.tr-portal .fld textarea {
	height: 42px;
	min-height: 0;
	border: 1.5px solid var(--trp-line);
	border-radius: var(--trp-r-sm);
	background: #fff;
	padding: 0 12px;
	margin: 0;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--trp-ink);
	width: 100%;
	line-height: normal;
	box-shadow: none;
}

.tr-portal.tr-portal .fld input:focus:not([type="button"]):not([type="submit"]),
.tr-portal.tr-portal .fld select:focus,
.tr-portal.tr-portal .fld textarea:focus {
	outline: 0;
	border: 1.5px solid var(--trp-blue-600);
	box-shadow: 0 0 0 3px rgba(8, 121, 186, .14);
}

.tr-portal.tr-portal .fld textarea {
	height: 78px;
	padding: 11px 12px;
	font-weight: 600;
	line-height: 1.45;
	resize: vertical;
}

.tr-portal.tr-portal .fld input[readonly],
.tr-portal.tr-portal .fld textarea[readonly] {
	background: #f7fafb;
	color: var(--trp-ink-2);
}

.tr-portal .fld.wide {
	grid-column: 1 / -1;
}

.tr-portal .fld .form-error,
.tr-portal .fld .input-warning {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--trp-bad-ink);
}

/* --- itinerary --- */

.tr-portal .rail2 {
	padding: 4px 18px 16px;
	display: grid;
	gap: 2px;
}

.tr-portal .leg {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	padding: 5px 0;
}

.tr-portal .leg .mk {
	width: 16px;
	display: grid;
	place-items: center;
	padding-top: 3px;
}

.tr-portal .pin {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--trp-blue-700);
	box-shadow: 0 0 0 3px rgba(4, 96, 149, .16);
}

.tr-portal .pin.dest {
	background: var(--trp-blue-900);
}

.tr-portal .pin.stopdot {
	width: 9px;
	height: 9px;
	background: var(--trp-green);
	box-shadow: 0 0 0 3px rgba(140, 198, 63, .22);
}

.tr-portal .leg .nm {
	font-size: 13.5px;
	font-weight: 700;
	min-width: 0;
}

.tr-portal .leg .nm small {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--trp-muted);
	margin-top: 2px;
}

.tr-portal .leg .tm {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--trp-ink-2);
	white-space: nowrap;
	padding-top: 1px;
	text-align: right;
}

.tr-portal .leg .tm small {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--trp-muted);
	margin-top: 2px;
}

.tr-portal .vline {
	grid-column: 1;
	width: 2px;
	height: 14px;
	background: var(--trp-line);
	margin: 0 auto;
	border-radius: 2px;
}

/* --- payment summary --- */

.tr-portal .sumrow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--trp-ink-2);
	padding: 7px 0;
}

.tr-portal .sumrow b {
	font-weight: 800;
	color: var(--trp-ink);
	font-variant-numeric: tabular-nums;
}

.tr-portal .sumrow.mut {
	color: var(--trp-muted);
	font-size: 12.5px;
	font-weight: 600;
}

.tr-portal .sumtot {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	border-top: 1px solid var(--trp-line);
	margin-top: 6px;
	padding-top: 12px;
}

.tr-portal .sumtot .lb {
	font-size: 13.5px;
	font-weight: 800;
}

.tr-portal .sumtot .tv {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tr-portal .trp-hr {
	height: 1px;
	background: var(--trp-line-2);
	margin: 16px 0;
}

/* --- other passengers --- */

.tr-portal .paxrow {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--trp-line-2);
	font-size: 13px;
	font-weight: 700;
	color: var(--trp-ink);
}

.tr-portal .paxrow small {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--trp-muted);
	margin-top: 3px;
}

.tr-portal .paxrow .n2 {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--trp-blue-050);
	color: var(--trp-blue-800);
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 800;
	flex: 0 0 24px;
}

/* --- map ---
   The real map is TR_Core_Functions::outputReservationRouteOverview(), a
   Leaflet canvas, so this only gives it the card's shape. */

.tr-portal .trp-card .route-overview-wrap,
.tr-portal .trp-card #route-overview {
	border-radius: 0;
}

.tr-portal .trp-map {
	border-top: 1px solid var(--trp-line-2);
}

/* --- sticky action bar --- */

.tr-portal .trp-abar {
	position: sticky;
	bottom: 0;
	background: var(--trp-surface);
	border: 1px solid var(--trp-line);
	border-radius: var(--trp-r-lg);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: 0 -8px 24px rgba(11, 39, 51, .06);
	margin-top: 16px;
	flex-wrap: wrap;
	z-index: 2;
}

.tr-portal .trp-abar .warn2 {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--trp-muted);
}

.tr-portal .trp-abar .right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* The editor's own submit handlers key off .save-data / .remove-data, so those
   classes stay on the buttons and only the skin changes. */
.tr-portal .trp-abar .tr-button {
	border-radius: var(--trp-r-sm);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.tr-portal .trp-dgrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.tr-portal .facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tr-portal .facts .f2:nth-child(2n) {
		border-right: 0;
	}

	.tr-portal .facts .f2:nth-child(4n) {
		border-right: 0;
	}
}

/* Under 900px the table stops being a table. A dispatcher checking a booking
   from a phone should not have to scroll a 1040px grid sideways to find the
   status, so each row becomes a card with the column name in front of the
   value. */
@media (max-width: 900px) {
	.tr-portal .trp-tablewrap {
		overflow-x: visible;
	}

	.tr-portal .trp-table,
	.tr-portal .trp-table tbody,
	.tr-portal .trp-table tr,
	.tr-portal .trp-table td {
		display: block;
		width: auto;
		min-width: 0;
	}

	.tr-portal .trp-table thead {
		display: none;
	}

	.tr-portal .trp-table tbody tr {
		border-bottom: 1px solid var(--trp-line);
		padding: 12px 14px 14px;
		position: relative;
	}

	.tr-portal .trp-table td {
		border: 0;
		padding: 4px 0;
		display: flex;
		gap: 12px;
		align-items: baseline;
	}

	.tr-portal .trp-table td::before {
		content: attr(data-label);
		flex: 0 0 96px;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--trp-muted);
	}

	/* Each cell's content is wrapped in a div so the label pseudo-element and the
	   value are two flex items rather than the value's own children being laid
	   out against the label. */
	.tr-portal .trp-table td > div {
		min-width: 0;
		flex: 1;
	}

	.tr-portal .trp-table td.r,
	.tr-portal .trp-table td .rroute {
		text-align: left;
	}

	.tr-portal .trp-table td .rroute {
		flex-wrap: wrap;
		white-space: normal;
	}

	/* The checkbox rides in the top-right corner rather than taking a labelled
	   row of its own. */
	.tr-portal .trp-table td.trp-cbcell {
		position: absolute;
		top: 12px;
		right: 14px;
		padding: 0;
	}

	.tr-portal .trp-table td.trp-cbcell::before {
		content: none;
	}

	.tr-portal .trp-table td.trp-empty {
		display: block;
	}

	.tr-portal .trp-table td.trp-empty::before {
		content: none;
	}

	.tr-portal .trp-search {
		max-width: none;
	}

	.tr-portal .trp-clear {
		margin-left: 0;
	}
}