:root { --color-primary: #1D4ED8; --color-primary-dark: #1E3A8A; --color-success: #22C55E; --color-warning: #F59E0B; --color-danger: #EF4444; --color-gray: #6B7280; --color-bg: #F3F4F6; --color-white: #FFFFFF; --color-border: #E5E7EB; --font-base: 14px; --sidebar-width: 240px; --sidebar-width-collapsed: 56px; } * { box-sizing: border-box; } /* ===== Skala tampilan halaman admin ===== Seluruh CSS di file ini memakai ukuran piksel absolut, bukan rem, jadi tidak ada satu variabel font yang bisa memperkecil halaman -- padahal di layar laptop tampilannya kebesaran dan user berakhir menekan Ctrl+- di setiap halaman. Satu `zoom` di elemen root memperkecil SEMUANYA sekaligus (header, sidebar, tabel, grafik, modal) persis seperti page zoom browser, tanpa harus menyisir ratusan nilai px satu per satu. Hanya dipasang di .app-admin -- class di milik app/Views/layouts/header.php. File ini dipakai juga oleh ESS dan halaman login yang punya sendiri, dan ESS dibuka di layar HP, di mana teks 15% lebih kecil justru menyusahkan. --ui-zoom BUKAN sekadar dokumentasi: assets/js/app.js membacanya lewat Hris.uiZoom() untuk mengubah koordinat viewport (getBoundingClientRect/clientX -- keduanya sudah ikut terskala) kembali ke koordinat lokal sebelum ditulis ke style.left/style.width. Kalau angka di sini diubah, JS ikut menyesuaikan sendiri; kalau dihapus, JS jatuh ke 1 dan tetap benar. */ :root { --ui-zoom: 1; } .app-admin { --ui-zoom: .85; zoom: var(--ui-zoom); } /* Matikan penyesuaian ukuran teks otomatis milik browser mobile (Chrome/Samsung Internet "font boosting"): ia membesarkan font di sebagian perangkat tanpa membesarkan kotaknya, sehingga teks meluber dari tombol/kolom. Ini TIDAK mematikan setelan ukuran font milik pengguna di level sistem, hanya heuristik otomatis browser. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: var(--font-base); background: var(--color-bg); color: #111827; } /* ===== Layout ===== */ .app-header { height: 60px; background: var(--color-white); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .app-header .brand { font-weight: 700; color: var(--color-primary-dark); font-size: 18px; } .header-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: 16px; font-weight: 600; color: #111827; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .app-header .user-menu { display: flex; align-items: center; gap: 12px; } .session-countdown { font-size: 12px; font-weight: 600; color: var(--color-gray); font-variant-numeric: tabular-nums; padding: 3px 8px; border-radius: 6px; background: #f3f4f6; } .session-countdown.session-countdown-warning { color: #b45309; background: #fef3c7; } .session-countdown.session-countdown-danger { color: #dc2626; background: #fee2e2; } .app-header .user-menu button { background: var(--color-danger); color: #fff; border: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; } .app-header .user-menu a.btn { display: inline-block; text-decoration: none; } /* ===== Sidebar (kiri) — sebelumnya top dropdown flyout, dikembalikan ke sidebar kiri sesuai permintaan. Interaksi accordion (klik expand/collapse), bukan lagi hover-flyout, karena sidebar kiri statis tidak butuh positioning fixed yang dihitung JS seperti nav horizontal sebelumnya. ===== */ .app-sidebar { position: fixed; top: 60px; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--color-white); border-right: 1px solid var(--color-border); overflow-y: auto; padding: 4px 0 16px; z-index: 90; } .sidebar-nav { display: flex; flex-direction: column; } .sidebar-link, .sidebar-group-toggle { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 16px; color: #374151; text-decoration: none; font-size: 12.5px; font-weight: 500; line-height: 1.3; background: transparent; border: none; border-left: 3px solid transparent; font-family: inherit; cursor: pointer; text-align: left; } .sidebar-group-toggle { justify-content: space-between; } .sidebar-group-toggle .sidebar-label { flex: 1; } .sidebar-icon { font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; } .sidebar-link:hover, .sidebar-link.active, .sidebar-group-toggle:hover, .sidebar-group-toggle.active { background: #EFF6FF; color: var(--color-primary); border-left-color: var(--color-primary); } .nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .6; transition: transform .15s ease; flex-shrink: 0; } /* Submenu dibuka KE SAMPING (kanan), bukan ke bawah — baik level 1 (langsung dari sidebar) maupun level 2 (nested, mis. Migration/Shift/Attendance). Posisi dihitung JS (lihat positionFlyout() di app.js) berdasar posisi tombol toggle-nya, sama seperti pola flyout yang dipakai top-nav sebelumnya, hanya arahnya sekarang ke kanan bukan ke bawah. */ .sidebar-submenu { display: none; position: fixed; min-width: 220px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 20px rgba(17,24,39,.12); padding: 4px 0; z-index: 150; } .sidebar-group.open > .sidebar-submenu { display: block; } .sidebar-submenu a { display: block; padding: 6px 16px; color: #374151; text-decoration: none; font-size: 13px; border-left: 3px solid transparent; } .sidebar-submenu a:hover, .sidebar-submenu a.active { background: #EFF6FF; color: var(--color-primary); border-left-color: var(--color-primary); } /* ===== Nested (2nd level) — flyout lagi ke kanan dari flyout level 1 ===== */ .nav-subdropdown { position: relative; } .nav-subdropdown-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: transparent; border: none; border-left: 3px solid transparent; padding: 6px 16px; color: #374151; font-size: 13px; font-family: inherit; cursor: pointer; text-align: left; } .nav-subdropdown-toggle:hover, .nav-subdropdown-toggle.active, .nav-subdropdown.open > .nav-subdropdown-toggle { background: #EFF6FF; color: var(--color-primary); border-left-color: var(--color-primary); } .nav-caret-right { border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid currentColor; border-right: none; opacity: .6; flex-shrink: 0; } .nav-submenu { display: none; position: fixed; min-width: 200px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 20px rgba(17,24,39,.12); padding: 4px 0; z-index: 160; } .nav-subdropdown.open > .nav-submenu { display: block; } /* ===== Sidebar ciut (ikon saja) ===== Class .sidebar-collapsed dipasang di -- BUKAN di .app-sidebar -- supaya .content-area (yang bukan turunan sidebar) ikut menyesuaikan margin kirinya lewat selector yang sama, dan supaya guard sinkron di bisa memasangnya sebelum halaman tergambar (lihat assets/js/sidebar-menu.js). Tanpa itu sidebar sempat tampil lebar lalu menciut di depan mata setiap kali pindah halaman. Submenu-nya TIDAK butuh aturan baru: flyout ke kanan + hover sudah jadi perilaku bawaan sidebar ini sejak dulu (positionSidebarFlyout() di app.js). Yang berubah cuma lebar sidebar dan label yang disembunyikan. */ .sidebar-collapsed .app-sidebar { width: var(--sidebar-width-collapsed); } .sidebar-collapsed .content-area { margin-left: var(--sidebar-width-collapsed); } /* Label & caret hilang, ikon dipusatkan. visibility tidak dipakai: elemennya harus benar-benar keluar dari alur supaya tombol tidak menyisakan lebar teks yang kosong. */ .sidebar-collapsed .sidebar-label, .sidebar-collapsed .sidebar-nav .nav-caret { display: none; } .sidebar-collapsed .sidebar-link, .sidebar-collapsed .sidebar-group-toggle { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } .sidebar-collapsed .sidebar-collapse-toggle { justify-content: center; } .sidebar-collapsed .sidebar-collapse-icon { transform: rotate(180deg); } /* Judul grup ikut dibawa ke dalam flyout saat ciut -- tanpa ini yang terlihat cuma deretan item tanpa keterangan grupnya, dan ikon saja tidak cukup untuk membedakan mana Payroll mana Performance. Diisi sidebar-menu.js dari label tombolnya. */ .sidebar-flyout-title { display: none; padding: 6px 16px 7px; margin-bottom: 4px; border-bottom: 1px solid var(--color-border); font-size: 12px; font-weight: 700; color: var(--color-primary-dark); } .sidebar-collapsed .sidebar-flyout-title { display: block; } .sidebar-collapse-toggle { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 16px; margin-bottom: 2px; background: transparent; border: none; border-bottom: 1px solid var(--color-border); color: var(--color-gray); font-family: inherit; font-size: 12px; cursor: pointer; text-align: left; } .sidebar-collapse-toggle:hover { color: var(--color-primary); background: #EFF6FF; } .sidebar-collapse-icon { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; transition: transform .15s ease; } /* ===== Favorites / Sering Dibuka ===== Sekarang SATU grup yang membuka flyout ke samping (kerangkanya di sidebar.php), bukan lagi deretan link di badan sidebar: favorit yang banyak dulu mendorong seluruh menu utama ke bawah, sampai fitur penghemat tempat ini justru yang paling boros tempat. Tampilannya karena itu mewarisi .sidebar-group/.sidebar-submenu apa adanya -- yang tersisa di sini cuma garis pemisah dari menu di bawahnya dan aturan kosong. */ .sidebar-favorites-group.is-empty { display: none; } .sidebar-favorites-group { border-bottom: 1px solid var(--color-border); padding-bottom: 4px; margin-bottom: 4px; } /* Label favorit dipotong dengan ellipsis, bukan dibungkus ke baris kedua: daftar ini dibaca sekilas, dan label panjang seperti "Overtime Payroll Gap Report" yang memakan tiga baris membuat flyout-nya jauh lebih tinggi daripada isinya. */ .sidebar-favorites-group .nav-item-row > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== Menu yang disembunyikan sendiri user (Profil -> Preferensi Menu) ===== Class, bukan style.display seperti filter permission di sidebar.php: dua filter yang menulis properti inline yang sama akan saling menghapus. !important supaya menang atas style.display="" yang dipasang filter permission pada elemen yang sama. */ .menu-user-hidden { display: none !important; } /* ===== Tombol bintang di tiap item submenu ===== */ .nav-item-row { display: flex; align-items: center; } .nav-item-row > a { flex: 1; min-width: 0; } .nav-fav-toggle { flex-shrink: 0; /* visibility, BUKAN display: tombolnya tetap memesan tempat walau belum terlihat, jadi teks menu tidak bergeser sedikit ke kiri tiap kali kursor lewat. */ visibility: hidden; background: transparent; border: none; padding: 2px 10px 2px 4px; font-size: 14px; line-height: 1; color: #9CA3AF; cursor: pointer; } .nav-item-row:hover .nav-fav-toggle, .nav-fav-toggle:focus-visible, .nav-fav-toggle.is-favorite { visibility: visible; } .nav-fav-toggle.is-favorite { color: #F59E0B; } .nav-fav-toggle:hover { color: #F59E0B; } .content-area { margin-left: var(--sidebar-width); margin-top: 60px; padding: 24px; min-height: calc(100vh - 60px); } /* ===== Tab workspace ===== Baris tab di atas area konten (app/Views/layouts/tabstrip.php), diisi assets/js/tab-workspace.js. Ikut pola header & sidebar: position:fixed, jadi baris ini tetap terlihat saat halaman digulir -- satu-satunya penanda "halaman apa saja yang sedang saya buka" di dokumen yang tidak pernah dimuat ulang. z-index 80, SATU TINGKAT DI BAWAH sidebar (90): di layar kecil sidebar berubah jadi laci yang menutupi konten, dan laci itu harus lewat di ATAS baris tab. */ .workspace-tabs { position: fixed; top: 60px; left: var(--sidebar-width); right: 0; height: 40px; background: var(--color-white); border-bottom: 1px solid var(--color-border); z-index: 80; display: flex; align-items: stretch; overflow: hidden; } .workspace-tabs[hidden] { display: none; } .sidebar-collapsed .workspace-tabs { left: var(--sidebar-width-collapsed); } .workspace-tabs-strip { display: flex; align-items: stretch; width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .workspace-tabs-strip::-webkit-scrollbar { height: 4px; } .workspace-tabs-strip::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 2px; } /* Bentuk chamfer: kedua sisi dipotong miring melebar ke bawah, seperti tab folder. clip-path (bukan border-radius) karena yang diminta sudut terpotong LURUS, bukan membulat. Bidang miringnya memakan 10px di tiap sisi atas, jadi padding kiri/kanan dinaikkan dari 12px ke 20px supaya ikon & label tidak menabrak bidang itu. Konsekuensi yang disengaja: border-right pemisah DIHAPUS -- clip-path memotong border juga, jadi yang tersisa cuma potongan garis miring yang terlihat seperti cacat render. Pemisahnya sekarang jarak 2px + warna latar tab non-aktif yang lebih gelap dari area konten. clip-path juga memotong hit-test, jadi klik di luar bentuk (segitiga antar tab) memang tidak mengenai tab mana pun -- tidak perlu pengaturan z-index tambahan. */ .workspace-tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 0 20px; margin-right: 2px; border: 0; background: #EEF1F5; color: var(--color-gray); font-family: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%); } .workspace-tab:hover { background: #E2E8F0; color: #111827; } .workspace-tab.active { background: var(--color-white); color: #111827; font-weight: 600; } /* Ikon menu di kiri label, diambil dari ikon grup sidebar oleh tab-workspace.js. line-height:1 supaya emoji tidak menaikkan tinggi baris tab yang sudah dipatok 40px. */ .workspace-tab-icon { flex: 0 0 auto; font-size: 14px; line-height: 1; } /* Garis bawah penanda tab aktif. bottom:0 (bukan -1px) karena .workspace-tabs memakai overflow:hidden -- apa pun yang melewati tepi bawah akan terpotong tanpa jejak. Melebar penuh selebar SISI BAWAH tab (sisi terlebar dari bentuk chamfer), jadi tidak ikut terpotong clip-path. */ .workspace-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-primary); } .workspace-tab-label { overflow: hidden; text-overflow: ellipsis; } .workspace-tab-close { flex: 0 0 auto; width: 16px; height: 16px; line-height: 15px; text-align: center; border-radius: 4px; color: #9CA3AF; font-size: 15px; } .workspace-tab-close:hover { background: #FEE2E2; color: var(--color-danger); } /* Klik menu yang tabnya SUDAH terbuka tidak memuat apa pun -- tanpa penanda, layarnya tampak tidak bereaksi sama sekali. Tab yang bersangkutan berkedip sebentar. */ @keyframes workspace-tab-refocus { 0%, 100% { background: var(--color-white); } 35% { background: #DBEAFE; } } .workspace-tab.is-refocus { animation: workspace-tab-refocus .6s ease; } /* Halaman berikutnya sedang diambil. Sengaja setipis ini: perpindahan tab biasanya selesai dalam ratusan milidetik, dan indikator yang lebih besar justru berkedip. */ .workspace-tabs.is-loading::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); animation: workspace-tab-loading 1s linear infinite; } @keyframes workspace-tab-loading { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .workspace-tab.is-refocus { animation: none; background: #DBEAFE; } .workspace-tabs.is-loading::before { animation: none; } } /* Class dipasang sinkron di (app/Views/layouts/header.php), bukan oleh JS `defer`, supaya konten tidak tersentak turun setelah halaman tergambar. Specificity-nya sengaja satu tingkat di atas .content-area polos supaya override mobile di bawah tidak mengembalikannya ke 60px. */ .has-workspace-tabs .content-area { margin-top: 100px; min-height: calc(100vh - 100px); } .app-footer { margin-left: 240px; padding: 16px 24px; color: var(--color-gray); font-size: 12px; border-top: 1px solid var(--color-border); } .page-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; } /* Breadcrumb DISEMBUNYIKAN, bukan dihapus dari markup. Sejak baris tab workspace ada di atas area konten, jalur menu sudah terwakili dua kali: nama halaman ada di tab yang sedang aktif DAN di judul tengah header, ditambah menu yang tersorot di sidebar. Barisnya jadi pengulangan yang cuma memakan tinggi layar. Disembunyikan lewat satu aturan di sini karena markupnya tersebar di 80 view, sedangkan deploy ke produksi dilakukan upload manual per file -- menghapusnya satu-satu berarti 80 berkas naik satu per satu, dan halaman yang belum kebagian akan tampil beda dari yang sudah. Kalau suatu saat breadcrumb dibutuhkan lagi, cukup hapus aturan ini. CATATAN: class ini juga dipakai baris sapaan "Selamat datang di HRIS" di app/Views/dashboard/index.php, jadi baris itu ikut hilang -- disengaja. Class .breadcrumb tidak dipakai satu pun halaman ESS, jadi ESS tidak terpengaruh sama sekali. */ .breadcrumb { display: none; } /* ===== Fallback untuk halaman custom (non-generic-CRUD) — class ini dipakai luas di Attendance/Shift/Overtime/Payroll/Leave & Permission/Performance/Employee (Mutation, Promotion, Contract, Resignation, Retirement) tapi sebelumnya TIDAK PERNAH didefinisikan sama sekali, membuat halaman-halaman itu render nyaris tanpa styling: judul+tombol berantakan, tabel tanpa border/padding, modal detail persetujuan tidak ke-resize besar, dan "Approval Widget" (riwayat approval bertingkat) yang diwajibkan ui_guideline.md §3 tampil sebagai teks polos tanpa bentuk timeline sama sekali. */ .page-header { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .data-table { width: 100%; border-collapse: collapse; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 10px; } .data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); font-size: 13px; } .data-table th { background: #F9FAFB; color: #374151; font-weight: 600; } .data-table tr:last-child td { border-bottom: none; } .modal-box.modal-lg { width: 720px; max-width: 95vw; } .form-hint { color: var(--color-gray); font-size: 12px; margin: -8px 0 12px; } /* Approval Widget (timeline riwayat approval bertingkat) */ .approval-timeline { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 18px; } .timeline-item { position: relative; padding: 10px 14px 10px 30px; background: #F9FAFB; border: 1px solid var(--color-border); border-radius: 8px; font-size: 13px; } .timeline-item::before { content: ''; position: absolute; left: 12px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-gray); } .timeline-item.approved::before, .timeline-item.cleared::before { background: var(--color-success); } .timeline-item.rejected::before { background: var(--color-danger); } .timeline-item.pending::before { background: var(--color-warning); } .timeline-item small { color: var(--color-gray); display: block; margin-top: 2px; } /* ===== Card / Table ===== */ .card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; } .card + .card { margin-top: 16px; } .section-title { font-size: 15px; font-weight: 700; margin: 0; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; margin-bottom: 4px; } .form-section-title { font-size: 14px; font-weight: 700; color: #111827; margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); } .form-section-title:first-child { margin-top: 0; } .required-mark { color: #dc2626; } .form-actions-sticky { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border); position: sticky; bottom: 0; background: #fff; } .toggle-switch-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; color: #111827; } .toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch-slider { position: absolute; inset: 0; background: #D1D5DB; border-radius: 999px; transition: background-color .15s ease; } .toggle-switch-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .toggle-switch input:checked + .toggle-switch-slider { background: var(--color-primary); } .toggle-switch input:checked + .toggle-switch-slider::before { transform: translateX(18px); } .inline-add-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-border); } .inline-add-form .form-group { margin-bottom: 0; min-width: 160px; flex: 1; } .inline-add-form button { flex-shrink: 0; } .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } .toolbar input[type="text"] { padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 6px; min-width: 240px; } .toolbar-filters { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; } .toolbar-filters select { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 13px; background: #fff; } .btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { background: var(--color-primary-dark); } .btn-danger { background: var(--color-danger); color: #fff; } .btn-secondary { background: #fff; border: 1px solid var(--color-border); color: #374151; } .btn-sm { padding: 4px 10px; font-size: 12px; } /* Tombol ikon (Edit/Hapus/Reset PIN/Reset Password di Master User) -- persegi, simbol di tengah, tooltip-nya pakai title= native (bukan .has-tooltip, itu untuk teks). */ .btn-icon { min-width: 30px; padding: 4px 8px; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } table { width: 100%; border-collapse: collapse; } table th, table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); font-size: 13px; } table th { background: #F9FAFB; color: #374151; font-weight: 600; } /* Kolom tabel yang bisa di-resize manual (Hris.makeColumnsResizable(), pola Excel) -- dipakai tabel preview lebar mis. Migrasi Data Karyawan (26 kolom). Selector dibatasi ke [data-resizable-init="1"] (flag yang di-set JS saat init) supaya TIDAK mempengaruhi tabel lain yang tidak pakai fitur ini. */ table[data-resizable-init="1"] th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .col-resize-handle { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; user-select: none; z-index: 2; } .col-resize-handle:hover, body.col-resizing .col-resize-handle { background: #93C5FD; } body.col-resizing { cursor: col-resize; user-select: none; } /* Freeze kolom kiri (Hris.makeColumnsResizable(table, freezeCount), pola Excel Freeze Panes) -- kolom ke-1 s.d. ke-4 paling kiri "dibekukan" tetap terlihat saat tabel digeser ke kanan. Offset --freeze-left-N dihitung & di-update JS (lihat app.js), BUKAN nilai tetap, karena lebar tiap kolom bisa berubah kapan saja lewat resize manual. Cuma sampai kolom ke-4 -- cukup untuk kebutuhan saat ini (checkbox/#/No. Karyawan/Nama di Preview Migrasi Data Karyawan); tambah nth-child(5) dst kalau nanti ada tabel lain yang butuh membekukan lebih dari 4 kolom. Background WAJIB solid (bukan transparan) -- elemen sticky tanpa background akan "ditembus" oleh konten yang discroll di baliknya. */ table.frozen-cols th:nth-child(1), table.frozen-cols td:nth-child(1) { position: sticky; left: var(--freeze-left-1, 0); z-index: 3; } table.frozen-cols th:nth-child(2), table.frozen-cols td:nth-child(2) { position: sticky; left: var(--freeze-left-2, 0); z-index: 3; } table.frozen-cols th:nth-child(3), table.frozen-cols td:nth-child(3) { position: sticky; left: var(--freeze-left-3, 0); z-index: 3; } table.frozen-cols th:nth-child(4), table.frozen-cols td:nth-child(4) { position: sticky; left: var(--freeze-left-4, 0); z-index: 3; } table.frozen-cols td:nth-child(1), table.frozen-cols td:nth-child(2), table.frozen-cols td:nth-child(3), table.frozen-cols td:nth-child(4) { background: #fff; } table.frozen-cols th:nth-child(1), table.frozen-cols th:nth-child(2), table.frozen-cols th:nth-child(3), table.frozen-cols th:nth-child(4) { background: #F9FAFB; z-index: 4; } /* Garis pemisah tipis di pinggir kanan area beku -- penanda visual "mulai dari sini scroll", pola sama Excel. */ table.frozen-cols th:nth-child(4), table.frozen-cols td:nth-child(4) { box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08); } /* Card yang isinya tabel lebar (kolom di-resize bisa total melebihi lebar layar) perlu scroll horizontal sendiri di desktop -- .card baru punya overflow-x:auto bawaan di breakpoint mobile, jadi ditambah scoped ke card ini spesifik. */ #ei-preview-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } .text-right { text-align: right; } .text-muted { color: var(--color-gray); font-size: 12px; } .actions-cell { display: flex; gap: 6px; justify-content: flex-end; } .badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-block; } .badge-active { background: #DCFCE7; color: #15803D; } .badge-inactive { background: #FEE2E2; color: #B91C1C; } .badge-locked { background: #F3F4F6; color: #4B5563; } .badge-pending { background: #FEF3C7; color: #92400E; } /* Warna badge generik dari Master Data > Status Absensi (attendance_status_references. badge_color) -- dipakai Rekap Attendance untuk kolom Status, TERPISAH dari .badge-active dkk di atas (yang maknanya "aktif/nonaktif", bukan warna sembarang). */ .badge-color-green { background: #DCFCE7; color: #15803D; } .badge-color-yellow { background: #FEF3C7; color: #92400E; } .badge-color-red { background: #FEE2E2; color: #B91C1C; } .badge-color-blue { background: #DBEAFE; color: #1D4ED8; } .badge-color-gray { background: #F3F4F6; color: #4B5563; } /* Angka di dalam tabel yang bisa diklik untuk membuka rincian (drill-down) -- dibuat tampak seperti link biasa, tapi elemennya