:root {
	--app-surface-soft: #f4f8fb;
	--app-surface-muted: #e8f0f5;
	--app-surface-strong: #ffffff;
	--app-border: #d4dee7;
	--app-text-soft: #64788c;
	--app-text-strong: #16324a;
	--app-primary: #2b6fcf;
	--app-primary-strong: #1f57a6;
	--app-primary-soft: #dce9fb;
	--app-success: #2f855a;
	--app-success-soft: #def1e6;
	--app-warning: #b7791f;
	--app-warning-soft: #fff1d9;
	--app-danger: #c0565e;
	--app-danger-soft: #fbe4e7;
	--app-shell-max-width: 1320px;
	--app-page-padding-x: 12px;
	--app-page-padding-y: 16px;
	--app-button-height: 54px;
	--app-card-gap: 14px;
	--app-modal-width: 760px;
}

html,
body {
	min-height: 100%;
}

body.app-shell {
	--bs-body-bg: #edf4f7;
	--bs-body-color: var(--app-text-strong);
	--bs-primary: var(--app-primary);
	--bs-primary-rgb: 43, 111, 207;
	--bs-secondary: var(--app-text-soft);
	--bs-secondary-rgb: 100, 120, 140;
	--bs-secondary-color: var(--app-text-soft);
	--bs-secondary-bg: var(--app-surface-muted);
	--bs-success: var(--app-success);
	--bs-success-rgb: 47, 133, 90;
	--bs-warning: var(--app-warning);
	--bs-warning-rgb: 183, 121, 31;
	--bs-danger: var(--app-danger);
	--bs-danger-rgb: 192, 86, 94;
	--bs-light: var(--app-surface-soft);
	--bs-light-rgb: 244, 248, 251;
	--bs-tertiary-bg: var(--app-surface-soft);
	--bs-tertiary-bg-rgb: 244, 248, 251;
	--bs-border-color: var(--app-border);
	--bs-border-color-translucent: rgba(212, 222, 231, 0.85);
	--bs-link-color: var(--app-primary-strong);
	--bs-link-hover-color: var(--app-primary);
	--bs-heading-color: var(--app-text-strong);
	--bs-card-border-radius: 1.4rem;
	--bs-border-radius: 1rem;
	--bs-border-radius-lg: 1.1rem;
	--bs-border-radius-xl: 1.25rem;
	--bs-border-radius-2xl: 1.5rem;
	--bs-box-shadow-sm: 0 12px 28px rgba(22, 50, 74, 0.08);
	--bs-box-shadow: 0 18px 44px rgba(22, 50, 74, 0.12);
	margin: 0;
	font-family: "Roboto", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
}

.app-shell [hidden] {
	display: none !important;
}

.app-shell a {
	color: inherit;
}

.app-shell .text-secondary {
	color: var(--app-text-soft) !important;
}

.app-shell .text-secondary-emphasis {
	color: var(--app-text-strong) !important;
}

.app-shell .bg-body-tertiary {
	background: var(--app-surface-soft) !important;
}

.app-shell .card {
	background: var(--app-surface-strong);
}

.app-shell .alert-success {
	background: var(--app-success-soft);
	border-color: rgba(47, 133, 90, 0.18);
	color: var(--app-success);
}

.app-shell .alert-danger {
	background: var(--app-danger-soft);
	border-color: rgba(192, 86, 94, 0.18);
	color: var(--app-danger);
}

.app-shell .badge.text-bg-light,
.app-shell .badge.text-bg-primary {
	background: var(--app-primary-soft) !important;
	color: var(--app-primary-strong) !important;
}

.app-shell .badge.text-bg-success {
	background: var(--app-success-soft) !important;
	color: var(--app-success) !important;
}

.app-shell .badge.text-bg-warning {
	background: var(--app-warning-soft) !important;
	color: var(--app-warning) !important;
}

.app-shell .badge.text-bg-danger {
	background: var(--app-danger-soft) !important;
	color: var(--app-danger) !important;
}

.app-shell .badge.text-bg-secondary {
	background: var(--app-surface-muted) !important;
	color: var(--app-text-soft) !important;
}

.app-shell button,
.app-shell input,
.app-shell select,
.app-shell textarea {
	font: inherit;
}

.app-shell a,
.app-shell button,
.app-shell [role="button"],
.app-shell input,
.app-shell select,
.app-shell textarea {
	touch-action: manipulation;
}

.app-shell i.bi {
	line-height: 1;
}

.app-shell :focus-visible {
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(15, 108, 189, 0.16);
}

.min-w-0 {
	min-width: 0;
}

