/* =====================================================================
   Site.css — GLOBAL design-system layer for the AUTHENTICATED admin app.

   Loaded LAST by Views/Shared/LayoutTransparent.cshtml (after the vendor
   "Color Admin" theme, DataTables, select2, dropzone), so equal-specificity
   rules here win the cascade. This file owns:
     1. The --pa-* design tokens (palette shared with enroll.css + dashboard)
     2. Token-driven skins for the shared component vocabulary
        (.panel / .btn / .table / .form-control / .badge / .label / DataTables)
     3. Chrome: #header navbar, sidebar, dropdowns, page loader, scrollbars

   TOKEN PREFIX: --pa-* — deliberately prefixed so nothing collides with
   enroll.css's :root --accent tokens (public flow) or the dashboard's
   .dash-scoped tokens. Same canonical values, different namespace.

   Conventions: tab indentation; calm/enterprise (1px --pa-line borders,
   8-12px radii, subtle slate-tinted shadows); NO Bootstrap .modal styling
   (dialogs are SweetAlert2).
   ===================================================================== */

:root {
	/* Brand accent */
	--pa-accent: #2563eb;
	--pa-accent-hover: #1d4ed8;
	--pa-accent-dark: #1e3a8a;
	--pa-accent-soft: #e7eefc;
	--pa-accent-softer: #f4f7fd;
	--pa-accent-line: #c6d6f7;
	--pa-accent-grad: linear-gradient(135deg, #2563eb, #1e3a8a);
	--pa-ring: rgba(37, 99, 235, 0.18);

	/* Text ramp */
	--pa-ink: #101828;
	--pa-body: #3a4454;
	--pa-muted: #5a6474;

	/* Surfaces */
	--pa-line: #e5e8ef;
	--pa-line-strong: #ccd4e0;
	--pa-surface: #ffffff;
	--pa-canvas: #f5f6f9;

	/* Semantic status */
	--pa-success: #17794f;
	--pa-success-soft: #e5f5ec;
	--pa-success-line: #c4e6d4;
	--pa-warning: #9c6408;
	--pa-warning-soft: #fcf4e2;
	--pa-warning-line: #f0dfb4;
	--pa-danger: #c23b3b;
	--pa-danger-soft: #fcecec;
	--pa-danger-line: #f3cfcf;
	--pa-info: #21688c;
	--pa-info-soft: #e8f2f8;
	--pa-info-line: #cbe1ee;

	/* Sidebar (dark navy chrome, harmonizes with --pa-ink) */
	--pa-sidebar-bg: #101828;
	--pa-sidebar-item: #9aa4b8;
	--pa-sidebar-heading: #64708a;
	--pa-sidebar-active-bg: rgba(37, 99, 235, 0.16);
	--pa-sidebar-icon-active: #93b4f8;

	/* Type */
	--pa-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--pa-fs-base: 16px;      /* canonical base (public flow) */
	--pa-fs-body: 13.5px;    /* admin density body copy (matches dashboard) */
	--pa-fs-sm: 12.5px;
	--pa-fs-xs: 11.5px;

	/* Spacing rhythm */
	--pa-s-1: 4px;
	--pa-s-2: 8px;
	--pa-s-3: 12px;
	--pa-s-4: 16px;
	--pa-s-5: 24px;
	--pa-s-6: 32px;

	/* Radii */
	--pa-radius-sm: 8px;
	--pa-radius: 12px;

	/* Elevation (slate-tinted) */
	--pa-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
	--pa-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 4px rgba(16, 24, 40, 0.06);
	--pa-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 8px 20px -4px rgba(16, 24, 40, 0.10);
	--pa-shadow-focus: 0 0 0 3px var(--pa-ring);
}

/* =====================================================================
   1. BASE — canvas, typography, links
   ===================================================================== */

body {
	background: var(--pa-canvas);
	color: var(--pa-body);
	font-family: var(--pa-font);
	font-size: var(--pa-fs-body);
	line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--pa-ink);
}

a {
	color: var(--pa-accent);
}

a:hover,
a:focus {
	color: var(--pa-accent-hover);
}

.text-muted {
	color: var(--pa-muted) !important;
}

/* Native controls pick up the accent (checkboxes, radios, progress). */
input[type="checkbox"],
input[type="radio"],
progress {
	accent-color: var(--pa-accent);
}

/* Page title + breadcrumb row rendered above panels on most views. */
.page-header {
	color: var(--pa-ink);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
}

.page-header small {
	color: var(--pa-muted);
	font-weight: 400;
}

.breadcrumb > li,
.breadcrumb > li a,
.breadcrumb-item,
.breadcrumb-item a {
	color: var(--pa-muted);
	font-size: var(--pa-fs-sm);
}

.breadcrumb > li a:hover,
.breadcrumb-item a:hover {
	color: var(--pa-accent);
}

/* Refined scrollbars — thin, slate, rounded. */
html {
	scrollbar-color: #c3cbd8 transparent;
	scrollbar-width: thin;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #c3cbd8;
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: #a9b4c6;
	border: 2px solid transparent;
	background-clip: content-box;
}

/* Page loader — canvas backdrop + accent spinner. */
#page-loader {
	background: var(--pa-canvas);
}

#page-loader .spinner {
	height: 42px;
	width: 42px;
	margin: -21px 0 0 -21px;
	border: 3px solid var(--pa-accent-soft);
	border-top: 3px solid var(--pa-accent);
}

/* pace.js safety net (accent, never the old teal). */
.pace-progress {
	background: var(--pa-accent);
}

.pace .pace-activity {
	border-top-color: var(--pa-accent);
	border-left-color: var(--pa-accent);
}

/* =====================================================================
   2. HEADER CHROME — #header top navbar
   ===================================================================== */

.header.navbar-default {
	background: var(--pa-surface);
	box-shadow: 0 1px 0 var(--pa-line), 0 1px 6px rgba(16, 24, 40, 0.04);
}

.header.navbar-default .brand,
.header.navbar-default .navbar-brand {
	color: var(--pa-ink);
	font-weight: 400;
	font-size: 17px;
	letter-spacing: -0.01em;
}

.header .navbar-brand b {
	font-weight: 700;
	color: var(--pa-accent);
}

/* Optional per-tenant school logo inside the brand lockup. */
.header .navbar-brand img.navbar-brand-logo {
	max-height: 30px;
	width: auto;
	margin-right: 10px;
	vertical-align: middle;
	border-radius: 6px;
}

/* Fallback brand mark (no school logo configured): accent gradient tile. */
.header .navbar-logo {
	background: var(--pa-accent-grad);
	border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.24);
	border-radius: 5px;
}

.header.navbar-default .navbar-toggle .icon-bar {
	background: var(--pa-ink);
}

.header.navbar-default .navbar-nav > li > a,
.header.navbar-default .navbar-nav > li .dropdown-toggle {
	color: var(--pa-body);
	font-weight: 600;
	font-size: var(--pa-fs-sm);
}

.header.navbar-default .navbar-nav > li > a:hover,
.header.navbar-default .navbar-nav > li > a:focus {
	color: var(--pa-ink);
	opacity: 1;
}

/* =====================================================================
   3. DROPDOWN MENUS (header user menu + any in-page dropdowns)
   ===================================================================== */

.dropdown-menu {
	border: 1px solid var(--pa-line);
	border-radius: 10px;
	box-shadow: var(--pa-shadow-md);
	padding: 6px;
	font-size: var(--pa-fs-body);
	color: var(--pa-body);
}

.dropdown-menu .dropdown-item,
.dropdown-menu > li > a {
	color: var(--pa-body);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 12px;
	border-radius: 6px;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background: var(--pa-accent-softer);
	color: var(--pa-ink);
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
	background: var(--pa-accent-soft);
	color: var(--pa-accent-dark);
}

.dropdown-divider {
	border-top: 1px solid var(--pa-line);
	margin: 6px 4px;
}

/* Version tag pinned at the bottom of the user dropdown. */
.pa-version-tag {
	display: block;
	padding: 4px 12px 2px;
	font-size: 11px;
	color: var(--pa-muted);
	white-space: nowrap;
}

/* =====================================================================
   4. SIDEBAR — dark navy nav, accent active states
   ===================================================================== */

.sidebar,
.sidebar-bg {
	background: var(--pa-sidebar-bg);
}

/* Top-level items: rounded rows with steady rhythm. Horizontal geometry
   (20px text inset) is preserved so the theme's sub-menu rail alignment
   (padding-left: 39px, bullets at fixed offsets) still lines up. */
.sidebar .nav > li > a {
	margin: 1px 10px;
	padding: 8px 10px;
	border-radius: var(--pa-radius-sm);
	color: var(--pa-sidebar-item);
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.sidebar .nav > li.active > a,
.sidebar .nav > li.active > a:hover,
.sidebar .nav > li.active > a:focus {
	background: var(--pa-sidebar-active-bg);
	color: #fff;
	box-shadow: inset 3px 0 0 var(--pa-accent);
}

.sidebar .nav > li.active > a i {
	color: var(--pa-sidebar-icon-active);
}

/* Expanded-but-not-active parents keep the hover treatment. */
.sidebar .nav > li.expanding > a,
.sidebar .nav > li.expand > a {
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
}

/* Section labels ("Navigation", "System"). */
.sidebar .nav > li.nav-header {
	padding: 18px 20px 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pa-sidebar-heading);
}

/* Sub-menus: mask bullets against the new bg; accent rail on active. */
.sidebar .sub-menu {
	padding: 4px 0 10px 39px;
}

.sidebar .sub-menu > li:after {
	background: var(--pa-sidebar-bg);
	border-color: #4a5872;
}

.sidebar .sub-menu > li:before,
.sidebar .sub-menu > li > a:after,
.sidebar .sub-menu > li.has-sub > a:before {
	background: rgba(255, 255, 255, 0.10);
}

.sidebar .sub-menu > li.active:after {
	border-color: var(--pa-accent);
	background: var(--pa-accent);
}

.sidebar .sub-menu > li > a {
	padding: 5px 20px 5px 15px;
	color: var(--pa-sidebar-item);
	transition: color 0.15s ease;
}

.sidebar .sub-menu > li > a:hover,
.sidebar .sub-menu > li > a:focus {
	color: #fff;
}

.sidebar .sub-menu > li.active > a,
.sidebar .sub-menu > li.active > a:hover,
.sidebar .sub-menu > li.active > a:focus {
	color: var(--pa-sidebar-icon-active);
	font-weight: 600;
}

/* Counters/badges inside the sidebar stay legible on the dark chrome. */
.sidebar .nav > li > a .badge {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* =====================================================================
   5. PANELS — the shared card/section component
   ===================================================================== */

.panel {
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-radius);
	box-shadow: var(--pa-shadow-xs);
	margin-bottom: var(--pa-s-5);
}

.panel-heading {
	padding: 13px 20px;
	background: var(--pa-surface);
	border-bottom: 1px solid var(--pa-line);
	border-top-left-radius: calc(var(--pa-radius) - 1px);
	border-top-right-radius: calc(var(--pa-radius) - 1px);
}

.panel-default > .panel-heading {
	background: var(--pa-accent-softer);
}

