/* Custom styles to complement Tailwind */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* slate-50 */
}
/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}
/* Style for active sidebar link */
.sidebar-link.active {
    background-color: #e2e8f0; /* slate-200 */
    color: #0f172a; /* slate-900 */
    font-weight: 600;
}
.sidebar-link.active svg {
    color: #4f46e5; /* indigo-600 */
}
/* Custom switch toggle */
.toggle-checkbox:checked {
    right: 0;
    border-color: #4f46e5;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #4f46e5;
}
/* Wizard progress styles */
.step.active .step-circle {
    background-color: #4f46e5;
    color: white;
    border-color: #4f46e5;
}
.step.completed .step-circle {
    background-color: #16a34a;
    color: white;
    border-color: #16a34a;
}
.step.active .step-title {
    color: #4f46e5;
    font-weight: 600;
}
 .step.completed .step-title {
    color: #16a34a;
}
.step-connector {
    background-color: #e2e8f0;
    height: 2px;
    flex: 1;
}
.step.completed .step-connector {
    background-color: #16a34a;
}
/* Simple spinner for loading states */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #4f46e5;
    animation: spin 1s ease infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}