.ls-wide {
	letter-spacing: 0.08em;
}

.app-page {
	box-sizing: border-box;
	max-width: var(--app-shell-max-width);
	margin: 0 auto;
	padding: var(--app-page-padding-y) var(--app-page-padding-x) 32px;
}

.app-page h1 {
	margin: 0;
	font-size: clamp(1.9rem, 3.5vw, 2.6rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.app-page h2 {
	margin: 0 0 0.5rem;
	font-size: 1.12rem;
	font-weight: 900;
}

.app-shell .form-label {
	color: var(--app-text-soft);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.app-shell .form-control,
.app-shell .form-select,
.app-swal-input {
	min-height: var(--app-button-height);
	padding: 0.75rem 1rem;
	border-radius: 1rem;
	border-color: var(--app-border);
	background: var(--app-surface-soft);
	font-size: 1rem;
	font-weight: 600;
	box-shadow: none;
}

.app-shell .form-control:focus,
.app-shell .form-select:focus,
.app-swal-input:focus {
	border-color: rgba(15, 108, 189, 0.42);
	background: #fff;
	box-shadow: 0 0 0 0.25rem rgba(15, 108, 189, 0.12);
}

.app-shell .form-control::placeholder,
.app-shell .form-select,
.app-swal-input::placeholder {
	color: #8291a2;
	opacity: 1;
}

.app-shell .btn {
	min-height: var(--app-button-height);
	border-radius: 1rem;
	font-weight: 800;
}

.app-shell .btn-primary {
	--bs-btn-bg: var(--app-primary);
	--bs-btn-border-color: var(--app-primary);
	--bs-btn-hover-bg: var(--app-primary-strong);
	--bs-btn-hover-border-color: var(--app-primary-strong);
	--bs-btn-active-bg: var(--app-primary-strong);
	--bs-btn-active-border-color: var(--app-primary-strong);
}

.app-shell .btn-outline-secondary,
.app-shell .btn-outline-primary {
	--bs-btn-color: var(--app-text-strong);
	--bs-btn-bg: var(--app-surface-soft);
	--bs-btn-border-color: var(--app-border);
	--bs-btn-hover-bg: var(--app-primary-soft);
	--bs-btn-hover-color: var(--app-primary-strong);
	--bs-btn-hover-border-color: rgba(43, 111, 207, 0.28);
	--bs-btn-active-bg: var(--app-primary-soft);
	--bs-btn-active-color: var(--app-primary-strong);
	--bs-btn-active-border-color: rgba(43, 111, 207, 0.28);
}

.app-shell .btn-outline-warning {
	--bs-btn-color: var(--app-warning);
	--bs-btn-bg: var(--app-warning-soft);
	--bs-btn-border-color: rgba(183, 121, 31, 0.28);
	--bs-btn-hover-bg: #fbe7c0;
	--bs-btn-hover-color: #8a5c19;
	--bs-btn-hover-border-color: rgba(183, 121, 31, 0.4);
	--bs-btn-active-bg: #fbe7c0;
	--bs-btn-active-color: #8a5c19;
	--bs-btn-active-border-color: rgba(183, 121, 31, 0.4);
}

.app-shell .btn.is-busy,
.app-shell .btn:disabled {
	opacity: 0.72;
	cursor: wait;
}

.app-empty-state {
	padding: 1.25rem;
	border: 1px dashed rgba(95, 113, 134, 0.34);
	border-radius: 1.25rem;
	background: var(--app-surface-soft);
	color: var(--app-text-soft);
	font-weight: 700;
}

.app-inline-status {
	border-radius: 1rem;
	font-weight: 700;
}

.app-topbar,
.app-update-banner {
	background: var(--bs-body-bg);
}

.app-topbar {
	z-index: 1100;
}

.app-shell-container {
	max-width: var(--app-shell-max-width);
	margin: 0 auto;
}

.app-update-banner .card {
	background: linear-gradient(135deg, #fff6e6 0%, #fbe9c7 100%);
}

.app-brand-mark {
	width: 46px;
	height: 46px;
	border: 1px solid var(--app-border);
	border-radius: 1rem;
	background: var(--app-primary-soft);
	flex: 0 0 auto;
}

.app-brand-logo {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.app-brand-title {
	color: var(--app-text-strong);
	font-size: 1.02rem;
	font-weight: 900;
	white-space: nowrap;
}

.app-menu-toggle,
.app-banner-action {
	min-height: 46px !important;
	border-radius: 0.9rem !important;
	font-size: 0.94rem;
	font-weight: 800;
	box-shadow: none !important;
}

.app-icon-square,
.app-menu-link-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.app-icon-square {
	font-size: 1.15rem;
}

.app-menu-panel {
	min-width: min(320px, calc(100vw - 28px));
	margin-top: 10px;
	border-radius: 1.25rem;
	border-color: var(--app-border);
}

.app-menu-link {
	font-weight: 700;
}

.app-menu-link:hover,
.app-menu-link:focus {
	background: var(--app-primary-soft);
	color: var(--app-primary-strong);
}

.app-menu-link-danger {
	color: var(--app-danger);
}

.app-menu-link-danger:hover,
.app-menu-link-danger:focus {
	background: var(--app-danger-soft);
	color: var(--app-danger);
}

.app-banner-action {
	white-space: nowrap;
}

.app-status-message {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 1200;
	display: none;
	max-width: min(92vw, 560px);
	padding: 14px 16px;
	border-radius: 18px;
	transform: translateX(-50%);
	font-size: 0.95rem;
	font-weight: 800;
}

.app-status-message.is-visible {
	display: block;
}

.app-status-message.is-error {
	background: var(--app-danger);
	color: #fff;
}

.app-status-message.is-success {
	background: var(--app-success);
	color: #fff;
}

.app-password-field .form-control,
.app-password-field .app-swal-input {
	padding-right: 3.5rem;
}

.app-password-toggle {
	width: 36px;
	height: 36px;
	border-radius: 12px;
}

.app-password-toggle:hover,
.app-password-toggle:focus,
.app-password-toggle.is-active {
	background: var(--app-primary-soft);
	color: var(--app-primary-strong) !important;
}

.app-swal-popup {
	width: min(var(--app-modal-width), calc(100vw - 24px));
	max-width: 100%;
	padding: 0 0 18px;
	border: 0;
	border-radius: 1.5rem;
	background: #fff;
}

.app-swal-title {
	padding: 18px 18px 10px;
	font-size: 1.12rem;
	font-weight: 900;
}

.app-swal-text {
	padding: 0 18px;
	font-size: 0.96rem;
	line-height: 1.6;
}

.app-swal-input {
	width: calc(100% - 36px);
	margin: 16px 18px 0;
}

.app-swal-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	margin: 16px 0 0;
	padding: 0 18px;
}

.app-orders-actions .btn {
	width: 100%;
}

body.app-shell.app-platform-android #reloadOrders,
body.app-shell.app-platform-ios #reloadOrders {
	display: none !important;
}

body.app-shell.app-platform-android .app-orders-refresh-hint,
body.app-shell.app-platform-ios .app-orders-refresh-hint {
	display: inline;
}

body.app-shell:not(.app-platform-android):not(.app-platform-ios) .app-orders-refresh-hint {
	display: none;
}

.app-orders-workspace {
	display: grid;
	gap: var(--app-card-gap);
}

.app-orders-grid {
	display: grid;
	gap: var(--app-card-gap);
}

.app-order-card {
	cursor: pointer;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.app-order-card:hover,
.app-order-card:focus-visible,
.app-order-card.is-active {
	transform: translateY(-1px);
}

.app-order-card.is-active {
	border-color: rgba(43, 111, 207, 0.4);
}

.app-order-stop {
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
}

.app-order-icon {
	display: block;
	width: 46px;
	height: 46px;
	padding: 9px;
	border-radius: 1rem;
	background: var(--app-surface-soft);
	object-fit: contain;
}

.app-order-sequence,
.app-orders-summary-sequence {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px 999px 999px 0;
	transform: rotate(-45deg);
	font-size: 0;
	color: transparent;
	line-height: 1;
}

.app-order-sequence::before,
.app-orders-summary-sequence::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 999px;
}

.app-order-sequence::after,
.app-orders-summary-sequence::after {
	content: attr(data-sequence-label);
	position: relative;
	z-index: 1;
	font-size: 0.82rem;
	font-weight: 900;
	color: #fff;
	transform: rotate(45deg);
}

.app-order-sequence[data-order-sequence="pickup"],
.app-orders-summary-sequence[data-summary-sequence-type="pickup"] {
	background: var(--app-danger);
}

.app-order-sequence[data-order-sequence="delivery"],
.app-orders-summary-sequence[data-summary-sequence-type="delivery"] {
	background: var(--app-primary);
}

.app-order-sequence:not([hidden]) {
	display: inline-flex;
}

.app-divider {
	border-color: var(--app-border);
	opacity: 1;
}

.app-order-panel {
	display: none;
}

.app-order-panel-body {
	min-height: 220px;
}

.app-order-contact {
	align-items: flex-start;
}

.app-order-notes {
	overflow: hidden;
}

.app-order-notes[open] {
	background: var(--app-surface-strong) !important;
}

.app-order-notes-toggle {
	list-style: none;
	cursor: pointer;
}

.app-order-notes-toggle::-webkit-details-marker {
	display: none;
}

.app-order-notes-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	color: var(--app-text-soft);
	font-size: 0.9rem;
	transition: transform 0.18s ease;
}

.app-order-notes[open] .app-order-notes-icon {
	transform: rotate(180deg);
}

.app-order-notes-alert {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--app-warning-soft);
	color: var(--app-warning);
	font-size: 0.88rem;
	font-weight: 900;
	line-height: 1;
}

.app-order-notes-body,
.app-orders-summary-address,
.app-map-popup__text {
	color: var(--app-text-soft);
	font-size: 0.84rem;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

.app-orders-summary-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
}

.app-orders-summary-dot--pickup {
	background: var(--app-danger);
}

.app-orders-summary-dot--delivery {
	background: var(--app-primary);
}

.app-orders-summary-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.5rem;
}

