:root {
	--color-bg: #f9f9f9;
	--color-fg: #333;
	--color-header-bg: #ffffff;
	--color-header-border: rgba(88, 88, 88, .15);
	--color-fg-inverse: #1c1a1b05;
	--color-fg-dimmed: #323232; /*#727272;*/
	--color-fg-secondary: #333333;
	--color-card-bg: #ffffff;
	--color-primary: #cc0000;
	--color-primary-dark: #a00000;
	--color-primary-light: #e63333;
	--color-sidebar-bg: #1a1a1a;
	--color-sidebar-text: #f0f0f0;
	--color-sidebar-muted: #aaaaaa;
	--color-sidebar-hover: rgba(204, 0, 0, 0.15);
	--color-sidebar-active: var(--color-primary);
	--color-sidebar-width: 260px;
	--color-white-dimmed: #fbfbfb;
	--color-white: #ffffff;
	--color-topbar-bg: #ffffff;
	--color-topbar-border: #e0e0e0;
	--color-body-bg: #f4f4f4;
	--color-text: #222222;
	--color-text-muted: #6c757d;
	--color-border: #dee2e6;
	--color-danger: #dc3545;
	--color-success: #198754;
	--topbar-height: 60px;
	--sidebar-width: 260px;
	--sidebar-collapsed-width: 64px;
	--transition: 0.25s ease;
	--radius: 6px;
	--shadow: 0 2px 12px rgba(0,0,0,0.08);
	--shadow-lg: 0 4px 24px rgba(0,0,0,0.14);
	--color-accent: #cc0000;
	--color-row-hover: #e4e8ed;
	--color-h1: #cc0000;
	/*--rgb-color-dimmed-grey: 204, 0, 0, 1;*/
	--rgb-color-dimmed-grey: 100, 100, 100, 1;
	--rgb-color-dimmed-grey-02: 100, 100, 100, 0.2;
	--rgb-color-dimmed-grey-015: 100, 100, 100, 0.15;
	--rgb-color-dimmed-grey-005: 100, 100, 100, 0.05;
	--rgb-color-dimmed-grey-008: 100, 100, 100, 0.08;
	--rgb-color-dimmed-grey-009: 100, 100, 100, 0.09;
	--rgb-color-dimmed-grey-012: 100, 100, 100, 0.12;
	--rgb-color-dimmed-grey-025: 100, 100, 100, 0.25;
	--rgb-color-dimmed-grey-03: 100, 100, 100, 0.3;
	--color-panel-bg: #eaeaf1;
	--color-panel-bg-dimmed: #e1e1e1;
	--font-size-smaller: .8rem;
	--font-size: .9rem;
	--font-size-bigger: .95rem;
	--font-size-button: 1.0rem;
	--font-size-biggest: 1.1rem;
	--panel-radius: .3rem;
	--color-override-primary-dimmed: #f4f4f4;
	--color-override-primary: #c0285b;
	--color-hover-primary: #c83864;
	--color-hover-primary-bg: #c83864;
	--bs-primary-rgb: 216, 7, 106;
	--modal-fade-bg: rgba(0, 15, 0, .5);
	--modal-shadow: 0 0 1rem rgba(0, 0, 0, .3);
	--popup-shadow: 0 0 .2rem rgba(0, 0, 0, .3);
	--color-red: #ff0000;
	--color-placeholder: #b1afaf;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	font-family: 'Barlow', 'Segoe UI', sans-serif;
	background: var(--color-body-bg);
	color: var(--color-text);
	min-height: 100vh;
	font-size: var(--font-size);
}

	body.modal-open {
		overflow: hidden;
	}

h1 {
	color: var(--color-h1);
	margin-top: .15rem;
	margin-bottom: 1.5rem;
	font-size: 2.5rem;
	font-weight: 330;
	letter-spacing: -0.05rem;
}

.label {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.05rem;
	color: var(--color-fg-secondary);
}

.important {
	color: var(--color-h1);
}


a {
	color: var(--color-primary);
	text-decoration: none;
}

	a:hover {
		color: var(--color-primary-dark);
		text-decoration: underline;
	}

/* ===========================
	 Hamburger Checkbox Trick
	 =========================== */
#sidebar-toggle {
	display: none;
}

/* ===========================
	 Layout Shell
	 =========================== */
.app-shell {
	display: flex;
	min-height: 100vh;
}

