/* Custom CSS voor DCS Theme */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap');

/* Custom componenten die niet in Tailwind zitten */
.btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition-all duration-200;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.btn-secondary {
    @apply bg-white text-blue-600 border-2 border-blue-600 hover:bg-blue-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.btn-outline {
    @apply border-2 border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
}

/* Card componenten */
.card {
    @apply bg-white rounded-lg shadow-lg border border-gray-200;
}

.card-hover {
    @apply hover:shadow-xl transition-shadow duration-200;
}

/* Form styling */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-error {
    @apply text-red-600 text-sm mt-1;
}

/* Navigation styling */
.nav-link {
    @apply text-gray-700 hover:text-blue-600 font-medium transition-colors;
}

.nav-link-active {
    @apply text-blue-600 font-semibold;
}

/* Hero section styling */
.hero-gradient {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Custom utilities */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Responsive utilities */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* Focus styles voor accessibility */
.focus-visible:focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

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

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}