.panel-title {
	color: var(--pa-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 20px;
}

.panel-title i {
	margin-right: 8px;
	opacity: 0.85;
}

/* Primary-headed panel: the accent-gradient royal-blue bar every admin
   page's main card uses. (Moved here from LayoutTransparent's inline
   <style>; Site.css is linked app-root-relative so it loads at any URL
   depth.) !important beats the theme's .flat-black variant. */
.panel-inverse > .panel-heading {
	background: var(--pa-accent-grad) !important;
	border-bottom: 0;
}

.panel-inverse > .panel-heading .panel-title {
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.panel-inverse > .panel-heading .panel-title i {
	margin-right: 8px;
	opacity: 0.9;
}

.panel-body {
	padding: 20px;
	border-bottom-left-radius: calc(var(--pa-radius) - 1px);
	border-bottom-right-radius: calc(var(--pa-radius) - 1px);
}

.panel-footer {
	background: var(--pa-surface);
	border-top: 1px solid var(--pa-line);
	padding: 12px 20px;
	border-bottom-left-radius: calc(var(--pa-radius) - 1px);
	border-bottom-right-radius: calc(var(--pa-radius) - 1px);
}

.panel-heading + .table,
.panel-heading + .slimScrollDiv {
	border-top: none;
}

/* Panel-heading toolbar — secondary actions on the right edge of a
   .panel-heading. Absolute positioning survives whatever display the
   theme applies to .panel-heading (its flex kills float). */
.panel-inverse > .panel-heading,
.panel > .panel-heading {
	position: relative;
}

.panel-heading-toolbar {
	position: absolute !important;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	float: none !important;
	display: flex;
	gap: 8px;
	z-index: 5;
}

.panel-heading-toolbar .btn {
	padding: 3px 12px;
	font-size: 0.82rem;
	line-height: 20px;
	border-radius: 7px;
}

/* Leave room for the toolbar so the panel-title doesn't run under it. */
.panel-heading:has(> .panel-heading-toolbar) > .panel-title {
	padding-right: 130px;
}

/* On narrow screens the absolute toolbar would overlap the title (and 2–3
   buttons can't fit beside it) — drop it below the title and let it wrap. */
@media (max-width: 767px) {
	.panel-heading-toolbar {
		position: static !important;
		transform: none;
		margin-top: 8px;
		flex-wrap: wrap;
	}
	.panel-heading:has(> .panel-heading-toolbar) > .panel-title {
		padding-right: 0;
	}
}

/* =====================================================================
   6. BUTTONS — accent primary, neutral white/default, status variants
   Target height: 40px base (9+20+9 + 2px border), 32px for .btn-sm.
   ===================================================================== */

.btn {
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	padding: 9px 16px;
	border-radius: var(--pa-radius-sm);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn.btn-sm {
	font-size: 12px;
	line-height: 18px;
	padding: 6px 12px;
	border-radius: 7px;
}

.btn.btn-xs {
	font-size: 11.5px;
	line-height: 18px;
	padding: 2px 8px;
	border-radius: 6px;
}

/* Keep the theme's square/circle icon buttons intact (they zero padding
   at higher specificity, but re-assert core geometry defensively). */
.btn.btn-icon {
	padding: 0;
	border-radius: var(--pa-radius-sm);
}

.btn.btn-icon.btn-circle {
	border-radius: 100px;
}

/* Visible keyboard focus ring (theme nukes outline/box-shadow with
   !important, so the ring must also be !important and later). */
.btn:focus-visible {
	box-shadow: var(--pa-shadow-focus) !important;
}

/* --- Primary: accent gradient, white text --- */
.btn.btn-primary,
.btn.btn-primary.disabled,
.btn.btn-primary.disabled:hover,
.btn.btn-primary.disabled:focus,
.btn.btn-primary[disabled],
.btn.btn-primary[disabled]:hover,
.btn.btn-primary[disabled]:focus {
	color: #fff;
	background: linear-gradient(135deg, var(--pa-accent), var(--pa-accent-hover));
	border-color: var(--pa-accent-hover);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.show > .btn.btn-primary.dropdown-toggle,
.open > .dropdown-toggle.btn.btn-primary,
.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled).active {
	color: #fff;
	background: linear-gradient(135deg, var(--pa-accent-hover), var(--pa-accent-dark));
	border-color: var(--pa-accent-dark);
}

/* --- Neutral: white / default — surface + line border, ink text --- */
.btn.btn-white,
.btn.btn-default,
.btn.btn-white.disabled,
.btn.btn-white.disabled:hover,
.btn.btn-white.disabled:focus,
.btn.btn-white[disabled],
.btn.btn-white[disabled]:hover,
.btn.btn-white[disabled]:focus,
.btn.btn-default.disabled,
.btn.btn-default.disabled:hover,
.btn.btn-default.disabled:focus,
.btn.btn-default[disabled],
.btn.btn-default[disabled]:hover,
.btn.btn-default[disabled]:focus {
	color: var(--pa-body);
	background: var(--pa-surface);
	border-color: var(--pa-line-strong);
}

.btn.btn-white:hover,
.btn.btn-white:focus,
.btn.btn-white:active,
.btn.btn-white.active,
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active,
.btn.btn-white:not(:disabled):not(.disabled):active,
.btn.btn-white:not(:disabled):not(.disabled).active,
.btn.btn-default:not(:disabled):not(.disabled):active,
.btn.btn-default:not(:disabled):not(.disabled).active {
	color: var(--pa-accent-dark);
	background: var(--pa-accent-softer);
	border-color: var(--pa-accent-line);
}

/* --- Status variants --- */
.btn.btn-success,
.btn.btn-success.disabled,
.btn.btn-success.disabled:hover,
.btn.btn-success.disabled:focus,
.btn.btn-success[disabled],
.btn.btn-success[disabled]:hover,
.btn.btn-success[disabled]:focus {
	color: #fff;
	background: var(--pa-success);
	border-color: var(--pa-success);
}

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-success.active,
.btn.btn-success:not(:disabled):not(.disabled):active,
.btn.btn-success:not(:disabled):not(.disabled).active {
	color: #fff;
	background: #116240;
	border-color: #116240;
}

.btn.btn-danger,
.btn.btn-danger.disabled,
.btn.btn-danger.disabled:hover,
.btn.btn-danger.disabled:focus,
.btn.btn-danger[disabled],
.btn.btn-danger[disabled]:hover,
.btn.btn-danger[disabled]:focus {
	color: #fff;
	background: var(--pa-danger);
	border-color: var(--pa-danger);
}

.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:active,
.btn.btn-danger.active,
.btn.btn-danger:not(:disabled):not(.disabled):active,
.btn.btn-danger:not(:disabled):not(.disabled).active {
	color: #fff;
	background: #a63030;
	border-color: #a63030;
}

.btn.btn-warning,
.btn.btn-warning.disabled,
.btn.btn-warning.disabled:hover,
.btn.btn-warning.disabled:focus,
.btn.btn-warning[disabled],
.btn.btn-warning[disabled]:hover,
.btn.btn-warning[disabled]:focus {
	color: #fff;
	background: var(--pa-warning);
	border-color: var(--pa-warning);
}

.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:active,
.btn.btn-warning.active,
.btn.btn-warning:not(:disabled):not(.disabled):active,
.btn.btn-warning:not(:disabled):not(.disabled).active {
	color: #fff;
	background: #815207;
	border-color: #815207;
}

.btn.btn-info,
.btn.btn-info.disabled,
.btn.btn-info.disabled:hover,
.btn.btn-info.disabled:focus,
.btn.btn-info[disabled],
.btn.btn-info[disabled]:hover,
.btn.btn-info[disabled]:focus {
	color: #fff;
	background: var(--pa-info);
	border-color: var(--pa-info);
}

.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info:active,
.btn.btn-info.active,
.btn.btn-info:not(:disabled):not(.disabled):active,
.btn.btn-info:not(:disabled):not(.disabled).active {
	color: #fff;
	background: #195470;
	border-color: #195470;
}

/* Scroll-to-top bubble (theme paints it teal; markup carries btn-success). */
.btn.btn-scroll-to-top {
	background: var(--pa-accent-grad);
	border-color: transparent;
}

/* =====================================================================
   7. FORMS — 40px controls, accent focus ring, consistent labels
   ===================================================================== */

.form-label,
.control-label,
label.col-form-label {
	color: var(--pa-ink);
	font-size: var(--pa-fs-sm);
	font-weight: 600;
	margin-bottom: 6px;
}

.form-group {
	margin-bottom: 18px;
}

.form-control {
	height: 40px;
	padding: 9px 12px;
	font-size: var(--pa-fs-body);
	color: var(--pa-ink);
	background: var(--pa-surface);
	border: 1px solid var(--pa-line-strong);
	border-radius: var(--pa-radius-sm);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder {
	color: #98a1b3;
}

.form-control:focus,
.form-control.focus,
.form-control.input-white:focus,
.form-control.input-white.focus {
	border-color: var(--pa-accent);
	outline: 0;
	box-shadow: var(--pa-shadow-focus);
}

textarea.form-control {
	height: auto;
	min-height: 90px;
}

/* Bootstrap 4 sizes selects via a higher-specificity :not() rule — match it
   so <select> and <input> controls land on the same 40px height. */
select.form-control:not([size]):not([multiple]) {
	height: 40px;
}

select.form-control.input-sm:not([size]):not([multiple]),
select.form-control.form-control-sm:not([size]):not([multiple]) {
	height: 30px;
}

select[multiple].form-control,
select[size].form-control {
	height: auto;
}

.form-control.input-sm,
.form-control.form-control-sm {
	height: 30px;
	padding: 4px 10px;
	font-size: 12px;
	border-radius: 7px;
}

.form-control[disabled],
.form-control[readonly] {
	background: var(--pa-canvas);
	color: var(--pa-muted);
	border-color: var(--pa-line);
}

.help-block,
.form-text {
	color: var(--pa-muted);
	font-size: var(--pa-fs-sm);
}

/* MVC unobtrusive validation states. */
.form-control.input-validation-error {
	border-color: var(--pa-danger);
}

.form-control.input-validation-error:focus {
	border-color: var(--pa-danger);
	box-shadow: 0 0 0 3px rgba(194, 59, 59, 0.15);
}

.field-validation-error {
	color: var(--pa-danger);
	font-size: var(--pa-fs-sm);
	font-weight: 600;
}

/* Visible "required field" asterisk next to .form-label. */
.form-required-marker {
	color: var(--pa-danger);
	margin-left: 3px;
	font-weight: 700;
}

/* Form Section Headers — visual grouping across long edit/create forms
   (ProjectCourse, Participant). !important + element-qualified selector
   beats the Color Admin theme's generic h3 / .panel-body h3 styling. */
h3.form-section-header,
h4.form-section-header,
.panel-body h3.form-section-header {
	color: var(--pa-accent-dark) !important;
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.2px;
	border-bottom: 2px solid var(--pa-accent) !important;
	padding-bottom: 6px !important;
	margin-top: 28px !important;
	margin-bottom: 18px !important;
	display: block;
	line-height: 1.4;
}

h3.form-section-header:first-of-type,
.panel-body h3.form-section-header:first-of-type {
	margin-top: 0 !important;
}

h3.form-section-header > i,
h3.form-section-header > i:first-child,
.panel-body h3.form-section-header > i {
	margin-right: 10px !important;
	opacity: 0.85;
	display: inline-block;
}

/* Computed / disabled summary inputs (MCCB Salary, MCCB Total, etc.)
   so staff can see at a glance which fields are read-only. */
.form-total-input {
	background-color: var(--pa-accent-softer) !important;
	color: var(--pa-accent-dark) !important;
	font-weight: 600;
	border-color: var(--pa-accent-line) !important;
}

/* Budget summary strip — MCCB total + Company total + variance. */
.budget-summary {
	background: var(--pa-accent-softer);
	border: 1px solid var(--pa-accent-line);
	border-radius: var(--pa-radius-sm);
	padding: 14px 18px;
	margin-top: 20px;
}

.budget-summary .summary-label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--pa-muted);
	margin-bottom: 4px;
}

.budget-summary .summary-value {
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--pa-accent-dark);
}

.budget-summary .summary-variance.balanced {
	color: var(--pa-success);
}

.budget-summary .summary-variance.off {
	color: var(--pa-danger);
}

/* Sticky action bar at the bottom of long forms on desktop.
   Below 992px (lg breakpoint) the bar scrolls with the form normally. */
@media (min-width: 992px) {
	.form-action-bar-sticky {
		position: sticky;
		bottom: 0;
		background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 70%, rgba(255, 255, 255, 0));
		padding: 16px 0 4px 0;
		z-index: 50;
		margin-top: 20px;
	}
}

