/**
 * ============================================
 * UHAMKA SIBIMA — Premium Global Enhancement
 * ============================================
 * Brand: Navy #1d4887 | Teal #00a895 | Gold #ffc107
 * Univ. Muhammadiyah Prof. DR. HAMKA — Jakarta
 * ============================================
 */

/* ── 1. Enhanced Root Tokens ── */
:root {
	--premium-navy: #1d4887;
	--premium-navy-deep: #0f2847;
	--premium-navy-light: #2a5fa8;
	--premium-teal: #00a895;
	--premium-teal-light: #00d4aa;
	--premium-gold: #f0b429;
	--premium-gold-light: #fbd38d;
	--premium-surface: #ffffff;
	--premium-surface-alt: #f8fafc;
	--premium-surface-hover: #edf2f7;
	--premium-text: #1a202c;
	--premium-text-secondary: #64748b;
	--premium-border: #e2e8f0;
	--premium-shadow-sm:
		0 1px 3px rgba(29, 72, 135, 0.06), 0 1px 2px rgba(29, 72, 135, 0.04);
	--premium-shadow: 0 4px 14px rgba(29, 72, 135, 0.08);
	--premium-shadow-lg: 0 10px 30px rgba(29, 72, 135, 0.12);
	--premium-shadow-xl: 0 20px 50px rgba(29, 72, 135, 0.16);
	--premium-radius: 16px;
	--premium-radius-sm: 10px;
	--premium-radius-xs: 6px;
	--premium-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. Global Body & Typography ── */
body {
	background: #f0f4f8 !important;
	color: var(--premium-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: rgba(29, 72, 135, 0.15);
	color: var(--premium-navy);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: -0.01em;
}

/* Dark heading color — only in normal content areas, not inside dark-bg components */
/* :not(.page-header):not(.modal-header):not(.app-sidebar):not(.card-header):not(
		.badge
	)
	> h1,
:not(.page-header):not(.modal-header):not(.app-sidebar):not(.card-header):not(
		.badge
	)
	> h2,
:not(.page-header):not(.modal-header):not(.app-sidebar):not(.card-header):not(
		.badge
	)
	> h3,
:not(.page-header):not(.modal-header):not(.app-sidebar):not(.card-header):not(
		.badge
	)
	> h4,
:not(.page-header):not(.modal-header):not(.app-sidebar):not(.card-header):not(
		.badge
	)
	> h5,
:not(.page-header):not(.modal-header):not(.app-sidebar):not(.card-header):not(
		.badge
	)
	> h6 {
	color: var(--premium-text);
} */

/* ── 3. Premium Sidebar ── */
.app-sidebar {
	background: linear-gradient(
		180deg,
		var(--premium-navy-deep) 0%,
		var(--premium-navy) 60%,
		var(--premium-navy-light) 100%
	) !important;
	color: #fff !important;
	border-right: none !important;
	box-shadow: 4px 0 24px rgba(15, 40, 71, 0.2) !important;
}

.app-sidebar .brand a {
	color: #fff !important;
}

.app-sidebar .brand small,
.app-sidebar .brand strong {
	color: #fff !important;
}

.app-sidebar .brand small#datetime-top {
	color: rgba(255, 255, 255, 0.55) !important;
}

.app-sidebar .user {
	border-color: rgba(255, 255, 255, 0.1) !important;
	background: rgba(255, 255, 255, 0.05);
}

.app-sidebar .user div {
	color: #fff !important;
}

.app-sidebar .user .nav-avatar-circle {
	background: linear-gradient(
		135deg,
		var(--premium-teal),
		var(--premium-teal-light)
	) !important;
	color: #fff !important;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(0, 168, 149, 0.3);
}

.app-sidebar .menu a {
	color: rgba(255, 255, 255, 0.7) !important;
	border-radius: var(--premium-radius-xs) !important;
	margin: 1px 8px;
	padding: 10px 12px !important;
	transition: var(--premium-transition);
}

.app-sidebar.is-expanded .menu a,
.app-sidebar.is-collapsed:hover .menu a {
	color: rgba(255, 255, 255, 0.75) !important;
}

.app-sidebar .menu a:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #fff !important;
	transform: translateX(2px);
}