.app-orders-summary-count {
	min-height: 30px;
	padding: 0.45rem 0.7rem;
	background: var(--app-primary-soft);
	color: var(--app-primary-strong);
}

.app-orders-map {
	height: 320px;
	border-radius: 1.1rem;
	overflow: hidden;
	background: var(--app-surface-muted);
}

.app-orders-map.is-empty {
	display: grid;
	place-items: center;
	padding: 1.25rem;
	color: var(--app-text-soft);
	font-weight: 700;
	text-align: center;
}

.app-orders-map-modal-host {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.app-orders-map-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 18px;
	border-radius: 1.1rem;
	background: rgba(244, 248, 251, 0.92);
	color: var(--app-text-soft);
	font-weight: 800;
	text-align: center;
	pointer-events: none;
}

.app-map-popup__title {
	margin: 0 0 4px;
	font-size: 0.92rem;
	font-weight: 800;
}

body.app-shell .modal-backdrop {
	z-index: 1190;
}

body.app-shell .modal {
	z-index: 1200;
}

.app-shell .modal-dialog {
	max-width: var(--app-modal-width);
}

.app-shell .modal-content {
	border-radius: 1.5rem;
	background: var(--app-surface-strong);
}

.app-shell .modal-header,
.app-shell .modal-footer {
	border-color: var(--app-border);
}

