/* Theme System - Light and Dark Mode Support */

:root {
	/* Light Mode (Default) */
	--bg-1: #eef6ff;
	--bg-2: #e9f8f0;
	--ink: #102a43;
	--muted: #5a6f82;
	--panel: rgba(255, 255, 255, 0.92);
	--stroke: rgba(15, 78, 128, 0.16);
	--accent: #0b5e9a;
	--accent-2: #138a5b;
	--accent-soft: #dff1ff;
	--green-soft: #def5e8;
	--blue-deep: #073f70;
	--green-deep: #0b6845;
	--focus-ring: rgba(14, 116, 180, 0.25);
	--brand-gradient: linear-gradient(135deg, #0b5e9a 0%, #087ba0 45%, #138a5b 100%);
	--radius: 18px;
	--shadow: 0 22px 55px rgba(9, 70, 112, 0.14);
	--warn: #8a2d0a;
	--input-bg: #ffffff;
	--input-text: #102a43;
	--button-bg: #0b5e9a;
	--button-text: #ffffff;
	--hover-overlay: rgba(11, 94, 154, 0.07);
}

/* Prevent legacy page navigation from flashing before the shared sidebar is mounted. */
html:not(.has-deped-fixed-header) body:has(.nav-menu) {
	opacity:0;
	animation:itrack-layout-failsafe 0s 2.5s forwards;
}
html.has-deped-fixed-header body { opacity:1; animation:none; }
@keyframes itrack-layout-failsafe { to { opacity:1; } }
html.has-deped-fixed-header:not(.itrack-nav-role-ready) .deped-fixed-header .nav-menu {
	opacity:0 !important;
	pointer-events:none !important;
}

html[data-theme="dark"] {
	/* Dark Mode */
	--bg-1: #1a1f1c;
	--bg-2: #232c26;
	--ink: #e8f0ed;
	--muted: #a0b0a4;
	--panel: rgba(20, 25, 22, 0.9);
	--stroke: rgba(232, 240, 237, 0.12);
	--accent: #4da9e8;
	--accent-2: #43c58a;
	--accent-soft: #173d59;
	--green-soft: #153f31;
	--blue-deep: #82c7f5;
	--green-deep: #70dda9;
	--focus-ring: rgba(77, 169, 232, 0.32);
	--brand-gradient: linear-gradient(135deg, #1677b8 0%, #1687a6 48%, #219767 100%);
	--shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
	--warn: #d4743c;
	--input-bg: #2a3530;
	--input-text: #e8f0ed;
	--button-bg: #1677b8;
	--button-text: #e8f0ed;
	--hover-overlay: rgba(232, 240, 237, 0.08);
	color-scheme: dark;
}

/* Blue and green Project i-Track presentation layer */
body {
	background:
		radial-gradient(circle at 8% 5%, rgba(38, 142, 207, 0.14), transparent 32%),
		radial-gradient(circle at 92% 92%, rgba(31, 155, 99, 0.13), transparent 34%),
		linear-gradient(145deg, var(--bg-1), var(--bg-2)) !important;
	color: var(--ink);
}

.card,
.panel,
.form-card,
.stat-card,
.dashboard-card,
.content-card,
.modal,
.dialog {
	background: var(--panel) !important;
	border: 1px solid var(--stroke) !important;
	box-shadow: 0 14px 36px rgba(9, 70, 112, 0.10) !important;
}

input,
textarea,
select {
	border: 1px solid rgba(15, 78, 128, 0.20) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(9, 70, 112, 0.04) !important;
}

input:hover,
textarea:hover,
select:hover {
	border-color: rgba(11, 94, 154, 0.42) !important;
}

input:focus,
textarea:focus,
select:focus {
	outline: none !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 4px var(--focus-ring) !important;
}

button:not(.theme-toggle-nav):not(.theme-toggle-fixed),
.btn,
a.btn,
input[type="submit"],
input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 20px;
	border: 1px solid transparent !important;
	border-radius: 12px !important;
	background: var(--brand-gradient) !important;
	color: #ffffff !important;
	font: inherit;
	font-weight: 750 !important;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(11, 94, 154, 0.20) !important;
	transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}

button:not(.theme-toggle-nav):not(.theme-toggle-fixed):hover,
.btn:hover,
a.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	filter: saturate(1.08) brightness(1.04);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(11, 94, 154, 0.26) !important;
}

button:not(.theme-toggle-nav):not(.theme-toggle-fixed):active,
.btn:active,
a.btn:active {
	transform: translateY(0);
	box-shadow: 0 5px 12px rgba(11, 94, 154, 0.20) !important;
}

button:not(.theme-toggle-nav):not(.theme-toggle-fixed):focus-visible,
.btn:focus-visible,
a.btn:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.95) !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--focus-ring), 0 10px 22px rgba(11, 94, 154, 0.22) !important;
}

.btn-secondary,
.btn-outline,
button.secondary,
button.btn-secondary {
	background: linear-gradient(180deg, #ffffff, #f2f8fd) !important;
	color: var(--accent) !important;
	border-color: rgba(11, 94, 154, 0.28) !important;
	box-shadow: 0 6px 14px rgba(9, 70, 112, 0.10) !important;
}

.btn-secondary:hover,
.btn-outline:hover,
button.secondary:hover,
button.btn-secondary:hover {
	background: linear-gradient(180deg, #f5fbff, #e5f4ff) !important;
	color: var(--blue-deep) !important;
	border-color: var(--accent) !important;
}

.btn-success,
button.success,
button.btn-success {
	background: linear-gradient(135deg, #0f7a50, #18a169) !important;
	box-shadow: 0 8px 18px rgba(19, 138, 91, 0.22) !important;
}

.btn-danger,
button.danger,
button.btn-danger,
.delete-btn {
	background: linear-gradient(135deg, #b42318, #d64545) !important;
	box-shadow: 0 8px 18px rgba(180, 35, 24, 0.20) !important;
}

button:disabled,
.btn:disabled,
.btn.disabled {
	opacity: 0.58 !important;
	cursor: not-allowed !important;
	filter: grayscale(0.25);
	transform: none !important;
	box-shadow: none !important;
}

.badge,
.status-badge {
	border: 1px solid rgba(11, 94, 154, 0.14);
	border-radius: 999px !important;
	padding: 5px 10px;
	font-weight: 700;
}

table {
	border: 1px solid var(--stroke);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(9, 70, 112, 0.07);
}

table th {
	background: linear-gradient(180deg, var(--accent-soft), var(--green-soft)) !important;
	color: var(--blue-deep) !important;
}

@media (max-width: 760px) {
	button:not(.theme-toggle-nav):not(.theme-toggle-fixed),
	.btn,
	a.btn,
	input[type="submit"],
	input[type="button"] {
		min-height: 46px;
		padding: 12px 17px;
	}
}

/* Required-field presentation and validation */
.required-marker {
	color: #c52b20;
	font-weight: 800;
	margin-left: 2px;
}

input[required],
select[required],
textarea[required] {
	background-image: linear-gradient(135deg, transparent 0%, transparent 96%, rgba(197, 43, 32, 0.16) 96%, rgba(197, 43, 32, 0.16) 100%);
}

input[required]:invalid:not(:placeholder-shown),
textarea[required]:invalid:not(:placeholder-shown),
select[required]:invalid {
	border-color: rgba(197, 43, 32, 0.62) !important;
	box-shadow: 0 0 0 3px rgba(197, 43, 32, 0.10) !important;
}

input[required]:valid,
textarea[required]:valid,
select[required]:valid {
	border-color: rgba(33, 139, 105, 0.42) !important;
}

label:has(+ input[required]),
label:has(+ select[required]),
label:has(+ textarea[required]) {
	font-weight: 700;
}

/* Project i-Track page loading transition */
.itrack-page-loader {
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 24px;
	background:
		radial-gradient(circle at 50% 44%, rgba(20, 124, 179, 0.09), transparent 190px),
		linear-gradient(145deg, #ffffff, #f2f8f8);
	opacity: 1;
	visibility: visible;
	transition: opacity 240ms ease, visibility 240ms ease;
}

.itrack-page-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.itrack-page-loader-logo-frame {
	position: relative;
	display: grid;
	place-items: center;
	width: 1in;
	height: 1in;
	filter: drop-shadow(0 10px 16px rgba(20, 124, 179, 0.2));
}

.itrack-page-loader-ring {
	position: absolute;
	inset: 50% auto auto 50%;
	display: block;
	width: 1in;
	height: 1in;
	border-radius: 50%;
	background: conic-gradient(
		from -28deg,
		transparent 0 2%,
		#75cef1 2% 32%,
		transparent 32% 35%,
		#285fba 35% 66%,
		transparent 66% 69%,
		#f6d975 69% 98%,
		transparent 98% 100%
	);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	transform: translate(-50%, -50%) rotate(0deg);
	animation: itrack-loader-colors 1.15s linear infinite;
}

.itrack-page-loader-text {
	font: 800 clamp(0.85rem, 1.6vw, 1rem) Manrope, Inter, "Segoe UI", Arial, sans-serif;
	color: var(--navy, #102f49);
	letter-spacing: 0.02em;
}


@keyframes itrack-loader-colors {
	from { transform:translate(-50%,-50%) rotate(0deg); filter:drop-shadow(0 5px 8px rgba(40,95,186,.2)); }
	to { transform:translate(-50%,-50%) rotate(360deg); filter:drop-shadow(0 7px 11px rgba(40,95,186,.3)); }
}

@media (prefers-reduced-motion: reduce) {
	.itrack-page-loader-ring {
		animation: none;
	}
}

/* Permanent compact Project i-Track header */
:root {
	--deped-header-compact-height: 72px;
	--deped-header-height: var(--deped-header-compact-height);
	--surface-page: #f2f7f5;
	--surface-card: #ffffff;
	--navy: #102f49;
	--navy-soft: #607789;
	--project-green: #218b69;
	--project-blue: #147cb3;
}

.deped-fixed-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 10000;
	height: var(--deped-header-height);
	overflow: visible;
	background: rgba(248, 253, 252, 0.98);
	border-bottom: 1px solid rgba(20, 124, 179, 0.25);
	box-shadow: 0 4px 18px rgba(8, 47, 72, 0.18);
	pointer-events: auto;
	user-select: none;
	transition: box-shadow 240ms ease !important;
}

html.has-deped-fixed-header body {
	padding-top: calc(var(--deped-header-height) + 1px) !important;
	background: var(--surface-page) !important;
	font-family: Manrope, Inter, "Segoe UI", Arial, sans-serif !important;
	color: var(--navy) !important;
	transition: padding-top 360ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease !important;
}

.deped-compact-bar {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 8px clamp(14px, 3vw, 48px);
	background: linear-gradient(110deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 250, 0.98));
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: background-color 220ms ease !important;
	white-space: nowrap;
}

.deped-compact-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 54px;
	min-width: 112px;
	padding: 4px 10px;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 5px 16px rgba(16, 47, 73, 0.10);
}

.deped-compact-logo {
	display: block;
	max-width: 108px;
	max-height: 48px;
	object-fit: contain;
}

.deped-compact-menu-dock {
	min-width: 0;
	flex: 1 1 auto;
	overflow: visible;
}

.deped-mobile-menu-toggle {
	display: none;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	margin-left: auto;
	padding: 0 !important;
	border: 1px solid rgba(20, 124, 179, 0.22) !important;
	border-radius: 10px !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
}

.deped-mobile-menu-toggle span {
	display: block;
	width: 21px;
	height: 2px;
	border-radius: 999px;
	background: var(--navy);
	transition: transform 220ms ease, opacity 180ms ease;
}

.deped-fixed-header.mobile-menu-open .deped-mobile-menu-toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.deped-fixed-header.mobile-menu-open .deped-mobile-menu-toggle span:nth-child(2) {
	opacity: 0;
}

.deped-fixed-header.mobile-menu-open .deped-mobile-menu-toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.nav-panel.nav-menu-is-docked {
	display: none !important;
}

.deped-compact-menu-dock .nav-menu {
	display: flex;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: flex-start;
	gap: 2px;
	margin: 0;
	padding: 0;
	overflow: visible;
	scrollbar-width: thin;
}

.deped-compact-menu-dock .nav-item {
	min-height: 34px;
	padding: 7px 10px;
	font-size: clamp(0.7rem, 0.78vw, 0.82rem) !important;
	line-height: 1.1 !important;
	position: relative;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--navy) !important;
}

.deped-compact-menu-dock .nav-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	margin-right: 5px;
	font-size: 0.98em;
	line-height: 1;
}

.itrack-management-menu {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.management-caret {
	margin-left: 5px;
	font-size: 0.72em;
	transition: transform 180ms ease;
}

.itrack-management-menu.is-open .management-caret {
	transform: rotate(180deg);
}

.itrack-management-submenu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 10020;
	display: none;
	flex-direction: column;
	align-items: stretch;
	min-width: 220px;
	padding: 8px;
	border: 1px solid rgba(20, 124, 179, 0.16);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 14px 28px rgba(16, 47, 73, 0.16);
}

.itrack-management-submenu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -9px;
	height: 9px;
}

