/**
 * WeDrive CDL Record Services — Driver Request Detail Page CSS
 * Version: 1.0.0
 */

/* =========================================
   BACK NAVIGATION LINK
   ========================================= */
.wrs-back-nav {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	color: #29abe2 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin-bottom: 20px !important;
	transition: color 0.2s ease !important;
}

.wrs-back-nav:hover {
	color: #1b8ec2 !important;
}

/* =========================================
   DETAIL PAGE HEADER CARD
   ========================================= */
.wrs-request-header-card {
	background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
	border-radius: 14px !important;
	padding: 24px !important;
	margin-bottom: 20px !important;
	color: #ffffff !important;
	position: relative !important;
	overflow: hidden !important;
}

.wrs-request-header-card::before {
	content: '' !important;
	position: absolute !important;
	top: -50% !important;
	right: -10% !important;
	width: 280px !important;
	height: 280px !important;
	background: rgba(41, 171, 226, 0.08) !important;
	border-radius: 50% !important;
}

.wrs-req-service-name {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin: 0 0 12px 0 !important;
	position: relative !important;
}

.wrs-req-meta-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	position: relative !important;
}

.wrs-req-meta-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

.wrs-req-meta-label {
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: rgba(255,255,255,0.55) !important;
}

.wrs-req-meta-value {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
}

/* =========================================
   STATUS STEPPER
   ========================================= */
.wrs-status-stepper-card {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px !important;
	padding: 22px 24px !important;
	margin-bottom: 20px !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important;
}

.wrs-stepper-title {
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: #64748b !important;
	margin: 0 0 20px 0 !important;
}

.wrs-stepper {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0 !important;
	position: relative !important;
}

.wrs-step {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	flex: 1 !important;
	position: relative !important;
}

.wrs-step:not(:last-child)::after {
	content: '' !important;
	position: absolute !important;
	top: 16px !important;
	left: 50% !important;
	width: 100% !important;
	height: 2px !important;
	background: #e2e8f0 !important;
	z-index: 0 !important;
}

.wrs-step.wrs-step-done:not(:last-child)::after,
.wrs-step.wrs-step-active:not(:last-child)::after {
	background: #29abe2 !important;
}

.wrs-step-circle {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	border: 2px solid #e2e8f0 !important;
	background: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	z-index: 1 !important;
	font-size: 13px !important;
	color: #94a3b8 !important;
	font-weight: 700 !important;
	transition: all 0.3s ease !important;
}

.wrs-step.wrs-step-done .wrs-step-circle {
	background: #29abe2 !important;
	border-color: #29abe2 !important;
	color: #ffffff !important;
}

.wrs-step.wrs-step-active .wrs-step-circle {
	background: #0f172a !important;
	border-color: #29abe2 !important;
	color: #ffffff !important;
	box-shadow: 0 0 0 4px rgba(41,171,226,0.2) !important;
}

.wrs-step-label {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #94a3b8 !important;
	margin-top: 8px !important;
	text-align: center !important;
	line-height: 1.3 !important;
}

.wrs-step.wrs-step-active .wrs-step-label {
	color: #0f172a !important;
}

.wrs-step.wrs-step-done .wrs-step-label {
	color: #29abe2 !important;
}

/* cancelled variant */
.wrs-step.wrs-step-cancelled .wrs-step-circle {
	background: #dc2626 !important;
	border-color: #dc2626 !important;
	color: #ffffff !important;
}

.wrs-step.wrs-step-cancelled .wrs-step-label {
	color: #dc2626 !important;
}

/* =========================================
   SECTION CARDS
   ========================================= */
.wrs-detail-section {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px !important;
	margin-bottom: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important;
}

.wrs-detail-section-header {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 14px 20px !important;
	background: #f8fafc !important;
	border-bottom: 1px solid #e2e8f0 !important;
}

.wrs-detail-section-icon {
	width: 32px !important;
	height: 32px !important;
	background: #e0f2fe !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #0284c7 !important;
	flex-shrink: 0 !important;
}

.wrs-detail-section-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 !important;
}

.wrs-detail-section-body {
	padding: 18px 20px !important;
}

/* =========================================
   INFO GRID (submitted fields)
   ========================================= */
.wrs-info-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 12px 20px !important;
}

.wrs-info-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
}

.wrs-info-key {
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: #94a3b8 !important;
}

.wrs-info-val {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #0f172a !important;
}

@media (max-width: 640px) {
	.wrs-info-grid {
		grid-template-columns: 1fr !important;
	}
}

/* =========================================
   ADMIN MESSAGE ALERT BOX
   ========================================= */
