:root {
	--page-bg: #f5f7fa;
	--sidebar-bg: #ffffff;
	--panel-bg: #ffffff;

	--text: #172033;
	--text-soft: #58667a;
	--muted: #8792a5;

	--border: #e2e7ee;
	--border-soft: #edf0f4;

	--primary: #4263eb;
	--primary-soft: #eef2ff;

	--success: #159455;
	--success-soft: #eaf8f0;

	--warning: #b77900;
	--warning-soft: #fff6df;

	--danger: #c33b52;
	--danger-soft: #fff0f2;

	--sidebar-width: 220px;
	--content-width: 920px;

	--radius: 12px;

	--shadow:
		0 4px 18px
		rgba(20, 32, 55, 0.045);
}


/* =========================================================
   BASE
========================================================= */

* {
	box-sizing: border-box;
}


html,
body {
	margin: 0;

	min-height: 100%;

	background:
		var(--page-bg);

	color:
		var(--text);

	font-family:
		Inter,
		Segoe UI,
		Arial,
		sans-serif;

	font-size: 14px;
}


button,
input,
select {
	font: inherit;
}


button {
	cursor: pointer;
}


/* =========================================================
   LAYOUT
========================================================= */

.app-shell {
	min-height: 100vh;
}


.sidebar {
	position: fixed;

	top: 0;
	left: 0;

	width:
		var(--sidebar-width);

	height: 100vh;

	padding:
		24px 18px;

	background:
		var(--sidebar-bg);

	border-right:
		1px solid
		var(--border);

	overflow-y: auto;

	z-index: 20;
}


.content {
	width:
		var(--content-width);

	max-width:
		calc(
			100vw -
			var(--sidebar-width) -
			64px
		);

	margin-left:
		calc(
			var(--sidebar-width) +
			32px
		);

	padding:
		28px 0 60px;
}


/* =========================================================
   SIDEBAR
========================================================= */

.brand-block {
	padding:
		0 8px 20px;
}


.brand {
	font-size: 23px;

	font-weight: 850;

	letter-spacing:
		-0.035em;
}


.brand-caption {
	margin-top: 2px;

	font-size: 10px;

	color:
		var(--muted);
}


.nav {
	border-top:
		1px solid
		var(--border);

	padding-top: 17px;
}


.nav-label {
	padding:
		0 9px;

	margin-bottom: 7px;

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 0.09em;

	color:
		var(--muted);
}


.nav-label-second {
	margin-top: 22px;
}


.nav-item {
	width: 100%;

	min-height: 35px;

	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap: 8px;

	padding:
		8px 10px;

	margin-bottom: 3px;

	border: 0;

	border-radius: 8px;

	background: transparent;

	color:
		var(--text-soft);

	font-size: 13px;

	font-weight: 600;

	text-align: left;
}


.nav-item span {
	font-size: 9px;

	font-weight: 600;

	color:
		#abb3c1;
}


.nav-clickable:hover {
	background:
		#f4f6fa;
}


.nav-disabled {
	color:
		#9aa3b1;

	cursor: default;
}


.nav-active {
	background:
		var(--primary-soft);

	color:
		var(--primary);

	font-weight: 750;
}


/* =========================================================
   PAGE
========================================================= */

.page-header {
	margin-bottom: 16px;

	padding:
		0 2px;
}


.page-eyebrow {
	margin-bottom: 5px;

	font-size: 10px;

	font-weight: 850;

	letter-spacing:
		0.12em;

	color:
		var(--primary);
}


.page-header h1 {
	margin: 0;

	font-size: 27px;

	line-height: 1.18;

	letter-spacing:
		-0.035em;
}


.page-header p {
	margin:
		7px 0 0;

	max-width:
		610px;

	color:
		var(--text-soft);

	font-size:
		12px;

	line-height:
		1.5;
}


/* =========================================================
   PANELS
========================================================= */

.panel {
	background:
		var(--panel-bg);

	border:
		1px solid
		var(--border);

	border-radius:
		var(--radius);

	box-shadow:
		var(--shadow);

	padding: 18px;

	margin-bottom:
		14px;
}


.panel-header {
	margin-bottom:
		16px;
}


.panel-header h2 {
	margin: 0;

	font-size: 15px;
}


.panel-header p {
	margin:
		3px 0 0;

	font-size:
		11px;

	color:
		var(--muted);
}


.panel-header-row {
	display: flex;

	justify-content:
		space-between;

	align-items:
		center;

	gap: 12px;
}


/* =========================================================
   STATS
========================================================= */

