/* dealer-mobile.css — DMM Phase B.3 Mobile Salesperson Workflow.
 *
 * Mobile-first, touch-optimised styles layered on top of the existing dealer
 * (crm.css) framework. Components degrade gracefully on desktop. All sizing uses
 * large touch targets (min 44px) for one-handed use. */

.dealer-mobile {
	max-width: 720px;
	margin: 0 auto;
	padding-bottom: 1.5rem;
}

.dealer-mobile-section-title {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6c757d;
	margin: 1.1rem 0.25rem 0.5rem;
}

.dealer-mobile-muted {
	color: #6c757d;
	font-size: 0.85rem;
	display: block;
}

.dealer-mobile-link {
	font-size: 0.8rem;
	text-decoration: none;
}

/* --- Quick action grid --- */
.dealer-mobile-actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

@media (min-width: 480px) {
	.dealer-mobile-actions { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
	.dealer-mobile-actions { grid-template-columns: repeat(4, 1fr); }
}

.dealer-mobile-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 96px;
	padding: 0.85rem 0.5rem;
	border: 1px solid #e2e6ea;
	border-radius: 14px;
	background: #fff;
	color: #1f2d3d;
	font-weight: 600;
	font-size: 0.85rem;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: transform 0.08s ease, box-shadow 0.08s ease;
	cursor: pointer;
}

.dealer-mobile-tile:active {
	transform: scale(0.97);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.dealer-mobile-tile i {
	font-size: 1.6rem;
	color: #0d6efd;
}

.dealer-mobile-badge {
	position: absolute;
	top: 6px;
	right: 8px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: #dc3545;
	color: #fff;
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

/* --- Stat tiles --- */
.dealer-mobile-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.6rem;
}

@media (min-width: 600px) {
	.dealer-mobile-stats { grid-template-columns: repeat(3, 1fr); }
}

.dealer-mobile-stat {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.75rem;
	border: 1px solid #e2e6ea;
	border-radius: 12px;
	background: #fff;
}

.dealer-mobile-stat.is-alert {
	border-color: #f1c2c7;
	background: #fdf0f1;
}

.dealer-mobile-stat-value {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.dealer-mobile-stat.is-alert .dealer-mobile-stat-value { color: #dc3545; }

.dealer-mobile-stat-label {
	font-size: 0.75rem;
	color: #6c757d;
}

/* --- Generic list (follow-ups) --- */
.dealer-mobile-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.dealer-mobile-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border: 1px solid #e2e6ea;
	border-radius: 12px;
	background: #fff;
	color: #1f2d3d;
	text-decoration: none;
	min-height: 56px;
}

.dealer-mobile-list-main { display: flex; flex-direction: column; }
.dealer-mobile-list-meta { display: flex; align-items: center; gap: 0.5rem; color: #adb5bd; }

/* --- Vehicle cards --- */
.dealer-mobile-searchbar { margin-bottom: 1rem; }

.dealer-mobile-vehicle-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
}

@media (min-width: 600px) {
	.dealer-mobile-vehicle-list { grid-template-columns: repeat(2, 1fr); }
}

.dealer-mobile-vehicle {
	display: flex;
	flex-direction: column;
	border: 1px solid #e2e6ea;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dealer-mobile-vehicle-photo {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: #f1f3f5;
}

.dealer-mobile-vehicle-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dealer-mobile-vehicle-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #ced4da;
	font-size: 2.5rem;
}

.dealer-mobile-vehicle-status {
	position: absolute;
	top: 8px;
	left: 8px;
}

.dealer-mobile-vehicle-body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.75rem 0.85rem 0.85rem;
}

.dealer-mobile-vehicle-title {
	font-weight: 700;
	color: #1f2d3d;
	text-decoration: none;
	font-size: 1rem;
}

.dealer-mobile-vehicle-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	font-size: 0.8rem;
	color: #6c757d;
}

.dealer-mobile-vehicle-price {
	font-size: 1.15rem;
	font-weight: 700;
	color: #0d6efd;
	margin-top: 0.15rem;
}

.dealer-mobile-vehicle-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

/* --- Deal cards --- */
.dealer-mobile-deal {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.85rem 1rem;
	border: 1px solid #e2e6ea;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dealer-mobile-deal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

.dealer-mobile-deal-figures {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	padding: 0.5rem 0;
	border-top: 1px solid #f1f3f5;
	border-bottom: 1px solid #f1f3f5;
}

.dealer-mobile-deal-figures div { display: flex; flex-direction: column; }
.dealer-mobile-deal-figures strong { font-size: 0.95rem; }

.dealer-mobile-deal-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.dealer-mobile-deal-actions {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.dealer-mobile-deposit {
	margin-top: 0.4rem;
	border-top: 1px dashed #e2e6ea;
	padding-top: 0.5rem;
}

.dealer-mobile-deposit summary {
	cursor: pointer;
	font-weight: 600;
	color: #0d6efd;
	list-style: none;
	padding: 0.35rem 0;
}

.dealer-mobile-deposit summary::-webkit-details-marker { display: none; }
.dealer-mobile-deposit-form { margin-top: 0.5rem; }

.dealer-mobile-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* --- Contact modal --- */
.dealer-mobile-contact-results { max-height: 55vh; overflow-y: auto; }

.dealer-mobile-contact-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid #f1f3f5;
}

.dealer-mobile-contact-info { display: flex; flex-direction: column; }
.dealer-mobile-contact-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

/* --- Shared: contact bar + photo capture (also used on detail screens) --- */
.dealer-contact-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dealer-contact-bar .btn { flex: 1 1 auto; min-width: 96px; min-height: 44px; }

.dealer-photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 0.6rem;
}

