﻿/* =========================================
   Admin reports base
========================================= */

.admin-reports-page,
.admin-reports-page * {
	box-sizing: border-box;
}

.admin-reports-page {
	min-height: 100vh;
	padding: 28px;
	background: radial-gradient( circle at top right, rgba(244, 122, 24, 0.07), transparent 360px ), #f4f7fb;
	color: #263c61;
	font-family: "IBM Plex Sans", Arial, sans-serif;
}

.admin-reports-container {
	width: min(1450px, 100%);
	margin: 0 auto;
}

/* =========================================
   Heading
========================================= */

.report-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-bottom: 20px;
	padding: 23px 25px;
	border: 1px solid #dfe6ef;
	border-radius: 17px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(21, 43, 84, 0.065);
}

.report-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 7px;
	color: #e5670b;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.report-heading h1 {
	margin: 0;
	color: #152b54;
	font-size: clamp(27px, 3vw, 35px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.15;
}

.report-heading p {
	margin: 7px 0 0;
	color: #6b7b91;
	font-size: 12px;
}

.report-heading-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 0 15px;
	border: 1px solid #d5deea;
	border-radius: 10px;
	background: #f8fafc;
	color: #315381;
	font-size: 10px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

	.report-heading-link:hover {
		border-color: #efb47f;
		background: #fff7ed;
		color: #d95d07;
		transform: translateY(-1px);
	}

/* =========================================
   Date filter
========================================= */

.report-date-filter {
	display: grid;
	grid-template-columns: 190px 190px auto auto;
	align-items: end;
	gap: 10px;
	margin-bottom: 19px;
	padding: 15px;
	border: 1px solid #dfe6ef;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(21, 43, 84, 0.05);
}

	.report-date-filter > div {
		min-width: 0;
	}

	.report-date-filter label {
		display: block;
		margin-bottom: 6px;
		color: #475b77;
		font-size: 9px;
		font-weight: 700;
	}

	.report-date-filter input {
		display: block;
		width: 100%;
		height: 41px;
		padding: 0 11px;
		border: 1px solid #d3dce8;
		border-radius: 9px;
		background: #fff;
		color: #263c61;
		font-family: inherit;
		font-size: 11px;
		outline: none;
	}

		.report-date-filter input:focus {
			border-color: #f47a18;
			box-shadow: 0 0 0 3px rgba(244, 122, 24, 0.11);
		}

	.report-date-filter button,
	.report-date-filter > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		height: 41px;
		padding: 0 15px;
		border-radius: 9px;
		font-family: inherit;
		font-size: 10px;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
	}

	.report-date-filter button {
		border: 1px solid #f47a18;
		background: #f47a18;
		color: #fff;
		box-shadow: 0 5px 12px rgba(244, 122, 24, 0.18);
	}

		.report-date-filter button:hover {
			border-color: #df6810;
			background: #df6810;
		}

	.report-date-filter > a {
		border: 1px solid #d3dce8;
		background: #fff;
		color: #526781;
	}

		.report-date-filter > a:hover {
			border-color: #b7c4d4;
			background: #f8fafc;
			color: #152b54;
		}

/* =========================================
   KPI cards
========================================= */

.report-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 19px;
}

