/* IslamicFinance Lite - Custom Styles */

:root {
    --primary-color: #3B82F6;
    --income-color: #10B981;
    --expense-color: #EF4444;
    --budget-color: #F59E0B;
    --neutral-color: #F9FAFB;
}

/* Mobile-first responsive */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .mobile-full {
        width: 100%;
    }
    
    .mobile-hidden {
        display: none !important;
    }
}

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

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

.slide-up {
    animation: slideUp 0.3s ease-out;
}

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

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Typography */
.font-bangla {
    font-family: 'Tiro Bangla', serif;
}

.font-english {
    font-family: 'Inter', 'Poppins', sans-serif;
}

/* Button styles */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-primary hover:bg-blue-700 text-white focus:ring-primary;
}

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

.btn-success {
    @apply bg-income hover:bg-green-700 text-white focus:ring-income;
}

.btn-danger {
    @apply bg-expense hover:bg-red-700 text-white focus:ring-expense;
}

/* Card styles */
.card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200;
}

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

.card-body {
    @apply p-6;
}

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

/* Form styles */
.form-group {
    @apply mb-4;
}

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

.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
}

.form-select {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
}

.form-textarea {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
}

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

.badge-primary {
    @apply bg-blue-100 text-blue-800;
}

.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;
}

/* Table styles */
.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;
}

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

/* Navigation */
.nav-link {
    @apply px-3 py-2 rounded-lg text-gray-700 hover:text-primary hover:bg-gray-100 transition duration-200;
}

.nav-link.active {
    @apply text-primary bg-blue-50;
}

/* Progress bar */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-bar-fill {
    @apply h-2 rounded-full transition-all duration-300;
}

/* Alert styles */
.alert {
    @apply px-4 py-3 rounded-lg border;
}

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

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

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

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

/* Loading spinner */
.spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: #000;
    }
    
    .card {
        border: 1px solid #000;
        box-shadow: none;
    }
}

/* Dark mode styles */
.dark .card {
    @apply bg-gray-800 border-gray-700;
}

.dark .form-input,
.dark .form-select,
.dark .form-textarea {
    @apply bg-gray-700 border-gray-600 text-white;
}

.dark .table {
    @apply divide-gray-700;
}

.dark .table th {
    @apply text-gray-400;
}

.dark .table td {
    @apply text-gray-300;
}

/* Utility classes */
.clickable {
    @apply cursor-pointer hover:opacity-90 transition duration-200;
}

.shadow-hover {
    @apply transition duration-300 hover:shadow-lg;
}

.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}