html { font-size: 14px; /* sendiri `background: transparent` bawaan (cuma yang dikasih warna tema lewat --tblr-body-bg) — biasanya tidak masalah krn full-cover viewport. TAPI user lapor ada garis putih tipis di paling atas halaman (screenshot: tema dark, garis putih horizontal penuh lebar persis di atas navbar+sidebar) — sidebar/body TERUKUR benar (top:0, tidak ada margin/padding aneh) di pengujian, jadi kemungkinan besar celah sub- piksel dari kombinasi `.app-sticky-header{position:sticky}` + scaling/zoom display bukan 100% (umum di laptop Windows), yang bisa "membocorkan" 1-2px kanvas putih default browser di baliknya kalau sendiri transparan. Fix defensif: kasih warna background yang SAMA persis dgn (var Tabler yang sama), supaya APAPUN penyebab celahnya, yang kelihatan tetap warna tema yang benar — bukan putih mentah. */ background-color: var(--tblr-body-bg, #fff); } :root { --tblr-font-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } /* Kolom readonly (mis. Email/Organization/Role terkunci di Edit User) sekarang tampil abu-abu, biar user tahu field itu terkunci. PAKAI --tblr-secondary-bg (bukan --tblr-bg-surface-secondary yang dipakai Tabler bawaan utk .form-control:disabled) — diverifikasi via browser nyata bahwa --tblr-bg-surface-secondary ekuivalen dgn --tblr-bg-forms (background .form-control BIASA) di tema dark (keduanya resolve ke gray-900 yang sama), jadi TIDAK kelihatan bedanya di dark mode kalau dipakai apa adanya. --tblr-secondary-bg beda nyata di kedua tema (light #e5e7eb vs body putih, dark #1f2937 vs body #111827) — otomatis theme-aware tanpa blok [data-bs-theme="dark"] terpisah, var-nya sendiri sudah di-redefine ulang oleh tabler.min.css per tema. */ .form-control[readonly] { background-color: var(--tblr-secondary-bg); color: var(--tblr-secondary); cursor: not-allowed; opacity: 1; } /* Modal form yang di-load via AJAX ke #modalContent (semua form Tambah/Ubah Master, mis. Edit Pengguna) dibungkus
LANGSUNG di dalam .modal-content, bukan .modal-header/.modal-body/ .modal-footer sbg anak langsung spt struktur modal Bootstrap normal. .modal-content sendiri `display:flex;flex-direction:column` — dan `.modal-dialog-scrollable .modal-body{overflow-y:auto}` HANYA bisa membatasi tinggi .modal-body kalau dia jadi flex ITEM LANGSUNG .modal-content. yang menyisip di tengah (block, bukan flex item) memutus rantai itu — .modal-body jadi tidak pernah kebatasi tinggi, tidak bisa discroll, dan di layar pendek/resolusi kecil tombol Simpan di footer ketutup/tidak kejangkau. `display:contents` bikin "transparan" dari layout (anak- anaknya otomatis jadi flex item LANGSUNG .modal-content) TANPA mengubah perilaku submit form sama sekali — fix generik, berlaku ke SEMUA modal Master yang pakai pola sama, bukan cuma Edit Pengguna. */ .modal-content > form { display: contents; } .pertamina-brand { display: inline-flex; align-items: center; gap: 5px; } .pertamina-brand .navbar-brand-image-full { height: 28px; width: auto; } /* Logo baru (Step 86) py teks "PERTAMINA"/"HULU ENERGI" hitam+merah baked-in. Teks "PERTAMINA" di-recolor jadi putih (icon segitiga + "HULU ENERGI" merah TIDAK disentuh) via script Python (replace pixel near-black grayscale, bukan CSS filter yg akan ikut ngerusak warna icon) — hasilnya file terpisah `-dark.png`, di-toggle sesuai tema persis pola wordmark-light/wordmark-dark lama, TANPA perlu chip background lagi (navbar gelap asli sudah cukup, teks sekarang memang putih). */ .pertamina-brand .logo-dark { display: none; } [data-bs-theme="dark"] .pertamina-brand .logo-light { display: none; } [data-bs-theme="dark"] .pertamina-brand .logo-dark { display: inline; } body { font-size: 1rem; } button, input, select, textarea { font: inherit; } /* Jarak icon-text konsisten di tombol/menu (global, semua fitur) — banyak markup lama cuma dipisah 1 spasi HTML/  gak konsisten, kegencet begitu icon FontAwesome kerender normal. Catatan: gak bisa pakai :not(:last-child) buat exclude tombol icon-only — teks polos sesudah icon (bukan dibungkus elemen) gak dihitung "child" di CSS, jadi icon tetap kehitung last-child walau ada teks nempel sesudahnya. Jadi margin dikasih ke SEMUA icon FontAwesome di dalam tombol/menu (tombol icon-only kena geser dikit ke kiri, trade-off kecil yang lebih diterima daripada icon+text kegencet di mana-mana). */ .btn i[class*="fa-"], .dropdown-item i[class*="fa-"], .nav-link i[class*="fa-"], .page-link i[class*="fa-"] { margin-right: .4rem; } /* Tombol icon-only yang emang perlu presisi center (trigger Action dst) — cancel margin */ .btn-icon-action i[class*="fa-"] { margin-right: 0; } /* Tombol close (X) bulat merah + icon putih — dipakai di modal Riwayat (History) Manajemen Kasus. TIDAK pakai class Bootstrap bawaan `.btn-close` (icon-nya background-image SVG, tidak bisa diisi FontAwesome/direcolor lewat CSS biasa) — dibikin custom biar warna background+icon bisa diatur eksplisit sesuai permintaan (merah/putih), bukan abu-abu default. Posisi ABSOLUTE dipin ke pojok kanan-atas modal (bukan flex sibling di sebelah judul) — user minta "di sebelah kanan saja jangan di samping judul", jadi dilepas dari alur flex header (yang taruh dia tepat sesudah
) dan dipatok ke pojok modal-header, konsisten pola close-button modal pada umumnya. `.modal-header` parent butuh `position-relative` (utility Bootstrap) supaya absolute ini relatif thd modal-header, bukan ke atas. */ .btn-close-danger { position: absolute; top: 12px; right: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--tblr-danger, #d63939); color: #fff; border: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; transition: filter .15s ease, transform .15s ease; } .btn-close-danger i[class*="fa-"] { margin-right: 0; } .btn-close-danger:hover { filter: brightness(0.9); transform: scale(1.05); } .swal2-popup, .swal2-title, .swal2-html-container, .swal2-confirm, .swal2-cancel, .swal2-input, .swal2-select, .swal2-textarea { font-size: 14px !important; } /* Saat hover sidebar, dorong content */ .sidebar-mini.sidebar-collapse .main-sidebar:hover ~ .content-wrapper { margin-left: 250px !important; } .sidebar-mini.sidebar-collapse .main-sidebar:hover ~ .main-footer { margin-left: 250px !important; } /* Default collapsed */ .sidebar-mini.sidebar-collapse .content-wrapper { margin-left: 4.6rem; transition: margin-left 0.3s ease; } /* Animasi */ .content-wrapper { transition: margin-left 0.3s ease; } /*Data Table*/ .dt-full-height .dataTables_scrollBody { height: calc(100vh - 200px) !important; } .wizard-steps { display: flex; justify-content: space-between; margin-bottom: 30px; } .step { flex: 1; text-align: center; position: relative; } /* ===== GARIS KIRI ===== */ .step::before { content: ""; position: absolute; top: 22px; left: -50%; width: 100%; height: 3px; background: var(--tblr-border-color, #dee2e6); z-index: 0; } /* ===== GARIS KANAN ===== */ .step::after { content: ""; position: absolute; top: 22px; right: -50%; width: 100%; height: 3px; background: var(--tblr-border-color, #dee2e6); z-index: 0; } .step:first-child::before { display: none; } .step:last-child::after { display: none; } .step.completed::before { background: var(--tblr-success, #2fb344) !important; } .step.active::before { background: var(--tblr-success, #2fb344) !important; } /* ICON CIRCLE */ .step-circle { width: 45px; height: 45px; border-radius: 50%; background: var(--tblr-border-color, #dee2e6); color: var(--tblr-secondary-color); display: flex; align-items: center; justify-content: center; margin: auto; font-size: 18px; position: relative; z-index: 1; cursor: pointer; transition: transform .15s; } .step-circle:hover { transform: scale(1.05); } .step-circle-red { background: var(--tblr-danger, #d63939) !important; color: white; } /* ACTIVE */ .step.active .step-circle { background: var(--tblr-primary, #066fd1); color: white; } /* COMPLETED */ .step.completed .step-circle { background: var(--tblr-success, #2fb344); color: white; } /* Step yang belum kebuka (masih di depan currentStep) gak boleh kelihatan clickable — sebelumnya semua step-circle punya hover scale yang sama meski step itu locked (klik-nya di-block di JS, tapi visualnya nipu seolah bisa diklik). */ .step:not(.active):not(.completed) .step-circle { cursor: not-allowed; } .step:not(.active):not(.completed) .step-circle:hover { transform: none; } /* LABEL */ .step-label { margin-top: 6px; font-size: 13px; } /* row manual*/ .form-row-1 { min-height: calc(1.5em * 1); } .form-row-2 { min-height: calc(1.5em * 2); } .form-row-3 { min-height: calc(1.5em * 3); } .form-row-4 { min-height: calc(1.5em * 4); } /**for history*/ .timeline { position: relative; margin-left: 10px; } .timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--tblr-border-color); } .timeline-item { position: relative; padding-left: 50px; margin-bottom: 25px; } .timeline-icon { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 1; font-size: 14px; } .timeline-content { background: var(--tblr-bg-surface-secondary); border-radius: 10px; padding: 15px; border: 1px solid var(--tblr-border-color); } /* ===================== Navbar ===================== */ .app-navbar { border-bottom: 1px solid var(--tblr-border-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); } .nav-toggle-btn, .app-icon-btn { border-radius: 8px; transition: background-color .15s ease, color .15s ease; } .nav-toggle-btn:hover, .app-icon-btn:hover { background: var(--tblr-active-bg); color: var(--tblr-primary); } .app-user-toggle { padding: 4px 10px; border-radius: 10px; text-decoration: none; transition: background-color .15s ease; } .app-user-toggle:hover, .app-user-toggle[aria-expanded="true"] { background: var(--tblr-active-bg); } .app-user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--tblr-border-color); } .app-user-info { margin-left: 10px; line-height: 1.2; } .app-user-name { font-weight: 600; font-size: .85rem; color: var(--tblr-body-color); } .app-user-role { font-size: .72rem; color: var(--tblr-secondary-color); text-transform: capitalize; } .app-user-caret { font-size: .6rem; margin-left: 10px; color: var(--tblr-secondary-color); transition: transform .2s ease; } .app-user-toggle[aria-expanded="true"] .app-user-caret { transform: rotate(180deg); } .app-user-menu { min-width: 250px; border-radius: 12px; border: none; padding: 0; overflow: hidden; margin-top: 10px !important; } .app-user-menu-header { display: flex; gap: 10px; align-items: center; padding: 14px 16px; background: var(--tblr-bg-surface-secondary, var(--tblr-active-bg)); } .app-user-menu-header .app-user-avatar { width: 42px; height: 42px; } .app-user-email { font-size: .75rem; } .app-user-menu .dropdown-item { padding: 10px 16px; font-size: .85rem; transition: background-color .15s ease; } .app-user-menu .dropdown-item:hover { background: var(--tblr-danger-lt); } /* ===================== Sidebar ===================== */ .sidebar-search-box { position: relative; } .sidebar-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tblr-secondary-color); font-size: .8rem; pointer-events: none; } .sidebar-search-input { width: 100%; background: var(--tblr-active-bg); border: 1px solid var(--tblr-border-color); color: var(--tblr-body-color); border-radius: 8px; padding: 8px 10px 8px 34px; font-size: .82rem; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .sidebar-search-input::placeholder { color: var(--tblr-secondary-color); } .sidebar-search-input:focus { outline: none; background: var(--tblr-bg-surface); border-color: var(--tblr-primary); box-shadow: 0 0 0 3px rgba(6, 111, 209, 0.12); } .sidebar-search-box:focus-within .sidebar-search-icon { color: var(--tblr-primary); } .sidebar-search-empty { color: var(--tblr-secondary-color); font-size: .75rem; text-align: center; padding: 8px 0 0; } .nav-sidebar { padding: 0 .6rem; } .nav-sidebar > .nav-item { margin-bottom: 3px; } .nav-sidebar .nav-link { border-radius: 8px; transition: background-color .15s ease, transform .1s ease; } .nav-sidebar .nav-link:hover { transform: translateX(2px); } .nav-sidebar .nav-item.menu-open > .nav-link { background: var(--tblr-active-bg); color: var(--tblr-body-color); } .nav-sidebar .nav-item.active > .nav-link, .nav-sidebar .nav-link.active { position: relative; } .nav-sidebar .nav-item.active > .nav-link::before, .nav-sidebar .nav-link.active::before { content: ""; position: absolute; left: -.6rem; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--tblr-primary); } .nav-sidebar .nav-treeview { position: relative; margin: 2px 0 4px; padding-left: 1.1rem !important; } .nav-sidebar .nav-treeview::before { content: ""; position: absolute; left: .55rem; top: 2px; bottom: 10px; width: 1px; background: var(--tblr-border-color); } .nav-sidebar .nav-treeview .nav-item { margin: 0 0 2px; } .nav-sidebar .nav-treeview .nav-item .nav-link { padding-top: .45rem; padding-bottom: .45rem; font-size: .87rem; } /* Header tabel dibesarkan biar tegas beda dari body/detail row — default Tabler (.75rem, uppercase, abu-abu) justru lebih KECIL dari body (.875rem), jadi kurang menonjol secara visual walau warnanya beda. Sengaja target `.table thead th` generik (bukan cuma `.simple-table`) — DataTables (`table.dataTable`), simple-table.js, dan tabel custom Case Management semua pakai class dasar `.table` yang sama, jadi satu rule ini otomatis berlaku ke SEMUA tabel di app tanpa perlu sentuh tiap halaman. */ .table thead th { font-size: 0.95rem; font-weight: 600; } /* ===================== Simple Table (pengganti DataTables, lihat simple-table.js) ===================== */ .simple-table.table-loading tbody { opacity: .4; pointer-events: none; transition: opacity .15s ease; } .simple-table thead th.sortable-col { cursor: pointer; user-select: none; } .simple-table thead th.sortable-col:hover { background-color: var(--tblr-active-bg, rgba(0, 0, 0, .04)); } .simple-table .sort-icon { margin-left: 6px; font-size: .7rem; color: var(--tblr-secondary, #8891a5); } .simple-table .sort-icon.active { color: var(--tblr-primary, #4e73df); } /* Baris filter per-kolom (lihat buildColumnFilters() di simple-table.js DAN Index.cshtml Case Management yang replikasi pola sama) — generik TANPA prefix `.simple-table` sengaja, supaya berlaku juga ke tabel custom Case Management (`#reqTable`, bukan pemakai simple-table.js). Font normal (bukan ikut ukuran/weight header di atas) biar jelas ini area input, bukan label. Default `d-none` (Step 110, JS) — dibuka via icon filter header. */ thead tr.column-filter-row th { padding: .35rem .5rem; font-weight: 400; } .column-filter-input { font-size: .8rem; } /* Select2 versi kompak khusus picker filter kolom (Step 111) — override Select2 global (site.css atas, "restyle menyatu dgn .form-control") ditujukan utk .form-control UKURAN PENUH (dipakai form Create/Edit di modal, ~46px), TERLALU BESAR utk baris filter kolom yang sempit (font-size .75-.8rem, setara .form-control-sm Tabler). Scoped KHUSUS ke dalam .column-filter-row supaya TIDAK mempengaruhi select2 form biasa di modal. */ thead tr.column-filter-row .select2-container--default .select2-selection--single { height: calc(1.25rem + .625rem + calc(var(--tblr-border-width, 1px) * 2)); border-radius: var(--tblr-border-radius-sm, 4px); } thead tr.column-filter-row .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.25rem + .625rem + calc(var(--tblr-border-width, 1px) * 2)); padding-left: .5rem; padding-right: 1.75rem; font-size: .75rem; } thead tr.column-filter-row .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.25rem + .625rem + calc(var(--tblr-border-width, 1px) * 2)); right: .35rem; } /* Icon filter per-header (Step 110) — generik TANPA prefix `.simple-table`, pola sama `.column-filter-row` di atas, supaya berlaku ke simple-table.js DAN Case Management sekaligus. Hidden default, cuma muncul saat header di-hover (transisi opacity, bukan display:none, biar smooth) — KECUALI kolom itu py filter aktif (`.active`), yang SENGAJA selalu terlihat (opacity 1 permanen) supaya user tidak lupa ada filter jalan walau baris filternya sedang disembunyikan. */ .filter-icon { margin-left: 6px; font-size: .7rem; color: var(--tblr-secondary, #8891a5); cursor: pointer; opacity: 0; transition: opacity .15s ease, color .15s ease; } thead th:hover .filter-icon { opacity: .6; } .filter-icon:hover { opacity: 1 !important; color: var(--tblr-primary, #4e73df); } .filter-icon.active { opacity: 1; color: var(--tblr-primary, #4e73df); } .simple-table td.cell-truncate { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .simple-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; } .simple-table-search { position: relative; width: 240px; max-width: 100%; } .simple-table-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--tblr-secondary, #97a0b5); font-size: .8rem; } .simple-table-search input { padding-left: 30px; border-radius: 8px; } .simple-table-pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: .75rem; } /* Card view (< 992px) — card dibungkus di dalam , bukan container terpisah, biar klik tombol Action tetap bubble lewat # (delegated handler per halaman Master gak perlu diubah). Lihat buildCardRowHtml() di simple-table.js */ .simple-table-card-mode thead { display: none; } .simple-table-card-mode tbody tr.card-row > td { padding: 0; border: 0; } .simple-table-card-mode tbody tr.card-row:hover { background-color: transparent; } .simple-table-card-mode .card-row .card { border-radius: 10px; } .simple-table-card-mode .card-row .card-header { background-color: var(--tblr-bg-surface-secondary); } .simple-table-card-mode .card-row .card-body > div:last-child { border-bottom: 0 !important; } .empty-state-box { padding: 28px 12px; text-align: center; color: var(--tblr-secondary, #97a0b5); } .empty-state-box i { font-size: 1.8rem; margin-bottom: 8px; display: block; } .empty-state-box p { margin: 0; font-size: .85rem; } /* Sidebar mobile: tetap jadi off-canvas drawer (slide dari kiri), JANGAN collapse jadi top bar. Tabler cuma fixed-in .navbar-vertical.navbar-expand-lg mulai >=992px (lihat tabler.min.css) — di bawah itu defaultnya jatuh balik ke behavior navbar horizontal biasa Bootstrap. Override di sini paksa fixed+slide juga di mobile, ditoggle lewat #btnSidebarToggle (_NavbarTabler.cshtml). */ @media (max-width: 991.98px) { .navbar-vertical.navbar-expand-lg { position: fixed; top: 0; left: 0; bottom: 0; width: 15rem; z-index: 1035; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; } .navbar-vertical.navbar-expand-lg.mobile-show { transform: translateX(0); } /* Tanpa ini, container-fluid di dalam