/* =========================================================
   EcoRoute — Global Reset & Variables
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--color-primary: #16a34a;
	/* green-600 */
	--color-primary-h: #15803d;
	/* green-700 */
	--color-danger: #dc2626;
	--color-danger-h: #b91c1c;
	--color-blue: #2563eb;
	--color-blue-h: #1d4ed8;
	--color-bg: #f1f5f9;
	--color-panel: #ffffff;
	--color-border: #e2e8f0;
	--color-text: #1e293b;
	--color-muted: #64748b;
	--radius: 10px;
	--shadow: 0 2px 12px rgba(0, 0, 0, .10);
	--header-h: 56px;
	--footer-h: 40px;
	--transition: .18s ease;
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-top: env(safe-area-inset-top, 0px);
}

html,
body {
	height: 100%;
	font-family: 'Segoe UI', system-ui, sans-serif;
	background: var(--color-bg);
	color: var(--color-text);
}

body {
	padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
	padding-left: env(safe-area-inset-left, 0);
	padding-right: env(safe-area-inset-right, 0);
}

/* =========================================================
   Header
   ========================================================= */
.app-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
	padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
	box-sizing: border-box;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.app-header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
}

.app-header__icon {
	font-size: 22px;
}

.app-header__title {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.app-header__sub {
	font-size: 12px;
	color: rgba(255, 255, 255, .75);
	margin-left: 6px;
}

.app-header__nav {
	display: flex;
	gap: 6px;
}

.app-header__nav-link {
	color: rgba(255, 255, 255, .95);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 14px;
	font-size: 14px;
	transition: background var(--transition), transform .12s;
}

.app-header__nav-link:hover,
.app-header__nav-link--active {
	background: rgba(255, 255, 255, .18);
	color: #fff;
	transform: translateY(-1px);
}

/* User pill in header */
.app-header__nav-user {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 14px;
	background: rgba(255,255,255,0.12);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
}

.app-header__nav-user:hover {
	background: rgba(255,255,255,0.18);
}

/* Make logout link visually lighter */
.app-header__nav-link.logout {
	background: transparent;
	padding: 6px 10px;
	border: 1px solid rgba(255,255,255,0.12);
}

.app-header__nav-link.logout:hover {
	background: rgba(255,255,255,0.12);
}

/* =========================================================
   Footer
   ========================================================= */
.app-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: calc(var(--footer-h) + var(--safe-bottom));
	padding-bottom: var(--safe-bottom);
	background: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: rgba(255, 255, 255, .55);
}

/* =========================================================
.order-card__select:checked {
    border-color: var(--color-blue);
    background: var(--color-blue);
    box-shadow: 0 4px 16px rgba(37,99,235,.15);
}
   Footer
   Footer
.order-card__select:checked::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 7.5L6 10L10.5 5.5" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
    border-radius: 50%;
    margin: 0 auto;
    transition: background .18s;
}
/* =========================================================
.order-card__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}
   Layout
   ========================================================= */
.app-layout {
	display: flex;
	position: fixed;
	top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
	bottom: var(--footer-h);
	left: 0;
	right: 0;
	overflow: hidden;
}

/* ---- Left Panel ---- */
.panel-left {
	width: 50%;
	background: var(--color-panel);
	border-right: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}

/* Вкладки диспетчера: займають висоту колонки; scroll усередині списку */
.panel-left > .tabs {
	flex-shrink: 0;
}

.panel-left > .tab-content {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.panel-left > .tab-content > .panel-section-title,
.panel-left > .tab-content > .archive-toolbar,
.panel-left > .tab-content > .site-reports-toolbar {
	flex-shrink: 0;
}

.panel-left > .tab-content > .orders-list,
.panel-left > .tab-content > .trips-list,
.panel-left > .tab-content > .archive-list,
.panel-left > .tab-content > .site-reports-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* У диспетчері список фото не обмежувати старим max-height від 100vh */
.panel-left .tab-content .site-reports-list {
	max-height: none;
}

/* Огляд (index): список без обгортки tab-content */
.panel-left > .orders-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.panel-left > .trip-builder {
	flex-shrink: 0;
}

.panel-left__header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}

.panel-left__title {
	font-size: 17px;
	font-weight: 700;
}

.panel-left__actions {
	display: flex;
	gap: 8px;
}

.panel-left__info {
	padding: 10px 20px;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--color-muted);
	flex-shrink: 0;
}

.panel-left #globalAlert {
	flex-shrink: 0;
}

.panel-left__info strong {
	color: var(--color-text);
}

/* Orders list */
.orders-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 12px 16px;
}

.orders-list::-webkit-scrollbar {
	width: 5px;
}

.orders-list::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--color-muted);
	text-align: center;
	gap: 10px;
	padding: 20px;
}

.empty-state__icon {
	font-size: 48px;
	opacity: .4;
}

.empty-state__text {
	font-size: 15px;
}

.empty-state__hint {
	font-size: 13px;
}

/* Order card */
.order-card {
	background: #f8fafc;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 12px 14px;
	margin-bottom: 8px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	transition: box-shadow var(--transition), border-color var(--transition);
	position: relative;
}

.order-card:hover {
	box-shadow: var(--shadow);
	border-color: #94a3b8;
}

.order-card--active {
	border-color: var(--color-primary);
	background: #f0fdf4;
}

.order-card--geocoding {
	opacity: .6;
}

