/* ===================================================================== MODE GELAP Aktif bila . Prinsip yang dipakai: - Latar aurora ikut diredupkan, bukan sekadar dijadikan hitam pekat. Hitam murni membuat kartu kaca kehilangan kedalamannya. - Teks utama memakai putih kebiruan (#eef1f7), bukan putih murni. Putih murni di latar gelap menyilaukan dan melelahkan mata. - Warna status diredupkan agar tidak menyala berlebihan. ===================================================================== */ html[data-tema="gelap"] { color-scheme: dark; /* scrollbar & kolom isian ikut gelap */ } html[data-tema="gelap"] body { background: radial-gradient(900px 620px at 8% -8%, rgba(88, 104, 210, .18), transparent 60%), radial-gradient(820px 560px at 98% 2%, rgba(60, 150, 140, .15), transparent 58%), radial-gradient(760px 620px at 52% 108%, rgba(130, 95, 190, .15), transparent 60%), linear-gradient(168deg, #12151c 0%, #161a23 45%, #131a1a 100%); color: #c3cbda; } /* --------------------------------------------------------- header */ html[data-tema="gelap"] .top { background: rgba(24, 28, 38, .9); border-bottom-color: #262c3a; } html[data-tema="gelap"] .brand-teks b { color: #e8ecf4; } html[data-tema="gelap"] .brand-teks small { color: #6f7a90; } html[data-tema="gelap"] .top .user-menu-trigger { background: rgba(255, 255, 255, .06); border-color: #2f3648; } html[data-tema="gelap"] .top .user-menu-trigger:hover { background: rgba(255, 255, 255, .1); } html[data-tema="gelap"] .top .user-menu-trigger .user-email { color: #e8ecf4; } html[data-tema="gelap"] .top .user-menu-trigger .user-role { color: #8b96ab; } html[data-tema="gelap"] .user-caret { color: #7b8699; } html[data-tema="gelap"] .user-dropdown { background: rgba(30, 35, 48, .96); border-color: #333b4d; } html[data-tema="gelap"] .user-dropdown-head { border-bottom-color: #2d3444; } html[data-tema="gelap"] .user-dropdown-head b { color: #e8ecf4; } html[data-tema="gelap"] .user-dropdown-item { color: #b9c2d2; } html[data-tema="gelap"] .user-dropdown-item:hover { background: rgba(122, 140, 255, .13); } html[data-tema="gelap"] .user-dropdown-item.danger { color: #ef7f7f; } /* -------------------------------------------------------- sidebar */ html[data-tema="gelap"] aside { background: rgba(24, 28, 38, .78); border-right-color: #262c3a; } html[data-tema="gelap"] .nav-label { color: #626d82; } html[data-tema="gelap"] aside button[data-page], html[data-tema="gelap"] aside button#logout { color: #98a3b8; } html[data-tema="gelap"] aside button[data-page]:hover { background: rgba(255, 255, 255, .05); color: #e8ecf4; } html[data-tema="gelap"] aside button[data-page].active { background: linear-gradient(100deg, rgba(122, 140, 255, .2), rgba(122, 140, 255, .08)); color: #a9b6ff; box-shadow: inset 0 0 0 1px rgba(122, 140, 255, .18); } html[data-tema="gelap"] aside button[data-page].active::before { background: #7a8cff; } html[data-tema="gelap"] .nav-icon { color: #6f7a90; } html[data-tema="gelap"] aside button.active .nav-icon { color: #a9b6ff; } /* ------------------------------------------------ panel & kartu */ html[data-tema="gelap"] .panel, html[data-tema="gelap"] .dash-card, html[data-tema="gelap"] .premium-panel, html[data-tema="gelap"] .summary-card, html[data-tema="gelap"] .hero-stat, html[data-tema="gelap"] .client-section-card, html[data-tema="gelap"] .client-project, html[data-tema="gelap"] .field-project-card, html[data-tema="gelap"] .leads-filter-panel, html[data-tema="gelap"] .leads-table-panel, html[data-tema="gelap"] .pipeline-card, html[data-tema="gelap"] .closed-lost-panel, html[data-tema="gelap"] .modal-card, html[data-tema="gelap"] .field-modal-card, html[data-tema="gelap"] .login.panel { background: rgba(28, 33, 45, .82); border-color: #2a3140; box-shadow: 0 8px 30px -16px rgba(0, 0, 0, .6); color: #c3cbda; } html[data-tema="gelap"] .pipeline-col { background: rgba(24, 28, 38, .6); border-color: #2a3140; } html[data-tema="gelap"] .pipeline-col.closing-stage { background: rgba(22, 60, 45, .45); border-color: rgba(52, 130, 100, .4); } html[data-tema="gelap"] h1, html[data-tema="gelap"] h2, html[data-tema="gelap"] h3, html[data-tema="gelap"] h4 { color: #eef1f7; } html[data-tema="gelap"] .muted, html[data-tema="gelap"] .subhead, html[data-tema="gelap"] small { color: #8b96ab; } /* ---------------------------------------------------------- tabel */ html[data-tema="gelap"] .clean-table thead th, html[data-tema="gelap"] .table thead th { background: rgba(24, 28, 38, .92); color: #7b8699; border-bottom-color: #262c3a; } html[data-tema="gelap"] .clean-table td, html[data-tema="gelap"] .table td { color: #c3cbda; border-bottom-color: #232936; } html[data-tema="gelap"] .clean-table tbody tr:hover td, html[data-tema="gelap"] .table tbody tr:hover td { background: rgba(122, 140, 255, .07); } /* -------------------------------------------------------- formulir */ html[data-tema="gelap"] input, html[data-tema="gelap"] select, html[data-tema="gelap"] textarea { background: rgba(18, 21, 28, .8); border-color: #333b4d; color: #e8ecf4; } html[data-tema="gelap"] input::placeholder, html[data-tema="gelap"] textarea::placeholder { color: #5f6a7e; } html[data-tema="gelap"] input:focus, html[data-tema="gelap"] select:focus, html[data-tema="gelap"] textarea:focus { background: #12151c; border-color: rgba(122, 140, 255, .6); box-shadow: 0 0 0 3px rgba(122, 140, 255, .14); } html[data-tema="gelap"] label { color: #b9c2d2; } /* --------------------------------------------------------- tombol */ html[data-tema="gelap"] .soft-action, html[data-tema="gelap"] .link-btn, html[data-tema="gelap"] .icon-btn, html[data-tema="gelap"] .kpi-toggle, html[data-tema="gelap"] .field-btn-secondary, html[data-tema="gelap"] .fp-cepat button, html[data-tema="gelap"] .fp-foto-btn, html[data-tema="gelap"] .field-foto-btn2 { background: rgba(255, 255, 255, .06); border-color: #333b4d; color: #b9c2d2; } html[data-tema="gelap"] .soft-action:hover, html[data-tema="gelap"] .icon-btn:hover, html[data-tema="gelap"] .fp-cepat button:hover, html[data-tema="gelap"] .field-foto-btn2:hover { background: rgba(255, 255, 255, .1); border-color: rgba(122, 140, 255, .45); color: #a9b6ff; } html[data-tema="gelap"] .field-update-btn, html[data-tema="gelap"] .nav .cta { background: linear-gradient(135deg, #6d7cf7, #4453d8); } /* Warna status diredupkan — di layar gelap, warna pekat terasa menyala. */ html[data-tema="gelap"] .badge.green, html[data-tema="gelap"] .tag.lunas { background: rgba(34,197,94,.18); color: #6ee7a5; } html[data-tema="gelap"] .badge.blue, html[data-tema="gelap"] .bdg.bb { background: rgba(91,110,245,.2); color: #a9b6ff; } html[data-tema="gelap"] .badge.amber, html[data-tema="gelap"] .tag.pend { background: rgba(217,119,6,.2); color: #f2c078; } html[data-tema="gelap"] .badge.red { background: rgba(220,38,38,.2); color: #f79a9a; } html[data-tema="gelap"] .progress-track, html[data-tema="gelap"] .client-progress-bar, html[data-tema="gelap"] .detail-progress { background: rgba(255, 255, 255, .09); } /* ---------------------------------------------------- kerangka muat */ html[data-tema="gelap"] .sk { background: linear-gradient(100deg, rgba(40, 46, 60, .6) 20%, rgba(54, 62, 80, .85) 42%, rgba(40, 46, 60, .6) 62%); background-size: 400% 100%; } html[data-tema="gelap"] .sk-panel { background: rgba(28, 33, 45, .55); border-color: #2a3140; } /* --------------------------------------------------------- footer */ html[data-tema="gelap"] .site-foot { background: rgba(24, 28, 38, .9); border-top-color: #262c3a; color: #6f7a90; } html[data-tema="gelap"] .foot-kiri { color: #98a3b8; } /* -------------------------------------------------- tombol tutup */ html[data-tema="gelap"] .field-close::before, html[data-tema="gelap"] .field-close::after, html[data-tema="gelap"] .modal .close::before, html[data-tema="gelap"] .modal .close::after { background: #7b8699; } html[data-tema="gelap"] .field-close:hover { background: rgba(255, 255, 255, .1); } html[data-tema="gelap"] .field-close:hover::before, html[data-tema="gelap"] .field-close:hover::after { background: #e8ecf4; } /* -------------------------------------------------- kelola foto */ html[data-tema="gelap"] .fp-drop { background: rgba(18,21,28,.6); border-color: #3a4356; } html[data-tema="gelap"] .fp-drop-teks b { color: #e8ecf4; } html[data-tema="gelap"] .fp-prog { background: rgba(18,21,28,.55); border-color: #2a3140; } html[data-tema="gelap"] .fp-prog-angka { color: #eef1f7; } html[data-tema="gelap"] .fk-item { background: #1c212d; border-color: #2a3140; } html[data-tema="gelap"] .fk-item figcaption { background: rgba(24,28,38,.92); color: #8b96ab; } html[data-tema="gelap"] .fk-kosong { background: rgba(18,21,28,.5); border-color: #333b4d; color: #7b8699; } /* ------------------------------------------- pemilih proyek klien */ html[data-tema="gelap"] .u-proyek { background: rgba(18,21,28,.55); border-color: #2a3140; } html[data-tema="gelap"] .u-proyek-item { background: rgba(28,33,45,.7); border-color: #333b4d; } html[data-tema="gelap"] .u-proyek-item b { color: #e8ecf4; } html[data-tema="gelap"] .u-proyek-item.terpakai { background: rgba(70,50,20,.4); border-color: rgba(217,119,6,.45); } /* ------------------------------------------- tombol tema di header */ .header-aksi { display: flex; align-items: center; gap: 9px; } .tema-tombol { width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid #e9edf4; background: #fff; color: #6b7688; display: grid; place-items: center; cursor: pointer; flex: 0 0 36px; transition: background .15s ease, border-color .15s ease, color .15s ease; } .tema-tombol:hover { background: #f7f9fc; border-color: #dbe1ea; color: #3d4759; } .tema-tombol:active { transform: translateY(1px); } .tema-ikon { width: 17px; height: 17px; display: block; } .tema-ikon svg { width: 100%; height: 100%; display: block; } html[data-tema="gelap"] .tema-tombol { background: rgba(255, 255, 255, .06); border-color: #2f3648; color: #98a3b8; } html[data-tema="gelap"] .tema-tombol:hover { background: rgba(255, 255, 255, .1); border-color: #3a4356; color: #e8ecf4; } @media (max-width: 640px) { .tema-tombol { width: 34px; height: 34px; flex: 0 0 34px; } .header-aksi { gap: 7px; } } /* ---------------------------------- penyesuaian yang tidak tertangkap Dibuat manual karena bukan berasal dari app.css. */ html[data-tema="gelap"] .brand-teks b { color: #e8ecf4; } html[data-tema="gelap"] .brand-teks small { color: #6f7a90; } html[data-tema="gelap"] .eyebrow { color: #6f7a90; } html[data-tema="gelap"] .fp-alert { background: rgba(70, 50, 20, .45); border-color: rgba(217, 119, 6, .4); color: #f2c078; } html[data-tema="gelap"] .pager { background: rgba(28, 33, 45, .7); border-color: #2a3140; } html[data-tema="gelap"] .pager-info { color: #98a3b8; } html[data-tema="gelap"] .muat-waktu { box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .8); } /* Label kotak-centang di form akun. */ html[data-tema="gelap"] .u-aktif { color: #c3cbda; } html[data-tema="gelap"] .u-aktif input { accent-color: #7a8cff; } /* ===================================================================== VARIABEL WARNA — PERBAIKAN DI AKARNYA --------------------------------------------------------------------- Inilah penyebab baris tabel tetap terang: elemen memakai `var(--g-fill-strong)` yang bernilai rgba(255,255,255,.88). Variabelnya didefinisikan di blok `:root`, dan pembangkit tema sengaja melewati `:root` — jadi nilainya tidak pernah dikonversi, sementara SEMUA elemen yang memakainya ikut tetap putih. Mengubah variabelnya di sini memperbaiki seluruh pemakainya sekaligus, jauh lebih tepat daripada memaksa tiap elemen satu per satu. ===================================================================== */ html[data-tema="gelap"] { /* Permukaan kaca */ --g-fill: rgba(28, 33, 45, .72); --g-fill-strong: rgba(28, 33, 45, .9); --g-line: rgba(255, 255, 255, .08); --g-edge: rgba(148, 163, 200, .14); --g-shadow: 0 8px 32px -12px rgba(0, 0, 0, .5); --g-shadow-lg: 0 20px 50px -22px rgba(0, 0, 0, .7); --g-accent: #7a8cff; --g-accent-soft: rgba(122, 140, 255, .16); /* Palet dasar antarmuka */ --ui-bg: #12151c; --ui-surface: #1c212d; --ui-line: #262c3a; --ui-ink: #eef1f7; --ui-soft: #8b96ab; --ui-accent: #7a8cff; --ui-accent-soft: rgba(122, 140, 255, .16); --ui-gold: #e2b84a; /* Variabel bawaan app.css */ --navy: #0b0e14; --ink: #eef1f7; --muted: #8b96ab; --line: #262c3a; --soft: #1c212d; --gold: #e2b84a; } /* ===================================================================== TABEL Judul kolom tetap diberi warna agar terpisah dari isinya. ===================================================================== */ html[data-tema="gelap"] thead th, html[data-tema="gelap"] .table th, html[data-tema="gelap"] .clean-table th, html[data-tema="gelap"] .leads-table th { background-color: rgba(24, 28, 38, .92) !important; color: #7b8699 !important; border-bottom-color: #262c3a !important; } html[data-tema="gelap"] tbody tr { border-bottom: 1px solid #232936; } html[data-tema="gelap"] td { color: #c3cbda; border-color: #232936; } html[data-tema="gelap"] tbody tr:hover td { background-color: rgba(122, 140, 255, .08) !important; } /* Baris terpilih (mis. bulan aktif di Marketing KPI). */ html[data-tema="gelap"] .selected-period td { background-color: rgba(34, 197, 94, .14) !important; color: #eef1f7 !important; } /* ===================================================================== DONAT SALES FUNNEL --------------------------------------------------------------------- Lubang tengah donat aslinya `background:#fff` — BURAM. Konversi otomatis mengubahnya menjadi rgba(28,33,45,.82) yang tembus pandang, sehingga warna segmen di belakangnya menembus dan tampak sebagai bercak gelap berwarna. Cincin jadi terlihat tidak simetris padahal ukurannya benar. Pelajaran umum: elemen yang berfungsi sebagai PENUTUP harus tetap buram, tidak boleh diberi alfa. ===================================================================== */ html[data-tema="gelap"] .sales-donut::after { background: #1c212d !important; box-shadow: inset 0 0 0 1px #2a3140 !important; } html[data-tema="gelap"] .sales-donut { box-shadow: 0 8px 22px rgba(0, 0, 0, .35); } /* ===================================================================== WARNA SALES FUNNEL — mode gelap Sedikit lebih terang daripada versi mode terang, karena warna yang sama terlihat lebih redup di latar gelap. ===================================================================== */ html[data-tema="gelap"] { --funnel-qualified: #3b82f6; --funnel-hot: #8b5cf6; --funnel-rab: #f97316; --funnel-closing: #c8dd0a; --funnel-lain: #414c5e; } /* ------------------------------------------- bagian lipat, mode gelap */ html[data-tema="gelap"] .lipat { background: rgba(28, 33, 45, .82); border-color: #2a3140; } html[data-tema="gelap"] .lipat.closing-stage { background: rgba(22, 48, 38, .55); border-color: rgba(52, 130, 100, .45); } html[data-tema="gelap"] .lipat-kepala:hover { background: rgba(122, 140, 255, .08); } html[data-tema="gelap"] .lipat-judul { color: #eef1f7; } html[data-tema="gelap"] .lipat-ringkas { color: #8b96ab; } html[data-tema="gelap"] .lipat-panah { color: #7b8699; } html[data-tema="gelap"] .lipat-jumlah { background: rgba(255, 255, 255, .09); color: #c3cbda; } html[data-tema="gelap"] .lipat.closing-stage .lipat-jumlah { background: #20a36a; color: #06120c; } /* ------------------------- kelola tahap & riwayat update, mode gelap */ html[data-tema="gelap"] .tahap-info { color: #8b96ab; } html[data-tema="gelap"] .tahap-baris, html[data-tema="gelap"] .ru-item { background: rgba(28, 33, 45, .7); border-color: #2a3140; } html[data-tema="gelap"] .tahap-nama, html[data-tema="gelap"] .ru-judul { color: #eef1f7; } html[data-tema="gelap"] .tahap-opsi { background: rgba(255, 255, 255, .06); border-color: #333b4d; color: #98a3b8; } html[data-tema="gelap"] .tahap-opsi:hover { color: #a9b6ff; border-color: rgba(122,140,255,.45); } html[data-tema="gelap"] .tahap-baris .tahap-opsi.aktif:nth-child(1) { background: #64748b; color: #eef1f7; } html[data-tema="gelap"] .tahap-baris .tahap-opsi.aktif:nth-child(2) { background: #5b6ef5; color: #fff; } html[data-tema="gelap"] .tahap-baris .tahap-opsi.aktif:nth-child(3) { background: #20a36a; color: #06120c; } html[data-tema="gelap"] .ru-tahap { background: rgba(122,140,255,.16); color: #a9b6ff; } html[data-tema="gelap"] .ru-persen { color: #6ee7a5; } html[data-tema="gelap"] .ru-catatan { color: #8b96ab; } html[data-tema="gelap"] .ru-tgl, html[data-tema="gelap"] .ru-foto { color: #7b8699; } /* ------------------------------------- menu kartu proyek, mode gelap */ html[data-tema="gelap"] .kartu-menu-tombol { background: rgba(255, 255, 255, .06); border-color: #333b4d; color: #b9c2d2; } html[data-tema="gelap"] .kartu-menu-tombol:hover, html[data-tema="gelap"] .kartu-menu.buka .kartu-menu-tombol { background: rgba(255, 255, 255, .1); border-color: rgba(122, 140, 255, .5); color: #a9b6ff; } html[data-tema="gelap"] .kartu-dropdown { background: rgba(30, 35, 48, .97); border-color: #333b4d; box-shadow: 0 20px 46px -22px rgba(0, 0, 0, .8); } html[data-tema="gelap"] .kartu-menu-item { color: #b9c2d2; } html[data-tema="gelap"] .kartu-menu-item:hover { background: rgba(122, 140, 255, .13); color: #a9b6ff; } html[data-tema="gelap"] .kartu-menu-item svg { color: #7b8699; } html[data-tema="gelap"] .kartu-menu-item:hover svg { color: #a9b6ff; } /* Kartu yang menunya terbuka — mode gelap */ html[data-tema="gelap"] .field-project-card.menu-aktif { box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }