.ar {text-align:right !important;}
.ac {text-align:center !important;}
.al {text-align:left !important;}
.warning {color:var(--bol-color-negative);}

i {vertical-align:text-bottom;width:20px;height:20px;display:inline-block;background-color:currentColor;mask-position:center;mask-size:20px;mask-repeat:no-repeat;}
i.marker-outline {-webkit-mask-image:url(/images/marker-outline.svg);mask-image:url(/images/marker-outline.svg);}
i.phone {-webkit-mask-image:url(/images/phone.svg);mask-image:url(/images/phone.svg);}
i.mail {-webkit-mask-image:url(/images/mail.svg);mask-image:url(/images/mail.svg);}
i.cart {-webkit-mask-image:url(/images/cart.svg);mask-image:url(/images/cart.svg);}
i.truck {-webkit-mask-image:url(/images/truck.svg);mask-image:url(/images/truck.svg);}
i.checkmark {-webkit-mask-image:url(/images/checkmark.svg);mask-image:url(/images/checkmark.svg);}
i.circle {-webkit-mask-image:url(/images/circle.svg);mask-image:url(/images/circle.svg);}
i.failed {-webkit-mask-image:url(/images/failed.svg);mask-image:url(/images/failed.svg);}
i.creation {-webkit-mask-image:url(/images/creation.svg);mask-image:url(/images/creation.svg);}
i.late {-webkit-mask-image:url(/images/late.svg);mask-image:url(/images/late.svg);}
i.search {-webkit-mask-image:url(/images/search.svg);mask-image:url(/images/search.svg);}
i.chevron {-webkit-mask-image:url(/images/chevron.svg);mask-image:url(/images/chevron.svg);}
i.pod {-webkit-mask-image:url(/images/pod.svg);mask-image:url(/images/pod.svg);}
i.back {-webkit-mask-image:url(/images/back.svg);mask-image:url(/images/back.svg);}
i.cog {-webkit-mask-image:url(/images/cog.svg);mask-image:url(/images/cog.svg);}
i.forward {-webkit-mask-image:url(/images/forward.svg);mask-image:url(/images/forward.svg);}

.order-pods td {padding-bottom:6px;}
.order-pod {display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;margin:2px 6px 2px 0;border:1px solid var(--bol-color-border);border-radius:6px;background:var(--bol-color-background-secondary);color:var(--bol-color-text-secondary);font-size:12px;text-decoration:none;}
.order-pod:hover {color:var(--bol-color-accent);border-color:var(--bol-color-accent);}
.order-pod i {width:16px;height:16px;mask-size:16px;}
#pod-window {height:92vh;width:min(900px, 96vw);left:50%;right:auto;transform:translateX(-50%) translateY(100%);border-top-left-radius:12px;border-top-right-radius:12px;}
#pod-window.showing, #pod-window.show {transform:translateX(-50%) translateY(0);}
#pod-window #pod-body {display:flex;flex-direction:column;}
#pod-window #pod-viewer {display:flex;align-items:stretch;justify-content:center;gap:4px;flex:1 1 auto;min-height:0;}
#pod-window .pod-frame {width:100%;height:100%;border:0;border-radius:4px;min-width:0;flex:1 1 auto;background:#fff;}
#pod-window .pod-nav {flex:0 0 auto;display:flex;align-items:center;padding:6px;color:var(--bol-color-text-secondary);}
#pod-window .pod-nav:hover {color:var(--bol-color-accent);}
#pod-window .pod-nav i {width:28px;height:28px;mask-size:28px;}
#pod-window #pod-actions {margin-top:10px;text-align:right;}

.main-title {padding:5px 20px;font-size:1.3em;font-weight:500;text-transform:uppercase;}

#search-btn {position:fixed;top:85vh;right:38vw;left:38vw;text-align:center;border-radius:var(--bol-radius);padding:2px 5px;background-color:var(--bol-color-text-disabled);color:#fff;box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);text-decoration:none;}
#search-btn.selected {left:5vw;right:5vw;}
#search-btn i {width:20px;height:20px;mask-size:20px;}

.table {color:var(--bol-color-text-primary);}

.section {background:var(--bol-color-background-tertiary);border-radius:var(--bol-radius);padding:10px;margin:20px 0;}
.section:first-of-type {margin-top:0;}
.section .table>:not(caption)>*>* {border-bottom:0;padding:5px;}
.section .title {font-weight:500;}
.section .store-stats {float:right;}
.section .store-stats i {color:var(--bol-color-focus);}

.crd {background:var(--bol-color-background-tertiary);border-radius:var(--bol-radius);padding:10px;text-align:center;margin:10px;}
.crd .n {font-size:1.2em;padding:10px 0;font-weight:500;}
.crd .l {font-size:0.8em;}

#content {padding-top:65px;}

#searchdiv {position:fixed;width:100%;z-index:9999;padding:16px 10px;background-color:var(--bol-color-background-secondary);}
#product-search {background-color:var(--bol-color-background-tertiary);border:none;}
#search {background-color:var(--bol-color-background-tertiary);border:none;color:var(--bol-color-text-primary);}
#searchdiv.has-admin {padding-right:52px;}
#admin-link {position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--bol-color-text-secondary);line-height:0;}
#admin-link:hover {color:var(--bol-color-text-primary);}
#admin-link i {width:24px;height:24px;mask-size:24px;}

#auto-suggest {position:relative;top:0.7rem;border-radius:var(--bol-radius);max-height:80vh;overflow:hidden;overflow-y:auto;padding:10px;font-size:0.9em;font-weight:300;z-index:9999;background-color:var(--bol-color-background-tertiary);display:none;box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);}
#auto-suggest ul {list-style:none;margin:0;padding:0;}
#auto-suggest ul li {padding:10px 10px 10px 36px;margin:5px 0;background-color:var(--bol-color-background-secondary);border-radius:var(--bol-radius);position:relative;}
#auto-suggest ul li .label {display:block;font-size:0.8em;}
#auto-suggest ul li i.marker-outline {position:absolute;left:10px;top:12px;}
#auto-suggest ul li i.chevron {position:absolute;top:20px;right:10px;color:var(--bol-color-primary);}

#stops-div {padding:10px 0;}
.empty-state {text-align:center;padding:60px 20px;color:var(--bol-color-text-secondary);}
.empty-state i {width:40px;height:40px;mask-size:40px;margin-bottom:12px;opacity:0.6;}
.empty-state .empty-title {font-size:1.1em;font-weight:600;color:var(--bol-color-text-primary);margin-bottom:6px;}
.empty-state .empty-hint {font-size:0.95em;max-width:420px;margin:0 auto;}
.stop {background-color:var(--bol-color-background-secondary);margin:10px;position:relative;border-radius:4px;}
.stop.filtered {display:none;}

.accordion-flush .accordion-item {border-radius:var(--bol-radius);box-shadow:none;border:0;}
.accordion-flush .accordion-item .accordion-button.collapsed {border:1px solid var(--bol-color-border);background-color:var(--bol-color-background-secondary);}
.accordion-item:last-of-type .accordion-button.collapsed {border-radius:var(--bol-radius);}
.accordion-flush .accordion-item .accordion-button:not(.collapsed) {box-shadow:none;border:1px solid var(--bol-color-border);border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;}
.stop .accordion-header {position:relative;border-radius:var(--bol-radius);}
.stop .accordion-header .time {position:absolute;bottom:16px;right:16px;font-size:0.9em;color:var(--bol-color-text-secondary);}
.stop .accordion-header .time .time-label {margin-right:6px;font-weight:300;opacity:0.85;}
.stop .accordion-header .time.late {color:var(--bol-color-negative);font-weight:500;}
.stop .accordion-header .time.late i.late {mask-size:16px;width:16px;height:16px;margin-left:6px;}
.stop .accordion-header .status {display:inline-block;padding:2px 10px;background-color:var(--bol-color-primary);font-size:0.9em;border-radius:var(--bol-radius-pill);color:var(--bol-color-text-contrast);margin-top:10px;font-weight:500;}

