/* Theme Variables */
:root {
	/* Base variables */
	--transition-speed: 0.3s;
	--border-radius: 15px;
	--box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Theme Classes */
.theme-orange {
	--pastel-primary: #FFB99A;
	--pastel-secondary: #FFDAB9;
	--pastel-success: #FFE5CC;
	--pastel-warning: #FFC8A2;
	--pastel-danger: #FFB4A2;
	--pastel-info: #FFE0B8;
	--text-dark: #6B4F4F;
	--bg-color: #FFF8F3;
	--gradient: linear-gradient(135deg, #FFB99A, #FFDAB9);
}

.theme-blue {
	--pastel-primary: #A8D8EA;
	--pastel-secondary: #D6E7F3;
	--pastel-success: #B8E0D2;
	--pastel-warning: #B8D8EB;
	--pastel-danger: #B4D4E7;
	--pastel-info: #D5E7F2;
	--text-dark: #4F5E6B;
	--bg-color: #F3F8FF;
	--gradient: linear-gradient(135deg, #A8D8EA, #D6E7F3);
}

.theme-pink {
	--pastel-primary: #FFB5C2;
	--pastel-secondary: #FFD6DE;
	--pastel-success: #FFE5E8;
	--pastel-warning: #FFC2CC;
	--pastel-danger: #FFB4BE;
	--pastel-info: #FFE0E5;
	--text-dark: #6B4F57;
	--bg-color: #FFF3F6;
	--gradient: linear-gradient(135deg, #FFB5C2, #FFD6DE);
}

.theme-green {
	--pastel-primary: #B5D8B8;
	--pastel-secondary: #D6E8D8;
	--pastel-success: #E5F0E6;
	--pastel-warning: #C2DDC4;
	--pastel-danger: #B4D6B7;
	--pastel-info: #E0EDE1;
	--text-dark: #4F6B52;
	--bg-color: #F3FFF4;
	--gradient: linear-gradient(135deg, #B5D8B8, #D6E8D8);
}

.theme-purple {
	--pastel-primary: #D4B5FF;
	--pastel-secondary: #E6D6FF;
	--pastel-success: #EFE5FF;
	--pastel-warning: #DCC2FF;
	--pastel-danger: #D4B4FF;
	--pastel-info: #E8E0FF;
	--text-dark: #5B4F6B;
	--bg-color: #F8F3FF;
	--gradient: linear-gradient(135deg, #D4B5FF, #E6D6FF);
}

.theme-brown {
	--pastel-primary: #D8C3A5;
	--pastel-secondary: #E8DCC8;
	--pastel-success: #F0E5D8;
	--pastel-warning: #DDC9AC;
	--pastel-danger: #D6C1A3;
	--pastel-info: #EDE0D1;
	--text-dark: #6B594F;
	--bg-color: #FFF8F3;
	--gradient: linear-gradient(135deg, #D8C3A5, #E8DCC8);
}

.theme-teal {
	--pastel-primary: #97D8D8;
	--pastel-secondary: #C8E8E8;
	--pastel-success: #D8F0F0;
	--pastel-warning: #A9DDDD;
	--pastel-danger: #9DD6D6;
	--pastel-info: #D1EDED;
	--text-dark: #4F6B6B;
	--bg-color: #F3FFFF;
	--gradient: linear-gradient(135deg, #97D8D8, #C8E8E8);
}

/* Base Styles */
body {
	background-color: var(--bg-color);
	color: var(--text-dark);
	transition: all var(--transition-speed) ease;
}

/* Navbar Styles */
.navbar {
	background: var(--gradient) !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	padding: 1rem 0;
}

.navbar-brand {
	color: var(--text-dark) !important;
	font-weight: 600;
	font-size: 1.5rem;
}

/* Button Styles */
.btn {
	border-radius: 8px;
	padding: 0.5rem 1rem;
	transition: all var(--transition-speed) ease;
}

.btn-primary {
	background: var(--gradient) !important;
	border: none;
	color: var(--text-dark) !important;
}

.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-outline-light {
	color: var(--text-dark) !important;
	border-color: rgba(255,255,255,0.5) !important;
	background-color: rgba(255,255,255,0.3) !important;
}

.btn-outline-light:hover {
	background-color: rgba(255,255,255,0.4) !important;
	border-color: white !important;
}

.btn-outline-secondary {
	color: var(--text-dark) !important;
	border-color: var(--pastel-secondary) !important;
}

.btn-outline-secondary:hover {
	background-color: var(--pastel-secondary) !important;
	color: var(--text-dark) !important;
}

/* Card Styles */
.card {
	border: none;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	background-color: white;
	transition: all var(--transition-speed) ease;
	overflow: hidden;
}

.word-card {
	background: linear-gradient(to right, var(--pastel-primary) 0%, var(--pastel-primary) 4px, white 4px, white 100%);
}

.word-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.card-title {
	color: var(--text-dark);
	font-weight: 600;
}

/* Form Styles */
.form-control, .form-select {
	border-radius: 8px;
	border-color: rgba(0,0,0,0.1);
	transition: all var(--transition-speed) ease;
}

.form-control:focus, .form-select:focus {
	border-color: var(--pastel-primary);
	box-shadow: 0 0 0 0.25rem rgba(var(--pastel-primary), 0.25);
	background: linear-gradient(white, white) padding-box,
							var(--gradient) border-box;
	border: 2px solid transparent;
}

/* Search Box */
.search-box {
	border-radius: 20px;
	padding-left: 2.5rem;
	border: 2px solid var(--pastel-primary);
	background-color: white;
}

.search-container {
	position: relative;
	margin-bottom: 20px;
}

.search-icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--pastel-primary);
}

/* Badge Styles */
.badge {
	background: var(--gradient) !important;
	color: var(--text-dark) !important;
	padding: 0.5em 1em;
	font-weight: 500;
	border-radius: 20px;
}

/* Theme Switcher Styles */
.color-circle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--gradient) !important;
	border: 2px solid rgba(255,255,255,0.8);
}

.theme-dropdown {
	min-width: 200px;
	padding: 0.5rem;
	border-radius: 10px;
	border: none;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.theme-dropdown .dropdown-item {
	padding: 0.5rem 1rem;
	border-radius: 6px;
	transition: all var(--transition-speed) ease;
}

.theme-dropdown .dropdown-item:hover {
	background-color: var(--bg-color);
}

/* Collapsible Form */
.form-collapse-button {
	transition: all var(--transition-speed) ease;
}

.form-collapse-button .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.collapse {
	transition: all var(--transition-speed) ease;
}

.collapse:not(.show) {
	display: block;
	height: 0;
	overflow: hidden;
}

.collapse.show {
	height: auto;
}

/* Favorite Star */
.favorite-star {
	cursor: pointer;
	color: #FFB347;
	transition: transform var(--transition-speed);
	font-size: 1.2rem;
}

.favorite-star:hover {
	transform: scale(1.2);
}

/* Type Filter */
.type-filter {
	background-color: var(--bg-color);
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 20px;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.type-filter .btn {
	border-radius: 20px;
	padding: 0.3rem 1rem;
}

.type-filter .btn.active {
	background: var(--gradient) !important;
	color: var(--text-dark) !important;
	border-color: transparent;
}

/* SweetAlert2 Custom Styles */
.swal2-popup {
	border-radius: var(--border-radius) !important;
	font-family: inherit;
}

.swal2-title {
	color: var(--text-dark) !important;
}

.swal2-html-container {
	color: var(--text-dark) !important;
}

.swal2-confirm {
	border-radius: 8px !important;
}

.swal2-cancel {
	border-radius: 8px !important;
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
	background: var(--pastel-primary);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--pastel-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
	.form-collapse-button {
			position: sticky;
			top: 1rem;
			z-index: 1000;
	}

	.type-filter {
			overflow-x: auto;
			flex-wrap: nowrap;
			padding-bottom: 5px;
	}

	.type-filter::-webkit-scrollbar {
			height: 4px;
	}
}

/* Animations */
@keyframes gradient-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.btn-primary:active {
	background-size: 200% 200% !important;
	animation: gradient-shift 1s ease infinite;
}

.btn-outline-primary, .btn-outline-primary:active {
	color: #777777;
	border-color: #919090;
}

/* Note styles */
.text-muted {
	color: #6c757d8c !important;
}

.card-text small {
	display: block;
	background-color: var(--bg-color);
	padding: 0.5rem;
	border-radius: 6px;
	border-left: 3px solid var(--pastel-secondary);
}

textarea::placeholder {
	color: #6c757d8c;
	font-style: italic;
}