html {
	font-size: 14px;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

/* Dark Mode Theme Variables and smooth transitions */
:root {
	--custom-bg-light: #f8f9fa;
	--custom-bg-dark: #212529;
	--custom-border-light: #dee2e6;
	--custom-border-dark: #495057;
	--custom-text-muted-light: #6c757d;
	--custom-text-muted-dark: #adb5bd;
	--custom-dropzone-bg-light: #f8f9fa;
	--custom-dropzone-bg-dark: #343a40;
	--custom-dropzone-hover-light: #e9ecef;
	--custom-dropzone-hover-dark: #495057;
	--custom-card-bg-light: #ffffff;
	--custom-card-bg-dark: #2d3748;
}

/* Smooth dark mode transitions */
html,
body,
.navbar,
.card,
.btn,
.form-control,
.form-select,
.modal-content,
.dropdown-menu {
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Dark mode toggle button styling */
#darkModeToggle {
	transition: color 0.3s ease, transform 0.2s ease;
}

#darkModeToggle:hover {
	transform: scale(1.1);
}

#darkModeIcon {
	transition: transform 0.3s ease;
}

/* Fix Bootstrap .text-dark class for dark mode */
[data-bs-theme="dark"] .text-dark {
	color: var(--bs-body-color) !important;
}

/* Enhanced navbar dark mode styling */
.navbar {
	background-color: var(--bs-body-bg) !important;
	border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .navbar {
	background-color: var(--bs-dark) !important;
	border-color: var(--bs-border-color-translucent) !important;
}

/* Navbar brand text color fixes */
.navbar-brand {
	color: var(--bs-body-color) !important;
}

.navbar-brand:hover,
.navbar-brand:focus {
	color: var(--bs-primary) !important;
}

/* Navbar button colors in dark mode */
[data-bs-theme="dark"] .btn-outline-primary {
	border-color: var(--bs-primary);
	color: var(--bs-primary);
}

[data-bs-theme="dark"] .btn-outline-primary:hover {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
	color: var(--bs-white);
}

/* Additional dark mode section styling */
[data-bs-theme="dark"] .bg-body-secondary {
	background-color: var(--bs-dark-bg-subtle) !important;
}

/* Ensure icon backgrounds work in dark mode */
[data-bs-theme="dark"] .bg-primary.bg-opacity-10 {
	background-color: var(--bs-primary-bg-subtle) !important;
}

/* Feature highlight sections */
[data-bs-theme="dark"] .feature-highlight {
	color: var(--bs-body-color);
}

/* Fix badge contrast in dark mode */
[data-bs-theme="dark"] .badge.bg-light {
	background-color: var(--bs-secondary) !important;
	color: var(--bs-white) !important;
}

/* Card contrast styling for better visual separation */
.card {
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
}

/* Light mode: cards slightly lighter than body */
[data-bs-theme="light"] .card {
	background-color: #ffffff;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Dark mode: cards slightly lighter than body for contrast */
[data-bs-theme="dark"] .card {
	background-color: #3a3f47;
	border-color: #495057;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--bs-primary);
}

html {
	position: relative;
	min-height: 100%;
}

body {
	margin-bottom: 60px;
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
	text-align: start;
}

/* Dropzone styles with dark mode support */
.dropzone-card {
	border: 2px dashed var(--bs-border-color);
	border-radius: 0.5rem;
	background: var(--bs-body-bg);
	transition: border-color 0.2s, background 0.2s;
	cursor: pointer;
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
}

.dropzone-card.dragover {
	border-color: var(--bs-primary);
	background: var(--bs-primary-bg-subtle);
}

.dropzone-card input[type="file"] {
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	cursor: pointer;
	z-index: 2;
}

.dropzone-card .dropzone-label {
	z-index: 1;
	color: var(--bs-secondary);
	font-size: 1.1rem;
}

/* Switch label styles with dark mode support */
.switch-labels {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.switch-labels .label-hand,
.switch-labels .label-crib {
	font-weight: 500;
	color: var(--bs-secondary);
	transition: color 0.2s;
}

.switch-labels .active {
	color: var(--bs-primary);
}

/* iOS-style switch customization with dark mode support */
.form-switch .form-check-input {
	width: 48px;
	height: 28px;
	background-color: var(--bs-secondary-bg);
	border: none;
	border-radius: 28px;
	transition: background-color 0.2s, box-shadow 0.2s;
	box-shadow: none;
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
}

.form-switch .form-check-input:focus {
	box-shadow: 0 0 0 0.15rem var(--bs-primary-bg-subtle);
}

.form-switch .form-check-input:checked {
	background-color: var(--bs-primary);
}

.form-switch .form-check-input:active {
	background-color: var(--bs-primary-text-emphasis);
}

.form-switch .form-check-input::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 4px;
	width: 22px;
	height: 22px;
	background: var(--bs-body-bg);
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.form-switch .form-check-input:checked::before {
	transform: translateX(20px);
}

/* Card suit colors with dark mode support */
.suit-red {
	color: #dc3545;
}

.suit-black {
	color: var(--bs-body-color);
}

/* Custom Upload Zone Styling with dark mode support */
.upload-zone {
	transition: all 0.3s ease;
	cursor: pointer;
	background-color: var(--bs-secondary-bg);
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.upload-zone:hover {
	background-color: var(--bs-tertiary-bg);
	border-color: var(--bs-primary) !important;
}

.upload-zone.border-primary {
	background-color: var(--bs-primary-bg-subtle) !important;
}

.badge {
	font-size: 0.9em;
}

.btn-lg {
	padding: 1rem 2rem;
	font-size: 1.1rem;
	font-weight: 600;
}

.card.shadow-sm {
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
	border: 1px solid var(--bs-border-color);
}

.navbar-brand {
	font-weight: 700;
	letter-spacing: -0.5px;
}

.display-4 {
	font-weight: 700;
	letter-spacing: -1px;
}

.lead {
	font-size: 1.15rem;
	font-weight: 400;
}

.upload-zone .btn {
	margin-top: 1rem;
}

.img-thumbnail {
	border: 2px solid var(--bs-border-color);
	border-radius: 0.5rem;
}

.btn-group .btn-check:checked+.btn {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
	color: var(--bs-white);
}

#results {
	min-height: 100px;
}

/* Responsive Design */
@media (max-width: 768px) {
	.display-4 {
		font-size: 2.5rem;
	}

	.upload-zone {
		min-height: 150px;
		padding: 2rem 1rem !important;
	}

	.card-body {
		padding: 1.5rem !important;
	}
}

/* Animation for upload zones */
.upload-zone {
	position: relative;
	overflow: hidden;
}

.upload-zone::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.5s;
}

.upload-zone:hover::before {
	left: 100%;
}