.report-kpi {
	position: relative;
	display: flex;
	align-items: center;
	gap: 13px;
	min-width: 0;
	padding: 18px;
	overflow: hidden;
	border: 1px solid #dfe6ef;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 7px 22px rgba(21, 43, 84, 0.055);
}

	.report-kpi::after {
		position: absolute;
		right: -18px;
		bottom: -23px;
		width: 75px;
		height: 75px;
		border-radius: 50%;
		background: currentColor;
		content: "";
		opacity: 0.035;
	}

	.report-kpi > span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 47px;
		width: 47px;
		height: 47px;
		border-radius: 13px;
		font-size: 17px;
	}

	.report-kpi > div {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 3px;
	}

	.report-kpi small {
		color: #7c899b;
		font-size: 9px;
		font-weight: 600;
	}

	.report-kpi strong {
		overflow: hidden;
		color: #152b54;
		font-size: clamp(17px, 2vw, 22px);
		font-weight: 700;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.report-kpi p {
		margin: 0;
		color: #7a8799;
		font-size: 8px;
	}

	.report-kpi.revenue {
		color: #15803d;
	}

		.report-kpi.revenue > span {
			background: #eaf8ef;
			color: #15803d;
		}

	.report-kpi.outstanding {
		color: #c06b0b;
	}

		.report-kpi.outstanding > span {
			background: #fff5e8;
			color: #d56b08;
		}

	.report-kpi.bookings {
		color: #2563eb;
	}

		.report-kpi.bookings > span {
			background: #eaf3ff;
			color: #2563eb;
		}

	.report-kpi.average {
		color: #7c3aed;
	}

		.report-kpi.average > span {
			background: #f3eefe;
			color: #7c3aed;
		}

/* =========================================
   Report panels
========================================= */

.report-two-column {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 17px;
	margin-bottom: 17px;
}

.report-panel {
	min-width: 0;
	padding: 20px;
	border: 1px solid #dfe6ef;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 7px 22px rgba(21, 43, 84, 0.055);
}

.report-panel-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 17px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e8edf3;
}

	.report-panel-heading h2 {
		margin: 0;
		color: #152b54;
		font-size: 15px;
		font-weight: 700;
	}

	.report-panel-heading p {
		margin: 4px 0 0;
		color: #7c899b;
		font-size: 9px;
	}

	.report-panel-heading > i {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 35px;
		width: 35px;
		height: 35px;
		border-radius: 10px;
		background: #fff3e8;
		color: #e5670b;
		font-size: 13px;
	}

/* =========================================
   Empty panel
========================================= */

.report-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	padding: 20px;
	border: 1px dashed #d7e0eb;
	border-radius: 11px;
	background: #fafbfd;
	color: #8491a3;
	font-size: 10px;
	text-align: center;
}

/* =========================================
   Revenue rows
========================================= */

.daily-revenue-list {
	display: flex;
	max-height: 370px;
	padding-right: 4px;
	overflow-y: auto;
	flex-direction: column;
	gap: 13px;
}

.daily-revenue-row {
	min-width: 0;
}