/* ===========================
	 Sidebar
	 =========================== */
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: var(--sidebar-width);
	background: var(--color-sidebar-bg);
	color: var(--color-sidebar-text);
	display: flex;
	flex-direction: column;
	z-index: 1000;
	transition: width var(--transition), transform var(--transition);
	overflow: hidden;
}

/* Logo area */
.sidebar-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 18px;
	height: var(--topbar-height);
	border-bottom: 1px solid rgba(255,255,255,0.07);
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
}

	.sidebar-logo .logo-icon {
		width: 36px;
		height: 36px;
		flex-shrink: 0;
		object-fit: contain;
	}

	.sidebar-logo .logo-text {
		font-weight: 700;
		font-size: 18px;
		color: #fff;
		letter-spacing: 0.5px;
		opacity: 1;
		transition: opacity var(--transition);
	}

/* Nav */
.sidebar-nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 12px 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.1) transparent;
}

	.sidebar-nav::-webkit-scrollbar {
		width: 4px;
	}

	.sidebar-nav::-webkit-scrollbar-thumb {
		background: rgba(255,255,255,0.12);
		border-radius: 4px;
	}

.nav-section-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-sidebar-muted);
	padding: 16px 20px 6px;
	white-space: nowrap;
	overflow: hidden;
	transition: opacity var(--transition);
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px;
	color: var(--color-sidebar-text);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border-left: 3px solid transparent;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
}

	.nav-item:hover {
		background: var(--color-sidebar-hover);
		color: #fff;
		text-decoration: none;
	}

	.nav-item.active {
		background: rgba(var(--rgb-color-dimmed-grey-02));
		border-left-color: var(--color-primary);
		color: #fff;
	}

	.nav-item .nav-icon {
		font-size: 18px;
		flex-shrink: 0;
		width: 22px;
		text-align: center;
		color: var(--color-sidebar-muted);
		transition: color var(--transition);
	}

	.nav-item:hover .nav-icon,
	.nav-item.active .nav-icon {
		color: var(--color-primary-light);
	}

	.nav-item .nav-label {
		opacity: 1;
		transition: opacity var(--transition);
		flex: 1;
	}

.nav-badge {
	background: var(--color-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 10px;
	flex-shrink: 0;
}

/* Collapse toggle button */
.sidebar-collapse-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 0;
	border-top: 1px solid rgba(255,255,255,0.07);
	cursor: pointer;
	color: var(--color-sidebar-muted);
	font-size: 20px;
	transition: color var(--transition), background var(--transition);
	flex-shrink: 0;
}

	.sidebar-collapse-btn:hover {
		color: #fff;
		background: rgba(255,255,255,0.05);
	}

