/* Reusable status stepper, shared by the M2 repair-status portal pages and (intended)
   by future cargo/container tracking pages. Keep this generic — no page-specific
   selectors here. */

.santek-timeline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 1.5rem 0;
}

.santek-timeline-step {
	position: relative;
	flex: 1 1 0;
	min-width: 6rem;
	text-align: center;
	padding-top: 0.25rem;
}

/* Endpoints inset by exactly the dot's own radius (0.55rem -- see
   .santek-timeline-dot's 1.1rem diameter below) instead of running the line all the
   way to each flanking dot's center. A dot's fill is deliberately translucent (glass
   look, matches every other surface in this theme) via var(--fg-color) -- confirmed
   live that a solid line ending at the dot's *center* showed straight through an
   upcoming/pending dot's low-opacity interior as a visible horizontal bar, since
   partial transparency can't fully occlude whatever's drawn underneath it. Stopping
   the line at the dot's outer edge removes the overlap entirely, so nothing is ever
   drawn behind the dot regardless of its opacity -- fixes the "line visible through
   an empty dot" report without giving up the glass fill.
   Vertical position: dot's own center sits at padding-top (0.25rem) + half the dot's
   diameter (0.55rem) = 0.8rem from the step's top edge; this 2px-tall line needs its
   own center at that same 0.8rem, i.e. top: 0.8rem - 1px. The previous flat 0.65rem
   was measured 1.4px short of that, confirmed live via getBoundingClientRect --
   enough to visibly cut through the lower half of each dot instead of the middle. */