.stop.finished .status {background-color:var(--bol-color-positive);}
.stop.skipped .status {background-color:var(--bol-color-negative);}
/* Coral accent chip carries a Burgundy label per the brand button treatment */
.stop.eta .status {background-color:var(--bol-color-accent);color:var(--bol-color-burgundy);}
.stop.planned .status {background-color:var(--bol-color-primary);}
.stop.eta .location i {color:var(--bol-color-accent);}
.stop.started .location i.delivering {color:var(--bol-color-primary);}

.stop .accordion-body {position:relative;font-size:0.9rem;border:1px solid var(--bol-color-border);border-top:0;border-bottom-left-radius:var(--bol-radius);border-bottom-right-radius:var(--bol-radius);box-shadow:none;}
.accordion-flush .accordion-item .accordion-button {display:block;font-size:0.9rem;border-radius:var(--bol-radius);color:var(--bol-color-text-primary);}
.stop .location {display:block;position:absolute;top:10px;right:10px;padding:5px;border-radius:4px;}
.stop .location i {width:28px;height:28px;mask-size:28px;color:var(--bol-color-text-secondary);}
.date-marker {text-align:left;padding-left:20px;color:var(--bol-color-text-primary);font-weight:500;}
.date-marker > span {padding:5px 10px;}
.sssssstop .location i.failed.skipped {color:var(--bol-color-negative);}
.stop .location i.checkmark {color:var(--bol-color-positive);}

.address {}
.address .address-name {font-weight:500;max-width:75vw;}
.address .address-label {color:var(--bol-color-text-secondary);max-width:75vw;}
.address-details {height:30px;}

.timeline {font-size:0.9em;width:100%;margin:20px 0;}
.timeline td {text-align:center;width:33.33%;}
.timeline hr {height:5px;margin:5px 0;}
.timeline td.finished hr {color:var(--bol-color-positive);opacity:1;}
.timeline .phase {display:block;text-transform:uppercase;}
.timeline .dt {display:block;}

#store-stats-window {height:70vh;max-height:70vh;border-top-left-radius:var(--bol-radius);border-top-right-radius:var(--bol-radius);background-color:var(--bol-color-background-secondary);}

#history-window {width:100vw;background-color:var(--bol-color-background-primary);}
#history-body {padding:0;}

#notifications-window {width:100vw;background-color:var(--bol-color-background-primary);}
#notifications .section {background-color:var(--bol-color-background-secondary);border-radius:var(--bol-radius);padding:14px 16px;margin-bottom:12px;}
#notifications .title {font-weight:600;}
#notifications .address-label {color:var(--bol-color-text-secondary);font-size:0.9em;}
#notifications label {font-weight:500;margin:8px 0 4px 0;display:block;}
#notifications label:first-child {margin-top:0;}
#notifications .hint {color:var(--bol-color-text-secondary);font-size:0.85em;margin-top:6px;}
#notifications .notice {border-left:4px solid var(--bol-color-accent);}
#notifications .notifications-table {margin-bottom:12px;}
#notifications .notifications-table th {font-weight:600;font-size:0.85em;}
#notifications-msg {margin-bottom:10px;font-size:0.9em;}
.notifications-btn {margin-top:8px;}

#details-window {height:70vh;max-height:70vh;border-top-left-radius:var(--bol-radius);border-top-right-radius:var(--bol-radius);background-color:var(--bol-color-background-secondary);}
#details-window #map {width:100%;height:260px;border-radius:var(--bol-radius);overflow:hidden;}

#order-window {height:70vh;max-height:70vh;z-index:99999;border-top-right-radius:var(--bol-radius);border-top-left-radius:var(--bol-radius);background-color:var(--bol-color-background-secondary);color:var(--bol-color-text-primary);}
#product-list {padding:40px 0 40px 0;}
#product-list .quantity {display:block;font-size:0.8em;}
#product-list tr.filtered {display:none;}
#product-search-div {position:absolute;top:60px;left:0;width:100%;background-color:var(--bol-color-background-secondary);padding:10px 16px;}
#order-button-div {position:absolute;bottom:0;left:0;width:100%;background-color:var(--bol-color-background-primary);padding:10px 16px;}

