/* ==========================================================================
   RecipePoint Admin - Modern UI layer
   Loaded after css/style.css (see app_styles.php). Pure CSS, no markup changes.
   Change --a-primary below to re-color the whole admin panel.
   ========================================================================== */

:root {
	--a-primary: #5b5bd6;
	--a-primary-dark: #4747b8;
	--a-primary-soft: #eeeefc;
	--a-primary-ring: rgba(91, 91, 214, .22);

	--a-success: #12b76a;
	--a-info: #0ea5e9;
	--a-warning: #f59e0b;
	--a-danger: #ef4444;

	--a-ink: #0f1626;
	--a-ink-soft: #3b475c;
	--a-ink-faint: #6b778c;
	--a-line: #cfd6e4;
	--a-canvas: #e6eaf3;
	--a-surface: #ffffff;
	--a-field-border: #aeb8cc;
	--a-head-bg: #eef1f8;

	--a-side-1: #111827;
	--a-side-2: #1b2236;

	--a-radius-sm: 10px;
	--a-radius: 14px;
	--a-shadow-sm: 0 1px 2px rgba(16, 24, 40, .08);
	--a-shadow: 0 1px 3px rgba(16, 24, 40, .10), 0 10px 24px -10px rgba(16, 24, 40, .18);
	--a-shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, .25);
}

/* ---------- Base ---------- */
body {
	background: var(--a-canvas);
	color: var(--a-ink);
	font-size: 14.5px;
	-webkit-font-smoothing: antialiased;
}

#wrapper #content-wrapper,
#content-wrapper {
	background-color: var(--a-canvas);
}

#content-wrapper #content,
.table td,
table.dataTable tbody td,
.dataTables_wrapper {
	color: var(--a-ink);
}

a {
	color: var(--a-primary);
}

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

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
	color: var(--a-ink);
}

h1.h3 {
	font-size: 1.55rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--a-ink) !important;
	margin-bottom: 1.25rem !important;
}