.app-sidebar .menu a.active {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #fff !important;
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--premium-teal);
}

.app-sidebar .menu a i {
	color: rgba(255, 255, 255, 0.5) !important;
	transition: color 0.2s ease;
}

.app-sidebar .menu a:hover i,
.app-sidebar .menu a.active i {
	color: var(--premium-teal-light) !important;
}

.app-sidebar .submenu {
	background: rgba(0, 0, 0, 0.1);
	border-radius: var(--premium-radius-xs);
	margin: 2px 4px;
}

.app-sidebar .submenu li a {
	font-size: 0.88rem !important;
	color: rgba(255, 255, 255, 0.6) !important;
}

.app-sidebar .submenu li a:hover,
.app-sidebar .submenu li a.active {
	color: #fff !important;
}

.app-sidebar .footer-actions {
	border-color: rgba(255, 255, 255, 0.1) !important;
}

.app-sidebar .btn-logout {
	color: rgba(255, 255, 255, 0.7) !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
	border-radius: var(--premium-radius-sm) !important;
	transition: var(--premium-transition);
}

.app-sidebar .btn-logout:hover {
	background: rgba(220, 53, 69, 0.2) !important;
	border-color: rgba(220, 53, 69, 0.4) !important;
	color: #ff6b6b !important;
}

/* ── 4. Toggle Button ── */
.global-sidebar-toggle {
	background: var(--premium-surface) !important;
	border: 1px solid var(--premium-border) !important;
	box-shadow: var(--premium-shadow) !important;
	border-radius: var(--premium-radius-sm) !important;
	transition: var(--premium-transition);
}

.global-sidebar-toggle:hover {
	background: var(--premium-surface-alt) !important;
	box-shadow: var(--premium-shadow-lg) !important;
	transform: scale(1.05);
}

/* ── 5. Premium Cards ── */
.card {
	background: var(--premium-surface) !important;
	border: 1px solid var(--premium-border) !important;
	border-radius: var(--premium-radius) !important;
	box-shadow: var(--premium-shadow-sm) !important;
	transition:
		box-shadow 0.3s ease,
		transform 0.3s ease;
	overflow: hidden;
}

.card:hover {
	box-shadow: var(--premium-shadow) !important;
}

.card-header:not([class*="bg-"]):not([style*="background"]):not(
		[style*="gradient"]
	) {
	border-bottom: 1px solid var(--premium-border);
}

.card-header {
	border-radius: var(--premium-radius) var(--premium-radius) 0 0 !important;
	font-weight: 600;
	padding: 1rem 1.25rem;
}

/* Card headers with gradient/bg-* — ensure white text */
.card-header[style*="gradient"],
.card-header[style*="background"] {
	color: #fff !important;
}

.card-header h4,
.card-header .card-header-title {
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
}

.card-footer {
	background: var(--premium-surface-alt) !important;
	border-top: 1px solid var(--premium-border) !important;
	border-radius: 0 0 var(--premium-radius) var(--premium-radius) !important;
}

.card-body {
	padding: 1.25rem;
}

/* ── 6. Premium Buttons ── */
.btn {
	border-radius: var(--premium-radius-sm) !important;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.01em;
	padding: 0.5rem 1.15rem;
	transition: var(--premium-transition);
	box-shadow: none !important;
	backdrop-filter: none !important;
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--premium-shadow-sm) !important;
}

.btn:active {
	transform: translateY(0) !important;
}

