/* New admin layout (header_admin_new.php / footer_admin_new.php).
   Modelled on the monitoring admin in _status/admin_auth.php: a fixed rail on
   the left, a topbar, and page content that scrolls normally.
   Loaded after ss.css and admin.css, so anything here wins on equal specificity.
   All classes are prefixed an- so nothing collides with Foundation.
   Every colour is a token below; change them there, not in the rules. */

:root {
	/* page */
	--an-bg: #f4f5f7;
	--an-panel: #fff;
	--an-line: #e4e6ea;
	--an-text: #172b4d;
	--an-muted: #6b778c;
	--an-accent: #008cba;   /* the one admin blue: links, buttons, icons, highlights */

	/* rail: navy, same as the monitoring admin */
	--an-rail: #2C3E50;
	--an-rail-hover: #1f3560;
	--an-rail-on: #18a05c;
	--an-rail-sub: rgba(0,0,0,.14);
	--an-rail-line: #758093;
	--an-rail-text: #c9c9c9;
	--an-rail-bright: #fff;
	--an-rail-label: #fff;
	--an-rail-icon: #84b9dc;
	--an-rail-mark: #18a05c;
	--an-rail-scroll: #3b5078;

	/* topbar (kept light, from the first version) */
	--an-top-bg: #fff;
	--an-top-line: #e4e6ea;
	--an-top-text: #172b4d;
	--an-top-muted: #6b778c;

	/* pills (kept from the first version, not from the theme) */
	--an-alert: #c95a55;
	--an-success: #3c9d6c;
	--an-muted-pill: #3b5078;
	--an-muted-pill-text: #dfe6f2;

	--an-rail-w: 240px;
	/* the brand block and the topbar share this, so their bottom edges meet */
	--an-bar-h: 56px;
}

/* admin.css locks body to overflow:hidden for the old absolute-positioned
   scroll panes. The new shell scrolls the document normally. */
html.an-html, body.an-body {
	height: auto;
	overflow: visible;
	background: var(--an-bg);
}

.an-shell {
	display: flex;
	align-items: stretch;
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- card tables ----------
   ss.css gives .card a 5px radius and a shadow ring, but only table.hover
   also sets overflow:hidden, which is what clips the header to the rounded
   corners and keeps the frame soft. Without it a card table renders square-
   cornered with a heavier grey edge. Apply the clip to every card table so
   pages that skip .hover (DataTables lists and the like) match the dashboard. */
table.card {
	overflow: hidden;
}
/* DataTables with scrollY (e.g. /admin/stackup/) split the table into a
   cloned header table and a body table inside .dataTables_scroll. Styling
   each half as a card gives two stacked rounded boxes with a seam, so the
   card look (from .card / table.card in ss.css) moves to the wrapper and
   the two inner tables are flattened. Every inner table, not just .card:
   /admin/stackup/ uses "datatablec expand no-margin" with no .card, and
   Foundation's 1px #ddd table border on each half then stacks with the
   wrapper border into a heavy seam under the header. */
.dataTables_scroll {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
	overflow: hidden;
	margin-bottom: 25px;
}
.dataTables_scroll table,
.dataTables_scroll table.card {
	overflow: visible;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
}
/* The body half keeps a 1px-high hidden copy of the header row for column
   sizing; ss.css's dotted row border would draw a second line under the
   real header. */
.dataTables_scrollBody thead tr,
.dataTables_scrollBody thead th {
	border: 0;
}

/* ---------- DataTables header ----------
   Colour the header cells but keep the sort arrows. The arrows are a
   background-image on .sorting/.sorting_asc/.sorting_desc (from ss.css), so
   only background-color is set on the cells; the `background:` shorthand
   would reset the image to none. The image rules are repeated here with
   !important so nothing loaded earlier can drop them. */
table.dataTable thead tr th, table thead tr th, table tbody tr th {
	/* same as Foundation's `table thead { background:#f5f5f5 }`, so a DataTable
	   header matches a plain <table class="card"> header */
	background-color: #efefef !important;
	    font-weight: 100;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #000;
    letter-spacing: 0.5px;
    padding: 10px;
    text-align: left;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
	background-repeat: no-repeat !important;
	background-position: center right !important;
	/* room for the 19px icon; the padding:10px on every th above otherwise
	   puts it on top of short labels (REF., REG, YEARS on /admin/stackup/) */
	padding-right: 26px;
}
table.dataTable thead .sorting              { background-image: url(../_img/sort_both.png) !important; }
table.dataTable thead .sorting_asc          { background-image: url(../_img/sort_asc.png) !important; }
table.dataTable thead .sorting_desc         { background-image: url(../_img/sort_desc.png) !important; }
table.dataTable thead .sorting_asc_disabled { background-image: url(../_img/sort_asc_disabled.png) !important; }
table.dataTable thead .sorting_desc_disabled{ background-image: url(../_img/sort_desc_disabled.png) !important; }

/* DataTables inside a .card should look like a plain <table class="card">
   (e.g. the dashboard Orders table). datatables.3.min.css adds a #111 line
   under the header and along the bottom (.no-footer), 18px header padding and
   border-spacing:0, which together read as a heavier, darker frame. Reset
   those to the Foundation table defaults; the right header padding stays wide
   so the sort arrow does not sit on the label. (Tables are border-collapse:
   collapse via normalize, so border-spacing needs no reset.) */
table.dataTable.card thead th,
table.dataTable.card thead td {
	padding: 0.5625rem 18px 0.5625rem 0.625rem;
	border-bottom: 0;
}
table.dataTable.card tbody th,
table.dataTable.card tbody td {
	padding: 0.5625rem 0.625rem;
}
table.dataTable.card.no-footer {
	border-bottom: 1px solid #ddd;
}

table tr.even, table tr.alt, table tr:nth-of-type(even) {
    background: #fafafa;
}
/* Row hover: one flat tint plus Gmail's row-lift shadow. table.hover's
   diagonal-stripe gradient from ss.css is dropped so it does not sit on top.
   position/z-index lift the row above the next one; without them the row
   below paints over the shadow. */
table tbody tr:hover,
table.hover tbody tr:hover {
	background-color: #f2f9fc;
	background-image: none;
	box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .07), 0 1px 3px 1px rgba(60, 64, 67, .1);
	position: relative;
	z-index: 1;
}