.itrack-management-menu:hover .itrack-management-submenu,
.itrack-management-menu:focus-within .itrack-management-submenu,
.itrack-management-menu.is-open .itrack-management-submenu {
	display: flex;
}

.deped-compact-menu-dock .itrack-management-submenu .nav-item {
	width: 100%;
	min-height: 38px;
	padding: 9px 10px !important;
	text-align: left;
	justify-content: flex-start;
}

.deped-compact-menu-dock .nav-item::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 2px;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--project-green), var(--project-blue));
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 180ms ease;
}

.deped-compact-menu-dock .nav-item:hover,
.deped-compact-menu-dock .nav-item:focus-visible,
.deped-compact-menu-dock .nav-item.nav-current,
.deped-compact-menu-dock .quick-nav-btn.active {
	background: transparent !important;
	color: var(--project-green) !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: translateY(-1px) !important;
}

.deped-compact-menu-dock .nav-item:hover::after,
.deped-compact-menu-dock .nav-item:focus-visible::after,
.deped-compact-menu-dock .nav-item.nav-current::after,
.deped-compact-menu-dock .quick-nav-btn.active::after {
	transform: scaleX(1);
}

.deped-compact-menu-dock .nav-greeting {
	white-space: nowrap;
	font-size: 0.84rem;
}

html.has-deped-fixed-header .theme-toggle-fixed {
	top: calc(var(--deped-header-height) + 14px);
}

/* Clean navigation treatment inspired by the supplied Project HELPS reference */
.nav-panel {
	position: sticky;
	top: var(--deped-header-height);
	z-index: 900;
	background: rgba(255, 255, 255, 0.97) !important;
	border: 1px solid rgba(16, 47, 73, 0.10) !important;
	box-shadow: 0 8px 24px rgba(16, 47, 73, 0.07) !important;
	backdrop-filter: blur(12px);
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 5px;
}

.nav-menu .nav-item {
	min-height: 40px;
	padding: 9px 13px;
	background: transparent !important;
	color: var(--navy) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
	transform: none !important;
}

.nav-menu .nav-item:hover {
	background: transparent !important;
	color: var(--project-green) !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: translateY(-1px) !important;
}

.nav-menu .nav-item:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 4px rgba(20, 124, 179, 0.17) !important;
}

.nav-menu .nav-item-signout {
	margin-left: 4px;
	color: var(--navy) !important;
	border: 0 !important;
}

.nav-menu .nav-item-signout:hover {
	background: transparent !important;
	color: #b42318 !important;
	border: 0 !important;
	box-shadow: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Manrope, Inter, "Segoe UI", Arial, sans-serif !important;
	color: var(--navy) !important;
	letter-spacing: -0.025em;
}

h1 {
	font-weight: 800 !important;
}

h2,
h3 {
	font-weight: 750 !important;
}

p,
small,
.muted,
.subtitle,
.helper-text {
	color: var(--navy-soft);
}

.card,
.panel,
.form-card,
.stat-card,
.dashboard-card,
.content-card,
.modal,
.dialog {
	border-radius: 18px !important;
	border-color: rgba(16, 47, 73, 0.11) !important;
	box-shadow: 0 10px 28px rgba(16, 47, 73, 0.075) !important;
}