.dealer-photo-item {
	position: relative;
	margin: 0;
	border: 1px solid #e2e6ea;
	border-radius: 10px;
	overflow: hidden;
	background: #f8f9fa;
}

.dealer-photo-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.dealer-photo-item figcaption {
	padding: 0.3rem 0.45rem;
	font-size: 0.75rem;
	color: #6c757d;
}

.dealer-photo-delete {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	background: rgba(220, 53, 69, 0.92);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ===========================================================================
 * Mobile Sales shell (Phase B.3) — separate mobile-facing chrome (header +
 * bottom nav), like the technician clockcard UI. No desktop sidebar/tabs.
 * =========================================================================== */
.dealer-mobile-app {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background: #f4f6f8;
}

.dm-topbar {
	position: sticky;
	top: 0;
	z-index: 1020;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: 56px;
	padding: 0 0.5rem;
	background: #0d2440;
	color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.dm-topbar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	color: #fff;
	font-size: 1.3rem;
	text-decoration: none;
	flex-shrink: 0;
}

.dm-topbar-btn:active { background: rgba(255, 255, 255, 0.12); }
.dm-topbar-btn--placeholder { visibility: hidden; }

.dm-topbar-title {
	flex: 1 1 auto;
	font-weight: 700;
	font-size: 1.05rem;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
}

.dm-scroll {
	flex: 1 1 auto;
	padding: 0.85rem 0.85rem calc(72px + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
}

.dm-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	display: flex;
	background: #fff;
	border-top: 1px solid #e2e6ea;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.06);
}

.dm-nav-item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 0.4rem 0.25rem;
	min-height: 60px;
	color: #6c757d;
	font-size: 0.68rem;
	font-weight: 600;
	text-decoration: none;
}

.dm-nav-item i { font-size: 1.25rem; }
.dm-nav-item.active { color: #0d6efd; }
.dm-nav-item:active { background: #f1f3f5; }
.dm-nav-label { line-height: 1; }

/* --- Detail cards / key-value rows --- */
.dm-card {
	border: 1px solid #e2e6ea;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	margin-bottom: 0.85rem;
}

.dm-card--info { overflow: visible; }
.dm-card-body { padding: 0.85rem 1rem; }
.dm-card-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.15rem; }

.dm-card-photo {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #f1f3f5;
}

.dm-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-card-photo-empty { font-size: 3rem; }

.dm-spec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem 0.75rem;
	margin-top: 0.6rem;
}

.dm-spec-grid div { display: flex; flex-direction: column; }

.dm-kv {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid #f1f3f5;
}

.dm-kv:last-child { border-bottom: none; }
.dm-kv--block { flex-direction: column; align-items: stretch; gap: 0.15rem; }

.dm-actions-row { grid-template-columns: repeat(2, 1fr); margin: 0.85rem 0; }
.dm-actions-row .btn { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 0.35rem; }

.dm-photo-strip {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.dm-photo-thumb {
	flex: 0 0 auto;
	width: 120px;
	height: 90px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #e2e6ea;
}

.dm-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Mobile forms --- */
.dm-form .input-label { font-size: 0.8rem; font-weight: 600; }
.dm-form .form-control,
.dm-form .form-select { min-height: 48px; font-size: 1rem; }
.dm-form textarea.form-control { min-height: auto; }
.dm-contact-bar { margin-bottom: 1rem; }

/* --- Follow-up rows --- */
.dm-followup { flex-wrap: wrap; align-items: flex-start; }
.dm-followup-actions { flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.dm-followup-snooze { display: flex; gap: 0.4rem; align-items: center; }
.dm-followup-snooze .form-control { flex: 1 1 auto; }

/* --- Desktop notice (Mobile Sales reached from a desktop browser) --- */
.dm-desktop-notice {
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
}

.dm-desktop-notice-card {
	max-width: 440px;
	text-align: center;
	background: #fff;
	border: 1px solid #e2e6ea;
	border-radius: 16px;
	padding: 2rem 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dm-desktop-notice-icon { font-size: 3rem; color: #0d6efd; }
.dm-desktop-notice-card h1 { font-size: 1.4rem; font-weight: 700; margin: 0.75rem 0; }
.dm-desktop-notice-card p { color: #6c757d; }
.dm-desktop-notice-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.25rem; }