/*
 * admin_v2 — compatibility / glue layer for the INSPINIA backend theme.
 *
 * This file is loaded LAST and only inside the admin layout
 * (app/views/pjLayouts/pjActionAdmin.php). Everything is scoped under
 * `body.admin-v2` so it can never leak into the embeddable front widget.
 *
 * IMPORTANT: the legacy admin.css styles the shell by *id* (#header,
 * #middle, #right, #leftmenu, #footer) with fixed 1300px widths. Ids win over
 * classes, so every geometry override below must ALSO be id-based (and scoped
 * with `body.admin-v2`) to beat them. No existing markup / id / class / name
 * is changed — this is purely additive CSS.
 */

/* ---------- shell geometry (id-based, beats legacy admin.css) ----------- */
/* Kill the legacy `html, body { background: #f6f4f5 url(body.png) }` outright
   (shorthand, so the old body.png strip can't paint through while a slow/large
   page is still streaming). `html` is covered too — admin.css sets the texture
   on html as well, and this file only ever loads inside the admin layout, so a
   bare html rule here can't leak to the front widget. The same colours are also
   inlined in the <head> (pjActionAdmin.php) so the old background never flashes
   before this stylesheet finishes loading. */
html { background: #163842 none; }
/* INSPINIA's custom.css makes `body { overflow-y: auto; overflow-x: hidden }`,
   turning the body into its own scroll box. That trapped the absolutely-positioned
   sidebar's overflow inside the body instead of letting the page (html/window)
   scroll, so on short windows the menu couldn't be reached except via a scrollbar
   on the sidebar itself. Let the body overflow to the window vertically (normal
   page scroll) while still clipping horizontally (overflow-x:clip suppresses the
   sideways scrollbar without making the body a scroll container). */
body.admin-v2 { background: #163842 none; overflow-x: clip; overflow-y: visible; }
/* overflow-x:clip (not hidden) still suppresses horizontal scrolling, but —
   unlike hidden — it does NOT turn #wrapper into its own vertical scroll box.
   With hidden, overflow-y computed to auto, so the sidebar's overflow was trapped
   inside #wrapper and the page couldn't scroll to reveal the menu on short
   windows. clip keeps overflow-y visible, so the normal page scroll works. */
body.admin-v2 #wrapper { width: 100%; overflow-x: clip; background: #163842; }

body.admin-v2 #leftmenu {
	position: absolute;
	top: 0;
	left: 0;
	width: 210px;
	background-color: #163842;
	min-height: 100%;
	z-index: 2000;
	/* INSPINIA's custom.css sets .navbar-static-side { height: 100%; overflow: auto },
	   which pinned the sidebar to the viewport height and gave it its OWN scrollbar
	   on short windows (menu taller than the viewport). The sidebar is absolutely
	   positioned and scrolls with the page, so instead let it grow to its content
	   (height:auto) and overflow visibly — the rest of the menu is reached by the
	   normal page scroll, with no separate scrollbar inside the menu. The navy
	   #wrapper/body background fills the 210px strip below it. (The <768px rules
	   below still win.) */
	height: auto;
	overflow: visible;
}
body.admin-v2 #leftmenu .sidebar-collapse { width: 210px; }

body.admin-v2 #header {
	width: auto;
	height: auto;
	margin: 0;
}

body.admin-v2 #page-wrapper {
	min-height: 100vh;
	padding: 0 15px;
	background-color: #f3f3f4; /* opaque gray, so nothing shows through on slow loads */
}

body.admin-v2 #middle {
	width: auto;
	margin: 0;
	padding: 25px 15px 40px;
}
body.admin-v2 #right { width: auto; float: none; }

body.admin-v2 #footer-wrap {
	/* INSPINIA's .footer class positions this absolutely (a sticky-footer hack),
	   which let it overlap tall content. Make it flow in normal document order,
	   right after #middle, so it can never sit on top of the last card/form. */
	position: static;
	width: auto;
	height: auto;
	margin-top: 10px;
	background: #fff;
	border-top: 1px solid #e7eaec;
}
body.admin-v2 #footer {
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	color: #999;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 12px;
}
body.admin-v2 #footer .av2-footer-name { color: #6b7178; }
body.admin-v2 #footer .av2-footer-ver { color: #aeb3b7; }

@media (min-width: 768px) {
	body.admin-v2 #page-wrapper { margin-left: 210px; }
	body.admin-v2.mini-navbar #page-wrapper { margin-left: 70px; }
	body.admin-v2.mini-navbar #leftmenu { width: 70px; }
	body.admin-v2.mini-navbar #leftmenu .sidebar-collapse { width: 70px; }
}
@media (max-width: 767px) {
	body.admin-v2 #leftmenu { width: 0; overflow: hidden; }
	body.admin-v2 #page-wrapper { margin-left: 0; }
	/* Open state on mobile uses its OWN class (.av2-nav-open), NEVER .mini-navbar,
	   so none of the desktop "icons-only" rules apply -- the overlay shows the full
	   menu with TEXT LABELS and normal inline (slide-down) submenus. It's a
	   full-width off-canvas OVERLAY: display:block defeats INSPINIA's body-small
	   rule that hides the static sidebar, position:fixed keeps it in view when the
	   page is scrolled, its own vertical scroll for long menus, above the backdrop.
	   The hamburger sits underneath it while open, so the backdrop (below) closes it
	   -- tap the dimmed area, or a menu link (both handled in inspinia-init.js). */
	body.admin-v2.av2-nav-open #leftmenu {
		display: block !important;
		width: 210px;
		overflow-y: auto;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		z-index: 2050;
		box-shadow: 2px 0 18px rgba(5, 20, 28, .35);
	}
}
/* Dimmed backdrop shown behind the open mobile menu. Hidden by default and
   toggled from inspinia-init.js (only on small screens); tapping it closes the
   menu. Sits above the page content but below the sidebar. */
body.admin-v2 .av2-nav-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(8, 20, 26, .5);
	z-index: 2040;
}

/* ============================================================================
   MOBILE + TABLET (<=991px): keep every page inside the viewport. The legacy
   PHPJabbers forms use floated fixed-width labels + fixed-width fields
   (w400/w300/...), and the datagrids are wide -- both overflow a phone/tablet
   screen and made the whole page scroll sideways (content, prices and action
   buttons cut off at the right). These rules stack form rows, fill fields to the
   column width, let wide grids/tables scroll inside their own box, and stop the
   page itself from ever scrolling horizontally. Scoped to <=991px (covers phones
   AND tablet-portrait, where the wide tables/forms don't fit beside the sidebar)
   so real desktops are untouched. The full-screen off-canvas sidebar itself
   stays a phone-only behaviour (<=767px, above). */
@media (max-width: 991px) {
	html, body.admin-v2 { max-width: 100%; overflow-x: hidden; }
	body.admin-v2 #wrapper, body.admin-v2 #page-wrapper { max-width: 100%; overflow-x: hidden; }
	body.admin-v2 #page-wrapper { padding-left: 10px; padding-right: 10px; }
	body.admin-v2 #middle { padding: 16px 8px 34px; }

	/* legacy multi-column layouts (booking add/edit uses .float_left.w350 and
	   inline style="width:50%"; inquiry uses .float_right.w600) can't sit side by
	   side on a phone -- stack them full-width. */
	body.admin-v2 #content .float_left,
	body.admin-v2 #content .float_right { float: none !important; width: auto !important; max-width: 100%; }
	/* booking edit: the collapsible confirmation/emails panel is a fixed 380px box */
	body.admin-v2 #content .action-container { width: auto; max-width: 100%; box-sizing: border-box; }

	/* maps, iframes, charts never exceed the screen width */
	body.admin-v2 #content iframe,
	body.admin-v2 #content canvas,
	body.admin-v2 #content embed,
	body.admin-v2 #content object { max-width: 100% !important; }
	/* images capped WITHOUT !important, so a more specific per-image size (e.g. the
	   30px extras thumbnails below) can still win. */
	body.admin-v2 #content img { max-width: 100%; }

	/* wide data grids / tables scroll inside their own box, not the whole page.
	   :has() covers any wrapper of a datagrid table; #grid is the explicit
	   bookings/invoices list container (belt-and-suspenders for older browsers). */
	body.admin-v2 #content *:has(> table.pj-table),
	body.admin-v2 #grid,
	body.admin-v2 .table-responsive {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Reports: the SUMMARY tables (class "table b20") can carry more columns than a
	   phone is wide (One-way vs Round-trip, Passengers per reservation, ...). They
	   sit bare inside .trReportContainer with no scroll wrapper, so the right-hand
	   columns were clipped by the page overflow-x:hidden and became unreachable.
	   Turn each table into its own horizontal scroll box (display:block + overflow)
	   so every column stays reachable and the page itself never widens. */
	body.admin-v2 #content .trReportContainer table.table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* ---- Dashboard cards rebuilt as a clean vertical stack ------------------
	   The desktop rows are CSS grids (pill|content|amount, time|content|status)
	   that get too tight on a phone and let the amount / status / Confirm button
	   overlap the client details. Switch each row to a wrapping flexbox: a top
	   line with the pill and the amount/status, the client details on their own
	   full-width line below, and the Confirm button as a full-width action.
	   NB: the base .av2d-* grid rules live LATER in this same file, so these are
	   qualified with #content to out-specify them (equal specificity would lose on
	   source order). */
	body.admin-v2 #content .av2d-brow {
		display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px;
		grid-template-columns: none;
	}
	body.admin-v2 #content .av2d-brow > .av2d-pill { order: 1; justify-self: start; margin: 0; }
	body.admin-v2 #content .av2d-brow > .b-amt { order: 2; margin-left: auto; }
	body.admin-v2 #content .av2d-brow > .b-mid { order: 3; flex: 0 0 100%; min-width: 0; }
	body.admin-v2 #content .av2d-brow > .av2d-confirm-slot { order: 4; flex: 0 0 100%; justify-self: stretch; }
	body.admin-v2 #content .av2d-brow .av2d-confirm,
	body.admin-v2 #content .av2d-brow .av2d-confirm-multi { width: 100%; justify-content: center; }
	body.admin-v2 #content .av2d-brow .av2d-confirm-menu { left: 0; right: 0; }

	body.admin-v2 #content .av2d-trip {
		display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
		grid-template-columns: none;
	}
	body.admin-v2 #content .av2d-trip > .t-time { order: 1; text-align: left; min-width: 46px; }
	body.admin-v2 #content .av2d-trip > .t-stat { order: 2; margin-left: auto; align-items: flex-end; }
	body.admin-v2 #content .av2d-trip > .t-who { order: 3; flex: 0 0 100%; min-width: 0; }
	body.admin-v2 #content .av2d-trip .t-route,
	body.admin-v2 #content .av2d-brow .b-mid { overflow-wrap: anywhere; word-break: break-word; }

	/* month status widget: on a narrow card the label + count + amount don't fit
	   on one line, so let the row wrap (amount drops below the label) instead of
	   the amount getting clipped off the right edge. */
	body.admin-v2 #content .av2d-sbar .l { flex-wrap: wrap; gap: 2px 8px; }
	body.admin-v2 #content .av2d-sbar .l b { min-width: 0; }

	/* <fieldset> (invoice edit, options -> confirmation email) has an intrinsic
	   min-width of its content and refuses to shrink, overflowing the screen --
	   min-width:0 lets it fit. */
	body.admin-v2 #content fieldset { min-width: 0; max-width: 100%; box-sizing: border-box; }

	/* Profile page: the two columns are min-width:300px, a hair too wide at 320px;
	   let them shrink and stack. (#content out-specifies the base rule, which sits
	   later in this file.) */
	body.admin-v2 #content .pj-profile-col { min-width: 0; }

	/* Chart report: the KPI stat cards sit in a non-wrapping flex row that runs
	   off-screen on a phone -- let them wrap and shrink. */
	body.admin-v2 #content .stat-group { flex-wrap: wrap; }
	body.admin-v2 #content .stat-group .stat-card { min-width: 0; flex: 1 1 140px; }

	/* ---- Datagrid toolbar (Add / Search / status filters) ------------------
	   These sit in floated forms/divs (un-floated above); give them vertical
	   spacing and let the status-filter buttons wrap with a gap so they and the
	   Add/Search controls don't all run together. */
	body.admin-v2 #content .frm-filter,
	body.admin-v2 #content form.pj-form.r10,
	body.admin-v2 #content .float_right.t5 { margin: 0 0 10px; }
	body.admin-v2 #content .btn-filter,
	body.admin-v2 #content .btn-all,
	body.admin-v2 #content .btn-status { margin: 0 6px 6px 0; }

	/* ---- Datagrid footer (paginator: page list, Choose Action, Go to page,
	   items-per-page, total). The legacy paginator floats its parts and clips
	   with overflow:hidden -- lay them out as a wrapping flex row with spacing. */
	body.admin-v2 #content .pj-paginator {
		overflow: visible;
		display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
		padding: 10px 12px;
	}
	body.admin-v2 #content .pj-paginator > *,
	body.admin-v2 #content .pj-paginator .pj-paginator-list,
	body.admin-v2 #content .pj-paginator .pj-paginator-button-actions,
	body.admin-v2 #content .pj-paginator .pj-paginator-goto,
	body.admin-v2 #content .pj-paginator .pj-paginator-total,
	body.admin-v2 #content .pj-paginator .pj-paginator-row-count { float: none; margin: 0; }

	/* ---- Dashboard card header action links (view all / Print) touched each
	   other when they wrapped -- lay them out with a gap. */
	body.admin-v2 #content .av2d-card > .hd .hd-links:not(.av2d-chartnav) { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
	body.admin-v2 #content .av2d-card > .hd .hd-links:not(.av2d-chartnav) a { margin-left: 0; }

	/* ---- Booking form: the Generate / Check google-maps buttons stack on a
	   phone and were glued together -- add a gap. */
	body.admin-v2 #content .btnGenerateGoogleMapLink,
	body.admin-v2 #content .btnCheckGoogleMapLink { margin: 0 6px 6px 0; }

	/* ---- Extras thumbnails: the generic '#content img { max-width:100% }' cap
	   above out-specified the 30px extras cap, blowing the images up. Re-assert
	   the small size with higher specificity. */
	body.admin-v2 #content .orderExtras img { max-width: 30px; }

	/* ---- Availability calendar: the plugin table sized cells to content, so the
	   day squares came out uneven. Fixed layout = equal columns. */
	body.admin-v2 #content .pjDashboardCalendar table.abCalendarTable { table-layout: fixed; }

	/* ---- Clock card: let the date / last-login wrap instead of overflowing the
	   card to the right. */
	body.admin-v2 #content .av2d-clock { flex-wrap: wrap; }
	body.admin-v2 #content .av2d-clock .c-date { text-align: left; min-width: 0; overflow-wrap: anywhere; }

	/* ---- Advanced search filter: fill the select2 / date field to the column so
	   the panel no longer scrolls sideways (an earlier fixed 400px was too wide)
	   and the selects match the width of the text inputs. #content out-specifies
	   the desktop rules later in this file; the value span must be block (not the
	   inline-block the desktop rule sets) or width:100% collapses to the content. */
	body.admin-v2 #content .frm-filter-advanced .float_left p > span.inline-block:has(> .select2-container) { display: block; overflow: hidden; }
	body.admin-v2 #content .frm-filter-advanced .float_left p > span.inline-block:has(> .select2-container) > .select2-container,
	body.admin-v2 #content .frm-filter-advanced .float_left .chzn-container { width: 100% !important; max-width: 100% !important; }
	body.admin-v2 #content .frm-filter-advanced .float_left input.datepick.w90 { width: 100%; }
	/* advanced search: put the Search/Cancel row at the very bottom (after every
	   field). display:contents dissolves the two column wrappers so all the <p>
	   rows become direct flex items of the form, then order:99 sends the submit
	   row last. */
	body.admin-v2 #content .frm-filter-advanced { flex-direction: column; }
	body.admin-v2 #content .frm-filter-advanced > .float_left { display: contents; }
	body.admin-v2 #content .frm-filter-advanced > .float_left > p,
	body.admin-v2 #content .frm-filter-advanced > .float_left > .p { width: 100%; }
	body.admin-v2 #content .frm-filter-advanced p:has(input[type="submit"]) { order: 99; }

	/* status-filter button groups (All / Confirmed / Pending / ... and the notes
	   Active/Inactive) wrap as a flex row with a gap, so the buttons never overlap
	   when they run onto a second line. */
	body.admin-v2 #content .float_right.t5 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
	body.admin-v2 #content .float_right.t5 .pj-button { margin: 0; }

	/* Locations ("Transfers") toolbar: the Import Prices form and the Export Prices
	   link sit in a bare .float_right (no .t5), so the wrapping row above did not
	   reach them -- once un-floated the two inline-block buttons piled on top of each
	   other. Give this exact toolbar the same wrapping flex row (scoped with :has to
	   the import form so no other .float_right is affected). */
	body.admin-v2 #content .float_right:has(#frmImportPrices) {
		display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
	}
	body.admin-v2 #content .float_right:has(#frmImportPrices) > form,
	body.admin-v2 #content .float_right:has(#frmImportPrices) > .pj-button { margin: 0; }

	/* Search box + advanced-search toggle (the little down-arrow button): the search
	   input is forced to 100% width on mobile, which pushed the arrow button onto its
	   own orphaned line. Lay the row out as flex so the input flexes to fill and the
	   arrow toggle stays beside it on the same line. .frm-filter is the simple search
	   form used across the list pages (bookings, notes, vouchers, transfers, inquiry). */
	body.admin-v2 #content .frm-filter { display: flex; align-items: center; gap: 6px; }
	body.admin-v2 #content .frm-filter .pj-form-field-search { flex: 1 1 auto; width: auto !important; min-width: 0; }
	body.admin-v2 #content .frm-filter .pj-button-detailed { flex: 0 0 auto; margin: 0; }

	/* availability calendar: the month-header row uses a colspan, which threw off
	   table-layout:fixed and left the first (week #) and last (Sunday) columns
	   wider. Pin the prev/next header cells to one column-width each so all eight
	   columns come out equal and the day squares line up. */
	body.admin-v2 #content .abCalendarTable td.abCalendarMonthPrev,
	body.admin-v2 #content .abCalendarTable td.abCalendarMonthNext { width: 12.5% !important; }

	/* Fleet add/edit: the seasonal-price and discount-PERIOD rows are built from
	   deeply nested floated <span>s. Un-floating them (above) left them inline and
	   they piled on top of each other. Make every floated span an inline-block box
	   (so it wraps with real spacing, never overlapping), and make the period
	   containers full-width blocks / wrapping flex lines so each period sits on its
	   own tidy row. */
	body.admin-v2 #frmUpdateFleet .float_left,
	body.admin-v2 #frmCreateFleet .float_left { display: inline-block; float: none; vertical-align: top; }
	body.admin-v2 #frmUpdateFleet .pjAdditionalDiscountPeriod,
	body.admin-v2 #frmCreateFleet .pjAdditionalDiscountPeriod,
	body.admin-v2 #frmUpdateFleet .period-wrapper,
	body.admin-v2 #frmCreateFleet .period-wrapper { display: block; width: 100%; }
	/* height:auto is essential: admin.css/admin-v2.css pin .period-dates to a fixed
	   35/46px (a single desktop row). On a phone the fields wrap onto 2-3 lines, so
	   that fixed height trapped them -- the date row and the Add/remove button spilled
	   out of the box and overlapped the next period row. Let the row grow to its
	   wrapped content. */
	body.admin-v2 #frmUpdateFleet .period-dates,
	body.admin-v2 #frmCreateFleet .period-dates { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; height: auto; }
	body.admin-v2 #frmUpdateFleet .period-dates > span,
	body.admin-v2 #frmCreateFleet .period-dates > span { margin: 0; }
	/* Each Period is three wrapped lines (rate / date range / add-remove); without a
	   divider the successive periods blur together. Group each one with a dashed rule
	   and a bit of breathing room, and drop it from the last period so there is no
	   dangling line before the next weekday. */
	body.admin-v2 #frmUpdateFleet .period-wrapper .period-dates,
	body.admin-v2 #frmCreateFleet .period-wrapper .period-dates { padding: 0 0 14px; border-bottom: 1px dashed #d7dde1; }
	body.admin-v2 #frmUpdateFleet .period-wrapper .period-dates:last-child,
	body.admin-v2 #frmCreateFleet .period-wrapper .period-dates:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

	/* Seasonal-price day rows (both price levels): the weekday name, %, Always/Period,
	   Markup, amount and currency were each dropping onto their own line. Lay the row
	   out as flex -- the weekday name heads its own line and the value controls share
	   one shrunk line beneath it. The Period block keeps its own full-width row so the
	   period-date rows fixed above are unaffected. */
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid),
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) {
		display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 8px;
	}
	/* the "Return discount"/blank section label stays a full-width heading */
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid) > .title,
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) > .title { flex: 0 0 100%; margin: 0; }
	/* flatten the wrapper spans so their inner controls become flex items on the shared
	   line -- but NOT the Period block, which stays a full-width row of its own. */
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid) > .float_left:not(.pjAdditionalDiscountPeriod),
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) > .float_left:not(.pjAdditionalDiscountPeriod),
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid) .pjMainDiscountPeriod > .float_left,
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) .pjMainDiscountPeriod > .float_left { display: contents; }
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid) > .pjAdditionalDiscountPeriod,
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) > .pjAdditionalDiscountPeriod { flex: 1 1 100%; }
	/* weekday name heads its own line */
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid) label.block,
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) label.block { flex: 0 0 100%; width: auto; margin: 0 0 2px; }
	/* each value control shares the single line, shrinking to fit (min-width:0 lets
	   the selects shrink below their content width). Selects get a bit more of the
	   width than the number inputs so their labels (Always / Markup / EUR) stay
	   readable rather than truncating hard. */
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid) .pj-form-field-custom-before,
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) .pj-form-field-custom-before,
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid) .pjAdditionalDiscountValid,
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) .pjAdditionalDiscountValid,
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid) .pjMainDiscountPeriod .pj-form-field,
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) .pjMainDiscountPeriod .pj-form-field { flex: 1 1 0; min-width: 0; width: auto; }
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid) .pjAdditionalDiscountValid,
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) .pjAdditionalDiscountValid,
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid) .pjMainDiscountPeriod select.pj-form-field,
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) .pjMainDiscountPeriod select.pj-form-field { flex-grow: 1.35; }
	body.admin-v2 #frmUpdateFleet p:has(.pjAdditionalDiscountValid) .pj-form-field-custom-before,
	body.admin-v2 #frmCreateFleet p:has(.pjAdditionalDiscountValid) .pj-form-field-custom-before { flex-grow: 0.7; }

	/* forms: stack the label above the field, and let fields fill the column. */
	body.admin-v2 .form .title,
	body.admin-v2 .form .title120 { float: none; width: auto; display: block; padding: 0 0 5px; }
	body.admin-v2 .form p > span.inline-block,
	body.admin-v2 .form .p > span.inline-block,
	body.admin-v2 .form p > span.inline_block,
	body.admin-v2 .form .p > span.inline_block { display: block; }
	body.admin-v2 .form .pj-form-field { max-width: 100%; box-sizing: border-box; }
	body.admin-v2 .form .pj-form-field.w500,
	body.admin-v2 .form .pj-form-field.w400,
	body.admin-v2 .form .pj-form-field.w300,
	body.admin-v2 .form .pj-form-field.w250,
	body.admin-v2 .form .pj-form-field.w200 { width: 100% !important; }
	/* select2 / chosen widgets fill the column too */
	body.admin-v2 .form .select2-container,
	body.admin-v2 .form .chzn-container { width: 100% !important; max-width: 100% !important; }
}

