/* Custom CSS untuk Soinloop */

/* Smooth transitions */
* {
    transition: all 0.3s ease;
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #3d3252;
}

/* Loading animation untuk images */
img {
    opacity: 0;
    transition: opacity 0.5s ease;
}

img.loaded {
    opacity: 1;
}

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

.animate-fade-in-left {
    animation: fadeInLeft 0.6s ease-out;
}

.animate-fade-in-right {
    animation: fadeInRight 0.6s ease-out;
}

.animate-pulse-slow {
    animation: pulse 2s infinite;
}

/* Custom button styles */
.btn-primary {
    @apply bg-soinloop-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-soinloop-700 transition-all duration-300 transform hover:scale-105;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-semibold hover:bg-gray-300 transition-all duration-300;
}

.btn-outline {
    @apply border-2 border-soinloop-600 text-soinloop-600 px-6 py-3 rounded-lg font-semibold hover:bg-soinloop-600 hover:text-white transition-all duration-300;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2;
}

/* Custom form styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-soinloop-500 focus:border-transparent transition-all duration-300;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-soinloop-500 focus:border-transparent transition-all duration-300 resize-none;
}

/* Custom badge styles */
.badge {
    @apply inline-block px-3 py-1 text-xs font-semibold rounded-full;
}

.badge-primary {
    @apply bg-soinloop-100 text-soinloop-800;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

/* Custom alert styles */
.alert {
    @apply p-4 rounded-lg border-l-4;
}

.alert-success {
    @apply bg-green-50 border-green-400 text-green-800;
}

.alert-error {
    @apply bg-red-50 border-red-400 text-red-800;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-400 text-yellow-800;
}

.alert-info {
    @apply bg-blue-50 border-blue-400 text-blue-800;
}

/* Loading spinner */
.spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-soinloop-600 rounded-full animate-spin;
}

/* Custom grid layouts */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Responsive text sizes */
@media (max-width: 640px) {
    .text-responsive {
        font-size: 1rem;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .text-responsive {
        font-size: 1.125rem;
    }
}

@media (min-width: 1025px) {
    .text-responsive {
        font-size: 1.25rem;
    }
}

/* Custom focus styles */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-soinloop-500 focus:ring-offset-2;
}

/* Custom gradient backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, #4D3F66 0%, #3d3252 100%);
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Custom shadows */
.shadow-soft {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.shadow-medium {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
}

.shadow-strong {
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.2);
}

/* Custom border radius */
.rounded-soft {
    border-radius: 0.75rem;
}

.rounded-medium {
    border-radius: 1rem;
}

.rounded-strong {
    border-radius: 1.5rem;
}

/* Custom spacing utilities */
.space-y-custom > * + * {
    margin-top: 2rem;
}

.space-x-custom > * + * {
    margin-left: 2rem;
}

/* Custom typography */
.text-gradient {
    background: linear-gradient(135deg, #4D3F66 0%, #3d3252 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom image styles */
.img-cover {
    @apply w-full h-full object-cover;
}

.img-contain {
    @apply w-full h-full object-contain;
}

/* Custom navigation styles */
.nav-link {
    @apply text-gray-600 hover:text-soinloop-600 transition-colors duration-300 relative;
}

.nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-soinloop-600 transition-all duration-300;
}

.nav-link:hover::after {
    @apply w-full;
}

/* Custom table styles */
.table-custom {
    @apply w-full border-collapse;
}

.table-custom th {
    @apply bg-gray-50 text-left p-4 font-semibold text-gray-700 border-b border-gray-200;
}

.table-custom td {
    @apply p-4 border-b border-gray-100;
}

.table-custom tr:hover {
    @apply bg-gray-50;
}

/* Custom modal styles */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-screen overflow-y-auto;
}

/* Custom tooltip styles */
.tooltip {
    @apply absolute z-50 px-2 py-1 text-sm text-white bg-gray-900 rounded shadow-lg;
}

/* Custom progress bar */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-fill {
    @apply bg-soinloop-600 h-2 rounded-full transition-all duration-300;
}

/* Custom toggle switch */
.toggle-switch {
    @apply relative inline-flex items-center h-6 rounded-full w-11 bg-gray-200 transition-colors duration-300;
}

.toggle-switch.active {
    @apply bg-soinloop-600;
}

.toggle-switch::after {
    content: '';
    @apply absolute left-1 w-4 h-4 bg-white rounded-full transition-transform duration-300;
}

.toggle-switch.active::after {
    @apply transform translate-x-5;
}

/* Custom checkbox */
.checkbox-custom {
    @apply w-4 h-4 text-soinloop-600 bg-gray-100 border-gray-300 rounded focus:ring-soinloop-500 focus:ring-2;
}

/* Custom radio */
.radio-custom {
    @apply w-4 h-4 text-soinloop-600 bg-gray-100 border-gray-300 focus:ring-soinloop-500 focus:ring-2;
}

/* Custom select */
.select-custom {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-soinloop-500 focus:border-transparent bg-white;
}

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