button:not(.theme-toggle-nav):not(.theme-toggle-fixed):not(.nav-item):not(.deped-mobile-menu-toggle):not(.tool):not(.tab),
.btn:not(.nav-item),
a.btn {
	background: linear-gradient(120deg, var(--project-green), #198f86 52%, var(--project-blue)) !important;
	box-shadow: 0 9px 20px rgba(25, 119, 125, 0.20) !important;
}

button:not(.theme-toggle-nav):not(.theme-toggle-fixed):not(.nav-item):not(.deped-mobile-menu-toggle):not(.tool):not(.tab):hover,
.btn:not(.nav-item):hover,
a.btn:hover {
	filter: brightness(1.06) saturate(1.08);
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 14px 28px rgba(20, 124, 179, 0.23) !important;
}

@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {
	.deped-compact-bar {
		padding-inline: 12px;
	}

	.deped-mobile-menu-toggle:not([hidden]) {
		display: inline-flex;
	}

	.deped-compact-menu-dock {
		display: none !important;
		position: absolute;
		top: calc(100% + 1px);
		left: 10px;
		right: 10px;
		width: auto;
		overflow: hidden;
		padding: 0 10px;
		border: 1px solid transparent;
		border-radius: 0 0 14px 14px;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 16px 30px rgba(16, 47, 73, 0.16);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		pointer-events: none;
		transition: opacity 180ms ease, transform 240ms ease;
	}

	.deped-fixed-header.mobile-menu-open .deped-compact-menu-dock {
		display: block !important;
		max-height: calc(100vh - var(--deped-header-height) - 16px);
		max-height: calc(100dvh - var(--deped-header-height) - 16px);
		overflow-y: auto;
		padding: 10px;
		border-color: rgba(20, 124, 179, 0.18);
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		animation: deped-menu-drop 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.deped-compact-menu-dock .nav-menu {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100%;
		overflow: visible;
	}

	.deped-compact-menu-dock .nav-item,
	.deped-compact-menu-dock .nav-greeting {
		width: 100%;
		min-height: 40px;
		margin: 0 !important;
		padding: 10px 12px !important;
		font-size: 0.84rem !important;
		text-align: left;
		justify-content: flex-start;
	}

	.itrack-management-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.itrack-management-submenu {
		position: static;
		display: none;
		min-width: 0;
		margin: 2px 0 6px 14px;
		padding: 4px 0 4px 10px;
		border: 0;
		border-left: 2px solid rgba(33, 139, 105, 0.24);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.itrack-management-menu.is-open .itrack-management-submenu {
		display: flex;
	}
}

@keyframes deped-menu-drop {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 760px) {
	:root {
		--deped-header-compact-height: 62px;
	}

	.nav-panel {
		top: var(--deped-header-height);
	}

	.nav-menu {
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.deped-compact-bar {
		gap: 8px;
		padding: 6px 10px;
	}

	.deped-compact-brand {
		height: 48px;
		min-width: 88px;
		padding: 3px 6px;
	}

	.deped-compact-logo {
		max-width: 84px;
		max-height: 42px;
	}

	.deped-compact-menu-dock .nav-item {
		min-height: 32px;
		padding: 6px 7px;
		font-size: 0.72rem !important;
	}
}

/* Theme Toggle Button Styles */

/* Button placed beside user name in nav */
.theme-toggle-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 8px;
	padding: 8px 11px;
	background: transparent;
	border: none;
	border-radius: 8px;
	width: auto;
	height: auto;
	cursor: pointer;
	font-size: 1.1rem;
	transition: all 150ms ease;
	box-shadow: none;
	color: var(--ink);
	font-weight: 600;
}

.theme-toggle-nav:hover {
	background: linear-gradient(180deg, rgba(20, 83, 45, 0.12), rgba(20, 83, 45, 0.08));
	color: var(--accent);
	transform: scale(1.05);
	box-shadow: 0 2px 8px rgba(20, 83, 45, 0.1);
}

html[data-theme="dark"] .theme-toggle-nav:hover {
	background: linear-gradient(180deg, rgba(45, 155, 111, 0.12), rgba(45, 155, 111, 0.08));
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.theme-toggle-nav:active {
	transform: scale(0.98);
}

/* Fallback fixed positioning for pages without user nav (e.g., login page) */
.theme-toggle-fixed {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 9999;
	background: var(--panel);
	border: 1px solid var(--stroke);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	transition: all 200ms ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	color: var(--ink);
}

html[data-theme="dark"] .theme-toggle-fixed {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.theme-toggle-fixed:hover {
	transform: scale(1.08);
	background: var(--accent-soft);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

html[data-theme="dark"] .theme-toggle-fixed:hover {
	background: var(--accent-soft);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.theme-toggle-fixed:active {
	transform: scale(0.96);
}

/* Input field theme support */
input,
textarea,
select {
	background-color: var(--input-bg) !important;
	color: var(--input-text) !important;
	border-color: var(--stroke) !important;
}

input::placeholder {
	color: var(--muted);
}

/* Button theme support */
button {
	background-color: var(--button-bg);
	color: var(--button-text);
	border: 1px solid var(--stroke);
}

button:hover {
	background-color: var(--accent);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html[data-theme="dark"] button:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Smooth transitions when switching themes */
html {
	transition: background-color 300ms ease, color 300ms ease;
}

* {
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

/* Links and text colors */
a {
	color: var(--accent);
}

a:hover {
	color: var(--accent-2);
}

/* Table styling for dark mode */
table {
	background: var(--panel);
	color: var(--ink);
}

table th {
	background: var(--accent-soft);
	color: var(--ink);
}

table tr:hover {
	background: var(--hover-overlay);
}

html[data-theme="dark"] table th {
	background: var(--accent-soft);
	color: var(--accent);
}

/* Form elements styling */
.form-group label {
	color: var(--ink);
}

/* Status badges */
.badge {
	background: var(--accent-soft);
	color: var(--accent);
}

.badge.success {
	background: rgba(45, 155, 111, 0.15);
	color: var(--accent-2);
}

.badge.warning {
	background: rgba(212, 116, 60, 0.15);
	color: var(--warn);
}

.badge.danger {
	background: rgba(138, 45, 10, 0.15);
	color: var(--warn);
}

/* Ensure logo is visible in both themes */
.brand-logo {
	filter: brightness(1);
	transition: filter 200ms ease;
}

html[data-theme="dark"] .brand-logo {
	filter: brightness(0.95);
}

/* Modal/dialog styling */
.modal,
.dialog {
	background: var(--panel);
	border-color: var(--stroke);
	color: var(--ink);
	box-shadow: var(--shadow);
}

.modal-overlay {
	background: rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .modal-overlay {
	background: rgba(0, 0, 0, 0.6);
}

/* Scrollbar styling for dark mode */
html[data-theme="dark"] ::-webkit-scrollbar {
	width: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
	background: var(--bg-1);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
	background: var(--stroke);
	border-radius: 5px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
	background: var(--muted);
}

.itrack-account-popover { position:fixed; top:var(--popover-top,80px); left:var(--popover-left,50%); z-index:10040; display:none; width:min(680px,calc(100vw - 24px)); padding:30px 27px 28px; transform:translateX(-50%); background:#fff; border:1px solid #bedfd1; border-radius:21px; box-shadow:0 18px 42px rgba(21,88,68,.13); text-align:center; }
.itrack-account-popover.is-open { display:block; animation:deped-menu-drop 180ms ease-out both; }
.itrack-account-popover::before { content:""; position:absolute; top:-10px; left:50%; width:18px; height:18px; transform:translateX(-50%) rotate(45deg); background:#fff; border-left:1px solid #bedfd1; border-top:1px solid #bedfd1; }
.itrack-account-popover h2 { margin:0 0 7px; font-size:1.2rem; font-weight:800; color:#174c3d; }
.itrack-account-popover>p { margin:0 0 20px; color:#778a84; font-size:.92rem; }
.itrack-account-choices { display:grid; grid-template-columns:1fr; gap:12px; }
.itrack-account-choices button { display:grid; grid-template-columns:54px 1fr; grid-template-rows:auto auto; gap:2px 13px; align-items:center; min-height:84px; padding:13px 16px; text-align:left; font:inherit; color:#fff; background:linear-gradient(135deg,#176f92,#16846c); border:1px solid rgba(15,99,84,.35); border-radius:16px; box-shadow:0 9px 22px rgba(18,91,91,.2); cursor:pointer; transition:filter 180ms ease,box-shadow 180ms ease,transform 180ms ease; }
.itrack-account-choices button:hover,.itrack-account-choices button:focus-visible { filter:brightness(1.08); box-shadow:0 15px 30px rgba(18,91,91,.28); transform:translateY(-3px); outline:none; }
.itrack-account-choices button:focus-visible { outline:3px solid rgba(23,124,179,.24); outline-offset:3px; }
.itrack-account-choices button>span { grid-row:1/3; display:grid; place-items:center; width:54px; height:54px; border-radius:14px; background:rgba(255,255,255,.9); color:#116d79; font-size:1.3rem; }
.itrack-account-choices strong,.itrack-account-choices small { display:block; }
.itrack-account-choices strong { font-size:1rem; font-weight:800; }
.itrack-account-choices small { color:rgba(255,255,255,.82); font-size:.8rem; }
.itrack-account-overlay { position:fixed; inset:0; z-index:10050; display:none; place-items:center; padding:12px; background:rgba(9,35,46,.38); backdrop-filter:blur(4px); }
.itrack-account-overlay.is-open { display:grid; }
.itrack-account-frame { position:relative; width:min(800px,100%); height:min(690px,calc(100vh - 24px)); background:#f5fbf8; border-radius:20px; box-shadow:0 24px 70px rgba(5,35,30,.28); overflow:hidden; }
.itrack-account-frame iframe { width:100%; height:100%; border:0; }
.itrack-account-frame-close { position:absolute; top:10px; right:10px; z-index:3; width:40px; height:40px; border:0; border-radius:50%; background:#dfeee7; color:#355f54; font-size:1.3rem; cursor:pointer; }

@media (max-width:600px) {
	.itrack-account-choices { grid-template-columns:1fr; }
	.itrack-account-popover { max-height:calc(100vh - 90px); overflow:auto; }
}

/* Final plain-text navigation treatment: icons + labels only. */
html body .deped-fixed-header .deped-compact-menu-dock .nav-menu .nav-item,
html body .deped-fixed-header .deped-compact-menu-dock .nav-menu .quick-nav-btn,
html body .deped-fixed-header .deped-compact-menu-dock .itrack-management-toggle {
	min-height:36px !important;
	padding:8px 11px !important;
	background:transparent !important;
	background-image:none !important;
	border:0 !important;
	border-radius:0 !important;
	box-shadow:none !important;
	color:var(--navy) !important;
	filter:none !important;
}

html body .deped-fixed-header .deped-compact-menu-dock .nav-menu .nav-item:hover,
html body .deped-fixed-header .deped-compact-menu-dock .nav-menu .nav-item:focus-visible,
html body .deped-fixed-header .deped-compact-menu-dock .nav-menu .nav-item.nav-current,
html body .deped-fixed-header .deped-compact-menu-dock .itrack-management-toggle:hover {
	background:transparent !important;
	background-image:none !important;
	color:var(--project-green) !important;
	border:0 !important;
	box-shadow:none !important;
}

html body .deped-fixed-header .itrack-management-submenu .nav-item {
	width:100% !important;
	justify-content:flex-start !important;
	padding:10px 12px !important;
	background:transparent !important;
	background-image:none !important;
	border:0 !important;
	border-radius:0 !important;
	box-shadow:none !important;
	color:var(--navy) !important;
}

html body .deped-fixed-header .itrack-management-submenu .nav-item:hover,
html body .deped-fixed-header .itrack-management-submenu .nav-item:focus-visible {
	background:#f4faf7 !important;
	background-image:none !important;
	color:var(--project-green) !important;
	box-shadow:none !important;
}

html body .deped-fixed-header .nav-greeting {
	background:transparent !important;
	border:0 !important;
	box-shadow:none !important;
}

.deped-mobile-menu-toggle { display:none !important; }
@media (max-width:1024px) and (hover:none) and (pointer:coarse) {
	.deped-mobile-menu-toggle:not([hidden]) { display:inline-flex !important; }
}

/* Navigation integration for theme toggle */
.nav-menu .theme-toggle-nav {
	margin-left: 6px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	order: 999;
}

/* Keep account identity and session controls on the opposite side. */
html body .deped-fixed-header .deped-compact-menu-dock .nav-menu > .nav-greeting {
	margin-left:auto !important;
}

/* Responsive layout for theme toggle on mobile */
@media (max-width: 760px) {
	.nav-menu .theme-toggle-nav {
		margin-left: 6px;
		padding: 8px 10px;
		font-size: 1rem;
	}
}

/* Unified role navigation: plain icon-and-text controls with underline only. */
html body .deped-fixed-header button.nav-item,
html body .deped-fixed-header button.quick-nav-btn,
html body .deped-fixed-header button.itrack-management-toggle,
html body .deped-fixed-header button.theme-toggle-nav {
	min-height:34px !important;
	padding:7px 9px !important;
	background:transparent !important;
	background-color:transparent !important;
	background-image:none !important;
	border:0 !important;
	border-radius:0 !important;
	box-shadow:none !important;
	color:var(--navy) !important;
	filter:none !important;
	transform:none !important;
}

html body .deped-fixed-header button.nav-item:hover,
html body .deped-fixed-header button.nav-item:focus-visible,
html body .deped-fixed-header button.nav-item.nav-current,
html body .deped-fixed-header button.quick-nav-btn:hover,
html body .deped-fixed-header button.quick-nav-btn.active,
html body .deped-fixed-header button.itrack-management-toggle:hover,
html body .deped-fixed-header button.theme-toggle-nav:hover {
	background:transparent !important;
	background-color:transparent !important;
	background-image:none !important;
	box-shadow:none !important;
	color:var(--project-green) !important;
	filter:none !important;
	transform:none !important;
}

html body .deped-fixed-header .itrack-management-submenu button.nav-item:hover,
html body .deped-fixed-header .itrack-management-submenu button.nav-item:focus-visible,
html body .deped-fixed-header .itrack-management-submenu button.nav-item.nav-current {
	background:transparent !important;
	background-color:transparent !important;
	background-image:none !important;
	box-shadow:none !important;
}

@media (max-width:1024px) and (hover:none) and (pointer:coarse) {
	html body .deped-fixed-header .deped-compact-menu-dock .nav-menu > .nav-greeting {
		margin-left:0 !important;
	}
}

/* Project i-Track 2026 interface refresh */
:root {
	--surface-page:#f4f7f8;
	--surface-card:#ffffff;
	--navy:#123047;
	--navy-soft:#607481;
	--project-green:#177a67;
	--project-blue:#176d92;
	--ui-border:#dce6e8;
	--ui-border-strong:#c7d6d9;
	--ui-soft:#eef5f4;
	--ui-accent-soft:#e7f2f0;
	--ui-shadow:0 10px 30px rgba(18,48,71,.07);
	--ui-shadow-hover:0 14px 34px rgba(18,48,71,.11);
	--ui-radius:16px;
}

html.has-deped-fixed-header body,
body {
	background:#f4f7f8 !important;
	color:var(--navy) !important;
	font-family:Inter,Manrope,"Segoe UI",Arial,sans-serif !important;
	line-height:1.55;
}

.shell,
.page,
.page-stack,
.account-shell,
.login-shell {
	width:min(1240px,calc(100% - 40px)) !important;
	margin-inline:auto !important;
}

.panel,
.card,
.form-card,
.stat-card,
.dashboard-card,
.content-card,
.dialog,
.modal {
	background:#fff !important;
	border:1px solid var(--ui-border) !important;
	border-radius:var(--ui-radius) !important;
	box-shadow:var(--ui-shadow) !important;
}

.panel,
.form-card,
.content-card {
	margin-bottom:20px !important;
}

h1,h2,h3,h4,h5,h6 {
	color:var(--navy) !important;
	letter-spacing:-.02em !important;
	line-height:1.2 !important;
}

h1 { font-weight:800 !important; }
h2,h3 { font-weight:700 !important; }
.subtitle,.muted,.helper-text,small { color:var(--navy-soft) !important; }

.deped-fixed-header {
	background:rgba(255,255,255,.97) !important;
	border-bottom:1px solid var(--ui-border) !important;
	box-shadow:0 4px 18px rgba(18,48,71,.07) !important;
	backdrop-filter:blur(18px);
}

.deped-compact-bar {
	gap:12px;
	background:transparent !important;
	padding-inline:clamp(12px,2.5vw,38px) !important;
}

.deped-compact-brand {
	height:46px;
	padding:2px 5px;
	border:0;
	border-radius:10px;
	box-shadow:none;
}

.deped-compact-menu-dock .nav-menu { gap:0 !important; }
html body .deped-fixed-header button.nav-item,
html body .deped-fixed-header button.quick-nav-btn,
html body .deped-fixed-header button.itrack-management-toggle,
html body .deped-fixed-header button.theme-toggle-nav {
	min-height:34px !important;
	padding:6px 7px !important;
	font-size:.72rem !important;
	font-weight:650 !important;
	letter-spacing:0 !important;
}

html body .deped-fixed-header .nav-greeting {
	padding:5px 7px !important;
	font-size:.72rem !important;
}

html body .deped-fixed-header .nav-item-icon {
	margin-right:4px !important;
	font-size:.78rem !important;
}

.deped-compact-menu-dock .nav-item::after {
	left:9px;
	right:9px;
	bottom:0;
	height:2px;
	background:var(--project-green) !important;
}

.itrack-management-submenu {
	padding:8px !important;
	border:1px solid var(--ui-border) !important;
	border-radius:12px !important;
	box-shadow:0 18px 40px rgba(18,48,71,.14) !important;
}

button:not(.theme-toggle-nav):not(.theme-toggle-fixed):not(.nav-item):not(.deped-mobile-menu-toggle):not(.tool):not(.tab),
.btn:not(.nav-item),a.btn,input[type="submit"],input[type="button"] {
	min-height:42px !important;
	padding:10px 17px !important;
	background:var(--project-blue) !important;
	background-image:none !important;
	border:1px solid var(--project-blue) !important;
	border-radius:10px !important;
	box-shadow:0 5px 12px rgba(23,109,146,.15) !important;
	color:#fff !important;
	font-weight:650 !important;
	letter-spacing:0 !important;
	text-shadow:none !important;
	transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease !important;
}

button:not(.theme-toggle-nav):not(.theme-toggle-fixed):not(.nav-item):not(.deped-mobile-menu-toggle):not(.tool):not(.tab):hover,
.btn:not(.nav-item):hover,a.btn:hover,input[type="submit"]:hover,input[type="button"]:hover {
	background:#125d7d !important;
	border-color:#125d7d !important;
	box-shadow:0 8px 18px rgba(23,109,146,.2) !important;
	filter:none !important;
	transform:translateY(-1px) !important;
}

.btn-secondary,.btn-outline,button.secondary,button.btn-secondary {
	background:#fff !important;
	background-image:none !important;
	border-color:var(--ui-border-strong) !important;
	box-shadow:0 3px 9px rgba(18,48,71,.06) !important;
	color:var(--navy) !important;
}

.btn-secondary:hover,.btn-outline:hover,button.secondary:hover,button.btn-secondary:hover {
	background:var(--ui-soft) !important;
	border-color:#9cb9b5 !important;
	color:var(--project-green) !important;
}

input,textarea,select {
	min-height:42px;
	background:#fff !important;
	border:1px solid var(--ui-border-strong) !important;
	border-radius:9px !important;
	box-shadow:none !important;
	color:var(--navy) !important;
}

input:focus,textarea:focus,select:focus {
	border-color:var(--project-blue) !important;
	box-shadow:0 0 0 3px rgba(23,109,146,.13) !important;
}

label,.field label { color:#344f5e !important; font-weight:650 !important; }

.section-title,.card-title,.profile-bar,.dialog-head {
	background:#f8fafb !important;
	background-image:none !important;
	border-bottom:1px solid var(--ui-border) !important;
}

.cards,.metrics,.summary-cards { gap:14px !important; }
.card:hover,.stat-card:hover,.dashboard-card:hover {
	border-color:var(--ui-border-strong) !important;
	box-shadow:var(--ui-shadow-hover) !important;
}

.table-wrap {
	border:1px solid var(--ui-border) !important;
	border-radius:12px !important;
	overflow:auto;
	background:#fff;
}

table {
	width:100%;
	border:0 !important;
	border-collapse:collapse !important;
	border-radius:0 !important;
	box-shadow:none !important;
}

table th {
	background:#eef4f5 !important;
	background-image:none !important;
	color:#294959 !important;
	font-size:.75rem !important;
	font-weight:750 !important;
	letter-spacing:.025em;
	text-transform:none;
}

table th,table td { border-color:#e4ebed !important; }
table tbody tr:nth-child(even) { background:#fafcfc; }
table tbody tr:hover { background:#f1f7f6; }

.badge,.status-badge,.status {
	border-radius:999px !important;
	box-shadow:none !important;
}

.message,.warning,.alert,.readonly-notice,.edit-indicator {
	border-radius:10px !important;
	box-shadow:none !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"].has-deped-fixed-header body { background:#111a20 !important; }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .modal { background:#18242b !important; border-color:#2a3c45 !important; }
html[data-theme="dark"] .deped-fixed-header { background:rgba(18,28,34,.97) !important; border-color:#2a3c45 !important; }
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .profile-bar,
html[data-theme="dark"] .dialog-head { background:#1c2a32 !important; border-color:#2a3c45 !important; }

@media (max-width:1024px) {
	.shell,.page,.page-stack,.account-shell,.login-shell { width:min(100% - 24px,1240px) !important; }
	.deped-compact-bar { padding-inline:14px !important; }
}

@media (max-width:760px) {
	:root { --ui-radius:13px; }
	.shell,.page,.page-stack,.account-shell,.login-shell { width:calc(100% - 16px) !important; }
	.panel,.form-card,.content-card { margin-bottom:14px !important; }
	.profile-bar,.card-title,.dialog-head,.section-title { padding-inline:14px !important; }
	.cards,.metrics,.summary-cards { grid-template-columns:1fr !important; }
	button:not(.theme-toggle-nav):not(.theme-toggle-fixed):not(.nav-item):not(.deped-mobile-menu-toggle):not(.tool):not(.tab),
	.btn:not(.nav-item),a.btn,input[type="submit"],input[type="button"] { min-height:44px !important; }
}

@media (prefers-reduced-motion:reduce) {
	*,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* Blue side-panel navigation */
:root { --itrack-side-width:260px; --itrack-side-blue:#0b4f87; --itrack-side-blue-deep:#073b68; --itrack-side-yellow:#f5c52b; }

html.has-deped-fixed-header body {
	padding-top:72px !important;
	padding-left:var(--itrack-side-width) !important;
	transition:padding-left .28s ease !important;
}

.deped-fixed-header {
	inset:0 auto 0 0 !important;
	width:var(--itrack-side-width) !important;
	height:100vh !important;
	height:100dvh !important;
	background:linear-gradient(180deg,var(--itrack-side-blue) 0%,var(--itrack-side-blue-deep) 100%) !important;
	border:0 !important;
	border-right:1px solid rgba(245,197,43,.42) !important;
	box-shadow:8px 0 28px rgba(7,38,67,.18) !important;
}

.deped-compact-bar {
	position:relative !important;
	inset:auto !important;
	display:flex !important;
	flex-direction:column !important;
	align-items:stretch !important;
	height:100% !important;
	gap:14px !important;
	padding:18px 14px !important;
	background:transparent !important;
	white-space:normal !important;
}

.deped-compact-brand {
	width:100% !important;
	height:auto !important;
	display:flex !important;
	flex-direction:column !important;
	gap:7px !important;
	padding:2px 5px 16px !important;
	background:transparent !important;
	border:0 !important;
	border-bottom:1px solid rgba(255,255,255,.2) !important;
	border-radius:0 !important;
	box-shadow:none !important;
}

.deped-compact-logo { max-width:74px !important; max-height:74px !important; }
.deped-compact-brand-name { color:#fff; font-size:.82rem; font-weight:850; letter-spacing:.11em; text-align:center; }
.deped-compact-menu-dock { display:block !important; flex:1 1 auto !important; width:100% !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; scrollbar-color:rgba(245,197,43,.55) transparent; }
.deped-compact-menu-dock .nav-menu { display:flex !important; flex-direction:column !important; align-items:stretch !important; width:100% !important; min-height:100% !important; gap:7px !important; overflow:visible !important; }

html body .deped-fixed-header button.nav-item,
html body .deped-fixed-header button.quick-nav-btn,
html body .deped-fixed-header button.itrack-management-toggle,
html body .deped-fixed-header button.theme-toggle-nav,
html body .deped-fixed-header .nav-greeting {
	display:grid !important;
	grid-template-columns:28px minmax(0,1fr) auto !important;
	align-items:center !important;
	column-gap:10px !important;
	width:100% !important;
	min-height:43px !important;
	justify-content:flex-start !important;
	margin:0 !important;
	padding:9px 11px !important;
	background:transparent !important;
	border:1px solid transparent !important;
	border-radius:10px !important;
	color:#fff !important;
	font-size:.82rem !important;
	text-align:left !important;
	transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease !important;
}

html body .deped-fixed-header button.nav-item:hover,
html body .deped-fixed-header button.nav-item:focus-visible,
html body .deped-fixed-header button.quick-nav-btn:hover,
html body .deped-fixed-header button.itrack-management-toggle:hover,
html body .deped-fixed-header button.theme-toggle-nav:hover {
	background:#147db5 !important;
	border-color:transparent !important;
	color:#fff !important;
	box-shadow:0 7px 18px rgba(0,0,0,.2) !important;
	transform:translateX(5px) !important;
}

html body .deped-fixed-header button.nav-item.nav-current,
html body .deped-fixed-header button.quick-nav-btn.active,
html body .deped-fixed-header button.itrack-management-toggle.nav-current {
	background:#147db5 !important;
	border-color:var(--itrack-side-yellow) !important;
	color:#fff !important;
	box-shadow:inset 4px 0 0 var(--itrack-side-yellow),0 7px 18px rgba(0,0,0,.2) !important;
	transform:none !important;
}

html body .deped-fixed-header button.nav-item:focus-visible,
html body .deped-fixed-header button.quick-nav-btn:focus-visible,
html body .deped-fixed-header button.itrack-management-toggle:focus-visible {
	outline:2px solid var(--itrack-side-yellow) !important;
	outline-offset:2px !important;
}

.deped-compact-menu-dock .nav-item::after { display:none !important; }
.nav-menu .nav-item-icon { display:inline-grid !important; grid-column:1 !important; place-items:center !important; width:28px !important; height:28px !important; flex:0 0 28px !important; margin:0 !important; border-radius:8px !important; background:var(--itrack-side-yellow) !important; color:#123047 !important; font-size:.82rem !important; text-align:center !important; }
.nav-menu .management-caret { grid-column:3 !important; justify-self:end !important; margin:0 !important; }
.itrack-management-menu { width:100% !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; }
.itrack-management-submenu { position:static !important; display:flex !important; flex-direction:column !important; min-width:0 !important; width:100% !important; max-height:0 !important; margin:0 !important; padding:0 0 0 10px !important; overflow:hidden !important; opacity:0 !important; visibility:hidden !important; transform:translateY(-7px) !important; pointer-events:none !important; background:rgba(2,31,57,.28) !important; border:0 !important; border-left:2px solid rgba(245,197,43,.7) !important; border-radius:8px !important; box-shadow:none !important; transition:max-height .48s ease,opacity .34s ease,transform .42s ease,padding .42s ease,margin .42s ease,visibility .34s ease !important; }
.itrack-management-menu:hover > .itrack-management-submenu,
.itrack-management-menu:focus-within > .itrack-management-submenu,
.itrack-management-menu.is-open > .itrack-management-submenu { max-height:620px !important; margin:5px 0 4px !important; padding:6px 0 6px 10px !important; opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; pointer-events:auto !important; }
.itrack-management-submenu::before { display:none !important; }
html body .deped-fixed-header .itrack-management-submenu button.nav-item { color:#eef8ff !important; }
html body .deped-fixed-header .nav-greeting { color:#d9efff !important; border-color:rgba(255,255,255,.12) !important; }
.deped-fixed-header .nav-greeting[hidden] { display:none !important; }
.deped-fixed-header .nav-menu button.nav-item,
.deped-fixed-header .nav-menu button.quick-nav-btn,
.deped-fixed-header .nav-menu button.itrack-management-toggle,
.deped-fixed-header .nav-menu button.theme-toggle-nav,
.deped-fixed-header .nav-menu .nav-greeting,
.deped-fixed-header .nav-menu .management-caret { color:#fff !important; -webkit-text-fill-color:#fff !important; }
.deped-fixed-header .nav-menu .nav-item-icon { color:#123047 !important; -webkit-text-fill-color:#123047 !important; }
.nav-menu > .nav-greeting { margin-top:auto !important; }
.nav-menu .theme-toggle-nav { order:initial !important; }
.deped-mobile-menu-toggle { border-color:var(--itrack-side-yellow) !important; }
.deped-mobile-menu-toggle span { background:#fff !important; }

@keyframes itrack-side-button-hover {
	0% { transform:translateX(0); }
	60% { transform:translateX(7px); }
	100% { transform:translateX(5px); }
}

@media (hover:hover) and (pointer:fine) {
	html body .deped-fixed-header button.nav-item:hover,
	html body .deped-fixed-header button.quick-nav-btn:hover,
	html body .deped-fixed-header button.itrack-management-toggle:hover,
	html body .deped-fixed-header button.theme-toggle-nav:hover { animation:itrack-side-button-hover .28s ease-out both !important; }
}

@media (max-width:1024px) {
	html.has-deped-fixed-header body { padding-left:0 !important; padding-top:68px !important; }
	.deped-fixed-header { width:68px !important; height:68px !important; overflow:visible !important; border-radius:0 0 16px 0 !important; transition:width .28s ease,height .28s ease !important; }
	.deped-fixed-header.mobile-menu-open { width:min(286px,88vw) !important; height:100vh !important; height:100dvh !important; border-radius:0 !important; }
	.deped-compact-bar { padding:12px !important; gap:10px !important; }
	.deped-compact-brand { display:none !important; }
	.deped-mobile-menu-toggle:not([hidden]) { display:inline-flex !important; margin:0 !important; flex:0 0 42px !important; }
	.deped-compact-menu-dock { position:static !important; inset:auto !important; display:none !important; width:100% !important; max-height:none !important; padding:0 !important; overflow-y:auto !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; opacity:0 !important; visibility:hidden !important; transform:none !important; pointer-events:none !important; }
	.deped-fixed-header.mobile-menu-open .deped-compact-menu-dock { display:block !important; padding:0 !important; opacity:1 !important; visibility:visible !important; transform:none !important; pointer-events:auto !important; }
}

@media (prefers-reduced-motion:reduce) {
	html body .deped-fixed-header button.nav-item,
	html body .deped-fixed-header button.quick-nav-btn,
	html body .deped-fixed-header button.itrack-management-toggle,
	html body .deped-fixed-header button.theme-toggle-nav { animation:none !important; transform:none !important; }
}

/* Fixed page-name header beside the sidebar */
.itrack-page-titlebar {
	position:fixed;
	top:0;
	left:var(--itrack-side-width);
	right:0;
	z-index:9500;
	height:72px;
	display:flex;
	align-items:center;
	gap:12px;
	padding:0 clamp(20px,3vw,42px);
	background:rgba(255,255,255,.97);
	border-bottom:1px solid #d8e4e8;
	box-shadow:0 5px 20px rgba(18,48,71,.08);
	backdrop-filter:blur(16px);
}
.itrack-page-titlebar-marker { width:5px; height:28px; flex:0 0 5px; border-radius:999px; background:var(--itrack-side-yellow); box-shadow:0 0 0 4px rgba(245,197,43,.14); }
.itrack-page-titlebar strong { color:#123047; font-size:clamp(1rem,1.7vw,1.28rem); font-weight:850; letter-spacing:.01em; }
.itrack-school-year { margin-left:auto; padding:7px 12px; border:1px solid #b9ddd0; border-radius:999px; background:#e9f8f1; color:#126c50; font-size:.72rem; font-weight:850; white-space:nowrap; }
.itrack-page-titlebar .itrack-header-signout { margin-left:0; }
.itrack-header-signout { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; margin-left:auto; padding:8px 14px; border:1px solid #c9dce5; border-radius:10px; background:#fff; color:#123047; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; box-shadow:0 4px 12px rgba(18,48,71,.08); transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease; }
.itrack-header-signout span { display:inline-grid; place-items:center; width:25px; height:25px; border-radius:7px; background:var(--itrack-side-yellow); color:#123047; font-size:.92rem; }
.itrack-header-signout:hover,.itrack-header-signout:focus-visible { background:#147db5; border-color:var(--itrack-side-yellow); color:#fff; transform:translateY(-1px); box-shadow:0 7px 16px rgba(11,79,135,.2); }
.itrack-header-signout:focus-visible { outline:2px solid var(--itrack-side-yellow); outline-offset:2px; }
html[data-theme="dark"] .itrack-page-titlebar { background:rgba(24,36,43,.97); border-color:#2a3c45; }
html[data-theme="dark"] .itrack-page-titlebar strong { color:#f0f7fa; }
html[data-theme="dark"] .itrack-school-year { border-color:#315d53; background:#173e36; color:#a9ead5; }
html[data-theme="dark"] .itrack-header-signout { background:#20343f; border-color:#3f5865; color:#f0f7fa; }

@media (max-width:1024px) {
	.itrack-page-titlebar { left:68px; height:68px; padding:0 16px; }
	.itrack-page-titlebar-marker { height:24px; }
}

@media (max-width:480px) {
	.itrack-page-titlebar { gap:9px; padding:0 12px; }
	.itrack-page-titlebar strong { max-width:calc(100vw - 205px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
	.itrack-school-year { padding:6px 9px; font-size:.64rem; }
	.itrack-header-signout { gap:6px; min-height:38px; padding:7px 9px; font-size:.74rem; }
	.itrack-header-signout span { width:23px; height:23px; }
}

/* Shared footer for every signed-in menu page */
.itrack-site-footer {
	position:relative;
	width:100%;
	margin-top:clamp(30px,5vw,64px);
	padding:26px clamp(18px,4vw,48px);
	background:#fff;
	border-top:1px solid #d9e5e8;
	box-shadow:0 -8px 24px rgba(18,48,71,.04);
	color:#31566d;
}

.itrack-site-footer-inner {
	width:min(1180px,100%);
	margin:0 auto;
	display:grid;
	grid-template-columns:minmax(220px,1fr) minmax(280px,1.35fr) minmax(250px,1fr);
	align-items:center;
	gap:26px;
}

.itrack-footer-brand { display:flex; align-items:center; gap:13px; }
.itrack-footer-logo { display:block; width:58px; height:58px; object-fit:contain; flex:0 0 58px; }
.itrack-footer-brand strong { display:block; color:#123047; font-size:1.02rem; letter-spacing:.025em; }
.itrack-footer-brand span { display:block; margin-top:2px; color:#6b8190; font-size:.69rem; letter-spacing:.12em; }
.itrack-footer-rights,.itrack-footer-credit { margin:0; color:#4f6f82 !important; font-size:.78rem; line-height:1.65; }
.itrack-footer-rights { text-align:center; font-weight:750; letter-spacing:.025em; }
.itrack-footer-rights span { font-weight:500; letter-spacing:0; }
.itrack-footer-credit { text-align:right; }
.itrack-footer-credit a { color:#087b62; font-weight:850; text-decoration:none; border-bottom:2px solid rgba(245,197,43,.8); transition:color .2s ease,border-color .2s ease; }
.itrack-footer-credit a:hover,.itrack-footer-credit a:focus-visible { color:#0b4f87; border-color:#0b4f87; }

html[data-theme="dark"] .itrack-site-footer { background:#18242b; border-color:#2a3c45; color:#d8e7ee; }
html[data-theme="dark"] .itrack-footer-brand strong { color:#f0f7fa; }
html[data-theme="dark"] .itrack-footer-brand span,
html[data-theme="dark"] .itrack-footer-rights,
html[data-theme="dark"] .itrack-footer-credit { color:#b8cbd4 !important; }

@media (max-width:860px) {
	.itrack-site-footer-inner { grid-template-columns:1fr; gap:16px; justify-items:center; }
	.itrack-footer-rights,.itrack-footer-credit { text-align:center; }
}

@media (max-width:480px) {
	.itrack-site-footer { padding:22px 14px; }
	.itrack-footer-brand { flex-direction:column; text-align:center; gap:7px; }
	.itrack-footer-logo { width:52px; height:52px; flex-basis:52px; }
}

/* Screen-fit tables across Project i-Track */
html body .table-wrap,
html body [class*="table-wrap"],
html body [class*="table-container"] {
	width:100% !important;
	max-width:100% !important;
	overflow-x:hidden !important;
}

html body table {
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
	table-layout:fixed !important;
}

html body table th,
html body table td {
	min-width:0 !important;
	max-width:none !important;
	padding:clamp(7px,1vw,13px) clamp(5px,.8vw,11px) !important;
	overflow-wrap:anywhere !important;
	word-break:normal !important;
	white-space:normal !important;
	vertical-align:top !important;
}

html body table th {
	font-size:clamp(.64rem,.75vw,.76rem) !important;
	line-height:1.25 !important;
}

html body table td {
	font-size:clamp(.68rem,.86vw,.86rem) !important;
	line-height:1.38 !important;
}

html body table input,
html body table select,
html body table button,
html body table .btn {
	max-width:100% !important;
	min-width:0 !important;
}

html body table button,
html body table .btn {
	padding:7px 9px !important;
	white-space:normal !important;
}

@media (max-width:900px) {
	html body table th,
	html body table td { padding:7px 5px !important; }
	html body table th { font-size:.62rem !important; }
	html body table td { font-size:.68rem !important; }
}

@media (max-width:560px) {
	html body table th,
	html body table td { padding:6px 3px !important; }
	html body table th { font-size:.56rem !important; letter-spacing:0 !important; }
	html body table td { font-size:.62rem !important; line-height:1.3 !important; }
	html body table input[type="checkbox"] { width:16px !important; height:16px !important; min-height:16px !important; }
}

/* Consistent Project i-Track typography */
html body,
html body button,
html body input,
html body select,
html body textarea {
	font-family:Manrope,Inter,"Segoe UI",Arial,sans-serif !important;
}

html body {
	font-size:clamp(.88rem,.18vw + .84rem,1rem) !important;
	line-height:1.55 !important;
}

html body h1 { font-size:clamp(1.75rem,3vw,2.65rem) !important; line-height:1.12 !important; letter-spacing:-.035em !important; }
html body h2 { font-size:clamp(1.22rem,2vw,1.65rem) !important; line-height:1.25 !important; letter-spacing:-.02em !important; }
html body h3 { font-size:clamp(1rem,1.35vw,1.22rem) !important; line-height:1.32 !important; }

html body .deped-fixed-header button.nav-item,
html body .deped-fixed-header button.quick-nav-btn,
html body .deped-fixed-header button.itrack-management-toggle {
	font-size:clamp(.78rem,.45vw + .68rem,.9rem) !important;
	line-height:1.28 !important;
}

@media (max-width:560px) {
	html body { font-size:.88rem !important; }
	html body h1 { font-size:1.65rem !important; }
	html body h2 { font-size:1.2rem !important; }
}

/* Compact spacing for every signed-in menu page */
html.has-deped-fixed-header { --itrack-side-width:235px; }

html.has-deped-fixed-header body {
	padding-top:60px !important;
	font-size:clamp(.8rem,.16vw + .77rem,.9rem) !important;
	line-height:1.42 !important;
	display:flex !important;
	flex-direction:column !important;
	min-height:100vh !important;
	min-height:100dvh !important;
}

html.has-deped-fixed-header .itrack-site-footer {
	flex:0 0 auto !important;
	margin-top:auto !important;
}

html.has-deped-fixed-header .deped-fixed-header { width:var(--itrack-side-width) !important; }
html.has-deped-fixed-header .deped-compact-bar { gap:9px !important; padding:12px 10px !important; }
html.has-deped-fixed-header .deped-compact-brand { gap:4px !important; padding:0 4px 10px !important; }
html.has-deped-fixed-header .deped-compact-logo { max-width:58px !important; max-height:58px !important; }
html.has-deped-fixed-header .deped-compact-brand-name { font-size:.72rem !important; }
html.has-deped-fixed-header .deped-compact-menu-dock .nav-menu { gap:4px !important; }

html body .deped-fixed-header button.nav-item,
html body .deped-fixed-header button.quick-nav-btn,
html body .deped-fixed-header button.itrack-management-toggle {
	min-height:38px !important;
	padding:7px 8px !important;
	column-gap:8px !important;
	font-size:clamp(.72rem,.35vw + .66rem,.82rem) !important;
}

html.has-deped-fixed-header .nav-menu .nav-item-icon {
	width:25px !important;
	height:25px !important;
	flex-basis:25px !important;
	border-radius:7px !important;
	font-size:.72rem !important;
}

html.has-deped-fixed-header .itrack-page-titlebar {
	left:var(--itrack-side-width) !important;
	height:60px !important;
	gap:10px !important;
	padding:0 clamp(14px,2vw,26px) !important;
}

html.has-deped-fixed-header .itrack-page-titlebar-marker { height:23px !important; }
html.has-deped-fixed-header .itrack-page-titlebar strong { font-size:clamp(.9rem,1.15vw,1.05rem) !important; }
html.has-deped-fixed-header .itrack-header-signout { min-height:36px !important; padding:6px 10px !important; font-size:.75rem !important; }

/* Selected sidebar item: translucent box with a yellow bottom line only. */
html body .deped-fixed-header button.nav-item,
html body .deped-fixed-header button.quick-nav-btn,
html body .deped-fixed-header button.itrack-management-toggle {
	border:1px solid transparent !important;
	box-shadow:none !important;
}

html body .deped-fixed-header button.nav-item:not(.nav-current):hover,
html body .deped-fixed-header button.quick-nav-btn:not(.active):hover,
html body .deped-fixed-header button.itrack-management-toggle:not(.nav-current):hover {
	background:rgba(72,164,216,.22) !important;
	border-color:transparent !important;
	box-shadow:0 5px 14px rgba(2,31,57,.11) !important;
	transform:translateX(3px) !important;
}

html body .deped-fixed-header button.nav-item.nav-current,
html body .deped-fixed-header button.quick-nav-btn.active,
html body .deped-fixed-header button.itrack-management-toggle.nav-current {
	background:rgba(255,255,255,.13) !important;
	border-color:rgba(255,255,255,.34) !important;
	box-shadow:inset 0 -4px 0 var(--itrack-side-yellow),0 7px 18px rgba(0,0,0,.16) !important;
	transform:none !important;
}

html body .deped-fixed-header button.nav-item:not(.nav-current) .nav-item-icon,
html body .deped-fixed-header button.itrack-management-toggle:not(.nav-current) .nav-item-icon {
	background:transparent !important;
	color:#fff !important;
	-webkit-text-fill-color:#fff !important;
}

html body .deped-fixed-header button.nav-item.nav-current .nav-item-icon,
html body .deped-fixed-header button.itrack-management-toggle.nav-current .nav-item-icon {
	background:transparent !important;
	color:#fff !important;
	-webkit-text-fill-color:#fff !important;
}

html body .deped-fixed-header button.nav-item:not(.nav-current):focus-visible,
html body .deped-fixed-header button.quick-nav-btn:not(.active):focus-visible,
html body .deped-fixed-header button.itrack-management-toggle:not(.nav-current):focus-visible {
	outline:2px solid #75cef1 !important;
	outline-offset:2px !important;
}
html.has-deped-fixed-header .itrack-header-signout span { width:22px !important; height:22px !important; font-size:.78rem !important; }

/* Layered blue sidebar menu cards with a curved yellow selected indicator. */
html body .deped-fixed-header {
	background:
		radial-gradient(circle at 86% 18%,rgba(63,151,207,.2),transparent 34%),
		linear-gradient(135deg,rgba(255,255,255,.035) 0 24%,transparent 24% 58%,rgba(0,35,68,.1) 58% 100%),
		linear-gradient(180deg,#0c558f 0%,#084675 100%) !important;
}

html body .deped-fixed-header button.nav-item,
html body .deped-fixed-header button.quick-nav-btn,
html body .deped-fixed-header button.itrack-management-toggle {
	position:relative !important;
	overflow:hidden !important;
	border-radius:13px !important;
}

html body .deped-fixed-header button.nav-item.nav-current,
html body .deped-fixed-header button.quick-nav-btn.active,
html body .deped-fixed-header button.itrack-management-toggle.nav-current {
	background:rgba(255,255,255,.14) !important;
	border-color:rgba(226,240,250,.42) !important;
	box-shadow:0 8px 19px rgba(0,25,49,.2) !important;
}

html body .deped-fixed-header button.nav-item.nav-current::after,
html body .deped-fixed-header button.quick-nav-btn.active::after,
html body .deped-fixed-header button.itrack-management-toggle.nav-current::after {
	content:"" !important;
	display:block !important;
	position:absolute !important;
	left:0 !important;
	right:0 !important;
	bottom:0 !important;
	height:4px !important;
	border-radius:0 0 13px 13px !important;
	background:var(--itrack-side-yellow) !important;
	box-shadow:0 -1px 5px rgba(245,197,43,.3) !important;
}

/* Solid abstract header artwork for the main administrator dashboards. */
.itrack-abstract-hero,
html.itrack-page-admin-students body .hero {
	position:relative !important;
	isolation:isolate !important;
	overflow:hidden !important;
	background-color:#edf7fb !important;
	background-image:
		radial-gradient(circle at 92% 18%,var(--abstract-purple,#d9c8f1) 0 54px,transparent 55px),
		radial-gradient(circle at 84% 112%,var(--abstract-blue,#82c5e8) 0 118px,transparent 119px),
		linear-gradient(150deg,transparent 0 76%,var(--abstract-yellow,#ffe08a) 76% 84%,transparent 84%) !important;
	background-repeat:no-repeat !important;
}

/* Final sidebar menu polish: consistent spacing, alignment, hover, and selection. */
html.has-deped-fixed-header .deped-compact-bar {
	gap:0 !important;
	padding:12px 10px !important;
}

html.has-deped-fixed-header .deped-compact-brand {
	margin:0 !important;
	padding:0 4px 9px !important;
}

html.has-deped-fixed-header .deped-compact-menu-dock {
	margin-top:4px !important;
	padding-top:10px !important;
	border-top:1px solid rgba(214,237,250,.24) !important;
}

.itrack-sidebar-account {
	flex:0 0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	width:calc(100% - 8px);
	margin:8px auto 5px;
	padding:10px 9px 11px;
	border:1px solid rgba(214,237,250,.2);
	border-radius:14px;
	background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(66,164,213,.08));
	box-shadow:0 7px 18px rgba(0,27,52,.12);
	color:#fff;
	text-align:center;
}

.itrack-sidebar-avatar {
	position:relative;
	display:grid;
	place-items:center;
	width:54px;
	height:54px;
	margin-bottom:7px;
	border:3px solid var(--itrack-side-yellow);
	border-radius:50%;
	background:linear-gradient(145deg,#d7f2ff,#8bc5e3);
	box-shadow:0 6px 15px rgba(0,26,50,.24);
	overflow:hidden;
	color:#12405e;
	font-size:.92rem;
	font-weight:850;
}

.itrack-sidebar-avatar img {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
}

.itrack-sidebar-account-name {
	display:block;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:.76rem;
	line-height:1.3;
	letter-spacing:.01em;
}

.itrack-sidebar-account-role,
.itrack-sidebar-account-school {
	display:block;
	max-width:100%;
	margin-top:2px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	color:#cce8f7;
	font-size:.58rem;
	line-height:1.3;
}

.itrack-sidebar-account-school {
	color:#ffe17a;
}

html.has-deped-fixed-header .deped-compact-menu-dock .nav-menu {
	gap:6px !important;
}

html body .deped-fixed-header button.nav-item,
html body .deped-fixed-header button.quick-nav-btn,
html body .deped-fixed-header button.itrack-management-toggle {
	grid-template-columns:28px minmax(0,1fr) auto !important;
	min-height:42px !important;
	padding:7px 9px !important;
	column-gap:9px !important;
	border:1px solid transparent !important;
	border-radius:12px !important;
	font-weight:700 !important;
}

html.has-deped-fixed-header .nav-menu .nav-item-icon {
	width:28px !important;
	height:28px !important;
	flex-basis:28px !important;
	border-radius:8px !important;
	background:rgba(210,237,252,.13) !important;
	color:#eef8ff !important;
	-webkit-text-fill-color:#eef8ff !important;
	transition:background-color .2s ease,color .2s ease,transform .2s ease !important;
}

html body .deped-fixed-header button.nav-item:not(.nav-current):hover,
html body .deped-fixed-header button.quick-nav-btn:not(.active):hover,
html body .deped-fixed-header button.itrack-management-toggle:not(.nav-current):hover {
	background:rgba(41,139,194,.46) !important;
	border-color:rgba(199,231,248,.22) !important;
	box-shadow:0 7px 16px rgba(0,29,55,.16) !important;
	transform:translateX(3px) !important;
}

html body .deped-fixed-header button.nav-item:not(.nav-current):hover .nav-item-icon,
html body .deped-fixed-header button.itrack-management-toggle:not(.nav-current):hover .nav-item-icon {
	background:rgba(255,255,255,.2) !important;
	transform:scale(1.04) !important;
}

html body .deped-fixed-header button.nav-item.nav-current,
html body .deped-fixed-header button.quick-nav-btn.active,
html body .deped-fixed-header button.itrack-management-toggle.nav-current {
	background:linear-gradient(135deg,rgba(33,133,190,.78),rgba(23,116,172,.68)) !important;
	border-color:rgba(214,237,250,.4) !important;
	box-shadow:0 8px 18px rgba(0,25,49,.2) !important;
}

html body .deped-fixed-header button.nav-item.nav-current .nav-item-icon,
html body .deped-fixed-header button.itrack-management-toggle.nav-current .nav-item-icon {
	background:var(--itrack-side-yellow) !important;
	color:#123047 !important;
	-webkit-text-fill-color:#123047 !important;
	box-shadow:0 4px 9px rgba(0,25,49,.18) !important;
}

@media (max-width:1024px) {
	html.has-deped-fixed-header .deped-compact-menu-dock { margin-top:3px !important; padding-top:8px !important; }
	.itrack-sidebar-account { display:none; }
	.deped-fixed-header.mobile-menu-open .itrack-sidebar-account { display:flex; margin-top:5px; }
}

.itrack-abstract-hero::before,
html.itrack-page-admin-students body .hero::before {
	content:"";
	position:absolute;
	z-index:0;
	right:clamp(118px,13vw,205px);
	top:-45px;
	width:95px;
	height:150px;
	border-radius:24px;
	background:var(--abstract-royal,#397ec4);
	transform:rotate(28deg);
	opacity:.9;
	pointer-events:none;
}

.itrack-abstract-hero h1,.itrack-abstract-hero p,.itrack-abstract-hero .management-badge,.itrack-abstract-hero .hero-icon,.itrack-abstract-hero .welcome-banner,
html.itrack-page-admin-students body .hero h1,html.itrack-page-admin-students body .hero p {
	position:relative;
	z-index:1;
}

.itrack-abstract-users { --abstract-blue:#98d9c7; --abstract-purple:#d7c8ef; --abstract-royal:#2b79b8; --abstract-yellow:#ffe39a; }
.itrack-abstract-resources { --abstract-blue:#83c9e8; --abstract-purple:#cfc4ef; --abstract-royal:#357fc6; --abstract-yellow:#ffdf7b; }
.itrack-abstract-students,html.itrack-page-admin-students { --abstract-blue:#91d6cc; --abstract-purple:#d9c7ed; --abstract-royal:#337dbf; --abstract-yellow:#ffe28c; }

@media(max-width:700px) {
	.itrack-abstract-hero,
	html.itrack-page-admin-students body .hero { background-position:center !important; }
	.itrack-abstract-hero::before,
	html.itrack-page-admin-students body .hero::before { right:-36px; top:-68px; opacity:.34; }
}

html.has-deped-fixed-header body > .page,
html.has-deped-fixed-header body > .shell,
html.has-deped-fixed-header main.page,
html.has-deped-fixed-header main.shell {
	gap:12px !important;
}

html.has-deped-fixed-header .panel,
html.has-deped-fixed-header .dashboard-card,
html.has-deped-fixed-header .section-card,
html.has-deped-fixed-header .content-card,
html.has-deped-fixed-header .profile-card {
	padding:clamp(12px,1.25vw,17px) !important;
	border-radius:14px !important;
}

html.has-deped-fixed-header .cards,
html.has-deped-fixed-header .metrics,
html.has-deped-fixed-header .summary-cards,
html.has-deped-fixed-header .dashboard-tile-grid,
html.has-deped-fixed-header .tables {
	gap:10px !important;
}

html.has-deped-fixed-header .card,
html.has-deped-fixed-header .stat-card,
html.has-deped-fixed-header .metric-card {
	min-height:0 !important;
	padding:11px 12px !important;
	gap:9px !important;
	border-radius:12px !important;
}

html.has-deped-fixed-header .card-icon,
html.has-deped-fixed-header .stat-icon,
html.has-deped-fixed-header .metric-icon {
	width:40px !important;
	height:40px !important;
	flex-basis:40px !important;
	border-radius:10px !important;
	font-size:.95rem !important;
}

html.has-deped-fixed-header h1 { margin-bottom:4px !important; font-size:clamp(1.45rem,2.1vw,2.05rem) !important; }
html.has-deped-fixed-header h2 { font-size:clamp(1.05rem,1.45vw,1.3rem) !important; }
html.has-deped-fixed-header h3 { font-size:clamp(.9rem,1vw,1.05rem) !important; }
html.has-deped-fixed-header .subtitle,
html.has-deped-fixed-header .panel-subtitle,
html.has-deped-fixed-header .description { margin-bottom:9px !important; font-size:.82rem !important; }
html.has-deped-fixed-header .section-title { margin-bottom:7px !important; font-size:.78rem !important; }
html.has-deped-fixed-header .live-users-panel { padding:12px 14px !important; }
html.has-deped-fixed-header .live-users-panel .card { min-height:78px !important; padding:9px 11px !important; }
html.has-deped-fixed-header .live-users-panel .card-value { margin-top:2px !important; font-size:1.35rem !important; }
html.has-deped-fixed-header .live-users-panel .card-note { font-size:.61rem !important; }
html.has-deped-fixed-header .dashboard-tile-grid > .panel { padding:13px !important; }
html.has-deped-fixed-header .graph-wrap { min-height:210px !important; padding:8px !important; }

.itrack-chat-widget{position:fixed;right:22px;bottom:22px;z-index:13000;font-family:Manrope,Arial,sans-serif;color:#12334b}.itrack-chat-launcher{position:relative;display:flex;align-items:center;gap:8px;padding:13px 18px;border:0;border-radius:999px;background:#167798;color:#fff;font:800 .9rem/1 Manrope,Arial,sans-serif;box-shadow:0 12px 30px rgba(16,77,104,.3);cursor:pointer}.itrack-chat-launcher:hover{background:#0d6688}.itrack-chat-unread{position:absolute;top:-7px;right:-4px;min-width:23px;height:23px;padding:0 5px;border:2px solid #fff;border-radius:20px;background:#d92d20;color:#fff;font-size:.65rem;line-height:19px;text-align:center}.itrack-chat-panel{position:absolute;right:0;bottom:58px;width:min(390px,calc(100vw - 28px));height:min(570px,calc(100dvh - 110px));overflow:hidden;border:1px solid #c9dfe3;border-radius:18px;background:#fff;box-shadow:0 20px 55px rgba(18,51,75,.28)}.itrack-chat-panel[hidden]{display:none}.itrack-chat-panel header{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;background:linear-gradient(135deg,#126b91,#1789a5);color:#fff}.itrack-chat-panel header strong{display:block;font-size:1rem}.itrack-chat-panel header small{display:block;margin-top:3px;color:#dff6fa;font-size:.68rem}.itrack-chat-close{width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.35rem;cursor:pointer}.itrack-chat-contact-label{display:block;padding:12px 14px 5px;color:#536c79;font-size:.67rem;font-weight:800;text-transform:uppercase}.itrack-chat-contact{display:block;width:calc(100% - 28px);margin:0 14px 10px;padding:9px 10px;border:1px solid #bad8dc;border-radius:9px;background:#fff;color:#173950;font:700 .76rem Manrope,Arial,sans-serif}.itrack-chat-messages{height:calc(100% - 222px);min-height:180px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:#f4f9f9;border-block:1px solid #dbe8e9}.itrack-chat-empty{margin:auto;color:#70858d;font-size:.75rem;text-align:center}.itrack-chat-bubble{max-width:82%;padding:9px 11px;border-radius:13px;background:#fff;border:1px solid #d7e4e6;align-self:flex-start;overflow-wrap:anywhere}.itrack-chat-bubble.is-mine{align-self:flex-end;background:#dff4ee;border-color:#a9dfce}.itrack-chat-bubble p{margin:0;white-space:pre-wrap;font-size:.78rem;line-height:1.45}.itrack-chat-bubble time{display:block;margin-top:5px;color:#6b8089;font-size:.58rem;text-align:right}.itrack-chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;padding:11px 14px 5px}.itrack-chat-form textarea{min-height:42px;max-height:84px;resize:vertical;padding:9px 10px;border:1px solid #bad8dc;border-radius:10px;font:inherit}.itrack-chat-form button{align-self:stretch;padding:0 14px;border:0;border-radius:10px;background:#167798;color:#fff;font-weight:800;cursor:pointer}.itrack-chat-form button:disabled{opacity:.6}.itrack-chat-status{min-height:16px;margin:0;padding:0 14px 7px;color:#368263;font-size:.62rem}.itrack-chat-status.is-error{color:#b42318}

.itrack-chat-launcher[hidden]{display:none}.itrack-chat-panel:not([hidden]){bottom:0;height:min(520px,calc(100dvh - 110px))}.itrack-chat-form textarea:disabled{background:#edf3f4;color:#7a8b91;cursor:not-allowed}.itrack-chat-hint{grid-column:1/-1;color:#72868e;font-size:.57rem}.itrack-chat-empty-state{display:grid;justify-items:center;gap:7px;max-width:270px}.itrack-chat-empty-state>span{font-size:2rem}.itrack-chat-empty-state strong{color:#35576a;font-size:.84rem}.itrack-chat-empty-state p{margin:0;line-height:1.55}

.itrack-chat-panel{width:min(720px,calc(100vw - 28px))}.itrack-chat-layout{display:grid;grid-template-columns:250px 1fr;height:calc(100% - 68px)}.itrack-chat-directory{min-width:0;overflow:auto;padding:12px 10px;border-right:1px solid #dbe8e9;background:#f7fbfb}.itrack-chat-directory>strong{display:block;padding:0 5px 8px;color:#536c79;font-size:.67rem;text-transform:uppercase}.itrack-chat-contact-list{display:grid;gap:6px}.itrack-chat-contact-card{position:relative;display:flex;align-items:center;gap:9px;width:100%;padding:9px;border:1px solid transparent;border-radius:11px;background:transparent;color:#173950;text-align:left;cursor:pointer}.itrack-chat-contact-card:hover{background:#eaf5f5}.itrack-chat-contact-card.is-active{border-color:#a9d8d5;background:#dff2ef}.itrack-chat-avatar{flex:0 0 34px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#dceff4;color:#116e8f;font-size:.68rem;font-weight:900}.itrack-chat-contact-copy{min-width:0;display:block}.itrack-chat-contact-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem}.itrack-chat-contact-copy small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#72858d;font-size:.58rem}.itrack-chat-online{color:#07834f;font-weight:900}.itrack-chat-offline{color:#7b8b91}.itrack-chat-contact-card>b{margin-left:auto;min-width:19px;padding:3px 5px;border-radius:999px;background:#d92d20;color:#fff;font-size:.55rem;text-align:center}.itrack-chat-thread{min-width:0;display:flex;flex-direction:column}.itrack-chat-thread-head{padding:10px 14px;border-bottom:1px solid #dbe8e9}.itrack-chat-thread-head strong{display:block;font-size:.78rem}.itrack-chat-thread-head small{display:block;margin-top:2px;color:#657d87;font-size:.6rem}.itrack-chat-layout .itrack-chat-messages{height:auto;min-height:180px;overflow:auto;display:flex;flex:1;flex-direction:column;gap:8px;padding:12px 14px;background:#f4f9f9;border:0;border-bottom:1px solid #dbe8e9}.itrack-chat-sender{display:block;margin-bottom:4px;color:#126f91;font-size:.6rem}

.itrack-chat-panel{border-color:#b8dadd;box-shadow:0 24px 70px rgba(12,54,76,.32)}.itrack-chat-panel>header{padding:16px 18px;background:linear-gradient(135deg,#0e698d 0%,#159280 100%)}.itrack-chat-directory{padding:13px 11px;background:linear-gradient(180deg,#f8fcfc,#eef8f5)}.itrack-chat-directory-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 9px}.itrack-chat-directory-title>strong{color:#315568;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase}.itrack-chat-online-count{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:#d8f5e6;color:#087347;font-size:.62rem;font-weight:900}.itrack-chat-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0 0 9px}.itrack-chat-tabs button{min-height:32px!important;padding:5px 7px!important;border:1px solid #c9e0df!important;border-radius:9px!important;background:#fff!important;color:#52707d!important;box-shadow:none!important;font-size:.63rem!important;font-weight:800!important}.itrack-chat-tabs button.is-active{border-color:#188d79!important;background:#188d79!important;color:#fff!important}.itrack-chat-contact-list button.itrack-chat-contact-card{display:flex!important;min-height:58px!important;padding:9px!important;border:1px solid #d7e7e7!important;border-radius:13px!important;background:#fff!important;background-image:none!important;color:#173950!important;box-shadow:0 4px 12px rgba(25,80,91,.06)!important;transform:none!important}.itrack-chat-contact-list button.itrack-chat-contact-card:hover{border-color:#8fcfc1!important;background:#f2fbf7!important;box-shadow:0 7px 16px rgba(25,80,91,.1)!important}.itrack-chat-contact-list button.itrack-chat-contact-card.is-active{border-color:#20a27f!important;background:linear-gradient(135deg,#e7f8f1,#f7fcfb)!important;box-shadow:inset 4px 0 #20a27f,0 7px 16px rgba(25,80,91,.09)!important}.itrack-chat-contact-list .itrack-chat-avatar{background:linear-gradient(145deg,#d8f2f6,#e7f8ef);color:#0c7181}.itrack-chat-thread-head{padding:11px 15px;background:#fff}.itrack-chat-layout .itrack-chat-messages{background:linear-gradient(180deg,#f7fbfb,#eef6f5)}.itrack-chat-bubble{box-shadow:0 3px 9px rgba(24,69,84,.06)}

.itrack-chat-launcher.has-unread{animation:itrack-chat-nudge 1.2s ease-in-out infinite}.itrack-chat-launcher.has-unread::after{content:"";position:absolute;inset:-5px;border:3px solid #ffca28;border-radius:999px;pointer-events:none;animation:itrack-chat-ring 1.2s ease-out infinite}.itrack-chat-launcher.has-unread .itrack-chat-unread{display:grid;place-items:center;animation:itrack-chat-badge .8s ease-in-out infinite alternate}@keyframes itrack-chat-nudge{0%,72%,100%{transform:translateX(0)}78%{transform:translateX(-4px)}84%{transform:translateX(4px)}90%{transform:translateX(-2px)}96%{transform:translateX(2px)}}@keyframes itrack-chat-ring{0%{opacity:.9;transform:scale(.96)}75%,100%{opacity:0;transform:scale(1.1)}}@keyframes itrack-chat-badge{from{transform:scale(1)}to{transform:scale(1.16)}}@media (prefers-reduced-motion:reduce){.itrack-chat-launcher.has-unread,.itrack-chat-launcher.has-unread::after,.itrack-chat-launcher.has-unread .itrack-chat-unread{animation:none}}

.itrack-install-app{position:fixed;left:18px;bottom:18px;z-index:12900;display:flex;align-items:center;gap:8px;padding:11px 15px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:#143f63;color:#fff;font:800 .76rem Manrope,Arial,sans-serif;box-shadow:0 10px 28px rgba(14,52,79,.24);cursor:pointer}.itrack-install-app:hover{background:#0d6688}.itrack-install-app[hidden]{display:none}.itrack-install-modal{position:fixed;inset:0;z-index:15000;padding:18px;background:rgba(9,31,48,.58);backdrop-filter:blur(4px);display:grid;place-items:center}.itrack-install-modal[hidden]{display:none}.itrack-install-modal section{position:relative;width:min(430px,100%);box-sizing:border-box;padding:27px;border:1px solid #cde0e4;border-radius:20px;background:#fff;color:#153950;text-align:center;box-shadow:0 24px 65px rgba(5,28,45,.3)}.itrack-install-modal img{width:92px;height:92px;object-fit:contain}.itrack-install-modal h2{margin:10px 0 9px;font-size:1.25rem}.itrack-install-program{margin:-3px 0 10px;color:#167798;font-size:.76rem;font-weight:800;line-height:1.4}.itrack-install-copy p{margin:8px 0;color:#5e737e;font-size:.8rem;line-height:1.55}.itrack-install-copy strong{color:#173d53}.itrack-install-note{padding:9px;border-radius:10px;background:#eff7f6}.itrack-install-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:#edf3f4;color:#31566a;font-size:1.2rem;cursor:pointer}.itrack-install-primary{margin-top:12px;padding:10px 18px;border:0;border-radius:10px;background:#167798;color:#fff;font-weight:800;cursor:pointer}

@media (max-width:1024px) {
	html.has-deped-fixed-header { --itrack-side-width:60px; }
	html.has-deped-fixed-header body { padding-top:60px !important; }
	html.has-deped-fixed-header .deped-fixed-header { width:60px !important; height:60px !important; }
	html.has-deped-fixed-header .deped-fixed-header.mobile-menu-open { width:min(270px,88vw) !important; height:100dvh !important; }
	html.has-deped-fixed-header .itrack-page-titlebar { left:60px !important; height:60px !important; padding:0 12px !important; }
}

@media (max-width:560px) {
	.itrack-chat-widget{right:14px;bottom:14px}.itrack-chat-panel{position:fixed;inset:68px 10px 10px;width:auto;height:auto}.itrack-chat-launcher{padding:12px 15px}.itrack-chat-layout{grid-template-columns:118px 1fr}.itrack-chat-directory{padding:8px 5px}.itrack-chat-contact-list button.itrack-chat-contact-card{display:grid!important;justify-items:center!important;padding:7px 4px!important;text-align:center!important}.itrack-chat-contact-copy{width:100%}.itrack-chat-contact-card>b{position:absolute;top:3px;right:3px}.itrack-chat-avatar{width:30px;height:30px;flex-basis:30px}.itrack-chat-contact-copy small{white-space:normal}.itrack-chat-layout .itrack-chat-messages{min-height:0}
	.itrack-install-app{left:10px;bottom:10px;padding:10px 12px}.itrack-install-app span:last-child{display:none}
	html.has-deped-fixed-header body { font-size:.78rem !important; }
	html.has-deped-fixed-header .panel,
	html.has-deped-fixed-header .dashboard-card,
	html.has-deped-fixed-header .section-card,
	html.has-deped-fixed-header .content-card { padding:10px !important; border-radius:11px !important; }
	html.has-deped-fixed-header h1 { font-size:1.38rem !important; }
	html.has-deped-fixed-header h2 { font-size:1rem !important; }
	html.has-deped-fixed-header .itrack-page-titlebar strong { font-size:.85rem !important; }
}

/* Student Dashboard district cards */
.districts{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;gap:14px!important}.districts button.district{position:relative!important;display:grid!important;grid-template-columns:1fr!important;align-content:start!important;min-height:190px!important;padding:18px!important;overflow:hidden!important;border:1px solid #d3e5df!important;border-radius:16px!important;background:linear-gradient(155deg,#fff 0%,#f5fbf8 100%)!important;background-image:linear-gradient(155deg,#fff 0%,#f5fbf8 100%)!important;color:#173b42!important;text-align:left!important;box-shadow:0 8px 20px rgba(16,47,73,.08)!important;transform:none!important}.districts button.district::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,#158d73,#39b795)}.districts button.district:hover{border-color:#73c6af!important;box-shadow:0 14px 28px rgba(16,80,72,.14)!important;transform:translateY(-3px)!important}.districts button.district:focus-visible{outline:3px solid rgba(32,162,127,.24)!important;outline-offset:3px}.districts button.district.active{border-color:#e3b72f!important;background:linear-gradient(155deg,#fffdf5,#f5fbf8)!important;box-shadow:0 0 0 2px #f3cf58,0 14px 28px rgba(16,80,72,.14)!important}.districts button.district.active::before{background:#e3b72f}.districts .district-title{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important}.districts .district-title strong{min-width:0;color:#123b53!important;font-size:1.05rem!important;line-height:1.28!important;overflow-wrap:anywhere}.districts .district-total{justify-content:center;white-space:nowrap;padding:6px 10px!important;border:1px solid #bae2d4;border-radius:999px;background:#e9f8f2!important;color:#0d7251!important}.districts .district-stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin-top:15px!important}.districts .district-stat{padding:9px 6px!important;border:1px solid #e0ebe7;border-radius:11px;background:#fff!important;text-align:center}.districts .district-stat b{font-size:1.08rem!important}.districts .district-stat small{font-size:.61rem!important;font-weight:600}.districts .district-progress{display:block!important;height:8px!important;margin-top:15px!important;border-radius:999px;background:#e0ebe7!important;overflow:hidden}.districts .district-caption{display:block!important;margin-top:8px!important;color:#607a76!important;font-size:.69rem!important;font-weight:500!important}@media(max-width:680px){.districts{grid-template-columns:1fr!important}.districts button.district{min-height:0!important}}@media(prefers-reduced-motion:reduce){.districts button.district:hover{transform:none!important}}

#districtCards button.district{border-color:#176f89!important;background:#197895!important;background-image:linear-gradient(145deg,#176f8d,#19829a)!important;color:#fff!important}#districtCards button.district:hover{border-color:#57d0b0!important;background-image:linear-gradient(145deg,#146783,#17788f)!important}#districtCards button.district.active{border-color:#f1c83e!important;background-image:linear-gradient(145deg,#176f8d,#177c91)!important}#districtCards button.district .district-title strong{color:#fff!important;text-shadow:0 1px 2px rgba(5,37,55,.25)}#districtCards button.district .district-caption{color:#d8eef4!important}#districtCards button.district .district-stat{color:#173b42!important}#districtCards button.district .district-stat small{color:#617886!important}#districtCards button.district .district-progress{background:#d9ebee!important}