:root {
	--slack-color: #241f69;
	--slack-dark: #1d1951;
	--body-bg: #f8f9fa;
	--card-bg: white;
	--text-color: #212529;
	--text-muted: #6c757d;
	--border-color: #e9ecef;
	--tab-text-color: #000;
	--tab-border-color: #dee2e6;
	--tbl-bg: #ffffff;
	--tbl-color: #000000;
	--tbl-border: #dee2e6;
	--tbl-striped-bg: #f8f9fa;
	--tbl-hover-bg: #e9ecef;
	--tbl-header-bg: #f1f1f1;
}

[data-theme="dark"] {
	--body-bg: #121212;
	--card-bg: #1e1e1e;
	--text-color: #e9ecef;
	--text-muted: #adb5bd;
	--border-color: #343a40;
	--tab-text-color: #fff;
	--tab-border-color: #444;
	--tbl-bg: #1e1e1e;
	--tbl-color: #ffffff;
	--tbl-border: #444;
	--tbl-striped-bg: #2a2a2a;
	--tbl-hover-bg: #333;
	--tbl-header-bg: #252525;
}

body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	background-color: var(--body-bg);
	color: var(--text-color);
	transition: background-color 0.3s, color 0.3s;
}

#orders_list th,
#more_7_list th {
	text-align: right !important;
}

#orders_list td,
#more_7_list td {
	text-align: right !important;
}

.links {
	text-decoration: none;
}

/* Header Styles */
.navbar {
	background-color: var(--slack-color);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	min-height: 60px;
}

.navbar-brand {
	font-weight: 700;
	font-size: 1.5rem;
	color: white !important;
}

.nav-link {
	color: rgba(255, 255, 255, 0.85) !important;
	font-weight: 500;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	transition: all 0.2s;
}

.nav-link:hover,
.nav-link.active {
	color: white !important;
	background-color: rgba(255, 255, 255, 0.15);
}

/* User dropdown */
.user-dropdown .dropdown-toggle {
	background-color: transparent;
	/* border-radius: 20px; */
	padding: 0.3rem 0.8rem;
	color: white !important;
	display: flex;
	align-items: center;
	transition: all 0.2s;
}

.user-dropdown .dropdown-toggle:hover {
	background-color: rgba(255, 255, 255, 0.25);
}

.user-dropdown .dropdown-menu {
	background-color: var(--card-bg);
	min-width: 200px;
	margin-top: 8px;
	color: var(--text-color);
}

.user-dropdown .dropdown-item {
	padding: 0.6rem 1rem;
	color: var(--text-color);
	font-weight: 500;
	transition: all 0.2s;
}

.user-dropdown .dropdown-item:hover {
	background-color: rgba(97, 31, 105, 0.1);
	color: var(--slack-color);
}

[data-theme="dark"] .user-dropdown .dropdown-item:hover {
	color: white;
}

.user-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: white;
	color: var(--slack-color);
	font-weight: bold;
	margin-left: 8px;
}

[data-theme="dark"] .user-avatar {
	background-color: #4d1954;
	color: white;
}

/* Theme switcher */
.theme-switcher {
	background-color: transparent;
	padding: 0.3rem 0.8rem;
	color: white !important;
	display: flex;
	align-items: center;
	transition: all 0.2s;
	margin-left: 0.5rem;
}

.theme-switcher:hover {
	background-color: rgba(255, 255, 255, 0.25);
}

/* Main Content */
.main-container {
	margin-top: 80px;
	min-height: calc(100vh - 80px - 60px);
	padding: 2rem;
}

.dashboard-card {
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s, box-shadow 0.2s;
	border: none;
	background-color: var(--card-bg);
	color: var(--text-color);
}

.dashboard-card:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.card-icon {
	width: 60px;
	height: 60px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
}

.bg-slack {
	background-color: rgba(97, 31, 105, 0.1);
	color: var(--slack-color);
}

[data-theme="dark"] .bg-slack {
	background-color: rgba(97, 31, 105, 0.2);
	color: #d0b3d5;
}

/* Footer */
.footer {
	background-color: var(--card-bg);
	border-top: 1px solid var(--border-color);
	padding: 1rem 0;
	text-align: center;
	color: var(--text-muted);
	font-size: 0.9rem;
}