.stats-strip {
	height: 58px;

	display: flex;

	align-items: center;

	gap: 22px;

	padding:
		0 18px;

	margin-bottom: 14px;

	background:
		#ffffff;

	border:
		1px solid
		var(--border);

	border-radius:
		var(--radius);

	box-shadow:
		var(--shadow);
}


.stat-item {
	min-width: 95px;
}


.stat-value {
	font-size: 17px;

	font-weight: 800;

	line-height: 1.1;
}


.stat-value-small {
	font-size: 14px;
}


.stat-label {
	margin-top: 3px;

	font-size: 9px;

	color:
		var(--muted);
}


.stat-divider {
	width: 1px;

	height: 28px;

	background:
		var(--border);
}


/* =========================================================
   CATEGORIES
========================================================= */

.categories-table {
	border:
		1px solid
		var(--border);

	border-radius: 9px;

	overflow: hidden;
}


.categories-head,
.category-row {
	display: grid;

	grid-template-columns:
		minmax(300px, 2.5fr)
		135px
		70px
		130px
		90px;

	align-items: center;

	column-gap: 12px;
}


.categories-head {
	min-height: 34px;

	padding:
		0 11px;

	background:
		#f8f9fb;

	border-bottom:
		1px solid
		var(--border);

	font-size: 9px;

	font-weight: 750;

	color:
		var(--muted);

	text-transform: uppercase;

	letter-spacing:
		0.035em;
}


.category-row {
	min-height: 57px;

	padding:
		8px 11px;

	border-bottom:
		1px solid
		var(--border-soft);
}


.category-row:last-child {
	border-bottom: 0;
}


.category-row:hover {
	background:
		#fafbfc;
}


.category-main {
	min-width: 0;
}


.category-table-title {
	font-size: 11px;

	font-weight: 750;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;
}


.category-table-path {
	margin-top: 3px;

	font-size: 9px;

	color:
		var(--muted);

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;
}


.category-cell {
	font-size: 10px;

	color:
		var(--text-soft);
}


.category-latest {
	font-size: 10px;

	font-weight: 650;

	color:
		var(--text);
}


.category-action {
	justify-self: end;
}


/* =========================================================
   IMPORT
========================================================= */

.import-grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1.05fr)
		minmax(350px, 0.95fr);

	gap: 24px;
}


.import-column {
	min-width: 0;
}


.period-column {
	border-left:
		1px solid
		var(--border-soft);

	padding-left:
		24px;
}


.section-number {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 22px;

	height: 22px;

	border-radius: 6px;

	background:
		var(--primary-soft);

	color:
		var(--primary);

	font-size: 11px;

	font-weight: 800;

	margin-right: 6px;
}


.section-title {
	display: inline-block;

	font-size: 13px;

	font-weight: 750;

	margin-bottom: 14px;
}


.field-label {
	display: block;

	margin-bottom: 6px;

	font-size: 10px;

	font-weight: 750;

	color:
		var(--text-soft);
}


.search-row {
	display: grid;

	grid-template-columns:
		1fr auto;

	gap: 7px;
}


input,
select {
	width: 100%;

	height: 36px;

	border:
		1px solid
		var(--border);

	border-radius: 8px;

	background:
		#ffffff;

	color:
		var(--text);

	padding:
		0 10px;

	outline: none;

	font-size:
		12px;
}


input:focus,
select:focus {
	border-color:
		#9eadf5;

	box-shadow:
		0 0 0 2px
		rgba(
			66,
			99,
			235,
			0.07
		);
}


/* =========================================================
   BUTTONS
========================================================= */

.button {
	height: 36px;

	border: 0;

	border-radius: 8px;

	padding:
		0 14px;

	font-size: 12px;

	font-weight: 750;

	white-space: nowrap;
}


.button:disabled {
	opacity: 0.42;

	cursor: not-allowed;
}


.button-primary {
	background:
		var(--primary);

	color:
		#ffffff;
}


.button-primary:hover {
	background:
		#3656d8;
}


.button-success {
	background:
		var(--success);

	color:
		#ffffff;
}


.button-success:hover {
	background:
		#117f48;
}


.button-secondary {
	background:
		#eef1f5;

	color:
		var(--text);
}


.button-small {
	height: 31px;

	padding:
		0 10px;

	font-size: 10px;
}


/* =========================================================
   SEARCH RESULTS
========================================================= */

.category-results {
	margin-top: 10px;

	display: flex;

	flex-direction: column;

	gap: 5px;

	max-height: 280px;

	overflow-y: auto;
}


.category-item {
	padding:
		9px 10px;

	border:
		1px solid
		var(--border);

	border-radius: 8px;

	background:
		#ffffff;

	cursor: pointer;
}


