/* SecuAI GRC Sentinel - Main Styles */

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

::-webkit-scrollbar-track {
    background: #1f2937;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

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

.animate-pulse-slow {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
}
/* Log items */
.log-item {
    @apply p-3 sm:p-4 rounded-lg;
}

.log-icon {
    @apply p-2 rounded-full;
}

.log-success {
    @apply bg-green-900/10 border border-green-800/30;
    .log-icon {
        @apply bg-green-900/20;
    }
}

.log-warning {
    @apply bg-yellow-900/10 border border-yellow-800/30;
    .log-icon {
        @apply bg-yellow-900/20;
    }
}

.log-error {
    @apply bg-red-900/10 border border-red-800/30;
    .log-icon {
        @apply bg-red-900/20;
    }
}

.log-info {
    @apply bg-blue-900/10 border border-blue-800/30;
    .log-icon {
        @apply bg-blue-900/20;
    }
}

/* Status badges */
.status-badge {
    @apply px-3 py-1 rounded-full text-xs font-medium;
}
.status-pass {
    @apply bg-green-900/30 text-green-400;
}

.status-partial {
    @apply bg-yellow-900/30 text-yellow-400;
}

.status-fail {
    @apply bg-red-900/30 text-red-400;
}

.status-na {
    @apply bg-gray-900/30 text-gray-400;
}

/* Card hover effects */
.hover-card {
    @apply transition-all duration-200 hover:shadow-lg hover:shadow-primary-900/10;
}

/* Gradient backgrounds */
.gradient-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, #d946ef 0%, #8b5cf6 100%);
}

/* Loading spinner */
.spinner {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top: 3px solid #0ea5e9;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Evidence type indicators */
.evidence-type-config {
    @apply border-l-4 border-blue-500;
}

.evidence-type-score {
    @apply border-l-4 border-green-500;
}

.evidence-type-log {
    @apply border-l-4 border-purple-500;
}

.evidence-type-doc {
    @apply border-l-4 border-yellow-500;
}

/* Control domain colors */
.domain-aps {
    @apply border-l-4 border-blue-500;
}

.domain-crypto {
    @apply border-l-4 border-purple-500;
}

.domain-csr {
    @apply border-l-4 border-green-500;
}

.domain-dap {
    @apply border-l-4 border-cyan-500;
}

.domain-iam {
    @apply border-l-4 border-orange-500;
}

.domain-inf {
    @apply border-l-4 border-red-500;
}

.domain-mrf {
    @apply border-l-4 border-pink-500;
}

.domain-thr {
    @apply border-l-4 border-indigo-500;
}

/* Table styles */
.table-container {
    @apply overflow-x-auto rounded-lg border border-gray-700;
}

.table-container table {
    @apply min-w-full divide-y divide-gray-700;
}

.table-container thead {
    @apply bg-gray-800;
}

.table-container th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider;
}

.table-container tbody {
    @apply bg-gray-800/50 divide-y divide-gray-700;
}

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

/* Form styles */
.form-input {
    @apply bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent w-full;
}

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

.form-select {
    @apply bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent w-full appearance-none;
}

.form-checkbox {
    @apply rounded bg-gray-800 border-gray-700 text-primary-500 focus:ring-primary-500 focus:ring-offset-gray-900;
}

/* Button variants */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900;
}

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

.btn-secondary {
    @apply bg-secondary-600 hover:bg-secondary-700 text-white focus:ring-secondary-500;
}

.btn-outline {
    @apply border border-gray-600 hover:bg-gray-800 text-gray-300 focus:ring-gray-500;
}

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

/* Modal backdrop */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40;
}

/* Toast notifications */
.toast {
    @apply fixed right-4 top-4 z-50 max-w-sm bg-gray-800 border border-gray-700 rounded-lg shadow-lg p-4 animate-fade-in;
}

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

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

/* Evidence freshness indicators */
.freshness-indicator {
    @apply inline-block w-2 h-2 rounded-full mr-2;
}

.freshness-fresh {
    @apply bg-green-500;
}

.freshness-warning {
    @apply bg-yellow-500;
}

.freshness-stale {
    @apply bg-red-500;
}

/* AI assessment result styling */
.ai-assessment-card {
    @apply bg-gray-800 rounded-xl p-6 border border-gray-700;
}

