/* ======= CSS Admin untuk Notus Tailwind JS ======= */

/* Base styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f9fafb;
}

/* Custom color definitions */
.bg-primary-blue { background-color: #0c2059; }
.text-primary-blue { color: #0c2059; }
.bg-accent-orange { background-color: #ff8700; }
.text-accent-orange { color: #ff8700; }

/* Button styles - kompatibel dengan Notus */
.btn {
    @apply px-4 py-2 rounded-lg font-semibold transition-all duration-300 cursor-pointer border-none inline-block;
}

.btn-primary {
    @apply bg-purple-600 text-white hover:bg-purple-700;
}

.btn-secondary {
    @apply bg-gray-300 text-gray-800 hover:bg-gray-400;
}

/* Input field styles - kompatibel dengan Notus */
.input-field {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300;
}

.input-field:disabled {
    @apply bg-gray-50 cursor-not-allowed;
}

/* Error message styling */
.error-message {
    @apply text-red-600 text-sm mt-2;
}

.success-message {
    @apply text-green-600 text-sm mt-2;
}

.info-message {
    @apply text-gray-600 text-sm mt-2;
}

/* 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 p-8 rounded-xl shadow-2xl max-w-sm w-full mx-4;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .container {
        @apply px-4;
    }
}

/* Notus specific overrides */
.notus-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Custom gradients */
.gradient-primary {
    @apply bg-gradient-to-r from-purple-500 to-purple-600;
}

.gradient-success {
    @apply bg-gradient-to-r from-green-500 to-green-600;
}

.gradient-warning {
    @apply bg-gradient-to-r from-yellow-500 to-yellow-600;
}

.gradient-danger {
    @apply bg-gradient-to-r from-red-500 to-red-600;
}

/* Animation utilities */
.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-scale-in {
    animation: scaleIn 0.3s ease-in-out;
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Loading states */
.loading {
    @apply animate-pulse;
}

.loading-spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-purple-600;
}

/* Form validation states */
.input-error {
    @apply border-red-500 focus:ring-red-500;
}

.input-success {
    @apply border-green-500 focus:ring-green-500;
}

/* Custom shadows */
.shadow-soft {
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
}

.shadow-medium {
    box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Text utilities */
.text-gradient {
    @apply bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent;
}

/* Border utilities */
.border-gradient {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(to right, #8b5cf6, #3b82f6) border-box;
}