.text-gray-800 { color: var(--a-ink) !important; }
.text-gray-600 { color: var(--a-ink-soft) !important; }
.text-muted { color: var(--a-ink-soft) !important; }
.text-gray-500 { color: var(--a-ink-faint) !important; }
.text-gray-300 { color: #aab4c8 !important; }

.text-primary { color: var(--a-primary) !important; }
.text-success { color: var(--a-success) !important; }
.text-info { color: var(--a-info) !important; }
.text-warning { color: var(--a-warning) !important; }
.text-danger { color: var(--a-danger) !important; }

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

* {
	scrollbar-width: thin;
	scrollbar-color: #cdd3e1 transparent;
}

::selection {
	background: var(--a-primary);
	color: #fff;
}

/* ---------- Sidebar ---------- */
.sidebar,
.bg-gradient-primary {
	background: linear-gradient(180deg, var(--a-side-1) 0%, var(--a-side-2) 100%) !important;
}

.sidebar {
	box-shadow: 4px 0 24px -12px rgba(0, 0, 0, .35);
}

/* keep the sidebar at its full width (the links used to hold it open with a fixed width) */
@media (min-width: 768px) {
	.sidebar {
		flex: 0 0 14rem;
		min-width: 14rem;
	}

	.sidebar.toggled {
		flex: 0 0 6.5rem;
		min-width: 6.5rem;
	}
}

.sidebar .sidebar-brand {
	height: 4.6rem;
	padding: 0 1rem;
}

.sidebar .sidebar-brand .sidebar-brand-text {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.sidebar-divider {
	border-top: 1px solid rgba(255, 255, 255, .07) !important;
	margin: 0 1rem 0.6rem !important;
}

.sidebar .nav-item {
	padding: 0 .75rem;
}

.sidebar .nav-item .nav-link {
	display: flex;
	align-items: center;
	width: 100%;
	padding: .62rem .8rem !important;
	margin-bottom: 2px;
	border-radius: 10px;
	color: rgba(255, 255, 255, .62) !important;
	font-size: .875rem;
	font-weight: 500;
	transition: background .2s ease, color .2s ease;
}

.sidebar .nav-item .nav-link i {
	width: 20px !important;
	margin-right: .65rem;
	font-size: .9rem;
	text-align: center;
	color: rgba(255, 255, 255, .45);
	transition: color .2s ease;
}

.sidebar .nav-item .nav-link span {
	flex: 1 1 auto;
	font-size: .875rem;
}

.sidebar .nav-item .nav-link:hover {
	background: rgba(255, 255, 255, .07);
	color: #fff !important;
}

.sidebar .nav-item .nav-link:hover i {
	color: #fff;
}

.sidebar .nav-item.active .nav-link {
	background: linear-gradient(90deg, var(--a-primary), color-mix(in srgb, var(--a-primary) 70%, #7c3aed));
	color: #fff !important;
	font-weight: 600 !important;
	box-shadow: 0 8px 18px -8px var(--a-primary);
}

.sidebar .nav-item.active .nav-link i {
	color: #fff;
}

/* collapse arrow */
.sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
	width: auto;
	margin-left: auto;
	font-size: .7rem;
	opacity: .7;
}

/* sub menu panel */
.sidebar .nav-item .collapse,
.sidebar .nav-item .collapsing {
	margin: 0;
}

.sidebar .nav-item .collapse .collapse-inner,
.sidebar .nav-item .collapsing .collapse-inner {
	margin: 2px 0 8px;
	padding: .35rem !important;
	background: rgba(255, 255, 255, .05) !important;
	border-radius: 10px;
	box-shadow: none;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item {
	margin: 0;
	padding: .5rem .85rem;
	border-radius: 8px;
	color: rgba(255, 255, 255, .6);
	font-size: .84rem;
	font-weight: 500;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-weight: 700;
}

#sidebarToggle {
	background-color: rgba(255, 255, 255, .1);
	transition: background .2s ease;
}

#sidebarToggle:hover {
	background-color: rgba(255, 255, 255, .2);
}

/* collapsed sidebar keeps working with the new padding */
.sidebar.toggled .nav-item {
	padding: 0;
}

.sidebar.toggled .nav-item .nav-link {
	justify-content: center;
	border-radius: 0;
}

.sidebar.toggled .nav-item .nav-link i {
	margin-right: 0;
}

/* ---------- Topbar ---------- */
.topbar {
	height: 4.2rem;
	margin-bottom: 1.5rem !important;
	background: rgba(255, 255, 255, .9) !important;
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--a-line);
	box-shadow: none !important;
	position: sticky;
	top: 0;
	z-index: 100;
}

.topbar .navbar-nav {
	align-items: center;
}

.topbar .nav-item .nav-link {
	height: 4.2rem;
}

.topbar .btn.btn-info.btn-sm {
	margin-top: 0 !important;
	padding: .45rem 1.1rem;
	border-radius: 999px;
	font-weight: 600;
	background: var(--a-primary-soft);
	border-color: transparent;
	color: var(--a-primary-dark);
}

.topbar .btn.btn-info.btn-sm:hover {
	background: var(--a-primary);
	color: #fff;
}

.topbar .topbar-divider {
	border-right: 1px solid var(--a-line);
}

.topbar .img-profile {
	width: 2.2rem;
	height: 2.2rem;
	object-fit: cover;
	border: 2px solid var(--a-primary-soft);
}

.topbar .dropdown-menu {
	border: 1px solid var(--a-line);
	border-radius: var(--a-radius);
	box-shadow: var(--a-shadow-lg);
	padding: .5rem;
}

.topbar .dropdown-item,
.dropdown-item {
	border-radius: 8px;
	padding: .55rem .8rem;
	font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--a-primary-soft);
	color: var(--a-primary-dark);
}

.container-fluid {
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

/* ---------- Cards ---------- */
.card {
	color: var(--a-ink);
	border: 1px solid var(--a-line);
	border-radius: var(--a-radius);
	background: var(--a-surface);
}

.card.shadow,
.card.shadow-sm {
	box-shadow: var(--a-shadow) !important;
}

.card-header {
	padding: 1rem 1.35rem;
	background: var(--a-head-bg);
	border-bottom: 1px solid var(--a-line);
	border-radius: var(--a-radius) var(--a-radius) 0 0 !important;
}

.card-header h6 {
	font-size: .95rem;
	letter-spacing: -.005em;
}

.card-body {
	padding: 1.35rem;
}

.card-body label {
	margin-bottom: .4rem;
	font-size: 14px;
	font-weight: 700;
	color: var(--a-ink);
}

.card-footer {
	background: var(--a-head-bg);
	border-top: 1px solid var(--a-line);
}

/* ---------- Dashboard ---------- */
.dashboard-page .card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--a-line);
	border-left-width: 1px !important;
	transition: transform .25s ease, box-shadow .25s ease;
}