/* User info in sidebar (shown on mobile only) */
.sidebar-user {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid rgba(255,255,255,0.07);
	flex-shrink: 0;
	overflow: hidden;
}

	.sidebar-user .user-avatar {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: var(--color-primary);
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 13px;
		color: #fff;
		flex-shrink: 0;
	}

	.sidebar-user .user-info {
		overflow: hidden;
	}

	.sidebar-user .user-name {
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sidebar-user .user-role {
		font-size: 11px;
		color: var(--color-sidebar-muted);
		white-space: nowrap;
	}

	.sidebar-user .logout-btn {
		margin-left: auto;
		background: transparent;
		border: 1px solid rgba(255,255,255,0.15);
		color: var(--color-sidebar-muted);
		border-radius: var(--radius);
		padding: 4px 8px;
		font-size: 11px;
		cursor: pointer;
		white-space: nowrap;
	}

		.sidebar-user .logout-btn:hover {
			background: var(--color-primary);
			color: #fff;
			border-color: var(--color-primary);
		}

/* ===========================
	 Collapsed Sidebar State
	 =========================== */
.sidebar.collapsed {
	width: var(--sidebar-collapsed-width);
}

	/* Hide text by collapsing width + opacity so they don't push layout */
	.sidebar.collapsed .logo-text,
	.sidebar.collapsed .nav-label,
	.sidebar.collapsed .nav-section-label,
	.sidebar.collapsed .nav-badge {
		opacity: 0;
		max-width: 0;
		overflow: hidden;
		white-space: nowrap;
		pointer-events: none;
		margin: 0;
		padding: 0;
	}

	.sidebar.collapsed .nav-item {
		justify-content: center;
		padding: 10px 0;
		gap: 0;
		border-left-color: transparent;
	}

		.sidebar.collapsed .nav-item.active {
			border-left-color: transparent;
			background: rgba(var(--rgb-color-dimmed-grey-02));
		}

		.sidebar.collapsed .nav-item .nav-icon {
			width: auto;
			margin: 0 auto;
		}

	.sidebar.collapsed .sidebar-logo {
		justify-content: center;
		padding: 0;
	}

	.sidebar.collapsed .nav-section-label {
		height: 0;
		padding: 0;
	}

	.sidebar.collapsed .sidebar-collapse-btn .collapse-icon-open {
		display: none;
	}

.sidebar-collapse-btn .collapse-icon-close {
	display: none;
}

.sidebar.collapsed .sidebar-collapse-btn .collapse-icon-close {
	display: inline;
}

/* ===========================
	 Main Content
	 =========================== */
.main-wrapper {
	margin-left: var(--sidebar-width);
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	transition: margin-left var(--transition);
}

	.main-wrapper.collapsed {
		margin-left: var(--sidebar-collapsed-width);
	}

/* ===========================
	 Top Bar
	 =========================== */
.topbar {
	position: sticky;
	top: 0;
	z-index: 500;
	height: var(--topbar-height);
	background: var(--color-topbar-bg);
	border-bottom: 1px solid var(--color-topbar-border);
	display: flex;
	align-items: center;
	padding: 0 24px;
	gap: 16px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.topbar-title {
	font-weight: 700;
	font-size: 17px;
	color: var(--color-text);
	flex: 1;
}

.topbar-user {
	display: flex;
	align-items: center;
	gap: 10px;
}

	.topbar-user .user-avatar {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: var(--color-primary);
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 13px;
		color: #fff;
	}

	.topbar-user .user-name {
		font-weight: 600;
		font-size: 14px;
		color: var(--color-text);
	}

	.topbar-user .user-role {
		font-size: 11px;
		color: var(--color-text-muted);
	}

/* Hamburger label (hidden on desktop) */
.hamburger-label {
	display: none;
	cursor: pointer;
	font-size: 22px;
	color: var(--color-text);
	padding: 4px;
	line-height: 1;
}

/* ===========================
	 Page Content
	 =========================== */
.page-content {
	flex: 1;
	padding: .75rem 2rem 1rem 2rem;
}

.page-header {
	margin-bottom: 24px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

	.page-header h1 {
		font-size: 22px;
		font-weight: 700;
		margin: 0 0 4px;
		color: var(--color-text);
	}

.breadcrumb-bar {
	font-size: 12px;
	color: var(--color-text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

	.breadcrumb-bar .sep {
		color: var(--color-border);
	}

	.breadcrumb-bar a {
		color: var(--color-text-muted);
	}

		.breadcrumb-bar a:hover {
			color: var(--color-primary);
		}

/* ===========================
	 Cards
	 =========================== */
.card {
	background: var(--color-card-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--color-border);
}

.card-header-custom {
	padding: 16px 20px;
	border-bottom: 1px solid var(--color-border);
	font-weight: 700;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}

	.card-header-custom .header-icon {
		color: var(--color-primary);
		font-size: 17px;
	}

.card-body-custom {
	padding: 20px;
}

/* ===========================
	 Stat Cards (Dashboard)
	 =========================== */
.stat-card {
	background: var(--color-card-bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 1px solid var(--color-border);
	padding: 20px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.stat-icon {
	width: 52px;
	height: 52px;
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	flex-shrink: 0;
}

	.stat-icon i {
		color: inherit;
	}

.stat-value {
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
}

/* Color variants for stat values - match icon colors */
.stat-card:has(.icon-red) .stat-value {
	color: var(--color-primary);
}

.stat-card:has(.icon-blue) .stat-value {
	color: #0d6efd;
}

.stat-card:has(.icon-green) .stat-value {
	color: #198754;
}

.stat-card:has(.icon-orange) .stat-value {
	color: #fd7e14;
}

.stat-card:has(.icon-purple) .stat-value {
	color: #6f42c1;
}

.stat-card:has(.icon-teal) .stat-value {
	color: #20c997;
}

.stat-card:has(.icon-yellow) .stat-value {
	color: #b08700;
}

.stat-card:has(.icon-dark) .stat-value {
	color: #212529;
}

.stat-card:has(.icon-success) .stat-value {
	color: #198754;
}

.stat-card:has(.icon-info) .stat-value {
	color: #0dcaf0;
}

.stat-card:has(.icon-primary) .stat-value {
	color: var(--color-primary);
}

.stat-card:has(.icon-warning) .stat-value {
	color: #b08700;
}

.stat-card:has(.icon-gray) .stat-value {
	color: #6c757d;
}

.stat-label {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 3px;
}

.stat-delta {
	font-size: 11px;
	margin-top: 4px;
}

	.stat-delta.up {
		color: var(--color-success);
	}

	.stat-delta.down {
		color: var(--color-danger);
	}
/* ===========================
	 Tables
	 =========================== */
.table-custom thead th {
	background: #f8f8f8;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--color-text-muted);
	border-bottom: 2px solid var(--color-border);
	padding: 10px 14px;
	white-space: nowrap;
}

.table-custom tbody td {
	padding: 11px 14px;
	vertical-align: middle;
	font-size: 14px;
}

.table-custom tbody tr {
	border-bottom: 1px solid #f0f0f0;
	transition: background var(--transition);
}

	.table-custom tbody tr:hover {
		background: #fafafa;
	}

	.table-custom tbody tr:last-child {
		border-bottom: none;
	}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

	.status-badge.active {
		background: #e6f4ea;
		color: #1a7a3a;
	}

	.status-badge.inactive {
		background: #fdecea;
		color: #b71c1c;
	}

	.status-badge.pending {
		background: #fff8e1;
		color: #b75a00;
	}
/* Table toolbar */
.table-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-border);
}

	.table-toolbar .search-box {
		position: relative;
		flex: 1;
		min-width: 200px;
		max-width: 350px;
	}

		.table-toolbar .search-box .search-icon {
			position: absolute;
			left: 10px;
			top: 50%;
			transform: translateY(-50%);
			color: var(--color-text-muted);
			font-size: 14px;
		}

		.table-toolbar .search-box input {
			padding-left: 32px;
			width: 100%;
		}

	.table-toolbar .filter-chip {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 5px 12px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 500;
		background: transparent;
		border: 1px solid var(--color-border);
		color: var(--color-text);
		cursor: pointer;
		transition: all var(--transition);
		white-space: nowrap;
	}

		.table-toolbar .filter-chip:hover {
			background: rgba(var(--rgb-color-dimmed-grey-005));
			border-color: rgba(var(--rgb-color-dimmed-grey-03));
		}

		.table-toolbar .filter-chip.active {
			background: var(--color-primary);
			color: #fff;
			border-color: var(--color-primary);
		}
/* Pagination */
.pagination-custom {
	display: flex;
	gap: 4px;
	align-items: center;
}

	.pagination-custom .page-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 32px;
		height: 32px;
		padding: 6px 10px;
		font-size: 13px;
		font-weight: 500;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		background: var(--color-card-bg);
		color: var(--color-text);
		text-decoration: none;
		transition: all var(--transition);
	}

		.pagination-custom .page-btn:hover:not(.disabled) {
			background: var(--color-primary);
			color: #fff;
			border-color: var(--color-primary);
		}

		.pagination-custom .page-btn.active {
			background: var(--color-primary);
			color: #fff;
			border-color: var(--color-primary);
			font-weight: 600;
		}

		.pagination-custom .page-btn.disabled {
			opacity: 0.4;
			cursor: not-allowed;
			pointer-events: none;
		}
/* Row actions (for table cells with action links) */
.row-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

	.row-actions .row-action-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: var(--radius);
		color: var(--color-text-muted);
		text-decoration: none;
		transition: all var(--transition);
		font-size: 14px;
	}

		.row-actions .row-action-btn:hover {
			background: rgba(var(--rgb-color-dimmed-grey-008));
			color: var(--color-primary);
		}

		.row-actions .row-action-btn.del:hover {
			background: rgba(220,53,69,0.08);
			color: var(--color-danger);
		}
/* ===========================
	 Forms
	 =========================== */
.form-label-custom {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 5px;
	display: block;
}

.form-control:focus, .form-select:focus {
	border-color: rgba(var(--rgb-color-dimmed-grey));
	box-shadow: 0 0 0 3px rgba(var(--rgb-color-dimmed-grey-012));
}

.required-star {
	color: var(--color-primary);
	margin-left: 2px;
}

.form-section-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--color-primary);
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid rgba(var(--rgb-color-dimmed-grey-012));
}
/* ===========================
	 Buttons
	 =========================== */
.btn-primary-custom {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	border-radius: var(--radius);
	padding: 8px 20px;
	transition: background var(--transition), border-color var(--transition);
	border: 1px solid transparent;
}

	.btn-primary-custom:hover {
		background: var(--color-primary-dark);
		border-color: var(--color-primary-dark);
		color: #fff;
	}

.btn-outline-custom {
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-weight: 500;
	font-size: 14px;
	border-radius: var(--radius);
	padding: 8px 20px;
	transition: all var(--transition);
}

	.btn-outline-custom:hover {
		border-color: var(--color-primary);
		color: var(--color-primary);
	}
/* ===========================
	 Modal
	 =========================== */
.modal-header {
	border-bottom: 1px solid var(--color-border);
}

	.modal-header .modal-title {
		font-weight: 700;
		font-size: 17px;
	}

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

.modal-backdrop-custom {
	background: rgba(0,0,0,0.5);
	backdrop-filter: blur(2px);
}
/* ===========================
	 Overlay for mobile sidebar
	 =========================== */
.sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 999;
}
/* ===========================
	 Responsive – Mobile / Tablet
	 =========================== */