/* ---------- brand / sidebar header -------------------------------------- */
body.admin-v2 .av2-nav-header {
	padding: 6px 10px;
	background-color: #052430; /* matches the logo's own navy so it blends seamlessly */
	background-image: none;
	text-align: center;
}
body.admin-v2 .av2-brand-link {
	display: block;
	color: #fff;
	text-decoration: none;
	line-height: 1;
}
/* The logo is a square PNG with a lot of built-in navy padding. object-fit:cover
   in a short box crops that (invisible) padding away so the brand header isn't
   too tall. Header bg matches the logo navy, so the crop is seamless. */
body.admin-v2 .av2-brand-logo { display: block; width: 175px; max-width: 100%; height: 92px; object-fit: cover; object-position: center 47%; margin: 0 auto; }
body.admin-v2 .av2-brand-text { display: none; } /* hide the "vX.X" line */
body.admin-v2.mini-navbar .av2-brand-logo { width: 56px; height: 34px; }
body.admin-v2.mini-navbar .av2-nav-header { padding: 10px 4px; }

/* Legacy pjOneAdmin site-switcher: drop its old sprite frames and make the
   select fit the dark sidebar. */
body.admin-v2 .leftmenu-top,
body.admin-v2 .leftmenu-bottom { display: none; }
body.admin-v2 .leftmenu-middle {
	background: none;
	width: auto;
	overflow: visible;
	margin-top: 12px;
}
body.admin-v2 .leftmenu-middle .menu {
	width: auto;
	margin: 0;
	overflow: visible;
	list-style: none;
}
body.admin-v2 .leftmenu-middle .menu li { float: none; margin: 0; min-width: 0; }
body.admin-v2 #pjOneAdminSelect {
	width: 90% !important;
	max-width: 210px;
	margin: 0 auto;
	display: block;
	padding: 6px 8px;
	border-radius: 3px;
	border: 1px solid #245160;
	background-color: #123039;
	color: #dfe4ea;
}
body.admin-v2.mini-navbar .leftmenu-middle { display: none; }

/* ---------- sidebar nav ------------------------------------------------- */
body.admin-v2 #side-menu { padding: 0; margin: 0; list-style: none; }
body.admin-v2 #side-menu > li { float: none; margin: 0; min-width: 0; }
body.admin-v2 #side-menu > li > a {
	display: block;
	padding: 14px 20px;
	font-weight: 600;
	color: #a7b1c2;
	text-decoration: none;
	border-right: none;
	background: transparent;
	text-shadow: none;
	height: auto;
	line-height: normal;
}
body.admin-v2 #side-menu > li > a:hover,
body.admin-v2 #side-menu > li > a:focus { color: #fff; background: #123039; }
body.admin-v2 #side-menu .nav-label { margin-left: 6px; }
/* Active accent lives on the ROW, not the whole <li>. For a group whose child
   page is open, the <li> also contains the expanded submenu — a border on the
   <li> ran the red bar down the entire group. Put the red accent on leaf rows
   only (real pages); a group toggle just gets the darker highlight, and the red
   marker belongs to the active sub-item inside it. */
body.admin-v2 #side-menu > li.active { border-left: none; background: transparent; }
body.admin-v2 #side-menu > li.active > a { color: #fff; }
body.admin-v2 #side-menu > li.active > a:not(.av2-has-submenu) {
	border-left: 4px solid #4a90c2;
	padding-left: 16px;
	background: #123039;
}
body.admin-v2 #side-menu > li.active > a.av2-has-submenu { background: #123039; }

/* collapsible sub-menus (metisMenu style), any depth */
body.admin-v2 #side-menu .fa.arrow { float: right; margin-top: 2px; }
body.admin-v2 #side-menu .fa.arrow:before { content: "\f104"; font-family: FontAwesome; } /* angle-left */
body.admin-v2 #side-menu li.mm-open > a .fa.arrow:before { content: "\f107"; } /* angle-down */

body.admin-v2 #side-menu ul.nav-second-level,
body.admin-v2 #side-menu ul.nav-third-level {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.admin-v2 #side-menu li.mm-open > ul.nav-second-level,
body.admin-v2 #side-menu li.mm-open > ul.nav-third-level { display: block; }
body.admin-v2 #side-menu ul.nav-second-level { background: #0e2830; }
body.admin-v2 #side-menu ul.nav-third-level { background: #0a2229; }
body.admin-v2 #side-menu .nav-second-level > li,
body.admin-v2 #side-menu .nav-third-level > li { float: none; margin: 0; min-width: 0; border-left: 4px solid transparent; }

/* second level = the actual pages (leaf links, indented under their group) */
body.admin-v2 #side-menu .nav-second-level > li > a {
	display: block;
	padding: 9px 20px 9px 52px;
	color: #8095a8;
	font-weight: 400;
	font-size: 13px;
	text-decoration: none;
	background: transparent;
	border-right: none;
	text-shadow: none;
	height: auto;
	line-height: normal;
}
body.admin-v2 #side-menu .nav-second-level > li > a:hover { color: #fff; background: #0f313a; }
body.admin-v2 #side-menu .nav-second-level > li.active { border-left-color: #4a90c2; background: #0f313a; }
body.admin-v2 #side-menu .nav-second-level > li.active > a { color: #fff; }

/* third level = the actual pages */
body.admin-v2 #side-menu .nav-third-level > li > a {
	display: block;
	padding: 9px 20px 9px 52px;
	color: #8095a8;
	font-weight: 400;
	font-size: 13px;
	text-decoration: none;
	background: transparent;
	border-right: none;
	text-shadow: none;
	height: auto;
	line-height: normal;
}
body.admin-v2 #side-menu .nav-third-level > li > a:hover { color: #fff; background: #0f313a; }
body.admin-v2 #side-menu .nav-third-level > li.active { border-left-color: #4a90c2; background: #0f313a; }
body.admin-v2 #side-menu .nav-third-level > li.active > a { color: #fff; }

body.admin-v2.mini-navbar #side-menu ul.nav-second-level,
body.admin-v2.mini-navbar #side-menu ul.nav-third-level { display: none !important; }

/* ---------- collapsed sidebar: hover fly-out --------------------------------
   When the sidebar is minimised to 70px (icons only, desktop >=768px) the
   labels are hidden. On hover, reveal the item's name to the right as a small
   panel; for an item that has a submenu, reveal the name as a header plus its
   submenu list (the classic INSPINIA fly-out, which the display:none rule above
   otherwise suppresses). #leftmenu is overflow:visible / z-index:2000, so the
   panel is not clipped. Collapsed row height is 46px, so the header matches. */
@media (min-width: 768px) {
	body.admin-v2.mini-navbar #side-menu > li { position: relative; }

	/* the item name, shown as a fly-out header on hover */
	body.admin-v2.mini-navbar #side-menu > li:hover > a > .nav-label {
		display: block;
		position: absolute;
		left: 70px;
		top: 0;
		width: 190px;
		box-sizing: border-box;
		margin: 0;
		padding: 0 16px;
		height: 46px;
		line-height: 46px;
		background: #123039;
		color: #fff;
		white-space: nowrap;
		box-shadow: 2px 2px 6px rgba(0, 0, 0, .25);
		z-index: 2001;
	}
	/* drop the little accordion arrow inside the fly-out header */
	body.admin-v2.mini-navbar #side-menu > li:hover > a > .nav-label .fa.arrow { display: none; }

	/* the submenu list, flown out just below the name header */
	body.admin-v2.mini-navbar #side-menu > li:hover > ul.nav-second-level {
		display: block !important;
		position: absolute;
		left: 70px;
		top: 46px;
		width: 190px;
		box-sizing: border-box;
		margin: 0;
		padding: 6px 0;
		background: #0e2830;
		box-shadow: 2px 2px 6px rgba(0, 0, 0, .25);
		z-index: 2000;
	}
	body.admin-v2.mini-navbar #side-menu > li:hover > ul.nav-second-level > li > a { padding-left: 16px; }
}

/* ---------- top navbar -------------------------------------------------- */
/* We deliberately don't load Bootstrap CSS, so the Bootstrap navbar float
   helpers (.navbar-right etc.) don't apply — lay the top bar out with flexbox
   instead: hamburger on the left, actions pushed to the right, all centred. */