.dashboard-page .card:hover {
	transform: translateY(-3px);
	box-shadow: var(--a-shadow-lg) !important;
}

.dashboard-page .card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--a-primary);
}

.dashboard-page .card.border-left-success::before { background: var(--a-success); }
.dashboard-page .card.border-left-info::before { background: var(--a-info); }
.dashboard-page .card.border-left-warning::before { background: var(--a-warning); }
.dashboard-page .card.border-left-danger::before { background: var(--a-danger); }

.dashboard-page .card .card-body {
	padding: 1.25rem 1.4rem;
}

.dashboard-page .h4 {
	margin-bottom: .45rem !important;
	font-size: 12.5px !important;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--a-ink-soft) !important;
}

.dashboard-page .h5 {
	font-size: 30px !important;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--a-ink) !important;
}

.dashboard-page .col-auto i.fa-2x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	font-size: 1.25rem;
	background: var(--a-primary-soft);
	color: var(--a-primary) !important;
}

.dashboard-page .border-left-success .col-auto i.fa-2x {
	background: #e7f8f0;
	color: var(--a-success) !important;
}

.dashboard-page .border-left-info .col-auto i.fa-2x {
	background: #e5f4fd;
	color: var(--a-info) !important;
}

.dashboard-page .border-left-warning .col-auto i.fa-2x {
	background: #fef3e2;
	color: var(--a-warning) !important;
}

.dashboard-page .border-left-danger .col-auto i.fa-2x {
	background: #fdecec;
	color: var(--a-danger) !important;
}

/* ---------- Buttons ---------- */
.btn {
	border-radius: var(--a-radius-sm);
	font-weight: 600;
	font-size: .86rem;
	padding: .5rem 1rem;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease, color .2s ease;
}

.btn-sm {
	padding: .32rem .75rem;
	font-size: .8rem;
	border-radius: 8px;
}

.btn:focus,
.btn.focus {
	box-shadow: 0 0 0 4px var(--a-primary-ring) !important;
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary {
	background-color: var(--a-primary);
	border-color: var(--a-primary);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
	background-color: var(--a-primary-dark) !important;
	border-color: var(--a-primary-dark) !important;
}

.btn-success {
	background-color: var(--a-success);
	border-color: var(--a-success);
}
.btn-success:hover, .btn-success:active, .btn-success:focus {
	background-color: #0e9f5c !important;
	border-color: #0e9f5c !important;
}

.btn-info {
	background-color: var(--a-info);
	border-color: var(--a-info);
	color: #fff;
}
.btn-info:hover, .btn-info:active, .btn-info:focus {
	background-color: #0284c7 !important;
	border-color: #0284c7 !important;
	color: #fff;
}

.btn-warning {
	background-color: var(--a-warning);
	border-color: var(--a-warning);
	color: #fff;
}
.btn-warning:hover { background-color: #d97706; border-color: #d97706; color: #fff; }

.btn-danger {
	background-color: var(--a-danger);
	border-color: var(--a-danger);
}
.btn-danger:hover, .btn-danger:active, .btn-danger:focus {
	background-color: #dc2626 !important;
	border-color: #dc2626 !important;
}

.btn-secondary {
	background-color: #667085;
	border-color: #667085;
}

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

.btn-outline-secondary {
	border-color: var(--a-line);
	color: var(--a-ink-soft);
}

.btn-link {
	color: var(--a-primary);
}

/* ---------- Forms ---------- */
.form-control,
.custom-select {
	height: auto;
	min-height: 42px;
	padding: .55rem .9rem;
	border: 1px solid var(--a-field-border);
	border-radius: var(--a-radius-sm);
	background-color: #fff;
	color: var(--a-ink);
	font-size: .9rem;
	transition: border-color .2s ease, box-shadow .2s ease;
}

textarea.form-control {
	min-height: 96px;
}

.form-control:focus,
.custom-select:focus {
	border-color: var(--a-primary) !important;
	box-shadow: 0 0 0 4px var(--a-primary-ring) !important;
}

.form-control::placeholder {
	color: var(--a-ink-faint);
}

.form-control:disabled,
.form-control[readonly] {
	background: #e9edf5;
}

input[type="file"].form-control,
input[type="file"] {
	font-size: .88rem;
	color: var(--a-ink-soft);
}

input[type="file"]::file-selector-button {
	margin-right: .85rem;
	padding: .45rem .95rem;
	border: 1px solid var(--a-line);
	border-radius: 8px;
	background: #f4f6fb;
	color: var(--a-ink);
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease;
}

input[type="file"]::file-selector-button:hover {
	background: var(--a-primary-soft);
}

.custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--a-primary);
	border-color: var(--a-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 4px var(--a-primary-ring);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--a-primary);
}

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	min-height: 42px;
	border: 1px solid var(--a-field-border);
	border-radius: var(--a-radius-sm);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 40px;
	padding-left: 14px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--a-primary);
	box-shadow: 0 0 0 4px var(--a-primary-ring);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--a-primary);
}