/* Day-of-week checkbox row replacing <select multiple> for course days.
   Wrapped in a <fieldset><legend> so screen readers announce "Days" as the
   group context before each weekday option. Aggressive resets because
   Bootstrap's default legend is calc(1.275rem + 0.3vw) (huge) and uses
   higher specificity than a bare `legend` selector. */
fieldset.days-fieldset {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
}

fieldset.days-fieldset > legend,
fieldset.days-fieldset > legend.form-label {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin-bottom: 4px !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	color: inherit !important;
	padding: 0 !important;
	line-height: 1.5 !important;
	border: 0 !important;
	display: block !important;
}

.days-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 6px 0;
}

.days-checkbox-group .form-check {
	margin-bottom: 0;
}

.days-checkbox-group .form-check-label {
	font-size: 0.92rem;
	cursor: pointer;
	user-select: none;
}

/* --- select2 (single + multi) skinned to match .form-control --- */
.select2-container--default .select2-selection--single {
	height: 40px;
	border: 1px solid var(--pa-line-strong);
	border-radius: var(--pa-radius-sm);
	background: var(--pa-surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 38px;
	padding-left: 12px;
	color: var(--pa-ink);
	font-size: var(--pa-fs-body);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px;
	right: 6px;
}

.select2-container--default .select2-selection--multiple {
	min-height: 40px;
	border: 1px solid var(--pa-line-strong);
	border-radius: var(--pa-radius-sm);
	background: var(--pa-surface);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: var(--pa-accent-soft);
	border: 1px solid var(--pa-accent-line);
	border-radius: 6px;
	color: var(--pa-accent-dark);
	padding: 2px 8px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
	border-color: var(--pa-accent);
	box-shadow: var(--pa-shadow-focus);
}

.select2-dropdown {
	border: 1px solid var(--pa-line);
	border-radius: var(--pa-radius-sm);
	box-shadow: var(--pa-shadow-md);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--pa-line-strong);
	border-radius: 7px;
	padding: 6px 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--pa-accent);
	color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--pa-accent-soft);
	color: var(--pa-accent-dark);
}