body.admin-v2 .row.border-bottom { border-bottom: 1px solid #e7eaec; background: #fff; }
body.admin-v2 .navbar-static-top {
	display: flex;
	align-items: center;
	min-height: 60px;
	margin: 0;
	padding: 0 15px;
	background: #fff;
	border: none;
}
body.admin-v2 .navbar-static-top .navbar-header { float: none; display: flex; align-items: center; }
/* hamburger toggle — override INSPINIA's green .btn-primary skin with the brand
   navy (matches the logo / sidebar navy). */
body.admin-v2 .navbar-minimalize { margin: 0; }
body.admin-v2 #av2-minimalize,
body.admin-v2 #av2-minimalize.btn-primary {
	background-color: #163842;
	border-color: #163842;
	color: #fff;
}
body.admin-v2 #av2-minimalize:hover,
body.admin-v2 #av2-minimalize:focus {
	background-color: #1d4a57;
	border-color: #1d4a57;
	color: #fff;
}
body.admin-v2 .navbar-top-links {
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
	display: flex;
	align-items: center;
}
body.admin-v2 .navbar-top-links > li { list-style: none; display: inline-flex; }
body.admin-v2 .navbar-top-links > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	color: #676a6c;
	text-decoration: none;
	font-weight: 600;
}
body.admin-v2 .navbar-top-links > li > a:hover { color: #163842; }
body.admin-v2 .navbar-top-links > li.av2-welcome > span { padding: 8px 6px 8px 14px; color: #9aa4ae; display: inline-block; }
body.admin-v2 .navbar-top-links > li.av2-welcome + li > a { padding-left: 12px; }
@media (max-width: 600px) { body.admin-v2 .navbar-top-links > li.av2-welcome { display: none; } }

/* ---------- content card ------------------------------------------------ */
body.admin-v2 .content-middle.ibox {
	background: #fff;
	border: 1px solid #e7eaec;
	border-top: 2px solid #163842;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	padding: 20px;
	clear: both;
}
body.admin-v2 .content-top,
body.admin-v2 .content-bottom { display: none; }

/* ---------- buttons (.pj-button) ---------------------------------------- */
/* Modernise the legacy grey-gradient buttons to the green theme. Default
   buttons stay light/neutral; submit buttons become the primary (green)
   action, mirroring the reference site. pj-button.css uses !important on its
   hover/active backgrounds, so a few overrides need !important to win. */
body.admin-v2 .pj-button,
body.admin-v2 .pj-button:link,
body.admin-v2 .pj-button:visited {
	background: #163842 none !important;
	border: 1px solid #163842;
	color: #fff;
	border-radius: 3px;
	padding: 6px 14px;
	font: 600 12px/1.4 "Open Sans", "Helvetica Neue", Arial, sans-serif;
	box-shadow: none !important;
}
body.admin-v2 .pj-button:not([disabled]):hover,
body.admin-v2 .pj-button-hover {
	background: #1d4a57 none !important;
	border-color: #1d4a57 !important;
	color: #fff !important;
}
/* The "detailed search" toggle next to the search box (Bookings filter bar).
   Its arrow is a 12x7 inline sprite that sat on the text baseline inside a
   button padded like a text button, so it looked off-centre. Make the button a
   fixed square that matches the search field height and flex-centre the arrow. */
body.admin-v2 button.pj-button-detailed {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	vertical-align: middle;
}
/* the detailed-search toggle arrow is a dark PNG sprite that looks dim on the
   dark teal button; force it white (brightness(0)->black, invert(1)->white). */
body.admin-v2 button.pj-button-detailed .pj-button-detailed-arrow { position: static; margin: 0; filter: brightness(0) invert(1); }
/* trim the search field — 300px was wider than it needs to be, crowding the
   status filter buttons beside it. */
body.admin-v2 .pj-form-field-search { width: 220px; }
/* the datagrid "Go to page" input is created with an inline width:20px, too
   narrow to read the page number — widen it (inline style needs !important). */
body.admin-v2 input.pj-selector-goto { width: 48px !important; text-align: center; padding-left: 4px; padding-right: 4px; }
/* The active/selected state (e.g. the All/Active/Inactive datagrid filters, which
   are <a> links). The .pj-button:link/:visited rule above out-specifies a plain
   .pj-button-active, so its white background would win while color:#fff still
   applied — white-on-white, invisible text. Match the link states here too so
   the green background wins and the label stays readable. */
body.admin-v2 .pj-button-active,
body.admin-v2 a.pj-button-active:link,
body.admin-v2 a.pj-button-active:visited,
body.admin-v2 .pj-button-active:hover {
	background: #163842 none !important;
	border-color: #163842 !important;
	color: #fff !important;
}
body.admin-v2 input[type="submit"].pj-button,
body.admin-v2 button[type="submit"].pj-button {
	background: #163842 none !important;
	border-color: #163842;
	color: #fff;
}
body.admin-v2 input[type="submit"].pj-button:not([disabled]):hover,
body.admin-v2 button[type="submit"].pj-button:not([disabled]):hover {
	background: #1d4a57 none !important;
	border-color: #1d4a57 !important;
	color: #fff !important;
}
/* Secondary "Cancel" buttons: give them a lighter outline look so the primary
   action (Save / Search, the submit buttons above) clearly stands out. Cancel is
   always either a reset (search filter bars) or a type=button that navigates back
   via window.location -- the one non-Cancel button matching that pattern is the
   "Set permissions" link, excluded here so it keeps the solid primary style. */
body.admin-v2 input[type="reset"].pj-button,
body.admin-v2 input[type="button"].pj-button[onclick*="window.location"]:not([onclick*="pjActionPermissions"]) {
	background: #fff none !important;
	border: 1px solid #163842 !important;
	color: #163842 !important;
}
body.admin-v2 input[type="reset"].pj-button:not([disabled]):hover,
body.admin-v2 input[type="button"].pj-button[onclick*="window.location"]:not([onclick*="pjActionPermissions"]):not([disabled]):hover {
	background: #eef1f3 none !important;
	border-color: #163842 !important;
	color: #163842 !important;
}
body.admin-v2 .pj-button[disabled],
body.admin-v2 .pj-button-disabled,
body.admin-v2 .pj-button-disabled:hover {
	background: #f5f4f4 none !important;
	border-color: #e2e2e2 !important;
	color: #b9b7b7 !important;
	box-shadow: none !important;
}

/* ---------- datagrid filter buttons (All / Fixed date / Period / … ) --------
   These are a FILTER GROUP, so they read best as light/white when unselected
   and highlighted when selected — not as the solid-teal secondary skin, which
   made "All / Fixed date / Period / Recurring" look identical and unlike a
   filter. Default them to light + red-when-active here; the status-tinted
   filters (confirmed/pending/in_progress/cancelled/Active/Inactive/Has Notes)
   below override this with their own colours (declared after, same specificity,
   so they win). "Has Notes" keeps its own rule (different class). */
body.admin-v2 a.pj-button.btn-all,
body.admin-v2 a.pj-button.btn-filter {
	background: #fff !important;
	border: 1px solid #d1dade;
	color: #555;
}
body.admin-v2 a.pj-button.btn-all:hover,
body.admin-v2 a.pj-button.btn-filter:hover {
	/* !important on colour/border too: the base .pj-button:hover sets
	   color:#fff !important, which would otherwise leave white text on this
	   light hover background (unreadable). */
	background: #f4f5f7 !important;
	border-color: #b9c2c8 !important;
	color: #333 !important;
}
body.admin-v2 a.pj-button.btn-all.pj-button-active,
body.admin-v2 a.pj-button.btn-all.pj-button-active:link,
body.admin-v2 a.pj-button.btn-all.pj-button-active:visited,
body.admin-v2 a.pj-button.btn-all.pj-button-active:hover,
body.admin-v2 a.pj-button.btn-filter.pj-button-active,
body.admin-v2 a.pj-button.btn-filter.pj-button-active:link,
body.admin-v2 a.pj-button.btn-filter.pj-button-active:visited,
body.admin-v2 a.pj-button.btn-filter.pj-button-active:hover {
	background: #163842 !important;
	border-color: #163842 !important;
	color: #fff !important;
}

/* ---------- booking status filter buttons ------------------------------ */
/* Colour the datagrid status filters (Bookings page) after the booking status
   they select — confirmed=green, pending=orange, in-progress=blue,
   cancelled=grey (matching the app's .order-status-* legend), plus a distinct
   tint for "Has Notes". Tinted by default, solid in the selected
   (.pj-button-active) state. High-specificity selectors (a + attribute +
   pseudo) are needed to beat the generic .pj-button:link / :hover rules above. */
body.admin-v2 a.btn-status[data-value="confirmed"],
body.admin-v2 a.btn-status[data-value="confirmed"]:hover {
	background: #eef6ea !important; border-color: #cfe3c4 !important; color: #256e02 !important;
}
body.admin-v2 a.btn-status[data-value="confirmed"].pj-button-active,
body.admin-v2 a.btn-status[data-value="confirmed"].pj-button-active:link {
	background: #2a8000 !important; border-color: #2a8000 !important; color: #fff !important;
}
body.admin-v2 a.btn-status[data-value="pending"],
body.admin-v2 a.btn-status[data-value="pending"]:hover {
	background: #fdf4e7 !important; border-color: #f2d9b3 !important; color: #a86a08 !important;
}
body.admin-v2 a.btn-status[data-value="pending"].pj-button-active,
body.admin-v2 a.btn-status[data-value="pending"].pj-button-active:link {
	background: #ef8f0d !important; border-color: #ef8f0d !important; color: #fff !important;
}
body.admin-v2 a.btn-status[data-value="in_progress"],
body.admin-v2 a.btn-status[data-value="in_progress"]:hover {
	background: #fdecec !important; border-color: #f5c6c2 !important; color: #c0392b !important;
}
body.admin-v2 a.btn-status[data-value="in_progress"].pj-button-active,
body.admin-v2 a.btn-status[data-value="in_progress"].pj-button-active:link {
	background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important;
}
body.admin-v2 a.btn-status[data-value="cancelled"],
body.admin-v2 a.btn-status[data-value="cancelled"]:hover {
	background: #eef0f2 !important; border-color: #d5dae0 !important; color: #6b7178 !important;
}
body.admin-v2 a.btn-status[data-value="cancelled"].pj-button-active,
body.admin-v2 a.btn-status[data-value="cancelled"].pj-button-active:link {
	background: #8a9199 !important; border-color: #8a9199 !important; color: #fff !important;
}
body.admin-v2 a.pj-button.btn-filter-notes-for-support,
body.admin-v2 a.pj-button.btn-filter-notes-for-support:hover {
	background: #f3eefb !important; border-color: #ddd0ee !important; color: #6f4ba3 !important;
}
body.admin-v2 a.btn-filter-notes-for-support.pj-button-active,
body.admin-v2 a.btn-filter-notes-for-support.pj-button-active:link {
	background: #7d5ba6 !important; border-color: #7d5ba6 !important; color: #fff !important;
}
/* generic Active (T) / Inactive (F) datagrid filters (Users, Extras, Vouchers,
   Email Themes, …): Active = green, Inactive = grey. Same tinted / solid pattern. */
body.admin-v2 a.btn-status[data-value="T"],
body.admin-v2 a.btn-status[data-value="T"]:hover {
	background: #eef6ea !important; border-color: #cfe3c4 !important; color: #256e02 !important;
}
body.admin-v2 a.btn-status[data-value="T"].pj-button-active,
body.admin-v2 a.btn-status[data-value="T"].pj-button-active:link {
	background: #2a8000 !important; border-color: #2a8000 !important; color: #fff !important;
}
body.admin-v2 a.btn-status[data-value="F"],
body.admin-v2 a.btn-status[data-value="F"]:hover {
	background: #eef0f2 !important; border-color: #d5dae0 !important; color: #6b7178 !important;
}
body.admin-v2 a.btn-status[data-value="F"].pj-button-active,
body.admin-v2 a.btn-status[data-value="F"].pj-button-active:link {
	background: #8a9199 !important; border-color: #8a9199 !important; color: #fff !important;
}

/* ---------- form fields (.pj-form-field) -------------------------------- */
/* Keep the existing field structure/markup; just normalise the *look* so every
   control matches. The legacy .pj-form-field carries an inset grey box-shadow
   and forces text inputs to height:14px, while <select>s have no height — so on
   some platforms (notably Windows Chrome) selects render as grey boxes that
   don't line up with the white inputs next to them. Flatten the shadow, set an
   explicit white background/border, and give inputs and selects one consistent
   height so rows line up. Widths stay governed by the existing w-classes;
   box-sizing:border-box just keeps padding/border inside that width (no
   overflow). No markup / id / class / name is touched. */
body.admin-v2 select.pj-form-field,
body.admin-v2 input.pj-form-field,
body.admin-v2 textarea.pj-form-field {
	background-color: #fff;
	border: 1px solid #cfd6dd;
	box-shadow: none;
	border-radius: 3px;
	padding: 6px 10px;
	box-sizing: border-box;
	color: #5a5f66;
	vertical-align: middle;
}
body.admin-v2 input[type="text"].pj-form-field,
body.admin-v2 input[type="password"].pj-form-field,
body.admin-v2 input[type="email"].pj-form-field,
body.admin-v2 select.pj-form-field {
	height: 34px;
}
body.admin-v2 textarea.pj-form-field { height: auto; min-height: 70px; }
/* "Note for support team" (add/edit booking) — give it a bit more room to type in */
body.admin-v2 #notes_for_support { min-height: 150px; }
/* Vehicle extras limitations: widen the extra-name label so long ones
   (e.g. "10 min extra stop in same town") fit on one line beside the qty select */
body.admin-v2 .fleet-extra-name { width: 210px; }
/* Options pages (#frmOptions) — many value fields are sized w60 (60px), which
   clipped values like "100.00" and left the wide Value column mostly empty.
   Give the short inputs and the plain selects a bit more room. Scoped to the
   options form so w60 fields elsewhere keep their size. */
body.admin-v2 #frmOptions input.pj-form-field.w60 { width: 100px; }
body.admin-v2 #frmOptions select.pj-form-field { min-width: 140px; }
/* Selects: take full control of the box (appearance:none) and draw our own caret.
   The legacy <select> keeps its native OS widget, and a forced height + padding on
   a native select makes Firefox crop the selected text vertically ("dropdown
   selections cut off"). With appearance:none the value sits inside our padding box
   and is never clipped, and the control now matches the white text inputs on every
   browser. padding-right leaves room for the caret. Markup/id/class untouched. */
body.admin-v2 select.pj-form-field {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 30px;
	line-height: 1.4;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23888888' stroke-width='1.6' d='M2 4.5 L6 8.5 L10 4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px 12px;
}
body.admin-v2 select.pj-form-field::-ms-expand { display: none; }
/* Legacy admin.css uses `.form p, .p { overflow: hidden }` purely as a float
   clearfix. That hidden overflow also CLIPS anything a child paints outside the
   paragraph — notably the "chosen" (.chzn-drop) dropdown list on the inquiry /
   bookings selects, which opens below the box and was getting cut off (only a
   sliver of the options showed). Swap the clearfix for display:flow-root, which
   still establishes a block-formatting context (contains the floats, and the
   paragraph still shrinks beside the floated results column, so widths are
   unchanged) but no longer clips — the dropdown can now open in full. */
body.admin-v2 .form p,
body.admin-v2 .form .p,
body.admin-v2 .pj-form .p { overflow: visible; display: flow-root; margin-bottom: 4px; }
/* Extras form: the "Show photo" / "Ask for an address" checkbox rows. The floated .title label
   has padding-top:6px, but the checkbox column had none, so the box + hint sat a few px above the
   label. Match the label's top offset and vertically centre the checkbox with its hint so the row
   lines up with the label. */
body.admin-v2 .form p.pj-extra-check-row > span.inline_block { padding-top: 3px; }
body.admin-v2 .form p.pj-extra-check-row input[type="checkbox"] { vertical-align: middle; margin: 0 7px 0 0; position: relative; top: -1px; }
body.admin-v2 .form p.pj-extra-check-row .pj-form-hint { vertical-align: middle; }
/* Date/time pickers ship as narrow fields (w120 / w90) that clipped the value
   (e.g. "19-08-2026 00:00" or a full "01-08-2026"). Widen them enough to show
   the whole date (and time) without touching the shared w-classes. */
body.admin-v2 input.datetimepick { width: 160px; }
body.admin-v2 input.datepick { width: 120px; }
/* The Unique ID field only holds a short booking number, so the shared w400
   made it needlessly wide; trim it to sit like the other rows. */
body.admin-v2 #uuid { width: 180px; }
/* "chosen" widgets (chosen 0.9.8, chzn-* markup) enhance the searchable selects
   on the inquiry generator and bookings. Their stock skin is a grey gradient box
   that reads as broken next to the flat white inputs. Reskin the closed box, the
   caret and the dropdown to match the rest of admin_v2. Behaviour is untouched —
   this only restyles chosen's own generated elements. */
body.admin-v2 .chzn-container-single .chzn-single {
	box-sizing: border-box;
	height: 34px;
	line-height: 22px;
	padding: 5px 30px 5px 10px;
	background: #fff;
	background-image: none;
	border: 1px solid #cfd6dd;
	border-radius: 3px;
	box-shadow: none;
	color: #5a5f66;
}
body.admin-v2 .chzn-container-single .chzn-single span { margin-right: 0; }
body.admin-v2 .chzn-container-single .chzn-single div { width: 26px; border: none; background: none; }
body.admin-v2 .chzn-container-single .chzn-single div b {
	background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23888888' stroke-width='1.6' d='M2 4.5 L6 8.5 L10 4.5'/%3E%3C/svg%3E") no-repeat center center;
	background-size: 12px 12px;
}
body.admin-v2 .chzn-container-active .chzn-single,
body.admin-v2 .chzn-container-active .chzn-single-with-drop {
	border: 1px solid #b9c2c8;
	box-shadow: none;
	background: #fff;
}
body.admin-v2 .chzn-container .chzn-drop {
	border: 1px solid #cfd6dd;
	border-radius: 0 0 3px 3px;
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
	/* box-sizing:border-box so the border is included in the JS-set width
	   (chosen sizes the drop to container.outerWidth-2); otherwise the border
	   pushed the open list a couple of px past the field's right edge. Do NOT set
	   an explicit width here — the drop is position:fixed and chosen's JS keeps
	   its width/left in sync with the field. */
	box-sizing: border-box;
}
body.admin-v2 .chzn-container-single .chzn-search input {
	background: #fff;
	border: 1px solid #cfd6dd;
	border-radius: 3px;
	padding: 5px 8px;
	/* chosen sets this input's width inline from the select's width; with our
	   added padding/border and content-box it spilled past the dropdown. Fill the
	   search row and count padding+border in the width so it stays inside. */
	box-sizing: border-box;
	width: 100% !important;
}
body.admin-v2 .chzn-container .chzn-results .highlighted {
	background: #163842;
	background-image: none;
	color: #fff;
}
body.admin-v2 .chzn-container .chzn-results li em { background: #dbe6ea; }
/* chosen sets a fixed pixel width on its container (copied from the select's
   w400). On the inquiry form the left paragraphs shrink beside the floated
   customer-details column, so that fixed 400px overflowed the paragraph and
   overlapped the column (previously hidden by the clip we removed). Let the
   widget fill its paragraph instead, so it always fits whatever space is left
   beside the float — no overlap at any width. */
body.admin-v2 .form p .inline-block:has(.chzn-container),
body.admin-v2 .form .p .inline-block:has(.chzn-container) { display: flow-root; }
body.admin-v2 .form p .chzn-container,
body.admin-v2 .form .p .chzn-container { width: auto !important; max-width: 400px; display: block; }
/* Select2 widgets (the searchable pick-up / drop-off / vehicle / driver selects on
   the bookings and inquiry-generator forms) copy the underlying select's fixed px
   width (w500 on bookings, w300 on the inquiry generator), too wide to sit beside
   the floated label on a narrower column -- so they wrapped UNDER the label. Let
   the value span fill the column beside the label and the select2 box fill that
   span (capped at 500px), so it stays inline and shrinks to fit at any width.
   Scoped to body.admin-v2 forms, so the front booking widget is untouched; the
   select2 dropdown re-measures the container on open, so behaviour is unchanged. */
body.admin-v2 .form p > span.inline-block:has(> .select2-container),
body.admin-v2 .form p > span.inline_block:has(> .select2-container),
body.admin-v2 .form .p > span.inline-block:has(> .select2-container),
body.admin-v2 .pj-form .p > span.inline-block:has(> .select2-container) { display: block; overflow: hidden; }
body.admin-v2 .form p > span.inline-block:has(> .select2-container) > .select2-container,
body.admin-v2 .form p > span.inline_block:has(> .select2-container) > .select2-container,
body.admin-v2 .form .p > span.inline-block:has(> .select2-container) > .select2-container,
body.admin-v2 .pj-form .p > span.inline-block:has(> .select2-container) > .select2-container { width: 100% !important; max-width: 500px; }
/* Plain wide fields (class w400) in the admin forms hit the same wrap: a w400
   text input or native select is too wide to sit beside the 150px label on a
   narrow column, so it drops under the label (e.g. booking "Discount Code", the
   inquiry-generator "Select inquiry theme"). Same tight, structure-matched scope
   as the select2 rule above -- fill the column beside the label and cap the field
   at its natural 400px, so it stays inline and shrinks to fit. The value span is
   only filled when it is the row's LAST element (:last-child): a row that puts
   action buttons in a second span after the field (e.g. the booking address +
   Generate/Check-link buttons) is left inline so those buttons stay on the same
   line. Id-specific widths like #uuid out-specify this and keep theirs. */
body.admin-v2 .form p > span.inline-block:has(> .pj-form-field.w400):last-child,
body.admin-v2 .form .p > span.inline-block:has(> .pj-form-field.w400):last-child,
body.admin-v2 .pj-form .p > span.inline-block:has(> .pj-form-field.w400):last-child { display: block; overflow: hidden; }
body.admin-v2 .form p > span.inline-block:has(> .pj-form-field.w400):last-child > .pj-form-field.w400,
body.admin-v2 .form .p > span.inline-block:has(> .pj-form-field.w400):last-child > .pj-form-field.w400,
body.admin-v2 .pj-form .p > span.inline-block:has(> .pj-form-field.w400):last-child > .pj-form-field.w400 { width: 100%; max-width: 400px; box-sizing: border-box; }
/* when a multilang flag follows the field, leave room for it so it isn't clipped
   by the fill (id-specific widths like #uuid keep theirs -- id out-specifies this) */
body.admin-v2 .form p > span.inline-block:has(> .pj-form-field.w400):last-child:has(> .pj-multilang-input) > .pj-form-field.w400,
body.admin-v2 .form .p > span.inline-block:has(> .pj-form-field.w400):last-child:has(> .pj-multilang-input) > .pj-form-field.w400,
body.admin-v2 .pj-form .p > span.inline-block:has(> .pj-form-field.w400):last-child:has(> .pj-multilang-input) > .pj-form-field.w400 { width: calc(100% - 40px); }
/* TinyMCE (.mceEditor) is initialised with a fixed pixel width in the page JS
   (the inquiry editor uses width:1000). On the fluid admin_v2 layout that
   overflows narrower cards and gets clipped by #wrapper overflow-x:hidden — the
   editor looked "cut off". Cap the whole widget and its inner iframe to the
   container width so it always fits; the toolbar simply wraps to more rows. */
/* the editor's wrapper span is shrink-to-fit, so it sizes to the fixed-width
   editor and a plain max-width can't rein it in — make just that wrapper block
   so the cap below is measured against the paragraph (card) width. */
body.admin-v2 .form p .inline_block:has(.mce-tinymce),
body.admin-v2 .form .p .inline_block:has(.mce-tinymce),
body.admin-v2 .form p .inline-block:has(.mce-tinymce) { display: block; max-width: 100%; }
body.admin-v2 .mce-tinymce.mce-container { width: auto !important; max-width: 100% !important; box-sizing: border-box; }
body.admin-v2 .mce-tinymce .mce-container-body { max-width: 100%; }
body.admin-v2 .mce-tinymce .mce-edit-area,
body.admin-v2 .mce-tinymce iframe { max-width: 100% !important; }
/* Icon prefix/suffix boxes (the "%", the calendar icon, €, …) must sit flush
   with their field. Match their height to the 34px input and, crucially, keep
   the input's *inner* corners square so it butts up against the box with no
   seam — the general border-radius:3px above would otherwise round that inner
   corner and open a visible gap. */
body.admin-v2 .pj-form-field-after,
body.admin-v2 .pj-form-field-before { height: 34px; box-sizing: border-box; }
body.admin-v2 .pj-form-field-custom-before .pj-form-field { border-radius: 0 3px 3px 0; }
body.admin-v2 .pj-form-field-custom-after .pj-form-field { border-radius: 3px 0 0 3px; }
body.admin-v2 .pj-form-field-icon-text { line-height: 32px; }
/* Keep an icon box and its field on ONE row, even inside a tight cell (e.g. the
   Taxes table's narrow "Tax" column, where the %-box used to wrap above the
   input). inline-flex lays box + field in a row; the field may shrink but never
   stacks. */
body.admin-v2 .pj-form-field-custom-before,
body.admin-v2 .pj-form-field-custom-after { display: inline-flex; vertical-align: middle; max-width: 100%; }
body.admin-v2 .pj-form-field-custom-before > .pj-form-field,
body.admin-v2 .pj-form-field-custom-after > .pj-form-field { flex: 0 1 auto; min-width: 0; }
body.admin-v2 .pj-form-field-custom-before > .pj-form-field-before,
body.admin-v2 .pj-form-field-custom-after > .pj-form-field-after { flex: 0 0 auto; }
/* Fleet seasonal 'Period' pricing rows (Saturday/Sunday etc.) are a fixed 35px
   tall in admin.css; the normalised 34px fields left barely any gap, so the
   stacked rows looked cramped ("dính"). Give each row enough height that the
   34px field has a clear ~12px gap to the next row. */
body.admin-v2 .period-wrapper .period-dates { height: 46px; }
/* When a day is set to 'Period', its rows sit right under the day's %/valid
   controls with no gap (they wrap below on normal widths). Add a little top
   space so the day row isn't stuck to the period rows below it. */
body.admin-v2 .pjAdditionalDiscountPeriod { margin-top: 12px; }

/* compact icon-only button (e.g. the invoice Taxes "Remove" trash icon) — keeps
   the table narrow so it fits its column without a scrollbar. */
body.admin-v2 .pj-icon-btn { padding: 6px 10px; line-height: 1; }
body.admin-v2 .pj-icon-btn .fa { font-size: 14px; }
body.admin-v2 .pj-icon-btn:not([disabled]):hover {
	color: #c0392b !important;
	border-color: #c9a6a1 !important;
	background: #fff none !important;
}
body.admin-v2 .pj-form-field:focus {
	border-color: #163842;
	box-shadow: 0 0 4px rgba(22, 56, 66, .35);
}

/* ---------- modal (jQuery UI dialog) ------------------------------------ */
/* Dialogs are appended to <body> (which carries .admin-v2), so these apply. */
body.admin-v2 .ui-widget-overlay { background: #000; opacity: .45; }
body.admin-v2 .ui-dialog {
	border: none;
	border-radius: 4px;
	padding: 0;
	box-shadow: 0 5px 25px rgba(0, 0, 0, .3);
	background: #fff;
}
body.admin-v2 .ui-dialog .ui-dialog-titlebar {
	background: #163842;
	color: #fff;
	border: none;
	border-radius: 4px 4px 0 0;
	padding: 12px 16px;
	font-weight: 600;
}
body.admin-v2 .ui-dialog .ui-dialog-titlebar .ui-dialog-title { color: #fff; }
body.admin-v2 .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
	background: transparent;
	border: none;
	color: #fff;
	opacity: 1;
}
/* the close control is a jQuery-UI sprite glyph that renders dark, so it looks
   dim on the red header. Force it to pure white (brightness(0)->black,
   invert(1)->white) so it stands out; dim slightly on hover. */
body.admin-v2 .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon {
	filter: brightness(0) invert(1);
	opacity: 1;
}
body.admin-v2 .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover { opacity: .8; }
body.admin-v2 .ui-dialog .ui-dialog-content { padding: 18px 16px; color: #676a6c; }
body.admin-v2 .ui-dialog .ui-dialog-buttonpane {
	border-top: 1px solid #e7eaec;
	margin-top: 0;
	padding: 10px 16px;
	background: #f9fafb;
	border-radius: 0 0 4px 4px;
}
body.admin-v2 .ui-dialog .ui-dialog-buttonpane .ui-button {
	background: #fff;
	border: 1px solid #d1dade;
	color: #555;
	border-radius: 3px;
	padding: 6px 16px;
	font-weight: 600;
	margin-left: 6px;
}
body.admin-v2 .ui-dialog .ui-dialog-buttonpane .ui-button:hover {
	background: #163842;
	border-color: #163842;
	color: #fff;
}
body.admin-v2 .ui-dialog .ui-dialog-buttonpane .ui-button:focus,
body.admin-v2 .ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-focus { outline: none; }
body.admin-v2 .pj-button:focus { outline: none; }

/* ---------- tabs (jQuery UI) -------------------------------------------- */
/* Two visually distinct levels:
   - MAIN tabs = the Options nav bar (optmenu.php, tagged .av2-optmenu): folder
     tabs — the active tab is a white card with a green top accent, sitting on a
     strong green base line. Reads as the primary "section" switcher.
   - SUB tabs = a page's own jQuery UI tabs: smaller, flat underline tabs, so
     they clearly read as secondary.
   The nav is laid out with flexbox wrap and every tab is forced to equal height
   (li/a stretch to fill), so multi-row tab bars always align hard-left — the
   floated jQuery UI tabs used to "staircase" off the taller active tab (e.g.
   Backup not starting at the left of its row). */
body.admin-v2 .ui-tabs {
	border: none;
	padding: 0;
	background: transparent;
}
body.admin-v2 .ui-tabs .ui-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: transparent;
	border: none;
	border-bottom: 1px solid #e7eaec;
	border-radius: 0;
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}
body.admin-v2 .ui-tabs .ui-tabs-nav li {
	display: flex;
	float: none;
	border: none;
	background: transparent;
	margin: 0;
	padding: 0;
	border-radius: 3px 3px 0 0;
	list-style: none;
}
body.admin-v2 .ui-tabs .ui-tabs-nav li a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	color: #707b87;
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: none;
}

/* sub tabs (default) — small, flat, underline on active */
body.admin-v2 .ui-tabs .ui-tabs-nav li a { padding: 8px 14px; font-size: 12px; font-weight: 600; }
body.admin-v2 .ui-tabs .ui-tabs-nav li a:hover { color: #163842; }
body.admin-v2 .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
	color: #163842;
	font-weight: 700;
	border-bottom: 2px solid #163842;
	margin-bottom: -1px;
}

/* main tabs (Options nav) — now fully redundant. Every tab in this bar
   (General, Bookings, Export emails, Email themes, Inquiry templates, WhatsApp,
   Languages, Backup, Invoices, SMS, Transfers, Vehicles, Discounts, Reports,
   Dialing codes, Users, Install) was promoted to a top-level item in the sidebar
   (leftmenu.php), so showing it too is duplicate navigation. Hide the whole bar.
   The booking sub-tab bar (opt_submenu.php — no .av2-optmenu class) is a genuine
   sub-navigation and is left visible. The folder-card styling below is kept
   (harmless while hidden) so the bar can be restored by dropping this one rule. */
body.admin-v2 .av2-optmenu { display: none; }
body.admin-v2 .ui-tabs.av2-optmenu .ui-tabs-nav { border-bottom: 2px solid #163842; }
body.admin-v2 .ui-tabs.av2-optmenu .ui-tabs-nav li { margin: 0 3px 0 0; }
body.admin-v2 .ui-tabs.av2-optmenu .ui-tabs-nav li a {
	padding: 11px 18px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 4px 4px 0 0;
}
body.admin-v2 .ui-tabs.av2-optmenu .ui-tabs-nav li a:hover { color: #163842; background: #f2f5f2; }
body.admin-v2 .ui-tabs.av2-optmenu .ui-tabs-nav li.ui-tabs-active a {
	color: #163842;
	font-weight: 700;
	background: #fff;
	border: 1px solid #dfe3e6;
	border-top: 3px solid #163842;
	border-bottom: none;
	margin-bottom: -2px;
	padding-top: 9px;
}
body.admin-v2 .ui-tabs .ui-tabs-panel { padding: 15px 5px; }

/* wide tables must scroll instead of being clipped by #wrapper overflow-x:hidden
   (e.g. the transfer drop-off table's rightmost "Order" column, the language
   translate grid, the invoice Taxes table in its narrow column). The legacy
   design was a fixed 1300px canvas; now the content is fluid, so fixed-width
   tables that no longer fit scroll within their own box instead of clipping. */
body.admin-v2 .tr-dropoff-container,
body.admin-v2 .content-middle .overflow:not(.block) { overflow-x: auto; }
/* ".block overflow" is a narrow single-field wrapper (pickup/return date pickers
   on inquiry, bookings, arrival-notice) — it never overflows, so it must NOT get
   overflow-x:auto: Firefox draws a persistent grey scrollbar track under the
   field (a "broken layout" strip). Only the wide table containers above scroll. */
/* the locale translate grid's scroll wrappers (top scrollbar + the table below)
   already have overflow:auto but no width cap, so they grow to the very wide
   table and overflow the card. Cap them to the card width; their own overflow
   then scrolls the wide table horizontally instead of clipping it. */
body.admin-v2 .plugin_locale_wrapper_top,
body.admin-v2 .plugin_locale_wrapper_bottom { max-width: 100%; }
/* The Taxes table now fits its (wider) column, so let it shrink to its content
   with inline-block — display:block stretched it to the full column width and
   the pj-table's top/left border then ran on past the last (icon) column. Keep
   overflow-x:auto + max-width:100% as a scroll fallback on very narrow windows. */
body.admin-v2 #tblTaxes { display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: top; }
/* ...and give it a clean single-line grid. The settings-card style used
   border-collapse:separate + a table border sitting OUTSIDE the cells' own borders,
   so the edge read as a doubled/excess frame; dropping the table border then left the
   left edge with no line at all. Collapse the borders so every edge -- including the
   left -- is a single 1px line, no doubling, no rounded card. */
body.admin-v2 form.pj-form table.pj-table#tblTaxes { border-collapse: collapse; border: 0; border-radius: 0; }
body.admin-v2 form.pj-form table.pj-table#tblTaxes > thead > tr > th,
body.admin-v2 form.pj-form table.pj-table#tblTaxes > tbody > tr > td { border: 0; border-bottom: 1px solid #e3e8ec; }
/* report cards include their 20px padding inside the 100% width (no overflow) */
body.admin-v2 .card { box-sizing: border-box; }

/* Users grid: keep the role badge (e.g. "reservations manager") on a single line.
   The Role column is widened in pjAdminUsers.js to give it the room; this stops the
   inline badge text wrapping inside the cell. */
body.admin-v2 #grid .label-status[class*="user-role-"] { white-space: nowrap; }
/* Datagrid headers: the sort label wraps by default (white-space:normal), and with
   the grid's table-layout:auto a wrapping header lets the column shrink instead of
   growing -- so a long header like "Registration date/time" broke onto two lines
   regardless of the column's width hint. Keep header labels on one line; the column
   then auto-sizes to fit the full header text (font-independent). */
body.admin-v2 #grid .pj-table-sort-label { white-space: nowrap; }

/* Permission-refused toast: shown by inspinia-init.js when a backend AJAX action
   is blocked by the gate ({code:100, Forbidden}) -- a brief, non-blocking notice
   so the user knows the action was not allowed instead of it failing silently. */
body.admin-v2 .av2-perm-toast {
	display: none;
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3000;
	max-width: 92%;
	padding: 12px 18px;
	background: #b5342f;
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(8, 20, 26, .35);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

/* Transfer add/edit — give the Drop-off grid its own full-width row.
   The .title label normally floats left and eats ~150px, squeezing the
   many-column drop-off table into the remaining space so it needs a
   horizontal scrollbar. Drop the label onto its own line above the grid
   so the table can use the full content width; with the trimmed cell
   padding below, the columns then fit without scrolling on normal screens.
   On a narrow screen the grid still exceeds the card, so scroll it here
   instead of letting the page overflow-x:clip cut off the right columns.
   overflow-x must be set on THIS #id rule (not via .tr-dropoff-container):
   the container is also a ".p" inside ".pj-form", and the earlier
   ".pj-form .p { overflow: visible }" rule (specificity 0,3,1) out-weighs
   ".tr-dropoff-container { overflow-x: auto }" (0,2,1); only the #id here
   (1,1,1) wins. On the create view the inner .overflow div scrolls first,
   so this container never needs to. */
body.admin-v2 #tr_dropoff_container { display: flow-root; overflow-x: auto; }
body.admin-v2 #tr_dropoff_container > .title {
	float: none;
	display: block;
	width: auto;
	margin-bottom: 8px;
}
/* Vehicle add/edit — the free-text fields (Vehicle, Model, Badget) carry class
   w400, too wide to sit beside the 150px floated label in a half-width column, so
   they wrapped UNDER the label while the narrower selects (Base station, Price
   per, ...) stayed inline -- leaving the two columns misaligned row-to-row.
   Make the value area fill the column beside the label (block + BFC) and let the
   text input flex to that width (capped at its 400px) so it stays inline like the
   selects AND shrinks to fit on a narrow screen instead of wrapping. Scoped to
   `.float_left > p` in the two fleet forms; the Seasonal-Prices rows below don't
   match (their <p> is not a direct child of a .float_left). */
body.admin-v2 #frmUpdateFleet .float_left > p > span.inline_block,
body.admin-v2 #frmCreateFleet .float_left > p > span.inline_block {
	display: block;
	overflow: hidden;
}
body.admin-v2 #frmUpdateFleet .float_left > p input.pj-form-field.w400,
body.admin-v2 #frmCreateFleet .float_left > p input.pj-form-field.w400 {
	width: calc(100% - 40px);
	max-width: 400px;
	box-sizing: border-box;
	vertical-align: middle;
}
/* trim the per-cell horizontal padding so the columns fit the reclaimed
   width; the fields themselves keep their existing w* widths. */
body.admin-v2 #tr_dropoff_table td,
body.admin-v2 #tr_dropoff_table th { padding-left: 4px; padding-right: 4px; }
/* the drop-off Address input carries the class "w120", but lib.css never
   defines .w120 (it jumps w110 -> w130), so the input auto-grows to its
   value and blows the Address column out to ~185px — the main reason the
   grid overflowed. Give it a fixed, compact width scoped to this table. */
body.admin-v2 #tr_dropoff_table input.w120 { width: 110px; }
/* the price-level and icon selects have no width class, so they auto-grow
   to their longest option; cap the single selects for a little headroom.
   Exclude the area multi-select (.select-areas) — it is enhanced by the
   "chosen" plugin, which sizes its own widget. */
body.admin-v2 #tr_dropoff_table select:not(.select-areas) { max-width: 180px; }
/* Drop-off row fields were compacted to fit without scrolling; the fluid layout
   has spare width, so give each field a more usable size. Selectors use the
   existing width classes / field name prefixes (name^=) so cloned rows added via
   "Add +" match too — no class or id names are changed (JS relies on them). */
body.admin-v2 #tr_dropoff_table select[name^="base_station"] { width: 170px; }
body.admin-v2 #tr_dropoff_table select[name^="price_level"]  { width: 150px; }
body.admin-v2 #tr_dropoff_table input.w110                   { width: 170px; }
body.admin-v2 #tr_dropoff_table input[name^="region"]        { width: 140px; }
body.admin-v2 #tr_dropoff_table input[name^="driving_time"]  { width: 80px; }
body.admin-v2 #tr_dropoff_table .chzn-container-multi        { width: 260px !important; max-width: none !important; }
/* the drop-off "Areas" multi-select (chosen) defaulted to ~29px, shorter than
   the 34px fields beside it. Use min-height (NOT a fixed height) so its empty /
   single-line state lines up with the other fields, while it still grows taller
   on its own as more area chips wrap onto new lines. */
body.admin-v2 #tr_dropoff_table .chzn-container-multi .chzn-choices {
	min-height: 34px;
	box-sizing: border-box;
}

/* Areas add/edit — the Google-map holder has a fixed 1276px width that is
   wider than the fluid content card, so its right edge was clipped by the
   page's overflow-x:clip. Make it fluid (cap at its original 1276px) so it
   fits the card at any width; the map canvas inside is already width:100%. */
body.admin-v2 .sbs-map-holder { width: 100%; max-width: 1276px; }

/* Transfers list — the Import Prices <input type=file> carries the text-field
   skin (.pj-form-field) plus an inline height:14px, which squashed the native
   "Choose File" control into a broken sliver. Size it naturally (auto height,
   fit its content) so it lines up with the Import/Export buttons beside it. */
body.admin-v2 #frmImportPrices input[type="file"] {
	height: auto !important;
	width: auto;
	padding: 5px 8px;
	line-height: normal;
	vertical-align: middle;
}

/* Transfer add/edit — the pick-up "Area" select is enhanced by "chosen", whose
   single widget rendered only ~106px, too short to read the area names. Give it
   more width, and pin its height/line-height to match the other 34px form fields
   (the #id out-weighs the generic ".form p .chzn-container" / chosen skin). */
body.admin-v2 #pickup_area_id_chzn { width: 260px !important; max-width: none !important; }
body.admin-v2 #pickup_area_id_chzn .chzn-single {
	height: 34px !important;
	line-height: 22px !important;
	padding: 5px 30px 5px 10px !important;
	box-sizing: border-box;
}

