/**
 * WebDeveloper Helper - Main Stylesheet
 * Modern styles for Bootstrap 5 application
 */

/* Bootstrap 5 navbar spacing */
body {
	padding-top: 76px;
	padding-bottom: 20px;
}

/* HTMX loading indicator */
.htmx-indicator {
	display: none;
	margin-left: 10px;
	color: #6c757d;
}

.htmx-request .htmx-indicator {
	display: inline;
}

.htmx-request .btn {
	opacity: 0.7;
}

/* Custom styling for better UX */
.tool-section {
	margin-bottom: 2rem;
}

/* Enhanced pre elements */
pre {
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 0.375rem;
	padding: 1rem;
	margin: 1rem 0;
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
	line-height: 1.4;
}

/* Card hover effects */
.card {
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

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

/* Copy functionality styling */
[onclick*="clipboard"] {
	cursor: pointer;
	transition: opacity 0.2s ease;
}

[onclick*="clipboard"]:hover {
	opacity: 0.8;
}

/* Form enhancements */
.form-control:focus {
	border-color: #86b7fe;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Navigation improvements */
.navbar-nav .nav-link {
	transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
	color: #ffffff !important;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 0.25rem;
}

/* Tool icons styling */
.tool-icon {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	display: block;
}

/* Responsive improvements */
@media (max-width: 768px) {
	body {
		padding-top: 60px;
	}

	.tool-section {
		margin-bottom: 1.5rem;
	}

	pre {
		font-size: 0.8rem;
		padding: 0.75rem;
	}
}

/* Loading spinner for better UX */
.spinner-border-sm {
	width: 1rem;
	height: 1rem;
}

/* Alert styling improvements */
.alert {
	border: none;
	border-radius: 0.5rem;
}

/* Table improvements */
.table th {
	border-top: none;
	font-weight: 600;
}

/* Button improvements */
.btn {
	border-radius: 0.375rem;
	transition: all 0.2s ease;
}

.btn:hover {
	transform: translateY(-1px);
}

/* Card header improvements */
.card-header {
	border-bottom: none;
	font-weight: 600;
}

/* Input group styling */
.input-group .btn {
	border-left: none;
}

/* Proportion calculator specific styles */
#proportion-form .card {
	border: 1px solid #e9ecef;
}

#proportion-form .card-body {
	padding: 1rem 1.5rem;
}

/* Utility classes */
.font-monospace {
	font-family: 'Courier New', monospace !important;
}

.cursor-pointer {
	cursor: pointer;
}

/* Print styles */
@media print {
	.navbar, .btn, .htmx-indicator {
		display: none !important;
	}

	body {
		padding-top: 0;
	}

	.card {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid #dee2e6;
	}
}