/* Dark Mode Styles for Rank Tracker SaaS */ /* Add [data-theme="dark"] to to activate */ [data-theme="dark"] { --bg-main: #1a1d21; --bg-card: #22262c; --bg-hover: #2d323a; --text-main: #e4e6eb; --text-muted: #a0a3a9; --border-color: #3a3f47; --primary-gradient: linear-gradient(135deg, #7c3aed, #4f46e5); } [data-theme="dark"] body { background-color: var(--bg-main) !important; color: var(--text-main) !important; } [data-theme="dark"] .navbar { background: rgba(34, 38, 44, 0.95) !important; border-bottom-color: var(--border-color) !important; } [data-theme="dark"] .card { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } [data-theme="dark"] .card-header { background-color: var(--bg-hover) !important; border-bottom-color: var(--border-color) !important; } [data-theme="dark"] .table { color: var(--text-main) !important; } [data-theme="dark"] .table thead th { background-color: var(--bg-hover) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } [data-theme="dark"] .table tbody tr { border-color: var(--border-color) !important; } [data-theme="dark"] .table tbody tr:hover { background-color: var(--bg-hover) !important; } [data-theme="dark"] .table-light, [data-theme="dark"] .bg-light { background-color: var(--bg-hover) !important; } [data-theme="dark"] .modal-content { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--border-color) !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--bg-main) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--bg-main) !important; border-color: #7c3aed !important; color: var(--text-main) !important; } [data-theme="dark"] .dropdown-menu { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .dropdown-item { color: var(--text-main) !important; } [data-theme="dark"] .dropdown-item:hover { background-color: var(--bg-hover) !important; } [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .btn-outline-secondary { border-color: var(--border-color) !important; color: var(--text-main) !important; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--bg-hover) !important; } [data-theme="dark"] .alert { background-color: var(--bg-hover) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .bg-white { background-color: var(--bg-card) !important; } [data-theme="dark"] hr { border-color: var(--border-color) !important; } [data-theme="dark"] .list-group-item { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; } /* Theme Toggle Button */ .theme-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 9999; width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .theme-toggle:hover { transform: scale(1.1); } [data-theme="light"] .theme-toggle { background: linear-gradient(135deg, #2d3748, #1a202c); color: #fbbf24; } [data-theme="dark"] .theme-toggle { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a202c; } /* Toast Notifications */ .toast-container { position: fixed; top: 80px; right: 20px; z-index: 9999; } .toast { min-width: 280px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } /* Smooth transitions */ body, .card, .modal-content, .navbar, .table, .form-control, .form-select { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }