/* ====== Global Dark Theme Variables ====== */
:root[data-theme='dark'] {
	--bs-body-bg: #121212;
	--bs-body-color: #e0e0e0;
	--bs-toast-bg: #333;
	--bs-toast-color: #f1f1f1;

	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
}

/* ====== Base Body & Layout ====== */
[data-theme="dark"] body {
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
}

/* ====== General Components ====== */
[data-theme='dark'] .table {
	color: #f1f1f1;
}

[data-theme='dark'] .toast {
	background-color: var(--bs-toast-bg);
	color: var(--bs-toast-color);
}

[data-theme='dark'] .form-control {
	background-color: #333;
	color: #fff;
	border-color: #555;
}

[data-theme='dark'] .login-container {
	background-color: #2a2a2a;
	border-color: #444;
}

[data-theme='dark'] #password-rules {
	color: #ff9999;
}

/* ====== Buttons ====== */
[data-theme='dark'] .btn {
	color: #eee;
	background-color: #2e2e2e;
	border: 1px solid #555;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[data-theme='dark'] .btn:hover {
	background-color: #444;
	color: #fff;
	border-color: #777;
}

[data-theme='dark'] .btn-outline-primary {
	border-color: #66aaff;
	color: #66aaff;
}

[data-theme='dark'] .btn-outline-primary:hover {
	background-color: #66aaff;
	color: #121212;
}

[data-theme='dark'] .btn-outline-secondary {
	border-color: #aaa;
	color: #ddd;
}

[data-theme='dark'] .btn-outline-secondary:hover {
	background-color: #ddd;
	color: #121212;
}

/* ====== Nav Cards ====== */
[data-theme='dark'] .nav-card a,
[data-theme='dark'] .nav-card button,
[data-theme='dark'] .btn,
[data-theme='dark'] .btn-outline-secondary {
	display: inline-block;
	background-color: #2a2a2a;
	border: 1px solid #888;
	color: #f1f1f1;
	text-decoration: none;
	padding: 12px 16px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

[data-theme='dark'] .nav-card a:hover,
[data-theme='dark'] .nav-card button:hover,
[data-theme='dark'] .btn:hover,
[data-theme='dark'] .btn-outline-secondary:hover {
	background-color: #3c3c3c;
	transform: translateY(-2px);
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ====== Modals ====== */
[data-theme="dark"] .modal-content {
	background-color: #222;
	color: #eee;
	border: 1px solid #444;
}

[data-theme="dark"] .modal-header.bg-danger {
	background-color: #b02a37 !important;
}

[data-theme="dark"] .modal-header.bg-warning {
	background-color: #ffcc00 !important;
	color: #121212;
}

[data-theme="dark"] .btn-close {
	filter: invert(1);
}

/* ====== Dashboard-Specific Overrides ====== */
[data-theme='dark'] .container.dashboard-container {
	background-color: #1e1e1e;
	border-color: #444;
	color: #eee;
}

[data-theme='dark'] .panel {
	background-color: #2b2b2b;
	border-color: #555;
	color: #f1f1f1;
}

[data-theme='dark'] .locked-users th {
	background-color: #3a3a3a;
	color: #ffffff;
}

[data-theme='dark'] .locked-users td {
	color: #f0f0f0;
}

/* Fix for visibility of headings and labels in dark mode */
[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] label,
[data-theme='dark'] legend {
	color: #ffffff;
}

[data-theme='dark'] .text-muted {
	color: #bbbbbb !important;
}

/* Specific element tweaks */
[data-theme='dark'] .form-check-label {
	color: #dddddd;
}

[data-theme='dark'] .form-check-input {
	accent-color: #66aaff;
}

[data-theme='dark'] .hq-container {
	background-color: #121212;
	color: #f0f0f0;
}

/* Card styling for dark mode */
[data-theme='dark'] .hq-card {
	background-color: #1e1e1e;
	border: 1px solid #444;
	color: #eaeaea;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

[data-theme='dark'] .hq-card:hover {
	background-color: #292929;
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
	transform: translateY(-2px);
}

/* Anchor tag inside .card-grid */
[data-theme='dark'] .card-link {
	text-decoration: none;
	color: inherit;
}

/* Section headings */
[data-theme='dark'] .section-group h2 {
	color: #ffffff;
	border-bottom: 1px solid #333;
	padding-bottom: 5px;
	margin-bottom: 1rem;
}

/* Dashboard Aisle button */
[data-theme='dark'] .btn-secondary {
	background-color: #444;
	color: #f1f1f1;
	border: 1px solid #666;
}
[data-theme='dark'] .btn-secondary:hover {
	background-color: #555;
	color: #fff;
}

/* ====== Dark Mode: Login View Enhancements ====== */
[data-theme="dark"] .container.auth-container {
	background-color: #1f1f1f;
	border: 1px solid #444;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .auth-container h2 {
	color: #ffffff;
}

[data-theme="dark"] .form-control {
	background-color: #2b2b2b;
	color: #f1f1f1;
	border-color: #555;
}

[data-theme="dark"] .form-control::placeholder {
	color: #aaa;
}

[data-theme="dark"] .form-control:focus {
	background-color: #2b2b2b;
	color: #fff;
	border-color: #777;
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .toggle-password {
	color: #ccc;
}

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

[data-theme="dark"] .btn-primary:hover {
	background-color: #0b5ed7;
}

[data-theme="dark"] .link a {
	color: #9ecbff;
}

[data-theme="dark"] .link a:hover {
	color: #cce5ff;
	text-decoration: underline;
}

[data-theme="dark"] #password-rules {
	color: #ffbbbb;
}