/**
 * Camplus Theme — applies design tokens to Metronic layout
 * Requires: camplus-design-system.css (load first)
 */

/* Neutralize Metronic color theme body/surface bleed (e.g. darkblue.css) */
body {
	background-color: var(--cp-color-background) !important;
}

.page-wrapper,
.page-container,
.page-content-wrapper {
	background-color: var(--cp-color-background);
}

/* ═══════════════════════════════════════════════════════════
   1. APP SHELL — layout, header, sidebar
   ═══════════════════════════════════════════════════════════ */

body.page-header-fixed.page-sidebar-closed-hide-logo.page-content-white {
	background-color: var(--cp-color-background);
	color: var(--cp-color-text);
}

/* Global announcement bar */
.camplus-global-message {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10060;
	background: var(--cp-color-warning);
	color: #7c5a00;
	border-bottom: 1px solid #e6b800;
	min-height: var(--cp-global-message-height);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--cp-space-2) var(--cp-space-4);
	padding-right: 40px;
	font-size: var(--cp-font-size-sm);
	font-weight: var(--cp-font-weight-semibold);
	line-height: var(--cp-line-height-base);
	text-align: center;
	box-shadow: 0 1px 2px rgba(58, 59, 69, 0.08);
}

.camplus-global-message__inner {
	max-width: 72rem;
	width: 100%;
}

body.has-global-message.page-header-fixed .page-header.navbar {
	top: var(--cp-global-message-height);
}

body.has-global-message.page-header-fixed .page-container {
	margin-top: calc(var(--cp-header-height) + var(--cp-global-message-height));
}

body.has-global-message.login .user-login-5 {
	padding-top: var(--cp-global-message-height);
}

.camplus-impersonation-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10055;
	background: #c0392b;
	color: #fff;
	border-bottom: 1px solid #962d22;
	min-height: var(--cp-impersonation-bar-height);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--cp-space-2) var(--cp-space-4);
	font-size: var(--cp-font-size-sm);
	font-weight: var(--cp-font-weight-semibold);
	line-height: var(--cp-line-height-base);
	box-shadow: 0 1px 2px rgba(58, 59, 69, 0.12);
}

body.has-global-message .camplus-impersonation-bar {
	top: var(--cp-global-message-height);
}

.camplus-impersonation-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--cp-space-2) var(--cp-space-3);
	max-width: 72rem;
	width: 100%;
	text-align: center;
}

.camplus-impersonation-bar__exit {
	margin-left: var(--cp-space-2);
	color: #333 !important;
	font-weight: var(--cp-font-weight-semibold);
}

body.has-impersonation-bar.page-header-fixed .page-header.navbar {
	top: var(--cp-impersonation-bar-height);
}

body.has-impersonation-bar.page-header-fixed .page-container {
	margin-top: calc(var(--cp-header-height) + var(--cp-impersonation-bar-height));
}

body.has-global-message.has-impersonation-bar.page-header-fixed .page-header.navbar {
	top: calc(var(--cp-global-message-height) + var(--cp-impersonation-bar-height));
}

body.has-global-message.has-impersonation-bar.page-header-fixed .page-container {
	margin-top: calc(var(--cp-header-height) + var(--cp-global-message-height) + var(--cp-impersonation-bar-height));
}

.page-content,
.page-container {
	background-color: var(--cp-color-background);
}

.page-content-white .page-content {
	background-color: var(--cp-color-background);
}

@media (min-width: 992px) {
	.page-content-wrapper .page-content {
		padding: var(--cp-content-padding);
	}
}

/* Top navbar */
.page-header.navbar {
	background: var(--cp-color-surface) !important;
	background-image: none !important;
	box-shadow: var(--cp-shadow-sm) !important;
	border-bottom: 1px solid var(--cp-color-border);
	height: var(--cp-header-height);
	min-height: var(--cp-header-height);
}

/* Brand block — aligned with sidebar width, no overlap */
.page-header.navbar .page-logo {
	width: var(--cp-sidebar-width);
	max-width: var(--cp-sidebar-width);
	height: var(--cp-header-height);
	background: transparent !important;
	padding: 0 var(--cp-space-3);
	margin: 0 !important;
	border-right: 1px solid var(--cp-color-border);
	display: flex;
	align-items: center;
	overflow: hidden;
	flex-shrink: 0;
}

.page-header.navbar .page-logo > a.camplus-brand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	min-width: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	line-height: 1.15;
}

