/* Custom theme with unique color palette */ :root { /* Base Colors - Teal and Purple Theme */ --primary-color: #3a86ff; --secondary-color: #8338ec; --accent-color: #ff006e; --success-color: #06d6a0; --info-color: #0dcaf0; --warning-color: #ffbe0b; --danger-color: #ef476f; /* Light Mode */ --bg-color: #f8fafc; --card-bg: #ffffff; --text-color: #1a1d23; --text-muted: #64748b; --border-color: rgba(226, 232, 240, 0.8); --hover-bg: rgba(226, 232, 240, 0.4); } [data-bs-theme="dark"] { /* Dark Mode */ --bg-color: #0f172a; --card-bg: #1e293b; --text-color: #e2e8f0; --text-muted: #94a3b8; --border-color: rgba(51, 65, 85, 0.7); --hover-bg: rgba(51, 65, 85, 0.4); } /* Override Bootstrap classes */ .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); } .btn-primary:hover { background-color: #2563eb; border-color: #2563eb; } .btn-secondary { background-color: var(--secondary-color); border-color: var(--secondary-color); } .btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); } .text-primary { color: var(--primary-color) !important; } .bg-primary { background-color: var(--primary-color) !important; } /* Card styling */ .card { border-radius: 10px; overflow: hidden; transition: box-shadow 0.2s ease; border: 1px solid var(--border-color); background-color: var(--card-bg); } .card:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .card-header { background-color: transparent; border-bottom: 1px solid var(--border-color); padding: 1rem 1.25rem; } .card-title { margin-bottom: 0; color: var(--text-color); } /* Table styling */ .table { --bs-table-hover-bg: var(--hover-bg); } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.5); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.7); } /* Improved form controls */ .form-control, .form-select { border-radius: 8px; border: 1px solid var(--border-color); padding: 0.5rem 0.75rem; background-color: var(--card-bg); color: var(--text-color); } .form-control:focus, .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(58, 134, 255, 0.25); } /* Sidebar enhancements */ .sidebar { background: linear-gradient(to bottom, #1a1d23, #0f172a); box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } [data-bs-theme="light"] .sidebar { background: linear-gradient(to bottom, #f1f5f9, #e2e8f0); } .sidebar-item:hover { background-color: rgba(255, 255, 255, 0.1); } [data-bs-theme="light"] .sidebar-item:hover { background-color: rgba(0, 0, 0, 0.05); } /* Animation for page transitions */ .page-transition { animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Pill badges */ .badge { border-radius: 50rem; padding: 0.35em 0.65em; font-weight: 500; font-size: 0.75em; }