/* --- jQuery UI datepicker aligned with the palette --- */
.ui-datepicker {
	font-family: var(--pa-font);
	font-size: 13px;
	border: 1px solid var(--pa-line);
	border-radius: 10px;
	box-shadow: var(--pa-shadow-md);
	padding: 10px;
	background: var(--pa-surface);
}

.ui-datepicker .ui-datepicker-header {
	background: var(--pa-accent-softer);
	border: none;
	border-radius: 7px;
	color: var(--pa-ink);
	font-weight: 600;
}

.ui-datepicker .ui-state-default {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	text-align: center;
	color: var(--pa-body);
}

.ui-datepicker .ui-state-hover {
	background: var(--pa-accent-soft);
	border-color: var(--pa-accent-line);
	color: var(--pa-accent-dark);
}

.ui-datepicker .ui-state-active {
	background: var(--pa-accent);
	border-color: var(--pa-accent);
	color: #fff;
}

.ui-datepicker .ui-state-highlight {
	background: var(--pa-accent-softer);
	border-color: var(--pa-accent-line);
	color: var(--pa-accent-dark);
}

/* =====================================================================
   8. TABLES + DATATABLES — soft-tinted header, calm rows, styled controls
   ===================================================================== */

.table {
	color: var(--pa-body);
	font-size: 13px;
	border-color: var(--pa-line);
}

.table thead th,
.table > thead > tr > th {
	background-color: var(--pa-accent-softer);
	color: var(--pa-ink);
	font-size: var(--pa-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--pa-line-strong) !important;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
	border-color: var(--pa-line);
	padding: 10px 14px;
	vertical-align: middle;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
	background: var(--pa-accent-softer) !important;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
	background: #fafbfd;
}

/* DataTables sort glyphs: the bundled BS3 integration expects Glyphicons
   (not shipped with BS4) — remap to the Font Awesome set that IS loaded. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
	padding-right: 26px;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 10px;
	color: var(--pa-muted);
	bottom: 11px;
}

table.dataTable thead .sorting:after {
	content: "\f0dc";
	opacity: 0.35;
}

table.dataTable thead .sorting_asc:after {
	content: "\f0de";
	color: var(--pa-accent);
	opacity: 1;
}

table.dataTable thead .sorting_desc:after {
	content: "\f0dd";
	color: var(--pa-accent);
	opacity: 1;
}

/* Per-column filter row (built by pa-datatables.js): plain surface, no
   uppercase bleed from the header styling above. */
.table > thead > tr.dt-column-filters > th {
	background: var(--pa-surface);
	text-transform: none;
	letter-spacing: 0;
}