.btn-primary {
	--bs-btn-bg: #1d4887;
	--bs-btn-border-color: #1d4887;
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: #2a5fa8;
	--bs-btn-hover-border-color: #2a5fa8;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #0f2847;
	--bs-btn-active-border-color: #0f2847;
	--bs-btn-active-color: #fff;
	background: var(--premium-navy) !important;
	border-color: var(--premium-navy) !important;
	color: #fff !important;
}

.btn-primary:hover {
	background: var(--premium-navy-light) !important;
	border-color: var(--premium-navy-light) !important;
	box-shadow: 0 4px 14px rgba(29, 72, 135, 0.35) !important;
}

.btn-success {
	--bs-btn-bg: #059669;
	--bs-btn-border-color: #059669;
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: #047857;
	--bs-btn-hover-border-color: #047857;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #065f46;
	--bs-btn-active-border-color: #065f46;
	--bs-btn-active-color: #fff;
	background: #059669 !important;
	border-color: #059669 !important;
	color: #fff !important;
}

.btn-success:hover {
	background: #047857 !important;
	box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
}

.btn-danger {
	--bs-btn-bg: #dc2626;
	--bs-btn-border-color: #dc2626;
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: #b91c1c;
	--bs-btn-hover-border-color: #b91c1c;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #991b1b;
	--bs-btn-active-border-color: #991b1b;
	--bs-btn-active-color: #fff;
	background: #dc2626 !important;
	border-color: #dc2626 !important;
	color: #fff !important;
}

.btn-danger:hover {
	background: #b91c1c !important;
	box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3) !important;
}

.btn-warning {
	--bs-btn-bg: #f0b429;
	--bs-btn-border-color: #f0b429;
	--bs-btn-color: #1a202c;
	--bs-btn-hover-bg: #d97706;
	--bs-btn-hover-border-color: #d97706;
	--bs-btn-hover-color: #1a202c;
	--bs-btn-active-bg: #b45309;
	--bs-btn-active-border-color: #b45309;
	--bs-btn-active-color: #fff;
	background: var(--premium-gold) !important;
	border-color: var(--premium-gold) !important;
	color: #1a202c !important;
}

.btn-info {
	--bs-btn-bg: #00a895;
	--bs-btn-border-color: #00a895;
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: #009080;
	--bs-btn-hover-border-color: #009080;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #007a6c;
	--bs-btn-active-border-color: #007a6c;
	--bs-btn-active-color: #fff;
	background: var(--premium-teal) !important;
	border-color: var(--premium-teal) !important;
	color: #fff !important;
}

.btn-info:hover {
	background: #009080 !important;
	box-shadow: 0 4px 14px rgba(0, 168, 149, 0.3) !important;
}

.btn-secondary {
	--bs-btn-bg: #64748b;
	--bs-btn-border-color: #64748b;
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: #475569;
	--bs-btn-hover-border-color: #475569;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #334155;
	--bs-btn-active-border-color: #334155;
	--bs-btn-active-color: #fff;
	background: #64748b !important;
	border-color: #64748b !important;
	color: #fff !important;
}

.btn-dark {
	--bs-btn-bg: #1e293b;
	--bs-btn-border-color: #1e293b;
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: #0f172a;
	--bs-btn-hover-border-color: #0f172a;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #020617;
	--bs-btn-active-border-color: #020617;
	--bs-btn-active-color: #fff;
	background: #1e293b !important;
	border-color: #1e293b !important;
	color: #fff !important;
}

.btn-light {
	--bs-btn-bg: #f1f5f9;
	--bs-btn-border-color: #e2e8f0;
	--bs-btn-color: #334155;
	--bs-btn-hover-bg: #e2e8f0;
	--bs-btn-hover-border-color: #cbd5e1;
	--bs-btn-hover-color: #1e293b;
	--bs-btn-active-bg: #cbd5e1;
	--bs-btn-active-border-color: #94a3b8;
	--bs-btn-active-color: #1e293b;
}

.btn-sm {
	padding: 0.35rem 0.75rem;
	font-size: 0.8rem;
	border-radius: var(--premium-radius-xs) !important;
}

.btn-outline-primary {
	--bs-btn-color: #1d4887;
	--bs-btn-border-color: #1d4887;
	--bs-btn-hover-bg: #1d4887;
	--bs-btn-hover-border-color: #1d4887;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #0f2847;
	--bs-btn-active-border-color: #0f2847;
	--bs-btn-active-color: #fff;
	color: var(--premium-navy) !important;
	border-color: var(--premium-navy) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
	background: var(--premium-navy) !important;
	color: #fff !important;
}

.btn-outline-success {
	--bs-btn-color: #059669;
	--bs-btn-border-color: #059669;
	--bs-btn-hover-bg: #059669;
	--bs-btn-hover-border-color: #059669;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #047857;
	--bs-btn-active-border-color: #047857;
	--bs-btn-active-color: #fff;
}

.btn-outline-danger {
	--bs-btn-color: #dc2626;
	--bs-btn-border-color: #dc2626;
	--bs-btn-hover-bg: #dc2626;
	--bs-btn-hover-border-color: #dc2626;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #b91c1c;
	--bs-btn-active-border-color: #b91c1c;
	--bs-btn-active-color: #fff;
}

.btn-outline-secondary {
	--bs-btn-color: #64748b;
	--bs-btn-border-color: #64748b;
	--bs-btn-hover-bg: #64748b;
	--bs-btn-hover-border-color: #64748b;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #475569;
	--bs-btn-active-border-color: #475569;
	--bs-btn-active-color: #fff;
}

/* ── 7. Premium Tables ── */
.table {
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.875rem;
}

.table thead th {
	background: var(--premium-navy) !important;
	color: #fff !important;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.85rem 1rem;
	border: none !important;
	white-space: nowrap;
}

.table thead th:first-child {
	border-radius: var(--premium-radius-sm) 0 0 0;
}

.table thead th:last-child {
	border-radius: 0 var(--premium-radius-sm) 0 0;
}

.table tbody td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--premium-border);
	vertical-align: middle;
	color: var(--premium-text);
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(29, 72, 135, 0.02) !important;
}

.table-hover tbody tr:hover {
	background-color: rgba(29, 72, 135, 0.04) !important;
}

.table tbody tr {
	transition: background-color 0.15s ease;
}

/* DataTables sort icon contrast fix */
.table thead th.sorting::before,
.table thead th.sorting::after,
.table thead th.sorting_asc::before,
.table thead th.sorting_asc::after,
.table thead th.sorting_desc::before,
.table thead th.sorting_desc::after {
	opacity: 0.7 !important;
}

/* ── 8. Premium Forms ── */
.form-control,
.custom-select,
.form-select {
	border-radius: var(--premium-radius-sm) !important;
	border: 1.5px solid var(--premium-border) !important;
	background: var(--premium-surface) !important;
	font-size: 0.875rem;
	padding: 0.55rem 0.9rem;
	transition: var(--premium-transition);
	backdrop-filter: none !important;
}

.form-control:focus,
.custom-select:focus,
.form-select:focus {
	border-color: var(--premium-navy-light) !important;
	box-shadow: 0 0 0 3px rgba(29, 72, 135, 0.1) !important;
	background: #fff !important;
}

.form-group > label,
.form-group .control-label,
.form-label {
	font-weight: 600;
	font-size: 0.8rem;
	color: var(--premium-text);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}

textarea.form-control {
	border-radius: var(--premium-radius-sm) !important;
}

/* TomSelect Premium */
.ts-control {
	border-radius: var(--premium-radius-sm) !important;
	border: 1.5px solid var(--premium-border) !important;
	background: var(--premium-surface) !important;
	backdrop-filter: none !important;
}

.ts-control.focus,
.ts-wrapper.focus .ts-control {
	border-color: var(--premium-navy-light) !important;
	box-shadow: 0 0 0 3px rgba(29, 72, 135, 0.1) !important;
}