.santek-timeline-step::before {
	content: "";
	position: absolute;
	top: calc(0.8rem - 1px);
	left: calc(-50% + 0.55rem);
	width: calc(100% - 1.1rem);
	height: 2px;
	background: var(--border-color, #d1d8dd);
	z-index: 0;
}

.santek-timeline-step:first-child::before {
	display: none;
}

.santek-timeline-dot {
	position: relative;
	z-index: 1;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0 auto 0.5rem;
	border-radius: 50%;
	background: var(--fg-color, #fff);
	border: 2px solid var(--border-color, #d1d8dd);
}

.santek-timeline-label {
	font-size: 0.8rem;
	color: var(--text-muted, #8d99a6);
}

.santek-timeline-step--done .santek-timeline-dot {
	background: var(--green-500, #2e7d32);
	border-color: var(--green-500, #2e7d32);
}

.santek-timeline-step--done::before {
	background: var(--green-500, #2e7d32);
}

.santek-timeline-step--done .santek-timeline-label {
	color: var(--text-color, #1c2126);
}

.santek-timeline-step--current .santek-timeline-dot {
	background: var(--blue-500, #1976d2);
	border-color: var(--blue-500, #1976d2);
	box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.15);
}

.santek-timeline-step--current .santek-timeline-label {
	color: var(--text-color, #1c2126);
	font-weight: 600;
}

.santek-lang-switch {
	text-align: right;
	font-size: 0.8rem;
	margin-bottom: 0.75rem;
}

.santek-lang-switch a {
	color: var(--text-muted, #8d99a6);
}

.santek-lang-switch a.santek-lang-switch-active {
	color: var(--text-color, #1c2126);
	font-weight: 600;
	text-decoration: none;
}

/* Shared "portal record list" components -- built for My Returns first, then reused
   as-is (same classes, no per-page CSS) by every other custom portal list page that
   gets the same treatment (Issues, ...). Row content is deliberately generic --
   title/subtitle/status/pagination -- so a new page just needs its own Python +
   template pointing the right data at these classes, never new CSS.

   Full-width, no separate button -- search is live-as-you-type (index.js), so a
   submit button would be a dead affordance most of the time. The <form> itself stays
   (see index.js's own header comment) as a plain-HTML fallback: Enter still submits
   a real GET request against the page's own search= handling if JS never loads. */
.santek-list-search {
	display: flex;
	margin: 1rem 0 1.5rem;
}

.santek-list-search-input {
	flex: 1;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--border-color, #d1d8dd);
	background: var(--fg-color, #f4f5f6);
	color: var(--text-color, #1c2126);
	font-size: 0.9rem;
}

/* Each pill flex:1 so the whole bar spans edge-to-edge as one row, matching the
   search bar below it, instead of sizing to natural content width -- as long as
   the row has room for that. wrap (not nowrap) is deliberate and load-bearing,
   not just a mobile nicety: confirmed live that /returns' own 7-pill bar (All +
   6 stages) has a genuine minimum content width around 885px -- nowrap forces
   real horizontal overflow on any viewport narrower than that, a plain desktop
   browser window included, not just phones. flex-wrap: wrap lets flexbox's own
   layout algorithm decide per available width, with no breakpoint to guess at or
   keep in sync as pill count/label length changes -- pills that fit stay
   edge-to-edge on one row exactly as before; whatever doesn't fit moves to the
   next row instead of forcing the container wider than the viewport. */
/* /returns' heading and its "File a New Return" action, side by side and
   right-aligned with the h1 -- previously the button sat stacked on its own
   line below the heading, left-aligned, reading as an incidental link rather
   than the page's primary action. flex-wrap: wrap so a narrow viewport drops
   the button to its own line under the heading instead of squeezing both onto
   one row, same reasoning as .santek-list-filters below. */
.santek-returns-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.santek-returns-header h1 {
	margin: 0;
}

.santek-list-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0;
}

/* /issues/list's and /address/list's own pill bars
   (public/js/portal_web_form_list_enhancements.js) -- a separate class from
   .santek-list-filters on purpose, not a duplicate by accident: two rules in
   portal_theme.css key off :has(.santek-list-filters) to reposition
   main.container/.web-sidebar for a page shape neither of that script's routes has
   (see that script's own header comment for the full reasoning and the live
   measurement that confirmed neither route needs repositioning at all). Same flex-row
   layout as .santek-list-filters; the pills inside it still use
   .santek-list-filter-pill directly, so they're visually identical -- for Issues'
   own 5-pill bar (All + 4 statuses), which fits comfortably in one nowrap row just
   like every other pill bar in this app. */
.santek-web-form-list-filters {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	margin: 1rem 0;
}

/* Address's own pill bar (12 real address_type options + All -- confirmed live
   against frappe.get_meta("Address"), not a small fixed enum like Issue's Status)
   would squash into unreadable slivers under the nowrap-and-flex:1-each layout above
   -- 13 equal-width pills forced into one row. Applied as a modifier rather than
   changing .santek-web-form-list-filters itself, so Issues' own bar keeps the
   edge-to-edge equal-width look every other pill bar in this app already has; this
   one instead wraps freely and lets each pill size to its own label. */
.santek-web-form-list-filters--wrap {
	flex-wrap: wrap;
}

.santek-web-form-list-filters--wrap .santek-list-filter-pill {
	flex: 0 0 auto;
}

/* /returns' "Export CSV" link -- a plain <p>, left-aligned by default like any other
   block element. Reported directly by the user wanting it on the right instead, to
   read as a secondary action next to the list rather than a caption in front of it. */
.santek-returns-export {
	text-align: right;
}

/* /addresses' own "Add New Address" row (templates/includes/portal_list_filters.html,
   Address-only) -- same right-aligned single-action row shape as .santek-returns-export
   above, kept as a separate class since the two live in genuinely different templates
   (this one's shared across every DOCTYPE_CONFIG doctype, gated per-doctype inside the
   template itself, not just this one page's own file). */
.santek-list-new-row {
	text-align: right;
	margin-bottom: 12px;
}

.santek-list-filter-pill {
	flex: 1 1 0;
	text-align: center;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--border-color, #d1d8dd);
	color: var(--text-muted, #8d99a6);
	font-size: 0.85rem;
	white-space: nowrap;
	text-decoration: none;
}

.santek-list-filter-pill.santek-list-filter-pill-active {
	background: var(--blue-500, #1976d2);
	border-color: var(--blue-500, #1976d2);
	color: #fff;
	font-weight: 600;
}

/* Highlight instead of the browser's default link-hover underline. */
.santek-list-filter-pill:hover {
	text-decoration: none;
	background: var(--fg-color, rgba(255, 255, 255, 0.08));
	border-color: var(--text-muted, #8d99a6);
	color: var(--text-color, #1c2126);
}

.santek-list-filter-pill.santek-list-filter-pill-active:hover {
	background: var(--blue-500, #1976d2);
	border-color: var(--blue-500, #1976d2);
	color: #fff;
}

/* portal_list_enhancements.js (Orders/Quotations/Invoices/Shipments/Material
   Request/Projects/Timesheets) inserts the filter bar with only the "All" pill
   present, then appends the real per-status pills once their counts come back from
   a separate call -- confirmed live that in the gap between those two moments, a
   lone flex: 1 1 0 child stretches to the row's full width, then visibly snaps back
   down to its normal share the instant the other pills arrive. Pinning a lone pill
   to its natural content width sidesteps that: once a second pill lands, :only-child
   stops matching and every pill (including this one) reflows to the normal
   equal-width rule above -- a small grow-into-place, not a full-bleed flash. */
.santek-list-filters:has(.santek-list-filter-pill:only-child) {
	justify-content: flex-start;
}

.santek-list-filters .santek-list-filter-pill:only-child {
	flex: 0 0 auto;
}

/* These pages' own rows (not erpnext's transaction_row.html -- that one spreads its
   columns via a Bootstrap .row/.col grid instead, so the shared .web-list-item base
   rule in portal_theme.css deliberately doesn't set display:flex itself). Scoped via
   :has() to just the rows carrying our own .santek-list-row-meta child, so this never
   touches Orders/Invoices/etc.'s row layout. */
.web-list-item.transaction-list-item:has(.santek-list-row-meta) {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.santek-list-row-title {
	font-weight: 600;
}

.santek-list-row-subtitle {
	font-size: 0.85em;
	opacity: 0.75;
}

.santek-list-row-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

/* Fixed-width, left-aligned status column so the dot+label always starts at the same
   x regardless of label length ("Received" vs "Being Inspected") -- confirmed live
   that right-aligning the whole cluster instead left every row's status starting at
   a different x depending on its own text width, reading as misaligned/messy down a
   long list. */
.santek-list-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85em;
	width: 130px;
	justify-content: flex-start;
}

.santek-list-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--text-muted, #8d99a6);
}

/* Status dot color keyed off the raw (untranslated) status value in data-stage -- the
   visible text next to it is still run through _() for the current language, but the
   color mapping itself has to stay pinned to English source values (see
   reverse_logistics/portal.py's STAGE_BY_WORKFLOW_STATE), not whatever a translation
   happens to say, or it silently breaks for every non-English session. Every page
   sharing this class adds its own status values here -- they're just distinct
   attribute-selector matches, no risk of collision across doctypes. */
.santek-list-status[data-stage="Received"]::before,
.santek-list-status[data-stage="In Progress"]::before {
	background: var(--blue-500, #1976d2);
}

.santek-list-status[data-stage="Being Inspected"]::before,
.santek-list-status[data-stage="Decision Pending"]::before {
	background: #e0a13a;
}

.santek-list-status[data-stage="Completed"]::before,
.santek-list-status[data-stage="green"]::before {
	background: var(--green-500, #2e7d32);
}

/* /packing-declaration's two states. Pinned to the raw English values the template
   puts in data-stage, per the note above -- the visible label next to the dot is
   still translated. Awaiting shares the amber every other "needs someone to act"
   state on this portal uses. */
.santek-list-status[data-stage="Declared"]::before {
	background: var(--green-500, #2e7d32);
}

.santek-list-status[data-stage="Awaiting Declaration"]::before {
	background: #e0a13a;
}

/* Packaging Designs' own readiness colors -- data-stage is already the raw color
   name here (red/orange/green, see item_packaging_design/portal.py's
   _status_from_counts), not a workflow-state label, so these map directly. */
.santek-list-status[data-stage="red"]::before {
	background: var(--red-500, #c62828);
}

.santek-list-status[data-stage="orange"]::before {
	background: #e0a13a;
}

.santek-list-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 1.5rem 0;
	font-size: 0.9rem;
}

.santek-lang-switch-sep {
	color: var(--border-color, #d1d8dd);
	margin: 0 0.35rem;
}

.santek-return-reference {
	margin: 1.5rem 0;
}

.santek-return-reference label {
	display: block;
	font-size: 0.8rem;
	color: var(--text-muted, #8d99a6);
	margin-bottom: 0.3rem;
}

.santek-return-reference-row {
	display: flex;
	gap: 0.5rem;
	max-width: 24rem;
}

.santek-return-reference-status {
	display: inline-block;
	font-size: 0.8rem;
	color: var(--text-muted, #8d99a6);
	margin-top: 0.3rem;
}

.santek-new-return-item-results {
	position: relative;
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: 6px;
	margin-top: 2px;
	max-height: 12rem;
	overflow-y: auto;
}

.santek-new-return-item-results:empty {
	border: none;
}

.santek-new-return-item-option {
	padding: 0.4rem 0.7rem;
	cursor: pointer;
	font-size: 0.9rem;
}

.santek-new-return-item-option:hover {
	background: var(--fg-color, rgba(255, 255, 255, 0.08));
}

.santek-new-return-status {
	margin-top: 0.75rem;
	font-size: 0.9rem;
}

.santek-timeline-cancelled-banner {
	margin: 1.5rem 0;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	background: var(--red-100, #fdecea);
	color: var(--red-700, #a52a1f);
	font-weight: 600;
}

@media (max-width: 480px) {
	.santek-timeline {
		flex-direction: column;
	}

	.santek-timeline-step::before {
		display: none;
	}

	.santek-timeline-step {
		text-align: left;
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.35rem 0;
	}

	.santek-timeline-dot {
		margin: 0;
	}

	/* Title/subtitle on the left, status dot + "View" link on the right, all on one
	   row (see .web-list-item.transaction-list-item:has(.santek-list-row-meta) above)
	   is fine at desktop width but crowds a real phone once the item name/status
	   label are long. Drop the meta cluster to its own full-width row below the
	   title/subtitle instead of squeezing three things into one line. */
	.web-list-item.transaction-list-item:has(.santek-list-row-meta) {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.santek-list-row-meta {
		width: 100%;
		justify-content: space-between;
	}
}

/* /freight, /freight/<name> -- shares this file for the same "small, already loaded by
   the same portal pages" reasoning as the returns-summary/pagination rules above. */
.santek-freight-status-badge {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--blue-100, #e3f2fd);
	color: var(--blue-700, #0d47a1);
	font-size: 0.8rem;
	font-weight: 600;
}

.santek-freight-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}

.santek-freight-facts > div strong {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--text-muted, #8d99a6);
	margin-bottom: 0.2rem;
}

.santek-freight-eta-confirmed {
	color: var(--green-600, #2e7d32);
	font-weight: 600;
}

.santek-freight-events {
	list-style: none;
	padding: 0;
	margin: 0;
}

.santek-freight-events li {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
}

.santek-freight-events-date {
	display: block;
	font-size: 0.8rem;
	color: var(--text-muted, #8d99a6);
}

.santek-freight-embed-frame {
	width: 100%;
	height: 650px;
	border: 0;
	border-radius: 6px;
	margin-bottom: 1rem;
}

.santek-freight-own-map {
	width: 100%;
	height: 350px;
	border-radius: 6px;
	margin-bottom: 1rem;
	overflow: hidden;
}

/* Freight Map Dashboard (all shipments at once) -- fills the page rather than sitting
   inline in a form, since this is meant to be the whole point of the page, including
   when left open full-screen on an office display. */
.santek-freight-dashboard-map {
	width: 100%;
	height: calc(100vh - 200px);
	min-height: 500px;
	border-radius: 6px;
	overflow: hidden;
}

.santek-freight-dashboard-popup hr {
	border-color: var(--border-color, #d1d8dd);
}

/* Zooming out far enough to frame widely-separated markers (e.g. the Freight Map
   Dashboard's fitBounds() across continents) shows real blank canvas above/below the
   tiles -- real map tiles don't extend past the poles, and a wide/16:9 container
   makes that margin wider than it'd be on a square one. That blank area is Leaflet's
   own default container background (a light grey, ".leaflet-container"'s own
   default), not a missing-tile bug -- confirmed live (a 3-continent test fitBounds
   showed real light-grey bars top/bottom on both the per-shipment map and the
   dashboard). Coloring it to match each tile set's own base tone turns an
   attention-grabbing "something's broken" gap into a deliberate, cohesive edge,
   same idea as how Google/Apple Maps color their own out-of-tile void rather than
   leaving it white. */
.santek-freight-own-map,
.santek-freight-dashboard-map {
	/* Matches Esri World Light Gray Canvas's own base tone -- unlike the CARTO
	   Voyager tiles this used to sit against, the gray-canvas basemap has no
	   distinct ocean color to tune for, just this same light neutral gray
	   everywhere. */
	background: #eef0f1;
}

.santek-freight-own-map--dark {
	background: #171717;
}

/* Required OSM/CARTO attribution stays present and reachable (removing it entirely
   would breach both providers' free-tile usage terms) but doesn't have to sit
   permanently on screen -- ShipsGo's own embed widget uses the same pattern
   (confirmed directly by the user looking at it): a small "i" icon, credit text only
   shown on click. Leaflet's default always-visible attribution control is disabled
   in detail.html (attributionControl: false) in favor of this custom one. */
.santek-freight-attribution {
	position: relative;
}

.santek-freight-attribution-toggle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--border-color, #d1d8dd);
	background: rgba(255, 255, 255, 0.85);
	color: var(--text-color, #333);
	font-style: italic;
	font-size: 0.75rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.santek-freight-attribution-text {
	display: none;
	position: absolute;
	bottom: 24px;
	right: 0;
	white-space: nowrap;
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.santek-freight-attribution-text.santek-expanded {
	display: block;
}

/* The ship/plane markers are plain inline SVGs (see detail.html) -- Leaflet's
   default divIcon styling adds a white box/border meant for text labels, which
   looks wrong here and needs clearing. */
.santek-freight-ship-icon,
.santek-freight-plane-icon {
	background: transparent;
	border: none;
}

/* Small colored swatch in a Freight Map Dashboard popup, matching the per-shipment
   marker/route color it belongs to -- purely to differentiate shipments from each
   other on a crowded fleet map, not a status indicator. */
.santek-freight-dashboard-legend-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
}

/* CARTO deprecated free anonymous access to both its Voyager and dark_all basemap
   tiles -- both now return a 200 OK PNG watermarked "API KEY REQUIRED" instead of
   real map imagery (live-confirmed in a real browser). Standard OpenStreetMap tiles
   were tried as the replacement next, but their full street-level detail (coastline,
   buildings, POI icons) read as cluttered noise at close zoom over water -- so every
   map in this app now requests a single Esri World Light Gray Canvas tile URL for
   both light and dark mode instead: a basemap purpose-built as a muted background
   for overlay data, already close to grayscale. Esri has no separate dark tileset,
   so dark mode fakes one with a CSS filter on the light tiles: grayscale(1) strips
   whatever faint color remains, invert(1) then brings the desaturated roads/land to
   their opposite lightness, and the brightness/contrast trim softens the result
   slightly. This restores the plain grey-on-near-black look explicitly approved for
   this app's dark maps (see freight_tracking/CLAUDE.md's "Customer map tile choice"
   section) -- grayscale before invert is what actually matches that approved look,
   since a fully desaturated image can never gain color back from an invert (an
   earlier version tried a plain hue-rotate instead and reintroduced color). Scoped
   to the tile pane only, not the whole map container, so the ship marker/controls/
   attribution keep their real colors. */
.santek-freight-own-map--dark .leaflet-tile-pane {
	filter: grayscale(1) invert(1) brightness(0.95) contrast(0.9);
}

/* Freight Map Dashboard's "Shipment Details" panel -- modeled directly on ShipsGo's
   own embed widget slide-out panel (confirmed live 2026-08-19, see
   freight_tracking/CLAUDE.md), rendering this app's own already-stored tracking
   data. Positioned absolute over the map (Leaflet's own .leaflet-container is
   already position:relative), top-right corner, same placement ShipsGo uses.
   Built entirely from this app's/desk's existing CSS tokens (--card-bg,
   --border-color, --text-color, --text-muted) so it inherits desk's real dark
   theme automatically -- no separate --dark class needed here the way the raster
   map tiles required. */
.santek-freight-detail-panel {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1000;
	width: 280px;
	max-height: calc(100% - 24px);
	overflow-y: auto;
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	padding: 12px;
	font-size: 0.8rem;
	color: var(--text-color, #333);
}

.santek-freight-detail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.santek-freight-detail-badge {
	color: #fff;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
}

.santek-freight-detail-close {
	background: none;
	border: none;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--text-muted, #8d99a6);
}

.santek-freight-detail-title {
	font-weight: 600;
	margin-bottom: 8px;
}

.santek-freight-detail-rows > div {
	margin-bottom: 3px;
}

.santek-freight-detail-route {
	margin: 10px 0;
}

.santek-freight-detail-route-endpoints {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
}

.santek-freight-detail-route-place {
	max-width: 48%;
}

.santek-freight-detail-route-place--end {
	text-align: right;
}

.santek-freight-detail-route-date {
	font-size: 11px;
}

.santek-freight-detail-progress-track {
	height: 4px;
	border-radius: 4px;
	background: var(--border-color, #d1d8dd);
	margin: 6px 0;
	overflow: hidden;
}

.santek-freight-detail-progress-fill {
	height: 100%;
	border-radius: 4px;
}

.santek-freight-detail-section-title {
	font-weight: 600;
	margin: 10px 0 4px;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--text-muted, #8d99a6);
}

.santek-freight-detail-movements {
	max-height: 220px;
	overflow-y: auto;
}

.santek-freight-detail-movement-group {
	margin-bottom: 8px;
}

.santek-freight-detail-movement-location {
	font-weight: 600;
	font-size: 11px;
	margin-bottom: 2px;
}

.santek-freight-detail-movement-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	font-size: 11px;
}

.santek-freight-detail-movement-check {
	width: 14px;
	text-align: center;
	flex-shrink: 0;
}

.santek-freight-detail-movement-check.is-actual {
	color: #2e7d32;
}

.santek-freight-detail-movement-check.is-estimated {
	color: var(--text-muted, #8d99a6);
}

.santek-freight-detail-movement-status {
	flex: 1;
}

.santek-freight-detail-movement-date {
	color: var(--text-muted, #8d99a6);
	white-space: nowrap;
}

.santek-freight-detail-empty {
	font-size: 0.75rem;
}

/* Freight Map Dashboard -- "All Shipments" list toggle control (a tab-like button on
   the map's own control bar, topright, next to Leaflet's zoom controls) and the
   slide-out list panel it opens. */
.santek-freight-list-toggle-control a,
.santek-freight-fullscreen-control a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--card-bg, #fff);
	color: var(--text-color, #333);
}

.santek-freight-list-toggle-control a:hover,
.santek-freight-fullscreen-control a:hover {
	background: var(--control-bg, #f4f5f6);
}

/* **Leaflet hardcodes `.leaflet-bar a:hover, .leaflet-bar a:focus { background-color:
   #f4f4f4 }`** (checked in leaflet 1.9.4's own stylesheet, not assumed). The `:hover`
   half is overridden above; the `:focus` half was not, and an `<a>` keeps focus after a
   mouse click -- so clicking the list toggle left a hardcoded light-grey box sitting on
   a dark map until the next click landed somewhere else. Reported from the map.

   A mouse click therefore paints the button back to its resting colour, and hover still
   wins while the pointer is on it. Focus is not simply erased: `:focus-visible` is what
   a keyboard user gets, and it keeps both the tint and a real ring, so the fix for a
   lingering mouse highlight does not quietly cost the only cue a tab-key user has.

   Both controls, because the `:hover` rule above already covers both and Leaflet's
   `:focus` applies to the Freight map's fullscreen button identically. */
.santek-freight-list-toggle-control a:focus,
.santek-freight-fullscreen-control a:focus {
	background: var(--card-bg, #fff);
}

.santek-freight-list-toggle-control a:focus:hover,
.santek-freight-fullscreen-control a:focus:hover,
.santek-freight-list-toggle-control a:focus-visible,
.santek-freight-fullscreen-control a:focus-visible {
	background: var(--control-bg, #f4f5f6);
}

.santek-freight-list-toggle-control a:focus-visible,
.santek-freight-fullscreen-control a:focus-visible {
	outline: 2px solid var(--primary, #2490ef);
	outline-offset: -2px;
}

/* **Every Leaflet bar control on a DARK map, including the ones this app never styled.**
   Two separate faults, both reported from the map and both measured on dev.portal
   rather than eyeballed:

   - Leaflet's zoom control was never themed at all. It stayed `rgb(255, 255, 255)` with
     black glyphs -- two white squares on a near-black map.
   - The list toggle *was* themed, to `var(--card-bg)`, which in the dark palette is
     `#171717` -- the map's own background colour to the byte. It was not dark, it was
     invisible.

   `--border-color` is no help here either: dark resolves it to `#232323` against a
   `#171717` ground. So the surface comes from `--gray-800` (`#232323`, a real step up
   from the map) and the edge from `--gray-700` (`#383838`, the first token with enough
   contrast to read as an edge), rather than from the semantic tokens whose dark values
   happen to collapse onto the background.

   Scoped to the two `--dark` map classes deliberately: light mode is Leaflet's white on
   a light map, which is correct and stays untouched by construction rather than by
   care. Both classes, because `.santek-freight-own-map--dark` is the same controls on
   the same library with the same hardcoded white -- the sibling this would otherwise be
   fixed on one page at a time. That map was not opened to check; the defect is
   structural, not observed there.

   Specificity: two classes plus an element beats `.santek-freight-list-toggle-control a`
   above, so these win without depending on source order. */
.santek-field-location-map--dark .leaflet-bar,
.santek-freight-own-map--dark .leaflet-bar {
	/* Only the border. Leaflet's own `box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65)` is
	   already right for a dark map and overriding it would add a colour literal to
	   restate what the library says. */
	border-color: var(--gray-700, #383838);
}

.santek-field-location-map--dark .leaflet-bar a,
.santek-freight-own-map--dark .leaflet-bar a {
	background: var(--gray-800, #232323);
	color: var(--text-color, #f8f8f8);
	border-bottom-color: var(--gray-700, #383838);
}

.santek-field-location-map--dark .leaflet-bar a:hover,
.santek-field-location-map--dark .leaflet-bar a:focus:hover,
.santek-field-location-map--dark .leaflet-bar a:focus-visible,
.santek-freight-own-map--dark .leaflet-bar a:hover,
.santek-freight-own-map--dark .leaflet-bar a:focus:hover,
.santek-freight-own-map--dark .leaflet-bar a:focus-visible {
	background: var(--gray-700, #383838);
	color: var(--text-color, #f8f8f8);
}

/* A mouse click leaves nothing behind -- same rule as the light theme's, in this
   theme's colours. See the `:focus` block above for why this is separate from
   `:focus-visible`. */
.santek-field-location-map--dark .leaflet-bar a:focus,
.santek-freight-own-map--dark .leaflet-bar a:focus {
	background: var(--gray-800, #232323);
}

/* Zoom at its limit. Leaflet paints this `#f4f4f4` with `#bbb` glyphs -- another white
   square, and the one that is easiest to miss because it only appears once the map is
   fully zoomed in or out. */
.santek-field-location-map--dark .leaflet-bar a.leaflet-disabled,
.santek-freight-own-map--dark .leaflet-bar a.leaflet-disabled {
	background: var(--gray-900, #171717);
	color: var(--gray-600, #7c7c7c);
}

.santek-freight-list-toggle-btn svg,
.santek-freight-fullscreen-btn svg {
	width: 16px;
	height: 16px;
}

/* 1.2x the Shipment Details panel's own 280px width, per direct request. */
.santek-freight-list-panel {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1000;
	width: 336px;
	max-height: calc(100% - 24px);
	overflow-y: auto;
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color, #d1d8dd);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	font-size: 0.8rem;
	color: var(--text-color, #333);
}

.santek-freight-list-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-color, #d1d8dd);
	font-weight: 600;
	position: sticky;
	top: 0;
	background: var(--card-bg, #fff);
}

.santek-freight-list-panel-close {
	background: none;
	border: none;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--text-muted, #8d99a6);
}

.santek-freight-list-panel-body {
	padding: 4px 0;
}

/* The list toggle stays exactly where it is, at exactly the size it is, whether its
   panel is open or shut -- so toggling is the same pixels twice and needs no pointer
   movement at all.

   `.santek-freight-list-panel` pins itself to `top: 12px; right: 12px`, which is where
   Leaflet stacks its topright controls, so the panel lands on top of the button that
   opens it. Two earlier arrangements each traded that away for something else: pushing
   the panel below the control cost 52px of a scrolling list's height, and hiding the
   control in favour of a copy in the panel's header made the button change size and
   place between states.

   Lifting the control's own stacking context above the panel keeps one button and
   costs nothing: `.leaflet-top` sits at `z-index: 1000` and the panel at the same 1000,
   where the later sibling wins -- so 1001 is the whole fix. Topright is this map's list
   control alone (zoom is topleft, attribution bottomright), so nothing else is lifted
   with it. */
.santek-field-location-map .leaflet-top.leaflet-right {
	z-index: 1001;
}

/* ...and the panel's header leaves room for it, so the title never runs underneath.
   The vertical padding goes with it: a 30px control against a header that was 10px
   taller left the button riding above the title instead of on its line. `min-height`
   keeps the header the control's own height, so the two share a centre. */
.santek-field-location-map .santek-freight-list-panel-header {
	min-height: 30px;
	padding: 0 42px 0 12px;
}

/* **While the panel is open the control stops being a box and becomes the header's own
   icon.** Position and size are untouched -- the pointer lands in the same place for
   both halves of the toggle -- but a Leaflet bar's border, background and shadow are
   precisely what make it read as a *separate* thing once a panel is underneath it. The
   `a` is already flush with the panel's top-right corner by arithmetic (Leaflet's 10px
   control margin plus the bar's own 2px border is the panel's 12px inset), so dropping
   the chrome is the whole difference between "button parked on a panel" and "button in
   a header".

   Specificity is deliberate: `.leaflet-bar a.santek-freight-list-toggle-btn` under the
   container is three classes and an element, which beats the dark-map rules further
   down without depending on source order. */
/* `border-color: transparent`, never `border: none` -- the bar's 2px border is part of
   the layout, and removing it let the link inside expand into the space and jump 2px up
   and right on open. Measured, not guessed: (1487, 115) closed became (1489, 113) open.
   Two pixels is small and it is still the toggle moving under the pointer, which is the
   one thing this button is not allowed to do. Making the border invisible keeps the box
   and drops only the look. */
.santek-field-location-map--list-open .santek-freight-list-toggle-control {
	border-color: transparent;
	box-shadow: none;
	background: transparent;
}

.santek-field-location-map--list-open .leaflet-bar a.santek-freight-list-toggle-btn {
	background: transparent;
	border-bottom-color: transparent;
	border-radius: 0 8px 0 0;
}

.santek-field-location-map--list-open .leaflet-bar a.santek-freight-list-toggle-btn:hover,
.santek-field-location-map--list-open .leaflet-bar a.santek-freight-list-toggle-btn:focus:hover,
.santek-field-location-map--list-open .leaflet-bar a.santek-freight-list-toggle-btn:focus-visible {
	background: var(--control-bg, #f4f5f6);
}

/* One visit in the panel's stop list -- consecutive stops at the same place, folded
   into a row that opens.

   **No indent on the wrapper, deliberately.** It carried a left rule and 8px of padding,
   which pushed every visit row 10px right of the single-stop rows beside it -- and the
   list alternates between the two, so the left edge zig-zagged down the panel. The
   indent belongs to the NESTED stops, which really are subordinate; the visit header is
   a peer of a single-stop row and has to line up with one. */
.santek-field-location-visit {
	margin-bottom: 2px;
}

.santek-field-location-visit-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 0;
	cursor: pointer;
}

.santek-field-location-visit-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.santek-field-location-visit-stops {
	padding-left: 10px;
	border-left: 1px dashed var(--border-color, #d1d8dd);
	margin-left: 2px;
}

/* The disclosure caret, and the only part of the header that opens it -- the rest of
   the row takes the map to the visit. A real button so it is reachable by keyboard and
   carries its own aria-expanded; sized past the glyph so it is a comfortable target
   next to a row that does something else.

   Rotated rather than swapped for a second glyph, so the two states cannot drift apart
   and there is only one SVG to keep. */
.santek-field-location-visit-caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	color: var(--text-muted, #8d99a6);
	transform: rotate(-90deg);
	transition: transform 150ms ease;
}

.santek-field-location-visit-caret:hover {
	background: var(--control-bg, #f4f5f6);
}

.santek-field-location-visit-caret--open {
	transform: rotate(0deg);
}


.santek-freight-list-row {
	border-bottom: 1px solid var(--border-color, #d1d8dd);
}

.santek-freight-list-row:last-child {
	border-bottom: none;
}

.santek-freight-list-row-main {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	cursor: pointer;
}

.santek-freight-list-row-main:hover {
	background: var(--control-bg, #f4f5f6);
}

.santek-freight-list-row--active .santek-freight-list-row-main {
	background: var(--control-bg, #f4f5f6);
	font-weight: 600;
}

.santek-freight-list-icon {
	flex-shrink: 0;
	line-height: 0;
}

.santek-freight-list-ref {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.santek-freight-list-chevron {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-muted, #8d99a6);
	display: flex;
	align-items: center;
	padding: 2px;
	transition: transform 0.15s ease;
}

.santek-freight-list-chevron--open {
	transform: rotate(180deg);
}

.santek-freight-list-row-detail {
	display: none;
	padding: 0 12px 10px 34px;
}

/* Dashboard's own status badge -- same rounded-pill shape and same Freight Settings-
   configurable bucket palette as freight_shipment_list.js's native list-view badge
   (dashboard.get_display_colors(), fetched once by the dashboard), so status colors
   read the same whether you're looking at the map, the "All Shipments" panel, or
   /app/freight-shipment. */
.santek-freight-status-pill {
	display: inline-block;
	color: #fff;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

/* Colored/Single marker+route color mode toggle -- bottom-left, an equal 12px margin
   from both the left and bottom edges (tuned live per direct request -- an uneven
   first attempt was corrected to match). */
.santek-freight-color-mode-control {
	display: flex;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	margin: 0 0 12px 12px;
}

.santek-freight-color-mode-btn {
	border: none;
	padding: 5px 10px;
	font-size: 11px;
	cursor: pointer;
	background: var(--card-bg, #fff);
	color: var(--text-color, #333);
}

.santek-freight-color-mode-btn + .santek-freight-color-mode-btn {
	border-left: 1px solid var(--border-color, #d1d8dd);
}

.santek-freight-color-mode-btn--active {
	background: var(--blue-500, #1976d2);
	color: #fff;
}

/* Fullscreen toggle, both for our own Leaflet maps (a Leaflet Control, styled above
   alongside the list toggle) and for the ShipsGo iframe embed (not a Leaflet map at
   all, so it gets a plain absolutely-positioned button over its own corner instead).
   Browsers don't reliably auto-stretch a fullscreened non-video element without
   explicit sizing, hence the :fullscreen rules. */
.santek-freight-dashboard-map:fullscreen,
.santek-freight-own-map:fullscreen,
.santek-freight-embed-wrap:fullscreen {
	width: 100% !important;
	height: 100% !important;
}

.santek-freight-embed-wrap {
	position: relative;
}

/* !important is required here, not just for specificity over the class selector --
   the iframe carries its own inline height:650px (set at render time), and only a
   stylesheet rule marked !important outranks an inline style of otherwise-higher
   specificity. Without it, the iframe stayed pinned at 650px while its fullscreened
   wrap grew to fill the viewport, leaving real dead black space below it (the
   wrap's own background showing through) -- found live, not guessed. */
.santek-freight-embed-wrap:fullscreen iframe {
	width: 100% !important;
	height: 100% !important;
}

.santek-freight-embed-fullscreen-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	/* Matches Leaflet's own control z-index (1000) -- this button is also used as a
	   plain child of a Leaflet map container (render_own_map/detail.html's own-map),
	   where it needs to sit above the tile/marker/popup panes (which run up to ~700)
	   to stay clickable, not just above the iframe embed case it originated for. */
	z-index: 1000;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	border: 1px solid var(--border-color, #d1d8dd);
	background: var(--card-bg, #fff);
	color: var(--text-color, #333);
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ShipsGo's own embed widget has its own hamburger/history button in its map's
   topright corner (confirmed live, see freight_tracking/CLAUDE.md's "Shipment
   Details panel" entry) AND its own zoom +/- control topleft -- our fullscreen
   button collided with one, then (after an earlier fix) the other, both found live.
   Top-center is clear of both. Only the iframe-embed context needs this; render_
   own_map's Leaflet map keeps the default topright placement, since that corner is
   genuinely free there (Leaflet's own zoom control sits topleft, nothing else is
   topright on our own map). */
.santek-freight-embed-fullscreen-btn--topcenter {
	right: auto;
	left: 50%;
	transform: translateX(-50%);
}

.santek-freight-embed-fullscreen-btn:hover {
	background: var(--control-bg, #f4f5f6);
}

.santek-freight-embed-fullscreen-btn svg {
	width: 16px;
	height: 16px;
}

/* Field Location Map (santek_erp/field_location/page/field_location_map/) -- one
   rep's one route for the day. Reuses this app's one mapping convention (Leaflet +
   Esri World Light Gray Canvas tiles, the same attribution-toggle control) rather
   than inventing a second one, so these rules deliberately mirror .santek-freight-
   dashboard-map/.santek-freight-own-map--dark above instead of duplicating their
   own copies -- .santek-freight-attribution* is reused as-is (same control, same
   markup), only the map container and its own marker/pill classes are new. */
.santek-field-location-map {
	width: 100%;
	height: calc(100vh - 260px);
	min-height: 400px;
	border-radius: 6px;
	overflow: hidden;
	background: #eef0f1;
}

.santek-field-location-map--dark {
	background: #171717;
}

/* Same Esri gray-canvas dark-mode workaround as .santek-freight-own-map--dark
   above: grayscale(1) strips whatever faint color remains before invert(1) flips
   light-to-dark, restoring the plain grey-on-near-black look approved for this
   app's dark maps (see freight_tracking/CLAUDE.md's "Customer map tile choice"
   section) rather than the colorful result the previous filter (invert plus a hue
   shift back into place) produced -- a fully desaturated image can't regain color
   from an invert. */
.santek-field-location-map--dark .leaflet-tile-pane {
	filter: grayscale(1) invert(1) brightness(0.95) contrast(0.9);
}

.santek-field-location-stop-icon {
	background: transparent;
	border: none;
}

/* Direction-of-travel arrowheads along a route line. `pointer-events: none` as well
   as Leaflet's own `interactive: false`, because the divIcon's wrapper element is
   what a click actually lands on: an arrow sits directly on the line it belongs to,
   and one that swallowed clicks would block both selecting the track and clearing
   the highlight. */
.santek-field-location-route-arrow {
	background: transparent;
	border: none;
	pointer-events: none;
}

/* The live layer's own marker (Task 7) -- a pulsing dot, distinguished from
   .santek-field-location-stop-icon's numbered circle by MOTION. Never a second colour:
   this page's colour = rep / dash = handheld split already answers "who", so liveness
   gets a channel neither of them uses -- see field_location_map.js's own
   live_marker_colour(). It was a static triangle until 2026-09-13; shape turned out to
   be the wrong channel to spend, since a triangle among numbered circles reads as
   another kind of stop rather than as "here, now". */
.santek-field-location-live-icon {
	background: transparent;
	border: none;
}

/* The live marker's pulse -- the ring breathing out from behind the solid core.
   Liveness cannot use colour on this page (colour is the rep, dash is the handheld),
   and the shape channel was tried and wasted on a static triangle that read as "some
   other kind of stop". Motion was the one left, and a pulsing dot is what every map
   uses for a live position, so it needs no legend.

   Only `transform` and `opacity` are animated, so this composites on the GPU and does
   not relayout a map that is already drawing thousands of polyline vertices.
   `transform-box: fill-box` is what makes `transform-origin: center` mean the circle's
   own centre rather than the SVG viewport's origin. */
.santek-field-location-live-pulse {
	transform-box: fill-box;
	transform-origin: center;
	animation: santek-field-location-live-pulse 2s ease-out infinite;
}

@keyframes santek-field-location-live-pulse {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	70% {
		transform: scale(2.6);
		opacity: 0;
	}
	100% {
		transform: scale(2.6);
		opacity: 0;
	}
}

/* Asked to stop animating: the ring freezes as a static halo rather than vanishing, so
   the live marker still reads as different from a numbered stop pin. Turning the
   animation off without this would leave the two indistinguishable for exactly the
   people who cannot use motion to tell them apart. */
@media (prefers-reduced-motion: reduce) {
	.santek-field-location-live-pulse {
		animation: none;
		transform: scale(2);
		opacity: 0.25;
	}
}

/* The side panel's per-row freshness dot -- filled while that track reported in
   the most recent 60s poll, hollow otherwise. Deliberately its own small status
   affordance rather than the rep's own colour: the row already carries that
   colour on its route swatch, and reusing it here would make a stale dot and a
   live one differ only by fill, which is far less scannable across a list of
   eight rows than a plain on/off state. Reuses --green-500, the same "live/
   active" token this file already uses elsewhere (search this file for
   --green-500) rather than inventing a second success colour. */
.santek-field-location-live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 1.5px solid var(--text-muted, #8d99a6);
	background: transparent;
}

.santek-field-location-live-dot--filled {
	border-color: var(--green-500, #2e7d32);
	background: var(--green-500, #2e7d32);
}

/* The capture-gap marker in a rep's panel row. Amber only when the server itself sees a
   problem; a phone-reported event on its own is plain muted text. */
.santek-field-location-capture-flag {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.35;
	color: var(--text-muted);
	white-space: normal;
}

.santek-field-location-capture-flag--amber {
	/* --yellow-800, not -700: measured on dev.portal 2026-09-24, Frappe's own
	   --yellow-700 (#ab6e05) is 4.23:1 on white, under the 4.5:1 this 11px text needs;
	   --yellow-800 (#8c5600) is 6.09:1. No literal fallback: both tokens are Frappe's own
	   and always defined, and an undefined one degrades to the muted colour above. */
	color: var(--yellow-800);
}

[data-theme="dark"] .santek-field-location-capture-flag--amber {
	color: var(--yellow-400);
}

.santek-field-location-capture-unmatched {
	padding: 8px 12px;
	border-bottom: 1px solid var(--border-color);
}

.santek-field-location-popup hr {
	border-color: var(--border-color, #d1d8dd);
}

/* Leaflet hard-codes `background: white; color: #333` on its popup card, so in a dark
   desk theme a stop popup opened as a bright white slab on a near-black map. Themed
   through Frappe's own tokens rather than under this map's `--dark` class: the tokens
   already track the desk theme, so light stays byte-identical (`--card-bg` IS white
   there) and dark follows automatically -- no second code path, and nothing to keep in
   sync with `is_dark()`.

   Scoped to this map's container, deliberately. The Freight maps' popups carry
   different content and were not looked at; widening the selector would restyle them
   sight-unseen. */
.santek-field-location-map .leaflet-popup-content-wrapper,
.santek-field-location-map .leaflet-popup-tip {
	background: var(--card-bg, #fff);
	color: var(--text-color, #333);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.santek-field-location-map .leaflet-popup-close-button {
	color: var(--text-muted, #8d99a6);
}

/* A grouped pin's stop list: three aligned columns, not nine wrapped sentences.
   `tabular-nums` is what actually makes it scannable -- the times form a straight
   edge down the card, so a reader compares durations by position instead of reading
   each row. */
.santek-field-location-popup-stops {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.santek-field-location-popup-stop {
	display: grid;
	grid-template-columns: 2.2em 1fr auto;
	gap: 8px;
	align-items: baseline;
	padding: 2px 0;
	font-variant-numeric: tabular-nums;
}

/* Zebra striping rather than a rule between every row: at nine rows a border each
   reads as a table someone should study, and the point here is to skim. */
.santek-field-location-popup-stop:nth-child(odd) {
	background: var(--control-bg, #f4f5f6);
}

.santek-field-location-popup-stop-n {
	font-weight: 600;
	text-align: right;
	color: var(--text-muted, #8d99a6);
}

.santek-field-location-popup-stop-dwell {
	text-align: right;
	color: var(--text-muted, #8d99a6);
	white-space: nowrap;
}