/* Fix for mobile menu transparency */
.navbar-collapse {
	background-color: var(--slack-color) !important;
	padding: 1rem 0;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

@media (min-width: 992px) {
	.navbar-collapse {
		background-color: transparent !important;
		box-shadow: none;
		padding: 0;
	}
}

/* Ensure toggle button is always visible */
.navbar-toggler {
	border: none;
	padding: 0.25rem 0.5rem;
	margin-right: -0.5rem;
	z-index: 1050;
}

/* Fixed toggle icon - using proper SVG data URL */
.navbar-toggler-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* Responsive adjustments for mobile */
@media (max-width: 991px) {
	.main-container {
		padding: 3.5rem;
	}

	.navbar-brand {
		font-size: 1.3rem;
	}

	/* Adjust dropdown on mobile */
	.user-dropdown .dropdown-menu,
	.theme-dropdown .dropdown-menu {
		position: absolute !important;
		left: auto !important;
		right: 0 !important;
		transform: translateX(0) !important;
	}

	/* Ensure navbar height adjusts when menu is open */
	.navbar {
		min-height: auto;
	}

	.navbar-nav {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	/* Hide username on very small screens */
	.d-xxl-inline {
		display: none !important;
	}
}

@media (min-width: 1200px) {
	.d-xxl-inline {
		display: inline !important;
	}
}

body {
	--nav-link-color: #000;
}

body.dark {
	--nav-link-color: #fff;
}

/* Apply consistent text color to all nav tabs */
#card_title,
#order-tabs .nav-link {
	color: var(--tab-text-color) !important;
	border-color: var(--tab-border-color) !important;
}

/* Ensure active tab also uses the same text color (not Bootstrap's blue) */
#card_title,
#order-tabs .nav-link.active {
	color: var(--tab-text-color) !important;
	background-color: transparent !important;
	border-bottom-color: var(--tab-text-color) !important;
}

/* Optional: hover/focus styles */
#card_title #order-tabs .nav-link:hover,
#order-tabs .nav-link:focus {
	color: var(--tab-text-color) !important;
	opacity: 0.85;
}

.img-fluid {
	width: 100%;
	height: auto;
}

/* Optional: improve PDF embed appearance */
embed[type="application/pdf"] {
	background: #f0f0f0;
}

/* Ensure modal body scrolls if needed */
.c-modal .modal-body {
	max-height: 90vh;
	overflow: auto;
}

.messages {
	list-style: none;
	padding: 0;
}

.messages li {
	padding: 10px;
	margin: 5px 0;
	border-radius: 4px;
}

.success {
	background: #d4edda;
	color: #155724;
}

.error {
	background: #f8d7da;
	color: #721c24;
}

.warning {
	background: #fff3cd;
	color: #856404;
}

.info {
	background: #d1ecf1;
	color: #0c5460;
}

/* For right-aligned column headers */
table.dataTable thead th {
	text-align: right !important;
}

table.dataTable tfoot th {
	text-align: right !important;
	direction: rtl;
}

table.dataTable tbody th {
	text-align: right !important;
	direction: rtl;
}

.text-right {
	text-align: right !important;
}

.dataTables_wrapper {
	direction: rtl;
	text-align: right;
}

/* === Dark mode: All DataTables === */
/* === Dark mode for ALL DataTables when data-theme='dark' === */
[data-theme="dark"] table.dataTable,
[data-theme="dark"] .dataTables_wrapper {
	color: #fff !important;
}

/* Table cells, header, footer */
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable tfoot th,
[data-theme="dark"] table.dataTable tbody td {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #333 !important;
}

/* Right-align headers (for Arabic RTL) */
[data-theme="dark"] table.dataTable thead th {
	text-align: right !important;
}

/* Hover rows */
[data-theme="dark"] table.dataTable tbody tr:hover {
	background-color: #111 !important;
}

/* Form controls: search input, length selector */
[data-theme="dark"] .dataTables_wrapper .form-control,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
	background-color: #111 !important;
	color: #fff !important;
	border-color: #333 !important;
}

/* Pagination buttons */
[data-theme="dark"] .dataTables_wrapper .paginate_button {
	color: #fff !important;
}

[data-theme="dark"] .dataTables_wrapper .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .paginate_button:hover {
	background-color: #333 !important;
	color: #fff !important;
}

/* Info text & filter label */
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_filter label {
	color: #ccc !important;
}

/* === Tabs Styling for Light/Dark Mode === */

/* Tab Navigation */
.nav-tabs {
	border-bottom: 1px solid var(--tab-border-color) !important;
	margin-bottom: 1rem;
}

.nav-tabs .nav-link {
	color: var(--tab-text-color) !important;
	border: 1px solid transparent !important;
	padding: 0.75rem 1.25rem !important;
	margin: 0 0.25rem !important;
	border-radius: 6px 6px 0 0 !important;
	transition: all 0.2s ease;
	background-color: transparent !important;
}

/* Active Tab */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
	color: var(--tab-text-color) !important;
	background-color: var(--card-bg) !important;
	border-color: var(--tab-border-color) var(--tab-border-color) transparent !important;
	font-weight: 600;
}

/* Hover State */
.nav-tabs .nav-link:hover {
	color: var(--tab-text-color) !important;
	background-color: rgba(0, 0, 0, 0.05) !important;
	/* Light mode hover */
}

/* Dark Mode Hover */
[data-theme="dark"] .nav-tabs .nav-link:hover {
	background-color: rgba(255, 255, 255, 0.05) !important;
	/* Dark mode hover */
}