/* ---------- rail ---------- */

.an-side {
	flex: 0 0 var(--an-rail-w);
	width: var(--an-rail-w);
	background: var(--an-rail);
	color: var(--an-rail-text);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: 100vh;
	z-index: 50;
}

.an-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: var(--an-bar-h);
	padding: 0 12px;
	color: var(--an-rail-bright);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	border-bottom: 1px solid var(--an-rail-line);
	text-decoration: none;
}
.an-brand-link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--an-rail-bright);
	text-decoration: none;
	min-width: 0;
}
.an-brand-link:hover, .an-brand-link:focus {
	color: #fff;
}
.an-brand img {
	width: 32px;
	height: 32px;
	border-radius: 4px;
	display: block;
}
.an-brand small {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--an-rail-label);
}

.an-menu-btn {
	display: none;
	margin-left: auto;
	background: none;
	border: 0;
	color: var(--an-rail-bright);
	font-size: 18px;
	padding: 6px 8px;
	cursor: pointer;
}

.an-nav {
	flex: 1;
	overflow-y: auto;
	padding: 6px 0 14px;
	scrollbar-width: thin;
	scrollbar-color: var(--an-rail-scroll) transparent;
}
.an-nav::-webkit-scrollbar { width: 8px; }
.an-nav::-webkit-scrollbar-thumb { background: var(--an-rail-scroll); border-radius: 4px; }

.an-nav ul, .an-nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.an-group {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--an-rail-label);
	padding: 14px 10px 5px 12px;
	font-weight: 600;
}

.an-link {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px 7px 7px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--an-rail-text);
	text-decoration: none;
	border-left: 3px solid transparent;
	cursor: pointer;
}
.an-link:hover, .an-link:focus {
	background: var(--an-rail-hover);
	color: var(--an-rail-bright);
}
.an-link .fa-solid, .an-link .fa-regular, .an-link .fa-brands, .an-link .fa-thin, .an-link .fa-light {
	width: 16px;
	text-align: center;
	flex: 0 0 16px;
	color: var(--an-rail-icon);
}
.an-link:hover .fa-solid, .an-link:hover .fa-regular, .an-link:hover .fa-brands,
.an-link.on .fa-solid, .an-link.on .fa-regular, .an-link.on .fa-brands {
	color: var(--an-rail-bright);
}
.an-link .an-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The left edge marks the current page; a background change alone is too
   quiet against this grey. */
