/* =========================================================
   AUTONEER ORDERS – TABLE SYSTEM
   Reusable container with controlled horizontal scroll,
   sticky header, consistent cell padding, hover state and
   empty-state presentation.
   ========================================================= */

/* The ONLY scrolling region for wide tables */
.au-table-container {
	background: var(--au-surface);
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.au-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--au-font-size);
	background: var(--au-surface);
	margin: 0;
}

.au-table th,
.au-table td {
	padding: 8px 10px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--au-border);
	color: var(--au-text);
}

/* Sticky dark-slate header */
.au-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: var(--au-slate);
	color: var(--au-text-on-dark);
	font-weight: 500;
	font-size: var(--au-font-size-sm);
	letter-spacing: 0.03em;
	white-space: nowrap;
	border-bottom: none;
}

/* Sortable headers (main.js toggles aria-sort) */
.au-table thead th,
.order-lines-table thead th {
	cursor: pointer;
	user-select: none;
}

.au-table thead th:hover {
	background-color: var(--au-slate-light);
}

/* Sort control for the modal lists, which are CSS grids rather than tables and
   so have no <th> to hang the table sorter on. main.js sets data-sort-direction. */
.au-sort {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	/* Stays inline so the label and its arrow wrap together inside narrow columns. */
	text-align: left;
	cursor: pointer;
	user-select: none;
}

.au-sort:hover,
.au-sort:focus-visible {
	color: var(--au-text);
}

.au-sort::after {
	content: "\2195";
	margin-left: 4px;
	opacity: 0.4;
}

.au-sort[data-sort-direction="asc"]::after {
	content: "\2191";
	opacity: 1;
}

.au-sort[data-sort-direction="desc"]::after {
	content: "\2193";
	opacity: 1;
}

.au-sort[data-sort-direction] {
	color: var(--au-text);
}

.au-table tbody tr:nth-child(even) {
	background-color: var(--au-bg-alt);
}

.au-table tbody tr:hover {
	background-color: var(--au-info-bg);
}

/* Rows that navigate somewhere on click */
.au-table tbody tr[data-href] {
	cursor: pointer;
}

.au-table tbody tr:last-child td {
	border-bottom: none;
}

/* Numeric columns */
.au-table .au-cell-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Action / status columns stay compact */
.au-table .au-cell-actions {
	white-space: nowrap;
	width: 1%;
}

/* Constrained editable columns (order detail) */
.au-table .au-cell-input {
	min-width: 110px;
	max-width: 160px;
}

.au-table .au-cell-input .form-control,
.au-table .au-cell-input .form-select {
	font-size: var(--au-font-size);
	padding: 4px 6px;
	min-height: 32px;
}

/* Keep room for the dropdown chevron on compact selects */
.au-table .au-cell-input .form-select {
	padding-right: 26px;
	background-position: right 6px center;
}

/* Row link (e.g. order number opening the detail page) */
.au-table-link {
	color: var(--au-info);
	font-weight: 600;
	text-decoration: none;
}

.au-table-link:hover,
.au-table-link:focus-visible {
	text-decoration: underline;
	color: var(--au-slate);
}

/* Make the link cover the whole cell so anywhere in it is clickable */
.au-table td.au-cell-link {
	padding: 0;
}

.au-table td.au-cell-link .au-table-link {
	display: block;
	padding: 8px 10px;
}

/* Empty state inside a table container */
.au-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--au-space-2);
	padding: var(--au-space-5);
	text-align: center;
	color: var(--au-text-muted);
}

.au-empty-state i {
	font-size: 32px;
	color: var(--au-border-strong);
}

.au-empty-state__title {
	font-size: var(--au-font-size-lg);
	color: var(--au-slate);
	margin: 0;
}

/* Summary strip below a table (totals) */
.au-table-summary {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--au-space-2);
	padding: var(--au-space-3);
	background: #F8F7F3;
	border-top: 1px solid var(--au-border);
	font-weight: 600;
	color: darkslategray;
}