/* Tab Content */
.tab-content {
	padding: 1.5rem;
	background-color: var(--card-bg) !important;
	border: 1px solid var(--tab-border-color) !important;
	border-top: none !important;
	border-radius: 0 0 8px 8px !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Dark Mode Tab Content */
[data-theme="dark"] .tab-content {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.nav-tabs .nav-link {
		padding: 0.6rem 0.8rem !important;
		margin: 0 0.1rem !important;
		font-size: 0.9rem;
	}

	.tab-content {
		padding: 1rem;
	}
}

.error {
	display: none;
}

.file-upload-label {
	font-weight: bold;
	color: #495057;
}

.required::after {
	content: " *";
	color: red;
}

.intl-tel-input {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	gap: 8px !important;
	width: 100% !important;
}

.intl-tel-input .flag-container {
	grid-column: 1;
}

.intl-tel-input input {
	grid-column: 2;
	width: 100% !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* Center phone input in its container */
#phone {
	text-align: center !important;
	direction: ltr !important;
	/* Keep numbers left-to-right */
}

/* Optional: Center the placeholder text too */
#phone::placeholder {
	text-align: center;
	direction: ltr;
}

.phone_grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px;
}

.hide {
	display: none;
}

.inline-display {
	display: inline;
}

[data-theme="dark"] .card-header {
	background-color: #343a40 !important;
	color: #ffffff !important;
}

[data-theme="dark"] .card {
	background-color: #2c3034 !important;
	border-color: #495057 !important;
}

[data-theme="dark"] .form-control {
	background-color: #343a40 !important;
	border-color: #495057 !important;
	color: #ffffff !important;
}

[data-theme="dark"] .form-control:focus {
	background-color: #343a40 !important;
	border-color: #86b7fe !important;
	color: #ffffff !important;
}

[data-theme="dark"] .btn-primary {
	background-color: #0d6efd !important;
	border-color: #0d6efd !important;
}

[data-theme="dark"] .btn-warning {
	background-color: #ffc107 !important;
	border-color: #ffc107 !important;
	color: #000 !important;
}

[data-theme="dark"] .btn-danger {
	background-color: #dc3545 !important;
	border-color: #dc3545 !important;
}

[data-theme="dark"] .table {
	color: #ffffff !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dark mode form label styling */
[data-theme="dark"] .form-label,
[data-theme="dark"] label {
	color: #ffffff !important;
}

/* Also fix other text elements */
[data-theme="dark"] .text-muted {
	color: #adb5bd !important;
}

[data-theme="dark"] .card-text {
	color: #ffffff !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
	color: #ffffff !important;
}

/* Fix select dropdown text in dark mode */
[data-theme="dark"] .form-select {
	background-color: #343a40 !important;
	border-color: #495057 !important;
	color: #ffffff !important;
}

[data-theme="dark"] .form-select option {
	background-color: #343a40 !important;
	color: #ffffff !important;
}

.theme-switcher,
.theme-option {
	text-decoration: none !important;
}

/* === intl-tel-input Dark Mode Fix === */
[data-theme="dark"] .iti__flag-container,
[data-theme="dark"] .iti__selected-flag {
	background-color: #343a40 !important;
	border-color: #495057 !important;
}

[data-theme="dark"] .iti__selected-flag .iti__selected-dial-code {
	color: #ffffff !important;
	/* Country code text */
}

[data-theme="dark"] .iti__country-list {
	background-color: #343a40 !important;
	border-color: #495057 !important;
}

[data-theme="dark"] .iti__country-list .iti__country {
	color: #ffffff !important;
}

[data-theme="dark"] .iti__country-list .iti__country:hover,
[data-theme="dark"] .iti__country-list .iti__country.iti__highlight {
	background-color: #495057 !important;
	color: #ffffff !important;
}

[data-theme="dark"] .iti__tel-input {
	background-color: #343a40 !important;
	border-color: #495057 !important;
	color: #ffffff !important;
}

/* Remove extra spacing from form inputs */
.form-control {
	padding: 0.375rem 0.75rem;
	/* Standard Bootstrap padding */
	border-radius: 0.25rem;
}

/* For numeric inputs, ensure no extra spacing */
input[type="number"],
input[type="text"] {
	padding: 0.375rem 0.75rem;
	text-align: right;
	/* For Arabic numbers */
}

.form-control:invalid {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* === Universal Tab Navigation Fix === */
.nav-tabs .nav-link {
	color: var(--tab-text-color) !important;
	border-color: var(--tab-border-color) !important;
}

.nav-tabs .nav-link.active {
	color: var(--tab-text-color) !important;
	background-color: transparent !important;
	border-bottom-color: var(--tab-text-color) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
	color: var(--tab-text-color) !important;
	opacity: 0.85;
}