@import url('./base.css');
@import url('./design-system.css');
@import url('./customers.css');
@import url('./cars.css');
@import url('./invoices.css');
@import url('./expenses.css');

:root {
	--cm-font-family: 'Tajawal', sans-serif;
	--cm-primary: #680326;
	--cm-primary-700: #981608;
	--cm-accent: #7c0c0c;
	--cm-secondary: var(--cm-accent);
	--cm-danger: #dc3545;
	--cm-bg: #f4f7fb;
	--cm-text: #010710;
	--cm-muted: #6b7280;
	--cm-border: #dee2e6;
	--cm-radius-md: 0.42rem;
	--cm-sidebar-width: 248px;
	--cm-control-height: 32px;
	--cm-font-size-sm: 0.79rem;
	--cm-font-size-md: 0.85rem;
	--cm-font-size-lg: 0.92rem;
}

* {
	font-family: var(--cm-font-family);
}

/* Compact and scrollable sidebar navigation across screen sizes */
.app-sidebar .sidebar-body {
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding-block: 0.6rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.app-sidebar .nav {
	gap: 0.2rem !important;
}

.app-sidebar .nav-link {
	font-size: 0.82rem;
	line-height: 1.2;
	padding: 0.35rem 0.54rem;
}

.app-sidebar .nav-link i {
	font-size: 0.82rem;
	width: 1.1rem;
	text-align: center;
	vertical-align: middle;
}

.app-sidebar .sidebar-body::-webkit-scrollbar,
.app-sidebar-mobile .offcanvas-body::-webkit-scrollbar {
	width: 8px;
}

.app-sidebar .sidebar-body::-webkit-scrollbar-thumb,
.app-sidebar-mobile .offcanvas-body::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.24);
	border-radius: 10px;
}

