:root {
	--sidebar-bg: #12172b;
	--sidebar-bg-active: #2740a8;
	--sidebar-text: #b7bdd6;
}

body {
	background: #f4f5f7;
}

/* ---------- Sidebar ---------- */

.sidebar {
	width: 240px;
	background: var(--sidebar-bg);
}

.sidebar__brand {
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar__logo {
	max-height: 48px;
	max-width: 100%;
	object-fit: contain;
}

.sidebar__link {
	color: var(--sidebar-text) !important;
	border-radius: 8px;
}

.sidebar__link:hover {
	background: rgba(255, 255, 255, .08);
	color: #fff !important;
}

.sidebar__link.active {
	background: var(--sidebar-bg-active);
	color: #fff !important;
}

/* ---------- Mobile: off-canvas sidebar ---------- */

.sidebar-backdrop {
	display: none;
}

@media (max-width: 767.98px) {
	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 260px;
		z-index: 1045;
		transform: translateX(-100%);
		transition: transform .25s ease;
	}

	.sidebar.sidebar--open {
		transform: translateX(0);
	}

	.sidebar-backdrop.sidebar-backdrop--open {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .4);
		z-index: 1040;
	}

	/* Wide tables (firmy, tikety, ...) scroll inside their own card instead of
	   breaking the page layout on narrow screens. */
	.table-responsive {
		-webkit-overflow-scrolling: touch;
	}
}

/* ---------- Login page ---------- */

.auth-wrapper {
	min-height: 100vh;
	background: linear-gradient(160deg, #12172b, #2740a8);
}

.auth-card {
	width: 100%;
	max-width: 380px;
}

/* ---------- Clickable summary cards (e.g. Account page) that open a modal ---------- */

.card[role="button"] {
	cursor: pointer;
	transition: box-shadow .15s ease, transform .15s ease;
}

.card[role="button"]:hover {
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
	transform: translateY(-1px);
}

/* ---------- Contacts repeater (company detail) ---------- */

.contact-row {
	position: relative;
}

.contact-row__remove {
	position: absolute;
	top: -8px;
	right: -8px;
}