.ts-dropdown {
	border-radius: var(--premium-radius-sm) !important;
	border: 1px solid var(--premium-border) !important;
	box-shadow: var(--premium-shadow-lg) !important;
}

/* ── 9. Premium Badges ── */
.badge {
	border-radius: 50rem !important;
	font-weight: 700;
	font-size: 0.72rem;
	padding: 0.35em 0.75em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	backdrop-filter: none !important;
	border: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	transition: var(--premium-transition);
}

/* Primary */
.badge-primary,
.badge.bg-primary,
.badge.text-bg-primary {
	background: linear-gradient(135deg, #1d4887, #2a5fa8) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(29, 72, 135, 0.3);
}

/* Success */
.badge-success,
.badge.bg-success,
.badge.text-bg-success {
	background: linear-gradient(135deg, #059669, #10b981) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

/* Warning — dark text for contrast on gold */
.badge-warning,
.badge.bg-warning,
.badge.text-bg-warning {
	background: linear-gradient(135deg, #d97706, #f0b429) !important;
	color: #1a202c !important;
	box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
}

/* Danger */
.badge-danger,
.badge.bg-danger,
.badge.text-bg-danger {
	background: linear-gradient(135deg, #dc2626, #ef4444) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

/* Info */
.badge-info,
.badge.bg-info,
.badge.text-bg-info {
	background: linear-gradient(135deg, #0891b2, #06b6d4) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);
}

/* Secondary */
.badge-secondary,
.badge.bg-secondary,
.badge.text-bg-secondary {
	background: linear-gradient(135deg, #475569, #64748b) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(71, 85, 105, 0.2);
}

/* Light — dark text for contrast */
.badge-light,
.badge.bg-light,
.badge.text-bg-light {
	background: linear-gradient(135deg, #f1f5f9, #e2e8f0) !important;
	color: #334155 !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Dark */
.badge-dark,
.badge.bg-dark,
.badge.text-bg-dark {
	background: linear-gradient(135deg, #0f172a, #1e293b) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}

/* White text helper on badges */
.badge.text-white {
	color: #fff !important;
}

.badge.text-dark {
	color: #1a202c !important;
}

/* ── 9b. Premium Alerts ── */
.alert {
	border: none !important;
	border-radius: var(--premium-radius-sm) !important;
	border-left: 4px solid transparent !important;
	padding: 0.85rem 1.15rem;
	font-size: 0.875rem;
	font-weight: 500;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	backdrop-filter: none !important;
	position: relative;
}

.alert .btn-close {
	font-size: 0.65rem;
	opacity: 0.6;
}

.alert i:first-child,
.alert .fas:first-child,
.alert .far:first-child {
	font-size: 0.95rem;
}

/* Primary */
.alert-primary {
	background: linear-gradient(
		135deg,
		rgba(29, 72, 135, 0.08),
		rgba(42, 95, 168, 0.05)
	) !important;
	border-left-color: var(--premium-navy) !important;
	color: #1d4887 !important;
}

/* Success */
.alert-success {
	background: linear-gradient(
		135deg,
		rgba(5, 150, 105, 0.08),
		rgba(16, 185, 129, 0.05)
	) !important;
	border-left-color: #059669 !important;
	color: #065f46 !important;
}

/* Warning */
.alert-warning {
	background: linear-gradient(
		135deg,
		rgba(217, 119, 6, 0.08),
		rgba(240, 180, 41, 0.05)
	) !important;
	border-left-color: #d97706 !important;
	color: #92400e !important;
}

/* Danger */
.alert-danger {
	background: linear-gradient(
		135deg,
		rgba(220, 38, 38, 0.08),
		rgba(239, 68, 68, 0.05)
	) !important;
	border-left-color: #dc2626 !important;
	color: #991b1b !important;
}

/* Info */
.alert-info {
	background: linear-gradient(
		135deg,
		rgba(8, 145, 178, 0.08),
		rgba(6, 182, 212, 0.05)
	) !important;
	border-left-color: #0891b2 !important;
	color: #155e75 !important;
}

/* Secondary */
.alert-secondary {
	background: linear-gradient(
		135deg,
		rgba(71, 85, 105, 0.08),
		rgba(100, 116, 139, 0.05)
	) !important;
	border-left-color: #64748b !important;
	color: #334155 !important;
}

/* Light */
.alert-light {
	background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
	border-left-color: #cbd5e1 !important;
	color: #334155 !important;
}

/* Dark */
.alert-dark {
	background: linear-gradient(
		135deg,
		rgba(15, 23, 42, 0.06),
		rgba(30, 41, 59, 0.04)
	) !important;
	border-left-color: #1e293b !important;
	color: #1e293b !important;
}

/* ── 10. Premium Modals ── */
.modal-content {
	border-radius: var(--premium-radius) !important;
	border: none !important;
	box-shadow: var(--premium-shadow-xl) !important;
	overflow: hidden;
	backdrop-filter: none !important;
}

.modal-header {
	background: linear-gradient(
		135deg,
		var(--premium-navy-deep),
		var(--premium-navy)
	) !important;
	color: #fff !important;
	border-bottom: none !important;
	padding: 1.1rem 1.5rem;
	border-radius: var(--premium-radius) var(--premium-radius) 0 0 !important;
}

.modal-header .modal-title {
	color: #fff !important;
	font-weight: 700;
	font-size: 1rem;
}

.modal-header .btn-close,
.modal-header .close {
	filter: brightness(0) invert(1);
	opacity: 0.7;
}

.modal-header .btn-close:hover,
.modal-header .close:hover {
	opacity: 1;
}

.modal-body {
	padding: 1.5rem;
}

.modal-footer {
	background: var(--premium-surface-alt) !important;
	border-top: 1px solid var(--premium-border) !important;
	border-radius: 0 0 var(--premium-radius) var(--premium-radius) !important;
	padding: 1rem 1.5rem;
}

.modal-backdrop.show {
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* ── 11. Premium Dropdowns ── */
.dropdown-menu {
	border-radius: var(--premium-radius-sm) !important;
	border: 1px solid var(--premium-border) !important;
	box-shadow: var(--premium-shadow-lg) !important;
	padding: 0.4rem;
	backdrop-filter: none !important;
}

.dropdown-item {
	border-radius: var(--premium-radius-xs);
	padding: 0.5rem 0.85rem;
	font-size: 0.875rem;
	transition: var(--premium-transition);
}

.dropdown-item:hover {
	background: rgba(29, 72, 135, 0.06);
	color: var(--premium-navy);
}

.dropdown-item.active,
.dropdown-item:active {
	background: var(--premium-navy) !important;
	color: #fff !important;
}

/* ── 12. Premium Pagination ── */
.pagination {
	gap: 3px;
}

.page-link {
	border-radius: var(--premium-radius-xs) !important;
	border: 1px solid var(--premium-border);
	color: var(--premium-navy);
	font-weight: 500;
	font-size: 0.85rem;
	padding: 0.4rem 0.7rem;
	transition: var(--premium-transition);
}

.page-link:hover {
	background: rgba(29, 72, 135, 0.06);
	border-color: var(--premium-navy-light);
	color: var(--premium-navy);
}

.page-item.active .page-link {
	background: var(--premium-navy) !important;
	border-color: var(--premium-navy) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(29, 72, 135, 0.3);
}

/* ── 13. Alerts ── */
.alert {
	border-radius: var(--premium-radius-sm);
	border: none;
	font-size: 0.875rem;
	font-weight: 500;
}

.alert-success {
	background: #ecfdf5;
	color: #065f46;
	border-left: 4px solid #059669;
}
.alert-danger {
	background: #fef2f2;
	color: #991b1b;
	border-left: 4px solid #dc2626;
}
.alert-warning {
	background: #fffbeb;
	color: #92400e;
	border-left: 4px solid #d97706;
}
.alert-info {
	background: #ecfeff;
	color: #155e75;
	border-left: 4px solid var(--premium-teal);
}

/* ── 14. Stat Cards Enhancement ── */
.approval-stats {
	background: var(--premium-surface) !important;
	border: 1px solid var(--premium-border);
	box-shadow: var(--premium-shadow-sm);
	border-radius: var(--premium-radius) !important;
	padding: 1.25rem !important;
}

.stat-item {
	border-radius: var(--premium-radius-sm);
	transition: var(--premium-transition);
	padding: 1rem 0.75rem !important;
}

.stat-item:hover {
	background: rgba(29, 72, 135, 0.04);
	transform: translateY(-2px);
}

.stat-number {
	font-size: 1.75rem !important;
	font-weight: 800;
	background: linear-gradient(135deg, var(--premium-navy), var(--premium-teal));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.stat-label {
	font-size: 0.75rem !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--premium-text-secondary) !important;
}

/* ── 15. Scrollbar ── */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: rgba(29, 72, 135, 0.15);
	border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(29, 72, 135, 0.25);
}
.app-sidebar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
}

/* ── 16. DataTables Wrapper ── */
.dataTables_wrapper .dataTables_filter input {
	border-radius: var(--premium-radius-sm) !important;
	border: 1.5px solid var(--premium-border) !important;
	padding: 0.4rem 0.75rem;
	font-size: 0.85rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
	border-color: var(--premium-navy-light) !important;
	box-shadow: 0 0 0 3px rgba(29, 72, 135, 0.1) !important;
	outline: none;
}

.dataTables_wrapper .dataTables_length select {
	border-radius: var(--premium-radius-xs) !important;
	border: 1.5px solid var(--premium-border) !important;
	padding: 0.3rem 0.5rem;
}

.dataTables_wrapper .dataTables_info {
	font-size: 0.8rem;
	color: var(--premium-text-secondary);
}

/* ── 17. Progress Bars ── */
.progress {
	border-radius: var(--premium-radius-xs);
	background: #e2e8f0;
	height: 8px;
}

.progress-bar {
	background: linear-gradient(90deg, var(--premium-navy), var(--premium-teal));
	border-radius: var(--premium-radius-xs);
}

/* ── 18. SweetAlert Premium ── */
.swal2-popup {
	border-radius: var(--premium-radius) !important;
	font-family: inherit !important;
}

.swal2-confirm {
	border-radius: var(--premium-radius-sm) !important;
}

.swal2-cancel {
	border-radius: var(--premium-radius-sm) !important;
}

/* ── 19. Toasts & Popovers ── */
.toast {
	border-radius: var(--premium-radius-sm) !important;
	box-shadow: var(--premium-shadow-lg) !important;
	backdrop-filter: none !important;
}

.popover {
	border-radius: var(--premium-radius-sm) !important;
	box-shadow: var(--premium-shadow-lg) !important;
	backdrop-filter: none !important;
}

/* ── 20. Micro-Animations ── */
@keyframes premiumFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.card {
	animation: premiumFadeIn 0.4s ease-out;
}

/* ── 21. Breadcrumb ── */
.breadcrumb {
	background: transparent;
	padding: 0;
	font-size: 0.85rem;
}

.breadcrumb-item a {
	color: var(--premium-navy);
	font-weight: 500;
}

.breadcrumb-item.active {
	color: var(--premium-text-secondary);
}

/* ── 22. Nav Tabs ── */
.nav-tabs .nav-link {
	border-radius: var(--premium-radius-sm) var(--premium-radius-sm) 0 0 !important;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--premium-text-secondary);
	transition: var(--premium-transition);
	padding: 0.6rem 1.1rem;
}

.nav-tabs .nav-link:hover {
	color: var(--premium-navy);
	background: rgba(29, 72, 135, 0.04);
}

.nav-tabs .nav-link.active {
	color: var(--premium-navy) !important;
	border-color: var(--premium-border) var(--premium-border) #fff !important;
	font-weight: 700;
}

/* ── 23. Nav Pills ── */
.nav-pills .nav-link {
	border-radius: var(--premium-radius-sm) !important;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.5rem 1rem;
	transition: var(--premium-transition);
}

.nav-pills .nav-link.active {
	background: var(--premium-navy) !important;
}

/* ── 24. Print Override — clean print ── */
@media print {
	.app-sidebar,
	.global-sidebar-toggle,
	.btn-logout {
		display: none !important;
	}

	body {
		margin-left: 0 !important;
		background: #fff !important;
	}

	.card {
		box-shadow: none !important;
		border: 1px solid #ddd !important;
		animation: none !important;
	}

	.table thead th {
		background: #1d4887 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* ── 25. Responsive Fine-Tuning ── */
@media (max-width: 767.98px) {
	.card {
		border-radius: var(--premium-radius-sm) !important;
	}
	.card-header {
		border-radius: var(--premium-radius-sm) var(--premium-radius-sm) 0 0 !important;
	}
	.modal-content {
		border-radius: var(--premium-radius-sm) !important;
	}
	.modal-header {
		border-radius: var(--premium-radius-sm) var(--premium-radius-sm) 0 0 !important;
	}

	.stat-number {
		font-size: 1.35rem !important;
	}
}

/* ── 26. Link Styling ── */
a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(.menu a) {
	/** color: var(--premium-navy); */
	text-decoration: none;
	transition: color 0.2s ease;
}

a:not(.btn):not(.nav-link):not(.page-link):not(.dropdown-item):not(
		.menu a
	):hover {
	color: var(--premium-teal);
}

/* ── 27. Page Header — force light text on dark navy gradient ── */
.page-header {
	color: #fff !important;
}

.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header h5,
.page-header h6 {
	color: #fff !important;
}

/* .page-header p,
.page-header span,
.page-header div,
.page-header label,
.page-header small {
	color: rgba(255, 255, 255, 0.9);
} */

.page-header .text-dark {
	color: #fff !important;
}

.page-header .text-muted {
	color: rgba(255, 255, 255, 0.7) !important;
}

.page-header .text-secondary {
	color: rgba(255, 255, 255, 0.8) !important;
}

.page-header .form-label,
.page-header .form-label.text-light {
	color: rgba(255, 255, 255, 0.85) !important;
}

.page-header .badge.bg-light {
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.page-header .badge.bg-light.text-dark {
	color: #fff !important;
}

.page-header .badge.text-dark {
	color: #fff !important;
}

/* Page header links */
.page-header a:not(.btn) {
	color: rgba(255, 255, 255, 0.9) !important;
}

.page-header a:not(.btn):hover {
	color: #fff !important;
}

/* Description boxes inside page-header */
/* Transform .alert-light inside page-header to match description-box glass style */
.page-header .alert.alert-light,
.page-header .alert-light {
	background: rgba(255, 255, 255, 0.12) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: var(--premium-radius-sm) !important;
	padding: 0.65rem 1rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.92) !important;
	box-shadow: none !important;
}

.page-header .alert.alert-light .fw-semibold,
.page-header .alert.alert-light .fw-bold,
.page-header .alert-light .fw-semibold,
.page-header .alert-light .fw-bold {
	color: #fff !important;
}

.page-header .alert.alert-light .text-muted,
.page-header .alert-light .text-muted {
	color: rgba(255, 255, 255, 0.75) !important;
}

.page-header .alert.alert-light .small,
.page-header .alert-light .small {
	color: rgba(255, 255, 255, 0.8) !important;
}

/* Global description-box class */
.description-box {
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--premium-radius-sm);
	padding: 0.65rem 1rem;
	margin-top: 1rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.92);
}