/* Datagrid action column (the trailing edit/delete icon cell). Some grids set a
   very large fixed width on the name column (e.g. Notes uses width:900), which
   squeezes this last cell so the two icons wrap onto two rows. Shrink it to its
   content and keep the icons on a single line so they always sit side by side.
   Scoped to .pj-grid (the datagrid wrapper) so the static pj-table layouts
   elsewhere — locale translations, invoice, options — are left untouched. */
body.admin-v2 .pj-grid .pj-table td:last-child,
body.admin-v2 .pj-grid .pj-table th:last-child { white-space: nowrap; width: 1%; }

/* Listing action icons — the row edit/delete/copy/view controls are icon-only
   <a> tags painted with legacy PNG sprites (pj-edit.png, pj-delete.png, ...),
   which look dated next to the Font Awesome (4.7) icons the rest of the theme
   uses. Swap the sprite for the matching FA glyph. CSS-ONLY: the datagrid JS
   binds to .pj-table-icon-edit / -delete / -copy / -view, so the class names
   are kept exactly as-is — nothing in the markup or JS changes. */
body.admin-v2 .pj-table .pj-table-icon-edit,
body.admin-v2 .pj-table .pj-table-icon-delete,
body.admin-v2 .pj-table .pj-table-icon-copy,
body.admin-v2 .pj-table .pj-table-icon-permissions,
body.admin-v2 .pj-table .pj-table-icon-menu,
body.admin-v2 .pj-table .pj-table-icon-view {
	display: inline-block;
	background: #fff !important;
	background-position: 0 0 !important;
	width: 28px;
	height: 28px;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid #dbe1e6;
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	font: normal normal normal 14px/26px FontAwesome;
	color: #5a6b73;
	vertical-align: middle;
	margin: 0 3px 0 0;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
body.admin-v2 .pj-table .pj-table-icon-edit::before        { content: "\f040"; } /* pencil  */
body.admin-v2 .pj-table .pj-table-icon-copy::before        { content: "\f0c5"; } /* files-o */
body.admin-v2 .pj-table .pj-table-icon-view::before        { content: "\f06e"; } /* eye     */
body.admin-v2 .pj-table .pj-table-icon-permissions::before { content: "\f013"; } /* cog     */
body.admin-v2 .pj-table .pj-table-icon-delete::before { content: "\f1f8"; } /* trash   */
body.admin-v2 .pj-table .pj-table-icon-delete { color: #e5403c; border-color: #f0cfcc; }
body.admin-v2 .pj-table .pj-table-icon-edit:hover,
body.admin-v2 .pj-table .pj-table-icon-copy:hover,
body.admin-v2 .pj-table .pj-table-icon-permissions:hover,
body.admin-v2 .pj-table .pj-table-icon-menu:hover,
body.admin-v2 .pj-table .pj-table-icon-view:hover {
	background: #f4f7f9 !important;
	background-position: 0 0 !important;
	border-color: #c3ccd2;
	color: #163842;
}
body.admin-v2 .pj-table .pj-table-icon-delete:hover {
	background: #fdecec !important;
	background-position: 0 0 !important;
	border-color: #e5403c;
	color: #b32b23;
}
/* "Choose Action" bulk dropdown caret: the legacy arrow is absolute-positioned
   at a fixed top:10px, which sits too high in the taller admin_v2 button. Anchor
   it to the button and centre it vertically with the "Choose Action" label. The
   button's own padding-right (14px) let the label run under the caret, so reserve
   room on the right for a clear gap between the text and the arrow. */
body.admin-v2 #content .pj-paginator .pj-paginator-button-actions { position: relative; padding-right: 26px; }
body.admin-v2 #content .pj-paginator .pj-paginator-button-actions .pj-button-arrow-down {
	top: 50%;
	margin-top: -2px;
	right: 11px;
}
/* Row "more actions" dropdown (e.g. invoices: View / Print / Email). The toggle
   was a legacy grey button with a PNG down-arrow sprite, out of step with the
   edit/delete icon buttons above. Hide the sprite, render a Font Awesome
   "more" glyph in the same 28px box, and give the pop-up menu a themed card.
   These are generic datagrid classes, so every listing that uses this menu
   picks the styling up. CSS-only — markup/JS and the menu's positioning are
   left untouched. */
body.admin-v2 .pj-table .pj-table-icon-menu .pj-button-arrow-down { display: none !important; }
/* Centre the ellipsis reliably: overlay the glyph on the whole button box and
   flex-centre it, so it can't be pushed off-centre by the hidden sprite span or
   the inherited line-height. */
body.admin-v2 .pj-table .pj-table-icon-menu { position: relative; }
body.admin-v2 .pj-table .pj-table-icon-menu::before {
	content: "\f142"; /* ellipsis-v (more) */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
body.admin-v2 .pj-menu-list-wrap {
	background: #fff !important;
	border: 1px solid #dbe1e6 !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 18px rgba(20,40,50,.12);
	padding: 4px 0;
}
/* The inner <ul> carries its own border/bg/shadow/radius from the legacy
   pj-table.css; the themed card now lives on .pj-menu-list-wrap above, so strip
   the ul's frame or it shows as a second box nested inside the wrap. */
body.admin-v2 .pj-menu-list { margin: 0; padding: 0; list-style: none; background: none; border: 0; border-radius: 0; box-shadow: none; }
body.admin-v2 .pj-menu-list li { margin: 0; }
body.admin-v2 .pj-menu-list li a {
	display: block;
	padding: 7px 16px;
	color: #163842;
	text-decoration: none;
	font: 600 12px/1.4 "Open Sans", "Helvetica Neue", Arial, sans-serif;
	white-space: nowrap;
}
body.admin-v2 .pj-menu-list li a:hover {
	background: #eef1f3;
	color: #163842;
}
/* Non-link items in the menu (e.g. the "Items per page" heading, which is a
   <li><span> not a <li><a>) get no padding from the rule above, so the text sat
   flush against the card edge. Give it the same horizontal padding as the links
   and a muted heading colour. */
body.admin-v2 .pj-menu-list li > span {
	display: block;
	padding: 6px 16px;
	color: #9aa3ab;
}

/* Form row-remove / delete controls — the add/edit forms (vehicle prices &
   discount periods, transfer drop-offs, station prices, unavailable dates) use
   an icon-only anchor painted with the legacy grey pj-delete.png sprite, and
   the invoice-config Taxes table uses a dark trash button. Render them all as
   the theme's red trash glyph in a light bordered box, matching the listing
   delete icon. CSS-only — the JS keeps binding to the same classes. */
body.admin-v2 .lnkRemovePrice,
body.admin-v2 .lnkRemovePriceDay,
body.admin-v2 .period-wrapper .period-dates .period-remove,
body.admin-v2 .pj-remove-dropoff,
body.admin-v2 .lnk-remove {
	background: #fff !important;
	background-position: 0 0 !important;
	width: 28px;
	height: 28px;
	padding: 0 !important;
	box-sizing: border-box;
	border: 1px solid #f0cfcc;
	border-radius: 4px;
	text-align: center;
	line-height: 26px;
	font: normal normal normal 14px/26px FontAwesome;
	color: #e5403c;
	text-decoration: none;
}
body.admin-v2 .lnkRemovePrice::before,
body.admin-v2 .lnkRemovePriceDay::before,
body.admin-v2 .period-wrapper .period-dates .period-remove::before,
body.admin-v2 .pj-remove-dropoff::before,
body.admin-v2 .lnk-remove::before { content: "\f1f8"; } /* trash */
body.admin-v2 .lnkRemovePrice:hover,
body.admin-v2 .lnkRemovePriceDay:hover,
body.admin-v2 .period-wrapper .period-dates .period-remove:hover,
body.admin-v2 .pj-remove-dropoff:hover,
body.admin-v2 .lnk-remove:hover {
	background: #fdecec !important;
	background-position: 0 0 !important;
	border-color: #e5403c;
	color: #b32b23;
}
/* invoice-config Taxes: dark trash button -> red bordered icon like the lists */
body.admin-v2 .pj-remove-tax.pj-icon-btn {
	background: #fff !important;
	border: 1px solid #f0cfcc !important;
	border-radius: 4px;
	color: #e5403c !important;
	width: 28px;
	height: 28px;
	min-width: 0;
	padding: 0 !important;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
body.admin-v2 .pj-remove-tax.pj-icon-btn .fa { color: #e5403c; font-size: 14px; }
body.admin-v2 .pj-remove-tax.pj-icon-btn:hover { background: #fdecec !important; border-color: #e5403c !important; }
body.admin-v2 .pj-remove-tax.pj-icon-btn:hover .fa { color: #b32b23; }

/* ---------- dashboard --------------------------------------------------- */
/* The legacy dashboard is a fixed 742px column framed by background images.
   Make it fluid so it fills the full-width content card, and give the blocks
   a modern card look. Markup/ids/classes are untouched. */
body.admin-v2 .dashboard_header {
	width: auto;
	height: auto;
	background: none;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 20px;
}
body.admin-v2 .dashboard_header .item {
	width: auto;
	height: auto;
	flex: 1 1 240px;
	min-height: 84px;
	float: none;
	background: #fff;
	border: 1px solid #e7eaec;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
body.admin-v2 .dashboard_header .item .stat { top: 20px; left: 20px; }

/* margin-bottom separates the calendar/chart row from the bookings/transfers box
   above — otherwise the calendar sits glued to the bottom of the latest-bookings
   list. */
body.admin-v2 .dashboard_box { width: auto; margin-bottom: 28px; }
body.admin-v2 .dashboard_top,
body.admin-v2 .dashboard_middle,
body.admin-v2 .dashboard_bottom { background: none; height: auto; }
body.admin-v2 .dashboard_top { display: flex; gap: 20px; align-items: flex-start; }
body.admin-v2 .dashboard_middle { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
body.admin-v2 .dashboard_column_top,
body.admin-v2 .dashboard_column {
	width: auto;
	/* flex-basis:0 + min-width:0 keeps the two booking columns a stable 50/50 side
	   by side. With the old `flex:1 1 300px` and the default min-width:auto, a long
	   booking line (e.g. a vehicle name) forced the "latest bookings" column wider
	   than half, so "today's transfers" wrapped onto its own row below it. */
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
}
body.admin-v2 .dashboard_column {
	border: 1px solid #e7eaec;
	border-radius: 3px;
	background: #fff;
	min-height: 220px;
}
body.admin-v2 .dashboard_column_top { font-weight: 600; color: #33414e; }

/* The dashboard has two top-level floated blocks: the stats + bookings column,
   and the calendar + chart column. Sit them side by side so the calendar/chart
   fill the space beside the (now narrower) bookings instead of dropping onto a
   second row below them. On narrower screens they fall back to full-width
   stacked so nothing is squashed. */
body.admin-v2 #content > .float_left:has(.dashboard_box) { width: 61%; float: left; margin-right: 0; box-sizing: border-box; padding-right: 24px; }
body.admin-v2 #content > .float_left:has(.pjDashboardCalendar) { width: 39%; float: left; margin: 0; box-sizing: border-box; }
body.admin-v2 #content > .float_left:has(.pjDashboardCalendar) .float_left.w500 { width: 100%; }
body.admin-v2 .pjDashboardCalendar { width: 100%; max-width: 100%; }
body.admin-v2 #chart-1 { width: 100%; }
@media (max-width: 1199px) {
	body.admin-v2 #content > .float_left:has(.dashboard_box),
	body.admin-v2 #content > .float_left:has(.pjDashboardCalendar) { width: 100%; float: none; padding-right: 0; }
}

/* ---------- report stat-card % badges ----------------------------------- */
/* The Reports cards (orange/blue/green) show a small % pill. The page's own
   .badge uses a very light dark overlay (rgba(0,0,0,.2)) and the up/down colour
   sits on the *wrapper* (inherited by the badge), so on the coloured cards the
   figure barely reads. Give the pill a solid-dark background with bold WHITE
   default text, colour the % itself bright green/red *directly on the badge*,
   and keep the comparison amount white — so every number is clearly legible on
   any card. Scoping with body.admin-v2 out-specifies the page's bare rules. */
body.admin-v2 .badge {
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-weight: 700;
	padding: 3px 9px;
	min-width: 58px;
}
body.admin-v2 .comp-row strong { color: #fff; }
body.admin-v2 .text-up .badge { color: #66f593; }
body.admin-v2 .text-down .badge { color: #ff8a8a; }

/* ---------- login / forgot-password screen (body.av2-login) ------------- */
body.av2-login { background: #f3f3f4; min-height: 100vh; }
body.av2-login #container,
body.av2-login #middle { width: auto; margin: 0; padding: 0; background: none; min-height: 0; }
body.av2-login .av2-login-middle {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
body.av2-login #login-content {
	width: 100%;
	max-width: 400px;
	min-height: 0;
	height: auto;
	margin: 0;
	background: #fff;
	border: 1px solid #e7eaec;
	border-top: 3px solid #163842;
	border-radius: 4px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
	padding: 32px 30px;
	box-sizing: border-box;
}
/* Two-factor challenge — let the cards stand alone (drop the login tile chrome) */
body.av2-login #login-content:has(.av2-2fa) { background: transparent; border: none; box-shadow: none; padding: 0; max-width: 440px; }
body.av2-login .av2-2fa { width: 100%; }
body.av2-login .av2-2fa-card { background: #fff; border: 1px solid #edeff1; border-radius: 12px; padding: 22px 20px; margin: 0 0 16px; text-align: center; box-shadow: 0 1px 2px rgba(20,40,50,.05); }
body.av2-login .av2-2fa-ic { width: 52px; height: 52px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; margin: 0 0 10px; }
body.av2-login .av2-2fa-ic.teal { background: #20515f; }
body.av2-login .av2-2fa-ic.amber { background: #f18b2c; }
body.av2-login .av2-2fa-card h3 { margin: 0 0 6px; font-size: 16px; color: #1c2a31; }
body.av2-login .av2-2fa-sub { margin: 0 0 14px; color: #66727a; font-size: 13px; }
body.av2-login .av2-2fa-form { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
body.av2-login .av2-2fa-code { width: 160px; text-align: center; letter-spacing: 6px; font-size: 20px; font-weight: 700; padding: 9px 10px; border: 1px solid #cfd6dd; border-radius: 8px; box-sizing: border-box; }
body.av2-login .av2-2fa-btn { border-radius: 8px; }
body.av2-login .av2-2fa-btn.ghost { background: #163842; border-color: #163842; }
body.av2-login .av2-2fa-apps { margin: 12px 0 0; color: #9aa7ad; font-size: 12px; }
body.av2-login .av2-2fa-notice { border-radius: 8px; padding: 9px 12px; margin: 0 0 14px; font-size: 13px; text-align: center; }
body.av2-login .av2-2fa-notice.ok { background: #e9f5e3; color: #227000; }
body.av2-login .av2-2fa-notice.err { background: #fdecec; color: #b3271f; }
/* login-page notices (session timeout / wrong credentials) — themed pill that
   replaces the legacy pink label.err box (which overlapped the first field) */
body.av2-login .av2-login-notice { border-radius: 8px; padding: 9px 12px; margin: 0 0 16px; font-size: 13px; line-height: 1.4; text-align: left; }
body.av2-login .av2-login-notice.err { background: #fdecec; color: #b3271f; border: 1px solid #f5c6c2; }
body.av2-login .av2-login-notice.ok { background: #e9f5e3; color: #227000; border: 1px solid #cfe3c4; }
body.av2-login .av2-2fa-foot { text-align: center; margin: 2px 0 0; }
body.av2-login .av2-2fa-back { color: #f18b2c; font-weight: 700; text-decoration: none; }
body.av2-login .av2-2fa-back:hover { text-decoration: underline; }
body.av2-login .av2-2fa-log { margin: 14px 0 0; color: #9aa7ad; font-size: 12px; }
/* Profile page: two columns side by side (profile left, 2FA right) */
body.admin-v2 .pj-profile-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
body.admin-v2 .pj-profile-col { flex: 1 1 380px; min-width: 300px; }
body.admin-v2 .pj-2fa-col { flex: 1 1 340px; min-width: 300px; }
/* Two-factor panel on the Profile page */
body.admin-v2 .pj-2fa-panel { padding: 8px 4px 4px; }
/* the setup link is an <a> (inline by default); make it a block-flow button so
   its padding no longer overlaps the descriptive text above it */
body.admin-v2 .pj-2fa-panel a.pj-button { display: inline-block; margin-top: 6px; }
body.admin-v2 .pj-2fa-offtxt { margin: 0 0 4px; }
body.admin-v2 .pj-2fa-qr { margin: 6px 0 10px; }
body.admin-v2 .pj-2fa-qr svg { width: 176px; height: 176px; border: 1px solid #edeff1; border-radius: 8px; background: #fff; }
body.admin-v2 .pj-2fa-secret code { background: #f2f5f7; border: 1px solid #e6ebee; border-radius: 5px; padding: 2px 7px; font-weight: 700; letter-spacing: 1px; }
body.admin-v2 .pj-2fa-on { color: #227000; font-weight: 700; }
body.admin-v2 .pj-2fa-code { text-align: center; letter-spacing: 4px; font-weight: 700; }
/* --- 2FA panel: more breathing room + a clearer "Add another device" action --- */
body.admin-v2 .pj-2fa-on { margin: 4px 0 12px; font-size: 14px; }
body.admin-v2 .pj-2fa-off-btn { margin-bottom: 2px; }
/* the add-device block is a separate action -> divider + space so it stands apart
   from the Disable button above it */
body.admin-v2 .pj-2fa-adddev { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e6ebee; }
body.admin-v2 .pj-2fa-adddev > p { margin: 0 0 12px; color: #5a6b73; }
/* "Add another device": a clear outlined secondary button instead of a faint link */
body.admin-v2 a.pj-2fa-adddev-btn,
body.admin-v2 a.pj-2fa-adddev-btn:link,
body.admin-v2 a.pj-2fa-adddev-btn:visited { background: #fff none !important; border: 1px solid #163842 !important; color: #163842 !important; margin-top: 0; }
body.admin-v2 a.pj-2fa-adddev-btn:not([disabled]):hover { background: #eef1f3 !important; border-color: #163842 !important; color: #163842 !important; }
body.admin-v2 a.pj-2fa-adddev-btn .fa { margin-right: 6px; }
body.av2-login .av2-login-brand { text-align: center; margin-bottom: 20px; }
/* crop the logo's built-in navy padding (object-fit) so the login tile isn't
   overly tall; hide the vX.X line here too. */
body.av2-login .av2-login-logo { display: block; width: 130px; max-width: 100%; height: auto; margin: 0 auto; }
body.av2-login .av2-login-brand span { display: none; }
body.av2-login .login-box { width: auto; height: auto; background: none; padding: 0; overflow: visible; }
body.av2-login #login-content h3 {
	color: #33414e;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 20px;
}
body.av2-login .form p,
body.av2-login .form .p { margin: 0 0 14px; overflow: visible; padding: 0; }
body.av2-login .form .title { float: none; display: block; width: auto; padding: 0 0 6px; color: #676a6c; font-weight: 600; }
/* the submit row carries an empty "&nbsp;" title label that renders as a blank
   line above the button — hide it so the button sits close to the last field. */
body.av2-login .form p:has(input[type="submit"]) .title,
body.av2-login .form p:has(.pj-button) .title { display: none; }

/* input + icon prefix as a single group */
body.av2-login .pj-form-field-custom,
body.av2-login .pj-form-field-custom-before { display: flex; }
body.av2-login .pj-form-field-before {
	float: none;
	width: 38px;
	height: auto;
	margin: 0;
	border: 1px solid #d1dade;
	border-right: none;
	border-radius: 3px 0 0 3px;
	background: #f4f5f7;
	display: flex;
	align-items: center;
	justify-content: center;
}
body.av2-login .pj-form-field-before abbr { background: none; width: auto; height: auto; position: static; display: block; }
body.av2-login .pj-form-field-icon-email:before { content: "\f0e0"; font-family: FontAwesome; color: #8a94a0; }
body.av2-login .pj-form-field-icon-password:before { content: "\f023"; font-family: FontAwesome; color: #8a94a0; }
body.av2-login .pj-form-field-custom-before .pj-form-field {
	flex: 1;
	width: auto;
	height: auto;
	float: none;
	border: 1px solid #d1dade;
	border-radius: 0 3px 3px 0;
	padding: 8px 10px;
	font-size: 13px;
	line-height: 18px;
	box-sizing: border-box;
}
body.av2-login .pj-form-field-before { width: 36px; font-size: 13px; }
body.av2-login .pj-form-field:focus { border-color: #163842; box-shadow: 0 0 4px rgba(22, 56, 66, .35); }

/* submit button + links */
body.av2-login .pj-button {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px;
	margin: 4px 0 0;
	background: #163842 none !important;
	border: 1px solid #163842;
	color: #fff;
	border-radius: 3px;
	font: 600 13px/1.4 "Open Sans", "Helvetica Neue", Arial, sans-serif;
	box-shadow: none !important;
}
body.av2-login .pj-button:hover {
	background: #1d4a57 none !important;
	border-color: #1d4a57 !important;
	color: #fff !important;
}
body.av2-login .no-decor,
body.av2-login .l10 { display: inline-block; margin: 14px 0 0; color: #163842; text-decoration: none; font-size: 13px; }
body.av2-login .no-decor:hover { text-decoration: underline; }
body.av2-login em { margin: 12px 0 0; display: block; }
body.av2-login label.err { text-align: left; display: block; }

/* ---------- jQuery-UI dialog buttons (delete / action confirmations) --------
   These dialogs are built by jQuery UI, so their buttons are .ui-button (not
   .pj-button) and both rendered in the same neutral grey — hard to tell apart.
   Skin them with the theme colours and give the primary action and Cancel
   distinct colours: the confirm/primary action is always the first button
   (Delete / OK / Save) -> red; every other button (Cancel) -> teal. */
body.admin-v2 .ui-dialog .ui-dialog-buttonpane button.ui-button {
	background: #163842;
	border: 1px solid #163842;
	color: #fff;
	border-radius: 3px;
	padding: 6px 16px;
	margin-left: 8px;
	font: 600 12px/1.4 "Open Sans", "Helvetica Neue", Arial, sans-serif;
	text-shadow: none;
}
body.admin-v2 .ui-dialog .ui-dialog-buttonpane button.ui-button:hover {
	background: #1d4a57;
	border-color: #1d4a57;
}
body.admin-v2 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-button:first-child {
	background: #e5403c;
	border-color: #e5403c;
}
body.admin-v2 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.ui-button:first-child:hover {
	background: #cf352f;
	border-color: #cf352f;
}

/* ---------- Bookings advanced search: two columns side by side --------------
   The advanced-search dropdown has two columns (pickup/dropoff/date | email/
   name/phone), each a legacy .w600. 600+600 overflowed the panel so the 2nd
   column wrapped underneath. Lay the form out with flexbox and let each column
   shrink to its content (a 120/150px label + a 300px field, ~430px), so the two
   sit side by side and stay that way on narrower / high-DPI screens too (a fixed
   500px each still wrapped once the panel dropped below ~1000px). They wrap only
   when the panel is genuinely too narrow for both. */
body.admin-v2 .frm-filter-advanced {
	display: flex;
	flex-wrap: wrap;
	column-gap: 28px;
	align-items: flex-start;
}
body.admin-v2 .frm-filter-advanced .float_left { float: none; width: auto; }
body.admin-v2 .frm-filter-advanced .clear_both { display: none; }
/* the pick-up / drop-off selects are enhanced by a select plugin (select2 here,
   "chosen" in the other build) whose widget rendered narrower than the text
   fields in the right column, so the left column looked cramped. Give both
   plugins' widgets a comfortable fixed width.
   NB: the generic select2 responsive rule above (".form p > span.inline-block
   :has(> .select2-container) > .select2-container { width:100% }") also matches
   these and would otherwise win on specificity, collapsing the widget to the
   (narrow) span width inside this flex column. These selectors repeat that same
   span>container chain and add ".frm-filter-advanced .float_left" on top, so
   they out-specify it; the span is kept inline-block so the fixed width governs. */
body.admin-v2 .frm-filter-advanced .float_left p > span.inline-block:has(> .select2-container) { display: inline-block; overflow: visible; }
body.admin-v2 .frm-filter-advanced .float_left p > span.inline-block:has(> .select2-container) > .select2-container,
body.admin-v2 .frm-filter-advanced .float_left .chzn-container { width: 400px !important; max-width: none !important; }
/* the transfer-date field ships as w90 (90px), too tight to show a full date --
   widen it to sit comfortably with the selects above it. */
body.admin-v2 .frm-filter-advanced .float_left input.datepick.w90 { width: 220px; }

/* Add / edit booking form (#frmCreateBooking): the pick-up, drop-off, vehicle,
   client, driver and country selects are enhanced by select2. select2 resolves
   its width from the control, but INSPINIA forces plain selects to width:100%,
   so the widget rendered full-width (~1100px) and could not sit beside the
   150px floated label — it dropped onto its own line. Constrain it to the
   intended field width so it lines up inline with the plain-input rows. */
body.admin-v2 #frmCreateBooking .select2-container,
body.admin-v2 #frmUpdateBooking .select2-container,
body.admin-v2 #frmInquiryGenerator .select2-container { width: 500px !important; max-width: 100% !important; vertical-align: middle; }
/* the phone dialing-code field ships as w40 (40px), too narrow to show a full
   code like "+84" — it clipped to "+8". Widen it. The add form is
   #frmCreateBooking, the edit form is #frmUpdateBooking, so cover both. */
body.admin-v2 #frmCreateBooking #c_dialing_code,
body.admin-v2 #frmUpdateBooking #c_dialing_code,
body.admin-v2 #frmInquiryGenerator #c_dialing_code { width: 62px !important; text-align: center; }
/* Invoice edit + create forms. The issue-date picker sits in a narrow
   general-info column and, at the shared 120px datepicker width, wrapped below
   its label. Trim it so it fits inline (still fits a dd-mm-yyyy date). */
body.admin-v2 #frmUpdateInvoice input.datepick,
body.admin-v2 #frmCreateInvoice input.datepick { width: 100px !important; }
/* Payment information amount fields were only 80px; widen them for readability. */
body.admin-v2 #frmUpdateInvoice .pj-form-field.number,
body.admin-v2 #frmCreateInvoice .pj-form-field.number { width: 140px !important; }
/* Invoice-number field (w100) clipped a full invoice number; widen it. */
body.admin-v2 #frmUpdateInvoice input[name="uuid"],
body.admin-v2 #frmCreateInvoice input[name="uuid"] { width: 135px !important; }
/* the Send-PDF / Download-PDF buttons carry an inline color:inherit that made
   their label invisible on the dark button; force white like the other buttons */
body.admin-v2 #frmUpdateInvoice a.pj-button,
body.admin-v2 #frmCreateInvoice a.pj-button { color: #fff !important; }
/* the select2 option list (appended to <body>, so it is matched at body scope,
   not inside the form): recolour the hovered / keyboard-highlighted option from
   INSPINIA's green (#11511a) to the sidebar navy so it matches admin_v2. */
body.admin-v2 .select2-container--default .select2-results__option--highlighted[aria-selected],
body.admin-v2 .select2-container--default .select2-results__option--highlighted[aria-selected=true] { background-color: #163842 !important; color: #fff !important; }

/* ---------- Inquiry generator: rebalance the two columns --------------------
   The right (customer/preview) block was a fixed 600px, leaving the left (input)
   column the smaller of the two. Trim the right block and its fields so the left
   input column is clearly the larger one. */
body.admin-v2 #frmInquiryGenerator .float_right.w600 { width: 460px; }
body.admin-v2 #frmInquiryGenerator .float_right.w600 .pj-form-field.w400 { width: 300px; }

/* ---------- Add/edit vehicle: Extras quantity selects were too small --------
   The per-extra quantity <select> uses .w50 (50px), too narrow for a 2-digit
   value plus the dropdown arrow (the number was clipped). Widen them a little. */
body.admin-v2 select[id^="extra_"] { width: 64px; }

/* ---------- Set prices: widen the price inputs -----------------------------
   The price cells use .w50 (50px) so values like "39.00" were clipped. Give the
   price inputs a bit more room. */
body.admin-v2 input[name^="price_"] { width: 72px; }

/* ======================================================================
   admin_v2 Dashboard (pjAdmin::pjActionIndex) — KPI tiles, today's
   schedule, latest bookings, availability calendar, status widget, chart
   and clock. Markup uses .av2d-* classes; single (light) admin theme.
   ====================================================================== */
body.admin-v2 .av2d{display:flex;flex-direction:column;gap:16px}
body.admin-v2 .av2d *{box-sizing:border-box}

/* KPI tiles */
body.admin-v2 .av2d-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
body.admin-v2 .av2d-kpi{background:#fff;border:1px solid #e2e8ec;border-radius:12px;padding:15px 16px;box-shadow:0 1px 2px rgba(20,40,50,.04),0 4px 16px rgba(20,40,50,.05)}
body.admin-v2 .av2d-krow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
body.admin-v2 .av2d-lab{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6b7a83;font-weight:700}
body.admin-v2 .av2d-ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
body.admin-v2 .av2d-ic.k-red{background:#fdecea;color:#e5403c}
body.admin-v2 .av2d-ic.k-teal{background:#e6f2f6;color:#2688a5}
body.admin-v2 .av2d-ic.k-amber{background:#fcf2e2;color:#a86a08}
body.admin-v2 .av2d-ic.k-green{background:#eef6ea;color:#256e02}
body.admin-v2 .av2d-val{font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.05;color:#1c2a31;font-variant-numeric:tabular-nums}

/* content grid */
body.admin-v2 .av2d-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
body.admin-v2 .av2d-col{display:flex;flex-direction:column;gap:16px;min-width:0}

/* card */
body.admin-v2 .av2d-card{background:#fff;border:1px solid #e2e8ec;border-radius:12px;box-shadow:0 1px 2px rgba(20,40,50,.04),0 4px 16px rgba(20,40,50,.05);overflow:hidden}
body.admin-v2 .av2d-card>.hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid #eef1f3}
body.admin-v2 .av2d-card>.hd h2{font-size:14px;font-weight:700;color:#1c2a31;display:flex;align-items:center;gap:8px;margin:0}
body.admin-v2 .av2d-card>.hd h2 .fa{color:#163842;font-size:14px}
/* header action links (view all / Print): show them as subtle pill buttons
   rather than plain underlined text. The chart's prev/next caret nav also uses
   .hd-links, so exclude it (it keeps its own bare-icon styling). */
body.admin-v2 .av2d-card>.hd .hd-links:not(.av2d-chartnav) a{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#5a6b74;text-decoration:none;margin-left:8px;padding:4px 12px;border:1px solid #e2e8ec;border-radius:20px;background:#fff;transition:color .15s,border-color .15s,background .15s}
body.admin-v2 .av2d-card>.hd .hd-links:not(.av2d-chartnav) a:hover{color:#163842;border-color:#f2b8b6;background:#fdf3f3;text-decoration:none}
body.admin-v2 .av2d-card>.hd .hd-badge{font-size:12px;font-weight:700;color:#6b7a83;background:#f2f5f7;border:1px solid #e2e8ec;padding:1px 9px;border-radius:20px;font-variant-numeric:tabular-nums}
/* small muted period note next to a card title (e.g. "This month") */
body.admin-v2 .av2d-card>.hd .hd-note{font-size:11px;font-weight:600;color:#93a2aa;text-transform:none;letter-spacing:0;margin-left:1px}
body.admin-v2 .av2d-card>.bd{padding:8px 10px 10px}

/* status pills */
body.admin-v2 .av2d-pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;letter-spacing:.01em}
body.admin-v2 .av2d-pill.confirmed{color:#256e02;background:#eef6ea}
body.admin-v2 .av2d-pill.pending{color:#a86a08;background:#fdf4e7}
body.admin-v2 .av2d-pill.cancelled{color:#6b7178;background:#eef0f2}
/* the status enum also has in_progress and passed_on — give them pills too, in
   the system's status colours (in_progress = red, passed_on = amber). */
body.admin-v2 .av2d-pill.in_progress{color:#c0392b;background:#fdecec}
body.admin-v2 .av2d-pill.passed_on{color:#a86a08;background:#fdf4e7}

/* today's schedule */
body.admin-v2 .av2d-sched{display:flex;flex-direction:column}
body.admin-v2 .av2d-trip{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:start;padding:11px 8px;border-radius:9px}
body.admin-v2 .av2d-trip+.av2d-trip{border-top:1px solid #eef1f3}
body.admin-v2 .av2d-trip:hover{background:#f7f9fa}
body.admin-v2 .av2d-trip .t-time{text-align:center}
body.admin-v2 .av2d-trip .t-time b{display:block;font-size:15px;font-weight:800;letter-spacing:-.3px;color:#1c2a31;font-variant-numeric:tabular-nums}
body.admin-v2 .av2d-trip .t-time span{font-size:10.5px;color:#93a2aa;text-transform:lowercase}
body.admin-v2 .av2d-trip .t-nm{font-weight:700;font-size:13.5px;color:#2688a5;text-decoration:none}
body.admin-v2 .av2d-trip .t-nm:hover{color:#163842;text-decoration:none}
body.admin-v2 .av2d-trip .t-route{display:flex;align-items:center;gap:7px;color:#6b7a83;font-size:12.5px;margin-top:3px;flex-wrap:wrap}
body.admin-v2 .av2d-trip .t-route .pin{color:#38474e;font-weight:600}
body.admin-v2 .av2d-trip .t-route .fa{color:#aab7bd;font-size:11px}
body.admin-v2 .av2d-trip .t-meta{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
body.admin-v2 .av2d-trip .chip{font-size:11px;color:#6b7a83;background:#f2f5f7;border:1px solid #e6ebee;padding:1px 7px;border-radius:6px;display:inline-flex;gap:5px;align-items:center}
body.admin-v2 .av2d-trip .chip .fa{font-size:10px;color:#93a2aa}
body.admin-v2 .av2d-trip .t-stat{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
body.admin-v2 .av2d-trip .t-drv{font-size:11.5px;color:#6b7a83;display:flex;align-items:center;gap:6px}
body.admin-v2 .av2d-trip .t-av{width:19px;height:19px;border-radius:50%;background:#1d4a57;color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}

/* latest bookings */
body.admin-v2 .av2d-blist{display:flex;flex-direction:column}
/* fixed-width status column so the booking info starts at the same x on every
   row regardless of how wide the pill label is (In Progress vs Pending, etc.) */
body.admin-v2 .av2d-brow{display:grid;grid-template-columns:100px 1fr auto;gap:12px;align-items:start;padding:11px 8px;border-radius:9px}
/* centre the pill in its fixed column; long translations wrap instead of overlap */
body.admin-v2 .av2d-brow .av2d-pill{white-space:normal;max-width:100%;justify-self:center;text-align:center}
/* keep the status pill and the amount lined up with the customer name (top),
   so multi-line rows (long addresses) don't push them out of alignment */
body.admin-v2 .av2d-brow .av2d-pill,
body.admin-v2 .av2d-brow .b-amt{margin-top:1px}
body.admin-v2 .av2d-brow .av2d-confirm,
body.admin-v2 .av2d-brow .av2d-confirm-wrap,
body.admin-v2 .av2d-brow .av2d-confirm-slot{align-self:center}
body.admin-v2 .av2d-brow .av2d-confirm-slot{position:relative;justify-self:end}
/* prominent pickup date/time — the most operationally important field */
body.admin-v2 .b-when{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#1c2a31;margin-top:3px;font-variant-numeric:tabular-nums}
body.admin-v2 .b-when .fa{font-size:11px;color:#163842}
body.admin-v2 .av2d-brow+.av2d-brow{border-top:1px solid #eef1f3}
body.admin-v2 .av2d-brow:hover{background:#f7f9fa}
body.admin-v2 .av2d-brow .b-cust{font-weight:700;font-size:13.5px;color:#1c2a31}
/* clickable content links (customer names) read as links: one consistent link
   colour, no underline; hover deepens to the accent red. */
body.admin-v2 .av2d-brow .b-cust a{color:#2688a5;text-decoration:none}
body.admin-v2 .av2d-brow .b-cust a:hover{color:#163842;text-decoration:none}
body.admin-v2 .av2d-brow .b-id{font-size:11px;color:#93a2aa;font-weight:600}
body.admin-v2 .av2d-brow .b-sub{color:#6b7a83;font-size:12px;margin-top:2px}
body.admin-v2 .av2d-brow .b-sub .fa{color:#aab7bd;font-size:10px;margin:0 2px}
body.admin-v2 .av2d-brow .b-amt{font-weight:800;font-size:14px;color:#1c2a31;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Needs-confirmation rows carry a quick "Confirm" action as a 4th column */
body.admin-v2 .av2d-pendcard .av2d-brow{grid-template-columns:100px 1fr auto auto}
/* round-trip leg chips (Needs confirmation) — show which leg is confirmed vs still waiting */
body.admin-v2 .av2d-legs{display:flex;flex-wrap:wrap;gap:6px;margin:3px 0 1px}
body.admin-v2 .av2d-leg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;line-height:1.5;border-radius:20px;padding:1px 9px}
body.admin-v2 .av2d-leg .fa{font-size:10px}
body.admin-v2 .av2d-leg.is-done{color:#227000;background:#e9f5e3}
body.admin-v2 .av2d-leg.is-wait{color:#a86a08;background:#fdf4e7}
body.admin-v2 .av2d-confirm{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;font-size:12px;font-weight:700;color:#fff;background:#2a8000;border:none;border-radius:20px;padding:6px 13px;transition:background .15s,opacity .15s}
body.admin-v2 .av2d-confirm .fa{font-size:11px}
body.admin-v2 .av2d-confirm:hover{background:#227000}
body.admin-v2 .av2d-confirm.is-loading{opacity:.6;cursor:default}
body.admin-v2 .av2d-confirm-multi .fa-caret-down{font-size:11px;margin-left:0}
/* round-trip confirm menu (pickup / return / both). The pending card must allow
   overflow so this absolutely-positioned menu is not clipped by the card. */
body.admin-v2 .av2d-pendcard{overflow:visible}
body.admin-v2 .av2d-confirm-wrap{position:relative}
body.admin-v2 .av2d-confirm-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:30;min-width:156px;background:#fff;border:1px solid #e2e8ec;border-radius:10px;box-shadow:0 8px 22px rgba(20,40,50,.14);padding:5px;display:none}
body.admin-v2 .av2d-confirm-wrap.open .av2d-confirm-menu{display:block}
body.admin-v2 .av2d-confirm-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;border-radius:7px;padding:8px 10px;font-size:12.5px;font-weight:600;color:#38474e;cursor:pointer}
body.admin-v2 .av2d-confirm-menu button .fa{font-size:11px;color:#93a2aa;width:12px;text-align:center}
body.admin-v2 .av2d-confirm-menu button:hover{background:#eef6ea;color:#256e02}
body.admin-v2 .av2d-confirm-menu button:hover .fa{color:#2a8000}

/* notes widget (dashboard) — internal notes with inline add / edit / delete */
body.admin-v2 .av2d-notelist{display:flex;flex-direction:column}
body.admin-v2 .av2d-note{display:flex;align-items:flex-start;gap:10px;padding:11px 8px}
body.admin-v2 .av2d-note+.av2d-note{border-top:1px solid #eef1f3}
body.admin-v2 .av2d-note:hover{background:#f7f9fa}
body.admin-v2 .av2d-note .n-main{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;word-break:break-word}
body.admin-v2 .av2d-note .n-title{font-weight:700;font-size:13.5px;color:#1c2a31}
body.admin-v2 .av2d-note .n-subject{color:#38474e;font-size:12.5px;font-weight:600;margin-top:2px}
body.admin-v2 .av2d-note .n-body{color:#6b7a83;font-size:12px;margin-top:3px;line-height:1.5}
/* Inactive note: dim only the text content, not the edit/delete icons (so the actions
   stay equally legible on every row). */
body.admin-v2 .av2d-note.is-off .n-main{opacity:.55}
body.admin-v2 .av2d-note .n-actions{flex:0 0 auto;display:flex;gap:5px}
/* Match the Notes list-grid row icons (admin_v2 restyles .pj-table-icon-edit / -delete
   to a 28px white box with a 1px border; delete is red). Keep the dashboard note
   actions identical so the two surfaces look the same. */
body.admin-v2 .av2d-note .n-actions button{cursor:pointer;background:#fff;border:1px solid #dbe1e6;border-radius:4px;width:28px;height:28px;color:#5a6b73;font-size:13px;line-height:26px;text-align:center;transition:background .12s ease,border-color .12s ease,color .12s ease}
body.admin-v2 .av2d-note .n-actions button:hover{background:#f4f7f9;border-color:#c3ccd2;color:#163842}
body.admin-v2 .av2d-note .n-actions .av2d-note-del{color:#e5403c;border-color:#f0cfcc}
body.admin-v2 .av2d-note .n-actions .av2d-note-del:hover{background:#fdecec;border-color:#e5403c;color:#b32b23}
body.admin-v2 .hd-links a.av2d-note-add{display:inline-flex;align-items:center;gap:5px}
body.admin-v2 .hd-links a.av2d-note-add .fa{font-size:11px}
/* add/edit popup */
/* above the sidebar (#leftmenu is z-index:2000) so the overlay dims everything */
body.admin-v2 .av2d-nmodal{position:fixed;inset:0;z-index:3000}
body.admin-v2 .av2d-nmodal-ov{position:absolute;inset:0;background:rgba(0,0,0,.45)}
body.admin-v2 .av2d-nmodal-box{position:relative;max-width:560px;width:calc(100% - 32px);margin:5vh auto 0;max-height:90vh;display:flex;flex-direction:column;background:#fff;border-radius:6px;box-shadow:0 5px 25px rgba(0,0,0,.3);overflow:hidden}
body.admin-v2 .av2d-nmodal-hd{display:flex;align-items:center;justify-content:space-between;background:#163842;color:#fff;padding:12px 16px;font-weight:600}
body.admin-v2 .av2d-nmodal-x{background:transparent;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
body.admin-v2 .av2d-nmodal-bd{padding:16px;overflow:auto}
/* native multilang language bar (flags) inside the popup. The framework floats
   it right, which squeezes the first field beside it; force it onto its own
   full-width row (flags right-aligned) so every field below is the same width. */
body.admin-v2 .av2d-nmodal-langbar{float:none;overflow:hidden;text-align:right;margin:0 0 10px}
/* "?" help tip: the Notes page shows it (pj-form.css sprite). That sprite/css is
   absent on the dashboard, so render it self-contained as a "?" chip matching the
   flag chips, instead of hiding it -- keeps the popup bar consistent with the Notes page. */
body.admin-v2 .av2d-nmodal .pj-form-langbar-tip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:22px;padding:0;border:1px solid #e1e6ea;border-radius:5px;background:#fff;box-sizing:border-box;color:#66727a;font-size:13px;font-weight:700;line-height:1;text-decoration:none}
body.admin-v2 .av2d-nmodal .pj-form-langbar-tip:hover{border-color:#163842;color:#163842}
body.admin-v2 .av2d-nmodal .pj-form-langbar-tip::before{content:"?"}
/* each field (one .pj-multilang-wrap per locale; the widget shows one at a time) */
body.admin-v2 .av2d-nfield{margin:0 0 12px}
body.admin-v2 .av2d-nlabel{display:block;font-size:12.5px;font-weight:600;color:#38474e;margin-bottom:4px}
body.admin-v2 .av2d-ml-input{display:flex;align-items:flex-start;gap:8px}
body.admin-v2 .av2d-ml-input .pj-form-field{flex:1 1 auto;width:auto;box-sizing:border-box}
body.admin-v2 .av2d-ml-input textarea.pj-form-field{resize:vertical;min-height:90px}
body.admin-v2 .av2d-ml-input .pj-form-field.err{border-color:#c0392b}
body.admin-v2 .av2d-ml-input .pj-multilang-input{flex:0 0 auto;margin-top:6px}
/* the Status field has no language flag; reserve the flag's width (16px) + gap
   (8px) so it lines up with the multilang fields above it */
body.admin-v2 .av2d-ml-nopflag{padding-right:24px}
body.admin-v2 .av2d-nmodal-ft{border-top:1px solid #e7eaec;padding:10px 16px;background:#f9fafb;display:flex;justify-content:flex-end;gap:8px}
/* language flag bar: the native jquery.multilang widget is styled by pj-form.css,
   which is only appended by the installer plugin and is absent on the dashboard —
   so the flag <abbr> collapses and the icons look broken. Size the flags here,
   self-contained, so they render as clean chips regardless of pj-form.css. The
   flag image is an inline background on the <abbr>; we just give it a box + contain. */
body.admin-v2 .av2d-nmodal .pj-form-langbar{display:inline-flex;gap:6px;align-items:center;float:none}
body.admin-v2 .av2d-nmodal .pj-form-langbar-item{display:inline-flex;align-items:center;justify-content:center;width:30px;height:22px;padding:0;border:1px solid #e1e6ea;border-radius:5px;background:#fff;box-sizing:border-box;opacity:.5;transition:opacity .15s,border-color .15s}
body.admin-v2 .av2d-nmodal .pj-form-langbar-item:hover{opacity:1}
body.admin-v2 .av2d-nmodal .pj-form-langbar-item-active{opacity:1;border-color:#163842}
body.admin-v2 .av2d-nmodal .pj-form-langbar-item abbr{display:block;width:20px;height:14px;margin:0;background-repeat:no-repeat;background-position:center;background-size:contain}
/* Cancel is the secondary action — match the white-outline "Cancel" look used
   elsewhere (see the input[type=reset]/[button] rule above) so the dark-teal Save
   stands out. This Cancel is a <button>, so that rule doesn't catch it. */
body.admin-v2 .av2d-nmodal .av2d-nmodal-cancel.pj-button{background:#fff none !important;border:1px solid #163842 !important;color:#163842 !important}
body.admin-v2 .av2d-nmodal .av2d-nmodal-cancel.pj-button:not([disabled]):hover{background:#eef1f3 none !important;border-color:#163842 !important;color:#163842 !important}
/* Delete-confirmation popup: a smaller box, and a red "Delete" primary button (the Cancel
   reuses the white-outline secondary style above). */
body.admin-v2 .av2d-nmodal-box-sm{max-width:440px}
/* Center the small delete-confirmation box on screen (the add/edit box stays top-anchored
   because it can be tall). Absolute-position so it works with the inline display:block. */
body.admin-v2 .av2d-nmodal-confirm .av2d-nmodal-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;width:calc(100% - 32px)}
body.admin-v2 .av2d-nmodal-confirm-text{margin:0;font-size:13.5px;color:#38474e;line-height:1.5}
body.admin-v2 .av2d-nmodal .av2d-nmodal-confirm-del.pj-button{background:#e5403c none !important;border:1px solid #e5403c !important;color:#fff !important}
body.admin-v2 .av2d-nmodal .av2d-nmodal-confirm-del.pj-button:not([disabled]):hover{background:#c0392b none !important;border-color:#c0392b !important;color:#fff !important}

/* empty state */
body.admin-v2 .av2d-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 10px;color:#93a2aa;font-size:13px}
body.admin-v2 .av2d-empty .fa{font-size:22px;opacity:.6}

/* status widget */
body.admin-v2 .av2d-status{display:flex;flex-direction:column;gap:11px;padding:12px 14px 14px}
body.admin-v2 .av2d-sbar .l{display:flex;justify-content:space-between;font-size:12.5px;color:#38474e;margin-bottom:5px}
/* right side of each status row: a small booking-count chip + the prominent
   revenue amount, both on one line */
body.admin-v2 .av2d-sbar .l b{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
/* count chip — clearly a quantity (car icon = number of transfers) */
body.admin-v2 .av2d-sbar .l .sb-count{font-size:11px;font-weight:700;color:#6b7a83;background:#f2f5f7;border:1px solid #e8edf0;border-radius:20px;padding:1px 9px;font-variant-numeric:tabular-nums}
body.admin-v2 .av2d-sbar .l .sb-count .fa{font-size:10px;color:#9aa7ad;margin-right:3px}
/* amount — the prominent figure (theme blockifies <em>, so force it inline) */
body.admin-v2 .av2d-sbar .l b em{display:inline;font-style:normal;font-weight:800;color:#1c2a31;font-size:13px;font-variant-numeric:tabular-nums}
body.admin-v2 .av2d-sbar .track{height:8px;border-radius:20px;background:#eef1f3;overflow:hidden}
body.admin-v2 .av2d-sbar .fill{height:100%;border-radius:20px}
body.admin-v2 .av2d-sbar .fill.confirmed{background:#2a8000}
body.admin-v2 .av2d-sbar .fill.pending{background:#ef8f0d}
body.admin-v2 .av2d-sbar .fill.in_progress{background:#ef4444}
body.admin-v2 .av2d-sbar .fill.cancelled{background:#8a9199}

/* calendar card: let the plugin table fill the card width */
body.admin-v2 .av2d-side .pjDashboardCalendar{float:none;width:100%}
body.admin-v2 .av2d-side .pjDashboardCalendar table.abCalendarTable{width:100% !important;table-layout:fixed !important;border-collapse:separate !important;border-spacing:3px !important;height:auto !important;background:transparent !important;border:none !important}
/* --- restyle the availability calendar to match the admin_v2 cards --- */
/* header: a solid brand-coloured banner bar with the chevrons pinned to the two
   outer ends and the month + year centred in white -- same layout as the
   reference calendar, but in our own theme colour (#163842) instead of green.
   The header is three separate <td> cells and the table has 3px cell-spacing, so
   a horizontal box-shadow on the middle cell bleeds over the two 3px gaps to
   make one seamless bar; only the outer cells are rounded. */
body.admin-v2 .av2d-side td.abCalendarMonth{background:#163842 !important;color:#fff !important;font-size:15px !important;font-weight:700 !important;text-align:center !important;border:none !important;padding:7px 0 !important;height:auto !important}
/* Only the true middle cell bleeds over both 3px gaps -- the prev/next cells also
   carry the abCalendarMonth class, so shadowing them too would poke square nubs
   past their rounded outer corners. */
body.admin-v2 .av2d-side td.abCalendarMonth:not(.abCalendarMonthPrev):not(.abCalendarMonthNext){box-shadow:-3px 0 0 #163842, 3px 0 0 #163842 !important}
/* prev/next columns MUST be one-eighth wide (not a fixed 40px): with
   table-layout:fixed the month row (prev + month colspan-6 + next) sets all the
   column widths, so pinning prev/next to 40px squeezed the week-number and Sunday
   columns while the middle days stayed wide -- the day squares came out uneven on
   desktop. 12.5% each = 8 equal columns, so every day cell lines up. */
body.admin-v2 .av2d-side td.abCalendarMonthPrev,
body.admin-v2 .av2d-side td.abCalendarMonthNext{background:#163842 !important;border:none !important;padding:7px 0 !important;height:auto !important;vertical-align:middle !important;text-align:center !important;width:12.5% !important}
body.admin-v2 .av2d-side td.abCalendarMonthPrev{border-radius:8px 0 0 8px !important}
body.admin-v2 .av2d-side td.abCalendarMonthNext{border-radius:0 8px 8px 0 !important}
/* the plugin wraps the nav link in a tall inner div (65px) that inflates the
   whole header row — collapse it so the header stays compact */
body.admin-v2 .av2d-side .abCalendarMonthInner{height:auto !important;line-height:1 !important;padding:0 !important;text-align:center !important}
body.admin-v2 .av2d-side td.abCalendarMonthPrev a,
body.admin-v2 .av2d-side td.abCalendarMonthNext a{display:inline-flex !important;align-items:center;justify-content:center;margin:0 auto !important;width:30px !important;height:30px !important;border:none !important;border-radius:6px !important;color:#fff !important;background:transparent !important;font-weight:700}
body.admin-v2 .av2d-side td.abCalendarMonthPrev a:hover,
body.admin-v2 .av2d-side td.abCalendarMonthNext a:hover{color:#fff !important;background:rgba(255,255,255,0.16) !important}
/* the plugin drew the arrows as a background sprite we replaced; add chevrons */
body.admin-v2 .av2d-side td.abCalendarMonthPrev a:after{content:"\2039";font-size:22px;line-height:1}
body.admin-v2 .av2d-side td.abCalendarMonthNext a:after{content:"\203A";font-size:22px;line-height:1}
/* weekday + week-number header cells */
body.admin-v2 .av2d-side td.abCalendarWeekDay,
body.admin-v2 .av2d-side td.abCalendarWeekNum{background:#fff !important;color:#93a2aa !important;font-size:11px !important;font-weight:700 !important;border:none !important;text-transform:uppercase}
/* day cells: soft tinted states matching our semantic palette, rounded */
body.admin-v2 .av2d-side td.abCalendarCell{border:none !important;font-weight:600 !important}
/* available + empty cells carry no fill — the table has no green "background
   block"; free days simply show a green number, and only occupied days
   (booked = red, pending = amber) are tinted so they stand out. */
/* each day's fill matches its legend swatch: available = green, pending =
   amber, booked = red, past = grey (empty filler stays blank). Text is white on
   the saturated states, dark on the light grey, so the numbers stay readable. */
body.admin-v2 .av2d-side td.abCalendarDate{background:#2a8000 !important;color:#fff !important;border:none !important;border-radius:8px !important}
body.admin-v2 .av2d-side td.abCalendarEmpty{background:transparent !important;border:none !important}
/* booked: cover EVERY reserved variant (full day + multi-night start/end/middle
   and mixed reserved-pending spans) so a booked day never reads as available. */
body.admin-v2 .av2d-side td.abCalendarReserved,
body.admin-v2 .av2d-side td.abCalendarReservedNightsStart,
body.admin-v2 .av2d-side td.abCalendarReservedNightsEnd,
body.admin-v2 .av2d-side td.abCalendarNightsReservedReserved,
body.admin-v2 .av2d-side td.abCalendarNightsReservedPending,
body.admin-v2 .av2d-side td.abCalendarNightsPendingReserved{background:#e5403c !important;background-image:none !important;color:#fff !important;border-radius:8px !important}
/* pending: full day + multi-night pending spans */
body.admin-v2 .av2d-side td.abCalendarPending,
body.admin-v2 .av2d-side td.abCalendarPendingNightsStart,
body.admin-v2 .av2d-side td.abCalendarPendingNightsEnd,
body.admin-v2 .av2d-side td.abCalendarNightsPendingPending{background:#ef8f0d !important;background-image:none !important;color:#fff !important;border-radius:8px !important}
body.admin-v2 .av2d-side td.abCalendarPast{background:#d5dae0 !important;color:#6b7a83 !important;border-radius:8px !important}
body.admin-v2 .av2d-side td.abCalendarToday{outline:2px solid #1c2a31 !important;outline-offset:-2px}
/* legend swatches */
body.admin-v2 .av2d-side .abCalendarColor{border-radius:3px !important}
body.admin-v2 .av2d-side .abCalendarColorAvailable{background:#2a8000 !important}
body.admin-v2 .av2d-side .abCalendarColorPending{background:#ef8f0d !important}
body.admin-v2 .av2d-side .abCalendarColorReserved{background:#e5403c !important}
body.admin-v2 .av2d-side .abCalendarColorPast{background:#d5dae0 !important}
/* legend: shrink the table to its content (core forces width:100% + an inline
   margin-left:20px, which left-aligns it) and centre it under the calendar */
body.admin-v2 .av2d-side .abCalendarLegend{color:#6b7a83 !important;font-size:11.5px !important;width:auto !important;margin:10px auto 14px !important;padding-top:8px !important;padding-bottom:6px !important}
/* space the legend groups apart: pad the left of each colour swatch so a gap
   opens between the previous label and the next group; the first swatch keeps
   no leading pad so the row stays centred */
body.admin-v2 .av2d-side .abCalendarLegend td.abCalendarColor{padding-left:20px !important}
body.admin-v2 .av2d-side .abCalendarLegend td.abCalendarColor:first-child{padding-left:0 !important}
body.admin-v2 .av2d-chartnav a{color:#93a2aa;font-size:15px;margin-left:8px}
body.admin-v2 .av2d-chartnav a:hover{color:#163842}

/* clock */
body.admin-v2 .av2d-clock{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
body.admin-v2 .av2d-clock .c-time{font-size:30px;font-weight:800;letter-spacing:-1px;color:#1c2a31;font-variant-numeric:tabular-nums}
body.admin-v2 .av2d-clock .c-date{text-align:right;font-size:12px;color:#6b7a83;line-height:1.5}
body.admin-v2 .av2d-clock .c-date b{display:block;font-size:13px;color:#1c2a31;text-transform:uppercase;letter-spacing:.06em}
body.admin-v2 .av2d-clock .c-date em{display:block;font-style:normal;font-size:11px;color:#93a2aa;margin-top:3px}

/* upcoming: day divider */
body.admin-v2 .av2d-day{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#93a2aa;padding:10px 8px 4px}
body.admin-v2 .av2d-sched .av2d-day:first-child{padding-top:2px}
/* pending card: subtle amber accent to signal it's an action list */
body.admin-v2 .av2d-pendcard .av2d-brow{box-shadow:inset 3px 0 0 #f0c987}

@media (max-width:1200px){
  body.admin-v2 .av2d-grid{grid-template-columns:1fr}
  body.admin-v2 .av2d-kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){body.admin-v2 .av2d-kpis{grid-template-columns:1fr}}

/* Set-permissions tree (Users > cog icon > pjActionPermissions). A granular
   parent/child permission tree modelled on the ahmet_driverapp scenario: each
   feature is a parent toggle (list/view) whose child toggles (add/edit/delete/
   delete-bulk) sit indented beneath it and only appear when the parent is on.
   Toggles are rendered as accessible on/off sliders (checkbox + <label>). */
body.admin-v2 .pj-perm-tree { max-width: 720px; }
body.admin-v2 .pj-perm-tree .pj-perm-actions { margin: 0 0 18px; }
/* Two-column layout on wider screens so the long feature list needs less
   scrolling (mirrors the ahmet_driverapp permissions page). CSS columns only --
   no markup change; a feature card / group header never splits across a column,
   and the action buttons span the full width. Falls back to one column below. */
@media (min-width: 992px) {
	body.admin-v2 .pj-perm-tree { max-width: 1060px; column-count: 2; column-gap: 28px; }
	body.admin-v2 .pj-perm-tree .pj-perm-actions { -webkit-column-span: all; column-span: all; }
	/* Balance the two columns by feature card, not by whole section. Keeping an
	   entire section together forced the tall first sections to each fill a column,
	   leaving the right column much longer than the left. Instead: a single feature
	   card never splits (its children stay with their parent), and a group header is
	   kept with the card that follows it (break-after: avoid) so a header is never
	   orphaned at the foot of a column -- the cards then flow to fill both columns
	   evenly. */
	body.admin-v2 .pj-perm-tree .pj-perm-feature { -webkit-column-break-inside: avoid; break-inside: avoid; }
	body.admin-v2 .pj-perm-tree .pj-perm-group { -webkit-column-break-after: avoid; break-after: avoid; }
}
body.admin-v2 .pj-perm-group {
	margin: 22px 0 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #8a97a0;
}
body.admin-v2 .pj-perm-feature {
	border: 1px solid #e3e8ec;
	border-radius: 6px;
	margin: 0 0 10px;
	background: #fff;
}
body.admin-v2 .pj-perm-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
}
body.admin-v2 .pj-perm-parent { font-weight: 600; color: #163842; }
body.admin-v2 .pj-perm-children { border-top: 1px dashed #e3e8ec; background: #f8fafb; }
body.admin-v2 .pj-perm-child { padding-left: 34px; }
body.admin-v2 .pj-perm-child:not(:last-child) { border-bottom: 1px dashed #eef1f4; }
body.admin-v2 .pj-perm-child .pj-perm-name { font-weight: 400; color: #4a5a63; }
body.admin-v2 .pj-perm-name { margin: 0; }
/* Right side of each row: the "Saved" flash sits to the LEFT of the switch, so
   the switch stays pinned to the right edge and never shifts when text appears. */
body.admin-v2 .pj-perm-right { display: inline-flex; align-items: center; gap: 10px; }
body.admin-v2 .pj-perm-flash { color: #18a689; font-size: 12px; white-space: nowrap; display: none; }

/* on/off slider */
body.admin-v2 .pj-perm-switch { position: relative; display: inline-block; }
body.admin-v2 .pj-perm-switch .pj-perm-toggle {
	position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; z-index: 2;
}
body.admin-v2 .pj-perm-switch .pj-perm-slider {
	display: inline-block; width: 44px; height: 24px; border-radius: 24px;
	background: #cfd8dd; position: relative; transition: background-color .15s ease; vertical-align: middle;
}
body.admin-v2 .pj-perm-switch .pj-perm-slider::after {
	content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
	border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s ease;
}
body.admin-v2 .pj-perm-switch .pj-perm-toggle:checked + .pj-perm-slider { background: #1ab394; }
body.admin-v2 .pj-perm-switch .pj-perm-toggle:checked + .pj-perm-slider::after { left: 22px; }
body.admin-v2 .pj-perm-switch .pj-perm-toggle:disabled + .pj-perm-slider { opacity: .5; }

/* ---- Settings & static-form tables ------------------------------------------
   Modernise the old two-column "Option | Value" pj-table used by the Settings
   pages (pjAdminOptions) and the create/edit forms (Fleets, Stations, ...). The
   markup keeps its cellpadding/cellspacing attributes and field names untouched
   -- this is pure presentation. Scoped to form.pj-form so the datagrid pj-tables
   (rendered inside .pj-grid / #grid, never inside a form) are not affected. */
body.admin-v2 form.pj-form table.pj-table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	border: 1px solid #e3e8ec;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
body.admin-v2 form.pj-form table.pj-table > thead > tr > th {
	background: #f4f7f9;
	color: #6b7a83;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: left;
	padding: 11px 18px;
	border-bottom: 1px solid #e3e8ec;
}
body.admin-v2 form.pj-form table.pj-table > tbody > tr > td {
	padding: 13px 18px;
	border-top: 1px solid #eef1f4;
	vertical-align: middle;
}
body.admin-v2 form.pj-form table.pj-table > tbody > tr:first-child > td { border-top: 0; }
body.admin-v2 form.pj-form table.pj-table > tbody > tr:hover > td { background: #f9fbfc; }
/* left column reads as a settings label. No width here on purpose: the
   two-column Option/Value tables already carry width="50%" in their markup, and
   forcing a width would distort the multi-column price/fee tables that share the
   same .pj-form .pj-table selector. */
body.admin-v2 form.pj-form table.pj-table > tbody > tr > td:first-child {
	color: #34434c;
	font-weight: 500;
}

/* Invoice Add/Edit action row: Save / View / Print / Email / Send PDF / Download
   PDF are back-to-back .pj-button elements with no margin, so they touch each
   other -- worst on a phone where they wrap into one solid block. Give them a
   small gap (horizontal + vertical for the wrapped rows). Scoped via
   :has(> .btnInvoiceSend) to this one action row so no other buttons move. */
body.admin-v2 p:has(> .btnInvoiceSend) .pj-button {
	margin: 0 8px 8px 0;
	vertical-align: top;
}

/* Extras / Fleets Add-Edit image preview (<img class="tr-image"> in #image_container).
   admin.css's own .tr-image has no size cap, so a large uploaded file rendered at its
   native pixel size and filled the whole form (e.g. the luggage icon on Extras > Edit).
   Constrain it to a tidy thumbnail card; max-width:100% also keeps it inside the content
   box on narrow/responsive widths. Only the preview is affected — the stored image and the
   front-end output are untouched. */
body.admin-v2 #image_container .tr-image {
	box-sizing: border-box;
	max-width: 180px;
	max-height: 180px;
	width: auto;
	height: auto;
	object-fit: contain;
	padding: 6px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background: #fff;
}

/* Image "Delete" link (<a class="pj-delete-image">) on Extras / Fleets Add-Edit.
   It was the last delete control still painted with the legacy grey pj-delete.png
   sprite, out of step with the Font Awesome trash glyph the rest of the theme's
   delete controls now use (listing icons, form row-remove). Drop the sprite and
   render a red FA trash icon before the "Delete" label, as a small inline link.
   CSS-only — markup/JS unchanged (the JS keeps binding to .pj-delete-image). */
body.admin-v2 .pj-delete-image {
	background: none !important;
	width: auto;
	height: auto;
	padding-left: 0;
	line-height: 1.4;
	float: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #e5403c;
	font: 600 12px/1.4 "Open Sans", "Helvetica Neue", Arial, sans-serif;
	text-decoration: none;
	vertical-align: middle;
}
body.admin-v2 .pj-delete-image::before {
	content: "\f1f8"; /* trash */
	font: normal normal normal 14px/1 FontAwesome;
}
body.admin-v2 .pj-delete-image:hover {
	color: #b32b23;
	text-decoration: none;
}

/* ===========================================================================
   admin_v2 datagrid + notice-box -- align with the driver app's clean INSPINIA
   look (customer feedback: "do the table like new system", "info you can remove
   if not needed"). Scoped to body.admin-v2 like the rest of this file; additive.
   =========================================================================== */

/* ---- Notice / info band ---------------------------------------------------
   Replace the old light-blue gradient .notice-box (pjToolkit::printNotice output)
   with a flat white band + thin bottom rule + a FontAwesome info-circle, matching
   the driver app's ".page-heading" header. The body line is de-emphasised so it
   reads as a subtitle (and can simply be dropped by the caller if not needed). */
body.admin-v2 .notice-box { margin: 0 0 16px; overflow: visible; }
body.admin-v2 .notice-box .notice-top,
body.admin-v2 .notice-box .notice-bottom { display: none; }
body.admin-v2 .notice-box .notice-middle {
	background: #fff;
	border: 0;
	border-bottom: 1px solid #e7eaec;
	border-radius: 0;
	box-shadow: none;
	padding: 2px 0 14px 0;
}
body.admin-v2 .notice-box .notice-info {
	background: none;
	width: auto;
	height: auto;
	margin: 1px 9px 0 0;
	float: left;
	line-height: 1;
}
body.admin-v2 .notice-box .notice-info::before {
	font: normal normal normal 18px/1 FontAwesome;
	content: "\f05a"; /* info-circle */
	color: #163842;
}
body.admin-v2 .notice-box .notice-middle .block.bold {
	font-size: 15px;
	font-weight: 600;
	color: #163842;
	line-height: 1.4;
}
body.admin-v2 .notice-box .notice-middle .block {
	color: #8a949a;
	font-size: 12.5px;
	line-height: 1.45;
}
body.admin-v2 .notice-box .notice-middle .notice-close {
	background: none;
	width: auto;
	height: auto;
	top: 5px;
	right: 2px;
	color: #b7c0c6;
	text-decoration: none;
	line-height: 1;
}
body.admin-v2 .notice-box .notice-middle .notice-close::before {
	font: normal normal normal 14px/1 FontAwesome;
	content: "\f00d"; /* times */
	text-decoration: none;
}
body.admin-v2 .notice-box .notice-middle .notice-close:hover { color: #6b7378; }

/* ---- Flash notices: success / error --------------------------------------
   Save/delete confirmations and errors (pjToolkit::printNotice, auto-classified
   by $type) get a filled coloured banner so they stand out clearly from the
   neutral page-description band above -- matching the driver app's green
   "User updated!" alert. Success = green, error = red. */
body.admin-v2 .notice-box-success .notice-middle,
body.admin-v2 .notice-box-error .notice-middle {
	border: 1px solid;
	border-radius: 4px;
	padding: 12px 36px 12px 14px;
}
body.admin-v2 .notice-box-success .notice-middle { background: #edf7ee; border-color: #cbe6cd; }
body.admin-v2 .notice-box-error   .notice-middle { background: #fbecec; border-color: #f1cccc; }

/* leading status icon (overrides the neutral info-circle) */
body.admin-v2 .notice-box-success .notice-info::before { content: "\f058"; color: #2f8f46; } /* check-circle */
body.admin-v2 .notice-box-error   .notice-info::before { content: "\f06a"; color: #c0392b; } /* exclamation-circle */

/* text colours */
body.admin-v2 .notice-box-success .notice-middle .block.bold { color: #1f7a34; }
body.admin-v2 .notice-box-success .notice-middle .block      { color: #3d7a48; }
body.admin-v2 .notice-box-error   .notice-middle .block.bold { color: #a5281b; }
body.admin-v2 .notice-box-error   .notice-middle .block      { color: #9a4038; }

/* close (x) tints to match, and sits inside the padded banner */
body.admin-v2 .notice-box-success .notice-middle .notice-close { top: 10px; right: 12px; color: #7bb587; }
body.admin-v2 .notice-box-error   .notice-middle .notice-close { top: 10px; right: 12px; color: #cfa0a0; }
body.admin-v2 .notice-box-success .notice-middle .notice-close:hover { color: #2f8f46; }
body.admin-v2 .notice-box-error   .notice-middle .notice-close:hover { color: #c0392b; }

/* ---- Datagrid status pill -------------------------------------------------
   The legacy .pj-status is a 77px white box with the state as an offset PNG icon
   sitting behind the label ("Active" half-covered by a green mark). Render it as
   a clean coloured pill with a leading icon -- green = active/confirmed, grey =
   inactive/cancelled, amber = pending, blue = in progress -- like the driver app.
   Scoped to the datagrid (.pj-grid) so static/Settings pj-tables are untouched. */
body.admin-v2 .pj-grid .pj-table .pj-status {
	display: inline-block;
	width: auto !important;
	min-width: 0;
	background-image: none !important;
	background-color: #d1dade;
	color: #fff;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 12px;
	padding: 3px 10px 3px 23px;
	position: relative;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 16px;
	white-space: nowrap;
	text-align: left;
}
body.admin-v2 .pj-grid .pj-table .pj-status::before {
	font: normal normal normal 11px/16px FontAwesome;
	content: "\f111"; /* dot (default) */
	position: absolute;
	left: 9px;
	top: 3px;
}
/* active / confirmed -> green */
body.admin-v2 .pj-grid .pj-table .pj-status-T,
body.admin-v2 .pj-grid .pj-table .pj-status-1,
body.admin-v2 .pj-grid .pj-table .pj-status-confirmed,
body.admin-v2 .pj-grid .pj-table .pj-status-Confirmed { background-color: #1a9f6e !important; }
body.admin-v2 .pj-grid .pj-table .pj-status-T::before,
body.admin-v2 .pj-grid .pj-table .pj-status-1::before,
body.admin-v2 .pj-grid .pj-table .pj-status-confirmed::before,
body.admin-v2 .pj-grid .pj-table .pj-status-Confirmed::before { content: "\f00c"; } /* check */
/* inactive / cancelled -> grey */
body.admin-v2 .pj-grid .pj-table .pj-status-F,
body.admin-v2 .pj-grid .pj-table .pj-status-0,
body.admin-v2 .pj-grid .pj-table .pj-status-cancelled,
body.admin-v2 .pj-grid .pj-table .pj-status-Cancelled { background-color: #b7c0c6 !important; }
body.admin-v2 .pj-grid .pj-table .pj-status-F::before,
body.admin-v2 .pj-grid .pj-table .pj-status-0::before,
body.admin-v2 .pj-grid .pj-table .pj-status-cancelled::before,
body.admin-v2 .pj-grid .pj-table .pj-status-Cancelled::before { content: "\f00d"; } /* times */
/* pending -> amber */
body.admin-v2 .pj-grid .pj-table .pj-status-pending,
body.admin-v2 .pj-grid .pj-table .pj-status-Pending,
body.admin-v2 .pj-grid .pj-table .pj-status-E { background-color: #f8ac59 !important; }
body.admin-v2 .pj-grid .pj-table .pj-status-pending::before,
body.admin-v2 .pj-grid .pj-table .pj-status-Pending::before,
body.admin-v2 .pj-grid .pj-table .pj-status-E::before { content: "\f017"; } /* clock */
/* in progress -> blue */
body.admin-v2 .pj-grid .pj-table .pj-status-in_progress { background-color: #23a0d1 !important; }
body.admin-v2 .pj-grid .pj-table .pj-status-in_progress::before { content: "\f021"; } /* refresh */
/* invoice statuses: paid -> green, not paid -> amber. Without these the pill fell
   back to the pale-grey default (#d1dade) and "Paid" read as washed-out. ("cancelled"
   already maps to the grey rule above.) */
body.admin-v2 .pj-grid .pj-table .pj-status-paid { background-color: #1a9f6e !important; }
body.admin-v2 .pj-grid .pj-table .pj-status-paid::before { content: "\f00c"; } /* check */
body.admin-v2 .pj-grid .pj-table .pj-status-not_paid { background-color: #f8ac59 !important; }
body.admin-v2 .pj-grid .pj-table .pj-status-not_paid::before { content: "\f017"; } /* clock */

/* ---- Datagrid table look ---------------------------------------------------
   Replace the legacy PhpJabbers grid styling from pj-table.css (Arial 12px,
   multi-tone #e5e2e2 grid lines, cream #faf8ea hover, #f7f7f7 striping) with the
   driver app's clean INSPINIA table: inherited font, single #e7eaec row rules,
   comfortable padding, subtle stripe + grey hover. Scoped to the datagrid
   (.pj-grid / #grid) so the Settings "Option | Value" pj-tables and other static
   pj-tables (styled under form.pj-form) are left alone. */
body.admin-v2 .pj-grid .pj-table {
	border: 0;
	border-top: 1px solid #e7eaec;
	width: 100%;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.42857;
	color: #676a6c;
}
body.admin-v2 .pj-grid .pj-table th {
	background: #fff;
	border: 0;
	border-bottom: 1px solid #e7eaec;
	padding: 10px 12px;
	color: #676a6c;
	font-weight: 600;
	vertical-align: bottom;
}
body.admin-v2 .pj-grid .pj-table td {
	border: 0;
	border-bottom: 1px solid #e7eaec;
	padding: 10px 12px;
	vertical-align: middle;
	color: #676a6c;
}
/* Stripe starting with the grey shade so the first data row doesn't blend into
   the white table header (odd = first row -> grey, even -> white). */
body.admin-v2 .pj-grid .pj-table .pj-table-row-odd { background: #f9f9fa; }
body.admin-v2 .pj-grid .pj-table .pj-table-row-even { background: #fff; }
body.admin-v2 .pj-grid .pj-table .pj-table-row-hover { background: #f5f5f5 !important; }
body.admin-v2 .pj-grid .pj-table .pj-table-row-active { background: #eef6f1 !important; }

/* ---- Datagrid header sort control (driver-app style) ----------------------
   The renderer emits a single <a class="m-r-xs pj-table-sort-up|down [text-muted]">
   <i class="fa fa-sort-amount-asc|desc"></i></a> BEFORE the label (like the driver
   app): a single sort-amount glyph, muted grey until this column is the active
   sort, then brand teal showing the asc/desc direction. */
body.admin-v2 #grid .pj-table thead th a.pj-table-sort-up,
body.admin-v2 #grid .pj-table thead th a.pj-table-sort-down {
	/* reset the legacy sprite rules (display:block; 8x4px; background PNG) that
	   pj-table.css puts on these classes, so the anchor sits INLINE before the
	   label instead of a tiny block the icon overflows and overlaps the text. */
	display: inline-block;
	width: auto;
	height: auto;
	background: none;
	padding: 0;
	margin: 0 4px 0 0;
	vertical-align: baseline;
	line-height: inherit;
	text-decoration: none;
	color: #163842;
}
body.admin-v2 #grid .pj-table thead th a.pj-table-sort-up.text-muted,
body.admin-v2 #grid .pj-table thead th a.pj-table-sort-down.text-muted { color: #b7c0c6; }
body.admin-v2 #grid .pj-table thead th a.pj-table-sort-up:hover,
body.admin-v2 #grid .pj-table thead th a.pj-table-sort-down:hover { color: #163842; }

/* ---- Datagrid row checkboxes ----------------------------------------------
   Teal custom checkbox matching the driver app's iCheck look, in the admin_v2
   brand colour. Pure CSS (appearance:none) -- no iCheck library, so the grid's
   existing select / select-all / permission logic (change.dg, pjGridPerms) is
   left completely untouched. Scoped to the datagrid. */
body.admin-v2 .pj-grid .pj-table input[type="checkbox"],
body.admin-v2 .pj-grid .pj-table input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	vertical-align: middle;
	border: 1px solid #c4ccd2;
	border-radius: 3px;
	background: #fff;
	position: relative;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color .12s ease, border-color .12s ease;
}
body.admin-v2 .pj-grid .pj-table input[type="radio"] { border-radius: 50%; }
body.admin-v2 .pj-grid .pj-table input[type="checkbox"]:hover,
body.admin-v2 .pj-grid .pj-table input[type="radio"]:hover { border-color: #163842; }
body.admin-v2 .pj-grid .pj-table input[type="checkbox"]:checked,
body.admin-v2 .pj-grid .pj-table input[type="radio"]:checked { background: #163842; border-color: #163842; }
body.admin-v2 .pj-grid .pj-table input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
body.admin-v2 .pj-grid .pj-table input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}
/* Select/checkbox column: the grid sets a width on the data columns but not on this
   one, so it stretched ~74px wide for an 18px box. Pin it to just fit the checkbox.
   Scoped via :has to the checkbox column only, so a grid without a select column
   (its first cell is real data) is left alone. Applies to every list page. */
body.admin-v2 .pj-grid .pj-table thead th:has(> .pj-table-toggle-rows),
body.admin-v2 .pj-grid .pj-table tbody td:has(> .pj-table-select-row) {
	width: 1%;
	padding-left: 12px;
	padding-right: 6px;
	white-space: nowrap;
}

/* ===========================================================================
   FORM sweep -- modernise legacy pj-form / jQuery-UI form chrome the admin_v2
   theme had not yet overridden (search icon, input-addon sprites, fieldset
   legend, datepicker popup). All CSS, scoped body.admin-v2, additive. Keeps the
   legacy box dimensions so field/group layout is unchanged -- only the look. */

/* Search box magnifier: swap the pj-icon-search.png sprite for a crisp inline-SVG
   magnifier (used on ~15 list pages). Same right-aligned position. */
body.admin-v2 .pj-form-field-search {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238a949a' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cline x1='10.5' y1='10.5' x2='15' y2='15'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 9px center !important;
	background-size: 15px 15px !important;
	padding-right: 30px !important;
}

/* Input-addon prefix/suffix boxes: flatten the grey gradient, and replace the PNG
   sprite icons (phone/url/email/money/user/password/date) with Font Awesome glyphs
   centred in the existing box (box size kept, so the field group doesn't reflow). */
body.admin-v2 #content .pj-form-field-before,
body.admin-v2 #content .pj-form-field-after {
	background: #f4f6f8;
	border-color: #dbe1e6;
	filter: none;
}
body.admin-v2 #content .pj-form-field-before abbr,
body.admin-v2 #content .pj-form-field-after abbr {
	background: none !important;
	top: 0 !important;
	left: 0 !important;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
body.admin-v2 #content [class^="pj-form-field-icon-"]::before,
body.admin-v2 #content [class*=" pj-form-field-icon-"]::before {
	font: normal normal normal 14px/1 FontAwesome;
	color: #8a94a0;
}
body.admin-v2 #content .pj-form-field-icon-phone::before    { content: "\f095"; }
body.admin-v2 #content .pj-form-field-icon-url::before      { content: "\f0c1"; }
body.admin-v2 #content .pj-form-field-icon-email::before    { content: "\f0e0"; }
body.admin-v2 #content .pj-form-field-icon-money::before    { content: "\f0d6"; }
body.admin-v2 #content .pj-form-field-icon-user::before     { content: "\f007"; }
body.admin-v2 #content .pj-form-field-icon-password::before { content: "\f023"; }
body.admin-v2 #content .pj-form-field-icon-date::before     { content: "\f073"; color: #163842; }

/* Fieldset: drop the dark-navy #003366 legend bar for a clean flat legend. */
body.admin-v2 #content .fieldset {
	border: 1px solid #e7eaec;
	border-radius: 4px;
}
body.admin-v2 #content .fieldset legend {
	background: none;
	color: #163842;
	font-weight: 600;
	width: auto;
	padding: 0 8px 0 0;
	border-radius: 0;
}

/* jQuery-UI datepicker popup: re-skin the smoothness theme to the INSPINIA look
   (white card, clean header, teal selection / today). The popup is an overlay so
   this doesn't affect any form's layout. */
body.admin-v2 .ui-datepicker {
	background: #fff;
	border: 1px solid #e7eaec;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(20, 40, 50, .12);
	padding: 8px;
	font-family: inherit;
	font-size: 13px;
	width: 260px;
}
body.admin-v2 .ui-datepicker .ui-datepicker-header {
	background: #fff;
	border: 0;
	color: #163842;
	font-weight: 600;
	padding: 2px 0 6px;
}
body.admin-v2 .ui-datepicker .ui-datepicker-title { color: #163842; font-weight: 600; }
body.admin-v2 .ui-datepicker .ui-datepicker-prev,
body.admin-v2 .ui-datepicker .ui-datepicker-next {
	background: none;
	border: 0;
	cursor: pointer;
	top: 4px;
	width: 22px;
	height: 22px;
	text-indent: 0;
}
body.admin-v2 .ui-datepicker .ui-datepicker-prev { left: 4px; }
body.admin-v2 .ui-datepicker .ui-datepicker-next { right: 4px; }
/* hide the jQuery-UI sprite icon AND its "Prev"/"Next" text, draw an FA chevron
   centred on the anchor instead. */
body.admin-v2 .ui-datepicker .ui-datepicker-prev .ui-icon,
body.admin-v2 .ui-datepicker .ui-datepicker-next .ui-icon { display: none; }
body.admin-v2 .ui-datepicker .ui-datepicker-prev::before { content: "\f104"; } /* angle-left  */
body.admin-v2 .ui-datepicker .ui-datepicker-next::before { content: "\f105"; } /* angle-right */
body.admin-v2 .ui-datepicker .ui-datepicker-prev::before,
body.admin-v2 .ui-datepicker .ui-datepicker-next::before {
	font: normal normal normal 16px/22px FontAwesome;
	color: #163842;
	display: block;
	text-align: center;
}
body.admin-v2 .ui-datepicker th { color: #8a949a; font-weight: 600; padding: 4px; }
body.admin-v2 .ui-datepicker td { padding: 1px; border: 0; }
body.admin-v2 .ui-datepicker td a,
body.admin-v2 .ui-datepicker td span {
	background: none;
	border: 0;
	text-align: center;
	padding: 6px;
	border-radius: 4px;
	color: #676a6c;
}
body.admin-v2 .ui-datepicker td a:hover { background: #eef1f4; }
body.admin-v2 .ui-datepicker td a.ui-state-active { background: #163842; color: #fff; }
body.admin-v2 .ui-datepicker td a.ui-state-highlight { background: #eef6f1; color: #163842; }


/* ---- Datagrid horizontal scroll box ---------------------------------------
   The renderer now wraps every grid table in .pj-table-responsive. Make it a
   horizontal-scroll box at ALL widths so a wide grid (bookings: ~9 columns)
   scrolls inside its card instead of overflowing the card / clipping the last
   columns on desktop, and instead of widening the page on mobile. The paginator
   sits outside this box, so its dropdown is never clipped. */
body.admin-v2 #content .pj-table-responsive {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---- List search box: input + attached search button (driver-app style) ----
   inspinia-init.js wraps the legacy .pj-form-field-search in .av2-search-group and
   appends .av2-search-btn. Lay them out as one control: the input loses its inline
   magnifier (the button carries the icon) and squares its right edge; the button is
   a brand-teal submit matching the "+ Add" button. */
body.admin-v2 .av2-search-group { display: inline-flex; align-items: stretch; vertical-align: middle; }
body.admin-v2 .av2-search-group .pj-form-field-search {
	background-image: none !important;
	border-radius: 3px 0 0 3px;
	border-right: none;
	padding-right: 12px !important;
	margin: 0;
}
body.admin-v2 .av2-search-btn {
	background: #163842;
	border: 1px solid #163842;
	color: #fff;
	border-radius: 0 3px 3px 0;
	padding: 0 15px;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .12s ease;
}
body.admin-v2 .av2-search-btn:hover { background: #0f2a31; border-color: #0f2a31; }

/* "Add new" buttons: FA plus icon spacing (inspinia-init.js swaps the input for a
   <button> with a leading <i class="fa fa-plus">). */
body.admin-v2 .av2-add-btn i.fa { margin-right: 5px; }

/* ---- List toolbar: align Add / search / filter to one height + driver-app
   filter icons -------------------------------------------------------------
   The "+ Add", the search input/button and the All/Active/Inactive filters were
   rendering at 3 different heights (31 / 34 / 28px, the filters even content-box).
   Pin them all to 34px, border-box, vertically centred so the row lines up. */
body.admin-v2 #content .av2-add-btn,
body.admin-v2 #content .btn-all,
body.admin-v2 #content .btn-filter,
body.admin-v2 .av2-search-btn,
body.admin-v2 .av2-search-group .pj-form-field-search {
	height: 34px;
	box-sizing: border-box;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Active/Inactive status filters get a leading check / times icon, like the
   driver app (the All filter stays plain). .btn-status is an <a>, so ::before
   works without any markup change. */
body.admin-v2 #content .btn-status[data-value]::before,
body.admin-v2 #content .btn-filter-notes-for-support::before {
	font: normal normal normal 12px/1 FontAwesome;
	margin-right: 6px;
}
/* Match the icons the status pills use in the table, so a filter reads the same as
   the rows it selects: active/confirmed = check, inactive/cancelled = times,
   pending = clock, in progress = refresh; Has Notes = a note glyph. */
body.admin-v2 #content .btn-status[data-value="T"]::before,
body.admin-v2 #content .btn-status[data-value="confirmed"]::before { content: "\f00c"; }   /* check   */
body.admin-v2 #content .btn-status[data-value="F"]::before,
body.admin-v2 #content .btn-status[data-value="cancelled"]::before { content: "\f00d"; }    /* times   */
body.admin-v2 #content .btn-status[data-value="pending"]::before { content: "\f017"; }       /* clock   */
body.admin-v2 #content .btn-status[data-value="in_progress"]::before { content: "\f021"; }   /* refresh */
body.admin-v2 #content .btn-filter-notes-for-support::before { content: "\f24a"; }           /* note    */

/* ---- Booking status dropdowns: colour by status (like the old backend) --------------------
   The booking edit/create page renders the trip-status selects (.status-select /
   .status-return-select) as Chosen widgets; pjAdminBookings.js tags the Chosen single AND its
   result options with a status class (is-pending / is-progress / is-confirmed / is-cancelled)
   and updates it on change. Those classes carried no styling, so the dropdown stayed the
   default grey Chosen box -- colour them here to match the old backend (orange = pending, etc.).
   Scoped to the is-* classes, which only the status selects ever receive, so other Chosen
   dropdowns are untouched. Colours mirror the statusColors map in pjAdminBookings.js. */
body.admin-v2 .chzn-container-single a.chzn-single.is-pending,
body.admin-v2 .chzn-container-single a.chzn-single.is-progress,
body.admin-v2 .chzn-container-single a.chzn-single.is-confirmed,
body.admin-v2 .chzn-container-single a.chzn-single.is-cancelled {
	background-image: none !important; filter: none !important;
	border-color: transparent !important; box-shadow: none !important;
	color: #fff !important; font-weight: 600;
}
/* Selected header (chzn-single): solid status colour with white text. */
body.admin-v2 a.chzn-single.is-pending   { background-color: #F97316 !important; color: #fff !important; }
body.admin-v2 a.chzn-single.is-progress  { background-color: #EF4444 !important; color: #fff !important; }
body.admin-v2 a.chzn-single.is-confirmed { background-color: #10B981 !important; color: #fff !important; }
body.admin-v2 a.chzn-single.is-cancelled { background-color: #6B7280 !important; color: #fff !important; }
/* Dropdown options (chzn-results li): coloured TEXT on the normal white row, like the old backend. */
body.admin-v2 .chzn-results li.is-pending   { color: #F97316 !important; }
body.admin-v2 .chzn-results li.is-progress  { color: #EF4444 !important; }
body.admin-v2 .chzn-results li.is-confirmed { color: #10B981 !important; }
body.admin-v2 .chzn-results li.is-cancelled { color: #6B7280 !important; }
/* the selected label (span) and the drop arrow (b, a sprite) go white on the coloured box */
body.admin-v2 a.chzn-single.is-pending span,   body.admin-v2 a.chzn-single.is-progress span,
body.admin-v2 a.chzn-single.is-confirmed span, body.admin-v2 a.chzn-single.is-cancelled span { color: #fff !important; }
body.admin-v2 a.chzn-single.is-pending div b,   body.admin-v2 a.chzn-single.is-progress div b,
body.admin-v2 a.chzn-single.is-confirmed div b, body.admin-v2 a.chzn-single.is-cancelled div b { filter: brightness(0) invert(1); }
/* Native fallback: should a status select ever render WITHOUT Chosen, colour the native
   <select> by its selected value (value-based, updates live on change; no JS needed). :has()
   is modern-browser only -- where unsupported the box just stays default, no harm. When Chosen
   IS active the native select is hidden, so this is invisible then. Options reset to dark-on-
   white so the opened OS list stays readable. */
body.admin-v2 select.status-select:has(option[value="pending"]:checked),
body.admin-v2 select.status-return-select:has(option[value="pending"]:checked)    { background-color: #F97316 !important; color: #fff !important; }
body.admin-v2 select.status-select:has(option[value="in_progress"]:checked),
body.admin-v2 select.status-return-select:has(option[value="in_progress"]:checked) { background-color: #EF4444 !important; color: #fff !important; }
body.admin-v2 select.status-select:has(option[value="confirmed"]:checked),
body.admin-v2 select.status-return-select:has(option[value="confirmed"]:checked)   { background-color: #10B981 !important; color: #fff !important; }
body.admin-v2 select.status-select:has(option[value="cancelled"]:checked),
body.admin-v2 select.status-return-select:has(option[value="cancelled"]:checked)   { background-color: #6B7280 !important; color: #fff !important; }
body.admin-v2 select.status-select option,
body.admin-v2 select.status-return-select option { color: #1a1a1a; background: #fff; }

/* Admin booking add/edit: the OUTBOUND extras block ships with an inline style="width:50%"
   (so the "Note for support" box can sit beside it). In that half-width column the per-extra
   stop-address field gets cramped and its placeholder is cut off, while the RETURN extras
   block (full width) shows the same field fine. Let the outbound block use the full form width
   too -- matching the return block -- so the address field is never cut; the note box then
   stacks below instead of beside. (:has() is already used elsewhere in this file.) */
body.admin-v2 #content .float_left:has(> .orderExtras){ width:100% !important; max-width:100% !important; }
/* Admin booking add/edit: the per-extra stop-address field is on its own row; indent it
   to line up under the quantity column (the extra-name cell before the qty is 150px wide),
   so it reads as "below the quantity" rather than hanging at the form's left edge.
   max-width keeps the widened field inside its column at any desktop width. */
.pjExtraAddrRow .pjExtraAddrInput{ margin-left:154px; max-width:calc(100% - 158px); box-sizing:border-box; }
/* Responsive: at <=991px the admin stacks form rows and forces w400 fields to 100% width,
   so drop the under-quantity indent and the desktop cap -- otherwise a full-width field
   plus the 154px indent would overflow the column on phones/tablets. */
@media (max-width:991px){
	.pjExtraAddrRow .pjExtraAddrInput{ margin-left:0; max-width:100%; }
}

/* "Set place name" dialog (Areas): the Disable/No-approach-fee checkboxes get their own form row
   under an "Options" label, each a tidy checkbox-before-text item.
   - Desktop: inline-flex so the pair sits next to the floated label like every other field row.
   - <=991px (admin-v2 turns each row into a wrapping flexbox and stacks the label on top): switch
     to a full-width flex that can shrink (min-width:0) so the two items wrap instead of overflowing.
     The .inline_block.sbs-area-flags selector outranks the generic <=991px inline_block->block rule.
   - <=767px (phones): one checkbox per line, so long labels (de/nl) never run off the dialog. */
body.admin-v2 .sbs-area-flags{ padding-top:6px; }
body.admin-v2 .form p > span.inline_block.sbs-area-flags,
body.admin-v2 .form .p > span.inline_block.sbs-area-flags{ display:inline-flex; flex-wrap:wrap; gap:6px 44px; vertical-align:top; }
body.admin-v2 .sbs-area-flags .sbs-flag{ display:inline-flex; align-items:center; gap:7px; margin:0; white-space:nowrap; cursor:pointer; font-weight:normal; }
body.admin-v2 .sbs-area-flags .sbs-flag input[type="checkbox"]{ margin:0; }
@media (max-width:991px){
	body.admin-v2 .form p > span.inline_block.sbs-area-flags,
	body.admin-v2 .form .p > span.inline_block.sbs-area-flags{ display:flex; min-width:0; }
}
@media (max-width:767px){
	body.admin-v2 .sbs-area-flags .sbs-flag{ flex:0 0 100%; }
}