.ai-assessment-header {
    @apply flex items-center justify-between mb-6 pb-4 border-b border-gray-700;
}

.ai-assessment-content {
    @apply space-y-4;
}

.ai-assessment-section {
    @apply bg-gray-900/50 rounded-lg p-4;
}

.ai-assessment-section h4 {
    @apply font-medium text-gray-300 mb-2 flex items-center;
}

.ai-assessment-section h4 i {
    @apply mr-2;
}
/* Connection status indicators */
.connection-status {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.connection-connected {
    @apply bg-green-900/30 text-green-400;
}

.connection-disconnected {
    @apply bg-red-900/30 text-red-400;
}

.connection-error {
    @apply bg-yellow-900/30 text-yellow-400;
}

/* Connection cards */
.connection-card {
    transition: all 0.2s ease;
}

.connection-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

.provider-option input:checked + div {
    border-color: #f97316;
    background-color: rgba(249, 115, 22, 0.1);
}
/* Risk level indicators */
.risk-level {
    @apply px-3 py-1 rounded-full text-xs font-medium;
}

.risk-critical {
    @apply bg-red-900/30 text-red-400;
}

.risk-high {
    @apply bg-orange-900/30 text-orange-400;
}

.risk-medium {
    @apply bg-yellow-900/30 text-yellow-400;
}

.risk-low {
    @apply bg-green-900/30 text-green-400;
}
/* Quick Start specific styles */
.quick-start-step {
    transition: all 0.3s ease;
}

.quick-start-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.step-number {
    transition: all 0.3s ease;
}

.completed-step .step-number {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
}

.completed-step {
    border-left-color: #10b981 !important;
}

/* AI Assistant chat bubble */
.ai-bubble {
    position: relative;
    border-radius: 1rem;
    padding: 1rem;
    max-width: 85%;
}

.ai-bubble::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 20px;
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #1f2937 transparent transparent;
}
/* Control Framework Specific Styles */
.control-card {
    @apply bg-gray-800 rounded-xl border border-gray-700 hover:border-primary-500 transition-colors duration-200;
}

.control-card-header {
    @apply flex items-center justify-between p-4 sm:p-6 border-b border-gray-700;
}

.control-card-body {
    @apply p-4 sm:p-6;
}

