/* ======= CSS Dosen 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-blue-600 text-white hover:bg-blue-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-blue-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;
}

/* Custom file input styling */
.file-input-label {
    @apply block text-sm font-semibold text-gray-700 mb-2;
}

.file-input-wrapper {
    @apply flex items-center justify-between p-3 border border-gray-300 rounded-lg bg-white cursor-pointer transition-all duration-300 hover:bg-gray-50;
}

.file-input-wrapper input[type="file"] {
    @apply hidden;
}

.file-name {
    @apply text-gray-600 text-sm flex-1 p-3;
}

.file-upload-button {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold transition-all duration-300 hover:bg-blue-700;
}

/* Image preview */
.image-preview {
    @apply w-full h-full object-cover;
}

/* Focus states */
.input-field:focus, .file-input-wrapper:focus-within {
    @apply ring-2 ring-blue-500 border-transparent;
}

/* 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-blue-500 to-blue-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-blue-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-blue-600 to-purple-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, #3b82f6, #8b5cf6) border-box;
}