/* Additional styles for Tathmir Investment Platform */

.nav-btn {
    @apply py-3 px-4 text-gray-600 hover:text-blue-600 border-b-2 border-transparent hover:border-blue-600 transition-colors duration-200 whitespace-nowrap text-sm font-medium;
}

.nav-btn.active {
    @apply text-blue-600 border-blue-600;
}

.section {
    @apply opacity-100 transition-opacity duration-300;
}

.section.hidden {
    @apply opacity-0 pointer-events-none absolute;
}

/* 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: #a8a8a8;
}

/* Table styles */
.data-table {
    @apply w-full text-sm text-right text-gray-500;
}

.data-table thead {
    @apply text-xs text-gray-700 uppercase bg-gray-50;
}

.data-table th {
    @apply px-6 py-3;
}

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

.data-table tr {
    @apply bg-white border-b hover:bg-gray-50;
}

/* Status badges */
.status-active {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800;
}

.status-inactive {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800;
}

.status-pending {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800;
}

.status-approved {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800;
}

.status-rejected {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800;
}

/* Modal styles */
.modal {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 transition-opacity;
}

.modal-container {
    @apply flex min-h-screen items-center justify-center px-4 py-12;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl transform transition-all max-w-lg w-full;
}

.modal-header {
    @apply flex items-center justify-between p-6 border-b;
}

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

.modal-footer {
    @apply flex justify-end space-x-reverse space-x-3 px-6 py-4 border-t bg-gray-50 rounded-b-lg;
}

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

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

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

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

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

/* Button styles */
.btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors duration-200;
}

.btn-success {
    @apply bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition-colors duration-200;
}

.btn-warning {
    @apply bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg transition-colors duration-200;
}

.btn-danger {
    @apply bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors duration-200;
}

/* Workflow styles */
.workflow-step {
    @apply relative flex items-center;
}

.workflow-step::after {
    content: '';
    @apply absolute left-1/2 top-full w-0.5 h-8 bg-gray-300 transform -translate-x-1/2;
}

.workflow-step:last-child::after {
    display: none;
}

.workflow-step-icon {
    @apply w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold text-sm z-10 relative;
}

.workflow-step-completed {
    @apply bg-green-500;
}

.workflow-step-active {
    @apply bg-blue-500;
}

.workflow-step-pending {
    @apply bg-gray-300;
}

.workflow-step-content {
    @apply mr-4 flex-1;
}

/* Risk level indicators */
.risk-low {
    @apply text-green-600 bg-green-100;
}

.risk-medium {
    @apply text-yellow-600 bg-yellow-100;
}

.risk-high {
    @apply text-orange-600 bg-orange-100;
}

.risk-critical {
    @apply text-red-600 bg-red-100;
}

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

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

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

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        @apply px-4;
    }
    
    .modal-container {
        @apply px-2;
    }
    
    .grid-responsive {
        @apply grid-cols-1;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-full-width {
        width: 100% !important;
        max-width: none !important;
    }
}