.control-status-indicator {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.control-status-pass {
    @apply bg-green-900/30 text-green-400;
}

.control-status-partial {
    @apply bg-yellow-900/30 text-yellow-400;
}

.control-status-fail {
    @apply bg-red-900/30 text-red-400;
}

.control-status-na {
    @apply bg-gray-900/30 text-gray-400;
}

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

.framework-gis {
    @apply bg-purple-900/30 text-purple-400;
}

.framework-soc2 {
    @apply bg-blue-900/30 text-blue-400;
}

.framework-iso27001 {
    @apply bg-green-900/30 text-green-400;
}

.framework-pci {
    @apply bg-red-900/30 text-red-400;
}

.domain-tag {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-lg text-xs font-medium border;
}

.domain-aps-tag {
    @apply border-blue-500 bg-blue-900/20 text-blue-400;
}

.domain-crypto-tag {
    @apply border-purple-500 bg-purple-900/20 text-purple-400;
}

.domain-csr-tag {
    @apply border-green-500 bg-green-900/20 text-green-400;
}

.domain-dap-tag {
    @apply border-cyan-500 bg-cyan-900/20 text-cyan-400;
}

.domain-iam-tag {
    @apply border-orange-500 bg-orange-900/20 text-orange-400;
}

.domain-inf-tag {
    @apply border-red-500 bg-red-900/20 text-red-400;
}

.domain-mrf-tag {
    @apply border-pink-500 bg-pink-900/20 text-pink-400;
}

.domain-thr-tag {
    @apply border-indigo-500 bg-indigo-900/20 text-indigo-400;
}

.evidence-badge {
    @apply inline-flex items-center px-2 py-1 rounded-lg text-xs font-medium bg-gray-900/50 border border-gray-700;
}

.requirement-text {
    @apply text-gray-300 text-sm leading-relaxed;
}

/* Assessment result styling */
.assessment-result-card {
    @apply bg-gray-800/50 rounded-lg p-4 border border-gray-700;
}

.assessment-result-pass {
    @apply border-green-500/30 bg-green-900/10;
}

.assessment-result-partial {
    @apply border-yellow-500/30 bg-yellow-900/10;
}

.assessment-result-fail {
    @apply border-red-500/30 bg-red-900/10;
}

/* Print styles for Evidence Pack */
@media print {
.no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .ai-assessment-card {
        break-inside: avoid;
        border: 1px solid #ddd !important;
    }
}

/* Dark mode overrides */
.dark .prose {
    color: #d1d5db;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4 {
    color: #f3f4f6;
}

/* Custom tooltip */
.custom-tooltip {
    @apply invisible absolute z-50 px-3 py-2 text-sm bg-gray-900 text-gray-100 rounded-lg shadow-lg;
}

.has-tooltip:hover .custom-tooltip {
    @apply visible;
}
/* Dashboard specific styles */
.dashboard-grid {
    display: grid;
    gap: 1.5rem;
}

/* Monitoring specific styles */
.alert-card {
    @apply bg-gray-900/50 rounded-lg p-4 border border-gray-700 transition-colors;
}

.alert-critical {
    @apply border-red-500/30;
}

.alert-warning {
    @apply border-yellow-500/30;
}

.domain-status-card {
    @apply bg-gray-900/50 rounded-lg p-4 border border-gray-700 hover:border-primary-500 transition-colors;
}

.event-item {
    @apply p-3 hover:bg-gray-700/30 rounded-lg transition-colors;
}

.event-icon {
    @apply p-2 rounded-lg w-8 h-8 flex items-center justify-center;
}

.health-item {
    @apply p-3 bg-gray-900/50 rounded-lg border border-gray-700;
}

.health-status {
    @apply w-2 h-2 rounded-full;
}
.dashboard-card {
    background: #1f2937;
    border-radius: 0.75rem;
    border: 1px solid #374151;
    transition: all 0.2s;
}

.dashboard-card:hover {
    border-color: #4b5563;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.dashboard-stat {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}

.dashboard-stat-label {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

.dashboard-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.dashboard-badge-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.dashboard-badge-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.dashboard-badge-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.dashboard-badge-info {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.dashboard-activity-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: rgba(55, 65, 81, 0.3);
    border-radius: 0.5rem;
    border-left: 4px solid transparent;
}

.dashboard-activity-item-success {
    border-left-color: #10b981;
}

.dashboard-activity-item-warning {
    border-left-color: #f59e0b;
}

.dashboard-activity-item-info {
    border-left-color: #3b82f6;
}

.dashboard-activity-item-purple {
    border-left-color: #8b5cf6;
}

.dashboard-source-card {
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid #374151;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s;
}

.dashboard-source-card:hover {
    border-color: #0ea5e9;
    transform: translateY(-2px);
}

.dashboard-insight-card {
    background: rgba(17, 24, 39, 0.5);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid transparent;
}

.dashboard-insight-card:hover {
    border-color: #374151;
}

.dashboard-task-item {
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid;
    margin-bottom: 0.5rem;
}

.dashboard-task-item-overdue {
    background: rgba(239, 68, 68, 0.05);
    border-color: #ef4444;
}

.dashboard-task-item-soon {
    background: rgba(245, 158, 11, 0.05);
    border-color: #f59e0b;
}

.dashboard-task-item-ontrack {
    background: rgba(59, 130, 246, 0.05);
    border-color: #3b82f6;
}

/* Chart container */
.chart-container {
    position: relative;
    height: 320px;
    width: 100%;
}

/* Quick action button */
.quick-action-btn {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid;
    transition: all 0.2s;
    text-decoration: none;
}

.quick-action-btn:hover {
    transform: translateY(-1px);
}

.quick-action-btn-primary {
    border-color: #0ea5e9;
    background: rgba(14, 165, 233, 0.05);
}

.quick-action-btn-secondary {
    border-color: #d946ef;
    background: rgba(217, 70, 239, 0.05);
}

.quick-action-btn-purple {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

.quick-action-btn-cyan {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.05);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-stat {
        font-size: 1.875rem;
    }
}

@media (max-width: 768px) {
    .dashboard-card {
        padding: 1rem;
    }
    
    .chart-container {
        height: 250px;
    }
}