.select2-dropdown {
	border: 1px solid var(--a-line);
	border-radius: var(--a-radius-sm);
	box-shadow: var(--a-shadow-lg);
	overflow: hidden;
}

/* summernote */
.note-editor.note-frame {
	border: 1px solid var(--a-field-border);
	border-radius: var(--a-radius-sm);
	overflow: hidden;
}

.note-editor.note-frame .note-toolbar {
	background: var(--a-head-bg);
	border-bottom: 1px solid var(--a-line);
}

/* ---------- Tabs / pills ---------- */
.nav-pills .nav-link {
	border-radius: var(--a-radius-sm);
	font-weight: 600;
	color: var(--a-ink-soft);
}

.t-left .nav-pills .nav-link {
	background-color: transparent;
	margin-bottom: 4px;
	padding: .65rem 1rem;
	color: var(--a-ink-soft);
}

.t-left .nav-pills .nav-link:hover {
	background-color: var(--a-primary-soft);
	color: var(--a-primary-dark);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	color: #fff !important;
	background-color: var(--a-primary) !important;
	box-shadow: 0 8px 18px -8px var(--a-primary);
}

.nav-tabs {
	border-bottom: 1px solid var(--a-line);
}

.nav-tabs .nav-link {
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--a-ink-soft);
	font-weight: 600;
}

.nav-tabs .nav-link.active {
	color: var(--a-primary);
	border-bottom-color: var(--a-primary);
	background: transparent;
}

.heading-in-tab {
	color: var(--a-ink);
	border-bottom: 1px solid var(--a-line);
	font-size: 1.05rem;
}

/* ---------- Tables / DataTables ---------- */
.table {
	color: var(--a-ink);
	margin-bottom: 0;
}

.table-bordered,
.table-bordered td,
.table-bordered th {
	border-color: var(--a-line) !important;
}

.table thead th {
	padding: .85rem .9rem;
	background: var(--a-head-bg);
	border-bottom: 2px solid var(--a-line) !important;
	color: var(--a-ink);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}

.table td {
	padding: .85rem .9rem;
	vertical-align: middle;
}

.table tbody tr {
	transition: background .15s ease;
}

.table tbody tr:hover {
	background: #f1f4fb;
}

.table td img {
	border-radius: 10px;
	object-fit: cover;
}

.table .btn {
	margin-bottom: 3px;
	vertical-align: middle;
}

.table td .btn-block {
	width: auto;
	display: inline-block;
	min-width: 76px;
}

/* Bootstrap adds .5rem top margin to a .btn-block that follows another one,
   which pushed "Delete" lower than "Detail". Keep them on one line. */
.table td .btn-block + .btn-block {
	margin-top: 0;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
	font-size: .86rem;
	color: var(--a-ink-soft);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
	border: 1px solid var(--a-field-border);
	border-radius: var(--a-radius-sm);
	padding: .4rem .75rem;
	height: auto;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
	border-color: var(--a-primary);
	box-shadow: 0 0 0 4px var(--a-primary-ring);
}

.dataTables_wrapper .dataTables_filter input {
	margin-left: .5rem;
	min-width: 220px;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
	background-image: none !important;
}

.page-item .page-link {
	margin: 0 2px;
	border: 1px solid var(--a-line);
	border-radius: 8px !important;
	color: var(--a-ink-soft);
	font-weight: 600;
	font-size: .85rem;
}

.page-item .page-link:hover {
	background: var(--a-primary-soft);
	color: var(--a-primary-dark);
	border-color: var(--a-primary-soft);
}