/* Classic top/bottom control bars around every grid. */
div.dataTables_wrapper div.dataTables_length {
	float: left;
	margin-bottom: 14px;
	color: var(--pa-muted);
	font-size: var(--pa-fs-sm);
}

div.dataTables_wrapper div.dt-buttons {
	float: left;
	margin: 0 0 14px 12px;
}

div.dataTables_wrapper div.dataTables_filter {
	float: right;
	text-align: right;
	margin-bottom: 14px;
	color: var(--pa-muted);
	font-size: var(--pa-fs-sm);
}

div.dataTables_wrapper table.dataTable {
	clear: both;
}

div.dataTables_wrapper div.dataTables_info {
	float: left;
	padding-top: 16px;
	color: var(--pa-muted);
	font-size: var(--pa-fs-sm);
}

div.dataTables_wrapper div.dataTables_paginate {
	float: right;
	padding-top: 8px;
}

div.dataTables_wrapper:after {
	content: '';
	display: table;
	clear: both;
}

div.dataTables_wrapper div.dataTables_filter input {
	display: inline-block;
	width: 240px;
	margin-left: 8px;
	height: 36px;
	padding: 7px 12px;
	font-size: var(--pa-fs-sm);
	border: 1px solid var(--pa-line-strong);
	border-radius: var(--pa-radius-sm);
	background: var(--pa-surface);
	color: var(--pa-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
	border-color: var(--pa-accent);
	outline: 0;
	box-shadow: var(--pa-shadow-focus);
}

div.dataTables_wrapper div.dataTables_length select {
	width: auto;
	display: inline-block;
	height: 36px;
	margin: 0 6px;
	padding: 6px 10px;
	font-size: var(--pa-fs-sm);
	border: 1px solid var(--pa-line-strong);
	border-radius: var(--pa-radius-sm);
	background: var(--pa-surface);
	color: var(--pa-ink);
}

/* Export buttons (Copy/CSV/PDF) — separated neutral buttons, not a fused
   btn-group. */
div.dt-buttons .btn,
button.dt-button {
	margin-right: 8px;
	border-radius: var(--pa-radius-sm) !important;
	font-size: 12px;
	line-height: 18px;
	padding: 8px 12px;
}

/* Pagination — quiet bordered pills, accent active page. */
.pagination > li > a,
.pagination > li > span,
.pagination .page-link {
	color: var(--pa-body);
	background: var(--pa-surface);
	border: 1px solid var(--pa-line);
	margin-left: 4px;
	padding: 6px 12px;
	font-size: var(--pa-fs-sm);
	font-weight: 600;
	border-radius: 7px !important;
}

.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination .page-link:hover,
.pagination .page-link:focus {
	color: var(--pa-accent-dark);
	background: var(--pa-accent-softer);
	border-color: var(--pa-accent-line);
	box-shadow: none;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination .page-item.active .page-link {
	color: #fff;
	background: var(--pa-accent);
	border-color: var(--pa-accent);
}

.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus,
.pagination > .disabled > span,
.pagination .page-item.disabled .page-link {
	color: var(--pa-muted);
	background: var(--pa-canvas);
	border-color: var(--pa-line);
	opacity: 0.6;
	cursor: not-allowed;
}

/* Empty grid message. */
td.dataTables_empty {
	padding: 36px 16px !important;
	text-align: center;
	color: var(--pa-muted);
	font-size: var(--pa-fs-body);
}

/* Stack the control bars on small screens. */
@media (max-width: 767px) {
	div.dataTables_wrapper div.dataTables_length,
	div.dataTables_wrapper div.dt-buttons,
	div.dataTables_wrapper div.dataTables_filter,
	div.dataTables_wrapper div.dataTables_info,
	div.dataTables_wrapper div.dataTables_paginate {
		float: none;
		text-align: left;
		margin-left: 0;
	}

	div.dataTables_wrapper div.dataTables_filter input {
		width: 100%;
		margin-left: 0;
		margin-top: 4px;
	}
}

/* --- Inline DataTable action icons --- */
.dt-action-icons {
	display: inline-block;
	white-space: nowrap;
	min-width: 80px;
}

.dt-action-icons a {
	display: inline-block;
	margin: 0 7px;
	font-size: 17px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.dt-action-icons a:hover {
	text-decoration: none;
	transform: scale(1.2);
	opacity: 0.85;
}

/* Action icon hues, retuned to the palette but kept distinguishable. */
.action-edit {
	color: var(--pa-accent) !important;
}

.action-delete {
	color: var(--pa-danger) !important;
}

.action-manage {
	color: var(--pa-info) !important;
}

.action-courses {
	color: #6d5bd0 !important;
}

.action-modifications {
	color: var(--pa-warning) !important;
}

.action-reimbursements {
	color: var(--pa-success) !important;
}

.action-details {
	color: #64748b !important;
}

.action-add {
	color: var(--pa-success) !important;
}

.action-remove {
	color: var(--pa-danger) !important;
}

.action-update {
	color: var(--pa-warning) !important;
}

.action-duplicate {
	color: #475569 !important;
}

table.dataTable th:first-child.text-nowrap,
table.dataTable td:first-child {
	min-width: 90px !important;
	width: 90px;
}

/* =====================================================================
   9. STATUS PILLS + ALERTS — soft status colors
   ===================================================================== */

.badge {
	font-size: var(--pa-fs-xs);
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
}

.label {
	font-size: var(--pa-fs-xs);
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	display: inline-block;
	line-height: 1.4;
}

.badge.badge-default,
.label.label-default {
	background: #eef1f5;
	color: var(--pa-body);
}

.badge.badge-primary,
.label.label-primary,
.badge.badge-teal,
.label.label-teal,
.label.label-theme {
	background: var(--pa-accent-soft);
	color: var(--pa-accent-dark);
}

.badge.badge-success,
.label.label-success,
.badge.badge-lime,
.label.label-lime {
	background: var(--pa-success-soft);
	color: var(--pa-success);
}

.badge.badge-warning,
.label.label-warning,
.badge.badge-yellow,
.label.label-yellow {
	background: var(--pa-warning-soft);
	color: var(--pa-warning);
}

.badge.badge-danger,
.label.label-danger {
	background: var(--pa-danger-soft);
	color: var(--pa-danger);
}

.badge.badge-info,
.label.label-info {
	background: var(--pa-info-soft);
	color: var(--pa-info);
}

.badge.badge-secondary,
.label.label-secondary {
	background: #eef1f5;
	color: var(--pa-muted);
}

.badge.badge-purple,
.label.label-purple {
	background: #ede9fb;
	color: #5b48b8;
}

/* Alerts follow the same soft treatment. */
.alert {
	border-radius: 10px;
	border: 1px solid var(--pa-line);
	padding: 12px 16px;
	font-size: var(--pa-fs-body);
}

.alert-success {
	background: var(--pa-success-soft);
	border-color: var(--pa-success-line);
	color: var(--pa-success);
}

.alert-warning {
	background: var(--pa-warning-soft);
	border-color: var(--pa-warning-line);
	color: var(--pa-warning);
}

.alert-danger {
	background: var(--pa-danger-soft);
	border-color: var(--pa-danger-line);
	color: var(--pa-danger);
}

.alert-info {
	background: var(--pa-info-soft);
	border-color: var(--pa-info-line);
	color: var(--pa-info);
}

/* =====================================================================
   10. TABS + EMPTY STATE + SWEETALERT TOUCH-UP
   ===================================================================== */

.nav-tabs {
	border-bottom: 1px solid var(--pa-line);
}

.nav-tabs > li > a,
.nav-tabs .nav-link {
	color: var(--pa-muted);
	font-weight: 600;
	font-size: var(--pa-fs-body);
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	padding: 10px 16px;
}

.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover {
	color: var(--pa-ink);
	background: transparent;
	border-color: transparent;
	border-bottom-color: var(--pa-line-strong);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs .nav-link.active {
	color: var(--pa-accent);
	background: transparent;
	border: none;
	border-bottom: 2px solid var(--pa-accent);
}

/* Empty state helper — centered muted icon + text. Usage:
     <div class="pa-empty-state">
       <i class="fa fa-inbox"></i>
       <div class="pa-empty-state-title">No records yet</div>
       <p>Optional supporting copy.</p>
     </div> */
.pa-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: var(--pa-muted);
}

.pa-empty-state > i {
	display: block;
	font-size: 34px;
	color: var(--pa-line-strong);
	margin-bottom: 12px;
}

.pa-empty-state .pa-empty-state-title {
	color: var(--pa-ink);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 4px;
}

.pa-empty-state p {
	margin: 0 auto;
	max-width: 420px;
	font-size: var(--pa-fs-body);
}

/* SweetAlert2 (v9, styles injected at runtime — hence the extra
   specificity below). Radius + type + accent confirm button only; toast
   layout is left alone. */
div.swal2-popup {
	border-radius: var(--pa-radius);
	font-family: var(--pa-font);
}

.swal2-popup .swal2-title {
	color: var(--pa-ink);
}

.swal2-popup .swal2-content,
.swal2-popup .swal2-html-container {
	color: var(--pa-body);
}

.swal2-popup .swal2-styled.swal2-confirm {
	background: linear-gradient(135deg, var(--pa-accent), var(--pa-accent-hover));
	border-radius: var(--pa-radius-sm);
	font-weight: 600;
}

.swal2-popup .swal2-styled.swal2-cancel {
	background: var(--pa-surface);
	color: var(--pa-body);
	border: 1px solid var(--pa-line-strong);
	border-radius: var(--pa-radius-sm);
	font-weight: 600;
}