/* ════════════════════════════════════════════════════════════════ TUTNECT — COMPLETE DARK THEME Place this file at: static/css/theme.css Link it in base.html AFTER styles.css Applied via [data-theme="dark"] on tag ════════════════════════════════════════════════════════════════ */ /* ── CSS Variables ─────────────────────────────────────────────── */ [data-theme="dark"] { --bg-primary: #0e1117; --bg-secondary: #161b26; --bg-card: #1c2133; --bg-hover: #232a3d; --bg-input: #161b26; --bg-sidebar: #13182a; --bg-navbar: #0e1117; --bg-dropdown: #1c2133; --bg-modal: #1c2133; --bg-offcanvas: #13182a; --text-primary: #e6eaf4; --text-secondary: #8b93ab; --text-muted: #555e7a; --text-link: #7b8cde; --border-color: #2a3149; --border-focus: #5c6bc0; --shadow-sm: 0 1px 4px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); color-scheme: dark; } /* ════════════════════════════════════════════════════════════════ BASE ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] body { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; } [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) !important; } [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] label { color: var(--text-secondary); } [data-theme="dark"] a { color: var(--text-link); } [data-theme="dark"] hr { border-color: var(--border-color) !important; opacity: 1; } [data-theme="dark"] small, [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] strong { color: var(--text-primary); } [data-theme="dark"] .tn-navbar-user:hover{ border-color: var(--border-color); background: var(--bg-input); box-shadow: 0 2px 10px rgba(15,93,139,.1); } [data-theme="dark"] .tn-nd-footer-btn{ background: var(--bg-input); } /* ════════════════════════════════════════════════════════════════ SCROLLBAR ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-primary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4468; } /* ════════════════════════════════════════════════════════════════ NAVBAR (.tn-navbar) ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .tn-navbar { background-color: var(--bg-navbar) !important; box-shadow: var(--shadow-sm) !important; } [data-theme="dark"] .tn-navbar-brand-name { color: var(--text-primary) !important; } [data-theme="dark"] .tn-nav-icon-btn { color: var(--text-secondary) !important; background: transparent !important; } [data-theme="dark"] .tn-nav-icon-btn:hover { color: white !important; background: var(--bg-hover) !important; } [data-theme="dark"] .tn-notify-badge { background: #5c6bc0 !important; color: #fff !important; } /* Navbar search */ [data-theme="dark"] .tn-navbar-search input { background: transparent; color: var(--text-primary); } [data-theme="dark"] .tn-navbar-search input::placeholder { color: var(--text-muted) !important; } [data-theme="dark"] .tn-navbar-search i { color: var(--text-muted) !important; } [data-theme="dark"] .tn-navbar-sep { background: var(--border-color) !important; } /* User dropdown */ [data-theme="dark"] .tn-user-dropdown, [data-theme="dark"] .dropdown-menu { background-color: var(--bg-dropdown) !important; border: none !important; box-shadow: var(--shadow-md) !important; } [data-theme="dark"] .tn-dropdown-profile { background: var(--bg-hover) !important; /* border-bottom: 1px solid var(--border-color) !important; */ } [data-theme="dark"] .tn-dropdown-profile strong { color: var(--text-primary) !important; } [data-theme="dark"] .tn-dropdown-profile small { color: var(--text-muted) !important; } [data-theme="dark"] .tn-dropdown-role-badge { background: var(--bg-hover) !important; color: #7b8cde !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .tn-dropdown-item { color: var(--text-secondary) !important; } [data-theme="dark"] .tn-dropdown-item:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .tn-dropdown-item-icon{ border:none; } [data-theme="dark"] .tn-dropdown-item-text:hover{ color:white; } [data-theme="dark"] .tn-dropdown-logout { color: #ef5350 !important; } [data-theme="dark"] .tn-dropdown-logout:hover { background: rgba(239,83,80,0.1) !important; } [data-theme="dark"] .tn-dropdown-divider { border-color: rgb(61, 61, 61) !important; background: rgb(61, 61, 61) !important; } [data-theme="dark"] .tn-dropdown-item span:hover{ color:white !important; } [data-theme="dark"] .tn-dropdown-item:hover .tn-dropdown-item-text, .tn-dropdown-item:hover .tn-dropdown-item-text > :first-child { color: white; } /* [data-theme="dark"] .tn-dropdown-item a:hover{ color:white; } */ /* Notification dropdown */ [data-theme="dark"] .tn-notify-dropdown { background: var(--bg-dropdown) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .tn-nd-header { background: var(--bg-hover) !important; border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] .tn-nd-header-title { color: var(--text-primary) !important; } [data-theme="dark"] .tn-nd-view-all { color: #7b8cde !important; } [data-theme="dark"] .tn-nd-divider { background: var(--border-color) !important; } [data-theme="dark"] .tn-nd-item { color: var(--text-secondary) !important; border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] .tn-nd-item:hover { background: var(--bg-hover) !important; } [data-theme="dark"] .tn-nd-item--unread { background: rgba(92,107,192,0.08) !important; } [data-theme="dark"] .tn-nd-message { color: var(--text-primary) !important; } [data-theme="dark"] .tn-nd-time { color: var(--text-muted) !important; } [data-theme="dark"] .tn-nd-new-badge { background: #5c6bc0 !important; color: #fff !important; } [data-theme="dark"] .tn-nd-footer { background: var(--bg-hover) !important; border-top: 1px solid var(--border-color) !important; } [data-theme="dark"] .tn-nd-footer-btn { color: var(--text-secondary) !important; } [data-theme="dark"] .tn-nd-footer-btn:hover { color: var(--text-primary) !important; } [data-theme="dark"] .tn-nd-empty { color: var(--text-muted) !important; } [data-theme="dark"] .tn-nd-loading span { color: var(--text-muted) !important; } /* =========================Search page from Navbar================== */ [data-theme="dark"] .tn-search-header{ background: var(--bg-input); } [data-theme="dark"] .tn-search-item{ background: var(--bg-card); border:none !important; } [data-theme="dark"] .tn-search-header-icon{ background: rgba(26, 198, 255, 0.15); color: #1AC6FF } /* ════════════════════════════════════════════════════════════════ MOBILE BOTTOM NAV ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .mobile-bottom-nav { background: var(--bg-navbar) !important; border-top: 1px solid var(--border-color) !important; box-shadow: 0 -2px 10px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .mobile-bottom-nav .nav-item { color: var(--text-muted) !important; } [data-theme="dark"] .mobile-bottom-nav .nav-item.active, [data-theme="dark"] .mobile-bottom-nav .nav-item:hover { color: #7b8cde !important; } [data-theme="dark"] .mobile-bottom-nav .nav-item span { color: inherit !important; } /* ════════════════════════════════════════════════════════════════ OFFCANVAS (mobile sidebar drawer) ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .offcanvas { background-color: var(--bg-offcanvas) !important; border-right: 1px solid var(--border-color) !important; } [data-theme="dark"] .offcanvas-header { border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] .btn-close { filter: invert(1) !important; } /* ════════════════════════════════════════════════════════════════ PROFILE SIDEBAR (profile_sidebar.html) ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .profile-sidebar, [data-theme="dark"] .left-sidebar, [data-theme="dark"] [class*="profile-sidebar"], [data-theme="dark"] .sidebar-card, [data-theme="dark"] .sidebar-widget { background: var(--bg-sidebar) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .sidebar-name, [data-theme="dark"] .sidebar-username, [data-theme="dark"] .profile-name { color: var(--text-primary) !important; } [data-theme="dark"] .sidebar-role, [data-theme="dark"] .sidebar-sub, [data-theme="dark"] .profile-sub { color: var(--text-muted) !important; } [data-theme="dark"] .sidebar-stat-val { color: var(--text-primary) !important; } [data-theme="dark"] .sidebar-stat-label { color: var(--text-muted) !important; } [data-theme="dark"] .sidebar-divider { border-color: var(--border-color) !important; } /* Sidebar nav links */ [data-theme="dark"] .sidebar-nav-link, [data-theme="dark"] .tn-nav-link, [data-theme="dark"] .profile-sidebar a { color: var(--text-secondary) !important; } [data-theme="dark"] .sidebar-nav-link:hover, [data-theme="dark"] .tn-nav-link:hover, [data-theme="dark"] .sidebar-nav-link.active, [data-theme="dark"] .tn-nav-link.active { background: var(--bg-hover) !important; color: #7b8cde !important; } [data-theme="dark"] .tn-rs-avatar{ border:none; } /* ════════════════════════════════════════════════════════════════ RIGHT SIDEBAR (right_sidebar.html) ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .right-sidebar, [data-theme="dark"] [class*="right-sidebar"], [data-theme="dark"] .suggested-card, [data-theme="dark"] .top-tutors-card, [data-theme="dark"] .widget-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .widget-title, [data-theme="dark"] .section-title, [data-theme="dark"] .suggested-title { color: var(--text-primary) !important; border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] .see-all-link, [data-theme="dark"] .see-all { color: #7b8cde !important; } /* Contact / tutor suggestion rows */ [data-theme="dark"] .suggestion-row, [data-theme="dark"] .contact-row, [data-theme="dark"] .tutor-row { border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] .suggestion-row:hover, [data-theme="dark"] .contact-row:hover, [data-theme="dark"] .tutor-row:hover { background: var(--bg-hover) !important; } [data-theme="dark"] .suggestion-name, [data-theme="dark"] .contact-name, [data-theme="dark"] .tutor-name { color: var(--text-primary) !important; } [data-theme="dark"] .suggestion-role, [data-theme="dark"] .contact-role, [data-theme="dark"] .tutor-role, [data-theme="dark"] .tutor-degree { color: var(--text-muted) !important; } /* ════════════════════════════════════════════════════════════════ BOOTSTRAP CARDS & GENERIC CARDS ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .card { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary); } [data-theme="dark"] .card-header { background-color: var(--bg-hover) !important; border-bottom: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .card-title { color: var(--text-primary) !important; } [data-theme="dark"] .card-text { color: var(--text-secondary) !important; } /* ════════════════════════════════════════════════════════════════ FORMS & INPUTS ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .stg-input { background-color: var(--bg-input) ; color: var(--text-primary) ; border-color: var(--border-color) ; } [data-theme="dark"] .stg-input:focus { border-color: var(--border-focus) !important; box-shadow: 0 0 0 3px rgba(92,107,192,0.18) !important; background-color: var(--bg-input) !important; color: var(--text-primary) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-muted) !important; } [data-theme="dark"] label, [data-theme="dark"] .form-label, [data-theme="dark"] .stg-label { color: var(--text-secondary) !important; } [data-theme="dark"] .form-text, [data-theme="dark"] .stg-hint { color: var(--text-muted) !important; } /* Select2 */ [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--bg-input) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .select2-container--default .select2-selection__rendered { color: var(--text-primary) !important; } [data-theme="dark"] .select2-dropdown { background-color: var(--bg-dropdown) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .select2-results__option { color: var(--text-secondary) !important; } [data-theme="dark"] .select2-results__option--highlighted { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .select2-search__field { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* ════════════════════════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .stg-btn--primary { background: var(--bg-input); border: 1.5px solid var(--border-color) !important ; border-left: none !important; color: #fff !important; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .stg-btn--primary:hover { background: var(--bg-navbar) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .btn-secondary { background: var(--bg-hover) ; border-color: var(--border-color) ; color: var(--text-secondary); } [data-theme="dark"] .btn-outline-primary { border-color: #5c6bc0 !important; color: #7b8cde !important; } [data-theme="dark"] .btn-outline-primary:hover { background-color: #5c6bc0 !important; color: #fff !important; } [data-theme="dark"] .btn-outline-secondary { border-color: var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .btn-danger, [data-theme="dark"] .stg-btn--danger { background-color: #c62828 !important; border-color: #c62828 !important; color: #fff !important; } [data-theme="dark"] .btn-light , .btn-dark, #submitPostBtn,#tagDoneBtn { background-color: var(--bg-card) ; border-color: var(--border-color) ; color: var(--text-primary) ; } [data-theme="dark"] .stg-btn--ghost { background: transparent !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .stg-btn--danger-outline { background: transparent !important; border-color: #c62828 !important; color: #ef5350 !important; } [data-theme="dark"] #createPostModal .panel:last-child, [data-theme="dark"] #createPostModal .panel:last-child .px-3.py-3 { background: var(--bg-card) !important; } [data-theme="dark"] .tagged-pill { background: var(--bg-input) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color); } [data-theme="dark"] #friendsList span { color: var(--muted-color) !important; } [data-theme="dark"] .friend-item { color: var(--text-primary) !important; } [data-theme="dark"] #tagDoneBtn { color: var(--primary-color) !important; background: transparent !important; } [data-theme="dark"] #tagDoneBtn-container { background: var(--bg-card) !important; } /* ════════════════════════════════════════════════════════════════ BOOTSTRAP MODALS ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .modal-content { background-color: var(--bg-modal) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary); } [data-theme="dark"] .modal-header { border-bottom: 1px solid var(--text-muted) !important; background: var(--bg-modal) !important; } [data-theme="dark"] .modal-footer { border-top: 1px solid var(--border-color) !important; background: var(--bg-hover) !important; } [data-theme="dark"] .modal-title { color: var(--text-primary) !important; } [data-theme="dark"] .modal-body { color: var(--text-secondary) !important; } [data-theme="dark"] .modal-backdrop { background-color: rgba(0,0,0,0.7) !important; } /* No Room Modal */ [data-theme="dark"] #noRoomModal .modal-content { background-color: var(--bg-modal) !important; } [data-theme="dark"] #noRoomModal h5 { color: var(--text-primary) !important; } /* ════════════════════════════════════════════════════════════════ SWEETALERT2 ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .swal2-popup { background: var(--bg-modal) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .swal2-title { color: var(--text-primary) !important; } [data-theme="dark"] .swal2-html-container, [data-theme="dark"] .swal2-content { color: var(--text-secondary) !important; } [data-theme="dark"] .swal2-html-container p { color: var(--text-secondary) !important; } [data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-textarea { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .swal2-input:focus { border-color: var(--border-focus) !important; box-shadow: 0 0 0 3px rgba(92,107,192,0.2) !important; } [data-theme="dark"] .swal2-validation-message { background: rgba(239,83,80,0.12) !important; color: #ef5350 !important; } [data-theme="dark"] .swal2-icon.swal2-warning { border-color: #f9a825 !important; color: #f9a825 !important; } [data-theme="dark"] .swal2-icon.swal2-error { border-color: #ef5350 !important; color: #ef5350 !important; } [data-theme="dark"] .swal2-timer-progress-bar { background: #5c6bc0 !important; } /* ════════════════════════════════════════════════════════════════ SETTINGS PAGE (stg-* classes) ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .stg-root { background: transparent !important; } [data-theme="dark"] .stg-page-title { color: var(--text-primary) !important; } [data-theme="dark"] .stg-page-sub { color: var(--text-secondary) !important; } [data-theme="dark"] .stg-back { color: var(--text-secondary) !important; background: var(--bg-hover) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .stg-back:hover { color: #7b8cde !important; background: var(--bg-card) !important; } /* Settings sidebar */ [data-theme="dark"] .stg-nav-item { color: var(--text-secondary) !important; } [data-theme="dark"] .stg-nav-item:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .stg-nav-item.active { background: var(--bg-hover) !important; color: #7b8cde !important; } [data-theme="dark"] .stg-nav-item--danger { color: #ef5350 !important; } [data-theme="dark"] .stg-nav-item--danger:hover, [data-theme="dark"] .stg-nav-item--danger.active { background: rgba(239,83,80,0.1) !important; color: #ef5350 !important; } [data-theme="dark"] .stg-nav-icon { background: var(--bg-card); } /* Settings panels */ [data-theme="dark"] .stg-panel { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .stg-panel-header { border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] .stg-panel-title { color: var(--text-primary) !important; } [data-theme="dark"] .stg-panel-sub { color: var(--text-secondary) !important; } [data-theme="dark"] .stg-panel-icon--blue { background: rgba(92,107,192,0.15) !important; color: #7b8cde !important; } [data-theme="dark"] .stg-panel-icon--green { background: rgba(38,166,154,0.15) !important; color: #4db6ac !important; } [data-theme="dark"] .stg-panel-icon--amber { background: rgba(249,168,37,0.15) !important; color: #ffd54f !important; } [data-theme="dark"] .stg-panel-icon--teal { background: rgba(0,188,212,0.15) !important; color: #4dd0e1 !important; } [data-theme="dark"] .stg-panel-icon--red { background: rgba(198,40,40,0.15) !important; color: #ef5350 !important; } /* Info strip */ [data-theme="dark"] .stg-info-strip { background: var(--bg-hover) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .stg-info-item { border-right: 1px solid var(--border-color) !important; } [data-theme="dark"] .stg-info-label { color: var(--text-muted) !important; } [data-theme="dark"] .stg-info-val { color: var(--text-primary) !important; } [data-theme="dark"] .stg-badge { background: rgba(92,107,192,0.15) !important; color: #7b8cde !important; border: 1px solid rgba(92,107,192,0.3) !important; } /* Notification toggles */ [data-theme="dark"] .stg-toggle-row { border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] .stg-toggle-row:hover { background: var(--bg-hover) !important; } [data-theme="dark"] .stg-toggle-title { color: var(--text-primary) !important; } [data-theme="dark"] .stg-toggle-desc { color: var(--text-muted) !important; } [data-theme="dark"] .stg-toggle-track { background: var(--border-color) !important; } /* Privacy */ [data-theme="dark"] .stg-privacy-row { border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] .stg-privacy-row:hover { background: var(--bg-hover) !important; } [data-theme="dark"] .stg-privacy-title { color: var(--text-primary) !important; } [data-theme="dark"] .stg-privacy-desc { color: var(--text-muted) !important; } [data-theme="dark"] .stg-privacy-badge--green { background: rgba(38,166,154,0.15) !important; color: #4db6ac !important; border: 1px solid rgba(38,166,154,0.3) !important; } [data-theme="dark"] .stg-privacy-badge--blue { background: rgba(92,107,192,0.15) !important; color: #7b8cde !important; border: 1px solid rgba(92,107,192,0.3) !important; } [data-theme="dark"] .stg-coming-soon { background: var(--bg-hover) !important; border: 1px dashed var(--border-color) !important; color: var(--text-muted) !important; } [data-theme="dark"] .stg-coming-soon p { color: var(--text-muted) !important; } /* Security / password */ [data-theme="dark"] .stg-strength-bar { background: var(--border-color) !important; } [data-theme="dark"] .stg-strength-label { color: var(--text-muted) !important; } [data-theme="dark"] .stg-req { color: var(--text-muted) !important; } [data-theme="dark"] .stg-req.ok { color: #4db6ac !important; } [data-theme="dark"] .stg-match-msg.ok { color: #4db6ac !important; } [data-theme="dark"] .stg-match-msg.err { color: #ef5350 !important; } [data-theme="dark"] .stg-input-wrap .stg-eye-btn { color: var(--text-muted) !important; background: transparent !important; } [data-theme="dark"] .stg-input-wrap .stg-eye-btn:hover { color: var(--text-secondary) !important; } /* Tips */ [data-theme="dark"] .stg-tips { background: var(--bg-hover) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .stg-tips-title { color: var(--text-secondary) !important; } [data-theme="dark"] .stg-tips li { color: var(--text-muted) !important; } /* Alerts */ [data-theme="dark"] .stg-alert--success { background: rgba(38,166,154,0.1) !important; color: #4db6ac !important; border: 1px solid rgba(38,166,154,0.3) !important; } [data-theme="dark"] .stg-alert--error { background: rgba(198,40,40,0.1) !important; color: #ef5350 !important; border: 1px solid rgba(198,40,40,0.3) !important; } /* Danger zone */ [data-theme="dark"] .stg-danger-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .stg-danger-card--hard { background: rgba(198,40,40,0.06) !important; border: 1px solid rgba(198,40,40,0.3) !important; } [data-theme="dark"] .stg-danger-title { color: var(--text-primary) !important; } [data-theme="dark"] .stg-danger-desc { color: var(--text-secondary) !important; } [data-theme="dark"] .stg-danger-desc strong { color: #ef5350 !important; } /* Settings modal */ [data-theme="dark"] .stg-modal-backdrop { background: rgba(0,0,0,0.7) !important; } [data-theme="dark"] .stg-modal { background: var(--bg-modal) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .stg-modal-title { color: var(--text-primary) !important; } [data-theme="dark"] .stg-modal-desc { color: var(--text-secondary) !important; } [data-theme="dark"] .stg-modal-desc strong { color: var(--text-primary) !important; } /* ════════════════════════════════════════════════════════════════ POST CARD (post_card.html — exact classes) ════════════════════════════════════════════════════════════════ */ /* Outer wrapper */ [data-theme="dark"] .card-body.post-card { background: var(--bg-card) !important; border-radius: 12px !important; } /* Post header */ [data-theme="dark"] .post-header { background: transparent !important; } [data-theme="dark"] .post-header i{ color:var(--text-secondary); } [data-theme="dark"] .post-options-toggle:hover{ background-color: var(--bg-input); color:var(--text-secondary); } /* Username / author link */ [data-theme="dark"] .username-link { color: var(--text-primary) !important; font-weight: 600; } [data-theme="dark"] .username-link:hover { color: #7b8cde !important; } /* Tagged friends text */ [data-theme="dark"] .tagged-text { color: var(--text-muted) !important; } [data-theme="dark"] .tagged-link, [data-theme="dark"] .tagged-more-link { color: #7b8cde !important; } /* Timestamp */ [data-theme="dark"] .post-timestamp { color: var(--text-muted) !important; font-size: 0.8rem; } /* 3-dots toggle */ [data-theme="dark"] .post-options-toggle { color: var(--text-muted) !important; } [data-theme="dark"] .post-options-toggle:hover { color: var(--text-primary) !important; } /* Post options dropdown */ [data-theme="dark"] .post-options-menu { background: var(--bg-dropdown) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .post-options-menu .dropdown-item { color: var(--text-secondary) !important; background: transparent !important; } [data-theme="dark"] .post-options-menu .dropdown-item:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .post-options-menu .dropdown-item.text-danger { color: #ef5350 !important; } [data-theme="dark"] .post-options-menu .dropdown-item.text-primary { color: #7b8cde !important; } /* Post text body */ [data-theme="dark"] .post-text { color: var(--text-secondary) !important; } /* Shared post embed */ [data-theme="dark"] .shared-post-embed { background: var(--bg-hover) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .shared-post-embed [style*="color: var(--text-color)"], [data-theme="dark"] .shared-post-embed p { color: var(--text-secondary) !important; } [data-theme="dark"] .share-btn{ background-color: var(--border-color); } [data-theme="dark"] .share-btn:hover{ background-color: var(--bg-input); color:white; } /* Action buttons row */ [data-theme="dark"] .action-buttons { border-top-color: var(--border-color) !important; } [data-theme="dark"] .action-btn { color: var(--text-muted) !important; background: transparent !important; } [data-theme="dark"] .action-btn:hover { color: var(--text-primary) !important; background: var(--bg-hover) !important; } /* Comments section (below post) */ [data-theme="dark"] #comments-section-{{ post_id }}, [data-theme="dark"] [id^="comments-section-"] { background: transparent !important; } [data-theme="dark"] .comments-list .d-flex { color: var(--text-secondary) !important; } [data-theme="dark"] .comment-body-text { color: var(--text-secondary) !important; } [data-theme="dark"] .comment-wrapper strong { color: var(--text-primary) !important; } /* Comment bubble (rounded p-2) */ [data-theme="dark"] .comment-wrapper .rounded.p-2 { background: var(--bg-hover) !important; color: var(--text-secondary) !important; } /* Comment edit form bubble */ [data-theme="dark"] .comment-edit-form .bg-light { background: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .comment-edit-form input { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .comment-edit-form strong { color: var(--text-primary) !important; } /* Comment add form input */ [data-theme="dark"] .comment-add-form .form-control { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .comment-add-form .form-control::placeholder { color: var(--text-muted) !important; } [data-theme="dark"] .comment-add-form .form-control.bg-light { background: var(--bg-input) !important; } /* Media comment bubble (in fullscreen modal) */ /* [data-theme="dark"] .media-comment-bubble { background: var(--bg-primary) !important; color: var(--text-primary) !important; } */ [data-theme="dark"] .comment-toggle-btn{ color:var(--text-secondary); background: none; } [data-theme="dark"] .comment-edit-btn:hover, .comment-delete-btn:hover{ background: var(--bg-input); } /* ── SHARE MODAL ── */ [data-theme="dark"] #shareModal-{{ post_id }} .modal-content, [data-theme="dark"] [id^="shareModal-"] .modal-content { background-color: var(--bg-modal); } [data-theme="dark"] [id^="shareModal-"] .modal-header { background: var(--bg-modal); border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] [id^="shareModal-"] .modal-title { color: var(--text-primary) !important; } [data-theme="dark"] [id^="shareModal-"] textarea { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] [id^="shareModal-"] textarea.bg-light { background: var(--bg-modal) !important; } [data-theme="dark"] [id^="shareModal-"] textarea::placeholder { color: var(--text-muted) !important; } [data-theme="dark"] .share-post-preview { background: var(--bg-hover) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .share-post-preview [style*="color: var(--text-color)"] { color: var(--text-secondary) !important; } /* ── REPORT MODAL ── */ [data-theme="dark"] [id^="reportModal-"] .modal-content { background: var(--bg-modal) !important; } [data-theme="dark"] [id^="reportModal-"] .border-bottom { background: var(--bg-hover) !important; border-color: var(--border-color) !important; } [data-theme="dark"] [id^="reportModal-"] h5 { color: var(--text-primary) !important; } [data-theme="dark"] [id^="reportModal-"] .form-label { color: var(--text-muted) !important; } [data-theme="dark"] [id^="reportModal-"] #reportReasonBtn, [data-theme="dark"] [id^="reportModal-"] [id^="reportReasonBtn"] { background: var(--bg-input) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="dark"] [id^="reportModal-"] .dropdown-menu { background: var(--bg-dropdown) !important; } [data-theme="dark"] [id^="reportModal-"] .dropdown-item { color: var(--text-secondary) !important; } [data-theme="dark"] [id^="reportModal-"] .dropdown-item:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] [id^="reportModal-"] textarea { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] [id^="reportModal-"] textarea::placeholder { color: var(--text-muted) !important; } [data-theme="dark"] [id^="reportModal-"] .modal-footer { background: var(--bg-hover) !important; } /* ── EDIT POST MODAL ── */ [data-theme="dark"] [id^="editPostModal"] .modal-content { background: var(--bg-modal) !important; } [data-theme="dark"] [id^="editPostModal"] .border-bottom { background: var(--bg-modal) !important; border-color: var(--border-color) !important; } [data-theme="dark"] [id^="editPostModal"] h5 { color: var(--text-primary) !important; } [data-theme="dark"] [id^="editPostModal"] textarea { background: var(--bg-card) !important; color: var(--text-primary) !important; } [data-theme="dark"] [id^="editPostModal"] textarea::placeholder { color: var(--text-muted) !important; } [data-theme="dark"] [id^="editPostModal"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] [id^="editPostModal"] .modal-footer { background: var(--bg-modal) !important; } /* ── DELETE POST MODAL ── */ [data-theme="dark"] [id^="deletePostModal"] .modal-content { background: var(--bg-modal) !important; } [data-theme="dark"] [id^="deletePostModal"] h5 { color: var(--text-primary) !important; } [data-theme="dark"] [id^="deletePostModal"] p { color: var(--text-secondary) !important; } /* ── TAGGED FRIENDS MODAL ── */ [data-theme="dark"] [id^="taggedFriendsModal-"] .modal-content { background: var(--bg-modal) !important; } [data-theme="dark"] [id^="taggedFriendsModal-"] .modal-title { color: var(--text-primary) !important; } [data-theme="dark"] [id^="taggedFriendsModal-"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] [id^="taggedFriendsModal-"] hr { border-color: var(--border-color) !important; } /* ── FULLSCREEN MEDIA MODAL ── */ [data-theme="dark"] [id^="mediaModal-"] .media-panel-action-btn { color: var(--text-secondary) !important; background: transparent !important; } [data-theme="dark"] [id^="mediaModal-"] .media-panel-action-btn:hover { color: var(--text-primary) !important; background: var(--bg-hover) !important; } [data-theme="dark"] [id^="mediaModal-"] .mobile-comments-header { color: var(--text-muted) !important; border-bottom: 1px solid #444 !important; } [data-theme="dark"] [id^="mediaModal-"] .form-control.bg-dark { background: #1a1d27 !important; border-color: #444 !important; color: #e8eaf0 !important; } /* Post user-info area */ [data-theme="dark"] .post-user-info { color: var(--text-secondary) !important; } /* user-avatar border */ [data-theme="dark"] .user-avatar { border: 2px solid var(--border-color) !important; } /* neutral-bg CSS var override for dark */ [data-theme="dark"] { --neutral-bg: var(--bg-hover) !important; --text-color: var(--text-primary) !important; --muted-color: var(--text-muted) !important; --border-color: #2a3149; } [data-theme="dark"] .pd-back:hover{ background: var(--bg-input); } [data-theme="dark"] .comment-edit-form button.btn:hover{ background-color: var(--bg-input); } /* =========================================================== Find Connection Page ============================================================*/ /* ══ DARK THEME ══ */ [data-theme="dark"] .tn-stat-tab--active{ background: var(--bg-input) !important; border:1px solid var(--border-color); color: #fff; box-shadow: 0 4px 14px rgba(61, 79, 214, 0.4); } [data-theme="dark"] .tn-stat-tab--active .tn-stat-label, [data-bs-theme="dark"] .tn-stat-tab--active .tn-stat-label, .dark .tn-stat-tab--active .tn-stat-label, [data-theme="dark"] .tn-stat-tab--active .tn-stat-num, [data-bs-theme="dark"] .tn-stat-tab--active .tn-stat-num, .dark .tn-stat-tab--active .tn-stat-num { color: #fff; } [data-theme="dark"] .tn-conn-search-bar{ background: var(--bg-input); } [data-theme="dark"] .tn-stat-tab,[data-theme="dark"] .tn-suggest-card{ background: var(--bg-hover); } [data-theme="dark"] .tn-stat-tab:hover{ background: var(--bg-input) !important; } [data-theme="dark"] .tn-action-btn{ background: var(--bg-input); border:1px solid var(--border-color); } [data-theme="dark"] .tn-card{ background: var(--bg-input); } [data-theme="dark"] .tn-section-hdr span, [data-bs-theme="dark"] .tn-section-hdr span, .dark .tn-section-hdr span { color: var(--text-secondary) !important; } /* ════════════════════════════════════════════════════════════════ PROFILE PAGE ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .pf-identity-bar, .profile-tabs{ background:var(--bg-card) !important; border-bottom:1px solid var(--text-muted); } [data-theme="dark"] .overview-box, .connection-card, .slider-btn, .ev-card__body, .connection-list-item, .tn-media-folders { background: var(--neutral-bg) !important; border:none !important; color:var(--text-secondary) !important; } [data-theme="dark"] .connect-btn, .ev-add-btn, .tn-folder-btn, .tn-media-folder, .tn-activity-card{ background:var(--bg-card) !important; border:none !important; color: var(--text-secondary); } [data-theme="dark"] .tn-media-card, .tn-activity-card{ border:none !important; border-radius: 0 !important; } [data-theme="dark"] #connectionSearch{ border:none !important; } [data-theme="dark"] .profile-tabs a{ color:var(--text-secondary); } [data-theme="dark"] .profile-tabs a.active{ color:white; border-color: white; } [data-theme="dark"] .profile-tabs a:hover{ background: var(--bg-input); color:white; } /* ════════════════════════════════════════════════════════════════ NOTIFICATIONS PAGE ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .tn-notify-page{ background: var(--neutral-bg); } [data-theme="dark"] .tn-tutor-header-icon { background: rgba(26, 198, 255, 0.15); color: #1AC6FF; } [data-theme="dark"] .tn-notify-item:hover{ background: var(--bg-card); } [data-theme="dark"] .tn-btn-icon{ background: var(--bg-card); color: var(--text-secondary); border: none; } [data-theme="dark"] .tn-notify-header-icon{ background: rgba(26, 198, 255, 0.15); color: #1AC6FF; } [data-theme="dark"] .tn-btn-outline-sm{ background: var(--bg-card); color:var(--text-secondary); } [data-theme="dark"] .tn-btn-outline-sm:hover{ background: var(--bg-input); color:var(--text-secondary); border:1px solid var(--border-color); } [data-theme="dark"] .tn-btn-icon:hover{ background: var(--bg-input); color:var(--text-secondary); } /* =========================================================== Tutor Profile ============================================================*/ [data-theme="dark"] .tn-tp-hero, [data-bs-theme="dark"] .tn-tp-hero, .dark .tn-tp-hero { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .tn-tp-name, [data-bs-theme="dark"] .tn-tp-name, .dark .tn-tp-name { color: var(--text-primary); } [data-theme="dark"] .tn-tp-role, [data-bs-theme="dark"] .tn-tp-role, .dark .tn-tp-role { color: var(--text-secondary); } [data-theme="dark"] .tn-tp-rating-val, [data-bs-theme="dark"] .tn-tp-rating-val, .dark .tn-tp-rating-val { color: var(--text-primary); } [data-theme="dark"] .tn-tp-review-cnt, [data-bs-theme="dark"] .tn-tp-review-cnt, .dark .tn-tp-review-cnt { color: var(--text-muted); } [data-theme="dark"] .tn-tp-meta-pill, [data-bs-theme="dark"] .tn-tp-meta-pill, .dark .tn-tp-meta-pill { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .tn-tp-verified, [data-bs-theme="dark"] .tn-tp-verified, .dark .tn-tp-verified { background: #0a2016; color: #4ade80; border-color: #1a4d30; } [data-theme="dark"] .tn-tp-available-pill, [data-bs-theme="dark"] .tn-tp-available-pill, .dark .tn-tp-available-pill { background: #0a2016; color: #4ade80; border-color: #1a4d30; } /* Stats row */ [data-theme="dark"] .tn-tp-stats-row, [data-bs-theme="dark"] .tn-tp-stats-row, .dark .tn-tp-stats-row { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .tn-tp-stat strong, [data-bs-theme="dark"] .tn-tp-stat strong, .dark .tn-tp-stat strong { color: #7b8cde; } [data-theme="dark"] .tn-tp-stat span, [data-bs-theme="dark"] .tn-tp-stat span, .dark .tn-tp-stat span { color: var(--text-muted); } [data-theme="dark"] .tn-tp-stat-sep, [data-bs-theme="dark"] .tn-tp-stat-sep, .dark .tn-tp-stat-sep { background: var(--border-color); } /* Sections */ [data-theme="dark"] .tn-tp-section, [data-bs-theme="dark"] .tn-tp-section, .dark .tn-tp-section { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .tn-tp-section-header, [data-bs-theme="dark"] .tn-tp-section-header, .dark .tn-tp-section-header { color: var(--text-primary); border-bottom-color: var(--border-color); } /* Bio */ [data-theme="dark"] .tn-tp-bio, [data-bs-theme="dark"] .tn-tp-bio, .dark .tn-tp-bio { background: var(--bg-secondary); } [data-theme="dark"] .tn-tp-bio-text, [data-bs-theme="dark"] .tn-tp-bio-text, .dark .tn-tp-bio-text { color: var(--text-secondary); } /* Skills */ [data-theme="dark"] .tn-tp-skill-tag, [data-bs-theme="dark"] .tn-tp-skill-tag, .dark .tn-tp-skill-tag { background: #0d1e30; color: #7b8cde; border-color: #1e3a55; } [data-theme="dark"] .tn-tp-skill-tag:hover, [data-bs-theme="dark"] .tn-tp-skill-tag:hover, .dark .tn-tp-skill-tag:hover { background: #3d4fd6; color: #fff; } /* Metrics */ [data-theme="dark"] .tn-tp-metric-left, [data-bs-theme="dark"] .tn-tp-metric-left, .dark .tn-tp-metric-left { color: var(--text-primary); } [data-theme="dark"] .tn-tp-progress-bar, [data-bs-theme="dark"] .tn-tp-progress-bar, .dark .tn-tp-progress-bar { background: var(--bg-secondary); } [data-theme="dark"] .tn-tp-metric-icon.primary, [data-bs-theme="dark"] .tn-tp-metric-icon.primary, .dark .tn-tp-metric-icon.primary { background: #0d1e30; color: #7b8cde; } [data-theme="dark"] .tn-tp-metric-icon.success, [data-bs-theme="dark"] .tn-tp-metric-icon.success, .dark .tn-tp-metric-icon.success { background: #0a2016; color: #4ade80; } [data-theme="dark"] .tn-tp-metric-icon.warning, [data-bs-theme="dark"] .tn-tp-metric-icon.warning, .dark .tn-tp-metric-icon.warning { background: #2a1a00; color: #f59e0b; } /* Rates */ [data-theme="dark"] .tn-tp-rate-card, [data-bs-theme="dark"] .tn-tp-rate-card, .dark .tn-tp-rate-card { background: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .tn-tp-rate-card--urgent, [data-bs-theme="dark"] .tn-tp-rate-card--urgent, .dark .tn-tp-rate-card--urgent { background: #1e1200; border-color: #4a3000; } [data-theme="dark"] .tn-tp-rate-label, [data-bs-theme="dark"] .tn-tp-rate-label, .dark .tn-tp-rate-label { color: var(--text-primary); } [data-theme="dark"] .tn-tp-rate-card small, [data-bs-theme="dark"] .tn-tp-rate-card small, .dark .tn-tp-rate-card small { color: var(--text-muted); } [data-theme="dark"] .tn-tp-rate-icon, [data-bs-theme="dark"] .tn-tp-rate-icon, .dark .tn-tp-rate-icon { background: #0d1e30; color: #7b8cde; } /* Activity */ [data-theme="dark"] .tn-tp-activity-item, [data-bs-theme="dark"] .tn-tp-activity-item, .dark .tn-tp-activity-item { border-bottom-color: var(--border-color); } [data-theme="dark"] .tn-tp-activity-body p, [data-bs-theme="dark"] .tn-tp-activity-body p, .dark .tn-tp-activity-body p { color: var(--text-primary); } [data-theme="dark"] .tn-tp-activity-body small, [data-bs-theme="dark"] .tn-tp-activity-body small, .dark .tn-tp-activity-body small { color: var(--text-muted); } [data-theme="dark"] .tn-tp-activity-empty, [data-bs-theme="dark"] .tn-tp-activity-empty, .dark .tn-tp-activity-empty { color: var(--text-muted); } /* Reviews */ [data-theme="dark"] .tn-tp-review, [data-bs-theme="dark"] .tn-tp-review, .dark .tn-tp-review { border-bottom-color: var(--border-color); } [data-theme="dark"] .tn-tp-review-name, [data-bs-theme="dark"] .tn-tp-review-name, .dark .tn-tp-review-name { color: var(--text-primary); } [data-theme="dark"] .tn-tp-review-comment, [data-bs-theme="dark"] .tn-tp-review-comment, .dark .tn-tp-review-comment { color: var(--text-secondary); } [data-theme="dark"] .tn-tp-review-time, [data-bs-theme="dark"] .tn-tp-review-time, .dark .tn-tp-review-time { color: var(--text-muted); } [data-theme="dark"] .tn-tp-review-avatar, [data-bs-theme="dark"] .tn-tp-review-avatar, .dark .tn-tp-review-avatar { border-color: var(--border-color); } [data-theme="dark"] .tn-tp-review-badge, [data-bs-theme="dark"] .tn-tp-review-badge, .dark .tn-tp-review-badge { background: #0d1e30; color: #7b8cde; } [data-theme="dark"] .tn-tp-stars .bi-star, [data-bs-theme="dark"] .tn-tp-stars .bi-star, .dark .tn-tp-stars .bi-star { color: #3a3f52; } /* Sidebar */ [data-theme="dark"] .tn-tp-sidebar-card, [data-bs-theme="dark"] .tn-tp-sidebar-card, .dark .tn-tp-sidebar-card { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .tn-tp-sidebar-title, [data-bs-theme="dark"] .tn-tp-sidebar-title, .dark .tn-tp-sidebar-title { color: var(--text-primary); border-bottom-color: var(--border-color); } [data-theme="dark"] .tn-tp-info-list small, [data-bs-theme="dark"] .tn-tp-info-list small, .dark .tn-tp-info-list small { color: var(--text-muted); } [data-theme="dark"] .tn-tp-info-list strong, [data-bs-theme="dark"] .tn-tp-info-list strong, .dark .tn-tp-info-list strong { color: var(--text-primary); } [data-theme="dark"] .tn-tp-info-icon, [data-bs-theme="dark"] .tn-tp-info-icon, .dark .tn-tp-info-icon { background: #0d1e30; color: #7b8cde; } /* Action buttons */ [data-theme="dark"] .tn-tp-action-btn.outline, [data-bs-theme="dark"] .tn-tp-action-btn.outline, .dark .tn-tp-action-btn.outline { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .tn-tp-action-btn.outline:hover, [data-bs-theme="dark"] .tn-tp-action-btn.outline:hover, .dark .tn-tp-action-btn.outline:hover { border-color: var(--border-focus); color: #7b8cde; } [data-theme="dark"] .tn-tp-action-btn.review, [data-bs-theme="dark"] .tn-tp-action-btn.review, .dark .tn-tp-action-btn.review { background: #2a1a00; border-color: #4a3000; color: #f59e0b; } /* Like button */ [data-theme="dark"] .tn-tp-like-btn, [data-bs-theme="dark"] .tn-tp-like-btn, .dark .tn-tp-like-btn { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .tn-tp-like-btn:hover, [data-bs-theme="dark"] .tn-tp-like-btn:hover, .dark .tn-tp-like-btn:hover { background: #2a0f14; border-color: #f43f5e; color: #f43f5e; } [data-theme="dark"] .tn-tp-like-btn.liked, [data-bs-theme="dark"] .tn-tp-like-btn.liked, .dark .tn-tp-like-btn.liked { background: #2a0f14; border-color: #f43f5e; color: #f43f5e; } /* Modal */ [data-theme="dark"] .tn-tp-modal, [data-bs-theme="dark"] .tn-tp-modal, .dark .tn-tp-modal { background: var(--bg-modal, var(--bg-card)) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .tn-tp-modal-header, [data-bs-theme="dark"] .tn-tp-modal-header, .dark .tn-tp-modal-header { border-bottom-color: var(--border-color); } [data-theme="dark"] .tn-tp-modal-title, [data-bs-theme="dark"] .tn-tp-modal-title, .dark .tn-tp-modal-title { color: var(--text-primary); } [data-theme="dark"] .tn-tp-modal-close, [data-bs-theme="dark"] .tn-tp-modal-close, .dark .tn-tp-modal-close { background: var(--bg-secondary); color: var(--text-muted); } [data-theme="dark"] .tn-tp-star-picker label, [data-theme="dark"] .tn-tp-review-field label, [data-bs-theme="dark"] .tn-tp-star-picker label, [data-bs-theme="dark"] .tn-tp-review-field label, .dark .tn-tp-star-picker label, .dark .tn-tp-review-field label { color: var(--text-muted); } [data-theme="dark"] .tn-tp-review-field textarea, [data-bs-theme="dark"] .tn-tp-review-field textarea, .dark .tn-tp-review-field textarea { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .tn-tp-review-field textarea:focus, [data-bs-theme="dark"] .tn-tp-review-field textarea:focus, .dark .tn-tp-review-field textarea:focus { background: var(--bg-secondary); border-color: var(--border-focus); } [data-theme="dark"] .tn-tp-modal-footer, [data-bs-theme="dark"] .tn-tp-modal-footer, .dark .tn-tp-modal-footer { border-top-color: var(--border-color); } [data-theme="dark"] .tn-tp-modal-cancel, [data-bs-theme="dark"] .tn-tp-modal-cancel, .dark .tn-tp-modal-cancel { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .tn-tp-hero-actions-mobile, [data-bs-theme="dark"] .tn-tp-hero-actions-mobile, .dark .tn-tp-hero-actions-mobile { border-top-color: var(--border-color); } [data-theme="dark"] .tn-tp-avatar, [data-bs-theme="dark"] .tn-tp-avatar, .dark .tn-tp-avatar { border-color: var(--bg-card); } /* =========================================================== */ Find Tutor Page /*=========================================================== */ /* ── DARK THEME ── */ [data-theme="dark"] .tn-tutor-title { color: #f0f4f8; } [data-theme="dark"] .tn-tutor-sub { color: rgba(255,255,255,0.5); } [data-theme="dark"] .tn-tutor-search { border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .tn-tutor-search input { background: transparent; color: #e8edf2; } [data-theme="dark"] .tn-tutor-search input::placeholder { color: rgba(255,255,255,0.35); } [data-theme="dark"] .tn-tutor-search i { color: rgba(255,255,255,0.4); } [data-theme="dark"] .tn-filter-chip { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.65); } [data-theme="dark"] .tn-filter-chip:hover { background: rgba(26, 198, 255, 0.15); border-color: #1AC6FF; color: #1AC6FF; } [data-theme="dark"] .tn-filter-chip.active { background: linear-gradient(135deg, #0F5D8B, #1AC6FF); border-color: transparent; color: #fff; } [data-theme="dark"] .tn-tutor-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .tn-tutor-page { background: var(--bg-card) !important; } [data-theme="dark"] .tn-tutor-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(26,198,255,0.3); } [data-theme="dark"] .tn-tutor-name { color: #e8edf2; } [data-theme="dark"] .tn-tutor-name:hover { color: #1AC6FF; } [data-theme="dark"] .tn-tutor-username { color: rgba(255,255,255,0.45); } [data-theme="dark"] .tn-tutor-subject-line { color: rgba(255,255,255,0.55); } [data-theme="dark"] .tn-tutor-detail-row { color: rgba(255,255,255,0.6); } [data-theme="dark"] .tn-tutor-detail-row strong { color: #e8edf2; } [data-theme="dark"] .tn-tutor-detail-row i { color: #1AC6FF; } [data-theme="dark"] .tn-tutor-sep { border-color: rgba(255,255,255,0.07); } [data-theme="dark"] .tn-tutor-price { color: rgba(255,255,255,0.75); } [data-theme="dark"] .tn-tutor-price strong { color: #1AC6FF; } [data-theme="dark"] .tn-tutor-location { color: rgba(255,255,255,0.45); } [data-theme="dark"] .tn-tutor-tag { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.1); } [data-theme="dark"] .tn-tutor-tag--more { background: rgba(26,198,255,0.12); color: #1AC6FF; border-color: rgba(26,198,255,0.2); } [data-theme="dark"] .tn-tutor-more-btn { color: rgba(255,255,255,0.4); } [data-theme="dark"] .tn-tutor-more-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); } [data-theme="dark"] .tn-verified-badge { background: rgba(26,198,255,0.12); color: #1AC6FF; border-color: rgba(26,198,255,0.25); } [data-theme="dark"] .tn-tutor-stars i { color: #f59e0b; } [data-theme="dark"] .tn-tutor-review-count { color: rgba(255,255,255,0.4); } [data-theme="dark"] .tn-empty-state { color: rgba(255,255,255,0.4); } [data-theme="dark"] .tn-empty-state i { color: rgba(255,255,255,0.2); } /* ════════════════════════════════════════════════════════════════ HOMEWORK PAGE ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .homework-nav{ background: var(--bg-card) !important; } [data-theme="dark"] .homework-container{ background: var(--neutral-bg) !important; } [data-theme="dark"] .search-input-wrapper{ background-color: var(--bg-input); } [data-theme="dark"] .search-input:focus{ outline:none; border:none; } [data-theme="dark"] .search-container{ background: var(--bg-card) !important; border:none !important; } [data-theme="dark"] .homework-card-modern { background: var(--bg-card) !important; } [data-theme="dark"] .search-suggestions button, .hw-subject{ background: var(--neutral-bg) !important; color:white !important; border: 1px solid var(--neutral-bg) ; } [data-theme="dark"] .search-suggestions button:hover{ background: var(--primary-light) ; border:1px solid var(--primary-color); } [data-theme="dark"] .hw-title, [data-theme="dark"] .homework-title { color: var(--text-primary) !important; } [data-theme="dark"] .hw-desc, [data-theme="dark"] .homework-desc { color: var(--text-secondary) !important; } [data-theme="dark"] .hw-meta, [data-theme="dark"] .homework-meta { color: var(--text-muted) !important; border-top: 1px solid var(--border-color) !important; } [data-theme="dark"] .tn-tab-header{ background: var(--neutral-bg) !important; } [data-theme="dark"] .tn-connection-container, .tn-btn-danger{ background: var(--neutral-bg); } [data-theme="dark"] .tn-btn-danger{ color:var(--text-secondary); } [data-theme="dark"] .tn-btn-danger:hover{ color:white; } [data-theme="dark"] .tn-connection-card, .tn-empty-state{ background: var(--bg-card); } [data-theme="dark"] .tn-connection-card{ border:none; } [data-theme="dark"] .tn-connection-title > i, [data-theme="dark"] .header-wallet-icon{ background: rgba(26, 198, 255, 0.15); color: #1AC6FF; } [data-theme="dark"] .posthomework-header, [data-theme="dark"] .input-group-text, [data-theme="dark"] .upload-box, [data-theme="dark"] .tn-tab-btn.active { background: var(--bg-input) ; color:white ; } [data-theme="dark"] .tn-tab-btn:hover{ background: var(--bg-input); color:white; } [data-theme="dark"] .subject-pill, .budget-pill, .upload-btn{ background-color: var(--bg-input) !important; border: 0.5px solid rgb(94, 94, 94); } [data-theme="dark"] .homework-card{ border:none; border-radius: 14px !important; } /* ============================================================ CHAT PAGE — DARK THEME ============================================================ */ /* ── Chat List Column (left panel) ── */ [data-theme="dark"] #chat-list-column { background: radial-gradient(ellipse at 80% 0%, #0a2e40 0%, #061420 40%, #030c18 100%) !important; border-right: 1px solid var(--border-color) !important; } [data-theme="dark"] .search-wrapper-chat{ background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(18, 120, 176, 0.25) !; color: #fff; border-radius: 20px; } /* ── Chat List Header (the blue gradient bar) ── */ [data-theme="dark"] .chat-header-fixed{ background: radial-gradient(ellipse at 80% 0%, #0e4f6b 0%, #082033 50%, #040d18 100%) !important; border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] .chat-header-fixed .fw-bold { color: var(--text-primary) !important; } /* ── Search input in chat list ── */ [data-theme="dark"] .search-input-chat { background: transparent !important; } [data-theme="dark"] .search-icon-chat { color: var(--text-muted) !important; } /* ── Chat list items ── */ [data-theme="dark"] .chat-list-item { background: transparent !important; border-bottom: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .chat-list-item:hover, [data-theme="dark"] .chat-list-item.active { background: rgba(14, 79, 107, 0.45); border-left: 3px solid #1278B0; border-radius: 10px; } [data-theme="dark"] .chat-list-item .fw-semibold { color: var(--text-primary) !important; } [data-theme="dark"] .chat-list-item .text-muted, [data-theme="dark"] .chat-list-item .chat-preview { color: var(--text-muted) !important; } [data-theme="dark"] .chat-list-item .chat-time-preview { color: var(--text-muted) !important; } /* ── Unread badge in chat list ── */ [data-theme="dark"] .chat-list-item .badge { background: linear-gradient(135deg, var(--primary-mid), var(--primary-color)) !important; } /* ── Chat room column (right panel) ── */ [data-theme="dark"] #chat-room-column { background: var(--bg-primary) !important; } /* ── Chat messages area ── */ [data-theme="dark"] #chat-messages { background: var(--bg-primary) !important; } /* ── Chat header (the sticky top bar when room is open) ── */ [data-theme="dark"] #chat-header { background: radial-gradient(ellipse at 30% 30%, #0e4f6b 0%, #082033 50%, #040d18 100%) !important; border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] #chat-header h6, [data-theme="dark"] #chat-header small, [data-theme="dark"] #chat-header span { color: var(--text-primary) !important; } /* ── Chat bubbles ── */ [data-theme="dark"] .bubble-own { background: #0e4f6b; border: 1px solid rgba(26, 198, 255, 0.15); color: #fff !important; } [data-theme="dark"] .bubble-other { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .chat-bubble--highlight { background-color: #1a3a5c !important; color: #e0f0ff !important ; border-left: 3px solid #38bdf8 !important; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3) !important; } [data-theme="dark"] #btn-request-payment, .payment-request-bubble .btn{ background: var(--bg-input); color: var(--text-secondary); } [data-theme="dark"] .payment-request-bubble .btn:hover{ color:var(--text-primary); } [data-theme="dark"] #chat-search-row{ background: var(--bg-card); } [data-theme="dark"] .chat-search-bar{ background: var(--bg-input); } /* */ [data-theme="dark"] .summary-modal-header{ background: var(--bg-hover) !important; } [data-theme="dark"] .summary-detail{ background: var(--bg-hover) !important; } /* ════════════════════════════════════════════════════════════════ DISPUTES PAGE ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .dispute-card, [data-theme="dark"] .dispute-item { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .dispute-title { color: var(--text-primary) !important; } [data-theme="dark"] .dispute-desc { color: var(--text-secondary) !important; } [data-theme="dark"] .dispute-meta { color: var(--text-muted) !important; border-top: 1px solid var(--border-color) !important; } /* ════════════════════════════════════════════════════════════════ PAYMENT / WALLET PAGE ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .wallet-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .transaction-card-header{ background-color: var(--bg-hover); } [data-theme="dark"] .transaction-container{ background-color: var(--bg-card); } [data-theme="dark"] .dropdown-options{ background: var(--bg-input); } [data-theme="dark"] .dropdown-selected{ background-color: var(--bg-input); } [data-theme="dark"] .transaction-item { background: var(--bg-input); border: none !important; } [data-theme="dark"] .transaction-item:hover { background: var(--bg-hover) !important; } /* ====================================================== Transaction History Details Modal =======================================================*/ [data-theme="dark"] .txn-modal-header,[data-theme="dark"] .btn-txn-dispute{ background: var(--bg-input); border:none; } [data-theme="dark"] .btn-txn-dispute:hover{ background: var(--bg-input); color:var(--text-secondary); transition: 0.4s ease-in; } [data-theme="dark"] .txn-modal-body, .txn-modal-actions{ background: var(--bg-card); } [data-theme="dark"] .txn-modal-row{ border-bottom: 1px solid var(--border-color); } [data-theme="dark"] .txn-modal-val{ color:var(--text-secondary); } /* ════════════════════════════════════════════════════════════════ BOOKSEARCH PAGE ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .book-card, [data-theme="dark"] .search-result-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .book-title, [data-theme="dark"] .result-title { color: var(--text-primary) !important; } [data-theme="dark"] .book-author, [data-theme="dark"] .result-sub { color: var(--text-muted) !important; } /* ════════════════════════════════════════════════════════════════ COMING SOON PAGE ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .coming-soon-wrapper, [data-theme="dark"] .coming-soon-card { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } [data-theme="dark"] .coming-soon-title { color: var(--text-primary) !important; } [data-theme="dark"] .coming-soon-sub { color: var(--text-secondary) !important; } /* ════════════════════════════════════════════════════════════════ BOOTSTRAP UTILITIES OVERRIDE ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background-color: var(--bg-input) !important; } [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; } [data-theme="dark"] .border { border-color: var(--border-color) !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"] .shadow, [data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-md) !important; } [data-theme="dark"] .rounded, [data-theme="dark"] .rounded-3, [data-theme="dark"] .rounded-4 { border-color: var(--border-color); } /* List groups */ [data-theme="dark"] .list-group-item { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .list-group-item:hover { background-color: var(--bg-hover) !important; } [data-theme="dark"] .list-group-item.active { background-color: #5c6bc0 !important; border-color: #5c6bc0 !important; } /* Tables */ [data-theme="dark"] .table { color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .table th { background: var(--bg-hover) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .table td { border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: rgba(255,255,255,0.02) !important; } [data-theme="dark"] .table-hover > tbody > tr:hover > td { background-color: var(--bg-hover) !important; } /* Badges */ [data-theme="dark"] .badge.bg-primary { background-color: #5c6bc0 !important; } [data-theme="dark"] .badge.bg-secondary { background-color: var(--bg-hover) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .badge.bg-success { background-color: #2e7d52 !important; } [data-theme="dark"] .badge.bg-danger { background-color: #c62828 !important; } [data-theme="dark"] .badge.bg-warning { background-color: #f9a825 !important; color: #111 !important; } [data-theme="dark"] .badge.bg-light { background-color: var(--bg-hover) !important; color: var(--text-secondary) !important; } /* Pagination */ [data-theme="dark"] .page-link { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } [data-theme="dark"] .page-link:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .page-item.active .page-link { background-color: #5c6bc0 !important; border-color: #5c6bc0 !important; color: #fff !important; } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--bg-secondary) !important; color: var(--text-muted) !important; } /* Alerts */ [data-theme="dark"] .alert-success { background-color: rgba(46,125,82,0.15) !important; border-color: rgba(46,125,82,0.4) !important; color: #81c784 !important; } [data-theme="dark"] .alert-danger { background-color: rgba(198,40,40,0.15) !important; border-color: rgba(198,40,40,0.4) !important; color: #ef9a9a !important; } [data-theme="dark"] .alert-warning { background-color: rgba(249,168,37,0.12) !important; border-color: rgba(249,168,37,0.4) !important; color: #ffe082 !important; } [data-theme="dark"] .alert-info { background-color: rgba(2,136,209,0.12) !important; border-color: rgba(2,136,209,0.4) !important; color: #81d4fa !important; } /* Tabs */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--border-color) !important; } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary) !important; } [data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--bg-card) !important; border-color: var(--border-color) var(--border-color) var(--bg-card) !important; color: #7b8cde !important; } [data-theme="dark"] .tab-content { background: var(--bg-card) !important; border-top: none !important; } [data-theme="dark"] .detail-box{ border:none; } [data-theme="dark"] .detail-box:hover{ background: var(--bg-input); } [data-theme="dark"] .pi-edit-btn{ background: var(--bg-input); } /* Pills */ [data-theme="dark"] .nav-pills .nav-link { color: var(--text-secondary) !important; } [data-theme="dark"] .nav-pills .nav-link.active { background-color: #5c6bc0 !important; color: #fff !important; } /* Accordion */ [data-theme="dark"] .accordion-item { background-color: var(--bg-card) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .accordion-button { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: rgba(92,107,192,0.12) !important; color: #7b8cde !important; } [data-theme="dark"] .accordion-button::after { filter: invert(1); } [data-theme="dark"] .accordion-body { background-color: var(--bg-card) !important; color: var(--text-secondary) !important; } /* Tooltips */ [data-theme="dark"] .tooltip-inner { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; } /* Progress bars */ [data-theme="dark"] .progress { background-color: var(--border-color) !important; } /* ════════════════════════════════════════════════════════════════ THEME TOGGLE SWITCH (in settings) ════════════════════════════════════════════════════════════════ */ .stg-theme-toggle-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; } .stg-theme-option { font-size: 0.88rem; font-weight: 500; color: var(--text-secondary, #666); display: flex; align-items: center; gap: 5px; } .stg-theme-switch { position: relative; display: inline-block; cursor: pointer; } .stg-theme-switch input { display: none; } .stg-theme-track { display: block; width: 52px; height: 28px; background: #cbd5e1; border-radius: 999px; position: relative; transition: background 0.3s; } .stg-theme-switch input:checked ~ .stg-theme-track { background: #5c6bc0; } .stg-theme-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: transform 0.3s cubic-bezier(.4,0,.2,1); } .stg-theme-switch input:checked ~ .stg-theme-track .stg-theme-thumb { transform: translateX(24px); } [data-theme="dark"] .stg-theme-track { background: var(--border-color) !important; } [data-theme="dark"] .stg-theme-option { color: var(--text-secondary) !important; } /* ════════════════════════════════════════════════════════════════ PROFILE SIDEBAR (tn-sidebar-* classes — profile_sidebar.html) ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .tn-sidebar-card { background: var(--bg-sidebar) !important; } [data-theme="dark"] .tn-cover-overlay { background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6)) !important; } [data-theme="dark"] .tn-sidebar-name { color: var(--text-primary) !important; } [data-theme="dark"] .tn-sidebar-bio { color: var(--text-muted) !important; } [data-theme="dark"] .tn-sidebar-divider { height:0.1px; border-color: var(--border-color) !important; background: var(--border-color) !important; } /* Sidebar nav items */ [data-theme="dark"] .tn-nav-item { color: var(--text-secondary) !important; } [data-theme="dark"] .tn-nav-item:hover, [data-theme="dark"] .tn-nav-item:focus { background: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .tn-nav-item.active { background: rgba(92,107,192,0.12) !important; color: #7b8cde !important; } [data-theme="dark"] .tn-nav-toggle[aria-expanded="true"]{ background: var(--bg-card); } [data-theme="dark"] .tn-nav-icon { color: inherit !important; } [data-theme="dark"] .tn-nav-label { color: inherit !important; } [data-theme="dark"] .tn-nav-arrow { color: var(--text-muted) !important; } /* Collapsed sub-menus */ [data-theme="dark"] .tn-nav-sub { background: var(--bg-hover) !important; border-left: 2px solid var(--border-color) !important; } [data-theme="dark"] .tn-nav-sub li a { color: var(--text-secondary) !important; } [data-theme="dark"] .tn-nav-sub li a:hover { color: var(--text-primary) !important; background: rgba(255,255,255,0.04) !important; } /* Footer inside sidebar */ [data-theme="dark"] .tn-sidebar-footer { background: var(--bg-sidebar) !important; } [data-theme="dark"] .tn-footer-brand p, [data-theme="dark"] .tn-footer-copy, [data-theme="dark"] .tn-footer-tagline { color: var(--text-muted) !important; } [data-theme="dark"] .tn-footer-copy strong { color: var(--text-secondary) !important; } [data-theme="dark"] .tn-footer-divider { background: var(--border-color) !important; } [data-theme="dark"] .tn-footer-links a { color: var(--text-muted) !important; } [data-theme="dark"] .tn-footer-links a:hover { color: var(--text-secondary) !important; } [data-theme="dark"] .tn-footer-status { color: var(--text-muted) !important; } /* ════════════════════════════════════════════════════════════════ RIGHT SIDEBAR (tn-rs-* classes — right_sidebar.html) ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .tn-rs-card { background: var(--bg-card) !important; /* border: 1px solid var(--border-color) !important; */ border:none !important; } [data-theme="dark"] .tn-rs-header { border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] .tn-rs-header-icon { background: rgba(92,107,192,0.15) !important; color: #7b8cde !important; } [data-theme="dark"] .tn-rs-header-title { color: var(--text-primary) !important; } [data-theme="dark"] .tn-rs-header-link { color: #7b8cde !important; } [data-theme="dark"] .tn-rs-header-link:hover { color: #9fa8da !important; } /* User rows in right sidebar */ [data-theme="dark"] .tn-rs-user { color: var(--text-secondary) !important; } [data-theme="dark"] .tn-rs-user:hover { background: var(--bg-hover) !important; } [data-theme="dark"] .tn-rs-user-name { color: var(--text-primary) !important; } [data-theme="dark"] .tn-rs-user-meta { color: var(--text-muted) !important; } [data-theme="dark"] .tn-rs-rating { color: #ffd54f !important; } [data-theme="dark"] .tn-rs-empty { color: var(--text-muted) !important; } /* ═══════════════════════════════════════════════ CREATE POST — dark theme (matched to actual HTML) ═══════════════════════════════════════════════ */ [data-theme="dark"] .card-body{ background: var(--bg-card); } /* ── Dark mode ── */ [data-theme="dark"] #createPostModal .modal-content, [data-theme="dark"] #createPostModal .panel, [data-theme="dark"] #slideTrack { background-color: var(--bg-card) !important; } [data-theme="dark"] .Post-container { background: var(--bg-card) !important; border-bottom: 1px solid var(--border-color) !important; } [data-theme="dark"] #postTextarea { background: var(--bg-card) !important; color: var(--text-primary) !important; } [data-theme="dark"] #postTextarea::placeholder { color: var(--muted-color) !important; } [data-theme="dark"] .post-input-btn { background: var(--bg-input) ; color: var(--muted-color) ; } [data-theme="dark"] .post-input-btn:hover{ background: var(--bg-navbar); color:var(--text-secondary); transition: 0.4s ease-in; } [data-theme="dark"] .add-post-div { border-color: var(--border-color) !important; color: var(--text-primary) !important; } [data-theme="dark"] .createPost-footer { background: var(--bg-card) !important; } [data-theme="dark"] .friend-item:hover { background: var(--bg-input) !important; } [data-theme="dark"] #friendSearch { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] #taggedContainer .border { border-color: var(--border-color) !important; } [data-theme="dark"] .post-tool-btn { background: var(--bg-card) !important; } [data-theme="dark"] #backBtn { background: var(--bg-input) !important; } [data-theme="dark"] [id^="reportModal"] .modal-body{ background: var(--neutral-bg); } [data-theme="dark"] .editor-header{ background: var(--bg-hover); } [data-theme="dark"] .editor-sidebar i{ background: var(--bg-input); color:var(--text-secondary); } [data-theme="dark"] .editor-sidebar button.active{ background: var(--bg-input); color:var(--text-secondary); } [data-theme="dark"] .editor-body, [data-theme="dark"] .sidebar{ background: var(--neutral-bg); } [data-theme="dark"] .editor-sidebar button{ color:var(--text-secondary) } [data-theme="dark"] .editor-sidebar button:hover{ background:var(--bg-input) ; color:var(--text-secondary) } [data-theme="dark"] .editor-footer-btn{ background: var(--bg-card); } [data-theme="dark"] .editor-footer-btn:hover{ background: var(--bg-input); } [data-theme="dark"] #createPostModal .flex-shrink-0.pb-4{ background: var(--bg-card); } /* ════════════════════════════════════════════════════════════════ CONTAINERS / LAYOUT ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .scrollable-column { background: transparent !important; } [data-theme="dark"] .main-row { background: transparent !important; } [data-theme="dark"] #content, [data-theme="dark"] main { background: var(--bg-primary) !important; } /* ════════════════════════════════════════════════════════════════ COMING SOON PAGE (full page override) ════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .coming-soon-page, [data-theme="dark"] .coming-soon-container { background: var(--bg-primary) !important; color: var(--text-primary) !important; } /* ============================================================ DISPUTE PAGE ============================================================ */ /* ── User Dispute List (udl) – Dark Theme ── */ [data-theme="dark"] .udl-header{ background: var(--bg-input); } [data-theme="dark"] .udl-header-icon{ background: rgba(26, 198, 255, 0.15); color: #1AC6FF; } [data-theme="dark"] .udl-tabs { background: var(--bg-card); border-bottom-color: var(--border-color); } [data-theme="dark"] .udl-tab { color: var(--text-secondary); } [data-theme="dark"] .udl-tab:hover { color: var(--text-primary); } [data-theme="dark"] .udl-tab--active { color: #7b8cde; border-bottom-color: #7b8cde; } [data-theme="dark"] .udl-tab-count { background: var(--bg-hover); color: var(--text-secondary); } [data-theme="dark"] .udl-tab--active .udl-tab-count { background: rgba(123, 140, 222, 0.15); color: #7b8cde; } [data-theme="dark"] .udl-tab-count--open { background: rgba(96, 184, 232, 0.12); color: #60b8e8; } [data-theme="dark"] .udl-tab-count--progress { background: rgba(240, 192, 96, 0.12); color: #f0c060; } [data-theme="dark"] .udl-tab-count--resolved { background: rgba(74, 222, 128, 0.12); color: #4ade80; } /* ── List & Cards ── */ [data-theme="dark"] .udl-list { background: var(--bg-card); box-shadow: var(--shadow-sm); } [data-theme="dark"] .udl-card { border-bottom-color: var(--border-color); } [data-theme="dark"] .udl-card:hover { background: var(--bg-hover); } /* ── Status icons ── */ [data-theme="dark"] .udl-status-icon--open { background: rgba(96, 184, 232, 0.12); color: #60b8e8; } [data-theme="dark"] .udl-status-icon--in_progress { background: rgba(240, 192, 96, 0.12); color: #f0c060; } [data-theme="dark"] .udl-status-icon--resolved { background: rgba(74, 222, 128, 0.12); color: #4ade80; } [data-theme="dark"] .udl-status-icon--closed { background: rgba(139, 147, 171, 0.12); color: var(--text-secondary); } /* ── Ticket chip ── */ [data-theme="dark"] .udl-ticket { background: rgba(123, 140, 222, 0.15); color: #7b8cde; } /* ── Subject & meta ── */ [data-theme="dark"] .udl-subject { color: var(--text-primary); } [data-theme="dark"] .udl-meta-item { color: var(--text-muted); } /* ── Transaction pills ── */ [data-theme="dark"] .udl-txn-pill--failed { background: rgba(248, 113, 113, 0.15); color: #f87171; } [data-theme="dark"] .udl-txn-pill--success { background: rgba(74, 222, 128, 0.15); color: #4ade80; } /* ── Arrow ── */ [data-theme="dark"] .udl-arrow { color: var(--text-muted); } /* ── Status badges ── */ [data-theme="dark"] .sc-status-open { background: rgba(96, 184, 232, 0.12); color: #60b8e8; } [data-theme="dark"] .sc-status-in_progress { background: rgba(240, 192, 96, 0.12); color: #f0c060; } [data-theme="dark"] .sc-status-resolved { background: rgba(74, 222, 128, 0.12); color: #4ade80; } [data-theme="dark"] .sc-status-closed { background: rgba(139, 147, 171, 0.12); color: var(--text-secondary); } /* ── Empty state ── */ [data-theme="dark"] .udl-empty { color: var(--text-primary); } [data-theme="dark"] .udl-empty-icon-wrap { background: rgba(74, 222, 128, 0.12); color: #4ade80; } /* ── Info note ── */ [data-theme="dark"] .udl-info-note { background: rgba(123, 140, 222, 0.08); border-color: rgba(123, 140, 222, 0.25); color: #7b8cde; } [data-theme="dark"] .udl-info-note a { color: #a0aef5; } /* ============================================== SUPPORT DISPUTE CHAT ===============================================*/ /* ══ Support Chat – Dark Theme ══ */ [data-theme="dark"] .sc-chat-header{ background: var(--bg-input); } /* ── Sidebar ── */ [data-theme="dark"] .sc-sidebar { background: var(--bg-sidebar); border-right-color: var(--border-color); } [data-theme="dark"] .sc-sidebar-section { border-bottom-color: var(--border-color); } [data-theme="dark"] .sc-badge-label { color: #7b8cde; } [data-theme="dark"] .sc-ticket-id { color: var(--text-primary); } [data-theme="dark"] .sc-section-label { color: var(--text-muted); } [data-theme="dark"] .sc-customer-avatar { background: rgba(123, 140, 222, 0.15); color: #7b8cde; } /* ── Status badges ── */ [data-theme="dark"] .sc-status-open { background: rgba(96, 184, 232, 0.12); color: #60b8e8; } [data-theme="dark"] .sc-status-in_progress { background: rgba(240, 192, 96, 0.12); color: #f0c060; } [data-theme="dark"] .sc-status-resolved { background: rgba(74, 222, 128, 0.12); color: #4ade80; } [data-theme="dark"] .sc-status-closed { background: rgba(139, 147, 171, 0.12); color: var(--text-secondary); } /* ── Transaction card (sidebar) ── */ [data-theme="dark"] .sc-txn-card { background: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .sc-txn-amount { color: var(--text-primary); } [data-theme="dark"] .sc-txn-amount span { color: var(--text-muted); } [data-theme="dark"] .sc-txn-pill-failed { background: rgba(248, 113, 113, 0.15); color: #f87171; } [data-theme="dark"] .sc-txn-pill-succeeded, [data-theme="dark"] .sc-txn-pill-paid { background: rgba(74, 222, 128, 0.15); color: #4ade80; } [data-theme="dark"] .sc-txn-pill-pending { background: rgba(240, 192, 96, 0.15); color: #f0c060; } [data-theme="dark"] .sc-txn-meta, [data-theme="dark"] .sc-txn-ref, [data-theme="dark"] .sc-txn-date { color: var(--text-muted); } [data-theme="dark"] .sc-txn-ref code { background: var(--bg-hover); color: var(--text-secondary); } /* ── Admin status buttons ── */ [data-theme="dark"] .sc-status-btn--progress { background: rgba(240, 192, 96, 0.12); color: #f0c060; border-color: rgba(240, 192, 96, 0.3); } [data-theme="dark"] .sc-status-btn--resolved { background: rgba(74, 222, 128, 0.12); color: #4ade80; border-color: rgba(74, 222, 128, 0.3); } [data-theme="dark"] .sc-status-btn--closed { background: rgba(139, 147, 171, 0.12); color: var(--text-secondary); border-color: rgba(139, 147, 171, 0.2); } [data-theme="dark"] .sc-status-btn--progress:hover { background: rgba(240, 192, 96, 0.22); } [data-theme="dark"] .sc-status-btn--resolved:hover { background: rgba(74, 222, 128, 0.22); } [data-theme="dark"] .sc-status-btn--closed:hover { background: rgba(139, 147, 171, 0.22); } /* ── Email / back links ── */ [data-theme="dark"] .sc-email-link { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .sc-email-link:hover { background: rgba(123, 140, 222, 0.12); color: #7b8cde; } /* ── Offline banner ── */ [data-theme="dark"] .sc-offline-banner { background: rgba(240, 192, 96, 0.1); border-bottom-color: rgba(240, 192, 96, 0.25); color: #f0c060; } /* ── Messages area ── */ [data-theme="dark"] .sc-messages { background: var(--bg-primary); } [data-theme="dark"] .sc-sys-msg { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-muted); } /* ── Pinned transaction bubble ── */ [data-theme="dark"] .sc-txn-bubble { background: var(--bg-card); border-color: var(--border-color); box-shadow: var(--shadow-sm); } [data-theme="dark"] .sc-txn-bubble-hdr { color: #7b8cde; } [data-theme="dark"] .sc-txn-bubble-row { border-bottom-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .sc-txn-bubble-row span:first-child { color: var(--text-muted); } [data-theme="dark"] .sc-txn-bubble-ref { color: var(--text-muted); } [data-theme="dark"] .sc-txn-bubble-ref code { background: var(--bg-hover); color: var(--text-secondary); } /* ── Chat bubbles ── */ [data-theme="dark"] .sc-other .sc-bubble { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } /* Own bubble stays the same blue — works great on dark */ /* Admin own bubble */ [data-theme="dark"] .sc-admin-mode .sc-own .sc-bubble { background: #1e293b !important; color: #f1f5f9; } [data-theme="dark"] .sc-agent-avatar { background: rgba(96, 184, 232, 0.15); color: #60b8e8; } [data-theme="dark"] .sc-agent-avatar--customer { background: rgba(240, 192, 96, 0.15); color: #f0c060; } /* ── Quick chips ── */ [data-theme="dark"] .sc-quick { background: var(--bg-card); border-top-color: var(--border-color); } [data-theme="dark"] .sc-quick-label { color: var(--text-muted); } [data-theme="dark"] .sc-chip { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .sc-chip:hover { background: rgba(123, 140, 222, 0.12); border-color: #7b8cde; color: #7b8cde; } /* ── Composer ── */ [data-theme="dark"] .sc-composer { background: var(--bg-card); border-top-color: var(--border-color); } [data-theme="dark"] .chat-input-group input, [data-theme="dark"] .composer-dock{ background: var(--bg-input) ; } [data-theme="dark"] .sc-input { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .sc-input::placeholder { color: var(--text-muted); } [data-theme="dark"] .sc-input:focus { border-color: var(--border-focus); } /* ── Closed bar ── */ [data-theme="dark"] .sc-closed { background: rgba(74, 222, 128, 0.08); border-top-color: rgba(74, 222, 128, 0.2); color: #4ade80; } [data-theme="dark"] .sc-closed a { color: #4ade80; } /* ── Mobile drawer ── */ [data-theme="dark"] .sc-drawer { background: var(--bg-card); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .sc-drawer-handle { background: var(--bg-card); border-bottom-color: var(--border-color); } [data-theme="dark"] .sc-drawer-pill { background: var(--border-color); } [data-theme="dark"] .sc-drawer-section { border-bottom-color: var(--border-color); } /* ===================================Blog page===================== */ /* ═══════════════════════════════════════════════════════ TUTNECT BLOG ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .bl-root { background: var(--bg-primary); color: var(--text-primary); } /* ── Breadcrumb ── */ [data-theme="dark"] .bl-breadcrumb { background: var(--bg-navbar); border-bottom: 1px solid var(--border-color); } /* ── Masthead ── */ [data-theme="dark"] .bl-masthead { background: var(--bg-navbar); } [data-theme="dark"] .bl-masthead h1 { color: var(--text-primary); } [data-theme="dark"] .bl-mh-sub { color: var(--text-secondary); } [data-theme="dark"] .bl-search { background: var(--bg-input); border-color: var(--border-color); } [data-theme="dark"] .bl-search:focus-within { border-color: var(--border-focus); background: var(--bg-secondary); } [data-theme="dark"] .bl-search input { color: var(--text-primary); } [data-theme="dark"] .bl-search input::placeholder { color: var(--text-muted); } /* ── Stats strip ── */ [data-theme="dark"] .bl-stats-strip { background: var(--bg-secondary); border-top: 1px solid var(--border-color); } [data-theme="dark"] .bl-stat { border-right-color: var(--border-color); } [data-theme="dark"] .bl-stat-v { color: var(--text-primary); } [data-theme="dark"] .bl-stat-l { color: var(--text-muted); } /* ── Masthead preview card ── */ [data-theme="dark"] .bl-mh-card { background: var(--bg-card); box-shadow: var(--shadow-md); } [data-theme="dark"] .bl-mh-card h3 { color: var(--text-primary); } [data-theme="dark"] .bl-mhc-eye { color: var(--text-secondary); } [data-theme="dark"] .bl-mhc-meta-txt { color: var(--text-secondary); } [data-theme="dark"] .bl-mhc-meta-txt strong { color: var(--text-primary); } [data-theme="dark"] .bl-mhc-bar { background: var(--bg-hover); } [data-theme="dark"] .bl-mhc-av { background: var(--bg-hover); color: var(--text-link); } [data-theme="dark"] .bl-mhc-chip { background: var(--bg-hover); color: var(--text-secondary); } [data-theme="dark"] .bl-mhc-chip.aq { background: rgba(10, 138, 170, 0.15); color: #56c5df; } /* ── Section headings ── */ [data-theme="dark"] .bl-sh h2 { color: var(--text-primary); } [data-theme="dark"] .bl-sh a { color: var(--text-link); } /* ── Featured / Hero post ── */ [data-theme="dark"] .bl-hero-post { background: var(--bg-card); border-color: var(--border-color); box-shadow: var(--shadow-sm); } [data-theme="dark"] .bl-hp-body h2 { color: var(--text-primary); } [data-theme="dark"] .bl-hp-body p { color: var(--text-secondary); } [data-theme="dark"] .bl-tag { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } [data-theme="dark"] .bl-tag.gold { background: rgba(186, 117, 23, 0.18); color: #f0c060; } [data-theme="dark"] .bl-tag.aqua { background: rgba(10, 122, 154, 0.18); color: #56c5df; } [data-theme="dark"] .bl-tag.green { background: rgba(26, 122, 69, 0.18); color: #6fcf97; } [data-theme="dark"] .bl-date-txt { color: var(--text-muted); } [data-theme="dark"] .bl-author-name { color: var(--text-primary); } [data-theme="dark"] .bl-author-role { color: var(--text-secondary); } [data-theme="dark"] .bl-av { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } [data-theme="dark"] .bl-av.aq { background: rgba(10, 122, 154, 0.18); color: #56c5df; } [data-theme="dark"] .bl-av.gd { background: rgba(186, 117, 23, 0.18); color: #f0c060; } [data-theme="dark"] .bl-av.rs { background: rgba(160, 24, 80, 0.18); color: #f48fb1; } [data-theme="dark"] .bl-av.gr { background: rgba(26, 122, 69, 0.18); color: #6fcf97; } [data-theme="dark"] .bl-av.pu { background: rgba(96, 64, 192, 0.18); color: #b39ddb; } [data-theme="dark"] .bl-read-time { color: var(--text-muted); } /* ── Article cards ── */ [data-theme="dark"] .bl-card { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .bl-card:hover { background: var(--bg-hover); border-color: var(--border-focus); box-shadow: var(--shadow-md); } [data-theme="dark"] .bl-card-body h3 { color: var(--text-primary); } [data-theme="dark"] .bl-card-body p { color: var(--text-secondary); } [data-theme="dark"] .bl-card-foot { border-top-color: var(--border-color); } [data-theme="dark"] .bl-rlink { color: var(--text-link); } /* ── Generate blog button ── */ [data-theme="dark"] .bl-generate-btn { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary) !important; } [data-theme="dark"] .bl-generate-btn:hover { background: var(--bg-hover); border-color: var(--border-focus); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } /* ── View all nudge ── */ [data-theme="dark"] .bl-view-all-nudge { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .bl-view-all-nudge span { color: var(--text-secondary); } [data-theme="dark"] .bl-view-all-nudge span i { color: var(--text-link); } /* ── Newsletter ── */ [data-theme="dark"] .bl-newsletter { background: linear-gradient(140deg, #13182a 0%, #0e1117 100%); border: 1px solid var(--border-color); } [data-theme="dark"] .bl-newsletter h3 { color: var(--text-primary); } [data-theme="dark"] .bl-newsletter > p { color: var(--text-secondary); } [data-theme="dark"] .bl-nl-input { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .bl-nl-input::placeholder { color: var(--text-muted); } [data-theme="dark"] .bl-nl-input:focus { border-color: var(--border-focus); } /* ── Quick guides strip ── */ [data-theme="dark"] .bl-guide-card { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .bl-guide-card:hover { background: var(--bg-hover); border-color: var(--border-focus); box-shadow: var(--shadow-md); } [data-theme="dark"] .bl-guide-card h4 { color: var(--text-primary); } [data-theme="dark"] .bl-guide-card p { color: var(--text-secondary); } [data-theme="dark"] .bl-guide-card a { color: var(--text-link); } [data-theme="dark"] .bl-guide-icon { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } [data-theme="dark"] .bl-guide-icon.gd { background: rgba(186, 117, 23, 0.18); color: #f0c060; } [data-theme="dark"] .bl-guide-icon.aq { background: rgba(10, 122, 154, 0.18); color: #56c5df; } /* ── Trending items ── */ [data-theme="dark"] .bl-trend-item { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .bl-trend-item:hover { background: var(--bg-hover); border-color: var(--border-focus); box-shadow: var(--shadow-sm); } [data-theme="dark"] .bl-trend-num { color: var(--bg-hover); } [data-theme="dark"] .bl-trend-item h4 { color: var(--text-primary); } [data-theme="dark"] .bl-trend-item h4 a { color: var(--text-primary); } [data-theme="dark"] .bl-trend-item p { color: var(--text-secondary); } /* ── FAQ ── */ [data-theme="dark"] .bl-faq { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .bl-faq-item { border-bottom-color: var(--border-color); } [data-theme="dark"] .bl-faq-q { color: var(--text-primary); background: none; } [data-theme="dark"] .bl-faq-q:hover { color: var(--text-link); } [data-theme="dark"] .bl-faq-q i { color: var(--text-muted); } [data-theme="dark"] .bl-faq-q.open i { color: var(--text-link); } [data-theme="dark"] .bl-faq-a { color: var(--text-secondary); } /* ── Sidebar ── */ [data-theme="dark"] .bl-sb-card { background: var(--bg-sidebar); border-color: var(--border-color); box-shadow: var(--shadow-sm); } [data-theme="dark"] .bl-sb-title { color: var(--text-primary); border-bottom-color: var(--border-color); } [data-theme="dark"] .bl-sb-title i { color: var(--text-link); } /* Quote card */ [data-theme="dark"] .bl-quote-card { background: var(--bg-secondary); border: 1px solid var(--border-color); } [data-theme="dark"] .bl-quote-card blockquote { color: var(--text-primary); } [data-theme="dark"] .bl-quote-card cite { color: var(--text-muted); } [data-theme="dark"] .bl-quote-card::before { color: rgba(255, 255, 255, 0.05); } /* Recent posts */ [data-theme="dark"] .bl-recent-item { border-bottom-color: var(--border-color); } [data-theme="dark"] .bl-recent-item h5 { color: var(--text-primary); } [data-theme="dark"] .bl-recent-item span { color: var(--text-muted); } /* Topics */ [data-theme="dark"] .bl-topic-pill { background: var(--bg-hover); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .bl-topic-pill:hover { background: rgba(92, 107, 192, 0.18); color: #9fa8da; border-color: rgba(92, 107, 192, 0.4); } /* Stats at-a-glance */ [data-theme="dark"] .bl-stat-row2 { border-bottom-color: var(--border-color); } [data-theme="dark"] .bl-stat-label2 { color: var(--text-secondary); } [data-theme="dark"] .bl-stat-val2 { color: var(--text-primary); } /* Author items */ [data-theme="dark"] .bl-author-item { border-bottom-color: var(--border-color); } [data-theme="dark"] .bl-ai-name { color: var(--text-primary); } [data-theme="dark"] .bl-ai-sub { color: var(--text-muted); } [data-theme="dark"] .bl-ai-count { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } /* CTA card */ [data-theme="dark"] .bl-cta-card { background: var(--bg-secondary); border: 1px solid var(--border-color); } [data-theme="dark"] .bl-cta-card h4 { color: var(--text-primary); } [data-theme="dark"] .bl-cta-card p { color: var(--text-secondary); } [data-theme="dark"] .bl-cta-icon { background: rgba(92, 107, 192, 0.15); border-color: rgba(92, 107, 192, 0.3); } /* Empty state */ [data-theme="dark"] .bl-empty { color: var(--text-muted); } /* =======================================All Blog============================== */ /* ═══════════════════════════════════════════════════════ TUTNECT ALL ARTICLES ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .ab-root { background: var(--bg-primary); color: var(--text-primary); } /* ── Header / Masthead ── */ [data-theme="dark"] .ab-header { background: var(--bg-navbar); } [data-theme="dark"] .ab-breadcrumb a { color: rgba(230,234,244,0.45); } [data-theme="dark"] .ab-breadcrumb a:hover { color: var(--text-primary); } [data-theme="dark"] .ab-breadcrumb .current { color: rgba(230,234,244,0.88); } [data-theme="dark"] .ab-masthead-inner h1 { color: var(--text-primary); } [data-theme="dark"] .ab-mh-sub { color: var(--text-secondary); } [data-theme="dark"] .ab-search-bar { background: var(--bg-input); border-color: var(--border-color); } [data-theme="dark"] .ab-search-bar:focus-within { border-color: var(--border-focus); background: var(--bg-secondary); } [data-theme="dark"] .ab-search-bar input { color: var(--text-primary); } [data-theme="dark"] .ab-search-bar input::placeholder { color: var(--text-muted); } [data-theme="dark"] .ab-back-link { background: rgba(230,234,244,0.07); border-color: rgba(230,234,244,0.12); color: var(--text-primary); } [data-theme="dark"] .ab-back-link:hover { background: rgba(230,234,244,0.13); } /* ── Section heading ── */ [data-theme="dark"] .ab-sh h2 { color: var(--text-primary); } [data-theme="dark"] .ab-count-badge { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } /* ── Filter strip ── */ [data-theme="dark"] .ab-filter-btn { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .ab-filter-btn:hover, [data-theme="dark"] .ab-filter-btn.active { background: var(--border-focus); border-color: var(--border-focus); color: var(--text-primary); } /* ── Article cards ── */ [data-theme="dark"] .ab-card { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .ab-card:hover { background: var(--bg-hover); border-color: var(--border-focus); box-shadow: var(--shadow-md); } [data-theme="dark"] .ab-card-body h3 { color: var(--text-primary); } [data-theme="dark"] .ab-card-body p { color: var(--text-secondary); } [data-theme="dark"] .ab-tag { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } [data-theme="dark"] .ab-date { color: var(--text-muted); } [data-theme="dark"] .ab-card-foot { border-top-color: var(--border-color); } [data-theme="dark"] .ab-author-nm { color: var(--text-secondary); } [data-theme="dark"] .ab-read-time { color: var(--text-muted); } [data-theme="dark"] .ab-av-mini { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } [data-theme="dark"] .ab-rlink { color: var(--text-link); } /* ── Empty / no-results states ── */ [data-theme="dark"] .ab-empty, [data-theme="dark"] .ab-no-results { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .ab-empty i, [data-theme="dark"] .ab-no-results i { color: var(--text-muted); } [data-theme="dark"] .ab-empty h3 { color: var(--text-primary); } [data-theme="dark"] .ab-empty p, [data-theme="dark"] .ab-no-results p { color: var(--text-secondary); } /* ── Sidebar ── */ [data-theme="dark"] .ab-sb-card { background: var(--bg-sidebar); border-color: var(--border-color); box-shadow: var(--shadow-sm); } [data-theme="dark"] .ab-sb-title { color: var(--text-primary); border-bottom-color: var(--border-color); } [data-theme="dark"] .ab-sb-title i { color: var(--text-link); } /* Blog stats */ [data-theme="dark"] .ab-stat-row { border-bottom-color: var(--border-color); } [data-theme="dark"] .ab-stat-row span:first-child { color: var(--text-secondary); } [data-theme="dark"] .ab-stat-row span:last-child { color: var(--text-primary); } /* Topic pills */ [data-theme="dark"] .ab-topic-pill { background: var(--bg-hover); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .ab-topic-pill:hover, [data-theme="dark"] .ab-topic-pill.active { background: var(--border-focus); border-color: var(--border-focus); color: var(--text-primary); } /* Back-to-blog CTA card — keep its own gradient, just soften it */ [data-theme="dark"] .ab-sb-card[style*="gradient"] { background: linear-gradient(145deg, #13182a 0%, #0e1117 100%) !important; border: 1px solid var(--border-color) !important; } /* ═══════════════════════════════════════════════════════ TUTNECT BLOG POST ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ TUTNECT BLOG ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .bl-root { background: var(--bg-primary); color: var(--text-primary); } /* ── Breadcrumb ── */ [data-theme="dark"] .bl-breadcrumb { background: var(--bg-navbar); border-bottom: 1px solid var(--border-color); } /* ── Masthead ── */ [data-theme="dark"] .bl-masthead { background: var(--bg-navbar); } [data-theme="dark"] .bl-masthead h1 { color: var(--text-primary); } [data-theme="dark"] .bl-mh-sub { color: var(--text-secondary); } [data-theme="dark"] .bl-search { background: var(--bg-input); border-color: var(--border-color); } [data-theme="dark"] .bl-search:focus-within { border-color: var(--border-focus); background: var(--bg-secondary); } [data-theme="dark"] .bl-search input { color: var(--text-primary); } [data-theme="dark"] .bl-search input::placeholder { color: var(--text-muted); } /* ── Stats strip ── */ [data-theme="dark"] .bl-stats-strip { background: var(--bg-secondary); border-top: 1px solid var(--border-color); } [data-theme="dark"] .bl-stat { border-right-color: var(--border-color); } [data-theme="dark"] .bl-stat-v { color: var(--text-primary); } [data-theme="dark"] .bl-stat-l { color: var(--text-muted); } /* ── Masthead preview card ── */ [data-theme="dark"] .bl-mh-card { background: var(--bg-card); box-shadow: var(--shadow-md); } [data-theme="dark"] .bl-mh-card h3 { color: var(--text-primary); } [data-theme="dark"] .bl-mhc-eye { color: var(--text-secondary); } [data-theme="dark"] .bl-mhc-meta-txt { color: var(--text-secondary); } [data-theme="dark"] .bl-mhc-meta-txt strong { color: var(--text-primary); } [data-theme="dark"] .bl-mhc-bar { background: var(--bg-hover); } [data-theme="dark"] .bl-mhc-av { background: var(--bg-hover); color: var(--text-link); } [data-theme="dark"] .bl-mhc-chip { background: var(--bg-hover); color: var(--text-secondary); } [data-theme="dark"] .bl-mhc-chip.aq { background: rgba(10, 138, 170, 0.15); color: #56c5df; } /* ── Section headings ── */ [data-theme="dark"] .bl-sh h2 { color: var(--text-primary); } [data-theme="dark"] .bl-sh a { color: var(--text-link); } /* ── Featured / Hero post ── */ [data-theme="dark"] .bl-hero-post { background: var(--bg-card); border-color: var(--border-color); box-shadow: var(--shadow-sm); } [data-theme="dark"] .bl-hp-body h2 { color: var(--text-primary); } [data-theme="dark"] .bl-hp-body p { color: var(--text-secondary); } [data-theme="dark"] .bl-tag { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } [data-theme="dark"] .bl-tag.gold { background: rgba(186, 117, 23, 0.18); color: #f0c060; } [data-theme="dark"] .bl-tag.aqua { background: rgba(10, 122, 154, 0.18); color: #56c5df; } [data-theme="dark"] .bl-tag.green { background: rgba(26, 122, 69, 0.18); color: #6fcf97; } [data-theme="dark"] .bl-date-txt { color: var(--text-muted); } [data-theme="dark"] .bl-author-name { color: var(--text-primary); } [data-theme="dark"] .bl-author-role { color: var(--text-secondary); } [data-theme="dark"] .bl-av { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } [data-theme="dark"] .bl-av.aq { background: rgba(10, 122, 154, 0.18); color: #56c5df; } [data-theme="dark"] .bl-av.gd { background: rgba(186, 117, 23, 0.18); color: #f0c060; } [data-theme="dark"] .bl-av.rs { background: rgba(160, 24, 80, 0.18); color: #f48fb1; } [data-theme="dark"] .bl-av.gr { background: rgba(26, 122, 69, 0.18); color: #6fcf97; } [data-theme="dark"] .bl-av.pu { background: rgba(96, 64, 192, 0.18); color: #b39ddb; } [data-theme="dark"] .bl-read-time { color: var(--text-muted); } /* ── Article cards ── */ [data-theme="dark"] .bl-card { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .bl-card:hover { background: var(--bg-hover); border-color: var(--border-focus); box-shadow: var(--shadow-md); } [data-theme="dark"] .bl-card-body h3 { color: var(--text-primary); } [data-theme="dark"] .bl-card-body p { color: var(--text-secondary); } [data-theme="dark"] .bl-card-foot { border-top-color: var(--border-color); } [data-theme="dark"] .bl-rlink { color: var(--text-link); } /* ── Generate blog button ── */ [data-theme="dark"] .bl-generate-btn { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary) !important; } [data-theme="dark"] .swal2-cancel-custom{ background:var(--bg-card); } [data-theme="dark"] .swal2-cancel-custom:hover{ background:var(--bg-input); } [data-theme="dark"] .bl-generate-btn:hover { background: var(--bg-hover); border-color: var(--border-focus); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } /* ── View all nudge ── */ [data-theme="dark"] .bl-view-all-nudge { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .bl-view-all-nudge span { color: var(--text-secondary); } [data-theme="dark"] .bl-view-all-nudge span i { color: var(--text-link); } /* ── Newsletter ── */ [data-theme="dark"] .bl-newsletter { background: linear-gradient(140deg, #13182a 0%, #0e1117 100%); border: 1px solid var(--border-color); } [data-theme="dark"] .bl-newsletter h3 { color: var(--text-primary); } [data-theme="dark"] .bl-newsletter > p { color: var(--text-secondary); } [data-theme="dark"] .bl-nl-input { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .bl-nl-input::placeholder { color: var(--text-muted); } [data-theme="dark"] .bl-nl-input:focus { border-color: var(--border-focus); } /* ── Quick guides strip ── */ [data-theme="dark"] .bl-guide-card { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .bl-guide-card:hover { background: var(--bg-hover); border-color: var(--border-focus); box-shadow: var(--shadow-md); } [data-theme="dark"] .bl-guide-card h4 { color: var(--text-primary); } [data-theme="dark"] .bl-guide-card p { color: var(--text-secondary); } [data-theme="dark"] .bl-guide-card a { color: var(--text-link); } [data-theme="dark"] .bl-guide-icon { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } [data-theme="dark"] .bl-guide-icon.gd { background: rgba(186, 117, 23, 0.18); color: #f0c060; } [data-theme="dark"] .bl-guide-icon.aq { background: rgba(10, 122, 154, 0.18); color: #56c5df; } /* ── Trending items ── */ [data-theme="dark"] .bl-trend-item { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .bl-trend-item:hover { background: var(--bg-hover); border-color: var(--border-focus); box-shadow: var(--shadow-sm); } [data-theme="dark"] .bl-trend-num { color: var(--bg-hover); } [data-theme="dark"] .bl-trend-item h4 { color: var(--text-primary); } [data-theme="dark"] .bl-trend-item h4 a { color: var(--text-primary); } [data-theme="dark"] .bl-trend-item p { color: var(--text-secondary); } /* ── FAQ ── */ [data-theme="dark"] .bl-faq { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .bl-faq-item { border-bottom-color: var(--border-color); } [data-theme="dark"] .bl-faq-q { color: var(--text-primary); background: none; } [data-theme="dark"] .bl-faq-q:hover { color: var(--text-link); } [data-theme="dark"] .bl-faq-q i { color: var(--text-muted); } [data-theme="dark"] .bl-faq-q.open i { color: var(--text-link); } [data-theme="dark"] .bl-faq-a { color: var(--text-secondary); } /* ── Sidebar ── */ [data-theme="dark"] .bl-sb-card { background: var(--bg-sidebar); border-color: var(--border-color); box-shadow: var(--shadow-sm); } [data-theme="dark"] .bl-sb-title { color: var(--text-primary); border-bottom-color: var(--border-color); } [data-theme="dark"] .bl-sb-title i { color: var(--text-link); } /* Quote card */ [data-theme="dark"] .bl-quote-card { background: var(--bg-secondary); border: 1px solid var(--border-color); } [data-theme="dark"] .bl-quote-card blockquote { color: var(--text-primary); } [data-theme="dark"] .bl-quote-card cite { color: var(--text-muted); } [data-theme="dark"] .bl-quote-card::before { color: rgba(255, 255, 255, 0.05); } /* Recent posts */ [data-theme="dark"] .bl-recent-item { border-bottom-color: var(--border-color); } [data-theme="dark"] .bl-recent-item h5 { color: var(--text-primary); } [data-theme="dark"] .bl-recent-item span { color: var(--text-muted); } /* Topics */ [data-theme="dark"] .bl-topic-pill { background: var(--bg-hover); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .bl-topic-pill:hover { background: rgba(92, 107, 192, 0.18); color: #9fa8da; border-color: rgba(92, 107, 192, 0.4); } /* Stats at-a-glance */ [data-theme="dark"] .bl-stat-row2 { border-bottom-color: var(--border-color); } [data-theme="dark"] .bl-stat-label2 { color: var(--text-secondary); } [data-theme="dark"] .bl-stat-val2 { color: var(--text-primary); } /* Author items */ [data-theme="dark"] .bl-author-item { border-bottom-color: var(--border-color); } [data-theme="dark"] .bl-ai-name { color: var(--text-primary); } [data-theme="dark"] .bl-ai-sub { color: var(--text-muted); } [data-theme="dark"] .bl-ai-count { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } /* CTA card */ [data-theme="dark"] .bl-cta-card { background: var(--bg-secondary); border: 1px solid var(--border-color); } [data-theme="dark"] .bl-cta-card h4 { color: var(--text-primary); } [data-theme="dark"] .bl-cta-card p { color: var(--text-secondary); } [data-theme="dark"] .bl-cta-icon { background: rgba(92, 107, 192, 0.15); border-color: rgba(92, 107, 192, 0.3); } /* Empty state */ [data-theme="dark"] .bl-empty { color: var(--text-muted); } /* ═══════════════════════════════════════════════════════ TUTNECT ALL ARTICLES ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .ab-root { background: var(--bg-primary); color: var(--text-primary); } /* ── Header / Masthead ── */ [data-theme="dark"] .ab-header { background: var(--bg-navbar); } [data-theme="dark"] .ab-breadcrumb a { color: rgba(230,234,244,0.45); } [data-theme="dark"] .ab-breadcrumb a:hover { color: var(--text-primary); } [data-theme="dark"] .ab-breadcrumb .current { color: rgba(230,234,244,0.88); } [data-theme="dark"] .ab-masthead-inner h1 { color: var(--text-primary); } [data-theme="dark"] .ab-mh-sub { color: var(--text-secondary); } [data-theme="dark"] .ab-search-bar { background: var(--bg-input); border-color: var(--border-color); } [data-theme="dark"] .ab-search-bar:focus-within { border-color: var(--border-focus); background: var(--bg-secondary); } [data-theme="dark"] .ab-search-bar input { color: var(--text-primary); } [data-theme="dark"] .ab-search-bar input::placeholder { color: var(--text-muted); } [data-theme="dark"] .ab-back-link { background: rgba(230,234,244,0.07); border-color: rgba(230,234,244,0.12); color: var(--text-primary); } [data-theme="dark"] .ab-back-link:hover { background: rgba(230,234,244,0.13); } /* ── Section heading ── */ [data-theme="dark"] .ab-sh h2 { color: var(--text-primary); } [data-theme="dark"] .ab-count-badge { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } /* ── Filter strip ── */ [data-theme="dark"] .ab-filter-btn { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .ab-filter-btn:hover, [data-theme="dark"] .ab-filter-btn.active { background: var(--border-focus); border-color: var(--border-focus); color: var(--text-primary); } /* ── Article cards ── */ [data-theme="dark"] .ab-card { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .ab-card:hover { background: var(--bg-hover); border-color: var(--border-focus); box-shadow: var(--shadow-md); } [data-theme="dark"] .ab-card-body h3 { color: var(--text-primary); } [data-theme="dark"] .ab-card-body p { color: var(--text-secondary); } [data-theme="dark"] .ab-tag { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } [data-theme="dark"] .ab-date { color: var(--text-muted); } [data-theme="dark"] .ab-card-foot { border-top-color: var(--border-color); } [data-theme="dark"] .ab-author-nm { color: var(--text-secondary); } [data-theme="dark"] .ab-read-time { color: var(--text-muted); } [data-theme="dark"] .ab-av-mini { background: rgba(92, 107, 192, 0.18); color: #9fa8da; } [data-theme="dark"] .ab-rlink { color: var(--text-link); } /* ── Empty / no-results states ── */ [data-theme="dark"] .ab-empty, [data-theme="dark"] .ab-no-results { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .ab-empty i, [data-theme="dark"] .ab-no-results i { color: var(--text-muted); } [data-theme="dark"] .ab-empty h3 { color: var(--text-primary); } [data-theme="dark"] .ab-empty p, [data-theme="dark"] .ab-no-results p { color: var(--text-secondary); } /* ── Sidebar ── */ [data-theme="dark"] .ab-sb-card { background: var(--bg-sidebar); border-color: var(--border-color); box-shadow: var(--shadow-sm); } [data-theme="dark"] .ab-sb-title { color: var(--text-primary); border-bottom-color: var(--border-color); } [data-theme="dark"] .ab-sb-title i { color: var(--text-link); } /* Blog stats */ [data-theme="dark"] .ab-stat-row { border-bottom-color: var(--border-color); } [data-theme="dark"] .ab-stat-row span:first-child { color: var(--text-secondary); } [data-theme="dark"] .ab-stat-row span:last-child { color: var(--text-primary); } /* Topic pills */ [data-theme="dark"] .ab-topic-pill { background: var(--bg-hover); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .ab-topic-pill:hover, [data-theme="dark"] .ab-topic-pill.active { background: var(--border-focus); border-color: var(--border-focus); color: var(--text-primary); } /* Back-to-blog CTA card — keep its own gradient, just soften it */ [data-theme="dark"] .ab-sb-card[style*="gradient"] { background: linear-gradient(145deg, #13182a 0%, #0e1117 100%) !important; border: 1px solid var(--border-color) !important; } /* ═══════════════════════════════════════════════════════ TUTNECT BLOG POST ═══════════════════════════════════════════════════════ */ [data-theme="dark"] .bp-root { background: var(--bg-primary); color: var(--text-primary); } /* ── Breadcrumb ── */ [data-theme="dark"] .bp-breadcrumb { background: var(--bg-navbar); border-bottom-color: var(--border-color); } [data-theme="dark"] .bp-breadcrumb-inner a { color: rgba(230,234,244,0.45); } [data-theme="dark"] .bp-breadcrumb-inner a:hover { color: var(--text-primary); } [data-theme="dark"] .bp-breadcrumb-inner .current { color: rgba(230,234,244,0.88); } /* ── Hero ── */ [data-theme="dark"] .bp-hero { background: var(--bg-navbar); } [data-theme="dark"] .bp-hero-inner h1 { color: var(--text-primary); } [data-theme="dark"] .bp-hero-excerpt { color: var(--text-secondary); } [data-theme="dark"] .bp-pill-cat { background: rgba(230,234,244,0.08); border-color: rgba(230,234,244,0.14); color: rgba(230,234,244,0.88); } /* ── Meta card (floating) ── */ [data-theme="dark"] .bp-meta-card { background: var(--bg-card); border-color: var(--border-color); box-shadow: var(--shadow-md); } [data-theme="dark"] .bp-meta-author-name { color: var(--text-primary); } [data-theme="dark"] .bp-meta-author-role { color: var(--text-secondary); } [data-theme="dark"] .bp-meta-av-fallback { background: rgba(92,107,192,0.18); color: #9fa8da; border-color: transparent; } [data-theme="dark"] .bp-meta-av { border-color: var(--border-color); } [data-theme="dark"] .bp-meta-stat { background: var(--bg-hover); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .bp-meta-stat i { color: var(--text-link); } /* ── Table of contents (main inline) ── */ [data-theme="dark"] .bp-toc { background: var(--bg-card); border-color: var(--border-color); box-shadow: var(--shadow-sm); } [data-theme="dark"] .bp-toc-list a { color: var(--text-primary); } [data-theme="dark"] .bp-toc-list a:hover { background: rgba(92,107,192,0.14); color: var(--text-link); } /* ── Article body ── */ [data-theme="dark"] .bp-article { background: var(--bg-card); border-color: var(--border-color); box-shadow: var(--shadow-sm); } /* Collapsed fade-out — swap white → dark card bg */ [data-theme="dark"] .bp-content-wrap.collapsed::after { background: linear-gradient(to bottom, rgba(28,33,51,0) 0%, #1c2133 88%); } /* Toggle button */ [data-theme="dark"] .bp-toggle-btn { background: var(--bg-hover); border-color: var(--border-color); color: var(--text-link); } [data-theme="dark"] .bp-toggle-btn:hover { background: var(--border-focus); color: var(--text-primary); border-color: var(--border-focus); } /* Article typography */ [data-theme="dark"] .bp-content { color: var(--text-primary); } [data-theme="dark"] .bp-content h2, [data-theme="dark"] .bp-content h3, [data-theme="dark"] .bp-content h4 { color: var(--text-primary); } [data-theme="dark"] .bp-content a { color: var(--text-link); border-bottom-color: rgba(123,140,222,0.3); } [data-theme="dark"] .bp-content a:hover { color: #aab4e8; border-bottom-color: #aab4e8; } [data-theme="dark"] .bp-content li::marker { color: var(--text-link); } [data-theme="dark"] .bp-content blockquote { background: rgba(92,107,192,0.10); border-left-color: var(--text-link); color: var(--text-primary); } [data-theme="dark"] .bp-content code { background: var(--bg-hover); color: #aab4e8; } [data-theme="dark"] .bp-content th { background: rgba(92,107,192,0.14); color: #9fa8da; } [data-theme="dark"] .bp-content th, [data-theme="dark"] .bp-content td { border-color: var(--border-color); } [data-theme="dark"] .bp-content hr { border-top-color: var(--border-color); } /* Tags at article bottom */ [data-theme="dark"] .bp-tags { border-top-color: var(--border-color); } [data-theme="dark"] .bp-tag { background: var(--bg-hover); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .bp-tag:hover { background: rgba(92,107,192,0.18); color: var(--text-link); border-color: rgba(92,107,192,0.4); } /* ── Key takeaways callout ── */ [data-theme="dark"] .bp-callout { background: linear-gradient(145deg, #13182a 0%, #0e1117 100%); border-color: rgba(92,107,192,0.25); } [data-theme="dark"] .bp-callout-list li { color: var(--text-secondary); } [data-theme="dark"] .bp-callout-list li { border-bottom-color: rgba(255,255,255,0.05); } /* ── Author card ── */ [data-theme="dark"] .bp-author-card { background: var(--bg-card) !important; border-color: var(--border-color); box-shadow: var(--shadow-sm); } [data-theme="dark"] .bp-author-card-img { border-color: var(--border-color); } [data-theme="dark"] .bp-author-card-fallback { background: rgba(92,107,192,0.18); color: #9fa8da; } [data-theme="dark"] .bp-author-card-name { color: var(--text-primary); } [data-theme="dark"] .bp-author-card-role { color: var(--text-secondary); } [data-theme="dark"] .bp-author-card-cta { background: rgba(92,107,192,0.15); border-color: rgba(92,107,192,0.3); color: var(--text-link); } [data-theme="dark"] .bp-author-card-cta:hover { background: var(--border-focus); color: var(--text-primary); border-color: transparent; } /* ── Newsletter ── */ [data-theme="dark"] .bp-newsletter { background: linear-gradient(140deg, #13182a 0%, #0e1117 100%); border: 1px solid var(--border-color); } [data-theme="dark"] .bp-newsletter h3 { color: var(--text-primary); } [data-theme="dark"] .bp-newsletter p { color: var(--text-secondary); } [data-theme="dark"] .bp-nl-input { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .bp-nl-input::placeholder { color: var(--text-muted); } [data-theme="dark"] .bp-nl-input:focus { border-color: var(--border-focus); } /* ── Bottom nav ── */ [data-theme="dark"] .bp-back-link { background: var(--bg-card); border-color: var(--border-color); color: var(--text-link); } [data-theme="dark"] .bp-back-link:hover { background: var(--border-focus); color: var(--text-primary); border-color: transparent; } [data-theme="dark"] .bp-share-lbl { color: var(--text-muted); } [data-theme="dark"] .bp-share-btn { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .bp-share-btn:hover { background: var(--border-focus); color: var(--text-primary); border-color: transparent; } /* ── Sidebar cards ── */ [data-theme="dark"] .bp-sb-card { background: var(--bg-sidebar); border-color: var(--border-color); box-shadow: var(--shadow-sm); } [data-theme="dark"] .bp-sb-title { color: var(--text-link); border-bottom-color: var(--border-color); } /* Reading progress */ [data-theme="dark"] .bp-sb-progress-bar-bg { background: var(--bg-hover); } [data-theme="dark"] .bp-sb-progress-lbl { color: var(--text-muted); } /* Sidebar TOC */ [data-theme="dark"] .bp-sb-toc-list a { color: var(--text-secondary); } [data-theme="dark"] .bp-sb-toc-list a:hover, [data-theme="dark"] .bp-sb-toc-list a.active { background: rgba(92,107,192,0.14); color: var(--text-link); } /* Sidebar author */ [data-theme="dark"] .bp-sb-author-name { color: var(--text-primary); } [data-theme="dark"] .bp-sb-author-role { color: var(--text-secondary); } [data-theme="dark"] .bp-sb-av { border-color: var(--border-color); } [data-theme="dark"] .bp-sb-av-fallback { background: rgba(92,107,192,0.18); color: #9fa8da; } /* Sidebar share buttons */ [data-theme="dark"] .bp-sb-share-btn { background: var(--bg-hover); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .bp-sb-share-btn:hover { background: var(--border-focus); color: var(--text-primary); border-color: transparent; } /* Sidebar topics */ [data-theme="dark"] .bp-sb-topic { background: var(--bg-hover); border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .bp-sb-topic:hover { background: rgba(92,107,192,0.18); color: var(--text-link); border-color: rgba(92,107,192,0.4); } /* Sidebar CTA card — override inline gradient */ [data-theme="dark"] .bp-sb-card[style*="gradient"] { background: linear-gradient(145deg, #13182a 0%, #0e1117 100%) !important; border: 1px solid var(--border-color) !important; } /* ── Footer ── */ [data-theme="dark"] .bp-footer { border-top-color: var(--border-color); color: var(--text-muted); } [data-theme="dark"] .bp-footer a { color: var(--text-link); }