.an-link.on {
	background: var(--an-rail-on);
	color: var(--an-rail-bright);
	font-weight: 600;
	border-left-color: var(--an-rail-mark);
}

/* Parent of the current page stays lit while the sub list is closed, so the
   rail still says where you are. */
.an-item.has-sub.on:not(.open) > .an-link {
	color: var(--an-rail-bright);
	border-left-color: var(--an-rail-mark);
}

.an-caret {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	color: var(--an-rail-icon);
	font-size: 11px;
	transition: transform .15s ease;
}
.an-caret:hover {
	background: rgba(255,255,255,.08);
	color: var(--an-rail-bright);
}
.an-item.open > .an-link .an-caret {
	transform: rotate(90deg);
}

.an-sub {
	display: none;
	background: var(--an-rail-sub);
	padding: 3px 0 5px;
}
.an-item.open > .an-sub {
	display: block;
}
.an-sub .an-link {
	padding: 5px 10px 5px 43px;
	font-size: 13px;
}
.an-sub .an-link.on {
	background: var(--an-rail-on);
}

/* Count pills. Solid on the rail; the light Foundation labels vanish. */
.an-badge {
	display: inline-block;
	min-width: 18px;
	padding: 1px 6px;
	border-radius: 9px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	color: #fff;
	background: var(--an-alert);
	margin-left: 4px;
}
.an-badge.success {
	background: var(--an-success);
}
.an-badge.muted {
	background: var(--an-muted-pill);
	color: var(--an-muted-pill-text);
}
.an-item.open > .an-link .an-sum {
	display: none;
}

.an-foot {
	border-top: 1px solid var(--an-rail-line);
	padding: 8px 0;
}
.an-foot .an-link {
	font-size: 12.5px;
	color: var(--an-rail-label);
	padding-top: 6px;
	padding-bottom: 6px;
}

/* ---------- main ---------- */

.an-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.an-topbar {
	background: var(--an-top-bg);
	border-bottom: 1px solid var(--an-top-line);
	box-sizing: border-box;
	min-height: var(--an-bar-h);
	padding: 6px 24px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	position: sticky;
	top: 0;
	z-index: 40;
}
.an-topbar h1 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--an-top-text);
	line-height: 1.3;
	font-family: inherit;
}
.an-topbar .an-date {
	font-size: 12.5px;
	color: var(--an-top-muted);
}
.an-topbar .an-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.an-btn {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 11px;
	border-radius: 4px;
	background: var(--an-accent);
	color: #fff;
	text-decoration: none;
	line-height: 1.2;
}
.an-btn:hover, .an-btn:focus {
	color: #fff;
	background: #007095;
}
.an-btn.sub {
	background: #ebecf0;
	color: var(--an-text);
}
.an-btn.sub:hover, .an-btn.sub:focus {
	background: #dfe1e6;
	color: var(--an-text);
}

.an-wrap {
	flex: 1;
	padding: 0px 24px 48px;
}

/* Existing admin pages open with .row.expand; make sure the Foundation row
   does not cap itself at 1000px inside the new shell. */
.an-wrap > .row {
	max-width: none;
}

/* Columns carry a 15px gutter on both sides. Drop it on the outer edges so
   the first column starts flush with the page and the last ends flush.
   Nested rows are left alone: Foundation gives .row .row a matching negative
   margin, so their columns already line up with the parent's content. */
.an-wrap .row:not(.row .row) > .columns:first-child,
.an-wrap .row:not(.row .row) > .column:first-child {
	padding-left: 0;
}
.an-wrap .row:not(.row .row) > .columns:last-child,
.an-wrap .row:not(.row .row) > .column:last-child {
	padding-right: 0;
}

