/* 01. Typography
------------------------------------------ */

@font-face {
	font-family: 'IRANSansX';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src:
		url('/assets/fonts/woff2/IRANSansX-Regular.woff2') format('woff2'),
		url('/assets/fonts/woff/IRANSansX-Regular.woff') format('woff');
}

@font-face {
	font-family: 'IRANSansX';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src:
		url('/assets/fonts/woff2/IRANSansX-Bold.woff2') format('woff2'),
		url('/assets/fonts/woff/IRANSansX-Bold.woff') format('woff');
}



/* 02. Global Variables
------------------------------------------ */

:root {
	--color-bg: #FAFAFA;
	--color-surface: #FFFFFF;

	--color-text: #18181B;
	--color-muted: #71717A;

	--color-border: #EAEAEA;

	--color-primary: #F3C74F;
	--color-primary-hover: #EABC3C;

	--color-success: #15803D;
	--color-danger: #DC2626;

	--radius: 10px;
}


.d-ltr {
	direction: ltr;
}

/* 03. Base
------------------------------------------ */

html {
	direction: rtl;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	direction: rtl;
	margin: 0;
	min-height: 100vh;

	font-family: 'IRANSansX', Tahoma, sans-serif !important;
	font-size: 13px;
	line-height: 1.8;

	color: var(--color-text);
	background-color: var(--color-bg);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea,
option {
	font-family: 'IRANSansX', Tahoma, sans-serif !important;
}

button {
	cursor: pointer;
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

a {
	transition:
		color 0.15s ease,
		background-color 0.15s ease,
		border-color 0.15s ease;
}

[x-cloak] {
	display: none !important;
}


/* 04. Numbers & Direction
------------------------------------------ */

.direction-ltr,
[dir="ltr"] {
	direction: ltr !important;
	unicode-bidi: plaintext;
}

.direction-rtl,
[dir="rtl"] {
	direction: rtl;
}

input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
	font-variant-numeric: tabular-nums;
}


/* 05. Forms
------------------------------------------ */

input,
select,
textarea {
	max-width: 100%;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder {
	color: #A1A1AA;
	opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
	outline-color: var(--color-primary);
}

input[type="search"] {
	appearance: none;
	-webkit-appearance: none;
}

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


/* 06. Tables
------------------------------------------ */

table {
	width: 100%;
	border-collapse: collapse;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

table th,
table td {
	vertical-align: middle;
}

/* Preserve horizontal scrolling on mobile */

.overflow-x-auto {
	-webkit-overflow-scrolling: touch;
}


/* 07. DataTables Integration
------------------------------------------ */

.dataTables_wrapper {
	width: 100%;
	font-family: 'IRANSansX', Tahoma, sans-serif;
	color: var(--color-text);
}

.dataTables_wrapper input,
.dataTables_wrapper select {
	font-family: inherit;
	font-size: 12px;
	border-radius: 8px;
	border: 1px solid #E4E4E7;
	background: #FFFFFF;
	padding: 7px 10px;
}

.dataTables_wrapper .dataTables_filter input {
	margin-right: 8px;
	margin-left: 0;
}

.dataTables_wrapper .dataTables_info {
	font-size: 12px;
	color: var(--color-muted);
	padding-top: 15px;
}

.dataTables_wrapper .dataTables_paginate {
	padding-top: 15px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	border-radius: 7px !important;
	font-family: inherit;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--color-primary) !important;
	border: 1px solid var(--color-primary) !important;
	color: #18181B !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: #F4F4F5 !important;
	border-color: #E4E4E7 !important;
	color: #18181B !important;
}


/* 08. Scrollbar
------------------------------------------ */

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #D4D4D8;
	border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
	background: #A1A1AA;
}


/* 09. Selection
------------------------------------------ */

::selection {
	background: #FDE68A;
	color: #18181B;
}


/* 10. Accessibility
------------------------------------------ */

:focus-visible {
	outline: 2px solid #E8BB3E;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* 11. Mobile
------------------------------------------ */

@media (max-width: 640px) {

	body {
		font-size: 12px;
	}

	.dataTables_wrapper .dataTables_filter {
		float: none;
		text-align: right;
		margin-bottom: 15px;
	}

	.dataTables_wrapper .dataTables_length {
		float: none;
		text-align: right;
		margin-bottom: 12px;
	}

}