/* ================================
   Theme Variables
   ================================ */

:root {
	/* Accent Colors */
	--color-accent: #0d6efd;
	--color-accent-soft: rgba(13, 110, 253, 0.15);

	/* Dark Theme Colors */
	--color-bg-dark: #050816;
	--color-bg-elevated-dark: #0b1020;
	--color-border-dark: #1f2937;
	--color-text-primary-dark: #f9fafb;
	--color-text-secondary-dark: #9ca3af;

	/* Light Theme Colors */
	--color-bg-light: #f8f9fa;
	--color-bg-elevated-light: #ffffff;
	--color-border-light: #dee2e6;
	--color-text-primary-light: #212529;
	--color-text-secondary-light: #6c757d;
}

/* Light Theme */
html[data-theme='light'] {
	--color-bg: var(--color-bg-light);
	--color-bg-elevated: var(--color-bg-elevated-light);
	--color-border: var(--color-border-light);
	--color-text-primary: var(--color-text-primary-light);
	--color-text-secondary: var(--color-text-secondary-light);
}

/* Dark Theme */
html[data-theme='dark'] {
	--color-bg: var(--color-bg-dark);
	--color-bg-elevated: var(--color-bg-elevated-dark);
	--color-border: var(--color-border-dark);
	--color-text-primary: var(--color-text-primary-dark);
	--color-text-secondary: var(--color-text-secondary-dark);
}

/* ================================
   Global Styles
   ================================ */

body {
	background-color: var(--color-bg);
	color: var(--color-text-primary);
	transition: background-color 0.3s ease, color 0.3s ease;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;
}

/* ================================
   Header Styles
   ================================ */

header h1 {
	color: var(--color-text-primary);
	font-weight: 600;
}

#themeToggle {
	border-color: var(--color-border);
	color: var(--color-text-primary);
	transition: all 0.3s ease;
}

#themeToggle:hover {
	background-color: var(--color-accent-soft);
	border-color: var(--color-accent);
}

/* ================================
   Dropzone Card
   ================================ */

.dropzone-card {
	background: var(--color-bg-elevated);
	border: 2px dashed var(--color-border);
	border-radius: 1rem;
	transition: all 0.3s ease;
	cursor: pointer;
}

.dropzone-card:hover {
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(13, 110, 253, 0.15);
}

.dropzone-card.drag-over {
	border-color: var(--color-accent);
	background: var(--color-accent-soft);
	transform: scale(1.02);
}

.dropzone-card i {
	color: var(--color-accent);
}

.dropzone-card h2 {
	color: var(--color-text-primary);
}

.dropzone-card .text-muted {
	color: var(--color-text-secondary) !important;
}

/* ================================
   Buttons
   ================================ */

.btn-primary {
	background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
	border: none;
	padding: 0.75rem 2rem;
	font-weight: 500;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}

.btn-primary:active {
	transform: translateY(0);
}

/* ================================
   Preview Grid
   ================================ */

.preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
}

.preview-item {
	position: relative;
	border-radius: 0.5rem;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
}

.preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.preview-item-remove {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(220, 53, 69, 0.9);
	border: none;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.preview-item-remove:hover {
	background: rgb(220, 53, 69);
	transform: scale(1.1);
}

.result-item-download {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(13, 110, 253, 0.9);
	border: none;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.result-item-download:hover {
	background: rgb(13, 110, 253);
	transform: scale(1.1);
}

/* ================================
   Results Grid
   ================================ */

#resultsGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
}

#resultsGrid .preview-item img {
	cursor: pointer;
	transition: transform 0.2s ease;
}

#resultsGrid .preview-item img:hover {
	transform: scale(1.05);
}

/* ================================
   Modal Styles
   ================================ */

.modal-content {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: 1rem;
}

.modal-header {
	border-bottom: 1px solid var(--color-border);
}

.modal-footer {
	border-top: 1px solid var(--color-border);
}

.modal-title {
	color: var(--color-text-primary);
}

.btn-close {
	filter: invert(var(--bs-btn-close-filter, 0));
}

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

#modalImage {
	max-height: 70vh;
	border-radius: 0.5rem;
}

/* ================================
   Loading States
   ================================ */

.spinner-border {
	width: 3rem;
	height: 3rem;
}

/* ================================
   Footer
   ================================ */

footer {
	color: var(--color-text-secondary);
}

/* ================================
   Utilities
   ================================ */

.text-muted {
	color: var(--color-text-secondary) !important;
}

/* ================================
   Card Overrides
   ================================ */

.card {
	background: var(--color-bg-elevated);
	border-color: var(--color-border);
	color: var(--color-text-primary);
}

/* ================================
   Responsive Design
   ================================ */

@media (max-width: 768px) {
	.preview-grid,
	#resultsGrid {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}

	.dropzone-card .card-body {
		padding: 2rem 1rem;
	}

	.btn-primary {
		padding: 0.625rem 1.5rem;
	}
}