/* Soft blue focus ring on text boxes, in place of Foundation's grey one */
.an-wrap input[type="text"]:focus,
.an-wrap input[type="search"]:focus,
.an-wrap input[type="email"]:focus,
.an-wrap input[type="password"]:focus,
.an-wrap input[type="number"]:focus,
.an-wrap input[type="tel"]:focus,
.an-wrap input[type="url"]:focus,
.an-wrap input[type="date"]:focus,
.an-wrap textarea:focus,
.an-wrap select:focus {
	outline: 0;
	background: #fff;
	border-color: #86b7fe;
	box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

h2 {
	margin-top:10px;
}

/* ---------- search pages ----------
   Shared by the knowledge base (admin/kb/) and the school search
   (admin/go/search/). Edit here, not on the page. */

.an-search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 980px;
	margin: 0 0 14px;
	padding: 0 6px 0 14px;
	background: var(--an-panel);
	border: 1px solid var(--an-line);
	border-radius: 6px;
	box-sizing: border-box;
}
.an-search:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); }
.an-search > i { color: var(--an-muted); font-size: 15px; }
.an-search input[type=search] {
	flex: 1;
	min-width: 0;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 15px;
	font-family: inherit;
	color: var(--an-text);
	-webkit-appearance: none;
	appearance: none;
}
.an-search input[type=search]:focus { outline: 0; background: none; border: 0; box-shadow: none; }
.an-search .an-btn { flex: 0 0 auto; border: 0; cursor: pointer; font-family: inherit; margin: 0; }

/* DataTables search box (.datatable_s): functions.js rebuilds the generated
   filter into an .an-search bar with a .dt-search-clear X. These are only the
   extras on top of .an-search above. */
.dataTables_filter { width: 100%; max-width: 480px; float: none; margin: 0 0 12px; text-align: left; }
.dataTables_filter .an-search { max-width: none; margin: 0; padding-right: 8px; }
/* ss.css forces inline-block + a left margin on the filter input; undo it here */
div.dataTables_wrapper div.dataTables_filter .an-search input[type=search] { display: block !important; width: auto !important; margin: 0; }
.an-search input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.an-search .dt-search-clear {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--an-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: none;
}
.an-search .dt-search-clear:hover,
.an-search .dt-search-clear:focus { outline: 0; background: var(--an-bg); color: var(--an-text); }
.an-search.has-value .dt-search-clear { display: inline-flex; }

.an-panel {
	background: var(--an-panel);
	border: 1px solid var(--an-line);
	border-radius: 6px;
	padding: 26px 36px 34px;
	max-width: 980px;
	box-sizing: border-box;
}
.an-panel h1 {
	font-size: 26px;
	font-weight: 700;
	color: var(--an-text);
	margin: 0 0 6px;
	line-height: 1.25;
	font-family: inherit;
}
.an-lead {
	color: var(--an-muted);
	font-size: 14px;
	margin: 0 0 18px;
}

.an-list { list-style: none; margin: 0 0 24px; padding: 0; }
.an-list li { padding: 9px 0; border-bottom: 1px solid var(--an-line); }
.an-list li:last-child { border-bottom: 0; }
.an-list a.t { font-weight: 600; font-size: 14.5px; color: var(--an-accent); text-decoration: none; }
.an-list a.t:hover { text-decoration: underline; }
.an-list small { display: block; color: var(--an-muted); font-size: 12.5px; margin-top: 2px; line-height: 1.45; }
.an-list mark { background: #fff3a8; padding: 0 1px; color: inherit; }

/* Small grey pill after a list title, e.g. a status or a match note */
.an-pill {
	display: inline-block;
	padding: 1px 8px;
	margin-left: 6px;
	border-radius: 9px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 16px;
	background: #ebecf0;
	color: var(--an-text);
	vertical-align: 2px;
}

/* ---------- phone / narrow ---------- */

@media (max-width: 900px) {
	.an-shell {
		display: block;
	}
	.an-side {
		width: auto;
		height: auto;
		position: sticky;
		top: 0;
		flex: none;
	}
	.an-brand {
		border-bottom: 0;
	}
	.an-menu-btn {
		display: block;
	}
	.an-nav, .an-foot {
		display: none;
	}
	.an-side.an-nav-open .an-nav,
	.an-side.an-nav-open .an-foot {
		display: block;
		border-top: 1px solid var(--an-rail-line);
	}
	.an-side.an-nav-open .an-nav {
		max-height: 70vh;
	}
	.an-topbar {
		position: static;
		padding: 6px 16px;
	}
	.an-topbar h1 {
		font-size: 16px;
	}
	.an-wrap {
		padding: 14px 16px 40px;
	}
	.an-panel {
		padding: 18px 16px;
	}
}

@media print {
	.an-side, .an-topbar {
		display: none;
	}
	.an-wrap {
		padding: 0;
	}
	.an-search {
		display: none;
	}
	.an-panel {
		border: 0;
		padding: 0;
		max-width: none;
	}
}