/** * Fintech Dark Theme for ElsaNet Collection System * Include after argon-dashboard.css. Add class "theme-fintech-dark" to . */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); .theme-fintech-dark { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; --bg-body: #0d1117; --bg-card: #161b22; --bg-card-hover: #1c2128; --bg-sidebar: #010409; --bg-navbar: #161b22; --border: #30363d; --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #6e7681; --accent-success: #3fb950; --accent-primary: #58a6ff; --accent-warning: #d29922; --accent-danger: #f85149; --accent-info: #2ea043; } .theme-fintech-dark, .theme-fintech-dark.bg-gray-100 { background: var(--bg-body) !important; color: var(--text-primary); } .theme-fintech-dark .min-height-300.bg-gradient-primary { background: linear-gradient(135deg, #0d1117 0%, #161b22 100%) !important; border-bottom: 1px solid var(--border); } /* Sidebar */ .theme-fintech-dark .sidenav { background: var(--bg-sidebar) !important; border: 1px solid var(--border) !important; } .theme-fintech-dark .sidenav .navbar-brand span, .theme-fintech-dark .sidenav .nav-link-text { color: var(--text-primary) !important; } .theme-fintech-dark .sidenav .nav-link { color: var(--text-secondary) !important; } .theme-fintech-dark .sidenav .nav-link:hover, .theme-fintech-dark .sidenav .nav-link:focus { color: var(--text-primary) !important; background: var(--bg-card) !important; } .theme-fintech-dark .sidenav .nav-link.active, .theme-fintech-dark .sidenav .nav-link.active .nav-link-text { color: var(--accent-primary) !important; background: rgba(88,166,255,0.1) !important; } .theme-fintech-dark .sidenav .nav-link.active .text-primary, .theme-fintech-dark .sidenav .nav-link.active .text-dark { color: var(--accent-primary) !important; } .theme-fintech-dark .sidenav h6, .theme-fintech-dark .sidenav .text-uppercase { color: var(--text-muted) !important; } .theme-fintech-dark .sidenav .horizontal { border-color: var(--border) !important; } .theme-fintech-dark .sidenav .icon-shape { background: var(--bg-card) !important; } /* Navbar */ .theme-fintech-dark .navbar-main { background: transparent !important; box-shadow: none !important; } .theme-fintech-dark .breadcrumb-item a, .theme-fintech-dark .breadcrumb-item.text-white, .theme-fintech-dark .navbar .font-weight-bolder { color: var(--text-primary) !important; } .theme-fintech-dark .breadcrumb-item.text-white.opacity-5 { color: var(--text-muted) !important; } .theme-fintech-dark .navbar label.text-white { color: var(--text-secondary) !important; } .theme-fintech-dark .navbar .form-control, .theme-fintech-dark .navbar .form-select { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .theme-fintech-dark .navbar .input-group-text { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; } .theme-fintech-dark .navbar .btn-white { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .theme-fintech-dark .navbar .btn-white:hover { background: var(--bg-card-hover) !important; color: var(--accent-primary) !important; } /* Main content */ .theme-fintech-dark .main-content { background: transparent !important; } /* Cards */ .theme-fintech-dark .card, .theme-fintech-dark .card-modern, .theme-fintech-dark .stat-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--text-primary); } .theme-fintech-dark .card-header, .theme-fintech-dark .card-modern .card-header { background: transparent !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .theme-fintech-dark .card-body { color: var(--text-primary); } .theme-fintech-dark .card .text-muted, .theme-fintech-dark .stat-subtext { color: var(--text-secondary) !important; } .theme-fintech-dark .stat-card:hover { background: var(--bg-card-hover) !important; border-color: var(--text-muted) !important; } .theme-fintech-dark .stat-value, .theme-fintech-dark .stat-label { color: var(--text-primary) !important; } .theme-fintech-dark .stat-label.text-success { color: var(--accent-success) !important; } .theme-fintech-dark .stat-label.text-primary { color: var(--accent-primary) !important; } .theme-fintech-dark .stat-label.text-warning { color: var(--accent-warning) !important; } .theme-fintech-dark .stat-label.text-danger { color: var(--accent-danger) !important; } .theme-fintech-dark .stat-label.text-info { color: var(--accent-info) !important; } /* Tables */ .theme-fintech-dark .table-modern thead th, .theme-fintech-dark .table th { color: var(--text-muted) !important; border-color: var(--border) !important; } .theme-fintech-dark .table-modern tbody td, .theme-fintech-dark .table td { color: var(--text-secondary) !important; border-color: var(--border) !important; } .theme-fintech-dark .table-modern tbody tr:hover, .theme-fintech-dark .table tbody tr:hover { background: var(--bg-card-hover) !important; } .theme-fintech-dark .table-active td { background: rgba(88,166,255,0.08) !important; color: var(--text-primary) !important; } /* Forms */ .theme-fintech-dark .form-control, .theme-fintech-dark .form-select { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .theme-fintech-dark .form-control:focus, .theme-fintech-dark .form-select:focus { border-color: var(--accent-primary) !important; box-shadow: 0 0 0 0.2rem rgba(88,166,255,0.25) !important; } .theme-fintech-dark .form-control::placeholder { color: var(--text-muted) !important; } .theme-fintech-dark .form-label, .theme-fintech-dark label { color: var(--text-secondary) !important; } .theme-fintech-dark .input-group-text { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-secondary) !important; } /* Buttons */ .theme-fintech-dark .btn-primary { background: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: #0d1117 !important; } .theme-fintech-dark .btn-primary:hover { opacity: 0.9; } .theme-fintech-dark .btn-outline-primary { border-color: var(--accent-primary) !important; color: var(--accent-primary) !important; } .theme-fintech-dark .btn-outline-primary:hover { background: rgba(88,166,255,0.15) !important; color: var(--accent-primary) !important; } .theme-fintech-dark .btn-outline-success { border-color: var(--accent-success) !important; color: var(--accent-success) !important; } .theme-fintech-dark .btn-outline-success:hover { background: rgba(63,185,80,0.15) !important; } .theme-fintech-dark .btn-outline-danger { border-color: var(--accent-danger) !important; color: var(--accent-danger) !important; } .theme-fintech-dark .btn-outline-danger:hover { background: rgba(248,81,73,0.15) !important; } .theme-fintech-dark .btn-secondary { background: var(--bg-card-hover) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* Modals */ .theme-fintech-dark .modal-content { background: var(--bg-card) !important; border: 1px solid var(--border) !important; } .theme-fintech-dark .modal-header { border-color: var(--border) !important; color: var(--text-primary) !important; } .theme-fintech-dark .modal-body { color: var(--text-primary); } .theme-fintech-dark .modal-footer { border-color: var(--border) !important; } .theme-fintech-dark .btn-close { filter: invert(1); opacity: 0.7; } /* Alerts */ .theme-fintech-dark .alert-warning { background: rgba(210,153,34,0.15) !important; border-color: rgba(210,153,34,0.3) !important; color: var(--accent-warning) !important; } .theme-fintech-dark .alert-danger { background: rgba(248,81,73,0.15) !important; border-color: rgba(248,81,73,0.3) !important; color: var(--accent-danger) !important; } .theme-fintech-dark .alert-info { background: rgba(88,166,255,0.15) !important; border-color: rgba(88,166,255,0.3) !important; color: var(--accent-primary) !important; } /* Badges */ .theme-fintech-dark .badge.bg-success { background: var(--accent-success) !important; } .theme-fintech-dark .badge.bg-warning { background: var(--accent-warning) !important; color: #0d1117 !important; } .theme-fintech-dark .badge.bg-danger { background: var(--accent-danger) !important; } .theme-fintech-dark .badge.bg-gradient-primary { background: linear-gradient(135deg, var(--accent-primary), #79b8ff) !important; } .theme-fintech-dark .badge.bg-gradient-info { background: linear-gradient(135deg, var(--accent-info), #3fb950) !important; } /* Footer */ .theme-fintech-dark .footer, .theme-fintech-dark .copyright { color: var(--text-muted) !important; } /* Nav tabs */ .theme-fintech-dark .nav-tabs .nav-link { color: var(--text-secondary) !important; border-color: transparent !important; } .theme-fintech-dark .nav-tabs .nav-link.active { color: var(--accent-primary) !important; border-bottom-color: var(--accent-primary) !important; } /* Sidenav toggler (white lines) */ .theme-fintech-dark .sidenav-toggler-line { background: var(--text-primary) !important; } /* Sign-in page */ .theme-fintech-dark body { background: var(--bg-body) !important; } .theme-fintech-dark .login-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important; } .theme-fintech-dark .login-header { border-color: var(--border) !important; } .theme-fintech-dark .login-title { color: var(--text-primary) !important; background: none !important; -webkit-text-fill-color: var(--text-primary) !important; } .theme-fintech-dark .login-subtitle { color: var(--text-secondary) !important; } .theme-fintech-dark .login-icon { background: linear-gradient(135deg, var(--accent-primary), #79b8ff) !important; } .theme-fintech-dark .form-control-lg { background: var(--bg-body) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } .theme-fintech-dark .form-label { color: var(--text-secondary) !important; } .theme-fintech-dark .btn-login { background: linear-gradient(135deg, var(--accent-primary), #79b8ff) !important; color: #0d1117 !important; } .theme-fintech-dark .text-white.opacity-8 { color: var(--text-muted) !important; } /* Navbar white text links */ .theme-fintech-dark .navbar .nav-link.text-white { color: var(--text-primary) !important; } /* Mobile table cards */ .theme-fintech-dark .table-invoices-mobile tr, .theme-fintech-dark .table-payments-mobile tr, .theme-fintech-dark .table-collectors-mobile tr, .theme-fintech-dark .table-customers-mobile tr, .theme-fintech-dark .table-reports-mobile tr, .theme-fintech-dark .table-audit-mobile tr { background: var(--bg-card) !important; border-color: var(--border) !important; } .theme-fintech-dark .table-invoices-mobile td[data-label]::before, .theme-fintech-dark .table-payments-mobile td[data-label]::before, .theme-fintech-dark .table-collectors-mobile td[data-label]::before, .theme-fintech-dark .table-customers-mobile td[data-label]::before, .theme-fintech-dark .table-reports-mobile td[data-label]::before, .theme-fintech-dark .table-audit-mobile td[data-label]::before { color: var(--text-muted) !important; } /* Dropdown */ .theme-fintech-dark .dropdown-menu { background: var(--bg-card) !important; border-color: var(--border) !important; } .theme-fintech-dark .dropdown-item { color: var(--text-primary) !important; } .theme-fintech-dark .dropdown-item:hover { background: var(--bg-card-hover) !important; } /* Chart.js container in dark theme */ .theme-fintech-dark #chart-collections-trend { max-height: 260px; }