.page-header.navbar .page-logo .camplus-brand__school,
.page-header.navbar .page-logo .school-name {
	color: var(--cp-color-primary);
	font-size: 0.8125rem;
	font-weight: var(--cp-font-weight-extrabold);
	line-height: 1.2;
	text-shadow: none;
	display: block;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.page-header.navbar .page-logo .camplus-brand__site,
.page-header.navbar .page-logo .site-name,
.page-header.navbar .page-logo span.site-name {
	color: var(--cp-color-text-muted);
	font-size: 0.6875rem;
	font-weight: var(--cp-font-weight-semibold);
	line-height: 1.2;
	display: block;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.page-header.navbar .menu-toggler > span,
.page-header.navbar .menu-toggler > span:before,
.page-header.navbar .menu-toggler > span:after {
	background: var(--cp-color-gray-600) !important;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown {
	height: var(--cp-header-height);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle {
	background-color: transparent !important;
	font-size: var(--cp-font-size-sm);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i {
	color: var(--cp-color-gray-400);
	font-size: var(--cp-font-size-base);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover,
.page-header.navbar .top-menu .navbar-nav > li.dropdown.open .dropdown-toggle {
	background-color: var(--cp-color-gray-100) !important;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username {
	color: var(--cp-color-text) !important;
	font-size: var(--cp-font-size-sm);
	font-weight: var(--cp-font-weight-semibold);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > i {
	color: var(--cp-color-gray-400) !important;
	font-size: var(--cp-font-size-base);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle .badge.badge-default {
	background-color: var(--cp-color-danger);
	font-size: var(--cp-font-size-xs);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-menu {
	border: 1px solid var(--cp-color-border);
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	font-size: var(--cp-font-size-sm);
}

/* Sidebar */
.page-sidebar,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {
	background: linear-gradient(180deg, var(--cp-color-sidebar-start) 10%, var(--cp-color-sidebar-end) 100%) !important;
}

.page-sidebar .page-sidebar-menu > li > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a {
	border-top: none !important;
	color: rgba(255, 255, 255, 0.82) !important;
	padding: var(--cp-space-3) var(--cp-space-4);
	font-size: var(--cp-font-size-sm);
	font-weight: var(--cp-font-weight-semibold);
	line-height: var(--cp-line-height-base);
}

.page-sidebar .page-sidebar-menu > li > a > i,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i {
	color: rgba(255, 255, 255, 0.55) !important;
	font-size: var(--cp-font-size-base);
	margin-right: var(--cp-space-2);
}

.page-sidebar .page-sidebar-menu > li > a > .arrow:before,
.page-sidebar .page-sidebar-menu > li > a > .arrow.open:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .arrow:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > .arrow.open:before,
.page-sidebar .page-sidebar-menu .sub-menu li > a > .arrow:before,
.page-sidebar .page-sidebar-menu .sub-menu li > a > .arrow.open:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li > a > .arrow:before,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li > a > .arrow.open:before {
	color: rgba(255, 255, 255, 0.5) !important;
	right: 14px !important;
	left: auto !important;
	float: none;
}

.page-sidebar .page-sidebar-menu > li:hover > a,
.page-sidebar .page-sidebar-menu > li.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
}

.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.active.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #fff !important;
	font-weight: var(--cp-font-weight-bold);
}

.page-sidebar .page-sidebar-menu > li.active > a > i,
.page-sidebar .page-sidebar-menu > li.active.open > a > i,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > i,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a > i {
	color: #fff !important;
}

.page-sidebar .page-sidebar-menu > li.active > a > .selected,
.page-sidebar .page-sidebar-menu > li.active.open > a > .selected,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a > .selected,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a > .selected {
	border-right-color: var(--cp-color-background) !important;
}

.page-sidebar .page-sidebar-menu .sub-menu,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu {
	background: rgba(0, 0, 0, 0.12) !important;
}

/* Accordion: .active alone must not keep submenu open after another section is opened */
.page-sidebar .page-sidebar-menu li.active:not(.open) > .sub-menu,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li.active:not(.open) > .sub-menu {
	display: none !important;
}

.page-sidebar .page-sidebar-menu .sub-menu > li > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a {
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: var(--cp-font-size-sm);
	font-weight: var(--cp-font-weight-normal);
	padding: var(--cp-space-2) var(--cp-space-4) var(--cp-space-2) 2.5rem;
}

.page-sidebar .page-sidebar-menu .sub-menu > li > a > i,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li > a > i {
	color: rgba(255, 255, 255, 0.45) !important;
	font-size: var(--cp-font-size-sm);
}

.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
}

.page-sidebar .sidebar-toggler,
.page-sidebar .sidebar-collapse {
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--cp-font-size-sm);
}

.page-sidebar .sidebar-collapse .navbar-vertical-footer-text {
	font-size: var(--cp-font-size-sm);
}

/* ── Independent scroll: sidebar menu + main content (desktop) ── */
@media (min-width: 992px) {
	html:has(body.page-sidebar-fixed) {
		overflow: hidden;
		height: 100%;
	}

	body.page-sidebar-fixed {
		overflow: hidden;
		height: 100%;
	}

	body.page-sidebar-fixed .page-container {
		margin-top: var(--cp-header-height);
		height: calc(100vh - var(--cp-header-height));
		overflow: hidden;
	}

	body.has-global-message.page-sidebar-fixed .page-container {
		margin-top: calc(var(--cp-header-height) + var(--cp-global-message-height));
		height: calc(100vh - var(--cp-header-height) - var(--cp-global-message-height));
	}

	body.has-impersonation-bar.page-sidebar-fixed .page-container {
		margin-top: calc(var(--cp-header-height) + var(--cp-impersonation-bar-height));
		height: calc(100vh - var(--cp-header-height) - var(--cp-impersonation-bar-height));
	}

	body.has-global-message.has-impersonation-bar.page-sidebar-fixed .page-container {
		margin-top: calc(var(--cp-header-height) + var(--cp-global-message-height) + var(--cp-impersonation-bar-height));
		height: calc(100vh - var(--cp-header-height) - var(--cp-global-message-height) - var(--cp-impersonation-bar-height));
	}

	body.page-sidebar-fixed .page-sidebar {
		top: var(--cp-header-height) !important;
		bottom: 0;
		height: auto;
		max-height: calc(100vh - var(--cp-header-height));
		overflow: hidden;
	}

	body.has-global-message.page-sidebar-fixed .page-sidebar {
		top: calc(var(--cp-header-height) + var(--cp-global-message-height)) !important;
		max-height: calc(100vh - var(--cp-header-height) - var(--cp-global-message-height));
	}

	body.has-impersonation-bar.page-sidebar-fixed .page-sidebar {
		top: calc(var(--cp-header-height) + var(--cp-impersonation-bar-height)) !important;
		max-height: calc(100vh - var(--cp-header-height) - var(--cp-impersonation-bar-height));
	}

	body.has-global-message.has-impersonation-bar.page-sidebar-fixed .page-sidebar {
		top: calc(var(--cp-header-height) + var(--cp-global-message-height) + var(--cp-impersonation-bar-height)) !important;
		max-height: calc(100vh - var(--cp-header-height) - var(--cp-global-message-height) - var(--cp-impersonation-bar-height));
	}

	/* Metronic SlimScroll targets .page-sidebar-menu */
	body.page-sidebar-fixed .page-sidebar .page-sidebar-menu,
	body.page-sidebar-fixed .page-sidebar .slimScrollDiv {
		max-height: calc(100vh - var(--cp-header-height));
		overscroll-behavior: contain;
	}

	body.has-global-message.page-sidebar-fixed .page-sidebar .page-sidebar-menu,
	body.has-global-message.page-sidebar-fixed .page-sidebar .slimScrollDiv {
		max-height: calc(100vh - var(--cp-header-height) - var(--cp-global-message-height));
	}

	body.has-impersonation-bar.page-sidebar-fixed .page-sidebar .page-sidebar-menu,
	body.has-impersonation-bar.page-sidebar-fixed .page-sidebar .slimScrollDiv {
		max-height: calc(100vh - var(--cp-header-height) - var(--cp-impersonation-bar-height));
	}

	body.has-global-message.has-impersonation-bar.page-sidebar-fixed .page-sidebar .page-sidebar-menu,
	body.has-global-message.has-impersonation-bar.page-sidebar-fixed .page-sidebar .slimScrollDiv {
		max-height: calc(100vh - var(--cp-header-height) - var(--cp-global-message-height) - var(--cp-impersonation-bar-height));
	}

	body.page-sidebar-fixed .page-content-wrapper {
		height: calc(100vh - var(--cp-header-height));
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	body.has-global-message.page-sidebar-fixed .page-content-wrapper {
		height: calc(100vh - var(--cp-header-height) - var(--cp-global-message-height));
	}

	body.has-impersonation-bar.page-sidebar-fixed .page-content-wrapper {
		height: calc(100vh - var(--cp-header-height) - var(--cp-impersonation-bar-height));
	}

	body.has-global-message.has-impersonation-bar.page-sidebar-fixed .page-content-wrapper {
		height: calc(100vh - var(--cp-header-height) - var(--cp-global-message-height) - var(--cp-impersonation-bar-height));
	}

	body.page-sidebar-fixed .page-content {
		min-height: 0 !important;
	}

	body.page-sidebar-closed.page-sidebar-fixed .page-sidebar {
		width: 45px !important;
	}

	body.page-sidebar-closed.page-sidebar-fixed .page-content-wrapper {
		margin-left: 45px !important;
	}

	/* Keep full brand visible when sidebar is collapsed (Metronic hides/shrinks logo to 45px) */
	body.page-sidebar-closed.page-sidebar-closed-hide-logo .page-header.navbar .page-logo {
		width: var(--cp-sidebar-width) !important;
		max-width: var(--cp-sidebar-width) !important;
		padding: 0 var(--cp-space-3) !important;
		overflow: hidden;
	}

	body.page-sidebar-closed.page-sidebar-closed-hide-logo .page-header.navbar .page-logo > a.camplus-brand {
		display: flex !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   2. TYPOGRAPHY — headings & page chrome
   ═══════════════════════════════════════════════════════════ */

.page-content h1,
.page-content .h1 {
	font-size: var(--cp-font-size-xl);
	font-weight: var(--cp-font-weight-normal);
	color: var(--cp-color-text-strong);
	line-height: var(--cp-line-height-tight);
	margin-bottom: var(--cp-space-4);
}

.page-content h2,
.page-content .h2 {
	font-size: var(--cp-font-size-lg);
	font-weight: var(--cp-font-weight-normal);
	color: var(--cp-color-text-strong);
}

.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6,
.page-content .h3,
.page-content .h4,
.page-content .h5,
.page-content .h6 {
	font-family: var(--cp-font-family);
	font-weight: var(--cp-font-weight-semibold);
	color: var(--cp-color-text-strong);
}

.page-title {
	font-size: var(--cp-font-size-xl);
	font-weight: var(--cp-font-weight-normal);
	color: var(--cp-color-text-strong);
}

.page-bar {
	background: transparent;
	box-shadow: none;
	margin-bottom: var(--cp-space-4);
}

.page-content-white .page-content .page-bar {
	border-bottom: 1px solid var(--cp-color-border);
}

.page-bar .page-breadcrumb > li,
.page-bar .page-breadcrumb > li > a {
	color: var(--cp-color-text-muted);
	font-size: var(--cp-font-size-sm);
	font-weight: var(--cp-font-weight-semibold);
}

.page-bar .page-breadcrumb > li > a:hover {
	color: var(--cp-color-primary);
}

.bold {
	font-weight: var(--cp-font-weight-bold) !important;
}

/* ═══════════════════════════════════════════════════════════
   3. METRONIC RESET — force design-system sizes in content
      (Metronic components.css defaults to 13px)
   ═══════════════════════════════════════════════════════════ */

.page-content,
.page-content .portlet,
.page-content .portlet-body {
	font-size: var(--cp-font-size-base);
	line-height: var(--cp-line-height-base);
	color: var(--cp-color-text);
}

.page-content p,
.page-content li,
.page-content label,
.page-content .help-block,
.page-content .form-control,
.page-content textarea,
.page-content select,
.page-content .note,
.page-content .alert {
	font-size: var(--cp-font-size-base);
}

.page-content label.control-label {
	font-size: var(--cp-font-size-sm);
	font-weight: var(--cp-font-weight-bold);
	color: var(--cp-color-text-strong);
	margin-bottom: var(--cp-space-1);
}

/* ═══════════════════════════════════════════════════════════
   4. PORTLETS / CARDS
   ═══════════════════════════════════════════════════════════ */

.page-content .portlet {
	border-radius: 0 !important;
	border: 1px solid var(--cp-color-border) !important;
	box-shadow: none !important;
	background: var(--cp-color-surface);
	margin-bottom: var(--cp-space-6);
}

.page-content .portlet.light,
.page-content .portlet.light.bordered {
	border: 1px solid var(--cp-color-border) !important;
}

.page-content .portlet > .portlet-title {
	border-bottom: 1px solid var(--cp-color-border);
	background: var(--cp-color-surface);
	border-radius: 0;
	min-height: 0;
	margin-bottom: 0;
	padding: 0 var(--cp-space-4);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.page-content .portlet > .portlet-title:before,
.page-content .portlet > .portlet-title:after {
	display: none;
}

.page-content .portlet > .portlet-title > .caption {
	font-size: var(--cp-font-size-base) !important;
	font-weight: var(--cp-font-weight-bold) !important;
	line-height: var(--cp-line-height-tight) !important;
	color: var(--cp-color-text-strong) !important;
	padding: var(--cp-space-2) 0 !important;
	float: none;
}

.page-content .portlet > .portlet-title > .caption.bold {
	font-weight: var(--cp-font-weight-bold) !important;
}

.page-content .portlet > .portlet-title > .caption > i {
	font-size: var(--cp-font-size-base) !important;
	color: var(--cp-color-gray-400) !important;
	margin-top: 0 !important;
}

.page-content .portlet > .portlet-title > .actions {
	padding: var(--cp-space-2) 0 !important;
	float: none;
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-2);
}

.page-content .portlet > .portlet-title > .actions > .btn,
.page-content .portlet > .portlet-title > .actions > .btn.btn-sm,
.page-content .portlet > .portlet-title > .actions > .btn-group > .btn,
.page-content .portlet > .portlet-title > .actions > .btn-group > .btn.btn-sm,
.page-content .portlet > .portlet-title > .actions a.dt-button {
	font-size: var(--cp-font-size-sm) !important;
	font-weight: var(--cp-font-weight-semibold) !important;
	padding: var(--cp-space-1) var(--cp-space-3) !important;
	line-height: var(--cp-line-height-base) !important;
	border-radius: var(--cp-radius) !important;
	margin: 0 !important;
}

.page-content .portlet > .portlet-title > .actions > .btn > i,
.page-content .portlet > .portlet-title > .actions a.dt-button > i {
	font-size: var(--cp-font-size-sm) !important;
}

.page-content .portlet.light .portlet-body,
.page-content .portlet > .portlet-body {
	padding: var(--cp-space-4);
	font-size: var(--cp-font-size-base);
}

/* ═══════════════════════════════════════════════════════════
   5. BUTTONS — unified SB Admin 2 style
   ═══════════════════════════════════════════════════════════ */

.page-content .btn,
.page-content a.dt-button.btn,
.page-content button.dt-button {
	font-size: var(--cp-font-size-sm);
	font-weight: var(--cp-font-weight-semibold);
	border-radius: var(--cp-radius) !important;
	line-height: var(--cp-line-height-base);
	padding: var(--cp-space-2) var(--cp-space-3);
	box-shadow: none !important;
	background-image: none !important;
	text-shadow: none !important;
}

.page-content .btn-sm,
.page-content .btn.btn-sm {
	font-size: var(--cp-font-size-sm) !important;
	padding: var(--cp-space-1) var(--cp-space-3) !important;
}

.page-content .btn-xs,
.page-content .btn.btn-xs {
	font-size: var(--cp-font-size-sm) !important;
	padding: var(--cp-space-1) var(--cp-space-2) !important;
}

.page-content .btn-lg {
	font-size: var(--cp-font-size-base) !important;
}

.page-content .btn:focus,
.page-content .btn:active:focus {
	box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25) !important;
}

/* ── Outline buttons (default for toolbar actions) ── */
.page-content .btn.btn-outline,
.page-content a.dt-button.btn.btn-outline {
	background-color: #fff !important;
	border-width: 1px !important;
	border-style: solid !important;
}

.page-content .btn.btn-outline > i,
.page-content a.dt-button.btn.btn-outline > i {
	color: inherit !important;
}

/* Primary / blue */
.page-content .btn.btn-outline.blue,
.page-content .btn.btn-outline.blue-madison,
.page-content .btn.btn-outline.blue-chambray,
.page-content .btn.btn-outline.blue-steel,
.page-content .btn.btn-outline.blue-soft,
.page-content .btn.btn-outline.blue-dark,
.page-content .btn.btn-outline.blue-sharp,
.page-content .btn.btn-outline.primary {
	border-color: var(--cp-color-primary) !important;
	color: var(--cp-color-primary) !important;
}

.page-content .btn.btn-outline.blue:hover,
.page-content .btn.btn-outline.blue-madison:hover,
.page-content .btn.btn-outline.blue-chambray:hover,
.page-content .btn.btn-outline.blue-steel:hover,
.page-content .btn.btn-outline.blue-soft:hover,
.page-content .btn.btn-outline.blue-dark:hover,
.page-content .btn.btn-outline.blue-sharp:hover,
.page-content .btn.btn-outline.primary:hover,
.page-content .btn.btn-outline.blue:focus,
.page-content .btn.btn-outline.blue:active,
.page-content .btn.btn-outline.blue.active {
	background-color: var(--cp-color-primary) !important;
	border-color: var(--cp-color-primary) !important;
	color: #fff !important;
}

/* Success / green */
.page-content .btn.btn-outline.green,
.page-content .btn.btn-outline.green-jungle,
.page-content .btn.btn-outline.green-meadow,
.page-content .btn.btn-outline.green-seagreen,
.page-content .btn.btn-outline.green-turquoise,
.page-content .btn.btn-outline.green-haze,
.page-content .btn.btn-outline.success {
	border-color: var(--cp-color-success) !important;
	color: #13855c !important;
}

.page-content .btn.btn-outline.green:hover,
.page-content .btn.btn-outline.green-jungle:hover,
.page-content .btn.btn-outline.green-meadow:hover,
.page-content .btn.btn-outline.green-seagreen:hover,
.page-content .btn.btn-outline.green-turquoise:hover,
.page-content .btn.btn-outline.green-haze:hover,
.page-content .btn.btn-outline.success:hover,
.page-content .btn.btn-outline.green:focus,
.page-content .btn.btn-outline.green:active,
.page-content .btn.btn-outline.green.active {
	background-color: var(--cp-color-success) !important;
	border-color: var(--cp-color-success) !important;
	color: #fff !important;
}

/* Danger / red */
.page-content .btn.btn-outline.red,
.page-content .btn.btn-outline.red-haze,
.page-content .btn.btn-outline.red-mint,
.page-content .btn.btn-outline.danger {
	border-color: var(--cp-color-danger) !important;
	color: var(--cp-color-danger) !important;
}

.page-content .btn.btn-outline.red:hover,
.page-content .btn.btn-outline.red-haze:hover,
.page-content .btn.btn-outline.red-mint:hover,
.page-content .btn.btn-outline.danger:hover,
.page-content .btn.btn-outline.red:focus,
.page-content .btn.btn-outline.red:active,
.page-content .btn.btn-outline.red.active {
	background-color: var(--cp-color-danger) !important;
	border-color: var(--cp-color-danger) !important;
	color: #fff !important;
}

/* Warning / yellow / export */
.page-content .btn.btn-outline.yellow,
.page-content .btn.btn-outline.yellow-casablanca,
.page-content .btn.btn-outline.yellow-gold,
.page-content .btn.btn-outline.yellow-lemon,
.page-content .btn.btn-outline.warning {
	border-color: var(--cp-color-warning) !important;
	color: #9a7b1a !important;
}

.page-content .btn.btn-outline.yellow:hover,
.page-content .btn.btn-outline.yellow-casablanca:hover,
.page-content .btn.btn-outline.yellow-gold:hover,
.page-content .btn.btn-outline.yellow-lemon:hover,
.page-content .btn.btn-outline.warning:hover,
.page-content .btn.btn-outline.yellow:focus,
.page-content .btn.btn-outline.yellow.active {
	background-color: var(--cp-color-warning) !important;
	border-color: var(--cp-color-warning) !important;
	color: #fff !important;
}

/* Purple / secondary actions */
.page-content .btn.btn-outline.purple,
.page-content .btn.btn-outline.purple-wisteria,
.page-content .btn.btn-outline.purple-plum,
.page-content .btn.btn-outline.purple-medium,
.page-content .btn.btn-outline.purple-studio,
.page-content .btn.btn-outline.purple-seance,
.page-content .btn.btn-outline.purple-intense {
	border-color: #6f42c1 !important;
	color: #6f42c1 !important;
}

.page-content .btn.btn-outline.purple:hover,
.page-content .btn.btn-outline.purple-wisteria:hover,
.page-content .btn.btn-outline.purple-plum:hover,
.page-content .btn.btn-outline.purple-medium:hover,
.page-content .btn.btn-outline.purple-studio:hover,
.page-content .btn.btn-outline.purple-seance:hover,
.page-content .btn.btn-outline.purple-intense:hover,
.page-content .btn.btn-outline.purple:focus,
.page-content .btn.btn-outline.purple.active {
	background-color: #6f42c1 !important;
	border-color: #6f42c1 !important;
	color: #fff !important;
}

/* Neutral / grey */
.page-content .btn.btn-outline.default,
.page-content .btn.btn-outline.grey,
.page-content .btn.btn-outline.grey-mint,
.page-content .btn.btn-outline.grey-cascade,
.page-content .btn.btn-outline.grey-silver,
.page-content .btn.btn-outline.dark,
.page-content .btn.btn-outline.dark.btn-outline {
	border-color: var(--cp-color-gray-500) !important;
	color: var(--cp-color-gray-800) !important;
}

.page-content .btn.btn-outline.default:hover,
.page-content .btn.btn-outline.grey:hover,
.page-content .btn.btn-outline.grey-mint:hover,
.page-content .btn.btn-outline.grey-cascade:hover,
.page-content .btn.btn-outline.grey-silver:hover,
.page-content .btn.btn-outline.dark:hover,
.page-content .btn.btn-outline.default:focus,
.page-content .btn.btn-outline.default.active {
	background-color: var(--cp-color-gray-600) !important;
	border-color: var(--cp-color-gray-600) !important;
	color: #fff !important;
}

/* ── Solid buttons (no .btn-outline) ── */
.page-content .btn.blue:not(.btn-outline),
.page-content .btn.primary:not(.btn-outline),
.page-content .btn.btn-primary {
	background-color: var(--cp-color-primary) !important;
	border-color: var(--cp-color-primary) !important;
	color: #fff !important;
}

.page-content .btn.green:not(.btn-outline),
.page-content .btn.green-jungle:not(.btn-outline),
.page-content .btn.success:not(.btn-outline) {
	background-color: var(--cp-color-success) !important;
	border-color: var(--cp-color-success) !important;
	color: #fff !important;
}

.page-content .btn.red:not(.btn-outline),
.page-content .btn.danger:not(.btn-outline) {
	background-color: var(--cp-color-danger) !important;
	border-color: var(--cp-color-danger) !important;
	color: #fff !important;
}

.page-content .btn.yellow:not(.btn-outline),
.page-content .btn.yellow-casablanca:not(.btn-outline),
.page-content .btn.yellow-gold:not(.btn-outline),
.page-content .btn.warning:not(.btn-outline) {
	background-color: var(--cp-color-warning) !important;
	border-color: var(--cp-color-warning) !important;
	color: #fff !important;
}

.page-content .btn.purple:not(.btn-outline),
.page-content .btn.purple-wisteria:not(.btn-outline) {
	background-color: #6f42c1 !important;
	border-color: #6f42c1 !important;
	color: #fff !important;
}

.page-content .btn.default:not(.btn-outline),
.page-content .btn.btn-default {
	background-color: var(--cp-color-surface) !important;
	border-color: var(--cp-color-gray-400) !important;
	color: var(--cp-color-gray-800) !important;
}

.page-content .btn.default:not(.btn-outline):hover,
.page-content .btn.btn-default:hover {
	background-color: var(--cp-color-gray-200) !important;
}

/* Modal / form primary actions outside portlet toolbar */
.btn.blue:not(.btn-outline),
.btn.green:not(.btn-outline),
.btn.red:not(.btn-outline) {
	color: #fff !important;
}

/* Toolbar: ensure outline buttons stay readable (Metronic + DataTables) */
.page-content .portlet > .portlet-title > .actions a.btn[class*="btn-outline"],
.page-content .portlet > .portlet-title > .actions a.dt-button.btn {
	background-color: #fff !important;
	background-image: none !important;
}

.page-content .portlet > .portlet-title > .actions a.btn.red.btn-outline {
	color: var(--cp-color-danger) !important;
	border-color: var(--cp-color-danger) !important;
}

.page-content .portlet > .portlet-title > .actions a.btn.blue.btn-outline {
	color: var(--cp-color-primary) !important;
	border-color: var(--cp-color-primary) !important;
}

.page-content .portlet > .portlet-title > .actions a.btn.green.btn-outline,
.page-content .portlet > .portlet-title > .actions a.btn.green-jungle.btn-outline {
	color: #13855c !important;
	border-color: var(--cp-color-success) !important;
}

.page-content .portlet > .portlet-title > .actions a.btn.purple.btn-outline,
.page-content .portlet > .portlet-title > .actions a.btn.purple-wisteria.btn-outline {
	color: #6f42c1 !important;
	border-color: #6f42c1 !important;
}

/* ═══════════════════════════════════════════════════════════
   6. TABLES & DATATABLES
   ═══════════════════════════════════════════════════════════ */

.page-content .table,
.page-content table.dataTable {
	font-size: var(--cp-font-size-base) !important;
	color: var(--cp-color-text-strong);
}

.page-content .table > thead > tr > th,
.page-content .table > thead > tr > td,
.page-content table.dataTable thead th,
.page-content table.dataTable thead td {
	font-size: var(--cp-font-size-sm) !important;
	font-weight: var(--cp-font-weight-bold) !important;
	color: var(--cp-color-text-muted) !important;
	background: var(--cp-color-gray-100) !important;
	border-bottom: 1px solid var(--cp-color-border) !important;
	padding: var(--cp-space-3) var(--cp-space-4) !important;
	vertical-align: middle;
	text-transform: none;
	letter-spacing: normal;
}

.page-content .table > tbody > tr > td,
.page-content table.dataTable tbody td {
	font-size: var(--cp-font-size-base) !important;
	padding: var(--cp-space-3) var(--cp-space-4) !important;
	vertical-align: middle;
	border-top: 1px solid var(--cp-color-border);
	color: var(--cp-color-text-strong);
}

.page-content .table > tbody > tr > td a {
	font-size: inherit;
	color: var(--cp-color-primary);
}

.page-content .table-striped > tbody > tr:nth-of-type(odd) {
	background-color: rgba(0, 0, 0, 0.02);
}

.page-content .table-hover > tbody > tr:hover {
	background-color: var(--cp-color-gray-100);
}

/* DataTables chrome */
.page-content .dataTables_wrapper,
.page-content .dataTables_wrapper .dataTables_length,
.page-content .dataTables_wrapper .dataTables_filter,
.page-content .dataTables_wrapper .dataTables_info,
.page-content .dataTables_wrapper .dataTables_paginate {
	font-size: var(--cp-font-size-sm) !important;
	color: var(--cp-color-text);
}

.page-content div.dataTables_wrapper div.dataTables_length select,
.page-content div.dataTables_wrapper div.dataTables_filter input {
	font-size: var(--cp-font-size-sm) !important;
	border-radius: var(--cp-radius);
	border-color: var(--cp-color-gray-400);
	padding: var(--cp-space-1) var(--cp-space-2);
	height: auto;
}

.page-content .dataTables_wrapper .pagination > li > a,
.page-content .dataTables_wrapper .pagination > li > span {
	font-size: var(--cp-font-size-sm);
	padding: var(--cp-space-2) var(--cp-space-3);
}

.page-content .dataTables_wrapper .pagination > .active > a,
.page-content .dataTables_wrapper .pagination > .active > a:hover {
	background-color: var(--cp-color-primary);
	border-color: var(--cp-color-primary);
}

/* Role / status labels in tables */
.page-content .label,
.page-content .label.label-sm {
	font-size: var(--cp-font-size-xs) !important;
	font-weight: var(--cp-font-weight-bold) !important;
	padding: 0.35em 0.65em !important;
	border-radius: var(--cp-radius) !important;
	line-height: var(--cp-line-height-tight);
	display: inline-block;
}

.page-content .label.roleLabel {
	margin: 0 var(--cp-space-1) var(--cp-space-1) 0;
}

.page-content .label-success { background-color: var(--cp-color-success); }
.page-content .label-danger { background-color: var(--cp-color-danger); }
.page-content .label-warning { background-color: var(--cp-color-warning); color: #fff; }
.page-content .label-info { background-color: var(--cp-color-info); }
.page-content .label-primary { background-color: var(--cp-color-primary); }

/* ═══════════════════════════════════════════════════════════
   7. FORMS
   ═══════════════════════════════════════════════════════════ */

.page-content .form-control,
.page-content .select2-container--bootstrap .select2-selection,
.page-content textarea,
.page-content select {
	font-size: var(--cp-font-size-base) !important;
	border-radius: var(--cp-radius) !important;
	border-color: var(--cp-color-gray-400) !important;
	color: var(--cp-color-text-strong);
	padding: var(--cp-space-2) var(--cp-space-3);
	height: auto;
	min-height: calc(var(--cp-font-size-base) * var(--cp-line-height-base) + var(--cp-space-4));
	box-shadow: none;
}

.page-content .form-control:focus,
.page-content .select2-container--bootstrap.select2-container--focus .select2-selection {
	border-color: var(--cp-color-primary-light) !important;
	box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25) !important;
}

.page-content .input-group-addon {
	font-size: var(--cp-font-size-base);
	border-color: var(--cp-color-gray-400);
	background: var(--cp-color-gray-100);
}

/* ── Date / time pickers (bootstrap-datepicker multidate, datetimepicker, daterangepicker, jQuery UI) ── */

.datepicker,
.datepicker-dropdown,
.datetimepicker,
.datetimepicker-dropdown,
.daterangepicker,
.ui-datepicker {
	font-family: var(--cp-font-family) !important;
	font-size: var(--cp-font-size-sm) !important;
	color: var(--cp-color-text-strong) !important;
	border: 1px solid var(--cp-color-border) !important;
	border-radius: var(--cp-radius) !important;
	box-shadow: var(--cp-shadow) !important;
	background: var(--cp-color-surface) !important;
	padding: var(--cp-space-2) !important;
	z-index: 10070 !important;
}

.datepicker-dropdown:before,
.datepicker-dropdown:after,
.datetimepicker-dropdown:before,
.datetimepicker-dropdown:after,
.daterangepicker:before,
.daterangepicker:after {
	display: none !important;
}

.datepicker table,
.datetimepicker table,
.daterangepicker table,
.ui-datepicker table {
	margin: 0;
	border-collapse: separate;
	border-spacing: 2px;
}

.datepicker table tr th,
.datepicker table tr td,
.datetimepicker table tr th,
.datetimepicker table tr td,
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td,
.ui-datepicker th,
.ui-datepicker td {
	font-family: var(--cp-font-family) !important;
	font-size: var(--cp-font-size-sm) !important;
	font-weight: var(--cp-font-weight-semibold);
	text-align: center;
	vertical-align: middle;
	border: none !important;
	padding: 0 !important;
	width: 2.25rem;
	height: 2.25rem;
	line-height: 2.25rem;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datetimepicker .datetimepicker-switch,
.datetimepicker .prev,
.datetimepicker .next,
.daterangepicker th.month,
.ui-datepicker .ui-datepicker-title {
	font-size: var(--cp-font-size-base) !important;
	font-weight: var(--cp-font-weight-bold) !important;
	color: var(--cp-color-text-strong) !important;
}

.datepicker .prev,
.datepicker .next,
.datetimepicker .prev,
.datetimepicker .next {
	color: var(--cp-color-primary) !important;
	font-size: 0 !important;
	line-height: 2rem !important;
	border-radius: var(--cp-radius);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	cursor: pointer;
	top: 4px !important;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none !important;
	background: transparent !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
	background: var(--cp-color-gray-100) !important;
}

.datepicker .prev:hover,
.datepicker .next:hover,
.datetimepicker .prev:hover,
.datetimepicker .next:hover {
	background: var(--cp-color-gray-100) !important;
}

.datepicker .prev::after,
.datetimepicker .prev::after {
	content: '\2039';
	font-size: 1.25rem;
	font-weight: var(--cp-font-weight-bold);
	line-height: 1;
	color: var(--cp-color-primary);
}

.datepicker .next::after,
.datetimepicker .next::after {
	content: '\203A';
	font-size: 1.25rem;
	font-weight: var(--cp-font-weight-bold);
	line-height: 1;
	color: var(--cp-color-primary);
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
	background: none !important;
	background-image: none !important;
	text-indent: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	position: static !important;
	color: var(--cp-color-primary) !important;
	font-size: 1.25rem !important;
	font-weight: var(--cp-font-weight-bold) !important;
	line-height: 1 !important;
}

.ui-datepicker .ui-datepicker-prev .ui-icon::before {
	content: '\2039';
}

.ui-datepicker .ui-datepicker-next .ui-icon::before {
	content: '\203A';
}

.ui-datepicker .ui-datepicker-header {
	background: transparent !important;
	border: none !important;
	padding: var(--cp-space-1) 0 var(--cp-space-2);
}

.datepicker table tr td.day,
.datepicker table tr td span,
.datetimepicker table tr td.day,
.datetimepicker table tr td span,
.daterangepicker td.available,
.ui-datepicker td a,
.ui-datepicker td span {
	border-radius: 50% !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused,
.datetimepicker table tr td.day:hover,
.datetimepicker table tr td span:hover,
.daterangepicker td.available:hover,
.ui-datepicker td a:hover {
	background: var(--cp-color-gray-200) !important;
	color: var(--cp-color-text-strong) !important;
	cursor: pointer;
}

.datepicker table tr td.new,
.datepicker table tr td.old,
.datetimepicker table tr td.new,
.datetimepicker table tr td.old,
.daterangepicker td.off,
.ui-datepicker td.ui-datepicker-other-month {
	color: var(--cp-color-text-muted) !important;
}

.datepicker table tr td.today,
.datetimepicker table tr td.today,
.daterangepicker td.today {
	background: rgba(78, 115, 223, 0.12) !important;
	color: var(--cp-color-primary) !important;
	font-weight: var(--cp-font-weight-bold);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted,
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datetimepicker table tr td.active,
.datetimepicker table tr td.active:hover,
.datetimepicker table tr td span.active,
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date,
.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-active:hover {
	background: var(--cp-color-primary) !important;
	border-color: var(--cp-color-primary) !important;
	color: #fff !important;
	text-shadow: none !important;
}

.datepicker table tr td.today.active,
.datepicker table tr td.today.active:hover,
.datetimepicker table tr td.today.active,
.daterangepicker td.today.active {
	background: var(--cp-color-primary-dark) !important;
	color: #fff !important;
}

.daterangepicker .calendar-table {
	border: 1px solid var(--cp-color-border) !important;
	border-radius: var(--cp-radius) !important;
	background: var(--cp-color-surface) !important;
}

.daterangepicker td.in-range {
	background: rgba(78, 115, 223, 0.12) !important;
	color: var(--cp-color-text-strong) !important;
	border-radius: 0 !important;
}

.daterangepicker .ranges li {
	font-size: var(--cp-font-size-sm) !important;
	border-radius: var(--cp-radius) !important;
	border: 1px solid var(--cp-color-border) !important;
	background: var(--cp-color-gray-100) !important;
	color: var(--cp-color-text-strong) !important;
}

.daterangepicker .ranges li:hover,
.daterangepicker .ranges li.active {
	background: var(--cp-color-primary) !important;
	border-color: var(--cp-color-primary) !important;
	color: #fff !important;
}

.daterangepicker .drp-buttons .btn {
	font-size: var(--cp-font-size-sm) !important;
	border-radius: var(--cp-radius) !important;
}

.bootstrap-timepicker-widget table td a {
	border-radius: var(--cp-radius) !important;
	font-family: var(--cp-font-family) !important;
}

.bootstrap-timepicker-widget table td a:hover {
	background: var(--cp-color-gray-200) !important;
}

.bootstrap-timepicker-widget.dropdown-menu {
	font-family: var(--cp-font-family) !important;
	border: 1px solid var(--cp-color-border) !important;
	border-radius: var(--cp-radius) !important;
	box-shadow: var(--cp-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════
   8. ALERTS, NOTES, MODALS, TABS, DROPDOWNS
   ═══════════════════════════════════════════════════════════ */

.page-content .alert,
.page-content .note {
	font-size: var(--cp-font-size-base);
	border-radius: var(--cp-radius);
}

.alert-success {
	background-color: rgba(28, 200, 138, 0.12);
	border-color: rgba(28, 200, 138, 0.25);
	color: #0f6848;
}

.alert-info,
.note.note-info {
	background-color: rgba(54, 185, 204, 0.1);
	border-color: rgba(54, 185, 204, 0.25);
	color: #1a6b77;
}

.alert-warning,
.note.note-warning {
	background-color: rgba(246, 194, 62, 0.12);
	border-color: rgba(246, 194, 62, 0.3);
	color: #806520;
}

.alert-danger,
.note.note-danger {
	background-color: rgba(231, 74, 59, 0.1);
	border-color: rgba(231, 74, 59, 0.25);
	color: #912c22;
}

.note {
	border-left: 4px solid var(--cp-color-info);
	box-shadow: var(--cp-shadow-sm);
}

.modal-content {
	border: none;
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	font-size: var(--cp-font-size-base);
}

.modal-header {
	border-bottom: 1px solid var(--cp-color-border);
	background: var(--cp-color-gray-100);
}

.modal-title {
	font-size: var(--cp-font-size-lg);
	font-weight: var(--cp-font-weight-bold);
	color: var(--cp-color-primary);
}

.modal-body {
	font-size: var(--cp-font-size-base);
}

.modal-footer {
	border-top: 1px solid var(--cp-color-border);
	background: var(--cp-color-gray-100);
}

.nav-tabs > li > a {
	font-size: var(--cp-font-size-base);
	font-weight: var(--cp-font-weight-semibold);
	color: var(--cp-color-text-muted);
}

.nav-tabs > li.active > a {
	color: var(--cp-color-primary);
	border-top: 3px solid var(--cp-color-primary);
}

.nav-pills > li > a {
	font-size: var(--cp-font-size-base);
	font-weight: var(--cp-font-weight-semibold);
}

.nav-pills > li.active > a {
	background-color: var(--cp-color-primary);
}

.dropdown-menu {
	font-size: var(--cp-font-size-sm);
	border-radius: var(--cp-radius);
	border: 1px solid var(--cp-color-border);
	box-shadow: var(--cp-shadow);
}

.dropdown-menu > li > a {
	padding: var(--cp-space-2) var(--cp-space-4);
	font-size: var(--cp-font-size-sm);
	color: var(--cp-color-text-strong);
}

.dropdown-menu > li > a:hover {
	background-color: var(--cp-color-gray-100);
}

.badge {
	font-size: var(--cp-font-size-xs);
	font-weight: var(--cp-font-weight-bold);
	border-radius: 0.65rem;
}

.page-footer {
	background: var(--cp-color-surface);
	border-top: 1px solid var(--cp-color-border);
	color: var(--cp-color-text-muted);
	font-size: var(--cp-font-size-sm);
}

.progress {
	border-radius: var(--cp-radius);
	background-color: var(--cp-color-gray-200);
	height: 1rem;
}

.progress-bar { background-color: var(--cp-color-primary); }

/* ═══════════════════════════════════════════════════════════
   9. LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */

body.login {
	background: var(--cp-color-background);
	font-size: var(--cp-font-size-base);
	color: var(--cp-color-text);
}

body.login .login-content h1 {
	font-size: var(--cp-font-size-lg);
	font-weight: var(--cp-font-weight-extrabold);
	color: var(--cp-color-primary);
}

body.login .login-content h3 {
	font-size: var(--cp-font-size-lg);
	font-weight: var(--cp-font-weight-normal);
	color: var(--cp-color-text-strong);
}

body.login .login-content h4,
body.login .login-content p {
	font-size: var(--cp-font-size-base);
	color: var(--cp-color-text);
}

body.login .form-control {
	font-size: var(--cp-font-size-base) !important;
	border-radius: var(--cp-radius) !important;
}

body.login .login-form .btn.green {
	font-size: var(--cp-font-size-base);
	font-weight: var(--cp-font-weight-bold);
	background-color: var(--cp-color-primary) !important;
	border-color: var(--cp-color-primary) !important;
	border-radius: var(--cp-radius) !important;
}

body.login .login-form .btn.green:hover {
	background-color: var(--cp-color-primary-dark) !important;
}

/* ═══════════════════════════════════════════════════════════
   10. LOADER & FLASH TOASTS
   ═══════════════════════════════════════════════════════════ */

#loader {
	--camplus-loader-track: var(--cp-loader-track);
	--camplus-loader-accent: var(--cp-loader-accent);
}

#loader .camplus-loader-spinner,
#loader .loader {
	border-color: var(--cp-loader-track);
	border-top-color: var(--cp-loader-accent);
}

#loader .camplus-loader-text {
	font-size: var(--cp-font-size-base);
	font-weight: var(--cp-font-weight-semibold);
	color: var(--cp-color-text-strong);
}

.camplus-flash {
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	font-size: var(--cp-font-size-base);
}

.camplus-flash-body {
	font-size: var(--cp-font-size-base);
	line-height: var(--cp-line-height-base);
	color: var(--cp-color-text-strong);
}

.camplus-flash-info { border-left-color: var(--cp-color-info); }
.camplus-flash-success { border-left-color: var(--cp-color-success); }
.camplus-flash-error { border-left-color: var(--cp-color-danger); }
.camplus-flash-warning { border-left-color: var(--cp-color-warning); }

.camplus-flash-icon { color: var(--cp-color-info); font-size: var(--cp-font-size-lg); }
.camplus-flash-success .camplus-flash-icon { color: var(--cp-color-success); }
.camplus-flash-error .camplus-flash-icon { color: var(--cp-color-danger); }
.camplus-flash-warning .camplus-flash-icon { color: var(--cp-color-warning); }

#camplus-flash-container {
	top: 60px;
}

/* ═══════════════════════════════════════════════════════════
   10b. IN-APP NOTIFICATION DROPDOWN
   ═══════════════════════════════════════════════════════════ */

.camplus-notify-menu {
	min-width: 320px;
	max-width: min(420px, calc(100vw - 24px));
	padding: 0;
}

.camplus-notify-menu > li {
	list-style: none;
}

.camplus-notify-menu__header {
	display: block;
	overflow: hidden;
	padding: 12px 15px !important;
	position: relative;
}

.camplus-notify-menu__header h3 {
	font-size: var(--cp-font-size-sm);
	margin: 0;
	padding-right: 72px;
	line-height: 1.4;
	float: none;
	display: block;
	white-space: normal;
}

.camplus-notify-menu__header > a {
	position: absolute;
	top: 12px;
	right: 15px;
	white-space: nowrap;
}

.camplus-notify-list {
	max-height: 320px;
	min-height: 48px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 !important;
	margin: 0;
	list-style: none;
}

.camplus-notify-menu__footer {
	padding: 10px 12px 12px;
	text-align: center;
	border-top: 1px solid #eee;
}

.camplus-notify-menu__hint {
	margin: 0 0 6px;
	font-size: var(--cp-font-size-xs, 11px);
	color: var(--cp-color-text-muted, #888);
}

.camplus-notify-menu__prefs {
	display: block;
	margin-top: 8px;
	font-size: var(--cp-font-size-xs, 11px);
}

.camplus-notify-empty {
	padding: 16px 12px;
}

.camplus-notify-empty__text {
	color: var(--cp-color-text-muted, #888);
	font-size: var(--cp-font-size-sm);
}

.camplus-notify-item {
	position: relative;
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid #f0f0f0;
}

.camplus-notify-item__link {
	display: flex;
	flex: 1;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 36px 10px 12px !important;
	text-decoration: none !important;
	color: inherit !important;
}

.camplus-notify-item__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cp-color-danger, #e74a3b);
	margin-top: 6px;
	flex-shrink: 0;
}

.camplus-notify-item__content {
	flex: 1;
	min-width: 0;
}

.camplus-notify-item__meta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
	font-size: var(--cp-font-size-xs, 12px);
	color: var(--cp-color-text-muted, #888);
}

.camplus-notify-item__module {
	font-weight: var(--cp-font-weight-semibold, 600);
	color: var(--cp-color-text-strong, #5a5c69);
}

.camplus-notify-item__module .fa {
	margin-right: 4px;
	color: var(--cp-color-primary, #4e73df);
}

.camplus-notify-item__time {
	white-space: nowrap;
}

.camplus-notify-item__msg {
	display: block;
	font-size: var(--cp-font-size-sm, 13px);
	line-height: 1.4;
	color: var(--cp-color-text-strong, #5a5c69);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.camplus-notify-item__dismiss {
	position: absolute;
	top: 8px;
	right: 8px;
	border: 0;
	background: transparent;
	color: #aaa;
	font-size: 18px;
	line-height: 1;
	padding: 2px 6px;
	cursor: pointer;
	z-index: 1;
}

.camplus-notify-item__dismiss:hover {
	color: #666;
}

#notification_no.badge-danger {
	background-color: var(--cp-color-danger, #e74a3b);
}

.camplus-global-message__close {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: #7c5a00;
	font-size: 22px;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
	opacity: 0.8;
}

.camplus-global-message__close:hover {
	opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   11. RESPONSIVE — override Metronic / theme mobile spacing
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
	/* Restore normal page scroll on mobile */
	body.page-sidebar-fixed {
		overflow: auto;
	}

	body.page-sidebar-fixed .page-container {
		height: auto;
		overflow: visible;
	}

	body.page-sidebar-fixed .page-content-wrapper {
		height: auto;
		overflow: visible;
	}

	/* Brand: full width above sidebar on small screens */
	.page-header.navbar .page-logo {
		width: auto;
		max-width: none;
		flex: 1 1 auto;
		border-right: none;
		padding: 0 var(--cp-space-2);
	}

	/* Sidebar: remove 20px margin gap from layout.css */
	.page-sidebar,
	.page-sidebar.navbar-collapse.in,
	.page-sidebar.navbar-collapse.collapse.in {
		margin: 0 !important;
		border-radius: 0 !important;
	}

	.page-sidebar-wrapper,
	.page-container {
		padding: 0 !important;
	}

	/* Keep gradient sidebar on mobile (darkblue theme sets flat #28303b) */
	.page-sidebar,
	.page-sidebar.navbar-collapse.in {
		background: linear-gradient(180deg, var(--cp-color-sidebar-start) 10%, var(--cp-color-sidebar-end) 100%) !important;
	}

	.page-sidebar .page-sidebar-menu > li > a {
		border-top: none !important;
	}

	.page-sidebar .page-sidebar-menu .sub-menu {
		background: rgba(0, 0, 0, 0.12) !important;
	}

	/* Content area: tighter padding */
	.page-content-wrapper .page-content {
		padding: var(--cp-space-3) !important;
	}

	.page-content-white .page-bar {
		margin-top: 0 !important;
		margin-bottom: var(--cp-space-2);
	}

	.page-content .row {
		margin-left: calc(var(--cp-space-2) * -1);
		margin-right: calc(var(--cp-space-2) * -1);
	}

	.page-content .row > [class*="col-"] {
		padding-left: var(--cp-space-2);
		padding-right: var(--cp-space-2);
	}

	/* Compact header: single row, no 100px stack */
	.page-header.navbar {
		padding: 0 var(--cp-space-3) !important;
		height: var(--cp-header-height) !important;
		min-height: var(--cp-header-height) !important;
	}

	.page-header.navbar .page-header-inner {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		min-height: var(--cp-header-height);
	}

	.page-header.navbar .page-logo {
		flex: 1 1 auto;
		min-width: 0;
		height: var(--cp-header-height);
		padding-top: var(--cp-space-1);
		margin: 0 !important;
		order: 1;
	}

	.page-header.navbar .top-menu {
		flex: 0 0 auto;
		display: block !important;
		clear: none !important;
		float: none !important;
		background: transparent !important;
		background-color: transparent !important;
		order: 2;
	}

	.page-header.navbar .menu-toggler.responsive-toggler {
		flex: 0 0 auto;
		order: 3;
		margin: 0 0 0 var(--cp-space-2);
	}

	.page-header-fixed .page-container,
	.page-header-fixed.page-header-fixed-mobile .page-container {
		margin-top: 0px !important;
	}

	.page-header.navbar .top-menu .navbar-nav {
		display: flex !important;
		float: none !important;
		margin: 0 !important;
		align-items: center;
	}

	.page-header.navbar .top-menu .navbar-nav > li.dropdown {
		float: none !important;
		height: var(--cp-header-height);
		padding: 0 2px;
	}

	.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle {
		padding: 0 var(--cp-space-2) !important;
		height: var(--cp-header-height);
		display: flex;
		align-items: center;
		background: transparent !important;
	}

	/* Portlet toolbar */
	.page-content .portlet {
		margin-bottom: var(--cp-space-4);
	}

	.page-content .portlet > .portlet-title {
		padding: 0 var(--cp-space-3);
	}

	.page-content .portlet > .portlet-title > .caption {
		padding: var(--cp-space-2) 0 !important;
		font-size: var(--cp-font-size-base) !important;
	}

	.page-content .portlet > .portlet-title > .actions {
		padding: var(--cp-space-2) 0 var(--cp-space-3) !important;
		margin-left: 0;
		width: 100%;
	}

	.page-content .portlet.light .portlet-body,
	.page-content .portlet > .portlet-body {
		padding: var(--cp-space-3);
	}

	/* Orphan wrapper used in some module views */
	.page-content .portlet-body:not(.portlet .portlet-body) {
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Denser tables on small screens */
	.page-content .table > thead > tr > th,
	.page-content .table > tbody > tr > td,
	.page-content table.dataTable thead th,
	.page-content table.dataTable tbody td {
		padding: var(--cp-space-2) var(--cp-space-3) !important;
	}

	.page-content div.dataTables_wrapper div.dataTables_length,
	.page-content div.dataTables_wrapper div.dataTables_filter {
		margin-bottom: var(--cp-space-2);
	}
}

@media (max-width: 480px) {
	/* Override Metronic + darkblue 100px header / double-row top menu */
	.page-header-fixed.page-header-fixed-mobile .page-header.navbar,
	.page-header.navbar {
		height: var(--cp-header-height) !important;
		min-height: var(--cp-header-height) !important;
	}

	.page-header-fixed.page-header-fixed-mobile .page-container,
	.page-header-fixed .page-container {
		margin-top: 0px !important;
	}

	.page-header.navbar .top-menu,
	.page-header-fixed-mobile .page-header.navbar .top-menu {
		background: transparent !important;
		background-color: transparent !important;
	}

	.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle {
		padding: 0 var(--cp-space-1) !important;
	}

	.page-content-wrapper .page-content {
		padding: var(--cp-space-2) !important;
	}

	.page-content .portlet > .portlet-title > .actions > .btn,
	.page-content .portlet > .portlet-title > .actions a.dt-button {
		padding: var(--cp-space-1) var(--cp-space-2) !important;
		font-size: var(--cp-font-size-xs) !important;
	}

	#camplus-flash-container {
		top: calc(var(--cp-header-height) + var(--cp-space-2));
		right: var(--cp-space-2);
		left: var(--cp-space-2);
		width: auto;
	}

	.camplus-notify-menu {
		min-width: 280px;
		right: 0;
		left: auto;
	}

	.camplus-notify-list {
		max-height: 50vh;
	}
}

/* Dashboard landing page */
.dashboard-greeting {
	margin: 0 0 20px;
	font-weight: 600;
}

.dashboard-scoreboard {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.dashboard-scoreboard__tile {
	display: block;
	background: linear-gradient(180deg, #2c3e50 0%, #1a252f 100%);
	color: #ecf0f1;
	border-radius: 6px;
	padding: 16px 12px;
	text-align: center;
	text-decoration: none !important;
	border: 1px solid #34495e;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-scoreboard__tile:hover,
.dashboard-scoreboard__tile:focus {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dashboard-scoreboard__tile--total {
	background: linear-gradient(180deg, #1e6bb8 0%, #145a9e 100%);
	border-color: #2980b9;
}

.dashboard-scoreboard__count {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.dashboard-scoreboard__label {
	font-size: 12px;
	margin-top: 8px;
	opacity: 0.9;
	line-height: 1.3;
}

.dashboard-scoreboard__label i {
	display: block;
	font-size: 18px;
	margin-bottom: 4px;
}

.dashboard-calendar-portlet {
	margin-bottom: 24px;
}

.dashboard-calendar-portlet .portlet-body {
	position: relative;
	overflow: visible;
}

/* Undo global custom.css rule that floats fc-right to page header */
.dashboard-calendar-portlet .fc-toolbar .fc-left,
.dashboard-calendar-portlet .fc-toolbar .fc-center,
.dashboard-calendar-portlet .fc-toolbar .fc-right {
	position: static !important;
	float: none !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	border-bottom: none !important;
}

.dashboard-calendar-portlet .fc-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 16px !important;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--cp-color-border);
}

.dashboard-calendar-portlet .fc-toolbar .fc-center {
	flex: 1 1 auto;
	text-align: center;
	min-width: 140px;
}

.dashboard-calendar-portlet .fc-toolbar .fc-left,
.dashboard-calendar-portlet .fc-toolbar .fc-right {
	flex: 0 0 auto;
}

.dashboard-calendar-portlet .fc-toolbar h2 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--cp-font-size-lg) !important;
	font-weight: var(--cp-font-weight-bold) !important;
	color: var(--cp-color-text-strong) !important;
	line-height: var(--cp-line-height-tight);
}

.dashboard-calendar-portlet .fc-button {
	position: static !important;
	top: auto !important;
	height: auto !important;
	margin: 0 2px !important;
	padding: 6px 12px !important;
	background: var(--cp-color-surface) !important;
	border: 1px solid var(--cp-color-border) !important;
	border-radius: 4px !important;
	color: var(--cp-color-text-strong) !important;
	font-size: var(--cp-font-size-sm) !important;
	font-weight: var(--cp-font-weight-semibold) !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.dashboard-calendar-portlet .fc-button:hover,
.dashboard-calendar-portlet .fc-button.fc-state-hover {
	background: var(--cp-color-gray-100) !important;
	border-color: var(--cp-color-primary-light) !important;
	color: var(--cp-color-primary) !important;
}

.dashboard-calendar-portlet .fc-button.fc-state-active {
	background: var(--cp-color-primary) !important;
	border-color: var(--cp-color-primary) !important;
	color: var(--cp-color-white) !important;
}

.dashboard-calendar-portlet .fc-button.fc-state-disabled {
	opacity: 0.45;
	color: var(--cp-color-text-muted) !important;
}

.dashboard-calendar-portlet .fc-button-group .fc-button {
	border-radius: 0 !important;
}

.dashboard-calendar-portlet .fc-button-group .fc-button:first-child {
	border-top-left-radius: 4px !important;
	border-bottom-left-radius: 4px !important;
}

.dashboard-calendar-portlet .fc-button-group .fc-button:last-child {
	border-top-right-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}

.dashboard-calendar-portlet .fc-icon-left-single-arrow:before {
	content: "\f104";
	font-family: FontAwesome;
}

.dashboard-calendar-portlet .fc-icon-right-single-arrow:before {
	content: "\f105";
	font-family: FontAwesome;
}

.dashboard-calendar-portlet .fc-head-container,
.dashboard-calendar-portlet .fc-widget-header {
	background: var(--cp-color-gray-100);
	border-color: var(--cp-color-border) !important;
}

.dashboard-calendar-portlet .fc-day-header {
	padding: 10px 4px;
	font-size: var(--cp-font-size-sm);
	font-weight: var(--cp-font-weight-semibold);
	color: var(--cp-color-text-strong);
}

.dashboard-calendar-portlet .fc-widget-content {
	border-color: var(--cp-color-border) !important;
}

.dashboard-calendar-portlet .fc-day-grid .fc-day {
	background: var(--cp-color-surface);
}

.dashboard-calendar-portlet .fc-unthemed td.fc-today {
	background: rgba(78, 115, 223, 0.08) !important;
}

.dashboard-calendar-portlet .fc-day-number {
	padding: 6px 8px;
	font-size: var(--cp-font-size-sm);
	color: var(--cp-color-text);
}

.dashboard-calendar-portlet .fc-other-month .fc-day-number {
	color: var(--cp-color-text-muted);
}

.dashboard-calendar-portlet .fc-event {
	border: none !important;
	border-radius: 3px;
	padding: 2px 4px;
	font-size: var(--cp-font-size-xs);
	box-shadow: var(--cp-shadow-sm);
}

.dashboard-calendar-portlet .fc-event .fc-title {
	font-weight: var(--cp-font-weight-semibold);
}

.dashboard-calendar-portlet .fc-time-grid .fc-slats td {
	border-color: var(--cp-color-border);
}

.dashboard-calendar-portlet .fc-agenda-view .fc-day-grid {
	background: var(--cp-color-gray-100);
}

.dashboard-calendar-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-bottom: 12px;
	font-size: 13px;
}

.dashboard-cal-filter {
	margin: 0;
	font-weight: normal;
	cursor: pointer;
}

.cal-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	vertical-align: middle;
	margin-right: 4px;
}

.cal-swatch--event { background: #3598dc; }
.cal-swatch--appraisal { background: #8e44ad; }
.cal-swatch--leave { background: #26a69a; }
.cal-swatch--overtime { background: #e67e22; }
.cal-swatch--holiday { background: #95a5a6; }
.cal-swatch--leave-sub {
	background: #f0faf4;
	border-left: 3px solid #27ae60;
	box-sizing: border-box;
}

#dashboard_calendar,
#leave_calendar {
	min-height: 480px;
	position: relative;
}

.dashboard-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.dashboard-widgets__card {
	margin-bottom: 0;
}

.dashboard-widget-table {
	margin-bottom: 0;
}

.dashboard-empty {
	margin: 0;
}