/* =========================================================
   AUTONEER – CENTRAL TABLE STYLES
   Reference source: main-table (staff list)
   Do NOT style tables outside this file.
   Use modifiers instead of overrides.
   ========================================================= */

/* THIS is the only scrolling region */
.table-scroll-container {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
}

.table-scroll {
	max-height: 420px;
	overflow: auto;
}

/* Make the table head stick at the top of its scroll container */
.table-responsive-2 thead th {
	position: sticky;
	top: 0;
	background-color: blue;
	z-index: 10;
}

#atj-lines-table td,
#atj-lines-table th {
	white-space: nowrap;
}

.main-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	background: white;
	font-size: 12px;
	overflow: auto;
}

.main-table th,
.main-table td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

}

.main-table td[title] {
	cursor: help;
}

.main-table th {
	cursor: pointer;
}

.main-table tbody tr {
	transition: display 0.2s ease;
}

.main-table th {
	background-color: #0073e6;
	color: white;
	position: sticky;
	top: 0;
	z-index: 10;
}

.main-table td.balance {
	font-weight: bold;
	color: yellow;
	background-color: darkred;
	text-align: right;
}

.transaction-table {
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	font-size: 12px;
	width: 100%;
	border-collapse: collapse;
}

/* Keep the table header visible while scrolling the rows inside the .jobs-container */
.transaction-table thead th {
	position: sticky;
	top: 0;
	background: lightslategrey;
	z-index: 2;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.06);
}

.transaction-table th,
.transaction-table td {
	border: 1px solid #ccc;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 3px 10px !important;
}

.transaction-table th {
	background-color: lightslategray;
	color: white;
	font-weight: 100;
	font-size: 14px;
	padding: 3px 10px !important;
}

table.transaction-table.dataTable th,
table.transaction-table.dataTable td {
	padding: 3px 10px !important;
	box-sizing: border-box;
	cursor: context-menu;
}

/* Make sure the table uses full width and doesn't collapse when placed in a scrollable container */
.transaction-table {
	width: 100%;
	border-collapse: collapse;
	padding: 3px 10px !important;
}

.transaction-table td,
.transaction-table th {
	white-space: nowrap;
	padding: 3px 10px !important;
}

/* Make rows in any jobs-style table show selection the same as other selectable rows */
.transaction-table tbody tr.selected,
.clickable-row-jobs.selected {
	background-color: beige;
}

.clickable-row-jobs:hover {
	background-color: #f0f8ff;
}

.jobs-container {
	display: block;
	justify-content: center;
	padding: 20px;
	padding-top: 0px;
	box-sizing: content-box !important;
	background-color: #f4f4f4e2;
	overflow: auto;
	max-height: calc(100vh - 180px);
}

/* Ensure tables inside vehicle history have sticky headers */
.vehicle-history-container .transaction-table thead th {
	position: sticky;
	top: 0;
	background: lightslategrey;
	z-index: 2;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.06);
}


/* Optional: keep a consistent scrollable area for the table */
.table-scroll-container {
	/* max-height: 60vh; */
	overflow-y: auto;
	scrollbar-gutter: stable;
	background-color: #f4f4f4;
}

.table-scroll-container2 {
	max-height: 60vh;
	overflow-y: auto;
	scrollbar-gutter: stable;
	background-color: #f4f4f4;
}

.table-scroll-container::-webkit-scrollbar {
	width: 8px;
}

.table-scroll-container::-webkit-scrollbar-track {
	background: #f0f0f0;
}

.table-scroll-container::-webkit-scrollbar-thumb {
	background: #bbb;
	border-radius: 4px;
}

.table-scroll-container::-webkit-scrollbar-thumb:hover {
	background: #999;
}

/* Optional selected-row styling if you use it elsewhere */
#jobsTable tbody tr.selected {
	background-color: #e3f2fd;
}

/* Table */
table {
	width: 100%;
	border-collapse: collapse;
	background-color: white;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

table th,
table td {
	border: 1px solid #ccc;
	padding: 3px 10px;
	text-align: left;
}

table th {
	background-color: #0073e6;
	color: white;
	font-weight: 600;
}

@media print {
	th {
		background-color: #f5f5f5 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* ensure your table borders survive the print reset */
	table,
	th,
	td {
		border: 1px solid #ccc !important;
	}

	/* remove any unwanted page headers/footers */
	@page {
		margin: 10mm;
	}
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	font-size: 12px;
}

table th,
table td {
	border: 1px solid #ccc;
	padding: 6px 8px;
}

table th {
	background: #f5f5f5;
	text-align: left;
}

/* at the very bottom of your custom CSS */
#jobsTable tbody tr.selected {
	background-color: beige;
}