/* SigmaSRC Dashboard Custom Styles */ /* Ensure proper font loading */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); /* Global overrides */ body { font-family: 'Inter', sans-serif !important; } /* Sidebar styles */ .sidebar { transition: all 0.3s ease; } .sidebar-item:hover { background-color: rgba(59, 130, 246, 0.1); color: rgb(59, 130, 246); } /* Chart containers */ .chart-container { min-height: 300px; } /* Animation for metrics cards */ .metric-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .metric-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } /* Loading states */ .loading-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Status indicators */ .status-excellent { color: #10b981; background-color: #d1fae5; } .status-good { color: #3b82f6; background-color: #dbeafe; } .status-warning { color: #f59e0b; background-color: #fef3c7; } .status-critical { color: #ef4444; background-color: #fee2e2; } /* Progress bars */ .progress-bar { transition: width 0.5s ease; } /* Responsive adjustments for Tailwind + Bootstrap coexistence */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.show { transform: translateX(0); } .main-content { margin-left: 0 !important; } } /* Notification styles */ .notification-badge { animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Chart responsiveness */ .highcharts-container { width: 100% !important; height: auto !important; } /* Custom scrollbar for sidebar */ .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-track { background: #f1f1f1; } .sidebar::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 2px; } .sidebar::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* Compliance framework specific colors */ .hipaa-theme { border-left: 4px solid #10b981; } .pci-theme { border-left: 4px solid #3b82f6; } .sox-theme { border-left: 4px solid #8b5cf6; } .gdpr-theme { border-left: 4px solid #f59e0b; } .iso-theme { border-left: 4px solid #ef4444; } /* Activity timeline */ .activity-timeline { position: relative; } .activity-timeline::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: #e5e7eb; } .activity-item { position: relative; padding-left: 20px; } .activity-item::before { content: ''; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; border: 2px solid #ffffff; box-shadow: 0 0 0 1px #e5e7eb; } /* Dashboard grid adjustments */ .dashboard-grid { display: grid; gap: 1.5rem; } /* Compliance score circles */ .compliance-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; } .compliance-excellent { background: linear-gradient(135deg, #10b981, #059669); color: white; } .compliance-good { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; } .compliance-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; } .compliance-critical { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; } /* ============================================ DARK MODE STYLES Class-based dark mode using .dark on ============================================ */ /* Base body */ .dark body, html.dark body { background-color: #111827; color: #f9fafb; } /* Header/Navigation */ .dark nav, html.dark nav { background-color: #1f2937; border-color: #374151; } .dark nav .text-gray-500, html.dark nav .text-gray-500 { color: #9ca3af; } .dark nav .text-gray-700, html.dark nav .text-gray-700 { color: #d1d5db; } /* Sidebar */ .dark .sidebar, html.dark .sidebar { background-color: #1f2937; border-color: #374151; } .dark .sidebar a, html.dark .sidebar a { color: #d1d5db; } .dark .sidebar a:hover, html.dark .sidebar a:hover { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; } .dark .sidebar-item:hover, html.dark .sidebar-item:hover { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; } /* Sidebar scrollbar */ .dark .sidebar::-webkit-scrollbar-track, html.dark .sidebar::-webkit-scrollbar-track { background: #1f2937; } .dark .sidebar::-webkit-scrollbar-thumb, html.dark .sidebar::-webkit-scrollbar-thumb { background: #4b5563; } .dark .sidebar::-webkit-scrollbar-thumb:hover, html.dark .sidebar::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* Cards and panels */ .dark .bg-white, html.dark .bg-white { background-color: #1f2937 !important; } .dark .bg-gray-50, html.dark .bg-gray-50 { background-color: #111827 !important; } .dark .bg-gray-100, html.dark .bg-gray-100 { background-color: #1f2937 !important; } /* Text colors */ .dark .text-gray-900, html.dark .text-gray-900 { color: #f9fafb !important; } .dark .text-gray-800, html.dark .text-gray-800 { color: #f3f4f6 !important; } .dark .text-gray-700, html.dark .text-gray-700 { color: #d1d5db !important; } .dark .text-gray-600, html.dark .text-gray-600 { color: #9ca3af !important; } .dark .text-gray-500, html.dark .text-gray-500 { color: #6b7280 !important; } .dark .text-gray-400, html.dark .text-gray-400 { color: #9ca3af !important; } /* Borders */ .dark .border-gray-200, html.dark .border-gray-200 { border-color: #374151 !important; } .dark .border-gray-300, html.dark .border-gray-300 { border-color: #4b5563 !important; } .dark .border-b, html.dark .border-b { border-color: #374151; } .dark .border-r, html.dark .border-r { border-color: #374151; } .dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]), html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; } /* Form inputs */ .dark input, .dark select, .dark textarea, html.dark input, html.dark select, html.dark textarea { background-color: #374151; border-color: #4b5563; color: #f9fafb; } .dark input::placeholder, .dark textarea::placeholder, html.dark input::placeholder, html.dark textarea::placeholder { color: #9ca3af; } .dark input:focus, .dark select:focus, .dark textarea:focus, html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); } /* Buttons */ .dark .btn-outline, html.dark .btn-outline { border-color: #4b5563; color: #d1d5db; } .dark .btn-outline:hover, html.dark .btn-outline:hover { background-color: #374151; } /* Dropdowns and menus */ .dark .dropdown-menu, .dark #userMenu, html.dark .dropdown-menu, html.dark #userMenu { background-color: #1f2937; border-color: #374151; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); } .dark .dropdown-item, html.dark .dropdown-item { color: #d1d5db; } .dark .dropdown-item:hover, html.dark .dropdown-item:hover { background-color: #374151; } /* Tables */ .dark table, html.dark table { background-color: #1f2937; } .dark th, html.dark th { background-color: #111827; color: #f9fafb; border-color: #374151; } .dark td, html.dark td { border-color: #374151; color: #d1d5db; } .dark tr:hover, html.dark tr:hover { background-color: #374151; } .dark .table-striped tbody tr:nth-of-type(odd), html.dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(55, 65, 81, 0.5); } /* Metric cards */ .dark .metric-card, html.dark .metric-card { background-color: #1f2937; border-color: #374151; } .dark .metric-card:hover, html.dark .metric-card:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } /* Loading skeleton */ .dark .loading-skeleton, html.dark .loading-skeleton { background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%); background-size: 200% 100%; } /* Status indicators - darker backgrounds in dark mode */ .dark .status-excellent, html.dark .status-excellent { color: #10b981; background-color: rgba(16, 185, 129, 0.2); } .dark .status-good, html.dark .status-good { color: #60a5fa; background-color: rgba(59, 130, 246, 0.2); } .dark .status-warning, html.dark .status-warning { color: #fbbf24; background-color: rgba(245, 158, 11, 0.2); } .dark .status-critical, html.dark .status-critical { color: #f87171; background-color: rgba(239, 68, 68, 0.2); } /* Activity timeline */ .dark .activity-timeline::before, html.dark .activity-timeline::before { background: #374151; } .dark .activity-item::before, html.dark .activity-item::before { border-color: #1f2937; box-shadow: 0 0 0 1px #374151; } /* Alerts */ .dark .alert-info, html.dark .alert-info { background-color: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.3); color: #93c5fd; } .dark .alert-danger, html.dark .alert-danger { background-color: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; } .dark .alert-success, html.dark .alert-success { background-color: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.3); color: #6ee7b7; } .dark .alert-warning, html.dark .alert-warning { background-color: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.3); color: #fcd34d; } /* Shadows */ .dark .shadow, .dark .shadow-md, .dark .shadow-lg, html.dark .shadow, html.dark .shadow-md, html.dark .shadow-lg { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } /* Hover states */ .dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-gray-100:hover { background-color: #374151 !important; } .dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-50:hover { background-color: #1f2937 !important; } /* Ring focus states */ .dark .ring-gray-300, html.dark .ring-gray-300 { --tw-ring-color: #4b5563; } /* Accordion styles for sidebar */ .dark .accordion-content, html.dark .accordion-content { background-color: #1f2937; } /* Modal styles */ .dark .modal-content, html.dark .modal-content { background-color: #1f2937; border-color: #374151; } .dark .modal-header, html.dark .modal-header { border-color: #374151; } .dark .modal-footer, html.dark .modal-footer { border-color: #374151; } /* Badge styles */ .dark .badge, html.dark .badge { background-color: #374151; color: #d1d5db; } /* Breadcrumb */ .dark .breadcrumb, html.dark .breadcrumb { background-color: transparent; } .dark .breadcrumb-item a, html.dark .breadcrumb-item a { color: #60a5fa; } .dark .breadcrumb-item.active, html.dark .breadcrumb-item.active { color: #9ca3af; } /* Code blocks */ .dark code, .dark pre, html.dark code, html.dark pre { background-color: #111827; color: #e5e7eb; border-color: #374151; } /* Pagination */ .dark .page-link, html.dark .page-link { background-color: #1f2937; border-color: #374151; color: #d1d5db; } .dark .page-link:hover, html.dark .page-link:hover { background-color: #374151; color: #f9fafb; } .dark .page-item.active .page-link, html.dark .page-item.active .page-link { background-color: #3b82f6; border-color: #3b82f6; } /* Progress bars */ .dark .progress, html.dark .progress { background-color: #374151; } /* Tooltips */ .dark .tooltip-inner, html.dark .tooltip-inner { background-color: #374151; color: #f9fafb; } /* Card headers */ .dark .card-header, html.dark .card-header { background-color: #111827; border-color: #374151; } /* List groups */ .dark .list-group-item, html.dark .list-group-item { background-color: #1f2937; border-color: #374151; color: #d1d5db; } .dark .list-group-item:hover, html.dark .list-group-item:hover { background-color: #374151; } /* Search box in sidebar */ .dark .sidebar input[type="text"], .dark .sidebar input[type="search"], html.dark .sidebar input[type="text"], html.dark .sidebar input[type="search"] { background-color: #374151; border-color: #4b5563; color: #f9fafb; } /* Specific Tailwind utility overrides for dark mode */ html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; } html.dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.1) !important; } html.dark .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.1) !important; } html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; } html.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.1) !important; } html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1) !important; } /* Rounded cards commonly used */ html.dark .rounded-lg.bg-white, html.dark .rounded-xl.bg-white, html.dark .rounded-2xl.bg-white { background-color: #1f2937 !important; }