/* NPS Application - Dark Mode Theme */ /* Applies when is set */ [data-theme="dark"] { --primary-color: #42a5f5; --primary-dark: #1e88e5; --primary-light: #64b5f6; --secondary-color: #4db6ac; --success-color: #66bb6a; --warning-color: #ffa726; --danger-color: #ef5350; --text-primary: rgba(255, 255, 255, 0.87); --text-secondary: rgba(255, 255, 255, 0.60); --text-disabled: rgba(255, 255, 255, 0.38); --border-color: #424242; --background-light: #121212; --bg-card: #1e1e1e; --bg-nav: #1e1e1e; --bg-input: #2c2c2c; --bg-hover: rgba(255, 255, 255, 0.04); --bg-header-gradient: #1a1c22; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.40); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.48); } /* Body & base */ [data-theme="dark"] body { background-color: var(--background-light); color: var(--text-primary); } /* Cards */ [data-theme="dark"] .card-modern { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .card-modern .card-header-modern { background: #26282c; border-bottom-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .card-modern .card-body { color: var(--text-primary); } [data-theme="dark"] .card { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .card-header { background: #26282c; border-bottom-color: var(--border-color); color: var(--text-primary); } /* Tables */ [data-theme="dark"] .table-modern { background: var(--bg-card); } [data-theme="dark"] .table-modern thead { background: #26282c; } [data-theme="dark"] .table-modern th { color: var(--text-primary); border-bottom-color: var(--border-color); } [data-theme="dark"] .table-modern td { border-bottom-color: #333; color: var(--text-primary); } [data-theme="dark"] .table-modern tbody tr:hover { background-color: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .table { color: var(--text-primary); } [data-theme="dark"] .table th { color: var(--text-secondary); border-bottom-color: var(--border-color); } [data-theme="dark"] .table td { border-bottom-color: #333; } [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.04); } /* Metric cards */ [data-theme="dark"] .metric-card { background: var(--bg-card); } [data-theme="dark"] .nps-display { background: var(--bg-card); } [data-theme="dark"] .nps-display h3 { color: var(--text-secondary); } /* Campaign cards */ [data-theme="dark"] .campaign-card { background: var(--bg-card); } [data-theme="dark"] .campaign-card-meta { border-top-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .page-header { border-bottom-color: var(--border-color); } [data-theme="dark"] .page-header h1 { color: var(--text-primary); } /* Forms */ [data-theme="dark"] .form-modern .form-label { color: var(--text-primary); } [data-theme="dark"] .form-modern .form-control, [data-theme="dark"] .form-modern .form-select { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .form-modern .form-control:focus, [data-theme="dark"] .form-modern .form-select:focus { border-color: var(--primary-color); background: var(--bg-input); color: var(--text-primary); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: var(--bg-input); color: var(--text-primary); border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.15); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-select:disabled { background: #1a1a1a; color: var(--text-disabled); } [data-theme="dark"] .form-check-label { color: var(--text-primary); } [data-theme="dark"] .form-text.text-muted { color: var(--text-secondary) !important; } /* Links */ [data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand) { color: var(--primary-light); } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):hover { color: var(--primary-color); } /* Headings */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text-primary); } /* Navbar (bg-white override for dark mode) */ [data-theme="dark"] .navbar.bg-white { background: var(--bg-nav) !important; } [data-theme="dark"] .navbar.navbar-light { background: var(--bg-nav) !important; } [data-theme="dark"] .navbar-brand { color: var(--text-primary) !important; } [data-theme="dark"] .navbar .nav-link { color: var(--text-primary) !important; } [data-theme="dark"] .navbar .nav-link:hover { color: var(--primary-light) !important; } /* Modals */ [data-theme="dark"] .modal-content { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .modal-header { background: #26282c; border-bottom-color: var(--border-color); } [data-theme="dark"] .modal-title { color: var(--text-primary); } [data-theme="dark"] .modal-body { color: var(--text-primary); } [data-theme="dark"] .modal-footer { border-top-color: var(--border-color); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Alerts */ [data-theme="dark"] .alert { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .alert-success { background: #1b3a1b; color: #a5d6a7; border-left-color: var(--success-color); } [data-theme="dark"] .alert-info { background: #1a2a3a; color: #90caf9; border-left-color: var(--primary-color); } [data-theme="dark"] .alert-warning { background: #3a2a1a; color: #ffcc80; border-left-color: var(--warning-color); } [data-theme="dark"] .alert-danger { background: #3a1a1a; color: #ef9a9a; border-left-color: var(--danger-color); } [data-theme="dark"] .alert-modern { background: var(--bg-card); } /* Buttons - keep modern buttons as they are but fix outline */ [data-theme="dark"] .btn-outline-modern, [data-theme="dark"] .btn-modern.btn-outline-secondary { background: var(--bg-card); border-color: #4a4f57; color: var(--text-primary); } [data-theme="dark"] .btn-outline-modern:hover, [data-theme="dark"] .btn-modern.btn-outline-secondary:hover { background: #2c2f34; border-color: #5b616b; color: var(--text-primary); } /* Soft warning/danger buttons in dark mode */ [data-theme="dark"] .btn-warning-modern { background: rgba(255, 167, 38, 0.12); border-color: rgba(255, 167, 38, 0.35); color: #ffc069; } [data-theme="dark"] .btn-warning-modern:hover { background: rgba(255, 167, 38, 0.22); border-color: rgba(255, 167, 38, 0.5); color: #ffd08a; } [data-theme="dark"] .btn-danger-modern { background: rgba(239, 83, 80, 0.12); border-color: rgba(239, 83, 80, 0.35); color: #f28b88; } [data-theme="dark"] .btn-danger-modern:hover { background: rgba(239, 83, 80, 0.22); border-color: rgba(239, 83, 80, 0.5); color: #f5a6a4; } /* Soft status badges in dark mode */ [data-theme="dark"] .badge-draft { background: rgba(160, 168, 180, 0.16); color: #b4bcc8; } [data-theme="dark"] .badge-active { background: rgba(102, 187, 106, 0.16); color: #8fd694; } [data-theme="dark"] .badge-closed { background: rgba(239, 83, 80, 0.16); color: #f28b88; } [data-theme="dark"] .badge-anonymized { background: rgba(159, 122, 234, 0.18); color: #bda5ee; } [data-theme="dark"] .badge-info { background: rgba(66, 165, 245, 0.16); color: #7ab8f5; } [data-theme="dark"] .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-color); } [data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); } [data-theme="dark"] .btn-link.nav-link { color: var(--text-primary) !important; } [data-theme="dark"] .btn-link.nav-link:hover { color: var(--primary-light) !important; } /* Footer */ [data-theme="dark"] .footer { background: #1a1a1a !important; border-top-color: var(--border-color); } [data-theme="dark"] .footer a { color: var(--text-secondary); } [data-theme="dark"] .footer a:hover { color: var(--primary-light); } [data-theme="dark"] .footer h6 { color: var(--text-primary); } [data-theme="dark"] hr { border-color: var(--border-color); } /* Text helpers */ [data-theme="dark"] .text-muted { color: var(--text-secondary) !important; } [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] .bg-white { background-color: var(--bg-card) !important; } /* Badges */ [data-theme="dark"] .badge.bg-success { background: #2e7d32 !important; } [data-theme="dark"] .badge.bg-secondary { background: #555 !important; } [data-theme="dark"] .badge.bg-danger { background: #c62828 !important; } [data-theme="dark"] .badge-yes { background: #1b3a1b; color: #a5d6a7; } [data-theme="dark"] .badge-no { background: #3a1a1a; color: #ef9a9a; } /* Survey page */ [data-theme="dark"] .survey-card { background: var(--bg-card); } [data-theme="dark"] .survey-question { color: var(--text-primary); } [data-theme="dark"] .rating-btn { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .rating-btn:hover { border-color: var(--primary-light); } [data-theme="dark"] .rating-btn:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(66, 165, 245, 0.4); } [data-theme="dark"] .rating-labels { color: var(--text-secondary); } /* Dropdown / lang switcher */ [data-theme="dark"] .lang-switcher-btn { border-color: var(--primary-light); color: var(--primary-light); background: rgba(0, 0, 0, 0.4); } [data-theme="dark"] .lang-switcher-btn:hover { background: rgba(66, 165, 245, 0.2); color: var(--primary-light); } [data-theme="dark"] .lang-switcher-btn.active { background: var(--primary-dark); color: white; border-color: var(--primary-dark); } /* Code blocks (API tokens etc.) */ [data-theme="dark"] code { background: #2a2a2a; color: #ce9178; } /* Table header sortable */ [data-theme="dark"] .th-sortable { color: var(--text-secondary); } /* Input groups */ [data-theme="dark"] .input-group .form-control { background: var(--bg-input); color: var(--text-primary); } [data-theme="dark"] .input-group-text { background: #2a2a2a; color: var(--text-primary); border-color: var(--border-color); } /* List groups */ [data-theme="dark"] .list-group-item { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); } /* Dropdown menu */ [data-theme="dark"] .dropdown-menu { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); } /* Pagination */ [data-theme="dark"] .page-link { background: var(--bg-card); border-color: var(--border-color); color: var(--primary-light); } [data-theme="dark"] .page-link:hover { background: var(--bg-hover); color: var(--primary-color); } [data-theme="dark"] .page-item.active .page-link { background: var(--primary-dark); border-color: var(--primary-dark); } /* Tabs / nav pills */ [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary); } [data-theme="dark"] .nav-tabs .nav-link.active { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); } /* Misc */ [data-theme="dark"] th { color: var(--text-secondary); } [data-theme="dark"] .text-body { color: var(--text-primary) !important; } [data-theme="dark"] .border-bottom { border-bottom-color: var(--border-color) !important; } [data-theme="dark"] .border-top { border-top-color: var(--border-color) !important; } [data-theme="dark"] .border { border-color: var(--border-color) !important; } [data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-sm) !important; } /* Toast / progress bar areas */ [data-theme="dark"] .progress { background: #2a2a2a; } [data-theme="dark"] .toast { background: var(--bg-card); color: var(--text-primary); } /* Trend chart tooltip in dark mode */ [data-theme="dark"] .trend-chart-tooltip { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .trend-chart-tooltip .tooltip-date { color: var(--text-primary); } [data-theme="dark"] .trend-empty-state { color: var(--text-secondary); } /* Dark mode toggle button styling */ .theme-toggle-btn { border: 1px solid var(--border-color); color: var(--text-primary); background: transparent; padding: 0.4rem 0.7rem; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; line-height: 1; } .theme-toggle-btn:hover { background: rgba(16, 24, 40, 0.05); border-color: #c1c8d4; } [data-theme="dark"] .theme-toggle-btn { border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--primary-light); } /* NPS Trend Chart - dark mode */ [data-theme="dark"] .trend-chart-container { background: transparent; } /* Comment Review Dashboard - dark mode */ [data-theme="dark"] .comment-text { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); }