/*
 * DT2-TARGETED REWRITE - NOT CURRENTLY LOADED ANYWHERE.
 *
 * Prepared ahead of the DataTables 1.11.5 -> 2.x upgrade (see VENDORING.md, "DataTables 3.x
 * readiness" section). This file is not referenced by inapp_includes.php or any template - it has
 * zero effect on the live site today. When the actual package bump happens, this replaces (or gets
 * merged into) demo_table_custom.css.
 *
 * Rewritten against class names confirmed by downloading and grepping the actual DataTables 3.0.1
 * CSS/JS bundles (2026-08-14) - not assumed from memory. DataTables 2.x uses the same dt- prefixed
 * classes (the rename happened in the 2.0 upgrade, 3.x didn't change it further), so this also
 * applies unchanged to the DT2.x target this project is actually aiming for.
 *
 * Deliberately NOT carried forward from the original file - confirmed unused anywhere in
 * templates/ or src/, just leftover demo boilerplate from the original Allan Jardine stylesheet:
 *   - .ex_highlight / .ex_highlight_row (unused "row highlighting example" demo block)
 *   - table.KeyTable / td.focus (KeyTable extension was never vendored/pinned in this project)
 *   - div.box (generic demo boilerplate, unrelated to DataTables)
 *   - .paging_full_numbers (this app only ever uses pagingType: "simple", never "full_numbers")
 *
 * Deliberately deferred, NOT guessed at - see VENDORING.md for the full reasoning:
 *   - Sort-arrow images (sort_asc_pretty.png etc.) - DT3 moved the sort indicator to a nested
 *     .dt-column-order span with ::before/::after pseudo-elements instead of a background-image
 *     on the th itself. This file leaves DT's own default arrows in place rather than porting our
 *     custom PNGs onto a mechanism that hasn't been visually verified yet.
 *   - td.sorting_1 / .sorting_2 / .sorting_3 (currently-sorted-column cell highlighting, and all
 *     24 grade-combination variants of it) - confirmed DT3 has no CSS-only equivalent for this at
 *     all. Needs new JS (an order.dt listener adding a class to the sorted column's cells) before
 *     there's anything for CSS to target. Not included here.
 */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables features
 */

.dt-container {
	position: relative;
	clear: both;
	zoom: 1; /* Feeling sorry for IE */
}

.dt-processing {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 30px;
	margin-left: -125px;
	margin-top: -15px;
	padding: 14px 0 2px 0;
	border: 1px solid #ddd;
	text-align: center;
	color: #999;
	font-size: 14px;
	background-color: white;
}

.dt-length {
	width: 40%;
	float: left;
}

.dt-search {
	width: 50%;
	float: right;
	text-align: right;
	color: #888888;
	font-style: italic;
}

.dt-info {
	width: 60%;
	float: left;
}

.dt-paging {
	float: right;
	text-align: right;
}

/* Pagination nested - confirmed live: DT3 renders paging controls as real <button> elements
   (accessibility change), not <a> tags with a "paginate_button" class. Unlike <a>, <button> carries
   native browser chrome (border/background/box-shadow) by default, which nothing here used to need
   to reset - without stripping it, DT3's buttons show a bezeled/shadowed look on top of (instead
   of replacing) our custom icon backgrounds below. */
.dt-paging-button {
	height: 19px;
	float: left;
	cursor: pointer;
	color: #111 !important;
	/* reset native <button> chrome */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	background-color: transparent;
	box-shadow: none;
	outline: none;
	font: inherit;
}
.dt-paging-button:hover {
	text-decoration: none !important;
}

.dt-paging-button.disabled:active {
	outline: none;
}

.dt-paging-button.disabled.previous,
.dt-paging-button.disabled.next {
	color: #666 !important;
}
.dt-paging-button.disabled.previous, .dt-paging-button.previous {
	padding-left: 23px;
}
.dt-paging-button.disabled.next, .dt-paging-button.next {
	padding-right: 23px;
	margin-left: 10px;
}

.dt-paging-button.disabled.previous {
	background: url('images/back_disabled.png') no-repeat top left;
}