.category-item:hover {
	background:
		#f8f9fd;

	border-color:
		#c7d0fb;
}


.category-item.selected {
	background:
		var(--primary-soft);

	border-color:
		#9eadf5;
}


.category-name {
	font-size: 11px;

	font-weight: 700;

	line-height: 1.35;
}


.category-id {
	margin-top: 3px;

	font-size: 9px;

	color:
		var(--muted);
}


/* =========================================================
   PERIOD
========================================================= */

.selected-category {
	min-height: 36px;

	display: flex;

	align-items: center;

	padding:
		8px 10px;

	margin-bottom: 14px;

	border-radius: 8px;

	border:
		1px solid
		#cfd7fa;

	background:
		var(--primary-soft);

	font-size: 10px;

	font-weight: 700;

	line-height: 1.35;
}


.selected-category.empty {
	color:
		var(--muted);

	background:
		#f8f9fb;

	border-color:
		var(--border);

	font-weight: 500;
}


.period-row {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		16px
		minmax(0, 1fr);

	align-items:
		end;

	gap: 8px;
}


.period-selects {
	display: grid;

	grid-template-columns:
		minmax(80px, 1fr)
		78px;

	gap: 6px;
}


.year-select {
	min-width: 78px;
}


.period-divider {
	text-align: center;

	padding-bottom: 10px;

	color:
		var(--muted);
}


.import-button {
	width: 100%;

	margin-top: 14px;
}


/* =========================================================
   CURRENT UPLOAD
========================================================= */

.current-upload-panel {
	padding:
		14px 16px;
}


.current-upload-header {
	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap: 18px;
}


.current-upload-title {
	font-size: 12px;

	font-weight: 750;
}


.current-upload-meta {
	margin-top: 3px;

	font-size: 9px;

	color:
		var(--muted);
}


/* =========================================================
   MESSAGES
========================================================= */

.message {
	margin-top: 9px;

	padding:
		8px 10px;

	border-radius: 7px;

	font-size: 10px;

	line-height: 1.4;
}


.message.info {
	background:
		#eef4ff;

	color:
		#3150af;
}


.message.success {
	background:
		var(--success-soft);

	color:
		#147542;
}


.message.error {
	background:
		var(--danger-soft);

	color:
		var(--danger);
}


.hidden {
	display: none !important;
}


/* =========================================================
   JOB / PROGRESS
========================================================= */

.job-status {
	display: inline-flex;

	align-items: center;

	height: 22px;

	padding:
		0 8px;

	border-radius: 999px;

	font-size: 9px;

	font-weight: 800;
}


.job-status.running,
.job-status.pending {
	background:
		var(--warning-soft);

	color:
		var(--warning);
}


.job-status.completed {
	background:
		var(--success-soft);

	color:
		var(--success);
}


.job-status.completed_with_errors {
	background:
		var(--danger-soft);

	color:
		var(--danger);
}


.progress {
	margin-top: 10px;
}


.progress-info {
	display: flex;

	justify-content:
		space-between;

	margin-bottom: 5px;

	font-size: 9px;

	color:
		var(--muted);
}


.progress-track {
	height: 5px;

	border-radius: 999px;

	background:
		#e8ebf3;

	overflow: hidden;
}


.progress-bar {
	height: 100%;

	background:
		var(--primary);

	border-radius: 999px;
}


/* =========================================================
   EMPTY
========================================================= */

.empty-state {
	padding: 18px;

	border:
		1px dashed
		var(--border);

	border-radius: 8px;

	text-align: center;

	font-size: 10px;

	color:
		var(--muted);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
	max-width: 1050px
) {

	.content {
		width: auto;

		margin-right: 20px;
	}


	.categories-head,
	.category-row {
		grid-template-columns:
			minmax(220px, 2fr)
			115px
			60px
			115px
			80px;
	}
}


@media (
	max-width: 820px
) {

	.sidebar {
		position: static;

		width: 100%;

		height: auto;

		padding:
			14px 16px;

		border-right: 0;

		border-bottom:
			1px solid
			var(--border);
	}


	.nav {
		display: none;
	}


	.content {
		width: auto;

		max-width:
			calc(100% - 24px);

		margin:
			18px auto 50px;

		padding: 0;
	}


	.import-grid {
		grid-template-columns:
			1fr;
	}


	.period-column {
		border-left: 0;

		border-top:
			1px solid
			var(--border-soft);

		padding-left: 0;

		padding-top: 18px;
	}


	.categories-head {
		display: none;
	}


	.category-row {
		grid-template-columns:
			1fr auto;

		row-gap: 6px;
	}


	.category-cell,
	.category-latest {
		display: none;
	}
}