/**
 * Custom CSS untuk Aplikasi Pengaduan Disdik HST
 * File ini berisi styling tambahan untuk melengkapi Tailwind CSS
 */

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #2563EB;
}

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

/* Custom button hover effects */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition duration-300 shadow-lg;
}

.btn-secondary {
    @apply bg-gray-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-700 transition duration-300 shadow-lg;
}

.btn-success {
    @apply bg-green-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-green-700 transition duration-300 shadow-lg;
}

.btn-danger {
    @apply bg-red-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-red-700 transition duration-300 shadow-lg;
}

/* Custom form styling */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

/* Custom card styling */
.card {
    @apply bg-white rounded-lg shadow-lg p-6;
}

.card-header {
    @apply border-b border-gray-200 pb-4 mb-4;
}

/* Custom notification styling */
.notification {
    @apply px-4 py-3 rounded border mb-4;
}

.notification-success {
    @apply bg-green-100 border-green-400 text-green-700;
}

.notification-error {
    @apply bg-red-100 border-red-400 text-red-700;
}

.notification-warning {
    @apply bg-yellow-100 border-yellow-400 text-yellow-700;
}

.notification-info {
    @apply bg-blue-100 border-blue-400 text-blue-700;
}

/* Custom status badges */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-new {
    @apply bg-blue-100 text-blue-800;
}

.status-processing {
    @apply bg-yellow-100 text-yellow-800;
}

.status-completed {
    @apply bg-green-100 text-green-800;
}

/* Custom table styling */
.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

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

/* Custom modal styling */
.modal {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full;
}

.modal-content {
    @apply relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white;
}

/* Custom loading spinner */
.spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600;
}

/* Custom gradient backgrounds */
.gradient-blue {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
}

.gradient-green {
    background: linear-gradient(135deg, #10B981 0%, #047857 100%);
}

.gradient-purple {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}

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

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Custom mobile menu */
.mobile-menu {
    @apply md:hidden hidden bg-white border-t;
}

.mobile-menu.active {
    @apply block;
}

/* Custom file upload styling */
.file-upload {
    @apply relative overflow-hidden inline-block;
}

.file-upload input[type=file] {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
}

.file-upload-label {
    @apply inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition cursor-pointer;
}

/* Custom chart container */
.chart-container {
    @apply relative h-64;
}

/* Custom responsive utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none;
    }
    
    .mobile-full {
        width: 100%;
    }
}

/* Custom print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
}

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

/* Custom shadow utilities */
.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);
}

.shadow-strong {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2), 0 2px 10px -2px rgba(0, 0, 0, 0.1);
}

/* Custom text utilities */
.text-gradient {
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom border utilities */
.border-gradient {
    border: 2px solid;
    border-image: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%) 1;
}

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

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

.space-y-2 > * + * {
    margin-top: 0.5rem;
}

/* Custom grid utilities */
.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}