/* ---------------------------------------------------------------------------------------------
   Table load-phase skeletons (2026-10-15), driven by ui/js/dt_skeleton.js. The shapes, colours
   and the shimmer are the shared .skel-dot / .skel-bar / .skel-row rules and --skel-* tokens in
   ui/css/device_status.css (loaded earlier by layout_new.php); this file only lays them out as
   table rows and as the placeholder card. Everything is scoped to .dtskel-* / .skel-table so the
   /ViewCustomer Devices skeleton (tr.skel-tr without .dtskel-tr) keeps its page-local styling.
   --------------------------------------------------------------------------------------------- */

/* Skeleton rows inside a real table inherit that table's padding and borders. The first cell's
   dot+bar is one text line tall (not the 32px /ViewCustomer Nickname cell), so a skeleton row is
   as tall as a plain text row; pages with taller rows pass rowHeight. */
tr.dtskel-tr > td {
	vertical-align: middle;
	text-align: left;
}
tr.dtskel-tr .skel-row {
	height: 1.5em;
}

/* Placeholder card for a container that is waiting for a table fragment. */
.dtskel-block {
	display: block;
	width: 100%;
	text-align: left;
}

/* The fragments' own action-button row (.mb-4 + .btn-sm). */
.dtskel-actions {
	margin-bottom: 1.5rem;
}
.dtskel-actions .skel-bar {
	display: block;
	width: 120px;
	max-width: none;
	height: 31px;
	border-radius: 0.25rem;
}

/* DataTables' length menu (left) and search box (right). */
.dtskel-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 38px;
	margin-bottom: 10px;
}
.dtskel-controls .skel-bar {
	height: 31px;
	max-width: none;
	border-radius: 0.375rem;
}
.dtskel-controls .skel-bar:first-child {
	width: 150px;
}
.dtskel-controls .skel-bar:last-child {
	width: 240px;
	max-width: 45%;
}

/* Same frame as table.device-table (assets/css/style.css). */
table.skel-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px #ccc;
}
table.skel-table th,
table.skel-table td {
	padding: 8px 10px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #e9ecef;
}
table.skel-table thead th {
	height: 42px;
	padding: 10px;
	background: #f4f6f8;
	border-bottom: 1px solid #ccc;
}
table.skel-table tbody tr:last-child td {
	border-bottom: 0;
}
table.skel-table .skel-row {
	height: 1.5em;
}

/* Dark header row, like .device-table-header-row; the bars dim so they do not glare. */
table.skel-table-dark thead th {
	background-color: rgba(var(--bs-dark-rgb));
	border-bottom: 0;
}
table.skel-table-dark thead .skel-bar {
	background-color: rgba(255, 255, 255, 0.22);
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 62%);
}

/* dtSkeleton.fail(): the request failed while the skeleton was still up. */
.dtskel-fail {
	padding: 16px 10px;
	color: #6c757d;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.dtskel-block .skel-bar,
	.dtskel-block .skel-dot,
	tr.dtskel-tr .skel-bar,
	tr.dtskel-tr .skel-dot,
	.dtskel-loading {
		animation: none;
	}
}