.order-list {margin:10px 0;overflow:hidden;overflow-x:auto;white-space:nowrap;}
.order-list .order {display:inline-block;border-radius:var(--bol-radius);background-color:var(--bol-color-background-secondary);padding:10px;margin:10px;min-width:150px;border-color:var(--bol-color-border);}
.order-list .order-table {margin-bottom:0;}
.order-list .order-table td, .order-list .order-table th {padding:0;}

.timeline {width:100%;margin-top:20px;}
.timeline .circle {color:var(--bol-color-border);}
.timeline td {position:relative;text-align:center;}
.timeline span.b {background-color:var(--bol-color-border);display:block;height:4px;position:absolute;top:50%;margin-top:-2px;}
.timeline td.first {text-align:left;}
.timeline td.first .b {left:30px;right:0;width:calc(100% - 30px);}
.timeline td .b {left:0px;width:calc(50% - 15px);}
.timeline td .b2 {left:calc(50% + 15px);right:0;}
.timeline td.last {text-align:right;}
.timeline td.last .b {right:30px;left:0;width:calc(100% - 30px);}

td.done .b {background-color:var(--bol-color-primary);}
td.done i {color:var(--bol-color-primary);}

#live-location {width:100%;height:300px;border-radius:var(--bol-radius);overflow:hidden;margin-bottom:10px;}
tr.planned.finished td.amount {text-decoration:line-through;}
tr.actual td.amount .indicative {margin-left:2px;}
.indicative-note {font-size:0.8em;color:var(--bol-color-text-secondary);margin-top:4px;}

#message .notice {text-align:center;font-weight:bold;padding:20px;}

/* Live-vehicle pulse: Coral (brand accent for key interface details) stays
   visible on the light map tiles in both themes. */
.vehicle-marker {display:block;width:16px;height:16px;background:var(--bol-color-coral-dark);top:-8px;left:-8px;border-radius:20px;animation:pulse 1s infinite ease-in-out;}

@keyframes pulse {
	0% {opacity:1;}
	50% {opacity:0.4;}
	100% {opacity:1;}
}

.driver-name {margin:10px 0;text-align:right;font-weight:400;}
.driver-name .name {color:var(--bol-color-primary);}

#details-msg {display:none;margin:20px 0 0 0;color:var(--bol-color-negative);text-align:center;font-weight:500;}

/* ---------------------------------------------------------------------------
   Desktop layout. The base styles above are mobile-first (fixed, full-width).
   On wider screens the content stretched edge-to-edge, leaving stop cards very
   wide with a big gap between the address and the right-aligned status/time.
   Here we centre everything in a comfortable column and keep the slide-in
   panels a sensible width. Mobile (< 768px) is unaffected.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
	/* Fixed search bar spans the width (so its background does), but its
	   contents line up with the centred content column below. */
	#searchdiv {padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);}
	#searchdiv #search {max-width:720px;margin-left:auto;margin-right:auto;height:44px;}
	#auto-suggest {max-width:720px;margin-left:auto;margin-right:auto;}

	#content {max-width:720px;margin:0 auto;padding-top:82px;}

	.date-marker {padding-left:4px;margin-top:8px;}
	.stop {margin:14px 0;}
	.stop .accordion-header .time {bottom:18px;right:20px;}
	/* Keep long names off the absolutely-positioned time. */
	.address .address-name, .address .address-label {max-width:70%;}

	/* Slide-in panels: centred, capped — not stretched across the screen.
	   left/right:0 come from Bootstrap, so margin auto centres without
	   touching the transform used for the show/hide animation. */
	#details-window, #order-window, #store-stats-window {
		width:760px;max-width:92vw;margin-left:auto;margin-right:auto;
	}
	#details-window #map {height:340px;}
	#history-window, #notifications-window {width:520px;}
	#product-search-div, #order-button-div {max-width:760px;margin-left:auto;margin-right:auto;}
}

/* On large screens give the reading column a little more room. */
@media (min-width: 1200px) {
	#content {max-width:800px;}
	#searchdiv #search, #auto-suggest {max-width:800px;}
}