/* 
 * Society Auditing App - Tailwind Custom Styles
 * This file contains additional Tailwind-based custom styles
 */

@layer components {
    /* Card Components */
    .card-modern {
        @apply bg-white rounded-2xl shadow-soft hover:shadow-medium transition-all duration-300 overflow-hidden;
    }
    
    .card-stat {
        @apply bg-white rounded-xl shadow-soft hover:shadow-strong hover:-translate-y-1 transition-all duration-300 p-6;
    }
    
    /* Button Components */
    .btn-modern-primary {
        @apply bg-gradient-to-r from-primary-600 to-primary-800 hover:from-primary-700 hover:to-primary-900 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5 inline-flex items-center gap-2;
    }
    
    .btn-modern-success {
        @apply bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5 inline-flex items-center gap-2;
    }
    
    .btn-modern-outline {
        @apply border-2 border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white font-semibold py-2.5 px-5 rounded-lg transition-all duration-200 inline-flex items-center gap-2;
    }
    
    /* Form Components */
    .input-modern {
        @apply w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-primary-500 focus:ring-4 focus:ring-primary-100 transition-all duration-200 outline-none;
    }
    
    .label-modern {
        @apply block text-sm font-semibold text-gray-700 mb-2;
    }
    
    /* Navigation */
    .nav-link-modern {
        @apply flex items-center gap-3 px-4 py-3 mx-2 rounded-xl text-gray-600 hover:text-primary-600 hover:bg-primary-50 transition-all duration-200 font-medium;
    }
    
    .nav-link-active {
        @apply bg-gradient-to-r from-primary-600 to-primary-800 text-white shadow-md;
    }
    
    /* Navbar */
    .navbar-modern {
        @apply bg-gradient-to-r from-primary-900 via-primary-800 to-primary-700 shadow-strong;
    }
    
    /* Sidebar */
    .sidebar-modern {
        @apply bg-white shadow-soft min-h-screen border-r border-gray-100;
    }
    
    /* Tables */
    .table-modern thead {
        @apply bg-gradient-to-r from-primary-600 to-primary-800 text-white;
    }
    
    .table-modern thead th {
        @apply px-6 py-4 text-left text-xs font-bold uppercase tracking-wider;
    }
    
    .table-modern tbody td {
        @apply px-6 py-4 border-b border-gray-100;
    }
    
    .table-modern tbody tr {
        @apply hover:bg-gray-50 transition-colors duration-150;
    }
    
    /* Badges */
    .badge-modern {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
    }
    
    .badge-success {
        @apply bg-green-100 text-green-800;
    }
    
    .badge-danger {
        @apply bg-red-100 text-red-800;
    }
    
    .badge-warning {
        @apply bg-yellow-100 text-yellow-800;
    }
    
    .badge-info {
        @apply bg-blue-100 text-blue-800;
    }
    
    .badge-primary {
        @apply bg-primary-100 text-primary-800;
    }
    
    /* Alerts */
    .alert-modern {
        @apply rounded-xl p-4 mb-4 flex items-start gap-3 shadow-soft;
    }
    
    .alert-success {
        @apply bg-green-50 border-l-4 border-green-500 text-green-800;
    }
    
    .alert-danger {
        @apply bg-red-50 border-l-4 border-red-500 text-red-800;
    }
    
    .alert-warning {
        @apply bg-yellow-50 border-l-4 border-yellow-500 text-yellow-800;
    }
    
    .alert-info {
        @apply bg-blue-50 border-l-4 border-blue-500 text-blue-800;
    }
    
    /* Page Header */
    .page-header-modern {
        @apply bg-gradient-to-r from-primary-600 to-primary-800 text-white rounded-2xl p-8 mb-6 shadow-medium;
    }
    
    /* Stat Cards */
    .stat-card {
        @apply bg-white rounded-xl p-6 shadow-soft hover:shadow-medium transition-all duration-300;
    }
    
    .stat-icon {
        @apply w-12 h-12 rounded-lg flex items-center justify-center text-2xl;
    }
    
    /* Dropdown */
    .dropdown-modern {
        @apply absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-strong py-2 z-50;
    }
    
    .dropdown-item-modern {
        @apply block px-4 py-2 text-gray-700 hover:bg-gray-50 hover:text-primary-600 transition-colors duration-150;
    }
    
    /* Modal */
    .modal-modern {
        @apply bg-white rounded-2xl shadow-strong max-w-2xl mx-auto;
    }
    
    .modal-header-modern {
        @apply border-b border-gray-200 px-6 py-4;
    }
    
    .modal-body-modern {
        @apply px-6 py-4;
    }
    
    .modal-footer-modern {
        @apply border-t border-gray-200 px-6 py-4 flex justify-end gap-3;
    }
}

@layer utilities {
    /* Gradient Backgrounds */
    .bg-gradient-primary {
        @apply bg-gradient-to-r from-primary-600 to-primary-800;
    }
    
    .bg-gradient-success {
        @apply bg-gradient-to-r from-green-500 to-green-600;
    }
    
    .bg-gradient-info {
        @apply bg-gradient-to-r from-blue-500 to-blue-600;
    }
    
    /* Text Gradients */
    .text-gradient-primary {
        @apply bg-gradient-to-r from-primary-600 to-primary-800 bg-clip-text text-transparent;
    }
    
    /* Animations */
    .animate-fade-in {
        animation: fadeIn 0.3s ease-out;
    }
    
    .animate-slide-up {
        animation: slideUp 0.4s ease-out;
    }
    
    .animate-scale-in {
        animation: scaleIn 0.3s ease-out;
    }
}

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

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

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

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

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    @page {
        margin: 1cm;
    }
}