:root { --biru-tua: #1155CC; --biru-muda: #29ABE2; --biru-bg: #eef4fd; --card-bg: #dde9fb; --abu: #64748b; --abu-bg: #f3f5f9; --sukses: #1a7f37; --bahaya: #d93025; --radius: 12px; --shadow: 0 2px 10px rgba(17, 85, 204, 0.08); --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* CATATAN PENTING: JANGAN pasang "overflow-x: hidden" di elemen . Begitu overflow-x diset beda dari overflow-y pada , browser wajib memperlakukan overflow-y-nya sebagai "auto" juga (bukan lagi "visible") - dan di banyak Chrome/WebView Android ini membuat berubah jadi elemen scroll dokumen yang baru, yang ketika dikombinasikan dgn sidebar position:fixed di halaman ini menyebabkan HALAMAN TIDAK BISA DI-SCROLL SAMA SEKALI lewat sentuhan (touch). Cukup overflow-x:hidden di saja (aman) + overflow-y:auto eksplisit supaya body tetap jadi elemen scroll yang benar. */ body { margin: 0; overflow-x: hidden; /* jaring pengaman anti scroll-horizontal tak sengaja */ overflow-y: auto; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5; letter-spacing: -0.011em; background: linear-gradient(180deg, var(--biru-bg) 0%, #f7f9fc 220px); color: #1f2937; padding-bottom: 60px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit; } /* Halaman dgn layout sidebar (admin/index.php) TIDAK butuh padding-bottom di atas - sidebar & footer sudah punya mekanisme sendiri utk mengisi penuh sampai bawah (lihat .app-shell/.sidebar/.app-footer di bawah). Kalau padding ini dibiarkan, akan muncul celah kosong berwarna background body di bawah sidebar/footer. */ body.halaman-app-shell { padding-bottom: 0; } .header { position: relative; background: linear-gradient(135deg, #ffffff, var(--biru-bg)); color: var(--biru-tua); padding: 54px 20px 60px; text-align: center; box-shadow: var(--shadow); border-bottom: 1px solid #e1e9f5; } .header h1 { margin: 0 0 4px; font-size: 20px; font-weight: 700; letter-spacing: 0.3px; color: var(--biru-tua); } .header p { margin: 0; font-size: 13px; color: var(--abu); } .container { max-width: 1300px; margin: 16px auto 0; padding: 0 16px; } /* ============ HEADER ACTIONS (badge + tombol kelola/logout) ============ Sengaja position:absolute (bukan baris normal di atas logo) supaya JUMLAH tombol di sini (admin: badge+Setting+Logout = 3, user: badge+ Logout = 2) tidak lagi menggeser/memengaruhi posisi tengah blok logo+judul+subjudul di bawahnya. Dengan begitu header admin & user selalu center secara konsisten, terlepas dari jumlah tombolnya. */ .header-actions { position: absolute; top: 16px; right: 20px; left: 20px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; z-index: 5; } .chip { font-size: 11.5px; background: var(--biru-bg); color: var(--biru-tua); padding: 5px 10px; border-radius: 20px; white-space: nowrap; } .chip-btn { border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .chip-badge { display: inline-flex; align-items: center; } /* ============ HAMBURGER MENU HEADER (khusus mobile) ============ */ .btn-hamburger { display: none; position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: none; border-radius: 10px; background: var(--biru-bg); color: var(--biru-tua); font-size: 18px; line-height: 1; cursor: pointer; z-index: 20; box-shadow: var(--shadow); } .btn-hamburger:active { transform: scale(0.95); } .card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 18px 20px; margin-bottom: 16px; } .card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 700; color: var(--biru-tua); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.4px; } .card-title .num { background: var(--biru-tua); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; } .card-title-toggle-filter { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; padding: 6px 4px; margin: -6px -4px 6px; border-radius: 8px; justify-content: space-between; } /* Tombol aksi (mis. Export Excel) yang didorong ke pojok kanan baris judul kartu - .card-title sudah flex, jadi margin-left:auto cukup utk mendorongnya mepet ke ujung kanan sejajar dgn judul. */ .card-title-aksi { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: normal; flex: 0 0 auto; } .card-title-toggle-filter:hover, .card-title-toggle-filter:active { background: rgba(11, 61, 145, 0.06); } .filter-toggle-ikon { display: inline-block; font-size: 12px; color: var(--biru-tua); transition: transform 0.15s ease; flex-shrink: 0; } .card-title-toggle-filter.terbuka .filter-toggle-ikon { transform: rotate(90deg); } .filter-body { overflow: hidden; } .filter-body.tersembunyi { display: none; } /* Toggle buka/tutup KONTEN kartu "Rincian ..." (tabel Rincian Pengajuan/ Pemakaian/Reimburse/Advance/Akumulasi dll) - beda dari .card-title-toggle-filter di atas (yang khusus panel Filter Periode, default TERTUTUP): kartu Rincian defaultnya TERBUKA (kontennya langsung kelihatan begitu data dimuat), tinggal diklik judulnya kalau mau diringkas/disembunyikan buat hemat tempat. Ikon panah "▼" berputar ke kanan (▶) pas kontennya disembunyikan. */ .card-title-toggle-rincian { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; padding: 6px 4px; margin: -6px -4px 6px; border-radius: 8px; justify-content: flex-start; } .card-title-toggle-rincian:hover, .card-title-toggle-rincian:active { background: rgba(11, 61, 145, 0.06); } .rincian-toggle-ikon { display: inline-block; font-size: 12px; color: var(--biru-tua); transition: transform 0.15s ease; flex-shrink: 0; margin-right: 2px; } .card-title-toggle-rincian.tertutup .rincian-toggle-ikon { transform: rotate(-90deg); } .konten-rincian { overflow: hidden; } .konten-rincian.tersembunyi { display: none; } .row { display: flex; gap: 10px; flex-wrap: wrap; } .field { flex: 1; min-width: 180px; } label { display: block; font-size: 12px; font-weight: 600; color: var(--abu); margin-bottom: 5px; } input[type="text"], input[type="password"], input[type="number"], input[type="date"], select, .flatpickr-input { width: 100%; padding: 10px 12px; border: 1.5px solid #dbe3ee; border-radius: 8px; font-size: 14px; background: #fff; color: #1f2937; box-sizing: border-box; } input:focus, select:focus { outline: none; border-color: var(--biru-muda); } /* input[type="number"] tanpa aturan tambahan ini box-sizing/line-height-nya ikut default browser (beda2 tiap browser, umumnya lebih pendek dari input teks lain) - disamakan eksplisit di sini supaya Nominal Reimburse/Nominal Payment/Nominal Advance dkk tingginya konsisten dgn field lain di form yang sama. */ input[type="number"] { box-sizing: border-box; line-height: normal; } .btn { font-family: var(--font-sans); border: none; border-radius: 8px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform .05s ease, opacity .15s ease; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--biru-tua); color: #fff; } .btn-outline { background: #fff; color: var(--biru-tua); border: 1.5px solid var(--biru-tua); } .btn-soft { background: var(--biru-bg); color: var(--biru-tua); } .btn-sukses { background: var(--sukses); color: #fff; } .btn-bahaya { background: #fff; color: var(--bahaya); border: 1.5px solid #f3c6c2; } .btn-block { width: 100%; justify-content: center; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } /* ============ HALAMAN SETTING (grid kartu, full page) ============ */ .setting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; } .setting-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid #e1e9f5; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; color: #1f2937; cursor: pointer; transition: transform .05s ease, background .15s ease, border-color .15s ease; } .setting-item:hover { background: var(--biru-bg); border-color: #c9daf5; } .setting-item:active { transform: scale(0.98); } .setting-item-ikon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--biru-bg); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .setting-item-teks { flex: 1; min-width: 0; } .setting-item-panah { flex: 0 0 auto; color: #9aa8c2; font-size: 13px; } .sheet-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } .sheet-row .field { flex: 1; min-width: 160px; } .sheet-row-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 100%; } .sheet-row-actions .btn { flex: 1; min-width: 0; white-space: nowrap; } .field-btn-aturan { flex: 0 0 auto; } .row-tanggal { align-items: flex-end; } .field-tanggal { flex: 0 1 auto; width: 220px; max-width: 220px; min-width: 150px; } .row-tanggal .field-btn-aturan { flex: 1 1 auto; min-width: 200px; } .row-tanggal .field-btn-aturan .btn { height: 41px; } @media (max-width: 640px) { .field-tanggal { width: 160px; max-width: 160px; height: auto; } .row-tanggal .field-btn-aturan .btn { height: auto; } } .custom-select { position: relative; } .custom-select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1.5px solid #dbe3ee; border-radius: 8px; font-size: 14px; background: #fff; color: #1f2937; cursor: pointer; text-align: left; } .custom-select-trigger span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .custom-select-trigger:focus, .custom-select.tampil .custom-select-trigger { outline: none; border-color: var(--biru-muda); } .custom-select-chevron { color: var(--abu); transition: transform .15s ease; flex-shrink: 0; } .custom-select.tampil .custom-select-chevron { transform: rotate(180deg); } .custom-select-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: #fff; border: 1.5px solid #dbe3ee; border-radius: 8px; box-shadow: 0 10px 28px rgba(15, 40, 80, 0.18); z-index: 40; } .custom-select.tampil .custom-select-panel { display: block; } /* Kalender pilih tab Pengajuan Deposit */ .tab-calendar-wrap { position: relative; width: 100%; } .tab-calendar-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; background: #fff; border: 1.5px solid #dbe3ee; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 40, 80, 0.18); padding: 10px 12px 12px; min-width: 300px; max-width: min(360px, 96vw); } .tab-calendar-wrap.tampil .tab-calendar-panel { display: block; } .tab-calendar-hint { margin: 8px 2px 0; font-size: 11.5px; color: #64748b; line-height: 1.4; } #kalenderTabPengajuan .flatpickr-calendar, #kalenderTabPemakaian .flatpickr-calendar, #kalenderTabReimburse .flatpickr-calendar { box-shadow: none !important; border: none !important; width: 100% !important; margin: 0 auto; } #kalenderTabPengajuan .flatpickr-days, #kalenderTabPemakaian .flatpickr-days, #kalenderTabReimburse .flatpickr-days { width: 100% !important; } #kalenderTabPengajuan .dayContainer, #kalenderTabPemakaian .dayContainer, #kalenderTabReimburse .dayContainer { width: 100% !important; min-width: 0 !important; max-width: none !important; } .custom-select-option { padding: 9px 12px; font-size: 13.5px; cursor: pointer; color: #1f2937; } .custom-select-option:hover { background: var(--biru-bg); } .custom-select-option.aktif { background: var(--biru-bg); color: var(--biru-tua); font-weight: 600; } .custom-select-kosong { padding: 10px 12px; font-size: 13px; color: var(--abu); } .info-badge { background: var(--biru-bg); color: var(--biru-tua); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-top: 10px; display: none; } .info-badge.tampil { display: block; } .tabel-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table.tabel-item { width: 100%; min-width: 480px; border-collapse: collapse; margin-top: 10px; font-size: 13px; } table.tabel-item th { background: var(--abu-bg); color: var(--abu); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; padding: 8px 6px; text-align: center; border: 1px solid #000; } table.tabel-item td { padding: 5px 6px; border: 1px solid #000; vertical-align: middle; text-align: center; } table.tabel-item td input, table.tabel-item td select { padding: 7px 8px; font-size: 12.5px; border-radius: 6px; text-align: center; } table.tabel-item td select { cursor: pointer; background: #fff; } table.tabel-item td.col-no { width: 28px; text-align: center; color: var(--abu); font-weight: 600; } /* ============================================================ Nama, tanggal, nominal TIDAK pindah baris di semua tabel. Kolom diperlebar via min-width; tabel scroll horizontal jika melebihi layar — teks tidak meluber keluar border. ============================================================ */ table.tabel-item th, table.tabel-item td, .tabel-scroll table th, .tabel-scroll table td, table.tabel-pemakaian th, table.tabel-pemakaian td, table.tabel-data th, table.tabel-data td, .modul-view table th, .modul-view table td, .content-area table th, .content-area table td { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; vertical-align: middle; box-sizing: border-box; } /* Input di dalam sel tetap bisa lebar; teks tidak wrap */ table.tabel-item td input, table.tabel-item td select, .tabel-scroll table td input, .tabel-scroll table td select { white-space: nowrap; } /* Container tabel: pola sama seperti Absensi grid & Pemasukan — scroll horizontal + vertikal di dalam container, header thead sticky di top:0 relatif ke container (bukan viewport). Drag kiri-kanan diaktifkan oleh col-resize.js pada selector .tabel-scroll dll. */ .tabel-scroll, .table-responsive, .wrap-tabel, .wrap-tabel-scroll, .table-scroll-x { display: block; width: 100%; max-width: 100%; overflow: auto !important; max-height: min(72vh, 820px); -webkit-overflow-scrolling: touch; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; position: relative; cursor: grab; } .tabel-scroll.is-dragging-table, .table-responsive.is-dragging-table, .wrap-tabel.is-dragging-table, .wrap-tabel-scroll.is-dragging-table, .table-scroll-x.is-dragging-table, body.table-drag-scroll .tabel-scroll { cursor: grabbing !important; } /* Tabel di dalam scroll: lebar mengikuti konten, tidak dipaksa 100% */ .tabel-scroll > table, .table-responsive > table, .wrap-tabel > table, .wrap-tabel-scroll > table, .table-scroll-x > table { width: max-content; min-width: 100%; table-layout: auto !important; border-collapse: collapse; } /* Kolom teks panjang (keterangan / company / untuk pembayaran) */ .tabel-scroll td[style*="text-align:left"], .tabel-scroll td[style*="text-align: left"], table.tabel-pemakaian td[style*="text-align:left"], table.tabel-pemakaian td[style*="text-align: left"] { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-width: 420px; } table.tabel-item td.col-hapus { width: 30px; text-align: center; } .col-nominal input { text-align: center; } .dropdown-tabel-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 7px 8px; font-size: 12.5px; border: 1.5px solid #dbe3ee; border-radius: 6px; background: #fff; color: #1f2937; cursor: pointer; text-align: left; font-family: inherit; } .dropdown-tabel-trigger span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropdown-tabel-trigger .custom-select-chevron { font-size: 10px; } .dropdown-tabel-trigger:focus, .dropdown-tabel-trigger.aktif { outline: none; border-color: var(--biru-muda); } .penerima-panel { position: fixed; display: none; max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 500; text-align: left; } .penerima-panel.tampil { display: block; } .custom-select-manual-wrap { padding: 6px; border-bottom: 1px solid #eef1f6; position: sticky; top: 0; background: #fff; } .custom-select-manual-input { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px; border: 1.5px solid #dbe3ee; border-radius: 6px; font-family: inherit; } .custom-select-manual-input:focus { outline: none; border-color: var(--biru-muda); } .custom-select-options-list { } .btn-hapus-baris { background: none; border: none; color: var(--bahaya); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px; } .kosong-state { text-align: center; color: var(--abu); font-size: 13px; padding: 24px 10px; border: 1.5px dashed #dbe3ee; border-radius: 8px; margin-top: 10px; } .toolbar-tabel { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; flex-wrap: wrap; gap: 8px; } .ringkasan { margin-top: 14px; background: linear-gradient(135deg, var(--biru-tua), var(--biru-muda)); color: #fff; border-radius: 10px; padding: 14px 16px; } .ringkasan .label { font-size: 11px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.4px; } .ringkasan .nominal { font-size: 24px; font-weight: 800; margin: 2px 0 4px; } .ringkasan .terbilang { font-size: 12px; opacity: 0.92; font-style: italic; } .preview-gambar { margin-top: 12px; border: 1.5px solid #dbe3ee; border-radius: 10px; padding: 10px; background: #f7f9fc; } .preview-gambar .label { font-size: 11px; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; color: var(--biru-tua); } .preview-gambar img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid #e3e8f0; } .aksi-utama { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .aksi-utama .btn { flex: 1 1 150px; } .footer-link { text-align: center; font-size: 12px; color: var(--abu); margin-top: 6px; } .footer-link a { color: var(--biru-tua); text-decoration: none; font-weight: 600; } ::placeholder { color: #a8b3c4; } /* ============ RESPONSIVE: TABLET / MOBILE BESAR ============ */ @media (max-width: 640px) { .header { padding: 18px 14px 54px; } .container { padding: 0 12px; } .card { padding: 15px; } .btn-hamburger { display: block; } .header-actions { display: none; position: absolute; top: 58px; right: 14px; left: auto; flex-direction: column; align-items: stretch; background: #fff; border: 1px solid #e1e9f5; border-radius: 10px; box-shadow: var(--shadow); padding: 8px; z-index: 19; max-width: none; margin: 0; } .header-actions.terbuka { display: flex; } .header-actions .chip { justify-content: flex-start; width: 100%; } .header-actions .chip-btn span { display: inline; } /* Baris Tab/Sheet: dropdown penuh, tombol jadi grid rapi 2 kolom */ .sheet-row { flex-direction: column; align-items: stretch; } .sheet-row .field { min-width: 0; width: 100%; } .sheet-row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sheet-row-actions .btn#btnMuatData { grid-column: 1 / -1; } /* Baris tanggal: input dan tombol full width, ditumpuk */ .row { flex-direction: column; } .row .field { min-width: 0; width: 100%; } .field-btn-aturan { width: 100%; } /* Field tanggal acuan (Pengajuan & Advance Payment): tetap pendek/pas konten, TIDAK ikut melebar penuh seperti field lain di baris ini - selector 2-kelas ini sengaja dipakai (spesifisitas sama dgn ".row .field" di atas) supaya menang lewat urutan deklarasi. */ .row-tanggal .field-tanggal { width: 160px; min-width: 140px; max-width: 160px; } /* Tombol aksi utama: tumpuk penuh agar tidak berdesakan */ .aksi-utama { flex-direction: column; } .aksi-utama .btn { flex: none; width: 100%; } } @media (max-width: 480px) { table.tabel-item { font-size: 11.5px; } table.tabel-item td input { font-size: 11.5px; padding: 6px; } .card { padding: 14px; } } /* ============ RESPONSIVE: MOBILE KECIL ============ */ @media (max-width: 380px) { .header-actions { gap: 6px; } .chip { font-size: 10.5px; padding: 5px 8px; } .chip-btn span { display: none; } /* sisakan ikon saja agar tidak sempit */ .sheet-row-actions { grid-template-columns: 1fr; } .sheet-row-actions .btn#btnMuatData { grid-column: auto; } } .splash-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3.5px solid var(--biru-bg); border-top-color: var(--biru-tua); animation: splash-spin 0.8s linear infinite; } @keyframes splash-spin { to { transform: rotate(360deg); } } /* ============================================================ SWEETALERT2 - popup konfirmasi/validasi jangan terlalu lebar, dan input teks di dalamnya disamakan gayanya dengan input lain di aplikasi (jangan mentok full lebar & style default merah muda). ============================================================ */ .swal2-popup { width: auto !important; max-width: 420px !important; padding-bottom: 1.4em; } .swal2-input { width: 100% !important; max-width: 280px !important; height: auto !important; margin: 10px auto 4px !important; padding: 9px 11px !important; border: 1.5px solid #dbe3ee !important; border-radius: 8px !important; font-size: 13.5px !important; box-shadow: none !important; } .swal2-input:focus { border-color: var(--biru-muda) !important; box-shadow: none !important; } .swal2-actions { gap: 8px; } /* ============ MODUL PEMASUKAN ============ */ .btn-danger { background: #fde8e8; color: #c62828; } .btn-danger:hover { background: #f8d0d0; } .pill-status { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; } .pill-menunggu { background:#fff2cc; color:#8a6d00; } .pill-divalidasi { background:#d9ead3; color:#38761d; } .kartu-ringkasan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:10px 0; } .kartu-ringkasan-item { background:var(--biru-bg); border-radius:10px; padding:12px; text-align:center; } .kartu-ringkasan-item .label { font-size:12px; color:#5a6b8a; margin-bottom:4px; } .kartu-ringkasan-item .nilai { font-size:16px; font-weight:700; color:var(--biru-tua); } .kartu-unik-transaksi { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; } .kartu-unik-transaksi .item-unik { background:var(--biru-bg); border:1px solid #d7e0f5; border-radius:7px; padding:3px 8px; font-size:11px; line-height:1.5; color:#33415c; white-space:nowrap; } .kartu-unik-transaksi .item-unik b { color:var(--biru-tua); font-weight:700; } .sub-rekening { font-size:11px; color:#8a94a6; margin-top:2px; } .item-rincian-ringkasan { padding:8px 0; border-bottom:1px dashed #d7e0f5; text-align:left; } .item-rincian-ringkasan:last-child { border-bottom:none; } .item-rincian-baris1 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .item-rincian-teks { font-weight:600; color:#1c2b45; } .item-rincian-nominal { font-weight:700; color:var(--biru-tua); margin-left:auto; } .item-rincian-baris2 { display:flex; flex-wrap:wrap; gap:14px; margin-top:4px; font-size:12px; color:#5a6b8a; } .item-rincian-baris2 b { color:#33415c; } /* ============================================================ APP SHELL: SIDEBAR (collapsible) + TOPBAR + CONTENT + FOOTER Dipakai khusus di admin/index.php (#appShell.app-shell). Nav lama (.nav-modul horizontal) sekarang dirender vertikal di dalam .sidebar memakai kelas tombol yang SAMA (.nav-modul-btn) supaya nav-modul.js tidak perlu diubah sama sekali. ============================================================ */ :root { --sidebar-w: 252px; --sidebar-w-collapsed: 68px; --topbar-h: 60px; } /* display:flex diberi !important SENGAJA - app.js (kode lama, tidak diubah) menyetel appShell.style.display = 'block' langsung lewat JS inline style saat login sukses (peninggalan desain header lama yang bukan flex). Inline style JS itu SELALU menang atas aturan CSS biasa, jadi tanpa !important di sini, sidebar & konten akan collapse jadi block/stacking dan layout jadi rusak. */ .app-shell { display: flex !important; align-items: stretch; min-height: 100vh; background: #f5f8fd; } /* ---------- SIDEBAR ---------- Sengaja position:fixed (BUKAN sticky) - supaya sidebar BENAR-BENAR diam di tempat dan TIDAK ikut ter-scroll sama sekali saat konten di .main-wrap di sebelahnya di-scroll (posisi & tinggi sidebar selalu persis 1 layar penuh, terkunci di kiri atas). Karena position:fixed mengeluarkan sidebar dari alur flex .app-shell, .main-wrap diberi margin-left selebar sidebar (lihat di bawah) supaya kontennya tidak ketiban/ketutupan sidebar. Dgn cara ini juga otomatis TIDAK ADA CELAH di bawah sidebar (tingginya selalu 100vh mengunci ke viewport, bukan ke panjang konten) - beda dgn pendekatan sticky/stretch sebelumnya. */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; flex-shrink: 0; background: linear-gradient(180deg, #0c3a82 0%, var(--biru-tua) 100%); color: #fff; display: flex; flex-direction: column; overflow: visible; /* biar handle toggle menonjol ke kanan */ transition: width 0.22s ease; z-index: 40; } .sidebar.collapsed { width: var(--sidebar-w-collapsed); } .sidebar-brand { position: relative; display: flex; align-items: center; gap: 10px; padding: 16px 16px 15px; min-height: 62px; border-bottom: 1px solid rgba(255,255,255,0.14); } .sidebar-brand-logo { width: 36px; height: 36px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; flex-shrink: 0; } .sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; overflow: hidden; } .sidebar-brand-text strong { font-size: 14.5px; color: #fff; } .sidebar-brand-text span { font-size: 10.5px; color: #cfe0fb; } .sidebar.collapsed .sidebar-brand-text { display: none; } .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 16px 8px; } /* Handle toggle di tepi kanan sidebar — pill vertikal ala app modern */ .sidebar-toggle { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); width: 22px; height: 48px; padding: 0; margin: 0; border: none; border-radius: 0 12px 12px 0; background: #1e4fa3; color: #e8f0ff; box-shadow: 2px 0 10px rgba(12, 58, 130, 0.28); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; line-height: 1; z-index: 45; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, width 0.18s ease; } .sidebar-toggle:hover { background: #2563c7; color: #fff; box-shadow: 3px 0 14px rgba(17, 85, 204, 0.35); width: 24px; } .sidebar-toggle:active { background: #0c3a82; } .sidebar-toggle .ic-collapse, .sidebar-toggle .ic-expand { display: none; font-family: system-ui, -apple-system, Segoe UI, sans-serif; position: relative; top: -1px; } .sidebar-toggle .ic-collapse { display: inline; } .sidebar.collapsed .sidebar-toggle .ic-collapse { display: none; } .sidebar.collapsed .sidebar-toggle .ic-expand { display: inline; } .sidebar.collapsed .sidebar-toggle { background: #1155CC; color: #fff; } /* ============ CTA "Absen Sekarang" - pintasan menonjol di sidebar Portal User, di atas daftar menu, supaya karyawan selalu 1 tap ke Absen Selfie dari modul mana pun (bukan cuma dari item nav biasa). ============ */ .sidebar-cta-absen { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 9px; margin: 12px 10px 4px; padding: 12px 14px; border-radius: 12px; cursor: pointer; background: linear-gradient(135deg, #10b981, #059669); color: #fff; font-size: 13.5px; font-weight: 800; font-family: inherit; box-shadow: 0 8px 18px rgba(5,150,105,0.35); transition: transform .12s ease, box-shadow .12s ease; } .sidebar-cta-absen:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(5,150,105,0.42); } .sidebar-cta-absen:active { transform: translateY(0); } .sidebar-cta-absen .cta-absen-ic { font-size: 17px; line-height: 1; flex-shrink: 0; } .sidebar.collapsed .sidebar-cta-absen { margin: 12px 8px 4px; padding: 11px 0; } .sidebar.collapsed .sidebar-cta-absen .cta-absen-teks { display: none; } .sidebar-nav { display: flex; flex-direction: column; gap: 3px; padding: 10px; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sidebar-nav .nav-modul-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 0; cursor: pointer; color: #dce8fc; font-size: 13.3px; white-space: nowrap; font-family: inherit; background: transparent; border: none; box-shadow: none; position: relative; } .sidebar-nav .nav-modul-btn:hover { background: transparent; color: #fff; opacity: 1; } .sidebar-nav .nav-modul-btn.aktif { background: transparent; color: #fff; font-weight: 700; border-left: none; } .sidebar-nav .nav-modul-btn.aktif::before { content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 0.45em; height: 0.45em; border-radius: 50%; background: #fff; flex-shrink: 0; } /* ============ SIDEBAR NAV GROUP (collapse) ============ */ .nav-group { display: flex; flex-direction: column; gap: 0; margin: 2px 0; } .nav-group-toggle { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: #e8eefc; font: inherit; font-weight: 700; font-size: 13.5px; padding: 9px 12px; border-radius: 0; cursor: pointer; text-align: left; transition: color .15s ease, opacity .15s ease; box-shadow: none; } .nav-group-toggle:hover { background: transparent; color: #fff; } .nav-group-toggle .nav-group-ico { font-size: 1.05rem; flex: 0 0 auto; } .nav-group-toggle .nav-group-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-group-toggle .nav-group-chevron { flex: 0 0 auto; font-size: 0.75rem; opacity: 0.85; transition: transform .2s ease; } .nav-group.tertutup .nav-group-chevron { transform: rotate(-90deg); } .nav-group-items { display: flex; flex-direction: column; gap: 0; padding: 0 0 4px 10px; overflow: hidden; max-height: 420px; transition: max-height .25s ease, opacity .2s ease, padding .2s ease; opacity: 1; } .nav-group.tertutup .nav-group-items { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; } .sidebar-nav .nav-modul-btn.nav-modul-sub { padding-left: 22px; font-size: 13.2px; font-weight: 500; } .sidebar-nav .nav-modul-btn.nav-modul-sub.aktif { padding-left: 22px; } .sidebar-nav .nav-modul-btn.nav-modul-sub.aktif::before { left: 10px; } .sidebar.collapsed .nav-group-toggle .nav-group-label, .sidebar.collapsed .nav-group-toggle .nav-group-chevron { display: none; } .sidebar.collapsed .nav-group-toggle { justify-content: center; padding: 11px 0; } .sidebar.collapsed .nav-group-items { padding-left: 0; } .sidebar.collapsed .sidebar-nav .nav-modul-btn.nav-modul-sub { padding-left: 0; } /* Saat group aktif (salah satu child aktif), highlight parent tanpa kotak */ .nav-group.punya-aktif > .nav-group-toggle { background: transparent; color: #fff; } .sidebar.collapsed .sidebar-nav .nav-modul-btn { justify-content: center; padding: 11px 0; } .sidebar.collapsed .sidebar-nav .nav-modul-btn span { display: none; } .sidebar-footer { padding: 12px 16px 16px; border-top: 1px solid rgba(255,255,255,0.14); } .sidebar-footer-text { font-size: 10.5px; color: #a9c1ec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .sidebar.collapsed .sidebar-footer { text-align: center; } .sidebar.collapsed .sidebar-footer-text { display: none; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 39; } .sidebar-overlay.terbuka { display: block; } /* ---------- MAIN AREA (topbar + content + footer) ---------- margin-left selebar sidebar - WAJIB krn sidebar sekarang position:fixed (dikeluarkan dari alur flex), supaya konten tidak ketutupan sidebar. Ikut menyempit ke lebar sidebar-collapsed lewat selector sibling di bawah saat tombol ciutkan sidebar diklik (lihat sidebar.js). */ .main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--sidebar-w); transition: margin-left 0.22s ease; } .sidebar.collapsed ~ .main-wrap { margin-left: var(--sidebar-w-collapsed); } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; background: #ffffff; min-height: var(--topbar-h); padding: 9px 20px; box-shadow: 0 1px 4px rgba(17,85,204,0.08); border-bottom: 1px solid #e7edf7; } .topbar .btn-hamburger, #btnSidebarToggleMobile.btn-hamburger { position: static; width: 34px; height: 34px; font-size: 16px; flex-shrink: 0; } /* #btnMenuHeader (⋮) SELALU tampil di topbar, di SEMUA ukuran layar - supaya admin/Setting/Logout selalu di belakang 1 tombol toggle ini (bukan baris permanen) & topbar tidak jadi tinggi. Beda dgn #btnSidebarToggleMobile yang tetap khusus layar HP/tablet (lihat media query @900px di bawah). */ .topbar #btnMenuHeader.btn-hamburger { display: flex; align-items: center; justify-content: center; } #btnSidebarToggleMobile { display: none; } /* Judul modul (topbar-title) di-center secara visual: kolom ini flex:1 mengisi sisa ruang di ANTARA 2 tombol toggle (kiri: sidebar, kanan: menu) yang sama-sama 34px, jadi text-align:center di sini membuat judul benar-benar di tengah topbar, konsisten di setiap modul. */ .topbar-title { flex: 1; min-width: 0; text-align: center; } .topbar-title h1 { margin: 0; font-size: 16.5px; color: var(--biru-tua); font-weight: 700; } .topbar-title p { margin: 0; font-size: 11.5px; color: var(--abu); } /* Admin/Setting/Logout: dropdown toggle (panel mengambang), disembunyikan default & baru muncul saat #btnMenuHeader diklik (class .terbuka, logic-nya sudah ada di app.js) - berlaku di SEMUA ukuran layar, bukan cuma mobile, supaya topbar selalu ringkas/pendek. */ .topbar .header-actions { display: none; position: absolute; top: calc(var(--topbar-h) + 6px); right: 14px; left: auto; flex-direction: column; align-items: stretch; background: #fff; border: 1px solid #e1e9f5; border-radius: 10px; box-shadow: var(--shadow); padding: 8px; z-index: 40; gap: 6px; min-width: 170px; margin: 0; } .topbar .header-actions.terbuka { display: flex; } .topbar .header-actions .chip { justify-content: flex-start; width: 100%; } .topbar .header-actions .chip-btn span { display: inline; } .content-area { flex: 1; width: 100%; max-width: 1300px; margin: 0 auto; padding: 16px 18px 34px; } .content-area .container { max-width: none; margin: 0; padding: 0; } /* ---------- FOOTER KORPORAT ---------- */ .app-footer { background: #0c1c3f; color: #aebede; margin-top: auto; } .app-footer-inner { max-width: 1300px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .app-footer-logo { width: 32px; height: 32px; object-fit: contain; background: #fff; border-radius: 7px; padding: 2px; flex-shrink: 0; } .app-footer-text { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.45; } .app-footer-text strong { color: #fff; font-size: 12.5px; } .app-footer-copyright { margin-left: auto; font-size: 10.5px; color: #7e8fb0; } /* ---------- RESPONSIVE: sidebar jadi off-canvas di layar HP/tablet ---------- */ @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: var(--sidebar-w) !important; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 4px 0 24px rgba(0,0,0,0.25); } .sidebar.mobile-terbuka { transform: translateX(0); } .sidebar-toggle { display: none; } #btnSidebarToggleMobile { display: flex; align-items: center; justify-content: center; } /* Di layar HP/tablet sidebar jadi overlay (off-canvas), TIDAK mendorong konten - jadi margin-left dari .main-wrap (utk desktop) harus di-nol- kan lagi di sini, termasuk saat sidebar.collapsed (state desktop yg tersimpan tetap kebawa saat resize ke layar kecil). */ .main-wrap, .sidebar.collapsed ~ .main-wrap { margin-left: 0; } .app-footer-inner { justify-content: center; text-align: center; } .app-footer-copyright { margin-left: 0; width: 100%; text-align: center; } } @media (max-width: 640px) { .topbar { padding: 8px 12px; gap: 8px; } .topbar-title h1 { font-size: 14.5px; } .topbar-title p { display: none; } .content-area { padding: 12px 12px 28px; } } /* =============================================================== PREVIEW PDF SLIP GAJI - overlay full-page dgn zoom in/out (dipakai penggajian.js: previewPdfSlipGaji). Sengaja custom (bukan SweetAlert) supaya bisa full-screen & scroll bebas pas di-zoom, mirip viewer PDF pada umumnya (toolbar atas tetap nempel/fixed, kanvas gambar di tengah discroll horizontal+vertikal saat lebih besar dari layar). =============================================================== */ .preview-pdf-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(17, 24, 39, 0.86); display: flex; flex-direction: column; animation: previewPdfFadeIn 0.15s ease; } @keyframes previewPdfFadeIn { from { opacity: 0; } to { opacity: 1; } } .preview-pdf-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #ffffff; box-shadow: var(--shadow); z-index: 2; } .preview-pdf-judul { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--biru-tua); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; } .preview-pdf-zoom-grup { display: flex; align-items: center; gap: 2px; background: var(--abu-bg); border-radius: 8px; padding: 3px; } .preview-pdf-zoom-grup button { border: none; background: transparent; cursor: pointer; width: 30px; height: 30px; border-radius: 6px; font-size: 16px; font-weight: 700; color: var(--biru-tua); display: flex; align-items: center; justify-content: center; transition: background 0.12s ease; } .preview-pdf-zoom-grup button:hover { background: #dde9fb; } .preview-pdf-zoom-grup button:disabled { opacity: 0.35; cursor: default; background: transparent; } .preview-pdf-zoom-persen { min-width: 46px; text-align: center; font-size: 12.5px; font-weight: 700; color: #475569; user-select: none; cursor: pointer; } .preview-pdf-scroll { flex: 1 1 auto; overflow: auto; padding: 26px; display: flex; justify-content: center; align-items: flex-start; } /* "Kertas" A4 (rasio tetap 210:297mm) yg dizoom - dibungkus supaya bentuknya SELALU proporsi A4 sungguhan, sama seperti halaman PDF yg dihasilkan jsPDF (gambar hasil html2canvas ditempel dari pojok kiri-atas, sisa ruang di bawah tetap putih kalau konten Slip Gaji-nya pendek) - bukan lagi ngikutin rasio gambar mentah yg bisa gepeng kalau kontennya pendek/panjang. */ .preview-pdf-page { position: relative; width: min(800px, 100%); max-width: 100%; aspect-ratio: 210 / 297; flex: 0 0 auto; background: #ffffff; box-shadow: 0 6px 28px rgba(0,0,0,0.35); transform-origin: top center; transition: transform 0.12s ease; border-radius: 2px; overflow: hidden; /* jaga2 kalau konten lebih tinggi dr 1 halaman A4 */ } .preview-pdf-page img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: top center; -webkit-user-drag: none; user-select: none; touch-action: pan-x pan-y; } @media (max-width: 640px) { .preview-pdf-toolbar { padding: 8px 10px; gap: 6px; flex-wrap: wrap; position: sticky; top: 0; } .preview-pdf-judul { font-size: 12.5px; flex-basis: 100%; order: -1; white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.3; } .preview-pdf-scroll { padding: 10px 8px 24px; justify-content: center; align-items: flex-start; -webkit-overflow-scrolling: touch; } .preview-pdf-page { width: 100%; max-width: 100%; /* tinggi mengikuti konten gambar, jangan paksa aspect ratio penuh yang membuat banyak ruang kosong di HP */ aspect-ratio: auto; min-height: 0; transform-origin: top center; } .preview-pdf-page img { width: 100%; height: auto; max-height: none; } .preview-pdf-toolbar .btn { font-size: 12px; padding: 6px 10px; } .preview-pdf-zoom-grup { margin-right: auto; } } /* ============================================================ Tombol aksi collapsible — ringkas, stabil, anti-geser Menu di-portal ke body + position:fixed (lihat posisikanMenuAksi di app.js) ============================================================ */ .aksi-collapse-wrap, .po-aksi-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; vertical-align: middle; } .aksi-collapse-toggle, .po-aksi-toggle { min-width: 62px !important; width: auto !important; padding: 5px 10px !important; font-size: 12px !important; font-weight: 600; line-height: 1.3 !important; min-height: 30px !important; height: auto !important; white-space: nowrap; border-radius: 8px; letter-spacing: 0; } /* Kolom Aksi: default hanya tombol "Aksi ▾" (collapse). Menu terbuka horizontal. */ .td-aksi, th.th-aksi { width: 1% !important; max-width: 110px !important; min-width: 88px; white-space: nowrap !important; vertical-align: middle !important; text-align: right !important; padding-left: 6px !important; padding-right: 8px !important; overflow: visible !important; } .td-aksi .aksi-collapse-wrap, .td-aksi .po-aksi-wrap { display: inline-flex !important; justify-content: flex-end !important; align-items: center !important; } .aksi-collapse-menu.aksi-menu-open, .po-aksi-menu.aksi-menu-open { display: inline-flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; overflow: visible !important; max-width: min(96vw, 900px) !important; } .aksi-collapse-menu.aksi-menu-open .btn, .po-aksi-menu.aksi-menu-open .btn { flex: 0 0 auto !important; width: auto !important; white-space: nowrap !important; } th.th-aksi { position: sticky; right: 0; z-index: 4; background: #aedb92; box-shadow: -3px 0 8px rgba(15, 23, 42, 0.10); } .td-aksi { position: sticky; right: 0; z-index: 2; background: #ffffff; box-shadow: -3px 0 8px rgba(15, 23, 42, 0.08); } .tabel-pemakaian tbody tr:nth-child(even) .td-aksi { background: #f8fafc; } .tabel-pemakaian tbody tr:hover .td-aksi { background: #eef4ff; } .tabel-pemakaian tr.baris-total-rincian .td-aksi { position: sticky; right: 0; z-index: 2; background: #aedb92; box-shadow: -3px 0 8px rgba(15, 23, 42, 0.10); } /* Kolom Status Validasi — lebar cukup, teks tidak terpotong */ .td-status-validasi, th.th-status-validasi { min-width: 158px !important; width: 168px !important; max-width: 200px; white-space: nowrap !important; vertical-align: middle !important; text-align: center !important; padding-left: 10px !important; padding-right: 10px !important; } .td-status-validasi .pill, .td-status-validasi .badge-status-validasi { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; } .badge-status-validasi.sudah, .td-status-validasi .pill-valid { background: #e6f4ea; color: #137333; border: 1px solid #ceead6; } .badge-status-validasi.belum, .td-status-validasi .pill-belum-valid { background: #fef7e0; color: #b06000; border: 1px solid #fde293; } /* Menu: default hidden; saat dibuka di-portal ke body + position:fixed */ .aksi-collapse-menu, .po-aksi-menu { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; margin: 0; padding: 8px; background: #ffffff; border: 1px solid #c5d4f0; border-radius: 12px; box-shadow: 0 10px 28px rgba(17, 85, 204, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06); width: 188px; min-width: 188px; max-width: 188px; z-index: 10050; box-sizing: border-box; } .aksi-collapse-menu[hidden], .po-aksi-menu[hidden] { display: none !important; } .aksi-collapse-menu .btn, .po-aksi-menu .btn { margin: 0 !important; flex: 0 0 auto; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 34px !important; height: auto !important; padding: 7px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.25 !important; border-radius: 8px !important; white-space: nowrap !important; text-align: left !important; box-sizing: border-box !important; } .aksi-collapse-menu .btn-soft, .po-aksi-menu .btn-soft { background: #eef4ff !important; color: #1155CC !important; border: 1px solid #d7e0f5 !important; } .aksi-collapse-menu .btn-outline, .po-aksi-menu .btn-outline { background: #fff !important; color: #1155CC !important; border: 1.5px solid #1155CC !important; } .aksi-collapse-menu .btn-danger, .po-aksi-menu .btn-danger, .aksi-collapse-menu .btn-bahaya, .po-aksi-menu .btn-bahaya { background: #fde8e8 !important; color: #c62828 !important; border: 1px solid #f3c6c2 !important; } .aksi-collapse-menu .btn:hover, .po-aksi-menu .btn:hover { opacity: 0.92; filter: brightness(0.98); } @media (max-width: 640px) { .aksi-collapse-toggle, .po-aksi-toggle { min-width: 56px !important; padding: 4px 8px !important; font-size: 11.5px !important; min-height: 28px !important; } .td-aksi, th.th-aksi { max-width: 88px !important; } .aksi-collapse-menu, .po-aksi-menu { width: min(188px, 78vw); min-width: min(188px, 78vw); max-width: min(188px, 78vw); } } /* ============================================================ MOBILE-FRIENDLY — SELURUH SISTEM Touch target, tabel, form, filter, footer, safe-area ============================================================ */ @media (max-width: 640px) { html { -webkit-text-size-adjust: 100%; } body { overscroll-behavior-y: contain; } /* Area konten lebih rapat */ .content-area { padding: 10px 10px 28px; } .card { padding: 12px; border-radius: 12px; margin-bottom: 10px; } .card-title { font-size: 14px; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; } /* Input 16px cegah zoom otomatis di iOS */ input.input, select.input, textarea.input, .input-select, input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="email"], select, textarea { font-size: 16px !important; max-width: 100%; } /* Tombol: full width di baris aksi form, touch target min 44px */ .btn { min-height: 40px; padding: 9px 12px; } .btn-sm { min-height: 34px; padding: 6px 10px; } .btn-block { width: 100%; } /* Filter / form row: selalu tumpuk vertikal */ .row { flex-direction: column; gap: 8px; } .row .col, .row .field { min-width: 0 !important; width: 100% !important; flex: 1 1 100% !important; } /* Tabel: scroll horizontal halus + header tetap terbaca */ .tabel-scroll, div[style*="overflow-x"], .card > div[style*="overflow"] { -webkit-overflow-scrolling: touch; overflow-x: auto; margin: 0 -4px; padding: 0 4px; } table.tabel-pemakaian, table.tabel-item { font-size: 12px; } table.tabel-pemakaian th, table.tabel-pemakaian td, table.tabel-item th, table.tabel-item td { padding: 8px 6px; } /* Kolom aksi tetap sempit (hanya .td-aksi, bukan last-child generik) */ .tabel-pemakaian .td-aksi { position: sticky; right: 0; background: #fff; box-shadow: -4px 0 8px rgba(0,0,0,0.04); } /* Menu aksi collapse: tetap ringkas di HP */ .aksi-collapse-wrap, .po-aksi-wrap { display: inline-flex; width: auto; } .aksi-collapse-toggle, .po-aksi-toggle { width: auto !important; justify-content: center; } /* Ringkasan kecil (PO, stok, dll) */ .kartu-ringkasan-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .kartu-ringkasan-item { padding: 10px 8px; } .kartu-ringkasan-item .nilai { font-size: 14px; } /* Footer aman di HP dengan notch / home indicator */ .footer-brand, footer, .app-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* SweetAlert lebih nyaman di HP */ .swal2-popup { width: min(94vw, 420px) !important; padding: 1.1em !important; } .swal2-title { font-size: 1.15em !important; } .swal2-html-container { font-size: 0.92em !important; } /* Form PO Bill To / Ship To: stack penuh */ #formPO .row { flex-direction: column; } /* Label filter lebih ringkas */ label { font-size: 12.5px; } /* Chip / topbar */ .topbar-inner { padding-left: 8px; padding-right: 8px; } } @media (max-width: 400px) { .kartu-ringkasan-grid { grid-template-columns: 1fr 1fr; } table.tabel-pemakaian { font-size: 11.5px; } .card-title { font-size: 13px; } } /* ---- Tabel Midtrans: scroll horizontal ---- */ .table-scroll-x { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; display: block; border: 1px solid #e2e8f0; border-radius: 8px; } #subMidtransPemasukan { max-width: 100%; overflow-x: hidden; } #subMidtransPemasukan .card { max-width: 100%; overflow: hidden; } .tabel-midtrans th, .tabel-midtrans td { white-space: nowrap; vertical-align: middle; } /* Nomor urut baris (No. 1, 2, 3, ...) */ th.col-no, td.col-no, td.td-no, th.td-no { width: 44px !important; min-width: 40px; max-width: 56px; text-align: center !important; font-weight: 700; color: #64748b; white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums; } /* Nilai Rp: jangan pecah "Rp" dan angka ke baris berbeda */ table.tabel-pemakaian td[style*="text-align:right"], table.tabel-pemakaian td[style*="text-align: right"], table.tabel-pemakaian tr[class*="baris-subtotal"] td, table.tabel-pemakaian tr.baris-total td, table.tabel-pemakaian tr.baris-total-rincian td { white-space: nowrap !important; } /* ============================================================ STICKY TABLE HEADER (global) — pola Pemasukan / Absensi Header thead menempel di atas area scroll container (.tabel-scroll) saat digeser vertikal. Drag kiri-kanan via col-resize.js. Pengecualian: table.abs-grid sudah punya sticky sendiri. ============================================================ */ .tabel-scroll table:not(.abs-grid) > thead > tr > th, .table-responsive table:not(.abs-grid) > thead > tr > th, .wrap-tabel table:not(.abs-grid) > thead > tr > th, .wrap-tabel-scroll table:not(.abs-grid) > thead > tr > th, .table-scroll-x table:not(.abs-grid) > thead > tr > th, .content-area .tabel-scroll table:not(.abs-grid) > thead > tr > th, .modul-view .tabel-scroll table:not(.abs-grid) > thead > tr > th { position: sticky; top: 0; z-index: 6; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12); } /* Background solid agar konten tidak tembus saat sticky */ table.tabel-pemakaian > thead > tr > th { background: #aedb92 !important; } table.tabel-item > thead > tr > th { background: var(--abu-bg, #f3f5f9) !important; } table.tabel-midtrans > thead > tr > th { background: #e8f0fe !important; } table.tabel-data > thead > tr > th { background: #e8f0fe !important; } /* border-collapse: separate dibutuhkan agar sticky thead stabil di beberapa browser saat di dalam overflow container */ .tabel-scroll > table:not(.abs-grid), .table-responsive > table:not(.abs-grid), .wrap-tabel > table:not(.abs-grid), .wrap-tabel-scroll > table:not(.abs-grid), .table-scroll-x > table:not(.abs-grid) { border-collapse: separate; border-spacing: 0; } /* ===== Aksi collapse horizontal (kanan → kiri) ===== */ .aksi-baris-horizontal { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 4px !important; white-space: nowrap !important; } .aksi-collapse-wrap, .po-aksi-wrap { position: relative; display: inline-flex; justify-content: flex-end; } .td-aksi { text-align: right !important; } .pajak-aksi-btn { flex: 0 0 auto !important; } /* MoU / PKS / SPH / Dokumen Arsip — header hijau sama modul lain */ table.tabel-pakta > thead > tr > th, table.tabel-pakta thead th, .modul-view table.tabel-pakta th { background: #aedb92 !important; color: #1e293b !important; font-weight: 600 !important; } table.tabel-pemakaian > thead > tr > th, #viewDokumenArsip table thead th, #viewMou table thead th, #viewPks table thead th { background: #aedb92 !important; color: #1e293b !important; } #viewSphLayanan table.tabel-pemakaian > thead > tr > th, #viewSphLayanan table.tabel-pakta > thead > tr > th, #viewSph table.tabel-pemakaian > thead > tr > th, #viewMou table > thead > tr > th, #viewPks table > thead > tr > th, #viewDokumenArsip table > thead > tr > th { background: #aedb92 !important; color: #1e293b !important; } #viewSphLayanan table td:first-child, #viewSph table td:first-child, #viewMou table td:first-child, #viewPks table td:first-child { width: 40px !important; max-width: 44px !important; text-align: center !important; } /* Border tabel data lebih jelas (semua modul list) */ table.tabel-pemakaian, table.tabel-data, table.tabel-pakta { border: 1px solid #000 !important; border-collapse: collapse !important; } table.tabel-pemakaian th, table.tabel-pemakaian td, table.tabel-data th, table.tabel-data td, table.tabel-pakta th, table.tabel-pakta td, .modul-view .tabel-scroll table:not(.abs-grid) th, .modul-view .tabel-scroll table:not(.abs-grid) td { border: 1px solid #000 !important; } table.tabel-pemakaian > thead > tr > th, table.tabel-data > thead > tr > th, table.tabel-pakta > thead > tr > th, .modul-view .tabel-scroll table:not(.abs-grid) > thead > tr > th { border: 1px solid #000 !important; } #viewDokumenArsip table th, #viewDokumenArsip table td, #viewSphLayanan table th, #viewSphLayanan table td, #viewSph table th, #viewSph table td, #viewMou table th, #viewMou table td, #viewPks table th, #viewPks table td { border: 1px solid #000 !important; } #viewDokumenArsip table thead th, #viewSphLayanan table thead th, #viewSph table thead th, #viewMou table thead th, #viewPks table thead th { border: 1px solid #000 !important; background: #aedb92 !important; }