/* KYC System Styles */

.kyc-manager {
    font-family: inherit;
}

.kyc-manager .btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

.kyc-manager .btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

.kyc-manager .btn-success {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500;
}

.kyc-manager .btn-danger {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
}

.kyc-manager .form-select {
    @apply block 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 sm:text-sm;
}

.kyc-manager .form-textarea {
    @apply block 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 sm:text-sm;
}

/* KYC Form Styles */
.kyc-form {
    font-family: inherit;
}

.kyc-form input[type="text"],
.kyc-form input[type="email"],
.kyc-form input[type="tel"],
.kyc-form input[type="date"],
.kyc-form textarea {
    @apply appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

.kyc-form input[type="file"] {
    @apply block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100;
}

/* KYC Status Colors */
.kyc-status-pending {
    @apply bg-gray-100 text-gray-800;
}

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

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

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

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

.kyc-status-rejected {
    @apply bg-red-100 text-red-800;
}

/* KYC Modal Styles */
.kyc-modal {
    @apply fixed inset-0 bg-gray-600/50 overflow-y-auto h-full w-full z-50;
}

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

/* KYC Card Styles */
.kyc-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
}

.kyc-info-card {
    @apply bg-gray-50 rounded-lg p-4;
}

.kyc-info-card h3 {
    @apply text-sm font-medium text-gray-900 mb-2;
}

.kyc-info-card p {
    @apply text-sm text-gray-500;
}

/* KYC Button Group */
.kyc-button-group {
    @apply flex flex-wrap gap-3;
}

/* KYC Status Display */
.kyc-status-display {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4;
}

.kyc-status-item {
    @apply bg-gray-50 rounded-lg p-4;
}

.kyc-status-icon {
    @apply w-8 h-8 rounded-full flex items-center justify-center;
}

.kyc-status-text {
    @apply ml-3;
}

.kyc-status-label {
    @apply text-sm font-medium text-gray-900;
}

.kyc-status-value {
    @apply text-sm text-gray-500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .kyc-status-display {
        @apply grid-cols-1 md:grid-cols-2;
    }
    
    .kyc-button-group {
        @apply flex-col;
    }
    
    .kyc-modal-content {
        @apply w-11/12 mx-4;
    }
}

/* KYC Form Validation */
.kyc-form .error {
    @apply text-red-500 text-sm mt-1;
}

.kyc-form .success {
    @apply text-green-500 text-sm mt-1;
}

/* KYC Loading States */
.kyc-loading {
    @apply opacity-50 pointer-events-none;
}

.kyc-loading::after {
    content: '';
    @apply absolute inset-0 bg-gray-100/50 flex items-center justify-center;
}

/* KYC Security Notice */
.kyc-security-notice {
    @apply text-xs text-gray-500 text-center;
}

.kyc-security-notice svg {
    @apply inline w-4 h-4 mr-1;
}