/** * Scrollbar mengikuti tema: default terang, html.dark untuk gelap. * Pakai class .dark di (sama seperti Tailwind darkMode: 'class'). */ html { color-scheme: light; } html.dark { color-scheme: dark; } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: #94a3b8 #e2e8f0; } html.dark * { scrollbar-color: #52525b #262626; } /* Chromium, Safari, Edge */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: #e2e8f0; } *::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; border: 2px solid #e2e8f0; } *::-webkit-scrollbar-thumb:hover { background: #64748b; } html.dark *::-webkit-scrollbar-track { background: #262626; } html.dark *::-webkit-scrollbar-thumb { background: #52525b; border-color: #262626; } html.dark *::-webkit-scrollbar-thumb:hover { background: #71717a; } /** * Drawer sidebar HP: saat tertutup (-translate-x-full) elemen tetap fixed + z-index tinggi. * Tanpa ini, beberapa browser/WebView masih menangkap pointer di area header sehingga * tombol hamburger terasa “tidak merespons”. */ #mobileSidebar.-translate-x-full { pointer-events: none; } /** * Panel shell (semua halaman): hamburger = mode < lg, sidebar lebar = mode >= lg (1024px, sama Tailwind). * Tanpa ini, utilitas responsive kadang tampil bersamaan (hamburger + sidebar) sehingga klik * hamburger tampak mati — drawer #mobileSidebar masih di-hidden lewat lg:hidden. */ @media (min-width: 1024px) { #hamburgerBtn { display: none !important; } } @media (max-width: 1023px) { #desktopSidebar { display: none !important; } } /* Hamburger di atas teks/header biasa, tetap di bawah drawer umum z-40 */ @media (max-width: 1023px) { #hamburgerBtn { position: relative; z-index: 35; } } /** * Page header: judul + badge + deskripsi tetap di atas; hanya #pageScroll yang scroll. * Pasangan layout:
+ #pageHeader + #pageScroll */ .panel-page-main { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; min-width: 0; overflow: hidden; } #pageHeader { flex-shrink: 0; } #pageScroll { flex: 1 1 0%; min-height: 0; overflow-y: auto; } /* Tombol filter sheet di halaman chat (bank / ewallet / pulsa / wd) */ #sheetFilterBtn { flex-shrink: 0; } #sheetFilterBtn svg { display: block; } /* Dashboard — nomor aktif + pita brand */ #danaSlotsGearBtn svg { display: block; } .dana-slot-card { position: relative; overflow: visible; } .dana-slot-card--tagged { padding-top: 0.35rem; padding-right: 0.15rem; } /* Sudut kanan atas — pita dipotong oleh wrap, bukan oleh kartu */ .dana-slot-ribbon-corner { position: absolute; top: 0; right: 0; z-index: 2; width: 54px; height: 54px; overflow: hidden; border-top-right-radius: 0.5rem; pointer-events: none; } .dana-slot-ribbon { display: block; position: absolute; top: 12px; right: -22px; width: 76px; padding: 3px 0; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; line-height: 1.25; transform: rotate(45deg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); pointer-events: none; } .dana-ribbon-tiara { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; } .dana-ribbon-tts { background: linear-gradient(135deg, #f59e0b, #d97706); color: #1c1917; } .dana-ribbon-ttm { background: linear-gradient(135deg, #9333ea, #7e22ce); color: #fff; } [data-slot-key] { cursor: pointer; } [data-slot-key]:hover { border-color: rgb(59 130 246); } /* Dashboard — tabel daftar nomor */ .dana-daftar-table thead th { padding: 0.55rem 0.75rem; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #052e16; background: linear-gradient(180deg, #4ade80, #22c55e); border-bottom: 2px solid #16a34a; white-space: nowrap; } .dana-daftar-table tbody td { padding: 0.5rem 0.75rem; font-size: 12px; color: #0f172a; border-bottom: 1px solid #e2e8f0; vertical-align: middle; } .dark .dana-daftar-table tbody td { color: #e2e8f0; border-bottom-color: #2a2a2a; } .dana-daftar-row-alt td { background: #f8fafc; } .dark .dana-daftar-row-alt td { background: #1a1a1a; } .dana-pill { display: inline-flex; align-items: center; justify-content: center; width: 6.25rem; height: 1.4rem; padding: 0 0.5rem; border-radius: 9999px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04); box-sizing: border-box; } /* STOCK — sky biru: tersedia, fresh */ .dana-pill-status-stock { background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff; border-color: rgba(2, 132, 199, 0.55); } /* LIMIT — merah gelap, teks kuning */ .dana-pill-status-limit { background: linear-gradient(135deg, #991b1b, #450a0a); color: #facc15; border-color: rgba(69, 10, 10, 0.7); } /* PAKE TIARA — merah penuh */ .dana-pill-status-tiara { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; border-color: rgba(185, 28, 28, 0.6); } /* PAKE TTS — gradien hijau, teks putih */ .dana-pill-status-tts { background: linear-gradient(135deg, #4ade80, #15803d); color: #fff; border-color: rgba(21, 128, 61, 0.6); } /* PAKE TTM — gradien ungu, teks putih */ .dana-pill-status-ttm { background: linear-gradient(135deg, #c084fc, #6b21a8); color: #fff; border-color: rgba(107, 33, 168, 0.6); } /* Fallback (jika status tidak dikenali) */ .dana-pill-status-default { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; border-color: rgba(100, 116, 139, 0.55); } /* LEPAS — gradien merah */ .dana-pill-posisi-lepas { background: linear-gradient(135deg, #f87171, #b91c1c); color: #fff; border-color: rgba(185, 28, 28, 0.6); } .dana-status-trigger { display: inline-flex; align-items: center; padding: 0; background: transparent; border: 0; cursor: pointer; border-radius: 9999px; } .dana-status-trigger:hover .dana-pill { filter: brightness(1.05); transform: translateY(-1px); } .dana-status-trigger .dana-pill { transition: transform .12s, filter .12s; } .dana-pill-with-caret { gap: 0.3rem; } .dana-pill-caret { display: inline-flex; align-items: center; justify-content: center; opacity: 0.85; } .dana-status-opt { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; background: transparent; border: 0; cursor: pointer; } .dana-daftar-actions { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; white-space: nowrap; } .dana-daftar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #e2e8f0; background: #ffffff; color: #475569; transition: background-color .15s, border-color .15s, color .15s, transform .05s; cursor: pointer; } .dana-daftar-icon-btn:hover { transform: translateY(-1px); } .dana-daftar-icon-btn:active { transform: translateY(0); } .dark .dana-daftar-icon-btn { border-color: #3f3f46; background: #1e1e1e; color: #cbd5e1; } .dana-daftar-icon-btn--edit:hover { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; } .dark .dana-daftar-icon-btn--edit:hover { border-color: #1d4ed8; background: rgba(30, 58, 138, 0.35); color: #93c5fd; } .dana-daftar-icon-btn--del:hover { border-color: #dc2626; background: #fef2f2; color: #b91c1c; } .dark .dana-daftar-icon-btn--del:hover { border-color: #b91c1c; background: rgba(127, 29, 29, 0.35); color: #fca5a5; } /* PASANG — gradien kuning, teks hitam */ .dana-pill-posisi-pasang { background: linear-gradient(135deg, #fde047, #ca8a04); color: #0f172a; border-color: rgba(202, 138, 4, 0.6); }