@media (max-width: 991.98px) {
	/* Hide topbar user on mobile, show in sidebar */
	.topbar-user, .topbar-logout {
		display: none;
	}

	.sidebar-user {
		display: flex;
	}
	/* Hamburger visible */
	.hamburger-label {
		display: flex;
	}
	/* Sidebar hidden off-screen by default on mobile */
	.sidebar {
		transform: translateX(-100%);
		width: var(--sidebar-width) !important; /* override collapsed */
	}
	/* When checkbox checked: show sidebar and overlay */
	#sidebar-toggle:checked ~ .sidebar-overlay {
		display: block;
	}

	#sidebar-toggle:checked ~ .app-shell .sidebar,
	#sidebar-toggle:checked + .sidebar-overlay + .app-shell .sidebar {
		transform: translateX(0);
	}
	/* Simpler: put overlay + sidebar as siblings to checkbox */
	#sidebar-toggle:checked ~ .sidebar {
		transform: translateX(0);
	}

	#sidebar-toggle:checked ~ .sidebar-overlay {
		display: block;
	}
	/* Restore logo text on mobile even if collapsed */
	.sidebar .logo-text {
		opacity: 1 !important;
		max-width: 999px !important;
	}

	.sidebar .nav-label {
		opacity: 1 !important;
		max-width: 999px !important;
		pointer-events: auto !important;
	}

	.sidebar .nav-section-label {
		opacity: 1 !important;
		max-width: 999px !important;
		height: auto !important;
		padding: 16px 20px 6px !important;
	}

	.sidebar .nav-badge {
		opacity: 1 !important;
		max-width: 999px !important;
		padding: 1px 6px !important;
		margin: 0 !important;
	}

	.sidebar .nav-item {
		justify-content: flex-start !important;
		padding: 10px 20px !important;
		gap: 12px !important;
	}

	.sidebar .sidebar-logo {
		justify-content: flex-start !important;
		padding: 0 18px !important;
	}
	/* Hide collapse btn on mobile */
	.sidebar-collapse-btn {
		display: none;
	}
	/* Main wrapper full width */
	.main-wrapper, .main-wrapper.collapsed {
		margin-left: 0;
	}
}

