/** * billing-look.css — overlay tampilan simpel (gaya billing admin) untuk SELURUH halaman. * * Cara kerja: middleware di app.js menyuntik atribut pada tag * * dan memuat file ini PALING AKHIR sebelum . * * Aturan main: * - Hanya meratakan permukaan (warna, border, radius, bayangan, tipografi). * - Tidak mengubah layout: lebar sidebar, collapse, drawer mobile, grid, clamp(), JS. * - Tidak mengedit theme.css / design-system.css / button-override.css. * - Halaman cetak invoice dikecualikan lewat gate path di middleware. * * Prefiks scope yang dipakai: * html[data-look]:not([data-look-family="public-pay"]) body → hampir semua halaman * html[data-look][data-look-family="admin"] body → admin + teknisi * html[data-look-family="public-pay"] → voucher/pembayaran publik (ringan) */ /* ═══════════════════════════════════════════════════════════ 1. TOKEN ═══════════════════════════════════════════════════════════ */ :root, html:not([data-theme="dark"]) { --bl-bg: #f8fafc; --bl-bg2: #ffffff; --bl-bg3: #f1f5f9; --bl-border: #e2e8f0; --bl-text: #0f172a; --bl-muted: #64748b; --bl-primary: #4f46e5; --bl-pdim: rgba(79, 70, 229, 0.12); --bl-success: #16a34a; --bl-sdim: rgba(22, 163, 74, 0.12); --bl-warning: #d97706; --bl-wdim: rgba(217, 119, 6, 0.12); --bl-danger: #dc2626; --bl-ddim: rgba(220, 38, 38, 0.12); --bl-info: #0284c7; --bl-idim: rgba(2, 132, 199, 0.12); --bl-neutral-dim: rgba(100, 116, 139, 0.12); --bl-sidebar: 240px; --bl-sidebar-collapsed: 70px; } html[data-theme="dark"] { color-scheme: dark; --bl-bg: #0d1117; --bl-bg2: #161b22; --bl-bg3: #21262d; --bl-border: rgba(240, 246, 252, 0.1); --bl-text: #e6edf3; --bl-muted: #7d8590; --bl-primary: #6366f1; --bl-pdim: rgba(99, 102, 241, 0.15); --bl-success: #3fb950; --bl-sdim: rgba(63, 185, 80, 0.15); --bl-warning: #d29922; --bl-wdim: rgba(210, 153, 34, 0.15); --bl-danger: #f85149; --bl-ddim: rgba(248, 81, 73, 0.15); --bl-info: #58a6ff; --bl-idim: rgba(88, 166, 255, 0.15); --bl-neutral-dim: rgba(125, 133, 144, 0.15); --bl-sidebar: 240px; --bl-sidebar-collapsed: 70px; } /* ═══════════════════════════════════════════════════════════ 2. BRIDGE TOKEN WARFINET Menimpa nilai token milik theme.css / design-system.css di level sehingga seluruh aturan lama otomatis memakai palet simpel. public-pay dikecualikan karena punya sistem token sendiri (--pv-*). ═══════════════════════════════════════════════════════════ */ html[data-look]:not([data-look-family="public-pay"]) body { --bg-0: var(--bl-bg); --bg-1: var(--bl-bg3); --bg-2: var(--bl-bg2); --panel: var(--bl-bg2); --panel-1: var(--bl-bg2); --panel-2: var(--bl-bg2); --border: var(--bl-border); --text: var(--bl-text); --text-muted: var(--bl-muted); --muted: var(--bl-muted); --primary: var(--bl-primary); --primary-color: var(--bl-primary); --primary-dark: var(--bl-primary); --success: var(--bl-success); --danger: var(--bl-danger); --warning: var(--bl-warning); --info: var(--bl-info); /* Gradasi diratakan jadi warna solid. Tetap berbentuk linear-gradient() supaya valid dipakai di background maupun background-image. */ --primary-gradient: linear-gradient(var(--bl-primary), var(--bl-primary)); --success-gradient: linear-gradient(var(--bl-success), var(--bl-success)); --danger-gradient: linear-gradient(var(--bl-danger), var(--bl-danger)); --warning-gradient: linear-gradient(var(--bl-warning), var(--bl-warning)); --info-gradient: linear-gradient(var(--bl-info), var(--bl-info)); /* Warna strip kartu statistik (modern-compact.css) */ --stat-modern-primary: var(--bl-primary); --stat-modern-success: var(--bl-success); --stat-modern-danger: var(--bl-danger); --stat-modern-warning: var(--bl-warning); --stat-modern-info: var(--bl-info); /* Bridge token Bootstrap: aplikasi memakai data-theme, bukan data-bs-theme. Tanpa ini, --bs-body-bg tetap putih sehingga popup kustom (bukan .modal) tidak ikut gelap. */ --bs-body-bg: var(--bl-bg2); --bs-body-color: var(--bl-text); --bs-secondary-color: var(--bl-muted); --bs-tertiary-bg: var(--bl-bg3); --bs-border-color: var(--bl-border); --bs-emphasis-color: var(--bl-text); background: var(--bl-bg); color: var(--bl-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-weight: 400; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; } /* ═══════════════════════════════════════════════════════════ 3. SHELL ADMIN / TEKNISI ═══════════════════════════════════════════════════════════ */ html[data-look][data-look-family="admin"] body .main-content { background: var(--bl-bg) !important; color: var(--bl-text); } /* Padding dibungkus media query. TANPA ini, padding desktop mematikan padding-top: 68px milik billing-sidebar.ejs dan konten tertutup navbar fixed. */ @media (min-width: 992px) { html[data-look][data-look-family="admin"] body .main-content { padding: 22px 20px !important; } } @media (max-width: 991.98px) { html[data-look][data-look-family="admin"] body .main-content { padding: 15px !important; padding-top: 68px !important; } } @media (max-width: 575.98px) { html[data-look][data-look-family="admin"] body .main-content { padding: 10px !important; padding-top: 60px !important; } } /* ── Sidebar: panel netral, bukan blok aksen ── Memakai nav#sidebar (ID) agar menang atas CSS inline di billing-sidebar.ejs. */ html[data-look-family="admin"] body nav#sidebar.sidebar, html[data-look-family="admin"][data-theme="dark"] body nav#sidebar.sidebar { background: var(--bl-bg2) !important; background-color: var(--bl-bg2) !important; background-image: none !important; color: var(--bl-text) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 600 !important; border-right: 1px solid var(--bl-border) !important; box-shadow: none !important; } html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) { width: var(--bl-sidebar) !important; min-width: var(--bl-sidebar) !important; max-width: var(--bl-sidebar) !important; } @media (min-width: 992px) { html[data-look-family="admin"] body .main-content:not(.sidebar-collapsed), html[data-look-family="admin"] body .d-flex.w-100 > .main-content:not(.sidebar-collapsed), html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) ~ .main-content, html[data-look-family="admin"] body #sidebar:not(.collapsed) ~ .main-content { margin-left: var(--bl-sidebar) !important; width: calc(100% - var(--bl-sidebar)) !important; max-width: calc(100vw - var(--bl-sidebar)) !important; } html[data-look-family="admin"] body .main-content.sidebar-collapsed, html[data-look-family="admin"] body nav#sidebar.sidebar.collapsed ~ .main-content, html[data-look-family="admin"] body #sidebar.collapsed ~ .main-content { margin-left: var(--bl-sidebar-collapsed) !important; width: calc(100% - var(--bl-sidebar-collapsed)) !important; max-width: calc(100vw - var(--bl-sidebar-collapsed)) !important; } } html[data-look-family="admin"] body nav#sidebar.sidebar .billing-sidebar-toolbar { background: transparent !important; border-bottom: 1px solid var(--bl-border) !important; padding: 8px 16px !important; gap: 0 !important; } html[data-look-family="admin"] body nav#sidebar.sidebar .billing-sidebar-toolbar-toggle, html[data-look-family="admin"] body nav#sidebar.sidebar .billing-sidebar-toolbar-theme { width: 32px !important; height: 32px !important; } html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) > a, html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) .sidebar-submenu a { color: var(--bl-text) !important; background: transparent !important; border-left: 3px solid transparent !important; border-radius: 0 !important; font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important; padding: 9px 16px !important; margin: 1px 0 !important; gap: 10px; box-shadow: none !important; text-shadow: none !important; transform: none !important; -webkit-font-smoothing: subpixel-antialiased; } html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) > a *, html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) > a i, html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) .sidebar-submenu a *, html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) .sidebar-submenu a i { color: inherit !important; text-shadow: none !important; } html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) > a:hover, html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) .sidebar-submenu a:hover { color: var(--bl-text) !important; background: var(--bl-bg3) !important; transform: none !important; } html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) > a.active, html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) .sidebar-submenu a.active { color: var(--bl-primary) !important; background: var(--bl-pdim) !important; border-left-color: var(--bl-primary) !important; } html[data-look-family="admin"] body nav#sidebar.sidebar a[href="/admin/logout"], html[data-look-family="admin"] body nav#sidebar.sidebar a[href="/admin/logout"] *, html[data-look-family="admin"] body nav#sidebar.sidebar a[href="/teknisi/logout"], html[data-look-family="admin"] body nav#sidebar.sidebar a[href="/teknisi/logout"] * { color: var(--bl-danger) !important; } html[data-look-family="admin"] body nav#sidebar.sidebar .sidebar-section-header, html[data-look-family="admin"] body nav#sidebar.sidebar .sidebar-section-header * { color: var(--bl-muted) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; background: transparent !important; text-shadow: none !important; opacity: 1; } html[data-look-family="admin"] body nav#sidebar.sidebar .sidebar-section-header { padding: 14px 16px 5px !important; margin: 0 !important; border-radius: 0 !important; transform: none !important; } html[data-look-family="admin"] body nav#sidebar.sidebar .sidebar-section-header:hover, html[data-look-family="admin"] body nav#sidebar.sidebar .sidebar-section-header.active { background: transparent !important; transform: none !important; } html[data-look-family="admin"] body nav#sidebar.sidebar .sidebar-submenu, html[data-look-family="admin"] body nav#sidebar.sidebar .sidebar-submenu.show { margin: 0 !important; padding: 0 0 4px !important; border: none !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } html[data-look-family="admin"] body nav#sidebar.sidebar:not(.collapsed) .sidebar-submenu a { padding: 8px 16px 8px 34px !important; margin: 1px 0 !important; border-radius: 0 !important; font-size: 13px !important; font-weight: 700 !important; animation: none !important; } html[data-look-family="admin"] body nav#sidebar.sidebar .billing-sidebar-nav-first { margin-top: 4px !important; padding-top: 9px !important; } html[data-look-family="admin"] body nav#sidebar.sidebar a i, html[data-look-family="admin"] body nav#sidebar.sidebar a .bi { margin-right: 10px !important; width: 18px !important; min-width: 18px !important; font-size: 15px !important; } /* Hapus garis hias antar item (penyebab UI ramai) */ html[data-look-family="admin"] body nav#sidebar.sidebar > a::after, html[data-look-family="admin"] body nav#sidebar.sidebar > .sidebar-section-header::after, html[data-look-family="admin"] body nav#sidebar.sidebar .sidebar-submenu a::after { content: none !important; display: none !important; box-shadow: none !important; } html[data-look-family="admin"] body nav#sidebar.sidebar.collapsed > a i, html[data-look-family="admin"] body nav#sidebar.sidebar.collapsed > a .bi { color: var(--bl-text) !important; } html[data-look-family="admin"] body nav#sidebar.sidebar.collapsed > a.active i, html[data-look-family="admin"] body nav#sidebar.sidebar.collapsed > a.active .bi { color: var(--bl-primary) !important; } /* Navbar mobile: slate netral (bukan warna aksen). Tetap gelap agar teks putih yang dipaksa !important di sidebar tetap terbaca. */ html[data-look][data-look-family="admin"] body .navbar.navbar-dark.mobile-navbar, html[data-look][data-look-family="admin"] body .mobile-navbar { background: #1f2937 !important; background-color: #1f2937 !important; background-image: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; } html[data-look-family="admin"] body .billing-sidebar-mobile-fab { background: var(--bl-primary) !important; color: #fff !important; box-shadow: none !important; } html[data-look-family="admin"] body .theme-toggle-btn { color: var(--bl-muted) !important; background: transparent !important; border: 1px solid var(--bl-border) !important; transform: none !important; box-shadow: none !important; } html[data-look][data-look-family="admin"] body .page-header-wrapper, html[data-look][data-look-family="admin"] body .dashboard-date-header { background: transparent !important; box-shadow: none !important; border: none !important; } /* ═══════════════════════════════════════════════════════════ 4. KARTU ═══════════════════════════════════════════════════════════ */ html[data-look]:not([data-look-family="public-pay"]) body .card::after, html[data-look]:not([data-look-family="public-pay"]) body .main-content .card::after { content: none !important; display: none !important; } html[data-look]:not([data-look-family="public-pay"]) body .card, html[data-look]:not([data-look-family="public-pay"]) body .main-content .card, html[data-look]:not([data-look-family="public-pay"]) body .dashboard-card, html[data-look]:not([data-look-family="public-pay"]) body .dashboard-chart-card, html[data-look]:not([data-look-family="public-pay"]) body .dashboard-list-card, html[data-look]:not([data-look-family="public-pay"]) body .customers-table-panel, html[data-look]:not([data-look-family="public-pay"]) body .list-wrapper, html[data-look]:not([data-look-family="public-pay"]) body .invoice-list-wrapper, html[data-look]:not([data-look-family="public-pay"]) body .form-section, html[data-look]:not([data-look-family="public-pay"]) body .settings-card, html[data-look]:not([data-look-family="public-pay"]) body .panel, html[data-look]:not([data-look-family="public-pay"]) body .info-card { background: var(--bl-bg2) !important; border: 1px solid var(--bl-border) !important; border-radius: 12px !important; box-shadow: none !important; margin-bottom: 18px !important; } html[data-look]:not([data-look-family="public-pay"]) body .card-header, html[data-look]:not([data-look-family="public-pay"]) body .card .card-header { background: transparent !important; background-image: none !important; border-bottom: 1px solid var(--bl-border) !important; border-radius: 12px 12px 0 0 !important; color: var(--bl-text) !important; font-size: 13px !important; font-weight: 600 !important; padding: 14px 18px !important; } html[data-look]:not([data-look-family="public-pay"]) body .card-header * { color: var(--bl-text) !important; } html[data-look]:not([data-look-family="public-pay"]) body .card-body { color: var(--bl-text); padding: 18px !important; } html[data-look]:not([data-look-family="public-pay"]) body .card-footer { padding: 14px 18px !important; border-color: var(--bl-border) !important; background: transparent !important; } html[data-look]:not([data-look-family="public-pay"]) body .card:hover { transform: none !important; box-shadow: none !important; } /* ═══════════════════════════════════════════════════════════ 5. KARTU STATISTIK — strip tipis di atas ═══════════════════════════════════════════════════════════ */ html[data-look]:not([data-look-family="public-pay"]) body .stat-card-modern, html[data-look]:not([data-look-family="public-pay"]) body .pppoe-stat-card, html[data-look]:not([data-look-family="public-pay"]) body .admin-stat-card, html[data-look]:not([data-look-family="public-pay"]) body .billing-stat-card, html[data-look]:not([data-look-family="public-pay"]) body .stat-card, html[data-look]:not([data-look-family="public-pay"]) body .stats-card { background: var(--bl-bg2) !important; border: 1px solid var(--bl-border) !important; border-radius: 12px !important; box-shadow: none !important; position: relative !important; overflow: hidden !important; } /* dashboard.ejs menyetel bayangan lewat