@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom CSS Variables untuk Digital Maturity Assessment System */
:root {
    /* Enhanced Brand Color Palette */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* Role-specific Color System */
    --admin-primary: #3b82f6;
    --admin-secondary: #1e40af;
    --admin-light: #eff6ff;
    --admin-hover: #dbeafe;

    --kepsek-primary: #10b981;
    --kepsek-secondary: #047857;
    --kepsek-light: #ecfdf5;
    --kepsek-hover: #d1fae5;

    --guru-primary: #f59e0b;
    --guru-secondary: #d97706;
    --guru-light: #fffbeb;
    --guru-hover: #fef3c7;

    --siswa-primary: #8b5cf6;
    --siswa-secondary: #7c3aed;
    --siswa-light: #f3f4f6;
    --siswa-hover: #ede9fe;

    /* Enhanced Design Tokens */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;

    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

@layer components {
    /* Enhanced Card System */
    .card-enhanced {
        @apply bg-white rounded-xl border border-gray-100 transition-all;
        box-shadow: var(--shadow-sm);
        transition: all var(--transition-normal);
    }

    .card-enhanced:hover {
        @apply border-gray-200 transform -translate-y-1;
        box-shadow: var(--shadow-lg);
    }

    .card-stats {
        @apply bg-gradient-to-br from-white to-gray-50/50 rounded-xl border border-gray-100 p-6 transition-all;
        box-shadow: var(--shadow-xs);
        transition: all var(--transition-normal);
    }

    .card-stats:hover {
        @apply transform -translate-y-1 border-gray-200;
        box-shadow: var(--shadow-md);
    }

    .card-welcome {
        @apply overflow-hidden shadow-lg rounded-xl;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    }

    /* Enhanced Navigation */
    .nav-enhanced {
        @apply bg-white/95 backdrop-blur-sm border-b border-gray-200/50;
        box-shadow: var(--shadow-sm);
    }

    .nav-link-enhanced {
        @apply inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 rounded-lg;
        transition: all var(--transition-fast);
    }

    .nav-link-enhanced:hover {
        @apply bg-gray-100 text-gray-900;
    }

    .nav-link-enhanced.active {
        @apply bg-indigo-100 text-indigo-700 border border-indigo-200;
        box-shadow: inset 0 1px 2px rgba(59, 130, 246, 0.1);
    }

    /* Enhanced Button System */
    .btn-enhanced {
        @apply inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg;
        @apply focus:outline-none focus:ring-4 transition-all border;
        transition: all var(--transition-fast);
    }

    .btn-primary {
        @apply btn-enhanced bg-primary-600 text-white border-primary-600;
        @apply hover:bg-primary-700 hover:border-primary-700 focus:ring-primary-200;
        @apply active:bg-primary-800 active:scale-95;
    }

    .btn-secondary {
        @apply btn-enhanced bg-gray-100 text-gray-900 border-gray-200;
        @apply hover:bg-gray-200 hover:border-gray-300 focus:ring-gray-200;
        @apply active:bg-gray-300 active:scale-95;
    }

    .btn-success {
        @apply btn-enhanced bg-green-600 text-white border-green-600;
        @apply hover:bg-green-700 hover:border-green-700 focus:ring-green-200;
        @apply active:bg-green-800 active:scale-95;
    }

    .btn-warning {
        @apply btn-enhanced bg-yellow-600 text-white border-yellow-600;
        @apply hover:bg-yellow-700 hover:border-yellow-700 focus:ring-yellow-200;
        @apply active:bg-yellow-800 active:scale-95;
    }

    .btn-danger {
        @apply btn-enhanced bg-red-600 text-white border-red-600;
        @apply hover:bg-red-700 hover:border-red-700 focus:ring-red-200;
        @apply active:bg-red-800 active:scale-95;
    }

    /* Enhanced Form Elements */
    .form-input-enhanced {
        @apply block w-full px-4 py-3 text-gray-900 bg-white border border-gray-300 rounded-lg;
        @apply placeholder:text-gray-400 focus:ring-4 focus:ring-primary-200 focus:border-primary-500;
        transition: all var(--transition-fast);
    }

    .form-input-enhanced:focus {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }

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

    .form-select-enhanced {
        @apply form-input-enhanced bg-white cursor-pointer;
    }

    /* Enhanced Progress Elements */
    .progress-enhanced {
        @apply w-full bg-gray-200 rounded-full overflow-hidden;
        height: 8px;
    }

    .progress-fill {
        @apply h-full rounded-full transition-all duration-700 ease-out;
    }

    .progress-fill-admin { @apply bg-gradient-to-r from-blue-500 to-blue-600; }
    .progress-fill-kepsek { @apply bg-gradient-to-r from-green-500 to-green-600; }
    .progress-fill-guru { @apply bg-gradient-to-r from-yellow-500 to-yellow-600; }
    .progress-fill-siswa { @apply bg-gradient-to-r from-purple-500 to-purple-600; }

    /* Enhanced Badge System */
    .badge-enhanced {
        @apply inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full;
    }

    .badge-admin { @apply badge-enhanced bg-blue-100 text-blue-800; }
    .badge-kepsek { @apply badge-enhanced bg-green-100 text-green-800; }
    .badge-guru { @apply badge-enhanced bg-yellow-100 text-yellow-800; }
    .badge-siswa { @apply badge-enhanced bg-purple-100 text-purple-800; }

    .badge-success { @apply badge-enhanced bg-green-100 text-green-800; }
    .badge-warning { @apply badge-enhanced bg-yellow-100 text-yellow-800; }
    .badge-error { @apply badge-enhanced bg-red-100 text-red-800; }
    .badge-info { @apply badge-enhanced bg-blue-100 text-blue-800; }

    /* Enhanced Table System */
    .table-enhanced {
        @apply w-full rounded-lg overflow-hidden border border-gray-200;
        box-shadow: var(--shadow-xs);
    }

    .table-enhanced thead {
        @apply bg-gradient-to-r from-gray-50 to-gray-100;
    }

    .table-enhanced th {
        @apply px-6 py-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider;
    }

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

    .table-enhanced tbody tr {
        @apply border-t border-gray-200 transition-colors;
        transition: background-color var(--transition-fast);
    }

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

    /* Enhanced Modal System */
    .modal-overlay {
        @apply fixed inset-0 z-50 flex items-center justify-center p-4;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
    }

    .modal-content {
        @apply bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden;
        box-shadow: var(--shadow-xl);
    }

    .modal-header {
        @apply px-6 py-4 border-b border-gray-200;
    }

    .modal-body {
        @apply px-6 py-4 overflow-y-auto;
    }

    .modal-footer {
        @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
    }

    /* Enhanced Loading States */
    .skeleton {
        @apply animate-pulse bg-gray-200 rounded;
    }

    .skeleton-text {
        @apply skeleton h-4 w-3/4 mb-2;
    }

    .skeleton-title {
        @apply skeleton h-6 w-1/2 mb-4;
    }

    .loading-spinner {
        @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary-600;
        width: 20px;
        height: 20px;
    }

    /* Enhanced Animations */
    .fade-in {
        animation: fadeIn 0.5s ease-out;
    }

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

    .slide-in-right {
        animation: slideInRight 0.4s ease-out;
    }

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

    /* Enhanced Status Colors */
    .status-pending { @apply bg-yellow-100 text-yellow-800 border-yellow-200; }
    .status-approved { @apply bg-green-100 text-green-800 border-green-200; }
    .status-rejected { @apply bg-red-100 text-red-800 border-red-200; }
    .status-active { @apply bg-blue-100 text-blue-800 border-blue-200; }
    .status-inactive { @apply bg-gray-100 text-gray-800 border-gray-200; }

    /* Enhanced Quick Action Cards */
    .quick-action-card {
        @apply relative bg-gradient-to-br from-white to-gray-50/50 p-6 rounded-xl border border-gray-200;
        @apply hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer;
        transition: all var(--transition-normal);
    }

    .quick-action-card:hover {
        box-shadow: var(--shadow-lg);
    }

    .quick-action-card .icon {
        @apply transition-transform group-hover:scale-110;
        transition: transform var(--transition-fast);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

/* Enhanced Chart Styling */
.chart-container {
    @apply relative bg-white rounded-lg p-4;
    box-shadow: var(--shadow-sm);
}

.chart-title {
    @apply text-lg font-semibold text-gray-900 mb-2;
}

.chart-subtitle {
    @apply text-sm text-gray-500 mb-4;
}

/* Enhanced Responsive Design */
@media (max-width: 640px) {
    .card-stats {
        @apply p-4;
    }

    .btn-enhanced {
        @apply px-3 py-2 text-xs;
    }

    .table-enhanced th,
    .table-enhanced td {
        @apply px-4 py-3;
    }
}

/* Enhanced Focus States for Accessibility */
.focus-enhanced:focus {
    @apply outline-none ring-4 ring-primary-200 ring-opacity-50;
}

/* Enhanced Print Styles */
@media print {
    .card-enhanced,
    .table-enhanced {
        box-shadow: none;
        @apply border border-gray-300;
    }

    .btn-enhanced {
        @apply bg-gray-100 text-gray-900 border border-gray-300;
    }
}