/* Authentication Styling */
.auth-user, .auth-guest {
	transition: all 0.3s ease;
}

.user-dropdown {
	min-width: 200px;
}

/* Theme Styling */
/* Light Theme (default) */
body.light-theme {
	--bg-color: #ffffff;
	--text-color: #212529;
	--card-bg: #ffffff;
	--card-border: #dee2e6;
	--card-header-bg: #f8f9fa;
	--navbar-bg: #f8f9fa;
	--navbar-text: #212529;
	--input-bg: #ffffff;
	--input-border: #ced4da;
	--input-text: #495057;
	--table-border: #dee2e6;
	--table-hover-bg: rgba(0, 0, 0, 0.075);
	--modal-bg: #ffffff;
	--modal-text: #212529;
	--btn-default-bg: #f8f9fa;
	--btn-default-text: #212529;
	--link-color: #007bff;
	--link-hover-color: #0056b3;
	--table-header-bg: #f8f9fa;
	--table-header-text: #212529;
	--dt-button-bg: #f8f9fa;
	--dt-button-text: #212529;
	--dt-button-border: #dee2e6;
	--dt-button-hover-bg: #e9ecef;
	--dt-button-hover-text: #212529;
	--pagination-bg: #ffffff;
	--toast-bg: #ffffff;
	--toast-header-bg: #f8f9fa;
	--toast-text: #212529;
	--toast-border: #dee2e6;
	--pagination-text: #212529;
	--pagination-hover-bg: #e9ecef;
	--pagination-hover-text: #212529;
	--pagination-active-bg: #007bff;
	--pagination-active-text: #ffffff;
}

/* Dark Theme */
body.dark-theme {
	--bg-color: #343a40;
	--text-color: #f8f9fa;
	--card-bg: #454d55;
	--card-border: #6c757d;
	--card-header-bg: #3a4047;
	--navbar-bg: #343a40;
	--navbar-text: #f8f9fa;
	--input-bg: #545b62;
	--input-border: #6c757d;
	--input-text: #f8f9fa;
	--table-border: #6c757d;
	--table-hover-bg: rgba(255, 255, 255, 0.075);
	--modal-bg: #454d55;
	--modal-text: #f8f9fa;
	--btn-default-bg: #6c757d;
	--btn-default-text: #f8f9fa;
	--link-color: #8bb9fe;
	--link-hover-color: #a8ccff;
	--table-header-bg: #3a4047;
	--table-header-text: #f8f9fa;
	--dt-button-bg: #454d55;
	--dt-button-text: #f8f9fa;
	--dt-button-border: #6c757d;
	--dt-button-hover-bg: #5a6268;
	--dt-button-hover-text: #ffffff;
	--pagination-bg: #454d55;
	--toast-bg: #454d55;
	--toast-header-bg: #3a4047;
	--toast-text: #f8f9fa;
	--toast-border: #6c757d;
	--pagination-text: #f8f9fa;
	--pagination-hover-bg: #5a6268;
	--pagination-hover-text: #ffffff;
	--pagination-active-bg: #007bff;
	--pagination-active-text: #ffffff;

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

/* Apply theme variables */
body {
	background-color: var(--bg-color, #ffffff);
	color: var(--text-color, #212529);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
	background-color: var(--card-bg, #ffffff);
	border-color: var(--card-border, #dee2e6);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card-header {
	background-color: var(--card-header-bg, #f8f9fa);
	border-color: var(--card-border, #dee2e6);
}

.navbar-light {
	background-color: var(--navbar-bg, #f8f9fa) !important;
}

.navbar-light .navbar-brand,
.navbar-light .nav-link {
	color: var(--navbar-text, #212529);
}

/* Navbar styling for dark theme */
body.dark-theme .navbar-light {
	background-color: var(--navbar-bg) !important;
	border-bottom: 1px solid var(--card-border);
}

body.dark-theme .navbar-light .navbar-brand,
body.dark-theme .navbar-light .nav-link {
	color: var(--navbar-text);
}

body.dark-theme .navbar-light .navbar-toggler {
	border-color: var(--card-border);
	background-color: var(--dt-button-bg);
}

body.dark-theme .navbar-light .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown menu styling for dark theme */
body.dark-theme .dropdown-menu {
	background-color: var(--card-bg);
	border-color: var(--card-border);
}

body.dark-theme .dropdown-item {
	color: var(--text-color);
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .dropdown-item:focus {
	background-color: var(--dt-button-hover-bg);
	color: var(--dt-button-hover-text);
}

body.dark-theme .dropdown-divider {
	border-top-color: var(--card-border);
}

.table {
	color: var(--text-color, #212529);
	border-color: var(--table-border, #dee2e6);
}

.table-hover tbody tr:hover {
	background-color: var(--table-hover-bg, rgba(0, 0, 0, 0.075));
}

.modal-content {
	background-color: var(--modal-bg, #ffffff);
	color: var(--modal-text, #212529);
}

.close {
	color: var(--modal-text, #212529);
}

.form-control {
	background-color: var(--input-bg, #ffffff);
	border-color: var(--input-border, #ced4da);
	color: var(--input-text, #495057);
}

.form-control:focus {
	background-color: var(--input-bg, #ffffff);
	border-color: var(--input-border, #ced4da);
	color: var(--input-text, #495057);
}

/* Select styling */
select.form-control {
	background-color: var(--input-bg);
	color: var(--input-text);
	border-color: var(--input-border);
}

select.form-control option {
	background-color: var(--input-bg);
	color: var(--input-text);
}

a {
	color: var(--link-color, #007bff);
}

a:hover {
	color: var(--link-hover-color, #0056b3);
}

/* Button styling for dark theme */
/* Improved button styling for dark theme */
body.dark-theme .btn-outline-primary {
	color: #8bb9fe;
	border-color: #8bb9fe;
}

body.dark-theme .btn-outline-primary:hover {
	background-color: #8bb9fe;
	color: #343a40;
}

body.dark-theme .btn-outline-secondary {
	color: #adb5bd;
	border-color: #adb5bd;
}

body.dark-theme .btn-outline-secondary:hover {
	background-color: #adb5bd;
	color: #343a40;
}

/* Top menu bar button styling */
.navbar .btn-outline-primary {
	padding: 4px 10px;
	margin-left: 8px;
	font-weight: 500;
}

body.dark-theme .navbar .btn-outline-primary {
	color: #8bb9fe;
	border-color: #8bb9fe;
	background-color: transparent;
}

body.dark-theme .navbar .btn-outline-primary:hover {
	background-color: #8bb9fe;
	color: #343a40;
	border-color: #8bb9fe;
}

/* Navbar link hover effects */
.navbar-light .navbar-nav .nav-link:hover {
	color: var(--link-hover-color);
}

body.dark-theme .navbar-light .navbar-nav .nav-link:hover {
	color: var(--link-hover-color);
}

body.dark-theme .btn-primary {
	background-color: #007bff;
	border-color: #007bff;
}

body.dark-theme .btn-secondary {
	background-color: #6c757d;
	border-color: #6c757d;
}

body.dark-theme .btn-success {
	background-color: #28a745;
	border-color: #28a745;
}

body.dark-theme .btn-danger {
	background-color: #dc3545;
	border-color: #dc3545;
}

body.dark-theme .btn-warning {
	background-color: #ffc107;
	border-color: #ffc107;
	color: #212529;
}

body.dark-theme .btn-info {
	background-color: #17a2b8;
	border-color: #17a2b8;
}

body.dark-theme .btn-light {
	background-color: #454d55;
	border-color: #6c757d;
	color: #f8f9fa;
}

body.dark-theme .btn-dark {
	background-color: #343a40;
	border-color: #212529;
}

/* Spacing Styling */
:root {
	--base-spacing: 1rem;
	--base-font-size: 1rem;
}

body.spacing-tiny {
	--spacing-factor: 0.7;
}

body.spacing-small {
	--spacing-factor: 0.85;
}

body.spacing-medium {
	--spacing-factor: 1;
}

body.spacing-large {
	--spacing-factor: 1.15;
}

body.spacing-huge {
	--spacing-factor: 1.3;
}

/* Apply spacing to elements */
body[class*="spacing-"] {
	--spacing-unit: calc(var(--base-spacing) * var(--spacing-factor, 1));
}

body[class*="spacing-"] .container,
body[class*="spacing-"] .container-fluid {
	padding: var(--spacing-unit);
}

body[class*="spacing-"] .card {
	margin-bottom: calc(var(--spacing-unit) * 1.5);
}

body[class*="spacing-"] .card-body {
	padding: calc(var(--spacing-unit) * 1.25);
}

body[class*="spacing-"] .form-group {
	margin-bottom: var(--spacing-unit);
}

body[class*="spacing-"] .table td,
body[class*="spacing-"] .table th {
	padding: calc(var(--spacing-unit) * 0.75);
}

body[class*="spacing-"] .modal-body {
	padding: calc(var(--spacing-unit) * 1.25);
}

body[class*="spacing-"] .modal-header,
body[class*="spacing-"] .modal-footer {
	padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.25);
}

body[class*="spacing-"] .btn {
	padding: calc(var(--spacing-unit) * 0.375) calc(var(--spacing-unit) * 0.75);
}

/* Font Size Styling */
body.font-tiny {
	--font-size-factor: 0.8;
}

body.font-small {
	--font-size-factor: 0.9;
}

body.font-medium {
	--font-size-factor: 1;
}

body.font-large {
	--font-size-factor: 1.1;
}

body.font-huge {
	--font-size-factor: 1.2;
}

/* Apply font size to elements */
body[class*="font-"] {
	--font-size-unit: calc(var(--base-font-size) * var(--font-size-factor, 1));
	font-size: var(--font-size-unit);
}

body[class*="font-"] h1 {
	font-size: calc(var(--font-size-unit) * 2.5);
}

body[class*="font-"] h2 {
	font-size: calc(var(--font-size-unit) * 2);
}

body[class*="font-"] h3 {
	font-size: calc(var(--font-size-unit) * 1.75);
}

body[class*="font-"] h4 {
	font-size: calc(var(--font-size-unit) * 1.5);
}

body[class*="font-"] h5 {
	font-size: calc(var(--font-size-unit) * 1.25);
}

body[class*="font-"] h6 {
	font-size: calc(var(--font-size-unit) * 1);
}

body[class*="font-"] .navbar-brand {
	font-size: calc(var(--font-size-unit) * 1.25);
}

body[class*="font-"] .nav-link {
	font-size: var(--font-size-unit);
}

body[class*="font-"] .btn {
	font-size: var(--font-size-unit);
}

body[class*="font-"] .form-control {
	font-size: var(--font-size-unit);
}

/* Toast Styling */
.toast {
	min-width: 250px;
	background-color: var(--toast-bg);
	color: var(--toast-text);
	border: 1px solid var(--toast-border);
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

.toast-header {
	background-color: var(--toast-header-bg);
	color: var(--toast-text);
	border-bottom: 1px solid var(--toast-border);
}

.toast-body {
	color: var(--toast-text);
}

.toast .close {
	color: var(--toast-text);
	opacity: 0.8;
	text-shadow: none;
}

.toast .close:hover {
	opacity: 1;
}

/* Dark mode specific toast styling */
body.dark-theme .toast {
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
}

body.dark-theme #toast-container {
	z-index: 1050;
}

/* DataTables Custom Styling */

.dataTables_wrapper {
	padding: 20px 0;
}

.dataTables_filter {
	margin-bottom: 15px;
}

.dataTables_length {
	margin-bottom: 15px;
	color: var(--text-color);
}

.dataTables_length select {
	background-color: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: 4px;
	padding: 5px 10px;
	margin: 0 5px;
}

body.light-theme .dataTables_length {
	color: #495057;
}

body.light-theme .dataTables_length select {
	background-color: #ffffff;
	color: #495057;
	border: 1px solid #ced4da;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dataTables_info {
	padding-top: 10px;
	color: var(--text-color);
	font-size: 0.9rem;
}

body.light-theme .dataTables_info {
	color: #6c757d;
}

.dataTables_paginate {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Styling for top and bottom controls */
.dataTables_wrapper .top,
.dataTables_wrapper .bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 15px;
	margin-top: 15px;
	width: 100%;
}

/* Arrange top controls in a more organized way */
.dataTables_wrapper .top .dt-buttons,
.dataTables_wrapper .top .dataTables_length {
	margin-right: 20px;
	flex: 0 0 auto;
}

.dataTables_wrapper .top .dataTables_filter {
	margin-left: auto;
	flex: 0 0 auto;
}

/* Info and pagination container */
.dataTables_wrapper .info-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-top: 10px;
}

/* Pagination position settings */
body.pagination-top .dataTables_wrapper .bottom .info-pagination {
	display: none;
}

body.pagination-bottom .dataTables_wrapper .top .info-pagination {
	display: none;
}

/* Both top and bottom is the default, so no need for a specific rule */

.dataTables_wrapper .info-pagination .dataTables_info {
	flex: 1 1 auto;
	text-align: left;
	padding: 8px 0;
	margin: 0;
}

.dataTables_wrapper .info-pagination .dataTables_paginate {
	flex: 0 0 auto;
	text-align: right;
	padding: 0;
	margin: 0;
}



.dataTables_wrapper .top .dt-buttons {
	margin-right: 10px;
}

.dataTables_wrapper .clear {
	clear: both;
}

/* Table styling */
table.dataTable {
	width: 100% !important;
	border-collapse: collapse !important;
	color: var(--text-color);
}

table.dataTable thead th {
	background-color: var(--table-header-bg);
	color: var(--table-header-text);
	border-bottom: 2px solid var(--table-border);
	font-weight: 600;
}

table.dataTable tbody tr:hover {
	background-color: var(--table-hover-bg);
}

table.dataTable tbody td {
	vertical-align: middle;
	padding: 10px;
}

/* Responsive table */
@media screen and (max-width: 767px) {
	div.dataTables_wrapper div.dataTables_length,
	div.dataTables_wrapper div.dataTables_filter,
	div.dataTables_wrapper div.dataTables_info,
	div.dataTables_wrapper div.dataTables_paginate {
		text-align: left;
		margin-bottom: 10px;
	}

	table.dataTable tbody td {
		padding: 8px 5px;
	}
}

/* Button styling */
.dt-buttons {
	margin-bottom: 15px;
}

/* Common button styling for both themes */
.dt-button {
	border-radius: 4px;
	padding: 6px 12px;
	margin-right: 5px;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	/* Default styling (when no theme class is applied) */
	background-color: #f8f9fa;
	color: #212529;
	border: 1px solid #dee2e6;
}

/* Light theme button styling */
body.light-theme .dt-button {
	background-color: var(--dt-button-bg);
	color: var(--dt-button-text);
	border: 1px solid var(--dt-button-border);
}

body.light-theme .dt-button:hover {
	background-color: var(--dt-button-hover-bg);
	color: var(--dt-button-hover-text);
	border-color: var(--dt-button-hover-bg);
}

/* Dark theme button styling */
body.dark-theme .dt-button {
	background-color: var(--dt-button-bg);
	color: var(--dt-button-text);
	border: 1px solid var(--dt-button-border);
}

body.dark-theme .dt-button:hover {
	background-color: var(--dt-button-hover-bg);
	color: var(--dt-button-hover-text);
	border-color: var(--dt-button-hover-bg);
}

.dt-button:focus {
	outline: none;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Specific styling for Column visibility and Export buttons */
.dt-button.buttons-collection {
	position: relative;
	padding-right: 24px;
}

.dt-button.buttons-collection:after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -2px;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

body.light-theme .dt-button.buttons-collection:after {
	border-top-color: var(--dt-button-text);
}

body.dark-theme .dt-button.buttons-collection:after {
	border-top-color: var(--dt-button-text);
}

/* Add icons to buttons */
.dt-button.buttons-colvis:before {
	content: '👁️ ';
	margin-right: 4px;
}

.dt-button.buttons-collection.buttons-colvis:before {
	content: '👁️ ';
	margin-right: 4px;
}

.dt-button.buttons-collection:not(.buttons-colvis):before {
	content: '📤 ';
	margin-right: 4px;
}

/* Search box styling */
.dataTables_filter {
	color: var(--text-color);
}

.dataTables_filter input {
	background-color: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: 4px;
	padding: 5px 10px;
	margin-left: 5px;
}

body.light-theme .dataTables_filter {
	color: #495057;
}

body.light-theme .dataTables_filter input {
	background-color: #ffffff;
	color: #495057;
	border: 1px solid #ced4da;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Pagination styling */
.dataTables_paginate {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* Common pagination button styling */
.dataTables_paginate .paginate_button {
	background-color: var(--pagination-bg);
	color: var(--pagination-text) !important;
	border: 1px solid var(--table-border);
	border-radius: 4px;
	padding: 6px 12px;
	margin: 0 2px;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.2s ease;
	display: inline-block;
	text-align: center;
	min-width: 36px;
	text-decoration: none !important;
}

/* Current (active) pagination button */
.dataTables_paginate .paginate_button.current {
	background-color: var(--pagination-active-bg);
	color: var(--pagination-active-text) !important;
	border-color: var(--pagination-active-bg);
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hover state for pagination buttons */
.dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
	background-color: var(--pagination-hover-bg);
	color: var(--pagination-hover-text) !important;
	border-color: var(--pagination-hover-bg);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Focus state for pagination buttons */
.dataTables_paginate .paginate_button:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

body.light-theme .dataTables_paginate .paginate_button:focus:not(.current):not(.disabled) {
	background-color: #f9fbfd;
	color: #007bff !important;
	border-color: #e9ecef;
	box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

/* Disabled pagination buttons */
.dataTables_paginate .paginate_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Previous and Next buttons */
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
	font-weight: bold;
}

/* Light theme specific pagination styling */
body.light-theme .dataTables_paginate .paginate_button {
	background-color: #ffffff;
	background-image: linear-gradient(to bottom, #ffffff, #f8f9fa);
	color: #6c757d !important;
	border: 1px solid #e9ecef;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: all 0.2s ease-in-out;
}

body.light-theme .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
	background-color: #f9fbfd;
	color: #007bff !important;
	border-color: #e9ecef;
	box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

body.light-theme .dataTables_paginate .paginate_button.current {
	background-color: #007bff;
	background-image: linear-gradient(to bottom, #0d6efd, #0a58ca);
	color: #ffffff !important;
	border-color: #0d6efd;
	box-shadow: 0 2px 5px rgba(13, 110, 253, 0.25);
	font-weight: 600;
}

body.light-theme .dataTables_paginate .paginate_button.disabled {
	background-color: #ffffff;
	color: #adb5bd !important;
	border-color: #e9ecef;
	box-shadow: none;
}

/* Fix for ellipsis in pagination */
.dataTables_paginate .ellipsis {
	color: var(--pagination-text) !important;
	padding: 0 5px;
}

body.light-theme .dataTables_paginate .ellipsis {
	color: #6c757d !important;
}

/* Loading indicator */
.dataTables_processing {
	background-color: var(--card-bg);
	color: var(--text-color);
	border: 1px solid var(--card-border);
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Additional DataTables styling for dark mode */
body.dark-theme .dataTables_length,
body.dark-theme .dataTables_filter,
body.dark-theme .dataTables_info,
body.dark-theme .dataTables_paginate {
	color: var(--text-color);
}

body.dark-theme .dataTables_wrapper select {
	background-color: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
}

/* Fix for disabled pagination buttons in dark mode */
body.dark-theme .dataTables_paginate .paginate_button.disabled {
	color: var(--table-border) !important;
	opacity: 0.5;
}

/* Fix for button collections in dark mode */
.dt-button-collection {
	padding: 8px;
	border-radius: 4px;
	min-width: 150px;
}

body.dark-theme .dt-button-collection {
	background-color: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

body.light-theme .dt-button-collection {
	background-color: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Common styling for all buttons in collections */
.dt-button-collection .dt-button {
	display: block;
	width: 100%;
	text-align: left;
	margin-bottom: 4px;
	border-radius: 4px;
	padding: 6px 10px;
	transition: all 0.2s ease;
}

.dt-button-collection .dt-button:last-child {
	margin-bottom: 0;
}

/* Light theme button collection styling */
body.light-theme .dt-button-collection .dt-button {
	background-color: var(--dt-button-bg);
	color: var(--dt-button-text);
	border-color: var(--dt-button-border);
}

body.light-theme .dt-button-collection .dt-button:hover {
	background-color: var(--dt-button-hover-bg);
	color: var(--dt-button-hover-text);
}

body.light-theme .dt-button-collection .dt-button.active {
	background-color: var(--pagination-active-bg);
	color: var(--pagination-active-text);
	border-color: var(--pagination-active-bg);
}

/* Dark theme button collection styling */
body.dark-theme .dt-button-collection .dt-button {
	background-color: var(--dt-button-bg);
	color: var(--dt-button-text);
	border-color: var(--dt-button-border);
}

body.dark-theme .dt-button-collection .dt-button:hover {
	background-color: var(--dt-button-hover-bg);
	color: var(--dt-button-hover-text);
}

body.dark-theme .dt-button-collection .dt-button.active {
	background-color: var(--pagination-active-bg);
	color: var(--pagination-active-text);
	border-color: var(--pagination-active-bg);
}

/* Special styling for Column Visibility buttons */
.dt-button-collection.buttons-columnVisibility {
	overflow-y: auto;
	max-height: 400px;
}

.dt-button-collection .dt-button.buttons-columnVisibility {
	position: relative;
	padding-left: 30px;
}

.dt-button-collection .dt-button.buttons-columnVisibility:before {
	content: '';
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border: 1px solid var(--dt-button-border);
	border-radius: 2px;
	background-color: transparent;
}

/* Active state for column visibility buttons */
body.light-theme .dt-button-collection .dt-button.buttons-columnVisibility.active {
	background-color: #e6f0ff;
	color: #0056b3;
	border-color: #b8daff;
}

body.dark-theme .dt-button-collection .dt-button.buttons-columnVisibility.active {
	background-color: #2c3e50;
	color: #8bb9fe;
	border-color: #4e73df;
}

/* Checkbox styling for column visibility buttons */
.dt-button-collection .dt-button.buttons-columnVisibility.active:before {
	background-color: var(--pagination-active-bg);
	border-color: var(--pagination-active-bg);
}

.dt-button-collection .dt-button.buttons-columnVisibility.active:after {
	content: '✓';
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: white;
	font-size: 10px;
	font-weight: bold;
}

/* Facility and brand cards */
.facility-card, .brand-card {
	margin-bottom: 20px;
	transition: transform 0.2s;
}

.facility-card:hover, .brand-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Brand image in cards */
.brand-image {
	max-height: 48px;
	max-width: 48px;
	width: auto;
	margin: 0 auto;
	display: block;
	object-fit: contain;
}

/* Facility logo in cards */
.facility-logo {
	max-height: 48px;
	max-width: 48px;
	width: auto;
	margin: 0 auto;
	display: block;
	object-fit: contain;
}

/* Rating badge */
.rating-badge {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #ffc107;
	color: #212529;
	font-weight: bold;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Collapsible sections */
.section-card {
	margin-bottom: 1rem;
}

.section-header {
	cursor: pointer;
	background-color: var(--card-header-bg);
	transition: background-color 0.2s, color 0.2s;
	color: var(--text-color);
	border-color: var(--card-border);
}

.section-header:hover {
	background-color: var(--dt-button-hover-bg);
}

.section-icon {
	transition: transform 0.3s;
}

.section-header[aria-expanded="true"] .section-icon {
	transform: rotate(90deg);
}

/* Dark mode specific styling for section headers */
body.dark-theme .section-icon {
	color: var(--text-color);
}

body.dark-theme .section-header {
	background-color: var(--card-header-bg);
	color: var(--text-color);
	border-color: var(--card-border);
}

body.dark-theme .section-header:hover {
	background-color: var(--dt-button-hover-bg);
	color: var(--dt-button-hover-text);
}

/* Ensure section header headings have proper styling in dark mode */
body.dark-theme .section-header h2,
body.dark-theme .section-header h3 {
	color: var(--text-color);
	margin-bottom: 0;
}

/* Facility logo on detail page */
.facility-detail-logo {
	max-width: 300px;
	max-height: 400px;
	width: auto;
	height: auto;
	margin: 0 auto;
	display: block;
	object-fit: contain;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 10px;
	background-color: var(--card-bg);
	border: 1px solid var(--card-border);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.facility-detail-logo:hover {
	transform: scale(1.02);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Brand logo on detail page */
.brand-detail-logo {
	max-width: 300px;
	max-height: 400px;
	width: auto;
	height: auto;
	margin: 0 auto;
	display: block;
	object-fit: contain;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 10px;
	background-color: var(--card-bg);
	border: 1px solid var(--card-border);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brand-detail-logo:hover {
	transform: scale(1.02);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Facility detail page */
.facility-header {
	margin-bottom: 30px;
}

.facility-description {
	margin-bottom: 30px;
}

.facility-brands {
	margin-top: 30px;
}

/* Facility map styling */
#facility-map {
	height: 250px;
	width: 100%;
	border-radius: 0.25rem;
	z-index: 1;
}

/* Map popup styling */
.leaflet-popup-content-wrapper {
	border-radius: 4px;
}

body.dark-theme .leaflet-popup-content-wrapper,
body.dark-theme .leaflet-popup-tip {
	background-color: var(--card-bg);
	color: var(--text-color);
	border: 1px solid var(--card-border);
}

body.dark-theme .leaflet-container a.leaflet-popup-close-button {
	color: var(--text-color);
}

/* Footer styling */
footer.bg-light {
	background-color: var(--navbar-bg) !important;
	color: var(--text-color);
	border-top: 1px solid var(--card-border);
}

body.dark-theme footer.bg-light {
	background-color: var(--navbar-bg) !important;
}

body.dark-theme footer h5 {
	color: var(--text-color);
}

body.dark-theme footer a {
	color: var(--link-color);
}

body.dark-theme footer a:hover {
	color: var(--link-hover-color);
}

body.dark-theme footer .text-center.p-3 {
	background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Social media icons */
.social-links a {
	margin-right: 10px;
	font-size: 1.2rem;
}

body.light-theme .fa-facebook {
	color: #3b5998;
}

body.light-theme .fa-instagram {
	color: #e1306c;
}

body.light-theme .fa-globe {
	color: #007bff;
}

body.dark-theme .fa-facebook,
body.dark-theme .fa-instagram,
body.dark-theme .fa-globe,
body.dark-theme .fa-twitter {
	color: var(--link-color);
}

/* Improve pagination styling for dark mode */
body.dark-theme .dataTables_paginate .paginate_button {
	background-color: var(--dt-button-bg);
	color: var(--dt-button-text) !important;
	border: 1px solid var(--card-border);
}

body.dark-theme .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
	background-color: var(--dt-button-hover-bg);
	color: var(--dt-button-hover-text) !important;
	border-color: var(--dt-button-hover-bg);
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.15);
}

body.dark-theme .dataTables_paginate .paginate_button.current {
	background-color: var(--pagination-active-bg);
	color: var(--pagination-active-text) !important;
	border-color: var(--pagination-active-bg);
	box-shadow: 0 2px 5px rgba(0, 123, 255, 0.5);
}

body.dark-theme .dataTables_paginate .paginate_button:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
}

body.dark-theme .dataTables_paginate .paginate_button.disabled {
	opacity: 0.5;
	color: var(--card-border) !important;
}

/* Fix for ellipsis in dark mode pagination */
body.dark-theme .dataTables_paginate .ellipsis {
	color: var(--text-color) !important;
}

/* Center image columns in DataTables */
table.dataTable th.text-center,
table.dataTable td.text-center {
	text-align: center !important;
}

/* Ensure images in DataTables are centered */
.dataTables_wrapper .text-center img {
	margin: 0 auto;
	display: block;
}