.wrs-admin-message-box {
	background: #eff6ff !important;
	border: 1px solid #bfdbfe !important;
	border-left: 4px solid #3b82f6 !important;
	border-radius: 0 10px 10px 0 !important;
	padding: 14px 16px !important;
	display: flex !important;
	gap: 12px !important;
	align-items: flex-start !important;
}

.wrs-admin-msg-icon {
	font-size: 20px !important;
	flex-shrink: 0 !important;
	margin-top: 1px !important;
}

.wrs-admin-msg-content {}

.wrs-admin-msg-from {
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: #3b82f6 !important;
	margin-bottom: 4px !important;
}

.wrs-admin-msg-text {
	font-size: 14px !important;
	color: #1e3a5f !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	white-space: pre-line !important;
}

/* =========================================
   DOCUMENT / FILE ROWS
   ========================================= */
.wrs-doc-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.wrs-doc-item {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
}

.wrs-doc-icon {
	font-size: 22px !important;
	flex-shrink: 0 !important;
}

.wrs-doc-meta {
	flex: 1 !important;
	min-width: 0 !important;
}

.wrs-doc-name {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #0f172a !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.wrs-doc-label {
	font-size: 11px !important;
	color: #64748b !important;
	margin-top: 2px !important;
}

.wrs-doc-download-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	background: #16a34a !important;
	color: #ffffff !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 7px 14px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: background 0.2s ease !important;
	flex-shrink: 0 !important;
}

.wrs-doc-download-btn:hover {
	background: #15803d !important;
	color: #ffffff !important;
}

/* =========================================
   STATUS HISTORY TIMELINE
   ========================================= */
.wrs-history-timeline {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	position: relative !important;
}

.wrs-history-item {
	display: flex !important;
	gap: 14px !important;
	position: relative !important;
	padding-bottom: 18px !important;
}

.wrs-history-item:last-child {
	padding-bottom: 0 !important;
}

.wrs-history-item:not(:last-child)::before {
	content: '' !important;
	position: absolute !important;
	left: 10px !important;
	top: 24px !important;
	width: 2px !important;
	height: calc(100% - 10px) !important;
	background: #e2e8f0 !important;
}

.wrs-history-dot {
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: #29abe2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	margin-top: 2px !important;
	z-index: 1 !important;
}

.wrs-history-dot svg {
	width: 11px !important;
	height: 11px !important;
	color: #ffffff !important;
}

.wrs-history-text {
	flex: 1 !important;
}

.wrs-history-statuses {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #0f172a !important;
	margin-bottom: 2px !important;
}

.wrs-history-time {
	font-size: 12px !important;
	color: #94a3b8 !important;
}

/* =========================================
   EMPTY STATE
   ========================================= */
.wrs-detail-empty {
	background: #f8fafc !important;
	border: 1px dashed #cbd5e1 !important;
	border-radius: 10px !important;
	padding: 20px !important;
	text-align: center !important;
	color: #64748b !important;
	font-size: 13px !important;
}

/* =========================================
   AWAITING INFO ALERT
   ========================================= */
.wrs-awaiting-alert {
	background: #fef3c7 !important;
	border: 1px solid #fcd34d !important;
	border-left: 4px solid #d97706 !important;
	border-radius: 0 10px 10px 0 !important;
	padding: 14px 16px !important;
	margin-bottom: 16px !important;
	display: flex !important;
	gap: 10px !important;
	align-items: flex-start !important;
}

.wrs-awaiting-alert p {
	margin: 0 !important;
	font-size: 14px !important;
	color: #78350f !important;
	font-weight: 600 !important;
}

/* =========================================
   MOBILE RESPONSIVE OVERRIDES (<640px)
   ========================================= */
@media (max-width: 640px) {
	.wrs-request-header-card {
		padding: 18px !important;
	}

	.wrs-req-service-name {
		font-size: 18px !important;
	}

	.wrs-req-meta-row {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}

	.wrs-status-stepper-card {
		padding: 16px !important;
	}

	.wrs-stepper {
		flex-direction: column !important;
		gap: 14px !important;
		align-items: flex-start !important;
	}

	.wrs-step {
		flex-direction: row !important;
		align-items: center !important;
		gap: 12px !important;
		width: 100% !important;
	}

	.wrs-step:not(:last-child)::after {
		top: 28px !important;
		left: 15px !important;
		width: 2px !important;
		height: calc(100% + 2px) !important;
	}

	.wrs-step-label {
		margin-top: 0 !important;
		text-align: left !important;
		font-size: 12px !important;
	}

	.wrs-doc-item {
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	.wrs-doc-download-btn {
		width: 100% !important;
		justify-content: center !important;
	}
}