/* Custom CSS for Compliance Manager */

/* Font family */
.font-inter {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Navigation */
.nav-link {
    @apply text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

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

/* Buttons */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 flex items-center;
}

.btn-secondary {
    @apply bg-white hover:bg-gray-50 text-gray-700 border border-gray-300 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 flex items-center justify-center;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 flex items-center;
}

/* Cards */
.compliance-card {
    @apply bg-white p-6 rounded-lg shadow-sm border border-gray-200;
}

.template-category-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-200;
}

.integration-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-200;
}

/* Views */
.view {
    display: none;
}

.view.active {
    display: block;
}

/* Status indicators */
.status-implemented {
    @apply bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium;
}

.status-partial {
    @apply bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium;
}

.status-not-implemented {
    @apply bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium;
}

.status-active {
    @apply bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium;
}

.status-pending {
    @apply bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium;
}

.status-archived {
    @apply bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs font-medium;
}

/* Severity badges */
.severity-critical {
    @apply bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-bold border border-red-200;
}

.severity-high {
    @apply bg-orange-100 text-orange-800 px-2 py-1 rounded-full text-xs font-medium border border-orange-200;
}

.severity-medium {
    @apply bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium border border-yellow-200;
}

.severity-low {
    @apply bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium border border-blue-200;
}

/* Integration status indicators */
.integration-status {
    @apply w-3 h-3 rounded-full;
}

.integration-status[data-status="active"] {
    @apply bg-green-500;
}

.integration-status[data-status="inactive"] {
    @apply bg-gray-300;
}

.integration-status[data-status="error"] {
    @apply bg-red-500;
}

/* Gap analysis items */
.gap-item {
    @apply p-6 hover:bg-gray-50 transition-colors duration-200;
}

.gap-item:hover {
    cursor: pointer;
}

/* SoA control items */
.soa-control-item {
    @apply p-6 hover:bg-gray-50 transition-colors duration-200;
}

.soa-control-item:hover {
    cursor: pointer;
}

/* Evidence table enhancements */
.evidence-table-row {
    @apply hover:bg-gray-50 transition-colors duration-200;
}

.evidence-table-row:hover {
    cursor: pointer;
}

/* Confidence score bar */
.confidence-bar {
    @apply bg-gray-200 rounded-full h-2 w-16;
}

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

.confidence-fill.high {
    @apply bg-green-500;
}

.confidence-fill.medium {
    @apply bg-yellow-500;
}

.confidence-fill.low {
    @apply bg-red-500;
}

/* Loading states */
.loading {
    @apply animate-pulse;
}

.loading-text {
    @apply bg-gray-200 rounded h-4;
}

.loading-number {
    @apply bg-gray-200 rounded h-8 w-12;
}

/* Modals */
.modal {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50;
    display: none;
}

.modal.active {
    display: block;
}

.modal-content {
    @apply relative top-20 mx-auto p-6 border w-11/12 max-w-2xl shadow-lg rounded-lg bg-white;
}

.modal-header {
    @apply flex justify-between items-center pb-4 mb-4 border-b border-gray-200;
}

.modal-title {
    @apply text-lg font-semibold text-gray-900;
}

.modal-close {
    @apply text-gray-400 hover:text-gray-600 text-2xl font-bold cursor-pointer;
}

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

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

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

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-h-24;
}

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

/* Responsive design enhancements */
@media (max-width: 768px) {
    .nav-link {
        @apply px-2 py-1 text-xs;
    }
    
    .compliance-card {
        @apply p-4;
    }
    
    .modal-content {
        @apply top-10 p-4;
    }
}

/* Animation for charts */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.chart-container {
    animation: fadeIn 0.5s ease-out;
}

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

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

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

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

/* Clause mapping tags */
.clause-tag {
    @apply inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded mr-1 mb-1;
}

/* File upload area */
.file-upload-area {
    @apply border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors duration-200;
}

.file-upload-area.dragover {
    @apply border-blue-500 bg-blue-50;
}

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

.progress-fill {
    @apply h-2 bg-blue-600 rounded-full transition-all duration-500;
}

/* Toast notifications */
.toast {
    @apply fixed bottom-4 right-4 bg-white border border-gray-200 rounded-lg shadow-lg p-4 z-50 transform translate-y-full opacity-0 transition-all duration-300;
}

.toast.show {
    @apply translate-y-0 opacity-100;
}

.toast.success {
    @apply border-green-200 bg-green-50;
}

.toast.error {
    @apply border-red-200 bg-red-50;
}

.toast.warning {
    @apply border-yellow-200 bg-yellow-50;
}

/* Table enhancements */
.table-header-sort {
    @apply cursor-pointer hover:bg-gray-100 select-none;
}

.table-header-sort:hover i {
    @apply opacity-100;
}

.table-header-sort i {
    @apply opacity-0 transition-opacity duration-200;
}

/* Expandable content */
.expandable-content {
    @apply max-h-0 overflow-hidden transition-all duration-300;
}

.expandable-content.expanded {
    @apply max-h-96;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        @apply text-black bg-white;
    }
    
    .compliance-card, .modal-content {
        @apply shadow-none border border-gray-300;
    }
}