/*
 * Restyles DataTables' pagination controls (every .vt-datatable / .vt-datatable-formatted table,
 * both apps) to match the CEE News listing's pagination at
 * cee.vt.edu/News-Menu/CEE_Article_Cache.html - black numbered squares, an outlined current page,
 * and a solid "Next"/"Previous" pill.
 *
 * Property values below are copied verbatim from the .vt-pagination-controls-number /
 * .vt-pagination-controls-button rules already in root.new.css (same VT One design system, same
 * colors/fonts), but selectors here target DataTables' own flat .dataTables_paginate layout
 * directly instead of requiring VT's exact nested markup - kept in this separate file rather than
 * added to root.new.css so a future VT-One sync of that file can't silently drop it.
 *
 * Classes are added at runtime by the draw.dt handler in root.new.js (see the comment there for
 * why) - this file only has to style them.
 *
 * !important on color/background/border/text-decoration below: datatables.min.css's own
 * .dataTables_wrapper .dataTables_paginate .paginate_button rule ties this file's selectors on
 * class-count specificity, and in testing still won for `color` despite loading first (there's a
 * higher-specificity or @media-scoped rule somewhere in the existing stylesheets that direct
 * selector-matching didn't surface) - !important makes the override reliable regardless of where
 * that rule actually lives, which is the whole point of this file.
 */
.dataTables_paginate.vt-pagination-controls {
	border-top: 1px solid #000;
	padding-top: 0.5em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
}
.dataTables_paginate.vt-pagination-controls .vt-pagination-controls-number {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: #000 !important;
	border: 2px solid #000 !important;
	color: #fff !important;
	font-family: "gineso-condensed", sans-serif;
	font-size: 0.8em;
	margin: 0.25em;
	padding: 0.25em;
	width: 2em;
	height: 2em;
	text-decoration: none !important;
	cursor: pointer;
}
.dataTables_paginate.vt-pagination-controls .vt-pagination-controls-number:focus {
	outline-color: rgb(23, 24, 25);
	outline-offset: 3px;
	outline-style: dashed;
	outline-width: 2px;
}
.dataTables_paginate.vt-pagination-controls .vt-pagination-controls-number.current-page {
	background-color: #fff !important;
	border: 2px solid #000 !important;
	color: #000 !important;
	cursor: default;
}
.dataTables_paginate.vt-pagination-controls .vt-pagination-controls-button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: #000 !important;
	border: 2px solid #000 !important;
	color: #fff !important;
	font-family: "gineso-condensed", sans-serif;
	font-size: 0.8em;
	margin: 0.25em;
	padding: 0.25em 1em;
	height: 2em;
	text-decoration: none !important;
	cursor: pointer;
}
.dataTables_paginate.vt-pagination-controls .vt-pagination-controls-button:focus {
	outline-color: rgb(23, 24, 25);
	outline-offset: 3px;
	outline-style: dashed;
	outline-width: 2px;
}
/* DataTables adds its own "disabled" class to Previous/Next/First/Last when they're not usable
   (e.g. Previous on page 1) - style it instead of removing the button, same as DataTables'
   default look did. */
.dataTables_paginate.vt-pagination-controls .vt-pagination-controls-button.disabled {
	background-color: #000 !important;
	color: #fff !important;
	opacity: 0.4;
	cursor: default;
}
.dataTables_paginate.vt-pagination-controls .ellipsis {
	padding: 0 0.3em;
	color: #6b6b6b;
}
/* "Page X of Y | NNN Results" caption, set via the language.info option in root.new.js. */
.dataTables_wrapper .dataTables_info {
	font-family: "gineso-condensed", sans-serif;
	font-size: 0.85em;
	text-align: center;
	padding-top: 0.5em;
}