/**
 * 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);
	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);
}

.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.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));
	}

	/* 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.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.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;
}

/* ═══════════════════════════════════════════════════════════
   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);
}

/* ═══════════════════════════════════════════════════════════
   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 .loader {
	border-color: var(--cp-loader-track);
	border-right-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;
}

/* ═══════════════════════════════════════════════════════════
   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;
	}

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

	.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;
	}

	.page-header-fixed .page-container,
	.page-header-fixed.page-header-fixed-mobile .page-container {
		margin-top: var(--cp-header-height) !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: var(--cp-header-height) !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;
	}
}