.dt-paging-button.previous {
	background: url('images/back_enabled.png') no-repeat top left;
}
.dt-paging-button.previous :hover {
	background: url('images/back_enabled_hover.png') no-repeat top left;
}

.dt-paging-button.disabled.next {
	background: url('images/forward_disabled.png') no-repeat top right;
}

.dt-paging-button.next {
	background: url('images/forward_enabled.png') no-repeat top right;
}
.dt-paging-button.next:hover {
	background: url('images/forward_enabled_hover.png') no-repeat top right;
}



/*
* Added by Julian
*/

table.display tbody tr.bold_dashed_borders td {
	border: 1px dashed #666666;
	font-weight: bold;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables display
 */
table.dataTable {
	width: 100%;
}

table.display {
	clear: both;
}

table.display thead th {
	padding: 2px 5px 2px 5px;
	border-left: 1px solid white;
	border-top: 1px solid white;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
	background-color: #66a9bd;
}

/* Same FixedColumns opaque-background issue as the tbody td rule below, but for header cells:
   FixedColumns 6 paints its own background (default white) on fixed/sticky header cells. A
   class-based selector matching those cells turned out unreliable - scrollX/scrollY tables render
   the visible header as a cloned inner <table> (built by DataTables itself, not FixedColumns) that
   doesn't necessarily carry table.display's own classes, which is why the header briefly showed
   correctly while loading (before that clone/FixedColumns' post-draw pass replaced it) then flipped
   to white. FixedColumns exposes this specific background as a CSS custom property instead
   (--dtfc-thead-cell_background, see fixedColumns.dataTables.min.css), which every cell reads via
   var() regardless of which DOM structure it ends up in - overriding it at :root is the mechanism
   FixedColumns itself provides for this, so it isn't fighting a moving DOM target.
   !important needed here too: fixedColumns.dataTables.min.css loads AFTER this file and
   redeclares the same variable at :root (defaulting it to white), so at equal specificity its
   later declaration would otherwise win on source order alone. */
:root {
	--dtfc-thead-cell_background: #66a9bd !important;

	/* Select's own CSS (select.dataTables.min.css, which we do load) references these two
	   variables for its .selected row-highlight styling, but never defines them itself - they're
	   only ever defined in DataTables' own core stylesheet (dataTables.dataTables.css), which we
	   don't load. Without a definition, rgb(var(--dt_background-selected)) resolves to nothing and
	   selected rows show no highlight at all. Using DT3's own default blue rather than inventing a
	   new color. */
	--dt_background-selected: 13, 110, 253;
	--dt_color-selected: 255, 255, 255;
}

table.display tbody th {
	text-align: left;
	background: #91c5d4;
}

table.display tbody td {
	text-align: center;
	border-top: 1px solid white;
	border-left: 1px solid white;
}

/* Row striping - DT2+ no longer adds odd/even classes to rows at all (confirmed via the DT3 JS
   bundle: no code path sets them, striping is nth-child only, with no backward-compat class).
   Rewritten to match. */
table.display tbody tr:nth-child(even) {
	background: #d5eaf0;
}

table.display tbody tr:nth-child(odd) {
	background: #bcd9e1;
}

/* DataTables FixedColumns paints an opaque background directly on every td (needed so its
   cloned/sticky columns aren't see-through while scrolling), which otherwise hides the tr-level
   striping colors above - td backgrounds paint over/hide the parent tr's background regardless
   of CSS load order, so these need to be repeated at the td level too */
table.display tbody tr:nth-child(even) td {
	background: #d5eaf0;
}

table.display tbody tr:nth-child(odd) td {
	background: #bcd9e1;
}

/* Select's row-selection highlight, done properly this time. The --dt_background-selected fix
   earlier in this file targeted the wrong CSS: select.dataTables.min.css's own .selected rule is
   actually `table.dataTable>tbody>tr>.selected` (class expected on a CHILD of tr, i.e. a td) -
   real DOM confirmed the Select extension puts the `selected` class on the <tr> itself instead,
   which that selector never matches at all. The real "whole row selected" mechanism only exists in
   DataTables' own core CSS (which we don't load): `tr.selected > *` with an inset box-shadow,
   rather than background-color - deliberately, since a box-shadow draws on top of a cell's
   existing background instead of competing with it on specificity, so it isn't vulnerable to the
   same td-painted-over-tr-background issue as the striping rules above (or as the previous,
   background-color-based attempt at this exact fix). Scoped to table.dataTable (which DataTables
   itself adds to every table) rather than table.display, since not every table in the app uses the
   "display" class (e.g. LockupTables/view.php uses "table_normal"). Color matches the actual old
   Select 1.3.4 default (checked directly - not assumed): #b0bed9, a soft blue-gray, solid (not
   semi-transparent like DT3's own default blue), not the brighter rgb(13,110,253) tried first. */
table.dataTable tbody tr.selected > * {
	box-shadow: inset 0 0 0 9999px #b0bed9 !important;
	color: inherit !important;
}

table.display tbody td.left {
	text-align: left;
}

table.display tfoot th {
	padding: 2px 5px 2px 5px;
	border-left: 1px solid white;
	border-top: 1px solid white;
	font-weight: bold;

	background: #b0cc7f;
	text-align: left;
}

table.display tfoot td {
	background: #d7e1c5;
	text-align: center;
	font-weight: bold;
	border-left: 1px solid white;
	border-top: 1px solid white;
}

/* FixedColumns paints its fixed/sticky prefix cells in the footer using the SAME CSS variable as
   the header (--dtfc-thead-cell_background - confirmed in fixedColumns.dataTables.min.css: thead
   and tfoot share one selector group), so overriding that variable to the header's blue for the
   thead fix above also (unintentionally) painted the footer's fixed th cells blue instead of the
   intended green. Override the footer's fixed cells back explicitly - matches tfoot td's lighter
   green rather than tfoot th's darker one, since prefix and data footer cells should read as one
   uniform row rather than two different shades. */
table.display tfoot tr > .dtfc-fixed-start,
table.display tfoot tr > .dtfc-fixed-end {
	background-color: #d7e1c5 !important;
}

table.display tr.heading2 td {
	border-bottom: 1px solid #aaa;
}

table.display td {
	padding: 2px 5px 2px 5px;
}

table.display td.center {
	text-align: center;
}

/*
	Added by JW for highlighting/selecting on webmarks/rss tables
*/
table.display .highlighted td {	background-color: #ECFFB3 !important; }
table.display .row_selected td {background-color:#9999FF !important;}
table.display .row_bolded td {font-weight: bold !important;}

td.details-control {
    background: url('images/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('images/details_close.png') no-repeat center center;
}

th:active {
	outline: none;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables row classes
 *
 * gradeA/gradeC/gradeX/gradeU are OUR classes (added by createdRow/rowCallback in application
 * code), unaffected by the DT2 rename - only the odd/even half of each pairing needed rewriting
 * to :nth-child().
 */
table.display tbody tr:nth-child(odd).gradeA {
	background-color: #ddffdd;
}

table.display tbody tr:nth-child(even).gradeA {
	background-color: #eeffee;
}

table.display tbody tr:nth-child(odd).gradeA td {
	background-color: #ddffdd;
}

table.display tbody tr:nth-child(even).gradeA td {
	background-color: #eeffee;
}

table.display tbody tr:nth-child(odd).gradeC {
	background-color: #ddddff;
}

table.display tbody tr:nth-child(even).gradeC {
	background-color: #eeeeff;
}

table.display tbody tr:nth-child(odd).gradeC td {
	background-color: #ddddff;
}

table.display tbody tr:nth-child(even).gradeC td {
	background-color: #eeeeff;
}

table.display tbody tr:nth-child(odd).gradeX {
	background-color: #ffdddd;
}

table.display tbody tr:nth-child(even).gradeX {
	background-color: #ffeeee;
}

table.display tbody tr:nth-child(odd).gradeX td {
	background-color: #ffdddd;
}

table.display tbody tr:nth-child(even).gradeX td {
	background-color: #ffeeee;
}

table.display tbody tr:nth-child(odd).gradeU {
	background-color: #ddd;
}

table.display tbody tr:nth-child(even).gradeU {
	background-color: #eee;
}

table.display tbody tr:nth-child(odd).gradeU td {
	background-color: #ddd;
}

table.display tbody tr:nth-child(even).gradeU td {
	background-color: #eee;
}

table.display tr th.gradeU {
	background-color: #eee;
}

table.display tbody tr:nth-child(even).row_selected td {
	background-color: #B0BED9;
}

table.display tbody tr:nth-child(odd).row_selected td {
	background-color: #9FAFD1;
}

table.display tr.gradeA {
	background-color: #eeffee;
}

table.display tr.gradeC {
	background-color: #ddddff;
}

table.display tr.gradeX {
	background-color: #ffdddd;
}

table.display tr.gradeU {
	background-color: #ddd;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Misc
 */
.dt-scroll {
	clear: both;
	/* Ported from the real dataTables.dataTables.css (which we don't load) - without this,
	   scrollX/scrollY tables have nothing constraining the wrapper to the container's width, so it
	   grows to fit the full unscrolled table content instead of scrolling horizontally. */
	width: 100%;
}

/* Buttons 4's own default CSS switched div.dt-buttons to display:flex with
   justify-content:center (was left-aligned via float in the Buttons 2.x we had before) - restore
   the left alignment our layouts (Add/Edit/Remove, column visibility, etc.) were built around.
   !important needed since buttons.dataTables.min.css loads AFTER this file in inapp_includes.php,
   so at equal specificity its rule would otherwise win purely on source order. */
div.dt-buttons {
	justify-content: flex-start !important;
}

.dt-scroll-body {
	-webkit-overflow-scrolling: touch;
}

/* DT3 renders scrollX/scrollY tables as two separate <table>s (one header-only table in
   .dt-scroll-head, one body table in .dt-scroll-body that also carries its own thead/tfoot for
   column-width sizing purposes) and relies on its own stylesheet to visually collapse that second
   thead/tfoot to zero height - we don't load DataTables' own CSS package, so without these rules
   the scroll-body's thead renders as a second, fully visible header row. Ported verbatim from the
   real dataTables.dataTables.css (DT3.0.1) since this isn't cosmetic, it's required layout behavior. */
div.dt-scroll-body thead tr,
div.dt-scroll-body tfoot tr {
	height: 0;
}

div.dt-scroll-body thead tr th, div.dt-scroll-body thead tr td,
div.dt-scroll-body tfoot tr th,
div.dt-scroll-body tfoot tr td {
	height: 0 !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	border-top-width: 0px !important;
	border-bottom-width: 0px !important;
}

div.dt-scroll-body thead tr th div.dt-scroll-sizing, div.dt-scroll-body thead tr td div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr td div.dt-scroll-sizing {
	height: 0 !important;
	overflow: hidden !important;
}

.top .dt-info {
	float: none;
}

.clear {
	clear: both;
}

.dt-empty {
	text-align: center;
}

tfoot input {
	width: 80%;
	color: #444;
}

tfoot input.search_init {
	color: #999;
}

td.group {
	background-color: #d1cfd0;
	border-bottom: 2px solid #A19B9E;
	border-top: 2px solid #A19B9E;
}

td.details {
	background-color: #d1cfd0;
	border: 2px solid #A19B9E;
}

/* Row striping above (table.display tbody tr:nth-child(even/odd) td) is purely positional, unlike
   the old tr.even/tr.odd class-based version - DataTables never applied .even/.odd to rows we
   insert manually via raw DOM (e.g. Yfs/index.php's yf_group_link header rows, which use td.group),
   since those rows sit outside DataTables' own row tracking. The class-based version simply never
   matched those rows; the positional one does, painting over td.group/td.details' gray background
   with the stripe color. Restore it with higher specificity. */
table.display tbody tr td.group {
	background-color: #d1cfd0 !important;
}

table.display tbody tr td.details {
	background-color: #d1cfd0 !important;
}

.example_alt_pagination div.dt-info {
	width: 40%;
}