.app-shell .modal-footer,
.modal-footer > .row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
}

.app-shell #ordersMapModal .modal-dialog.app-map-modal-dialog {
	width: min(1100px, calc(100vw - 32px));
	max-width: min(1100px, calc(100vw - 32px));
	margin: 1rem auto;
}

.app-shell #ordersSummaryModal .modal-dialog.app-summary-modal-dialog {
	width: min(920px, calc(100vw - 32px));
	max-width: min(920px, calc(100vw - 32px));
	margin: 1rem auto;
}

.app-shell #ordersMapModal .modal-content.app-map-modal {
	height: min(85vh, 820px);
	overflow: hidden;
}

.app-orders-map-modal-host .app-orders-map {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.app-shell .modal-footer .btn,
.app-swal-actions .btn {
	min-height: 48px;
	border-radius: 0.9rem;
	font-weight: 800;
}

.app-shell .btn-close {
	filter: none;
	opacity: 0.55;
	box-shadow: none !important;
}

.app-shell .btn-close:hover,
.app-shell .btn-close:focus {
	opacity: 1;
}

.app-vehicle-option {
	padding: 14px 16px;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.app-vehicle-option:hover,
.app-vehicle-option:focus-visible,
.app-vehicle-option.is-busy {
	background: var(--app-surface-strong);
	border-color: rgba(43, 111, 207, 0.28);
}

.app-vehicle-icon {
	width: 42px;
	height: 42px;
	border-radius: 0.9rem;
	background: var(--app-primary-soft);
	color: var(--app-primary-strong);
	font-size: 1rem;
}

@media (max-width: 767.98px) {
	body.app-shell {
		--app-page-padding-x: 8px;
		--app-page-padding-y: 10px;
		--app-button-height: 48px;
		--app-card-gap: 8px;
		--app-modal-width: none;
	}

	.app-page h1 {
		font-size: 1.5rem;
		line-height: 1.1;
	}

	.app-page {
		padding-bottom: 20px;
	}

	.app-topbar {
		padding-top: 0.4rem !important;
	}

	.app-update-banner {
		padding-bottom: 0 !important;
	}

	.app-shell-container .card-body {
		padding: 0.75rem !important;
		gap: 0.75rem !important;
	}

	.app-brand-mark {
		width: 40px;
		height: 40px;
		border-radius: 0.9rem;
	}

	.app-brand-logo {
		width: 30px;
		height: 30px;
	}

	.app-brand-title {
		font-size: 0.96rem;
	}

	.app-menu-panel {
		min-width: calc(100vw - 12px);
		margin-top: 4px;
		border-radius: 1rem;
	}

	.app-menu-label,
	.app-vehicle-chevron {
		display: none !important;
	}

	.app-orders-actions .btn,
	.app-banner-action {
		width: 100%;
	}

	.app-order-stop {
		gap: 10px;
	}

	.app-order-icon {
		width: 40px;
		height: 40px;
		padding: 8px;
		border-radius: 0.9rem;
	}

	.app-swal-actions,
	.modal-footer > .row,
	.app-shell .modal-footer {
		grid-template-columns: 1fr;
	}

	.app-orders-map {
		height: min(62vh, 420px);
	}

	.app-shell .modal-dialog {
		max-width: none;
		margin: 0;
		min-height: 100vh;
		display: flex;
		align-items: flex-end;
	}

	.app-shell .modal-content {
		border-radius: 1.5rem 1.5rem 0 0;
	}

	.app-shell .modal-header {
		padding: 0.875rem 0.875rem 0.75rem;
	}

	.app-shell .modal-body {
		padding: 0.875rem !important;
	}

	.app-shell #orderDetailModal .modal-content {
		display: flex;
		flex-direction: column;
		max-height: min(88dvh, 760px);
	}

	.app-shell #orderDetailModal .modal-body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.app-shell #ordersMapModal .modal-content.app-map-modal {
		height: auto;
		max-height: min(72vh, 520px);
	}

	.app-shell #ordersMapModal .modal-body {
		flex: 0 0 auto;
	}

	.app-shell #ordersMapModal .app-orders-map-modal-host {
		height: min(62vh, 420px);
		min-height: min(62vh, 420px);
	}

	.app-shell .modal-footer {
		padding: 0.75rem 0.875rem 0.875rem;
	}

	.app-shell .modal-footer .btn,
	.app-order-contact .btn {
		width: 100%;
		min-width: 0;
	}

	.app-swal-title {
		padding: 14px 14px 8px;
	}

	.app-swal-input,
	.app-swal-text,
	.app-swal-actions {
		padding-inline: 14px;
	}

	.app-swal-input {
		width: calc(100% - 28px);
		margin-inline: 14px;
	}

	.app-order-contact {
		align-items: stretch;
	}

	.app-order-contact > :first-child {
		width: 100%;
		text-align: left;
	}

	.app-order-contact .btn {
		justify-content: center !important;
		text-align: center;
		padding-inline: 1rem !important;
	}

	.app-vehicle-option {
		padding: 12px;
	}

	.app-vehicle-icon {
		width: 38px;
		height: 38px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	body.app-shell {
		--app-page-padding-x: 14px;
		--app-page-padding-y: 14px;
		--app-card-gap: 12px;
	}

	.app-page {
		padding-bottom: 28px;
	}

	.app-orders-workspace {
		grid-template-columns: 1fr;
	}

	.app-order-panel {
		position: static;
	}

	.app-shell #orderDetailModal {
		display: block;
	}
}

