/* ===== Server-side pager used by the public directory tables
   (einstituteView / eproductView / laboratories)

   The markup comes from Home::directoryPager(), which names the list items
   .pager-list, .pager-num, .pager-step and marks the current page
   .is-current. CodeIgniter itself ships no default tag wrappers here, so those
   class names are set by the controller config on purpose.

   The bar is meant to read as one more row at the foot of the table rather
   than as a separate control panel, so it copies the table's own metrics
   (padding, font-size, line-height, text colour) and the colour of a striped
   row. It carries no border and no rounded corners. The only thing separating
   it from the rows above is a soft shadow, because it is sticky and the rows
   scroll underneath it, so it needs a solid fill to stay readable. */

#dataTables-example {
	/* The pager is styled as this table's last row, so the table must not
	   leave Bootstrap's 1rem bottom margin in between them. */
	margin-bottom: 0;
}

.pager-bar {
	position: sticky;
	bottom: 0;
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0;
	/* Same box as #dataTables-example td, so the text lines up with the
	   first and last columns of the table. */
	padding: 7px 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--c-blue-1, #212529);
	/* Opaque, like a striped row: rows scroll underneath a sticky bar. */
	background: var(--c-surface-raised, #f8f9fa);
	box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
}

.pager-summary {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.pager-summary strong {
	color: inherit;
	font-weight: 600;
}

.pager-links .pager-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pager-links .pager-list > li {
	display: block;
	margin: 0;
}

/* Plain text links, the way links read inside a table cell: no border, no
   fill, no fixed-height button until they are hovered or focused. */
.pager-links .pager-list a,
.pager-links .pager-list strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	padding: 4px 9px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.pager-links .pager-list a:hover,
.pager-links .pager-list a:focus {
	/* The row hover colour, so hovering a page feels like hovering a row. */
	background: var(--c-blue-16, #e9ecef);
	color: var(--c-blue-1, #212529);
}

.pager-links .pager-list a:focus-visible {
	outline: 2px solid var(--c-primary-300, #f7941d);
	outline-offset: 1px;
}

.pager-links .pager-num.is-current strong {
	background: var(--primary-orange-soft, #fff4e5);
	color: #b86900;
	font-weight: 700;
	cursor: default;
}

.pager-links .pager-step a {
	font-weight: 600;
}

@media (max-width: 575.98px) {
	.pager-bar {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 7px 8px;
		text-align: center;
	}

	.pager-links {
		display: flex;
		justify-content: center;
	}

	.pager-links .pager-list {
		justify-content: center;
	}

	.pager-links .pager-list a,
	.pager-links .pager-list strong {
		min-width: 30px;
		padding: 3px 6px;
		font-size: 12.5px;
	}
}