@media (max-width: 575.98px) {
	.page-content {
		padding: 16px;
	}

	.page-header {
		flex-direction: column;
	}

	.topbar {
		padding: 0 14px;
	}
}
/* ===========================
	 Utility
	 =========================== */
.text-primary-custom {
	color: var(--color-primary) !important;
}

.bg-primary-custom {
	background: var(--color-primary) !important;
}

.divider {
	height: 1px;
	background: var(--color-border);
	margin: 20px 0;
}
/* Settings menu */
/* ── Admin card grid ── */
.admin-card {
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 22px 22px;
	text-decoration: none;
	color: var(--color-text);
	transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
	position: relative;
	overflow: hidden;
}

	.admin-card::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 3px;
		background: var(--color-primary);
		opacity: 0;
		transition: opacity var(--transition);
	}

	.admin-card:hover {
		box-shadow: var(--shadow-lg);
		border-color: rgba(var(--rgb-color-dimmed-grey-025));
		/*transform: translateY(-2px);*/
		color: var(--color-text);
		text-decoration: none;
	}

		.admin-card:hover::after {
			opacity: 1;
		}

.admin-card-icon {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	flex-shrink: 0;
	transition: background var(--transition);
}

.admin-card-body {
	flex: 1;
	min-width: 0;
}