@media (min-width: 992px) {
	.app-orders-actions {
		flex: 0 0 auto;
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0.75rem;
	}

	.app-orders-actions .btn {
		width: auto;
		white-space: nowrap;
	}

	.app-orders-workspace {
		grid-template-columns: minmax(320px, 0.92fr) minmax(400px, 1.08fr);
		align-items: start;
	}

	.app-order-panel {
		position: sticky;
		top: 94px;
		display: block;
	}

	.app-shell #orderDetailModal {
		display: none;
	}
}

@media (min-width: 1366px) {
	body.app-shell {
		--app-shell-max-width: 1440px;
		--app-page-padding-x: 0;
		--app-page-padding-y: 24px;
		--app-card-gap: 18px;
		--app-modal-width: 820px;
	}

	.app-orders-workspace {
		grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.7fr);
		gap: 20px;
	}
}

@media (min-width: 1440px) {
	.app-orders-workspace {
		grid-template-columns: minmax(340px, 0.96fr) minmax(460px, 1.04fr);
	}
}

@media (max-width: 767.98px) and (orientation: landscape) {
	.app-menu-panel {
		max-width: 380px;
	}
}

body.app-shell.app-native-shell .app-topbar,
body.app-shell.app-native-shell .app-update-banner {
	padding-top: 0;
}