.daily-revenue-details {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

	.daily-revenue-details > span {
		color: #263c61;
		font-size: 10px;
		font-weight: 700;
	}

	.daily-revenue-details small {
		color: #8491a3;
		font-size: 8px;
	}

	.daily-revenue-details strong {
		color: #15803d;
		font-size: 10px;
		font-weight: 700;
		white-space: nowrap;
	}

/* =========================================
   Progress bars
========================================= */

.report-progress {
	width: 100%;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: #edf1f6;
}

	.report-progress > span {
		display: block;
		width: 0;
		min-width: 3px;
		height: 100%;
		border-radius: inherit;
		background: linear-gradient( 90deg, #f47a18, #f7a24f );
	}

/* =========================================
   Status lists
========================================= */

.report-status-list {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

	.report-status-list > div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 15px;
		min-height: 42px;
		padding: 9px 11px;
		border: 1px solid #e3e9f0;
		border-radius: 10px;
		background: #fafbfd;
	}

	.report-status-list span {
		color: #526781;
		font-size: 10px;
		font-weight: 600;
	}

	.report-status-list strong {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 29px;
		height: 25px;
		padding: 0 8px;
		border-radius: 999px;
		background: #152b54;
		color: #fff;
		font-size: 9px;
		font-weight: 700;
	}

/* =========================================
   Top packages
========================================= */

.top-package-list {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.top-package-row {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
}

.package-position {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: #152b54;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}

.top-package-row > div {
	min-width: 0;
}

.top-package-row strong {
	display: block;
	overflow: hidden;
	color: #263c61;
	font-size: 10px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top-package-row small {
	display: block;
	margin: 3px 0 6px;
	color: #8491a3;
	font-size: 8px;
}

/* =========================================
   Upcoming pickups
========================================= */

.upcoming-pickups-panel {
	margin-bottom: 0;
}

.report-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid #e2e8f0;
	border-radius: 11px;
}

.report-table {
	width: 100%;
	min-width: 1000px;
	border-collapse: collapse;
}

	.report-table thead {
		background: #152b54;
	}

	.report-table th {
		padding: 11px 12px;
		color: rgba(255, 255, 255, 0.87);
		font-size: 7px;
		font-weight: 700;
		letter-spacing: 0.07em;
		text-align: left;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.report-table td {
		padding: 12px;
		border-bottom: 1px solid #e8edf3;
		color: #526781;
		font-size: 9px;
		line-height: 1.45;
		vertical-align: middle;
	}

	.report-table tbody tr:hover {
		background: #f8fafc;
	}

	.report-table tbody tr:last-child td {
		border-bottom: 0;
	}

	.report-table td strong {
		display: block;
		color: #263c61;
		font-size: 9px;
		font-weight: 700;
	}

	.report-table td small {
		display: block;
		margin-top: 3px;
		color: #8794a6;
		font-size: 7px;
	}

/* =========================================
   Scrollbars
========================================= */

.daily-revenue-list::-webkit-scrollbar,
.report-table-wrap::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

.daily-revenue-list::-webkit-scrollbar-track,
.report-table-wrap::-webkit-scrollbar-track {
	border-radius: 999px;
	background: #edf1f6;
}

.daily-revenue-list::-webkit-scrollbar-thumb,
.report-table-wrap::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: #aeb9c8;
}

	.daily-revenue-list::-webkit-scrollbar-thumb:hover,
	.report-table-wrap::-webkit-scrollbar-thumb:hover {
		background: #8794a6;
	}

/* =========================================
   Responsive
========================================= */

@media (max-width: 1100px) {
	.report-kpi-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 850px) {
	.admin-reports-page {
		padding: 18px;
	}

	.report-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.report-heading-link {
		width: 100%;
	}

	.report-date-filter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.report-two-column {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.admin-reports-page {
		padding: 12px;
	}

	.report-heading,
	.report-panel {
		padding: 17px;
		border-radius: 13px;
	}

	.report-kpi-grid,
	.report-date-filter {
		grid-template-columns: 1fr;
	}

		.report-date-filter button,
		.report-date-filter > a {
			width: 100%;
		}

	.daily-revenue-details {
		grid-template-columns: 60px minmax(0, 1fr);
	}

		.daily-revenue-details strong {
			grid-column: 1 / -1;
		}
}

/* =========================================
   Print reports
========================================= */

@media print {
	@page {
		size: A4 landscape;
		margin: 10mm;
	}

	header,
	nav,
	footer,
	.site-header,
	.main-header,
	.navbar,
	.site-footer,
	.main-footer,
	.admin-sidebar,
	.report-heading-link,
	.report-date-filter {
		display: none !important;
	}

	html,
	body {
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
	}

	.admin-reports-page {
		min-height: 0;
		padding: 0 !important;
		background: #fff !important;
	}

	.admin-reports-container {
		width: 100%;
		max-width: none;
	}

	.report-heading {
		display: block !important;
		margin-bottom: 12px;
		padding: 0 0 12px;
		border: 0;
		border-bottom: 2px solid #152b54;
		border-radius: 0;
		box-shadow: none;
	}

	.report-kpi,
	.report-panel {
		border: 1px solid #d5dce5;
		box-shadow: none;
		break-inside: avoid;
	}

	.report-kpi-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.report-two-column {
		grid-template-columns: repeat(2, 1fr);
	}

	.daily-revenue-list {
		max-height: none;
		overflow: visible;
	}

	.report-table-wrap {
		overflow: visible;
	}

	.report-table {
		min-width: 0;
		table-layout: fixed;
	}

		.report-table tr {
			break-inside: avoid;
		}

	.report-progress > span,
	.package-position,
	.report-status-list strong {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
}
.report-heading-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.report-print-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 10px 17px;
	border: 0;
	border-radius: 10px;
	background: #f47a18;
	color: #fff;
	box-shadow: 0 6px 15px rgba(244, 122, 24, 0.2);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

	.report-print-button:hover {
		background: #db670d;
		box-shadow: 0 8px 18px rgba(244, 122, 24, 0.28);
		transform: translateY(-1px);
	}

.report-print-header,
.report-print-footer {
	display: none;
}

@page {
	size: A4 landscape;
	margin: 12mm;
}

@media print {
	html,
	body {
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		color: #172b4d !important;
		font-size: 10pt;
	}

		/* Hide site and admin layout */
		body > header,
		body > footer,
		nav,
		aside,
		.navbar,
		.site-header,
		.site-footer,
		.admin-sidebar,
		.admin-header,
		.admin-navigation,
		.mobile-navigation,
		.whatsapp-float,
		.floating-whatsapp,
		.no-print,
		.report-date-filter,
		.report-heading {
			display: none !important;
		}

	.admin-reports-page {
		min-height: 0;
		padding: 0 !important;
		background: #fff !important;
	}

	.admin-reports-container {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.report-print-header {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		margin-bottom: 18px;
		padding: 0 0 14px;
		border-bottom: 3px solid #173665;
	}

	.report-print-brand {
		display: flex;
		align-items: center;
		gap: 11px;
	}

		.report-print-brand img {
			width: 48px;
			height: 48px;
			object-fit: contain;
		}

		.report-print-brand h1 {
			margin: 0;
			color: #173665;
			font-size: 18pt;
			line-height: 1.15;
		}

		.report-print-brand p {
			margin: 4px 0 0;
			color: #64748b;
			font-size: 9pt;
		}

	.report-print-information {
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		gap: 5px;
		color: #173665;
		text-align: right;
	}

		.report-print-information strong {
			font-size: 11pt;
		}

		.report-print-information span {
			color: #64748b;
			font-size: 8pt;
		}

	.report-kpi-grid {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 8px !important;
		margin-bottom: 12px !important;
	}

	.report-kpi {
		min-height: 0 !important;
		padding: 11px !important;
		border: 1px solid #cbd5e1 !important;
		box-shadow: none !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.report-kpi-icon {
		width: 32px !important;
		height: 32px !important;
		font-size: 12px !important;
	}

	.report-kpi-value {
		font-size: 15pt !important;
	}

	.report-kpi-label {
		font-size: 7.5pt !important;
	}

	.report-two-column {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}

	.report-panel {
		margin-bottom: 10px !important;
		padding: 12px !important;
		border: 1px solid #cbd5e1 !important;
		box-shadow: none !important;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.report-panel-heading {
		margin-bottom: 10px !important;
		padding-bottom: 8px !important;
	}

		.report-panel-heading h2 {
			font-size: 12pt !important;
		}

	.report-table-wrap {
		overflow: visible !important;
		border: 1px solid #cbd5e1 !important;
		box-shadow: none !important;
	}

	.report-table {
		width: 100% !important;
		min-width: 0 !important;
		table-layout: fixed;
		font-size: 8pt !important;
	}

		.report-table th,
		.report-table td {
			padding: 6px !important;
			word-break: break-word;
		}

		.report-table thead {
			display: table-header-group;
		}

		.report-table tr {
			break-inside: avoid;
			page-break-inside: avoid;
		}

	.report-progress {
		border: 1px solid #dbe3ee;
	}

		.report-progress span {
			print-color-adjust: exact;
			-webkit-print-color-adjust: exact;
		}

	.report-print-footer {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		margin-top: 15px;
		padding-top: 8px;
		border-top: 1px solid #cbd5e1;
		color: #64748b;
		font-size: 7.5pt;
	}

	a {
		color: inherit !important;
		text-decoration: none !important;
	}
}