.admin-card-title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.admin-card-desc {
	font-size: 13px;
	color: var(--color-text-muted);
	line-height: 1.5;
	margin: 0;
}

.admin-card-arrow {
	font-size: 18px;
	color: #ccc;
	align-self: center;
	flex-shrink: 0;
	transition: color var(--transition), transform var(--transition);
}

.admin-card:hover .admin-card-arrow {
	color: var(--color-primary);
	transform: translateX(2px);
}
/* Color variants for icons */
.icon-red {
	background: rgba(var(--rgb-color-dimmed-grey-009));
	color: var(--color-primary);
}

	.icon-red i {
		color: var(--color-primary);
	}

.icon-blue {
	background: rgba(13,110,253,0.09);
	color: #0d6efd;
}

	.icon-blue i {
		color: #0d6efd;
	}

.icon-green {
	background: rgba(25,135,84,0.09);
	color: #198754;
}

	.icon-green i {
		color: #198754;
	}

.icon-orange {
	background: rgba(253,126,20,0.09);
	color: #fd7e14;
}

	.icon-orange i {
		color: #fd7e14;
	}

.icon-purple {
	background: rgba(111,66,193,0.09);
	color: #6f42c1;
}

	.icon-purple i {
		color: #6f42c1;
	}

.icon-teal {
	background: rgba(32,201,151,0.09);
	color: #20c997;
}

	.icon-teal i {
		color: #20c997;
	}

.icon-yellow {
	background: rgba(255,193,7,0.12);
	color: #b08700;
}

	.icon-yellow i {
		color: #b08700;
	}

.icon-dark {
	background: rgba(33,37,41,0.08);
	color: #212529;
}

	.icon-dark i {
		color: #212529;
	}

.icon-success {
	background: rgba(25,135,84,0.09);
	color: #198754;
}

	.icon-success i {
		color: #198754;
	}

.icon-info {
	background: rgba(13,202,240,0.09);
	color: #0dcaf0;
}

	.icon-info i {
		color: #0dcaf0;
	}

.icon-primary {
	background: rgba(var(--rgb-color-dimmed-grey-009));
	color: var(--color-primary);
}

	.icon-primary i {
		color: var(--color-primary);
	}

.icon-warning {
	background: rgba(255,193,7,0.12);
	color: #b08700;
}

	.icon-warning i {
		color: #b08700;
	}

.icon-gray {
	background: rgba(108,117,125,0.09);
	color: #6c757d;
}

	.icon-gray i {
		color: #6c757d;
	}



/* Section heading */
.section-heading {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--color-text-muted);
	margin: 28px 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-border);
}

	.section-heading:first-of-type {
		margin-top: 0;
	}
/* Pill badge on card title */
.card-pill {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.pill-red {
	background: rgba(var(--rgb-color-dimmed-grey));
	color: var(--color-primary);
}

.pill-green {
	background: rgba(25,135,84,0.1);
	color: #198754;
}

.pill-orange {
	background: rgba(253,126,20,0.1);
	color: #c96209;
}

.pill-blue {
	background: rgba(13,110,253,0.1);
	color: #0a58ca;
}
/* System status bar */
.status-bar {
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 28px;
	box-shadow: var(--shadow);
}

.status-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-muted);
	white-space: nowrap;
}

.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.dot-green {
	background: #1db954;
	box-shadow: 0 0 0 3px rgba(29,185,84,0.15);
}

.dot-orange {
	background: #fd7e14;
	box-shadow: 0 0 0 3px rgba(253,126,20,0.15);
}

.dot-red {
	background: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--rgb-color-dimmed-grey-015));
}

.status-bar .ms-auto {
	margin-left: auto;
	font-size: 11px;
	color: #bbb;
}


.splash {
	width: 180px;
	height: 25px;
	-webkit-mask: linear-gradient(90deg,#000 70%,#0000 0) left/20% 100%;
	background: linear-gradient(var(--color-primary) 0 0) left -25% top 0 /20% 100% no-repeat var(--color-header-border);
	animation: splash 1s infinite steps(6);
}


@keyframes splash {
	100% {
		background-position: right -25% top 0
	}
}



.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}

#blazor-error-ui {
	color-scheme: light only;
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}