.order-card__num {
	min-width: 26px;
	height: 26px;
	background: var(--color-primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}

.order-card__body {
	flex: 1;
	min-width: 0;
}

.order-card__name {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-card__address {
	font-size: 13px;
	color: var(--color-muted);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-card__meta {
	display: flex;
	gap: 10px;
	margin-top: 4px;
	font-size: 12px;
	color: var(--color-muted);
	flex-wrap: wrap;
}

.order-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: #e0f2fe;
	color: #0369a1;
	padding: 1px 7px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 500;
}

.order-card__badge--geo-error {
	background: #fee2e2;
	color: var(--color-danger);
}

.order-card__badge--pending {
	background: #fef9c3;
	color: #92400e;
}

.order-card__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
}

.order-card__select {
	position: relative;
	width: 24px;
	height: 24px;
	accent-color: var(--color-blue);
	appearance: none;
	background: #fff;
	border: 2px solid var(--color-border);
	border-radius: 8px;
	transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
	box-shadow: 0 2px 8px rgba(37, 99, 235, .08);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.order-card__select:checked {
	border-color: var(--color-blue);
	background: var(--color-blue);
	box-shadow: 0 2px 8px rgba(37, 99, 235, .12);
}

.order-card__select:checked::after {
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 7.5L6 10L10.5 5.5" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}

.order-card__select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}

.order-card--selected {
	border-color: var(--color-blue);
	background: #e0f2fe;
}

/* ---- Route Summary Bar ---- */
.route-summary {
	padding: 12px 20px;
	border-top: 1px solid var(--color-border);
	background: #f0fdf4;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.route-summary.hidden {
	display: none;
}

.route-summary__item {
	display: flex;
	flex-direction: column;
}

.route-summary__label {
	font-size: 11px;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.route-summary__value {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-primary);
}

.route-summary__value--cost {
	color: var(--color-blue);
}

.route-btns {
	padding: 12px 16px;
	border-top: 1px solid var(--color-border);
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* ---- Right Panel (Map) ---- */
.panel-right {
	width: 50%;
	position: relative;
}

#map {
	width: 100%;
	height: 100%;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	transition: background var(--transition), opacity var(--transition);
	white-space: nowrap;
}

.btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.btn--primary {
	background: var(--color-primary);
	color: #fff;
}

.btn--primary:not(:disabled):hover {
	background: var(--color-primary-h);
}

.btn--blue {
	background: var(--color-blue);
	color: #fff;
}

.btn--blue:not(:disabled):hover {
	background: var(--color-blue-h);
}

.btn--danger {
	background: var(--color-danger);
	color: #fff;
}

.btn--danger:not(:disabled):hover {
	background: var(--color-danger-h);
}

.btn--ghost {
	background: transparent;
	color: var(--color-muted);
	padding: 5px 8px;
	border-radius: 6px;
	font-size: 16px;
}

.btn--ghost:hover {
	background: #f1f5f9;
	color: var(--color-text);
}

.btn--outline {
	background: transparent;
	border: 1.5px solid var(--color-border);
	color: var(--color-text);
}

.btn--outline:hover {
	border-color: #94a3b8;
}

.btn--sm {
	padding: 5px 12px;
	font-size: 13px;
}

.btn--full {
	width: 100%;
}

.btn--icon {
	padding: 6px;
	border-radius: 6px;
}

/* =========================================================
   Modal
   ========================================================= */
.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 500;
	background: rgba(0, 0, 0, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
}

.modal-overlay.is-open {
	opacity: 1;
	pointer-events: all;
}

.modal {
	background: var(--color-panel);
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	width: 100%;
	max-width: 500px;
	max-height: 90vh;
	overflow-y: auto;
	transform: translateY(20px);
	transition: transform .2s;
}

.modal-overlay.is-open .modal {
	transform: translateY(0);
}

.modal__header {
	padding: 20px 24px 16px;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modal__title {
	font-size: 17px;
	font-weight: 700;
}

.modal__body {
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.modal__footer {
	padding: 16px 24px;
	border-top: 1px solid var(--color-border);
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

/* =========================================================
   Form controls
   ========================================================= */
.form-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.form-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-muted);
}

.form-input,
.form-textarea,
.form-select {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid var(--color-border);
	border-radius: 8px;
	font-size: 14px;
	color: var(--color-text);
	background: #fff;
	transition: border-color var(--transition);
	font-family: inherit;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

.form-textarea {
	resize: vertical;
	min-height: 70px;
}

.form-input--error {
	border-color: var(--color-danger);
}

.form-error {
	font-size: 12px;
	color: var(--color-danger);
	margin-top: 2px;
}

/* Address suggestions */
.autocomplete-wrapper {
	position: relative;
}

.autocomplete-list {
	position: absolute;
	z-index: 600;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1.5px solid var(--color-border);
	border-radius: 8px;
	box-shadow: var(--shadow);
	max-height: 200px;
	overflow-y: auto;
	display: none;
}

.autocomplete-list.is-open {
	display: block;
}

.autocomplete-item {
	padding: 10px 14px;
	cursor: pointer;
	font-size: 13px;
	border-bottom: 1px solid #f1f5f9;
	transition: background var(--transition);
}

.autocomplete-item:last-child {
	border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item--active {
	background: #f0fdf4;
}

.autocomplete-item__main {
	font-weight: 500;
}

.autocomplete-item__secondary {
	font-size: 11px;
	color: var(--color-muted);
}

/* =========================================================
   Alerts
   ========================================================= */
.alert {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex-shrink: 0;
}

.alert.hidden {
	display: none;
}

.alert--error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

.alert--success {
	background: #f0fdf4;
	border: 1px solid #86efac;
	color: #15803d;
}

/* =========================================================
   Map overlay label
   ========================================================= */
.map-label {
	position: absolute;
	background: white;
	padding: 3px 7px;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	font-size: 12px;
	font-weight: 700;
	color: #333;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	pointer-events: none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
	.app-layout {
		flex-direction: column;
		overflow-y: auto;
		position: static;
		height: auto;
		min-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - var(--footer-h) - var(--safe-bottom));
	}

	.panel-left,
	.panel-right {
		width: 100%;
	}

	.panel-right {
		height: min(52vh, 420px);
		min-height: 260px;
		border-top: 1px solid var(--color-border);
	}

	.panel-left {
		border-right: none;
		min-height: 240px;
	}

	/* Лише dispatcher.php: ліва колонка скролиться цілком (без «згорнутого» flex),
	   інакше #tripsList лишав ~один рейс без доступу до решти */
	.app-layout--dispatcher .panel-left {
		flex: 1 1 auto;
		max-height: min(62vh, 640px);
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.app-layout--dispatcher .panel-left > .tab-content {
		flex: 0 0 auto;
		min-height: 0;
		overflow: visible;
	}

	.app-layout--dispatcher .panel-left > .tab-content > .orders-list,
	.app-layout--dispatcher .panel-left > .tab-content > .trips-list,
	.app-layout--dispatcher .panel-left > .tab-content > .archive-list,
	.app-layout--dispatcher .panel-left > .tab-content > .site-reports-list {
		flex: none;
		overflow: visible;
		max-height: none;
	}

	.app-footer {
		position: static;
		height: auto;
		min-height: var(--footer-h);
		padding: 10px 12px var(--safe-bottom);
	}

	body {
		padding-bottom: 0;
	}
}

/* =========================================================
   Auth (Login) form centered
   ========================================================= */
.auth-container {
	min-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - var(--footer-h) - var(--safe-bottom));
	margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.00));
}

.auth-box {
	width: 100%;
	max-width: 420px;
	background: var(--color-panel);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 8px 30px rgba(2,6,23,0.12);
}

.auth-title {
	font-size: 20px;
	margin-bottom: 12px;
	color: var(--color-text);
}

/* Spacing for form fields inside auth box */
.auth-box .form-group {
	margin-bottom: 14px;
}

.auth-box .form-input {
	padding: 10px 12px;
}

.auth-box .btn {
	padding: 10px 14px;
}

@media (max-width: 480px) {
	.auth-box {
		padding: 16px;
		border-radius: 10px;
	}
}

/* =========================================================
   Telegram toast notification
   ========================================================= */
.telegram-toast {
	position: fixed;
	bottom: calc(var(--footer-h) + 16px + var(--safe-bottom));
	right: max(16px, env(safe-area-inset-right, 0px));
	z-index: 1000;
	background: var(--color-primary);
	color: #fff;
	padding: 12px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .3s, transform .3s;
	pointer-events: none;
	max-width: 340px;
	line-height: 1.4;
}

.telegram-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.telegram-toast--error {
	background: var(--color-danger);
}

/* =========================================================
   Drivers list (inside modal)
   ========================================================= */
.driver-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	background: #f8fafc;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	margin-bottom: 6px;
}

.driver-item__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}

.driver-item__name {
	font-weight: 600;
	font-size: 14px;
}

.driver-item__phone {
	font-size: 12px;
	color: var(--color-muted);
}

.driver-item__tg {
	font-size: 12px;
	color: #15803d;
}

.driver-item__tg--missing {
	color: var(--color-danger);
}
/* =========================================================
   Role-based UI — added for multi-role system
   ========================================================= */

/* Header nav */
.app-header__nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.app-header__nav-link { color:#fff; text-decoration:none; padding:5px 12px; border-radius:6px; font-size:13px; transition:background var(--transition); }
.app-header__nav-link:hover { background:rgba(255,255,255,.18); }
.app-header__nav-link--active { background:rgba(255,255,255,.22); font-weight:600; }
.app-header__nav-link.logout { margin-left:6px; background:rgba(220,38,38,.25); }
.app-header__nav-link.logout:hover { background:rgba(220,38,38,.45); }
.app-header__nav-user { font-size:13px; color:rgba(255,255,255,.85); display:flex; align-items:center; gap:6px; margin-left:8px; }

/* Role badges */
.role-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.role-badge--admin      { background:#7c3aed; color:#fff; }
.role-badge--dispatcher { background:#2563eb; color:#fff; }
.role-badge--manager    { background:#d97706; color:#fff; }
.role-badge--driver     { background:#16a34a; color:#fff; }

/* Status badges */
.status-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.status--new        { background:#dbeafe; color:#1d4ed8; }
.status--assigned   { background:#fef3c7; color:#92400e; }
.status--progress   { background:#d1fae5; color:#065f46; }
.status--done       { background:#bbf7d0; color:#14532d; }
.status--cancelled  { background:#fee2e2; color:#991b1b; }

/* Full-page layout (manager, admin pages) */
.page-full { max-width:1200px; margin:0 auto; padding:24px 20px; }
.page-full__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.page-full__title  { font-size:22px; font-weight:700; color:var(--color-text); }

/* Stats bar (клікабельні фільтри за статусом на сторінці менеджера) */
.stats-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; align-items:center; }
/* База без фону — кольори задаються модифікаторами (інакше перебивають через вищу специфічність button) */
.stats-bar button.stat-chip {
  margin:0; font:inherit; cursor:pointer;
  display:flex; align-items:center; gap:8px; padding:6px 14px; border-radius:8px; font-size:13px;
  border:1px solid var(--color-border);
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.stats-bar button.stat-chip:hover { box-shadow:0 1px 4px rgba(15,23,42,0.14); }
.stats-bar button.stat-chip:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.stat-chip strong { font-size:16px; }
.stats-bar button.stat-chip.stat-chip--new {
  background:#dbeafe; border-color:#93c5fd; color:#1e3a8a;
}
.stats-bar button.stat-chip.stat-chip--assigned {
  background:#fef3c7; border-color:#fcd34d; color:#78350f;
}
.stats-bar button.stat-chip.stat-chip--in_progress {
  background:#d1fae5; border-color:#34d399; color:#065f46;
}
.stats-bar button.stat-chip.stat-chip--done {
  background:#dcfce7; border-color:#86efac; color:#14532d;
}
.stats-bar button.stat-chip.stat-chip--cancelled {
  background:#fee2e2; border-color:#fca5a5; color:#991b1b;
}
.stats-bar button.stat-chip.stat-chip--active {
  box-shadow:0 0 0 2px var(--color-primary), 0 2px 6px rgba(15,23,42,0.12);
  font-weight:600;
}

/* Request cards grid */
.requests-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
.request-card  { background:var(--color-panel); border-radius:var(--radius); padding:16px; border:1px solid var(--color-border); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; }
.request-card__header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.request-card__name   { font-weight:600; font-size:15px; color:var(--color-text); }
.request-card__address { font-size:13px; color:var(--color-muted); }
.request-card__phone  { font-size:13px; color:var(--color-muted); }
.request-card__meta   { display:flex; gap:6px; flex-wrap:wrap; }
.request-card__note   { font-size:12px; color:var(--color-muted); background:#f8fafc; border-radius:6px; padding:6px 8px; }
.request-card__footer { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.request-card__date   { font-size:12px; color:#94a3b8; }
.request-card__actions { display:flex; gap:6px; }

/* Tags */
.tag { display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; background:#f1f5f9; border:1px solid var(--color-border); color:var(--color-muted); font-weight:500; }
.tag--mgr { background:#fef9c3; border-color:#fde047; color:#78350f; }

/* Dispatcher — order list items with checkboxes */
.order-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:8px; border:1px solid var(--color-border); margin-bottom:6px; cursor:pointer; transition:background var(--transition), border-color var(--transition); }
.order-item:hover { background:#f8fafc; }
.order-item--selected { background:#eff6ff; border-color:#93c5fd; }
.order-item__check { margin-top:2px; width:16px; height:16px; accent-color:var(--color-blue); flex-shrink:0; cursor:pointer; }
.order-item__body  { flex:1; min-width:0; }
.order-item__name  { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.order-item__addr  { font-size:12px; color:var(--color-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Trip builder bar */
.trip-builder { background:#eff6ff; border:1px solid #93c5fd; border-radius:10px; padding:14px; margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.trip-builder__title { font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:space-between; }
.trip-builder__actions { display:flex; gap:8px; }
.route-info { display:flex; gap:14px; font-size:13px; color:var(--color-text); background:#fff; border-radius:8px; padding:8px 12px; border:1px solid var(--color-border); }
.route-info span { display:flex; flex-direction:column; gap:2px; font-weight:600; }

/* =========================================================
   Trip cards + accordion stops
   ========================================================= */
.trips-list { display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding-bottom:8px; }

.trips-group-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-muted); padding:4px 2px; margin-top:4px; }
.trips-group-label--done { color:#94a3b8; }

.trip-card { background:var(--color-panel); border-radius:10px; padding:12px 14px; border:1px solid var(--color-border); border-left:4px solid var(--color-border); display:flex; flex-direction:column; gap:8px; }
.trip-card--in_progress { border-left-color:#2563eb; }
.trip-card--done        { border-left-color:var(--color-primary); opacity:.85; }
.trip-card--new         { border-left-color:#f59e0b; }

/* Header row */
.trip-card__header { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.trip-card__id { font-weight:700; font-size:14px; }
.trip-card__header-right { display:flex; align-items:center; gap:6px; }

/* Delete trip button */
.trip-card__del-btn {
  background:none; border:1px solid #fca5a5; border-radius:6px;
  color:#dc2626; cursor:pointer; font-size:13px; padding:2px 7px;
  line-height:1.4; transition:background .15s;
}
.trip-card__del-btn:hover { background:#fee2e2; }

/* Meta block */
.trip-card__meta { display:flex; flex-direction:column; gap:3px; background:#f8fafc; border-radius:7px; padding:8px 10px; }
.trip-card__vehicle { font-size:13px; color:var(--color-text); }
.trip-card__driver  { font-size:13px; color:#1d4ed8; }
.trip-card__driver--warn { color:#dc2626; font-weight:600; }

/* Progress bar */
.trip-card__progress { display:flex; align-items:center; gap:8px; }
.trip-card__progress-text { font-size:12px; color:var(--color-muted); white-space:nowrap; }
.progress-bar { flex:1; height:7px; background:#e2e8f0; border-radius:4px; overflow:hidden; }
.progress-bar__fill { height:100%; background:var(--color-primary); border-radius:4px; transition:width .3s; }

/* Footer */
.trip-card__footer { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.trip-card__date   { font-size:11px; color:#94a3b8; }

/* Toggle (accordion) button */
.trip-toggle-btn {
  background:none; border:1px solid var(--color-border); border-radius:6px;
  color:var(--color-muted); cursor:pointer; font-size:12px; padding:3px 10px;
  transition:background .15s, color .15s, border-color .15s;
}
.trip-toggle-btn:hover { background:#f1f5f9; color:var(--color-text); border-color:#94a3b8; }

/* ── Accordion stop list ───────────────────────────────── */
.trip-stops {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:4px;
  border-top:1px solid var(--color-border); padding-top:8px;
}
.trip-stops--open { animation:fadeIn .15s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

.trip-stop {
  display:flex; align-items:center; gap:6px;
  font-size:12px; padding:6px 8px; border-radius:7px;
  background:#f8fafc; border:1px solid transparent;
  transition:opacity .15s;
}
.trip-stop--done    { opacity:.45; }
.trip-stop--current { background:#eff6ff; border-color:#93c5fd; }

.trip-stop__num  { min-width:18px; text-align:right; font-weight:700; color:#94a3b8; font-size:11px; flex-shrink:0; }
.trip-stop__icon { flex-shrink:0; font-size:13px; }
.trip-stop__info { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.trip-stop__name { font-weight:600; color:var(--color-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trip-stop__addr { color:var(--color-muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trip-stop__type { flex-shrink:0; font-size:10px; padding:2px 5px; }

/* "← зараз" badge on current stop */
.trip-stop__cur-badge {
  display:inline-block; margin-left:5px;
  font-size:10px; font-weight:700; color:#2563eb;
  background:#dbeafe; border-radius:4px; padding:1px 5px;
  vertical-align:middle;
}

/* Driver site report (photo from object) */
.trip-stop__issue-badge {
  display:inline-block; margin-left:5px;
  font-size:10px; font-weight:700; color:#9a3412;
  background:#ffedd5; border-radius:4px; padding:1px 5px;
  vertical-align:middle;
}

/* Per-stop delete button */
.trip-stop__del {
  flex-shrink:0; background:none; border:1px solid #fca5a5;
  border-radius:5px; color:#dc2626; cursor:pointer;
  font-size:11px; padding:1px 6px; line-height:1.5;
  transition:background .15s;
}
.trip-stop__del:hover { background:#fee2e2; }

/* "Add stop" row at bottom of accordion */
.trip-stop-add {
  display:flex; align-items:center; gap:6px;
  padding:6px 8px; border-radius:7px;
  background:#f0fdf4; border:1px dashed #86efac;
  margin-top:2px;
}
.trip-stop-add .form-input--sm { flex:1; font-size:12px; padding:4px 8px; }

/* Dispatcher tabs */
.tabs { display:flex; gap:0; border-bottom:2px solid var(--color-border); margin-bottom:10px; }
.tab-btn { flex:1; padding:8px 10px; font-size:13px; font-weight:500; background:none; border:none; cursor:pointer; color:var(--color-muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s; }
.tab-btn:hover { color:var(--color-text); }
.tab-btn--active { color:var(--color-primary); border-bottom-color:var(--color-primary); font-weight:600; }

/* Badge count */
.badge-count { display:inline-block; background:var(--color-primary); color:#fff; border-radius:10px; font-size:11px; padding:1px 7px; margin-left:6px; }

/* Users table */
.users-table-wrap { overflow-x:auto; }
.users-table { width:100%; border-collapse:collapse; background:var(--color-panel); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.users-table th { background:#f8fafc; text-align:left; padding:10px 14px; font-size:13px; font-weight:600; border-bottom:1px solid var(--color-border); }
.users-table td { padding:10px 14px; font-size:13px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.users-table tr:last-child td { border-bottom:none; }
.td-actions { display:flex; gap:6px; }

/* Form grid for modals */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group--full { grid-column:1/-1; }
.form-textarea { resize:vertical; min-height:60px; }
.req { color:var(--color-danger); }

/* btn-sm */
.btn-sm { padding:4px 10px; border-radius:6px; font-size:12px; font-weight:500; cursor:pointer; border:1px solid var(--color-border); background:#f8fafc; color:var(--color-text); transition:background .15s; }
.btn-sm:hover { background:#e2e8f0; }
.btn-sm.btn--danger { background:#fee2e2; border-color:#fca5a5; color:var(--color-danger); }
.btn-sm.btn--danger:hover { background:#fecaca; }
.btn-sm.btn--outline { border-color:var(--color-primary); color:var(--color-primary); }

/* btn--outline */
.btn--outline { background:none; border:1px solid var(--color-primary); color:var(--color-primary); }
.btn--outline:hover { background:#f0fdf4; }

/* Loading / empty messages */
.loading-msg, .empty-msg { text-align:center; padding:24px; color:var(--color-muted); font-size:14px; }
.error-msg { text-align:center; padding:16px; color:var(--color-danger); font-size:13px; }

/* modal--medium */
.modal--medium { width:min(600px, 95vw); }

/* Panel section title */
.panel-section-title { font-size:12px; font-weight:600; text-transform:uppercase; color:var(--color-muted); letter-spacing:.05em; padding:6px 0 8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.panel-section-print { margin-left:auto; text-transform:none; letter-spacing:normal; font-weight:600; }
.trip-card__print-btn {
  flex-shrink:0; background:#f0f4ff; border:1px solid #93c5fd; border-radius:6px;
  color:#1d4ed8; cursor:pointer; font-size:12px; font-weight:600; padding:4px 10px; line-height:1.35;
  transition:background .15s; white-space:nowrap;
}
.trip-card__print-btn:hover { background:#dbeafe; }

/* =========================================================
   Manager page extras
   ========================================================= */

/* Page header actions row */
.page-full__actions { display:flex; gap:8px; align-items:center; }

/* Manager tab bar */
.tab-bar { display:flex; gap:0; border-bottom:2px solid var(--color-border); margin:10px 0 14px; }
.tab-bar--wrap { flex-wrap:wrap; gap:6px 2px; row-gap:10px; align-items:center; }
.tab-bar--wrap .tab-btn { margin-bottom:-2px; }
.tab-bar .tab-btn { flex:none; padding:8px 18px; font-size:13px; font-weight:500; background:none; border:none; cursor:pointer; color:var(--color-muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s; }
.tab-bar .tab-btn:hover { color:var(--color-text); }
.tab-bar .tab-btn--active { color:var(--color-primary); border-bottom-color:var(--color-primary); font-weight:600; }

/* Type tag colours */
.tag--tpv { background:#dcfce7; color:#166534; }
.tag--vgv { background:#fef3c7; color:#92400e; }

/* Order type info inside card */
.order-type-info { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; }
.info-pill { display:inline-flex; align-items:center; gap:4px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:20px; padding:2px 10px; font-size:12px; color:var(--color-text); }
.info-pill--vgv { background:#fef9c3; border-color:#fde68a; color:#78350f; }
.order-type-info--tpv .info-pill { background:#dcfce7; border-color:#bbf7d0; color:#14532d; }

/* Weekday picker */
.weekday-picker { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.weekday-btn { display:flex; align-items:center; cursor:pointer; user-select:none; }
.weekday-btn input { display:none; }
.weekday-btn span {
  display:inline-block; width:36px; height:36px; line-height:36px; text-align:center;
  border-radius:50%; border:1.5px solid var(--color-border); font-size:12px; font-weight:600;
  background:#f8fafc; color:var(--color-muted); transition:background .15s, border-color .15s, color .15s;
}
.weekday-btn input:checked + span { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.weekday-btn:hover span { border-color:var(--color-primary); color:var(--color-primary); }

/* Form inline hint */
.form-hint { font-size:11px; color:var(--color-muted); margin-top:3px; display:block; }
.form-input--inline { width:90px; display:inline-block; padding:4px 8px; font-size:13px; }
.text-muted { color:var(--color-muted); }
.text-danger { color:var(--color-danger); }

/* Schedule toolbar */
.schedule-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.schedule-cap-label { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; }

/* Schedule day card */
.schedule-day { background:var(--color-panel); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden; }
.schedule-day--near { border-left:4px solid #f59e0b; }
.schedule-day--overflow { border-left:4px solid var(--color-danger); }

.schedule-day__header { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--color-border); flex-wrap:wrap; }
.schedule-day__name  { font-weight:700; font-size:16px; min-width:120px; }
.schedule-day__stops { font-size:13px; color:var(--color-muted); }
.schedule-day__vol   { margin-left:auto; font-size:13px; font-weight:600; }

/* Fill bar */
.fill-bar { width:100%; height:8px; background:#e2e8f0; position:relative; overflow:hidden; }
.fill-bar--lg { height:10px; }
.fill-bar__fill { height:100%; border-radius:0; transition:width .4s; }
.fill-bar__fill--ok    { background:var(--color-primary); }
.fill-bar__fill--trip--near { background:#f59e0b; }
.fill-bar__fill--trip--full { background:var(--color-danger); }
.fill-bar__fill--schedule-day--overflow { background:var(--color-danger); }
.fill-bar__fill--schedule-day--near { background:#f59e0b; }
.fill-bar__overflow { position:absolute; top:0; right:0; height:100%; background:rgba(220,38,38,.4); }

/* Trips wrap */
.trips-wrap { padding:12px 16px; display:flex; flex-direction:column; gap:12px; }

/* Single trip block */
.trip-block { border:1px solid var(--color-border); border-radius:8px; overflow:hidden; }
.trip-block .fill-bar { border-radius:0; }
.trip-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#f8fafc; border-bottom:1px solid var(--color-border); }
.trip-header strong { font-size:13px; }
.trip-vol { font-size:12px; font-weight:600; }
.trip-block--near  { border-color:#fde68a; }
.trip-block--full  { border-color:#fca5a5; }
.trip-block--near  .trip-header { background:#fefce8; }
.trip-block--full  .trip-header { background:#fee2e2; }

/* Stop list inside trip */
.stop-list { list-style:none; padding:0; margin:0; }
.stop-item { display:grid; grid-template-columns:28px 1fr 1fr auto; align-items:center; gap:6px; padding:7px 12px; border-bottom:1px solid #f1f5f9; font-size:12px; }
.stop-item:last-child { border-bottom:none; }
.stop-item--overflow { background:#fff7ed; }
.stop-letter { width:24px; height:24px; background:var(--color-primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; }
.stop-name  { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stop-addr  { color:var(--color-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.stop-vol   { color:var(--color-muted); white-space:nowrap; text-align:right; }
.stop-unload-badge { grid-column:1/-1; display:inline-flex; align-items:center; gap:4px; background:#dcfce7; color:#166534; border-radius:4px; padding:2px 8px; font-size:11px; font-weight:600; width:fit-content; }

/* Unload divider between trips */
.unload-divider { text-align:center; padding:6px; font-size:12px; color:#64748b; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:6px; }

/* btn--sm size fix */
.btn--sm { font-size:12px; padding:5px 12px; }

/* =========================================================
   Priority flag
   ========================================================= */

/* Manager card priority */
.request-card--priority { border-left:4px solid #dc2626; background:#fff8f8; }
.priority-banner { background:#dc2626; color:#fff; font-size:12px; font-weight:700; padding:4px 12px; margin:-0px; border-radius:0; letter-spacing:.03em; }

/* Priority radio picker */
.priority-picker { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.priority-btn { display:flex; align-items:center; cursor:pointer; user-select:none; }
.priority-btn input { display:none; }
.priority-btn span {
  display:inline-block; padding:7px 16px; border-radius:20px;
  border:1.5px solid var(--color-border); font-size:13px; font-weight:600;
  background:#f8fafc; color:var(--color-muted);
  transition:background .15s, border-color .15s, color .15s;
}
.priority-btn input:checked + span { background:#fee2e2; border-color:#dc2626; color:#991b1b; }
.priority-btn:hover span { border-color:#f87171; color:#dc2626; }

/* Dispatcher: priority section header */
.priority-section-header { background:#fee2e2; color:#991b1b; font-size:12px; font-weight:700; padding:6px 12px; border-radius:6px; margin-bottom:6px; }

/* Dispatcher: priority order item */
.order-item--priority { border-left:3px solid #dc2626; background:#fff8f8; }
.order-item__priority-badge { font-size:11px; font-weight:700; color:#dc2626; margin-bottom:2px; }

/* Stop item priority in schedule */
.stop-item--priority { background:#fff1f2; }
.stop-item--priority .stop-name { color:#dc2626; }

/* =========================================================
   Hopper fill indicator
   ========================================================= */

.hopper-info { margin: 8px 0 4px; padding: 8px 10px; background: #f8fafc; border-radius: 6px; border: 1px solid var(--color-border); }
.hopper-info__label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--color-text); margin-bottom: 5px; }
.hopper-bar { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.hopper-bar__fill { height: 100%; border-radius: 4px; background: #22c55e; transition: width .3s, background .3s; }
.hopper-bar__fill--near { background: #f59e0b; }
.hopper-bar__fill--over { background: #ef4444; }
.hopper-warning { margin-top: 5px; font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 4px; }
.hopper-warning--near { background: #fef9c3; color: #854d0e; }
.hopper-warning--over { background: #fee2e2; color: #991b1b; }

/* =========================================================
   Breakdown / broken_down trip styles
   ========================================================= */

.trip-card--broken_down { border: 2px solid #dc2626; background: #fff8f8; }
.trip-card__breakdown-banner {
  background: #dc2626; color: #fff;
  padding: 8px 12px; font-size: 13px; font-weight: 700;
  border-radius: 6px 6px 0 0; margin: -1px -1px 0;
  line-height: 1.5;
}
.trips-group-label--broken {
  background: #fee2e2; color: #991b1b;
  border: 1px solid #fca5a5;
  font-weight: 700; animation: pulse-red 1.5s ease-in-out infinite;
}
@keyframes pulse-red {
  0%, 100% { background: #fee2e2; }
  50%       { background: #fecaca; }
}
.status--broken { background: #dc2626; color: #fff; }

/* =========================================================
   Vehicles table
   ========================================================= */

.vehicles-table { min-width: 900px; }
.vehicles-table .td-center { text-align:center; }

/* Insurance status badges */
.ins-badge { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
  padding:3px 8px; border-radius:4px; white-space:nowrap; }
.ins-badge--ok      { background:#dcfce7; color:#166534; }
.ins-badge--soon    { background:#fef9c3; color:#854d0e; }
.ins-badge--expired { background:#fee2e2; color:#991b1b; }
.ins-badge--none    { background:#f1f5f9; color:#94a3b8; }

/* modal--wide */
.modal--wide { max-width: 760px; }

/* text-muted helper */
.text-muted { color: var(--color-muted); }

/* Schedule grouped by vehicle */
.schedule-vehicle { background:var(--color-panel); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; }
.schedule-vehicle__header { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#f0fdf4; border-bottom:2px solid var(--color-primary); flex-wrap:wrap; }
.schedule-vehicle__name { font-weight:700; font-size:16px; color:var(--color-primary); }
.schedule-vehicle__days { font-size:13px; color:var(--color-muted); margin-left:auto; }
.schedule-vehicle__days-wrap { padding:12px 16px; display:flex; flex-direction:column; gap:10px; }
.schedule-vehicle .schedule-day { box-shadow:none; border:1px solid var(--color-border); margin-bottom:0; }

/* Hopper badge in vehicle header */
.schedule-hopper-badge { font-size:12px; font-weight:600; background:#dcfce7; color:#166534;
  padding:3px 8px; border-radius:4px; white-space:nowrap; }

/* Remaining capacity badge */
.schedule-remain { display:inline-flex; align-items:center; gap:4px; font-size:12px;
  padding:4px 10px; border-radius:4px; margin:6px 0 2px; }
.schedule-remain--ok   { background:#dcfce7; color:#166534; }
.schedule-remain--full { background:#fee2e2; color:#991b1b; }
.schedule-remain--over { background:#fff3cd; color:#854d0e; }

/* Remaining in trip block */
.trip-remain { font-size:11px; font-weight:600; padding:2px 6px; border-radius:3px; }
.trip-remain--ok   { background:#dcfce7; color:#166534; }
.trip-remain--full { background:#fee2e2; color:#991b1b; }

/* ─── Client search autocomplete ─────────────────────────────────────────── */
.client-search-wrap { border:1px dashed var(--color-border); border-radius:8px;
  padding:12px; background:#f8faff; }
.client-search-box  { position:relative; }
.client-search-dropdown {
  position:absolute; top:100%; left:0; right:0; z-index:2000;
  background:#fff; border:1px solid var(--color-border); border-radius:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.12); max-height:220px; overflow-y:auto;
}
.client-dd-item {
  display:flex; flex-direction:column; gap:2px; padding:8px 12px; cursor:pointer;
  border-bottom:1px solid var(--color-border);
}
.client-dd-item:last-child { border-bottom:none; }
.client-dd-item:hover  { background:#f0f4ff; }
.client-dd-item strong { font-size:14px; color:var(--color-text); }
.client-dd-item span   { font-size:12px; color:var(--color-muted); }

/* Save-to-base checkbox in modal footer */
.save-to-base-label {
  display:flex; align-items:center; gap:6px; font-size:13px;
  color:var(--color-muted); margin-right:auto; cursor:pointer;
}
.save-to-base-label input { width:16px; height:16px; cursor:pointer; }

.notify-client-label {
  display:flex; align-items:flex-start; gap:8px; margin-top:8px; font-size:13px;
  color:var(--color-text); cursor:pointer; line-height:1.35;
}
.notify-client-label input { width:16px; height:16px; margin-top:2px; flex-shrink:0; cursor:pointer; }
.client-telegram-block { margin-top:4px; }

/* Clients grid tab */
#tab-clients .page-full__header { display:flex; align-items:center; gap:12px; }
.request-card__phone { font-size:13px; color:var(--color-muted); margin-top:2px; }
.tag { display:inline-block; font-size:11px; font-weight:700; padding:1px 6px;
  border-radius:4px; }
.tag--tpv { background:#dbeafe; color:#1d4ed8; }
.tag--vgv { background:#fce7f3; color:#9d174d; }
.tag--vgv-inv { background:#e0e7ff; color:#3730a3; font-weight:600; }
.tag--vgv-warn { background:#fee2e2; color:#b91c1c; font-weight:600; }
.order-item .vgv-assign-inline { margin-top:6px; align-self:flex-start; }

/* ВГВ інвентар (адмін) */
.vgv-admin-summary { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 16px; }
.vgv-admin-card {
  background:#fff; border:1px solid var(--color-border); border-radius:10px;
  padding:12px 16px; min-width:160px; box-shadow:var(--shadow);
}
.vgv-admin-card__title { font-size:11px; text-transform:uppercase; color:var(--color-muted); letter-spacing:.04em; }
.vgv-admin-card__nums { font-size:18px; font-weight:700; margin-top:4px; }
.vgv-admin-card__nums span { color:var(--color-muted); font-weight:500; font-size:13px; }
.vgv-long-block { margin-top:20px; }
.vgv-long-block h4 { margin:0 0 8px; font-size:14px; }

/* Weekday picker in client modal */
.weekday-picker { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.weekday-btn { display:flex; align-items:center; cursor:pointer; }
.weekday-btn input { display:none; }
.weekday-btn span {
  display:inline-block; padding:5px 10px; border-radius:6px;
  border:1px solid var(--color-border); font-size:13px;
  background:#f5f5f5; color:var(--color-text); transition:all .15s;
}
.weekday-btn input:checked + span { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }

/* ─── Reports (admin) ────────────────────────────────────────────────────── */
.report-toolbar {
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:12px 0 16px;
}
.report-toolbar__dates { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.report-toolbar__shortcuts { display:flex; gap:6px; flex-wrap:wrap; }
.form-input--sm { padding:4px 8px; font-size:13px; height:32px; }
.btn--sm { padding:4px 12px; font-size:13px; height:32px; }

.report-cards {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:12px; margin-bottom:20px;
}
.report-card {
  background:#fff; border:1px solid var(--color-border); border-radius:10px;
  padding:14px 16px; text-align:center;
}
.report-card--green { border-color:#86efac; background:#f0fdf4; }
.report-card--red   { border-color:#fca5a5; background:#fff5f5; }
.report-card--blue  { border-color:#93c5fd; background:#eff6ff; }
.report-card__val   { font-size:28px; font-weight:700; color:var(--color-primary); }
.report-card--green .report-card__val { color:#15803d; }
.report-card--red   .report-card__val { color:#b91c1c; }
.report-card--blue  .report-card__val { color:#1d4ed8; }
.report-card__label { font-size:12px; color:var(--color-muted); margin-top:4px; }

.report-section { margin-bottom:24px; }
.report-section__title { font-size:16px; font-weight:600; margin:0 0 10px;
  padding-bottom:6px; border-bottom:2px solid var(--color-border); }
.report-table-wrap { overflow-x:auto; }
.report-table { width:100%; border-collapse:collapse; font-size:13px; }
.report-table th { background:#f5f7fa; font-weight:600; text-align:left;
  padding:8px 10px; border-bottom:2px solid var(--color-border); white-space:nowrap; }
.report-table td { padding:7px 10px; border-bottom:1px solid var(--color-border); }
.report-table tr:hover td { background:#fafbff; }
.td-num   { text-align:right; font-variant-numeric:tabular-nums; }
.td-green { color:#15803d; font-weight:600; }
.td-red   { color:#b91c1c; font-weight:600; }
.text-muted { color:var(--color-muted); font-size:12px; }

/* Insurance alerts block */
.ins-alert-block {
  background:#fffbeb; border:1px solid #fde68a; border-radius:10px;
  padding:14px 16px; margin-bottom:20px;
}
.ins-alert-block__title { font-size:15px; font-weight:700; margin:0 0 10px; color:#92400e; }
.ins-alert-list { display:flex; flex-direction:column; gap:6px; }
.ins-alert-item {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  padding:6px 10px; background:#fff; border-radius:6px;
  border:1px solid #fde68a; font-size:13px;
}
.ins-alert-num { font-weight:600; min-width:100px; }

/* ─── Archive (dispatcher) ───────────────────────────────────────────────── */
.archive-toolbar {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 0 14px;
}
.archive-list { display:flex; flex-direction:column; gap:8px; }
.archive-card {
  background:#fff; border:1px solid var(--color-border); border-radius:10px;
  overflow:hidden;
}
.archive-card--done   { border-left:4px solid #4ade80; }
.archive-card--broken { border-left:4px solid #f87171; }
.archive-card__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; cursor:pointer; user-select:none;
  transition:background .15s;
}
.archive-card__head:hover { background:#f5f7fa; }
.archive-card__meta { display:flex; flex-wrap:wrap; gap:10px; font-size:13px; align-items:center; }
.archive-status  { font-weight:700; }
.archive-date    { color:var(--color-muted); }
.archive-vehicle { font-weight:600; }
.archive-driver  { color:var(--color-muted); }
.archive-stops   { background:#e0e7ff; color:#3730a3; font-size:12px;
  padding:2px 7px; border-radius:4px; }
.archive-km      { background:#f0fdf4; color:#15803d; font-size:12px;
  padding:2px 7px; border-radius:4px; }
.archive-breakdown { background:#fff5f5; color:#b91c1c; font-size:12px;
  padding:2px 7px; border-radius:4px; }
.archive-card__head-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.archive-card__print {
  font-size:12px; font-weight:600; text-decoration:none; white-space:nowrap;
  padding:4px 10px; border-radius:6px; border:1px solid #93c5fd; background:#f0f4ff; color:#1d4ed8;
}
.archive-card__print:hover { background:#dbeafe; }
.archive-trip-id { color:var(--color-muted); font-size:12px; font-weight:600; }
.archive-card__toggle { font-size:12px; color:var(--color-muted); flex-shrink:0; }
.archive-card__body { padding:0 14px 12px; }
.archive-stops-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; }
.archive-stops-table th { background:#f5f7fa; padding:5px 8px; text-align:left;
  border-bottom:1px solid var(--color-border); }
.archive-stops-table td { padding:5px 8px; border-bottom:1px solid var(--color-border); }
.archive-stops-table tr.tr-pending td { color:var(--color-muted); }
.archive-stops-table tr:last-child td { border-bottom:none; }

/* ─── Site reports (driver photos in web) ─────────────────────────────────── */
.site-reports-toolbar {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 0 14px;
}
.site-reports-list {
  display:flex; flex-direction:column; gap:12px;
  max-height:calc(100vh - 220px); overflow-y:auto;
}
.page-full .site-reports-list { max-height:none; }

.site-report-card {
  border:1px solid var(--color-border); border-radius:10px; overflow:hidden;
  background:#fff; text-align:left;
}
.site-report-card__head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; background:#fafafa; border-bottom:1px solid var(--color-border);
}
.site-report-card__badge {
  font-size:12px; font-weight:700; padding:3px 8px; border-radius:4px;
}
.site-report-card__badge--excess { background:#ffedd5; color:#9a3412; }
.site-report-card__badge--access { background:#e0e7ff; color:#3730a3; }
.site-report-card__date { font-size:12px; color:var(--color-muted); }
.site-report-card__body { padding:12px 14px; font-size:13px; }
.site-report-card__addr { color:var(--color-muted); margin:4px 0 8px; font-size:12px; }
.site-report-card__meta { font-size:12px; line-height:1.5; margin-bottom:8px; }
.site-report-card__note {
  background:#fffbeb; border:1px solid #fde68a; padding:8px 10px;
  border-radius:6px; font-size:12px; margin-bottom:10px; white-space:pre-wrap;
}
.site-report-thumbs { display:flex; flex-wrap:wrap; gap:8px; }
.site-report-thumb {
  padding:0; border:2px solid var(--color-border); border-radius:8px; overflow:hidden;
  cursor:pointer; background:#f5f5f5; line-height:0; transition:border-color .15s;
}
.site-report-thumb:hover { border-color:var(--color-primary); }
.site-report-thumb:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.site-report-thumb img { width:88px; height:88px; object-fit:cover; display:block; }

.modal--photo-lightbox {
  max-width:min(96vw, 1200px); width:auto; padding:12px; background:#111;
  border-radius:12px; position:relative;
  box-shadow:0 20px 80px rgba(0,0,0,.5); max-height:92vh; overflow:auto;
}
.modal--photo-lightbox img { display:block; max-width:100%; max-height:85vh; margin:0 auto; }
.photo-lightbox__close {
  position:absolute; top:8px; right:8px; z-index:2;
  background:rgba(0,0,0,.65); color:#fff; border:none;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.photo-lightbox__close:hover { background:rgba(0,0,0,.85); }

/* =========================================================
   Mobile & tablet polish (touch, narrow screens)
   ========================================================= */
@media (max-width: 900px) {
	.app-header {
		padding-left: max(10px, env(safe-area-inset-left, 0px));
		padding-right: max(10px, env(safe-area-inset-right, 0px));
		gap: 4px;
	}

	.app-header__sub {
		display: none;
	}

	.app-header__title {
		font-size: 17px;
	}

	.app-header__nav {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: flex-end;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		flex-wrap: nowrap;
		gap: 4px;
		padding: 2px 0 4px;
		touch-action: pan-x;
	}

	.app-header__nav-link {
		flex: 0 0 auto;
		padding: 9px 11px;
		font-size: 12px;
		border-radius: 10px;
	}

	.app-header__nav-user {
		flex: 0 1 auto;
		min-width: 0;
		max-width: 42vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 12px;
		padding: 6px 8px;
	}

	.role-badge {
		flex-shrink: 0;
	}
}

@media (max-width: 640px) {
	.page-full {
		padding: 16px 12px;
	}

	.page-full__title {
		font-size: 18px;
	}

	.requests-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.form-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.form-grid .form-group--full {
		grid-column: 1;
	}

	/* iOS: 16px+ font у полях зменшує авто-зум при фокусі */
	.form-input,
	.form-textarea,
	.form-select {
		font-size: 16px;
	}

	.modal-overlay {
		padding: 12px;
		align-items: flex-end;
		padding-bottom: max(12px, env(safe-area-inset-bottom));
	}

	.modal {
		max-height: min(92dvh, 100%);
		border-radius: 14px 14px 0 0;
	}

	.modal__header,
	.modal__body,
	.modal__footer {
		padding-left: 16px;
		padding-right: 16px;
	}

	.modal__footer {
		flex-direction: column;
		gap: 8px;
	}

	.modal__footer .btn {
		width: 100%;
		justify-content: center;
	}

	.panel-left__header {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.panel-left__actions {
		flex-wrap: wrap;
		width: 100%;
		gap: 6px;
	}

	.tabs {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		gap: 0;
		scrollbar-width: thin;
		margin-left: -4px;
		margin-right: -4px;
		padding: 0 4px 2px;
	}

	.tabs .tab-btn {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 10px 12px;
		font-size: 12px;
	}

	.tab-bar--wrap {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		scrollbar-width: thin;
	}

	.tab-bar--wrap .tab-btn {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.btn {
		min-height: 44px;
		padding: 10px 14px;
	}

	.btn--sm {
		min-height: 40px;
		padding: 8px 12px;
	}

	.route-summary {
		padding: 10px 14px;
		gap: 10px;
	}

	.route-btns {
		flex-wrap: wrap;
	}

	.route-btns .btn {
		flex: 1 1 auto;
		min-width: min(100%, 140px);
	}

	.report-toolbar,
	.archive-toolbar,
	.schedule-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.report-toolbar__dates,
	.report-toolbar__shortcuts {
		width: 100%;
		justify-content: flex-start;
	}

	.telegram-toast {
		left: 12px;
		right: 12px;
		bottom: max(12px, env(safe-area-inset-bottom));
		max-width: none;
	}

	.vehicles-table {
		min-width: 640px;
	}
}

@media (max-width: 400px) {
	.app-header__nav-user {
		display: none;
	}
}