.page-item.active .page-link {
	background-color: var(--a-primary);
	border-color: var(--a-primary);
	color: #fff;
}

.page-item.disabled .page-link {
	color: var(--a-ink-faint);
	background: var(--a-head-bg);
}

/* ---------- Badges / alerts ---------- */
.badge {
	border-radius: 999px !important;
	padding: 5px 11px !important;
	font-weight: 700;
	letter-spacing: .01em;
}

.badge-success { background: #e7f8f0; color: #0b8a54; }
.badge-danger { background: #fdecec; color: #c62828; }
.badge-warning { background: #fef3e2; color: #b45309; }
.badge-info { background: #e5f4fd; color: #0369a1; }
.badge-primary { background: var(--a-primary-soft); color: var(--a-primary-dark); }
.badge-secondary { background: #eef0f5; color: #475467; }

.alert {
	border: 0;
	border-radius: var(--a-radius-sm);
}

/* ---------- Modals ---------- */
.modal-content {
	border: 0;
	border-radius: var(--a-radius);
	box-shadow: var(--a-shadow-lg);
	overflow: hidden;
}

.modal-header {
	padding: 1.1rem 1.35rem;
	border-bottom: 1px solid var(--a-line);
	background: var(--a-head-bg);
}

.modal-title {
	font-size: 1.05rem;
	font-weight: 700;
}

.modal-body {
	padding: 1.35rem;
}

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

.modal-backdrop.show {
	opacity: .55;
}

/* ---------- Toastr ---------- */
#toast-container > div {
	border-radius: 12px;
	box-shadow: var(--a-shadow-lg);
	opacity: 1;
	padding: 16px 16px 16px 50px;
	font-weight: 500;
}

.toast-success { background-color: var(--a-success); }
.toast-error { background-color: var(--a-danger); }
.toast-info { background-color: var(--a-info); }
.toast-warning { background-color: var(--a-warning); }

/* ---------- Toggle switch (bootstrap4-toggle) ---------- */
.toggle.btn {
	border-radius: 999px;
}

.toggle.btn .toggle-handle {
	border-radius: 999px;
}

.toggle-on.btn,
.toggle-off.btn {
	border-radius: 999px 0 0 999px;
}

.toggle-off.btn {
	border-radius: 0 999px 999px 0;
}

/* ---------- Scroll to top ---------- */
.scroll-to-top {
	right: 1.5rem;
	bottom: 1.5rem;
	width: 2.6rem;
	height: 2.6rem;
	line-height: 2.6rem;
	border-radius: 50% !important;
	background: var(--a-primary);
	box-shadow: 0 10px 20px -8px var(--a-primary);
}

.scroll-to-top:hover {
	background: var(--a-primary-dark);
}

/* ---------- Login / forgot password ---------- */
body.bg-gradient-primary {
	min-height: 100vh;
	background:
		radial-gradient(circle at 15% 20%, rgba(91, 91, 214, .35), transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(124, 58, 237, .28), transparent 45%),
		linear-gradient(180deg, var(--a-side-1), var(--a-side-2)) !important;
}

body.bg-gradient-primary .card {
	border: 0;
	border-radius: 20px;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55) !important;
}

body.bg-gradient-primary .card-body {
	padding: 2.4rem 2.2rem !important;
}

body.bg-gradient-primary .h4,
body.bg-gradient-primary h1 {
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--a-ink);
}

body.bg-gradient-primary .btn-primary,
body.bg-gradient-primary .btn-user {
	padding: .65rem 1rem;
	border-radius: 12px;
	font-size: .95rem;
	box-shadow: 0 12px 24px -10px var(--a-primary);
}

/* sb-admin gives .form-control-user a 1.5rem padding (~70px tall field), so set the height here */
body.bg-gradient-primary .form-control-user,
body.bg-gradient-primary form.user .form-control {
	height: auto;
	min-height: 0;
	padding: .6rem 1rem;
	font-size: .9rem;
	line-height: 1.5;
	border-radius: 10px;
}

/* ---------- Dashboard: sales chart ---------- */
.sales-section {
	margin-top: .5rem;
}

.sales-filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .85rem;
}

.sales-heading {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.sales-year-form {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
}

.sales-year-form label {
	margin: 0;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--a-ink-soft);
}

.sales-year-form .custom-select {
	min-height: 38px;
	width: auto;
	min-width: 92px;
	font-weight: 600;
}

/* chart colors: validated categorical slots 1 and 2 (blue, orange) */
.sales-card {
	--series-1: #2a78d6;
	--series-2: #eb6834;
	--ink: var(--a-ink);
	--ink-muted: var(--a-ink-soft);
	--grid: #dfe4ee;
	--surface: #ffffff;
}

.sales-card .card-body {
	padding: 1.5rem 1.5rem 1.25rem;
}

.sales-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.sales-stats {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2.5rem;
}

.sales-stat {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	color: var(--a-ink);
}

.sales-stat-label {
	display: flex;
	align-items: center;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--a-ink-soft);
}