.app-sidebar-mobile .offcanvas-body {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc(100dvh - 72px);
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.app-sidebar-mobile .nav {
	gap: 0.2rem !important;
}

.app-sidebar-mobile .nav-link {
	font-size: 0.81rem;
	line-height: 1.2;
	padding: 0.34rem 0.5rem;
	border-radius: 0.42rem;
}

.app-sidebar-mobile .nav-link i {
	font-size: 0.82rem;
	width: 1.05rem;
	text-align: center;
}

@media (max-width: 1199.98px) {
	.app-sidebar .nav-link {
		font-size: 0.89rem;
		padding: 0.46rem 0.66rem;
	}

	.app-sidebar .nav-link i {
		font-size: 0.9rem;
	}
}

@media (max-width: 575.98px) {
	.app-sidebar-mobile .nav-link {
		font-size: 0.88rem;
		padding: 0.45rem 0.62rem;
	}
}

/* Density switcher and precise compact/comfort ratios */
.density-switch {
	display: grid;
	gap: 0.2rem;
}

.density-option {
	border-radius: 0.6rem;
	font-size: 0.86rem;
	font-weight: 600;
	padding-block: 0.36rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.density-option.active {
	color: #fff;
	background-color: rgba(11, 94, 215, 0.92);
}

body[data-density='comfort'] .app-sidebar .nav {
	gap: 0.28rem !important;
}

body[data-density='comfort'] .app-sidebar .nav-link {
	font-size: 0.85rem;
	line-height: 1;
	padding: 0.56rem 0.78rem;
	border-radius: 0.50rem;
}

body[data-density='comfort'] .app-sidebar .nav-link i {
	font-size: 0.98rem;
	width: 1.14rem;
}

body[data-density='comfort'] .app-sidebar-mobile .nav {
	gap: 0.28rem !important;
}

body[data-density='comfort'] .app-sidebar-mobile .nav-link {
	font-size: 0.93rem;
	line-height: 1;
	padding: 0.54rem 0.76rem;
	border-radius: 0.7rem;
}

body[data-density='comfort'] .app-sidebar-mobile .nav-link i {
	font-size: 0.95rem;
	width: 1.1rem;
}

body[data-density='compact'] .app-sidebar .nav {
	gap: 0.14rem !important;
}

body[data-density='compact'] .app-sidebar .nav-link {
	font-size: 0.82rem;
	line-height: 1.15;
	padding: 0.4rem 0.58rem;
	border-radius: 0.6rem;
}

body[data-density='compact'] .app-sidebar .nav-link i {
	font-size: 0.86rem;
	width: 1rem;
}

body[data-density='compact'] .app-sidebar .sidebar-body {
	padding-block: 0.4rem;
}

body[data-density='compact'] .app-sidebar-mobile .nav {
	gap: 0.14rem !important;
}

body[data-density='compact'] .app-sidebar-mobile .nav-link {
	font-size: 0.81rem;
	line-height: 1.15;
	padding: 0.39rem 0.56rem;
	border-radius: 0.58rem;
}

body[data-density='compact'] .app-sidebar-mobile .nav-link i {
	font-size: 0.85rem;
	width: 0.98rem;
}

@media (max-width: 1199.98px) {
	body[data-density='comfort'] .app-sidebar .nav-link {
		font-size: 0.9rem;
		padding: 0.5rem 0.7rem;
	}

	body[data-density='compact'] .app-sidebar .nav-link {
		font-size: 0.79rem;
		padding: 0.36rem 0.5rem;
	}
}

@media (max-width: 575.98px) {
	body[data-density='comfort'] .app-sidebar-mobile .nav-link {
		font-size: 0.9rem;
		padding: 0.5rem 0.68rem;
	}

	body[data-density='compact'] .app-sidebar-mobile .nav-link {
		font-size: 0.78rem;
		padding: 0.35rem 0.48rem;
	}
}

.form-control {
	min-height: var(--cm-control-height);
	padding: 0.14rem 0.52rem !important;
	border-radius: var(--cm-radius-md) !important;
	font-size: var(--cm-font-size-sm);
}

.form-select {
	min-height: var(--cm-control-height);
	padding: 0.08rem 2rem 0.12rem 0.52rem !important;
	border-radius: var(--cm-radius-md) !important;
	font-size: var(--cm-font-size-sm);
}

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

.btn {
	--bs-btn-padding-y: 0.24rem;
	--bs-btn-padding-x: 0.58rem;
	--bs-btn-font-size: var(--cm-font-size-sm);
	--bs-btn-border-radius: var(--cm-radius-md);
}

.btn-lg {
	--bs-btn-padding-y: 0.3rem;
	--bs-btn-padding-x: 0.72rem;
	--bs-btn-font-size: var(--cm-font-size-md);
}

.btn-sm {
	--bs-btn-padding-y: 0.16rem;
	--bs-btn-padding-x: 0.42rem;
	--bs-btn-font-size: 0.74rem;
}

.card {
	border-radius: var(--cm-radius-md) !important;
}

.card-header,
.card-body,
.modal-header,
.modal-body,
.modal-footer {
	padding: 0.58rem 0.72rem;
}

.modal-content {
	border-radius: var(--cm-radius-md);
}

.table {
	--bs-table-cell-padding-y: 0.34rem;
	--bs-table-cell-padding-x: 0.42rem;
	font-size: 0.78rem;
}

.table thead th {
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.table td,
.table th {
	vertical-align: middle;
	line-height: 1.2;
}

.table .btn {
	--bs-btn-padding-y: 0.12rem;
	--bs-btn-padding-x: 0.32rem;
	--bs-btn-font-size: 0.72rem;
}

.table .btn:has(i) {
	min-width: 1.7rem;
	padding-inline: 0.22rem;
	font-size: 0;
	line-height: 1;
}

.table .btn:has(i) i {
	font-size: 0.78rem;
	margin: 0 !important;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
	line-height: 1.25;
}

.h4, h4 {
	font-size: 1rem;
}

.h5, h5 {
	font-size: 0.92rem;
}

.h6, h6 {
	font-size: 0.84rem;
}

.badge {
	border-radius: 0.28rem;
	font-size: 0.7rem;
	padding: 0.2em 0.44em;
}

.pagination {
	--bs-pagination-border-radius: var(--cm-radius-md);
	--bs-pagination-padding-x: 0.5rem;
	--bs-pagination-padding-y: 0.24rem;
	--bs-pagination-font-size: 0.78rem;
}

.alert {
	border-radius: var(--cm-radius-md);
	padding: 0.44rem 0.62rem;
	font-size: 0.8rem;
}