.sales-stat-value {
	font-size: 1.65rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--a-ink);
}

.sales-stat-sub {
	font-size: .8rem;
	color: var(--a-ink-soft);
}

.sales-key {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: .5rem;
	border-radius: 3px;
}

.sales-key-1 { background: var(--series-1); }
.sales-key-2 { background: var(--series-2); }

.sales-series {
	cursor: pointer;
	padding: .35rem .6rem;
	margin: -.35rem -.6rem;
	border-radius: 10px;
	transition: background .15s ease, opacity .15s ease;
}

.sales-series:hover {
	background: var(--a-primary-soft);
}

.sales-series:focus-visible {
	outline: 2px solid var(--a-primary) !important;
	outline-offset: 2px;
}

.sales-series.is-off {
	opacity: .45;
}

.sales-series.is-off .sales-stat-value {
	text-decoration: line-through;
}

.sales-view {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--a-line);
	border-radius: 10px;
	background: var(--a-head-bg);
}

.sales-view button {
	padding: .35rem .8rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-size: .82rem;
	font-weight: 600;
	color: var(--a-ink-soft);
	cursor: pointer;
}

.sales-view button.active {
	background: #fff;
	color: var(--a-ink);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.sales-chart-wrap {
	position: relative;
	height: 320px;
}

.sales-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 240px;
	border: 1px dashed var(--a-line);
	border-radius: var(--a-radius-sm);
	color: var(--a-ink-soft);
	font-weight: 600;
}

.sales-table-wrap[hidden],
.sales-chart-wrap[hidden],
.sales-empty[hidden] {
	display: none;
}

.sales-table th,
.sales-table td {
	font-variant-numeric: tabular-nums;
}

.sales-table tfoot th {
	border-top: 2px solid var(--a-line);
	font-size: .85rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--a-ink);
}

@media (max-width: 575.98px) {
	.sales-chart-wrap { height: 260px; }
	.sales-stat-value { font-size: 1.35rem; }
	.sales-top { flex-direction: column; }
}

/* ---------- Menu Builder page keeps up with the palette ---------- */
.menu-builder .menu-node.is-open > .menu-box,
.menu-builder .menu-node.is-open > .menu-edit {
	border-color: var(--a-primary);
}

.menu-builder .accordion .btn-link {
	border: 0;
	border-radius: 0;
}

.menu-builder .accordion .btn-link,
.menu-builder .menu-actions button:hover {
	color: var(--a-primary);
}

.menu-builder .menu-box {
	border-color: var(--a-line);
	border-radius: var(--a-radius-sm);
}

.menu-builder .menu-node.is-open > .menu-box {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.menu-builder .menu-edit {
	background: var(--a-head-bg);
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
	/* narrow icon rail: icon on top, small label below */
	.sidebar .nav-item {
		padding: 0;
	}

	.sidebar .nav-item .nav-link {
		flex-direction: column;
		justify-content: center;
		padding: .7rem .3rem !important;
		margin-bottom: 0;
		border-radius: 0;
		text-align: center;
	}

	.sidebar .nav-item .nav-link i {
		margin: 0 0 .25rem;
		font-size: 1rem;
	}

	.sidebar .nav-item .nav-link span {
		flex: 0 0 auto;
		font-size: .62rem;
	}

	.sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
		display: none;
	}

	.container-fluid {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.topbar {
		height: 3.8rem;
	}

	.card-body {
		padding: 1rem;
	}

	.dataTables_wrapper .dataTables_filter input {
		min-width: 0;
		width: 100%;
		margin-left: 0;
	}

	.dashboard-page .h5 {
		font-size: 26px !important;
	}
}