/* ========================================================================== SAXO CELL ERP — DESIGN SYSTEM · arah "SAXO" Satu berkas untuk seluruh modul. Tidak ada modul yang boleh mendefinisikan gayanya sendiri. ARAHNYA DIPILIH PEMILIKNYA dari tiga calon yang digambar berdampingan pada layar yang sama (lihat docs/rupa.html): ketegasan lapangan pada ANGKA, kelapangan pada RUANG BACA. Tiga hal yang menentukan rupanya, dan ketiganya punya alasan: · SUDUT 4 PIKSEL. Bukan siku, bukan bulat. Ia menggemakan keping lambangnya sendiri — satu-satunya bentuk yang memang milik Saxo Cell. · ANGKA MEMAKAI HURUF MESIN KETIK, seluruhnya, tanpa kecuali. Rupiah yang berjajar rapi ke bawah membuat selisih satu digit langsung kelihatan; angka berhuruf biasa memaksa mata membandingkan panjang, bukan nilai. · SATU KELUARGA HURUF UNTUK JUDUL DAN ISI (Roboto, huruf Shopee — K-125). Yang membedakan judul dari isi tebal dan ukurannya, bukan keluarganya. Dulu dua (Archivo untuk judul, Inter untuk isi); pemiliknya membaca ERP ini bergantian dengan Shopee sepanjang hari, dan ia memintanya mengikuti Shopee. Palet dasarnya tetap hitam / putih / perak — warna lambangnya sendiri. Keadaan dokumen dibedakan WARNA, dengan bentuk penanda sebagai penegas: bentuknya sudah ada, tidak memakan tempat, dan tetap menolong pada layar redup di bawah lampu neon toko. ========================================================================== */ :root{ /* SKALA HURUF SEBAGAI TOKEN (K-293). Setiap ukuran huruf di erp.css dan di gaya sebaris layar menunjuk salah satu token ini, jadi ukuran di layar telepon bisa diturunkan satu anak tangga di SATU tempat — di bawah, `@media (max-width:640px)` — tanpa menyentuh 600 aturannya. */ --f10:10px; --f11:11px; --f12:12px; --f13:13px; --f14:14px; --f16:16px; --f18:18px; --f22:22px; --ground:#F1F2F3; --surface:#FFFFFF; --surface-2:#F7F8F8; --rail:#0E0F11; --rail-ink:#F4F5F6; --rail-muted:#8A9097; --rail-line:#232629; --ink:#101214; --ink-2:#5C6268; --ink-3:#868C93; --on-ink:#FFFFFF; --line:#DCDEE1; --line-strong:#B4B9BE; --focus:#101214; --shadow:0 1px 2px rgba(16,18,20,.05), 0 8px 24px -14px rgba(16,18,20,.16); /* SATU sudut untuk seluruh ERP. Yang lebih kecil dari ini (penanda status, kotak centang) memakai --radius-kcl; yang lebih besar tidak ada. */ --radius:4px; --radius-kcl:3px; /* TINGGI BILAH "Tanya Penjual" yang muncul di bawah kartu etalase saat kursor mengarah ke sana (K-182). Ia berdiri DI SINI dan bukan pada bilahnya sendiri karena DUA benda membacanya: bilahnya, dan ruang yang dicadangkan baris geser di bawahnya. Dua angka yang ditulis sendiri-sendiri cepat atau lambat berbeda — dan K-182 sudah membuktikannya, lihat K-258 di prototipe/CLAUDE.md. */ --tanya-t:38px; /* SATU tinggi untuk seluruh kendali: kotak isian, tombol, dan saringan. Sebelumnya tombol 36 dan saringan 36 kebetulan sama; begitu salah satunya diubah sendirian, seluruh baris saringan melipat menjadi dua. Ditulis sebagai satu angka supaya keadaan itu tidak bisa terjadi lagi. */ --tinggi-kendali:38px; /* SKALA HURUF DELAPAN ANAK TANGGA (K-291, diminta pemiliknya: *"font-nya masih agak kebesaran dikit, dan variasi ukuran font-nya agak kebanyakan dikit"*). Sesudah K-285 masih 19 ukuran; sekarang cuma 10 · 11 · 12 · 13 · 14 · 16 · 18 · 22 px, badan halaman 13px, dan tiap ukuran turun satu langkah kecil. Nama halaman di baris kepala tetap 16px. Ukuran BARU harus memilih salah satu anak tangga ini — ukuran di luarnya dijaga `uji/smoke.js`. */ /* HURUFNYA MENGIKUTI SHOPEE (K-125, diminta pemiliknya: "untuk font tolong ikuti font Shopee aja"). Shopee memakai ROBOTO, dan itu pula huruf bawaan Android — jadi di telepon pemiliknya ia memang huruf yang sudah ia baca sepanjang hari, dan di sana ia bahkan tidak perlu diunduh. Archivo dan Inter dicabut: satu keluarga huruf untuk judul dan isi, sama seperti Shopee. Yang membedakan judul dari isi tinggal tebal dan ukurannya. `--f-angka` DULU MENUNJUK DIRINYA SENDIRI (`var(--f-angka)`), dan CSS menganggap rujukan berputar itu tidak sah — jadi SETIAP `font-family: var(--f-angka)` di 86 tempat gugur, dan seluruh nomor, serial, dan uang tampil dengan huruf badan. IBM Plex Mono tetap diunduh di 122 halaman tanpa pernah dipakai satu huruf pun. ANGKA TIDAK JADI BERHURUF MESIN KETIK (K-127). Begitu peubahnya dibetulkan, angka uang di seluruh ERP berubah menjadi mono — dan pemiliknya menolaknya begitu melihatnya: "saya tidak suka angka yang terlalu lebar". Ia benar untuk layar telepon: digit mono ±18% lebih lebar, dan pada kartu selebar setengah layar itu persis lebar yang dibutuhkan nama barang di sebelahnya. Yang dikejar aturan lama tetap didapat, lewat jalan yang tidak memakan lebar: `font-variant-numeric:tabular-nums` (di bawah). Yang membuat rupiah berjajar rapi bukan huruf mesin ketiknya, melainkan DIGIT YANG SAMA LEBARNYA — dan itu bisa didapat dari huruf badan yang sama. */ --f-judul:Roboto,"Segoe UI",system-ui,-apple-system,sans-serif; --f-isi:Roboto,"Segoe UI",system-ui,-apple-system,sans-serif; --f-angka:Roboto,"Segoe UI",system-ui,-apple-system,sans-serif; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#0A0B0C; --surface:#141618; --surface-2:#1A1D1F; --rail:#050607; --rail-ink:#E9EBEC; --rail-muted:#7E858C; --rail-line:#1D2023; --ink:#EDEFF1; --ink-2:#9AA0A7; --ink-3:#787F86; --on-ink:#0B0C0D; --line:#25292D; --line-strong:#3B4045; --focus:#EDEFF1; --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8); } } :root[data-theme="dark"]{ --ground:#0A0B0C; --surface:#141618; --surface-2:#1A1D1F; --rail:#050607; --rail-ink:#E9EBEC; --rail-muted:#7E858C; --rail-line:#1D2023; --ink:#EDEFF1; --ink-2:#9AA0A7; --ink-3:#787F86; --on-ink:#0B0C0D; --line:#25292D; --line-strong:#3B4045; --focus:#EDEFF1; --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8); } *{box-sizing:border-box} html,body{height:100%} /* Kursor panah, bukan kursor ketik. Bawaan peramban untuk teks di dalam div adalah I-beam — bentuk yang di seluruh dunia berarti "di sini bisa mengetik". Pada layar yang sembilan puluh persen isinya angka dan label yang tidak bisa disunting, ia berbohong di setiap gerakan tetikus. Yang memang bisa diketik mengembalikannya sendiri di aturan di bawah. */ /* TEKS TIDAK BISA DIPILIH (K-65, diminta pemiliknya): tekan-tahan pada angka di telepon memunculkan penyorot biru dan pencarian Google, dan keduanya merampas kartu yang sedang dibaca. Yang bisa disalin tetap ada, lewat tombol salin ERP sendiri (nomor dokumen, serial); kolom isian tetap bisa dipilih karena di situ orang memang menyunting. */ body{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums} input,textarea,[contenteditable]{user-select:text;-webkit-user-select:text} body{margin:0;background:var(--ground);color:var(--ink);cursor:default; font-family:var(--f-isi); font-size:var(--f13);line-height:1.45;-webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;text-size-adjust:100%} input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea, .inp,[contenteditable="true"]{cursor:text} input[readonly],textarea[readonly],.inp:has(input[readonly]),.inp:has(textarea[readonly]){cursor:default} button,label,select,summary,a,[role="button"],.chipopt,.radio,.combo-btn{cursor:pointer} button[disabled],.btn[disabled]{cursor:not-allowed} /* Judul RAPAT: jarak antar-huruf dikurangi dan bobotnya dinaikkan, supaya ia menandai tempat dengan sekali lihat tanpa harus menjadi besar sekali. */ h1,h2,h3,h4{font-family:var(--f-judul);margin:0;text-wrap:balance; letter-spacing:-.03em;font-weight:700} p{margin:0} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius)} .mono{font-family:var(--f-angka);font-variant-numeric:tabular-nums} .muted{color:var(--ink-2)} .dash{color:var(--ink-3)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- SHELL ---------- */ .app{display:grid;grid-template-columns:262px minmax(0,1fr);min-height:100vh} .rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;gap:1px; padding:16px 12px;position:sticky;top:0;height:100vh;overflow:hidden} /* DAFTAR MODULNYA YANG DIGULIR, BUKAN SELURUH MENUNYA (K-165). Dulu `overflow-y:auto` berdiri di `.rail` sendiri, jadi pada halaman yang submenunya panjang — Inventory sepuluh anak, HR sebelas — lambang, tombol lokasi, nama orang yang sedang masuk, dan tombol Keluar semuanya terdorong KELUAR LAYAR bersama daftarnya. Diukur di layar 960px: kaki menunya berdiri di 1.130px, seratus tujuh puluh piksel di bawah tepi bawah layar. `min-height:0` wajib: tanpa itu anak flex tidak pernah mau menyusut lebih kecil daripada isinya, dan penggulirnya tidak pernah jalan. */ .rail-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px; margin:0 -4px;padding:0 4px} /* Lambang dan tombol tutup berbagi satu baris; tombol lokasi berdiri di BARISNYA SENDIRI di bawahnya. Sebaris bertiga, ketiganya berebut 262px: "Saxo Cell" terpotong menjadi "Saxo Cel" dan nama lokasi berhenti di "Semua Lo…" — padahal nama lokasi yang terbaca utuh adalah satu-satunya guna tombol itu. */ .rail-hd{display:flex;align-items:center;gap:7px;padding:6px 6px 10px} /* Lambangnya TIDAK menyusut: ia identitas, dan "Saxo Cel" bukan nama siapa pun. Yang mengalah tulisan tombol lokasi di sebelahnya, yang memang dipotong titik-titik sejak dulu. */ .brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none} /* Tombol lokasi: KONTEKS sesi, bukan tindakan halaman. Tempatnya di menu kiri, sejajar dengan lambangnya — dan sejajar pula dengan nama orang yang sedang masuk di kaki menu ini, karena keduanya menjawab pertanyaan yang sama jenisnya: "saya sedang jadi siapa, dan di mana". */ /* Selebar menunya penuh: nama lokasi adalah satu-satunya isinya, dan sebuah tombol yang tidak memakai lebar yang tersedia memotong namanya di sebelah ruang yang menganggur. */ .railpov{display:flex;align-items:center;gap:6px;width:calc(100% - 12px);min-width:0;margin:0 6px 12px; padding:0 10px;height:32px;border-radius:var(--radius);cursor:pointer;flex:none; border:1px solid var(--rail-line);background:rgba(255,255,255,.05); color:var(--rail-ink);font:inherit;font-size:var(--f12);text-align:left; transition:background .14s,border-color .14s} .railpov:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)} .railpov:focus-visible{outline:2px solid var(--rail-ink);outline-offset:2px} .railpov > svg{width:14px;height:14px;flex:none;opacity:.75} .railpov-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* TIRAI DI BELAKANG LACI. Ia yang menutup lacinya saat ditekan — menggantikan tombol silang yang dulu berdiri di dalam laci, di sudut kiri atas: sudut yang paling sulit dijangkau ibu jari, untuk pekerjaan yang jauh lebih mudah dikerjakan dengan menekan halaman di sebelahnya. Warnanya yang mengatakan halaman di belakang sedang tidak bisa dipakai. Tanpa tirai, latar itu tetap bisa ditekan tetapi tidak ada satu pun tanda bahwa ia bisa — dan itulah yang dulu membuat tombol silangnya diperlukan. */ .railtirai{display:none} /* Keping lambang: hitam, bertepi perak, dengan satu kilau di sisi kiri-atas — sama dengan keping aslinya. Pendar HIJAU yang dipakai sebelumnya bukan warna lambang ini; ia menambahkan satu warna yang tidak pernah ada pada mereknya sendiri, dan warna yang tidak berarti apa-apa adalah warna yang membuat orang mencari artinya. */ /* Jarak dalamnya 2px, bukan 5px: dengan 5px, X-nya cuma memenuhi 45% lebar keping sementara pada lambang aslinya ia memenuhi hampir 60% — kepingnya jadi terbaca sebagai kotak hitam yang kebetulan ada X kecil di tengahnya. Sudutnya 8px, bukan `--radius` 4px yang dipakai seluruh kendali: ini LAMBANG, bukan tombol, dan lambang aslinya memang berbentuk keping bersudut bulat lebar. Aturan radius arah "Saxo" tetap berlaku untuk semua yang lain. */ /* KOTAK PEMBUNGKUS PERAKNYA DICABUT (K-123, diminta pemiliknya). Sebabnya ikon di layar utama telepon: Android memotongnya menjadi LINGKARAN, jadi keping persegi bersudut bulat itu selalu terpotong keempat sudutnya dan terbaca sebagai logo yang rusak. "Tolong hilangkan sekalian aja kotak pembungkus yang silver itu." Yang tinggal X-nya sendiri, tanpa latar dan tanpa bingkai. Di menu kiri, halaman Masuk versi lebar, dan di mana pun permukaannya gelap, ia memang tidak butuh apa-apa di belakangnya. */ .brand-mark{width:40px;height:40px;display:grid;place-items:center;flex:none} .brand-mark svg,.brand-mark img{width:100%;height:100%;display:block} .login-art .brand-mark{width:72px;height:72px} .login-art .brand-name{font-size:var(--f12);letter-spacing:.45em} .login-art .brand-sub{font-size:var(--f12)} .brand-name{display:block;font-family:var(--f-angka);font-size:var(--f10);font-weight:500;letter-spacing:.4em; text-transform:uppercase;color:var(--ink-3);line-height:1.2;white-space:nowrap} /* WORDMARK "SAXO CELL" (K-66, diminta pemiliknya dari rancangan halaman masuknya): huruf mono kapital berjarak lebar, tenang di sebelah kepingnya — bukan huruf judul tebal yang bersaing dengan lambangnya sendiri. Berlaku di menu, halaman Masuk, dan kepala Toko Online — satu kelas. */ .brand-sub{font-size:var(--f10);color:var(--rail-muted);letter-spacing:.14em;text-transform:uppercase;line-height:1.5;display:block} .rail-label{font-size:var(--f10);letter-spacing:.14em;text-transform:uppercase;color:var(--rail-muted);padding:14px 10px 6px} .nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:var(--radius);border:0; background:transparent;color:var(--rail-muted);font-size:var(--f12);cursor:pointer;text-align:left;text-decoration:none} .nav-item:hover{background:var(--rail-line);color:var(--rail-ink)} .nav-item[aria-current="page"]{background:var(--rail-ink);color:var(--rail);font-weight:600} .nav-item svg{width:16px;height:16px;flex:none} /* MODUL BERSUBMENU MEMBUKA DAFTARNYA DULU (K-171). Daftarnya selalu digambar lalu disembunyikan di sini, jadi membukanya tidak menuntut menunya digambar ulang — dan simpul lain yang sedang terbuka tidak ikut terlepas. */ .nav-item--induk{text-align:left} .nav-item-nama{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-item--induk > svg:last-child{width:14px;height:14px;opacity:.6;transition:transform .18s ease} .nav-item--induk[aria-expanded="true"] > svg:last-child{transform:rotate(90deg)} /* Modul tempat halaman ini berdiri tetap disorot seperti dulu — yang berubah cuma bentuk simpulnya, dari tautan menjadi tombol. */ .nav-item--aktif{background:var(--rail-ink);color:var(--rail);font-weight:600} .nav-item--aktif > svg:last-child{opacity:.75} .nav-sub{display:none;flex-direction:column;gap:1px;margin:2px 0 4px 26px;padding-left:10px;border-left:1px solid var(--rail-line)} .nav-sub--buka{display:flex} .nav-sub a{color:var(--rail-muted);text-align:left;padding:6px 8px;border-radius:var(--radius);font-size:var(--f12);text-decoration:none;display:block} .nav-sub a:hover{color:var(--rail-ink)} /* Setelan yang menggeser angka SETIAP barang dipisah dari daftar harian di atasnya oleh satu garis tipis — bukan oleh judul kedua, yang di dalam submenu setinggi 26px per baris cuma menambah baris yang harus dibaca. */ .nav-sub-pisah{margin-top:7px;padding-top:7px;border-top:1px solid var(--rail-line)} .nav-sub a[aria-current="page"]{color:var(--rail-ink);font-weight:600} .rail-foot{margin-top:auto;border-top:1px solid var(--rail-line);padding-top:12px;display:flex;align-items:center;gap:9px} .avatar{width:28px;height:28px;border-radius:50%;background:var(--rail-line);display:grid;place-items:center; font-size:var(--f11);font-weight:600;color:var(--rail-ink);flex:none} .rail-foot .who{font-size:var(--f12);display:block} .rail-foot .role{font-size:var(--f11);color:var(--rail-muted);display:block} .main{min-width:0;display:flex;flex-direction:column} .topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;height:56px;padding:0 24px; background:var(--surface);border-bottom:1px solid var(--line)} /* Satu baris, selalu. Nama dokumen boleh sepanjang 255 karakter, dan remah roti yang membungkus ke baris ketiga mendorong seluruh isi halaman turun — yang terbaca bukan lagi jejak halaman, melainkan judul kedua. */ /* Remah roti memakai seluruh sisa lebar baris kepala sejak kolom pencarian global dicabut, jadi tombol lokasi tetap menempel di tepi kanan. */ /* LONCENG (K-79): tempatnya tetap di ujung kanan baris kepala, di layar lebar maupun telepon. Angka merah kecil menempel di bahunya — yang dibaca orang dari jauh cuma "ada" atau "tidak ada". */ .lonceng{position:relative;flex:none;display:flex;align-items:center;justify-content:center; width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--surface); color:var(--ink-2);cursor:pointer} .lonceng:hover{color:var(--ink);border-color:var(--line-strong)} .lonceng svg{width:17px;height:17px} .lonceng-n{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px; display:flex;align-items:center;justify-content:center;border-radius:9px; background:var(--stop);color:#fff;font-size:var(--f10);font-weight:700;line-height:1} .pop--pbr{width:320px;padding:4px} .pbr{display:flex;flex-direction:column;gap:2px;width:100%;padding:9px 10px;border:0;border-radius:8px; background:none;text-align:left;cursor:pointer} .pbr:hover{background:var(--surface-2)} .pbr + .pbr{border-top:1px solid var(--line)} .pbr-j{font-size:var(--f12);font-weight:600;color:var(--ink)} .pbr--baru .pbr-j::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px; border-radius:50%;background:var(--stop);vertical-align:middle} .pbr-i{font-size:var(--f12);color:var(--ink-2)} .pbr-t{font-size:var(--f11);color:var(--ink-3)} .pbrkosong{padding:14px 12px;font-size:var(--f12);color:var(--ink-3)} /* DETAIL ITEM TIDAK PUNYA BARIS KEPALA DI LAYAR LEBAR (K-213). Diminta pemiliknya bersama tangkapan layarnya sendiri — baris kosong yang cuma berisi lonceng di ujung kanan — dengan kalimat yang sama dengan K-210: "remove this while we're already opening the page of the product for it to be more clear". K-210 mencabut remah rotinya, dan yang tersisa sesudah itu memang tinggal KOTAKNYA: di layar 961px ke atas `.navsel` dan `.topmid` keduanya `display:none`, jadi barisnya berdiri setinggi 56px beserta garis bawahnya untuk satu lonceng. Alasannya yang sama dengan K-207 §6 dan K-210 — yang membuka satu barang sedang memeriksa barang itu, bukan sedang mencari barang berikutnya — dan sekarang ia ditepati sampai habis. HANYA 961px KE ATAS, dan batas itu bukan kerapian: di bawahnya baris ini membawa TOMBOL KEMBALI beserta nama halamannya, dan di bawah 640px ia kepala yang mengambang di atas fotonya (K-207). Mencabutnya di sana berarti mencabut satu-satunya jalan pulang. Dua aturan K-210 tidak ditinggalkan sebagai kode mati (aturan tetap nomor 8): remah roti sudah dicabut seluruh ERP di bawah 960px sejak K-65, jadi keduanya cuma pernah berlaku di lebar yang barisnya sekarang tidak digambar sama sekali. `.unitsplit` tetap penandanya — ia cuma dipakai halaman Detail Item, jadi tidak perlu kelas baru di ``: kelas begitu harus dituliskan di halamannya, dan yang lupa menuliskannya tidak berbunyi seperti kerusakan. */ /* HANYA `.unitsplit` YANG BERDIRI SEBAGAI HALAMAN (K-273): sejak Detail Item juga digambar di panel Daftar Item, `.unitsplit` di mana pun akan ikut mencabut baris kepala DAFTARNYA. Penanda kerangka server berdiri langsung di bawah `#kerangka`, jadi ia disebut tersendiri. */ @media (min-width:961px){ body:has(.page > .unitsplit, #kerangka > .unitsplit) .topbar{display:none} } .kbd{position:absolute;right:9px;top:8px;font-size:var(--f10);color:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);padding:1px 5px;background:var(--surface)} /* `.outlet` DICABUT bersama tombol lokasi di pojok kanan atas — lihat `.railpov`. Baris kepala halaman sekarang tinggal berisi tombol menu dan remah rotinya saja. */ /* RUANG KOSONG DI KAKI HALAMAN DIPANGKAS (diminta pemiliknya): "begitu card udah habis ya itulah yang terakhir". Dulu 96px — hampir dua kartu tingginya — dan di layar telepon itu berarti menggulir dua kali untuk membuktikan memang tidak ada apa-apa lagi. Yang tersisa sama dengan jarak SISI-nya, supaya kartu terakhir tidak menempel ke tepi jendela. Halaman yang punya bilah mengambang di dasarnya menambah ruangnya sendiri (`:has(.jualbar)`). */ /* CELAH KIRI-KANAN DIPANGKAS (K-125, lalu dipangkas sekali lagi di K-127: "ini cardnya kok di sisi kiri dan kanannya masih ada space ya?"). Yang digeser SATU angka di tiga lebar; setiap benda yang menembus tepi halaman — daftar ubin, jejeran foto, bilah saringan yang menempel — sudah menghitung dirinya dari `--pad-hal`, jadi semuanya ikut sendiri tanpa disentuh. DI LEBAR TELEPON ANGKANYA 8px, dan itu angka yang sudah dipakai Daftar Item sejak K-104 — di sana ia dicapai dengan MENEMBUS tepi halaman (`margin-inline:calc(8px - var(--pad-hal))`), karena celah halamannya waktu itu masih 14px. Sekarang celah halamannya sendiri 8px, jadi tembusannya dicabut: satu angka, dan seluruh daftar berdiri di tepi yang sama. Dulu Daftar Item 8px sementara Pembelian, Penjualan, Transfer, dan Master Data 11px — dua jawaban untuk pertanyaan yang sama, dan itu yang terlihat. */ .page{--pad-hal:14px;--pad-atas:18px;padding:var(--pad-atas) var(--pad-hal) var(--pad-hal);max-width:1320px;width:100%} /* JUDUL HALAMAN adalah satu-satunya tulisan yang menjawab "saya di mana". Ia dinaikkan bobotnya menjadi 700 dan dirapatkan jarak hurufnya — bukan dibesarkan ukurannya, karena ruang di atas layar dipakai bekerja, bukan dipakai judul. Ruang di bawahnya dilebarkan sedikit supaya ia berdiri sendiri, tidak menempel pada saringan di bawahnya. */ .page-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px} .page-head h1{font-size:var(--f16);font-weight:600;letter-spacing:normal} .page-head p{margin:6px 0 0;color:var(--ink-2);font-size:var(--f12);max-width:70ch} .head-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} /* ---------- BUTTON ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--tinggi-kendali);padding:0 16px; border-radius:var(--radius);font-weight:600; border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:var(--f12);font-weight:500; cursor:pointer;white-space:nowrap;text-decoration:none} /* `display:inline-flex` di atas MENGALAHKAN `[hidden]` bawaan peramban, jadi tombol yang disembunyikan dari JavaScript tetap tergambar. Jebakan yang sama sudah dua kali memakan korban di berkas ini — `.field[hidden]` dan `.railout[hidden]` — dan kali ketiga cukup ditambal sekali untuk SELURUH tombol: yang berikutnya tidak perlu menemukannya lagi. */ .btn[hidden]{display:none} .btn:hover{background:var(--surface-2)} .btn svg{width:15px;height:15px} .btn--primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)} .btn--primary:hover{background:var(--ink);opacity:.88} /* Hijau dipakai satu kali saja: menjual. Ia satu-satunya tindakan pada seluruh ERP yang memasukkan uang, dan warna keadaan --done memang sudah berarti "beres" di mana-mana. Tombol lain tetap monokrom. */ .btn--jual{background:var(--done);border-color:var(--done);color:#fff} /* Tombol baris item yang sudah menjadi KETERANGAN. Ia dimatikan, jadi tidak pernah menawarkan apa pun — warnanya hanya membedakan tiga akhir yang mungkin: selesai, dibatalkan, dikembalikan. Tetap setinggi dan selebar tombol biasa supaya tepi kanan daftarnya tidak berloncatan. */ .btn--hasil{gap:6px;font-weight:500;cursor:default;opacity:1} .btn--hasil svg{width:14px;height:14px;flex:none} .btn--hasil[disabled]{opacity:1} .btn--hasil--ok{border-color:var(--done-line);background:var(--done-bg);color:var(--done)} .btn--hasil--stop{border-color:var(--line);background:var(--surface-2);color:var(--ink-3)} .btn--hasil--balik{border-color:var(--stop-line);background:var(--stop-bg);color:var(--stop)} /* Tombol hasil yang MASIH menyimpan sesuatu di belakangnya — bukti, waktu, dan pelakunya. Ia tetap terbaca sebagai keadaan, cuma diberi panah kecil supaya tangan tahu ada yang bisa dibuka. */ .btn--hasil--tekan{cursor:pointer} .btn--hasil--tekan svg:last-child{width:12px;height:12px;opacity:.75;transition:transform .14s} .btn--hasil--tekan:hover{border-color:currentColor} .btn--hasil--tekan:hover svg:last-child{transform:translateX(2px);opacity:1} /* Foto bukti di dalam pop-up: selebar isinya, tetap 4:3 supaya tinggi pop-upnya tidak melompat mengikuti bentuk fotonya. */ /* Gambar kecil bukti pembayaran di baris Detail Pembayaran (K-50). */ .buktikecil{flex:none;width:40px;height:40px;padding:0;margin-right:10px;border:1px solid var(--line); border-radius:8px;overflow:hidden;background:var(--paper);cursor:pointer;align-self:center} .buktikecil img{width:100%;height:100%;object-fit:cover;display:block} .buktikecil:hover{border-color:var(--line-strong)} .buktifoto{display:block;width:100%;padding:0;margin:0 0 14px;border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;background:var(--surface-2);cursor:zoom-in} .buktifoto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .buktifoto:hover{border-color:var(--line-strong)} /* Keadaan uang pada baris Total. Tiga bentuk, satu ukuran: yang berubah cuma sifatnya. Kurang dan Lebih menawarkan tindakan, Lunas cuma menerangkan — dan keduanya tidak boleh tertukar hanya karena bentuknya sama. */ .btn--bayar{min-width:148px;justify-content:center;font-variant-numeric:tabular-nums} /* Kurang sebentuk dan sesifat dengan Terima di baris item — keduanya tombol utama pada barisnya masing-masing. Dulu latarnya lupa dikunci saat disentuh, jadi aturan .btn:hover yang lebih kuat mengambil alih dan melatarinya abu-abu terang di bawah tulisan putih: terbaca sebagai tombol yang rusak, bukan tombol yang sedang disentuh. Sekarang persis .btn--primary: warnanya tetap, cuma sedikit meredup. */ .btn--bayar--kurang{background:var(--ink);border-color:var(--ink);color:var(--on-ink)} .btn--bayar--kurang:hover{background:var(--ink);opacity:.88} .btn--bayar--lebih{background:var(--stop);border-color:var(--stop);color:#fff} .btn--bayar--lebih:hover{background:var(--stop);opacity:.88} /* Lunas pun sebuah tombol sekarang: ia membuka rinciannya, sama seperti Kurang dan Lebih. Yang membedakannya cuma warnanya — tidak ada yang perlu dikerjakan, tetapi rinciannya tetap boleh dibaca. */ .btn--bayar--lunas{gap:6px;border-color:var(--done-line);background:var(--done-bg); color:var(--done);font-weight:500} .btn--bayar--lunas svg{width:14px;height:14px;flex:none} /* Batalkan dan Selesaikan berdiri bersebelahan dan mengakhiri dokumen dengan dua cara yang berlawanan, jadi keduanya tidak boleh terlihat sama. Yang satu memerahkan dirinya, yang satu menghitam — mata membedakannya sebelum sempat membaca hurufnya. */ .btn--batal{color:var(--stop);border-color:var(--stop-line)} .btn--batal:hover{border-color:var(--stop);background:var(--stop-bg)} .btn--batal--kuat{background:var(--stop);border-color:var(--stop);color:#fff} .btn--batal--kuat:hover{background:var(--stop);border-color:var(--stop);opacity:.88} .btn--jual:hover{background:var(--done);border-color:var(--done);opacity:.9} .btn--ghost{border-color:transparent;background:transparent} .btn--ghost:hover{background:var(--surface-2);border-color:var(--line)} .btn--sm{height:30px;padding:0 10px;font-size:var(--f12);border-radius:var(--radius)} /* Tombol yang berdiri SEBAGAI PILIHAN, bukan sebagai tindakan di pojok: satu per baris, selebar kotaknya, supaya dua jalan yang sama beratnya juga sama besar di mata yang memilihnya (K-238). */ .btn--blok{width:100%;height:44px} .btn[disabled]{opacity:.45;cursor:not-allowed} .btn[disabled]:hover{background:var(--surface)} .btn--primary[disabled]:hover{background:var(--ink)} .btn.busy{pointer-events:none;opacity:.75} .btn .spin{width:13px;height:13px;border-radius:50%;border:1.6px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- CARD ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .card-hd{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .card-hd h2{font-size:var(--f12);font-weight:600} /* Keterangan di kepala kartu tidak boleh lebih besar daripada judulnya. Tanpa aturan ini ia mewarisi 14,5px berwarna teks penuh — lebih besar dan lebih gelap daripada h2 di sebelahnya — dan yang menerangkan terbaca lebih dulu daripada yang diterangkan. */ .card-hd p{flex:1 1 100%;margin:0;font-size:var(--f12);color:var(--ink-3)} .card-hd .right{margin-left:auto;display:flex;gap:8px;align-items:center} .card-bd{padding:16px} /* Satu petak selebar barisnya — dipakai Lap.kotakPetak bila yang boleh dilihat orangnya tinggal satu petak. */ /* Satu baris kesimpulan di dasar panel Jual: berapa yang dibayar pelanggan (atau dikembalikan kepadanya). Angkanya tebal, sisanya tenang. */ .jualbaris{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line-strong);font-size:var(--f13);color:var(--ink-2)} .jualbaris b{color:var(--ink);font-family:var(--f-angka)} .grid1{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start} .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start} .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start} .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start} /* ---------- PENANDA STATUS (bentuk + label) ---------- */ .pill{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px; border-radius:var(--radius-kcl); border:1px solid var(--line-strong);font-size:var(--f11);font-weight:600;white-space:nowrap; letter-spacing:.01em;color:var(--ink);background:transparent} .pill--solid{background:var(--ink);border-color:var(--ink);color:var(--on-ink)} .pill--dashed{border-style:dashed;color:var(--ink-2)} .pill--quiet{color:var(--ink-2);border-color:var(--line)} .pill--void{color:var(--ink-3);border-color:var(--line);text-decoration:line-through;text-decoration-thickness:1px} .pill--lg{height:27px;font-size:var(--f12);padding:0 11px} button.pill{cursor:pointer} button.pill:hover{border-color:var(--ink)} .mk{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;flex:none;position:relative} .mk--full{background:currentColor} .mk--half{background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%)} .mk--x{border:0} .mk--x::before,.mk--x::after{content:"";position:absolute;left:-1px;right:-1px;top:4px;height:1.5px;background:currentColor} .mk--x::before{transform:rotate(45deg)} .mk--x::after{transform:rotate(-45deg)} .mk--check{border:0} .mk--check::before{content:"";position:absolute;left:1px;top:-1px;width:5px;height:8px; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(40deg)} /* Mode Pilih di Daftar Item: penanda keadaan berubah menjadi KOTAK CENTANG, dan warnanya tetap warna keadaannya (diminta pemiliknya: "kalau warnanya oren, checklist ya oren"). Yang berubah cuma bentuknya — bulatan menjadi petak bersudut — supaya "sedang memilih" terbaca tanpa satu kata pun, sementara keadaan barangnya tidak ikut hilang dari kartunya. */ .mk--cek{border-radius:3px;border:1.5px solid currentColor;background:none} .mk--cek-on{background:currentColor} .mk--cek-on::before{content:"";position:absolute;left:2px;top:0;width:3.5px;height:6.5px; border-right:1.5px solid var(--surface);border-bottom:1.5px solid var(--surface);transform:rotate(40deg)} .tag{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:var(--radius-kcl);border:1px dashed var(--line-strong); font-size:var(--f11);color:var(--ink-2);white-space:nowrap} .meter{height:4px;border-radius:var(--radius);background:var(--line);overflow:hidden;min-width:70px} .meter i{display:block;height:100%;border-radius:var(--radius);background:var(--ink)} /* ---------- KEY / VALUE ---------- */ .kv{display:flex;flex-direction:column} .kv-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)} .kv-row:last-child{border-bottom:0} .kv-row .k{font-size:var(--f12);color:var(--ink-2);flex:1 1 auto} .kv-row .v{font-size:var(--f12);text-align:right} .kv-row .v.big{font-family:var(--f-angka);font-size:var(--f13);font-variant-numeric:tabular-nums;white-space:nowrap} .kv-row--total{border-top:1px solid var(--ink);border-bottom:0;padding-top:13px;margin-top:2px} .kv-row--total .k{color:var(--ink);font-weight:600} .kv-row--total .v{font-family:var(--f-judul);font-size:var(--f14);font-weight:600;font-variant-numeric:tabular-nums} /* Daftar kunci-nilai yang isinya ANGKA. Deretan angka yang tepi kanannya tidak lurus tidak bisa dibandingkan sekali lihat, jadi di sini sebutannya mengisi kiri dan angkanya rata kanan dalam huruf mesin ketik. Sengaja dipakai lewat kelas, bukan berlaku ke semua .kv: daftar yang nilainya kalimat panjang justru menjadi sulit dibaca kalau dirata-kanankan. */ .kv--angka .kv-row > span{flex:1 1 auto;min-width:0;font-size:var(--f12);color:var(--ink-2)} .kv--angka .kv-row > b{margin-left:auto;text-align:right;white-space:nowrap; font-family:var(--f-angka);font-variant-numeric:tabular-nums;font-weight:600} .kv--angka .kv-row--total > span{color:var(--ink);font-weight:600} .kv--angka .kv-row--total > b{font-family:var(--f-angka);font-size:var(--f14);letter-spacing:-.02em} /* ---------- LIST CARD (pola L) ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .lcard{position:relative;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:0;cursor:pointer;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit} .lcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow)} .lc-sec{padding:14px 16px;border-bottom:1px solid var(--line)} .lc-sec:last-child{border-bottom:0} .lc-title{font-family:var(--f-judul);font-size:var(--f14);font-weight:600;letter-spacing:-.01em;display:block} .lc-sub{font-size:var(--f12);color:var(--ink-3);display:block;margin-top:3px} .lc-amount{font-family:var(--f-angka);font-size:var(--f16);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:block} .lc-amount small{font-size:var(--f12);color:var(--ink-3);margin-right:2px} .lc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2)} /* "11 data ›" tidak boleh melipat menjadi dua baris di lebar telepon: yang mengalah adalah kode masternya di sebelah kiri, bukan angkanya. */ .lc-go{font-size:var(--f12);color:var(--ink-2);display:inline-flex;align-items:center;gap:4px; flex:none;white-space:nowrap} /* Panahnya perlu ukuran sendiri: sebagai anak flex tanpa lebar, menyusut sampai hilang begitu lajurnya dipatok flex:none. */ .lc-go svg{width:13px;height:13px;flex:none} .lc-foot .mono{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- ITEM CARD + EXPAND (pola T) ---------- */ .tcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden} .tcard + .tcard{margin-top:10px} .tcard-hd{display:flex;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap} .tcard-hd .t{flex:1 1 190px;min-width:0} .tcard-hd .t b{font-size:var(--f13);font-weight:500;display:block} .tcard-hd .t span{font-size:var(--f12);color:var(--ink-3);display:block;margin-top:2px} .tcard-f{display:flex;flex-direction:column;gap:2px;min-width:78px} .tcard-f .k{font-size:var(--f10);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .tcard-f .v{font-size:var(--f12);font-family:var(--f-angka);font-variant-numeric:tabular-nums} .tcard-f .v.txt{font-family:inherit} .tcard-act{margin-left:auto;display:flex;gap:8px;align-items:center} .tcard-more{display:none;padding:0 16px 14px;border-top:1px solid var(--line);margin-top:-1px} .tcard[data-open="1"] .tcard-more{display:block;padding-top:14px} .tcard[data-attn="1"]{box-shadow:inset 3px 0 0 var(--ink)} /* ---------- QUICK ACTION ---------- */ .qa{display:flex;gap:8px;flex-wrap:wrap;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)} .qa .qa-l{font-size:var(--f10);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);align-self:center;margin-right:4px} /* ---------- TAB ---------- */ .tabs{display:flex;gap:2px;padding:0 6px;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--surface); border-radius:var(--radius) var(--radius) 0 0} .tab{border:0;background:transparent;padding:12px 12px 10px;font-size:var(--f12);color:var(--ink-2);cursor:pointer; border-bottom:2px solid transparent;white-space:nowrap} .tab:hover{color:var(--ink)} .tab[aria-selected="true"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)} .tab .b{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-kcl); background:var(--line);color:var(--ink-2);font-family:var(--f-angka);font-size:var(--f10);margin-left:6px} .tab .b--attn{background:var(--ink);color:var(--on-ink)} .tabbody{background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);padding:16px} /* ---------- HEADER DETAIL (pola D) ---------- */ /* Kepala buatan sendiri (`.dhead-top` + `.dhead-nama` + `.dhead-id` + `.dhead-actions`) SUDAH TIDAK ADA lagi di satu halaman pun: seluruh halaman detail memakai `E.kepalaDok`. Aturannya ikut dicabut bersama halaman terakhir yang memakainya (Detail Template Operasional). */ .dhead{position:sticky;top:56px;z-index:35;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);margin-bottom:16px;overflow:hidden} /* SEDANG DI MODUL APA, DAN BERHADAPAN DENGAN SIAPA (K-266). Dua kata di atas nama pihaknya, dan sengaja dibuat TENANG: ia menjawab pertanyaan yang cuma ditanyakan sekali saat halamannya dibuka, lalu tidak pernah lagi. Yang dicari mata sesudah itu nama pihaknya, dan baris ini tidak boleh ikut bersaing dengannya — huruf kecil berspasi, warna paling redup, tanpa kotak dan tanpa latar. HURUF BESAR SELURUHNYA, dan itu bukan selera: bentuk itu sudah dipakai sebutan petak di kepala yang sama (`.dfakta-l`), jadi ia terbaca sebagai SEBUTAN — bukan sebagai isi. Huruf biasa dengan ukuran sekecil ini terbaca seperti keterangan yang terpotong. */ .dhead-jenis{display:flex;align-items:center;gap:6px; padding:10px 16px 0;font-size:var(--f10);font-weight:600;color:var(--ink-3); text-transform:uppercase;letter-spacing:.06em} .dhead-jenis i{font-style:normal;color:var(--line-strong)} /* Kepala yang sudah membawa baris ini tidak boleh bertambah tinggi percuma: baris nama di bawahnya merapat, karena sebutan dan isinya memang satu kesatuan — persis seperti `.dfakta-l` terhadap nilainya. */ .dhead-jenis + .dhead-atas{padding-top:6px} /* KETERANGAN POLOS TIDAK BERKOTAK (K-264). Diminta pemiliknya: *"yang boleh ada garis kiri kanannya cuma card, kalau cuma informasi biasa jangan"*, dan *"halaman detail terasa sempit"*. Diukur lebih dulu di layar 390px: Detail Pembelian menumpuk LIMA kotak bergaris berpojok bulat, dan dua di antaranya — kepala dokumen dan Ringkasan Keuangan — memang bukan kartu. Keduanya keterangan polos yang dibungkus kotak tanpa alasan. YANG DIBAYAR LEBARNYA, dan itu yang menjawab "sempit": kotaknya 374px di layar 390px, jadi 16px hilang untuk celah yang tidak menjelaskan apa pun. Dibiarkan mengalir sampai tepi layar, huruf di dalamnya mendapat 16px itu kembali. Pemisahnya celah berlatar halaman, bukan garis keliling — cara Shopee memisah bagian, dan contoh yang disebutkan pemiliknya sendiri. DI TELEPON SAJA (600px ke bawah): di layar lebar halaman detailnya berkolom dua, dan pita selebar layar di dalam salah satu kolomnya bukan perampingan melainkan kerusakan. PENANDANYA DI SATU HALAMAN, bukan aturan menyeluruh: begitu ditulis tanpa penanda, ia berlaku di setiap halaman detail sekaligus — dan yang diminta pemiliknya satu halaman dulu untuk dilihat. Menyusulkan halaman berikutnya cukup menambahkan kelas yang sama. */ @media (max-width:600px){ body.dok-polos .dhead, body.dok-polos .ringkas{border-left:0;border-right:0;border-radius:0; margin-left:calc(-1 * var(--pad-hal));margin-right:calc(-1 * var(--pad-hal))} } /* Sebesar dua baris judul + meta, jadi ia sejajar dengan keduanya dan bukan hanya menempel di sebelah huruf pertama. */ .avatarhuruf.dhead-ava{width:38px;height:38px;flex:none;font-size:var(--f13);border-radius:999px; border:1px solid var(--line);margin-top:2px} /* ---------- TOOLBAR / SEARCH / SORT ---------- */ .toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px} .search{position:relative;flex:1 1 300px;min-width:220px;max-width:380px} .search input{width:100%;height:var(--tinggi-kendali);padding:0 30px 0 32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .search svg{position:absolute;left:10px;top:11px;width:15px;height:15px;color:var(--ink-3)} .search .clear{position:absolute;right:7px;top:8px;width:22px;height:22px;border:0;background:transparent;color:var(--ink-3);border-radius:var(--radius-kcl);cursor:pointer;line-height:1} .search .clear:hover{background:var(--line)} .tool-right{margin-left:auto;display:flex;gap:8px;align-items:center} /* Pemindai barcode/QR (pindai.js): videonya selebar pop-up, tombol dan keadaannya mengambang di atasnya. Bingkai bidiknya TIDAK digambar lagi (tahap 7, diminta pemiliknya) — daerah yang dibaca tetap 90% × 55% di tengah gambarnya (K-86). */ /* Kotaknya dirapatkan ke gambarnya oleh `rapatkanKotak` di pindai.js, jadi ia ikut menciut — dan yang menciut harus tetap berdiri di tengah. */ .pindai-layar{position:relative;line-height:0;margin:0 auto} /* TINGGINYA DIBATASI OLEH LAYARNYA, bukan cuma oleh 60% tinggi jendela (K-149, dilaporkan pemiliknya: "tampilannya saat scan itu kurang bagus untuk mobile karena kita harus scroll atas bawah untuk tekan tombol atau lihat informasi apa yang tadi tidak bisa keinput"). Di layar telepon 60vh memang muat — tetapi di ATASNYA masih ada kepala pop-up dan di BAWAHNYA ada baris kendali, baris keadaan, dan tiga tombol; bertiga mereka 250px, jadi yang tersisa kurang dan kakinya terdorong keluar layar. Yang dipatok karena itu SISA layarnya, dan yang mengalah gambarnya — bukan tombolnya, yang justru satu-satunya jalan memindai pada kamera yang tidak mau fokus. Angka 300px DIUKUR, bukan ditebak: pada layar 390×640 percobaan pertama menyisakan 250px dan badan pop-upnya masih harus digulir 26px — ketahuan dari ujinya sendiri, bukan dari membaca kodenya. Sisanya dibulatkan ke atas supaya baris keadaan yang melipat dua baris di telepon sungguhan tetap muat. */ .pindai-video{display:block;width:100%;max-height:min(60vh, calc(100dvh - 300px)); background:#000;border-radius:var(--radius);object-fit:contain} .pindai-video[hidden]{display:none} /* TOMBOL DAN KEADAANNYA MENGAMBANG DI ATAS GAMBAR KAMERANYA (tahap 7, ala Google Lens — diminta pemiliknya). Tombolnya bulat, gelap tembus pandang, berdiri di pojok kanan atas gambarnya; keadaannya pil di tepi bawahnya. Warnanya DIPATOK, bukan peubah tema: yang di belakangnya gambar kamera, bukan bidang tema. Yang TIDAK ada lagi: garis bidik, deretan tombol zoom, tombol Kamera 1/2, Jepret, dan Kamera HP. */ .pindai-kendali{position:absolute;top:10px;right:10px;z-index:2;display:flex;flex-direction:column;gap:10px;line-height:normal} .pindai-kendali[hidden]{display:none} .pindai-bulat{width:42px;height:42px;padding:0;border:0;border-radius:50%;display:grid;place-items:center; background:rgba(0,0,0,.45);color:#fff;cursor:pointer; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .pindai-bulat svg{width:20px;height:20px} .pindai-bulat--nyala{background:#fff;color:#000} .pindai-status{position:absolute;left:50%;bottom:12px;z-index:2;transform:translateX(-50%); width:max-content;max-width:calc(100% - 24px);margin:0;padding:7px 14px;border-radius:999px; background:rgba(0,0,0,.55);color:#fff;font-size:var(--f12);line-height:1.35;text-align:center; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} /* NAMANYA "SAXO LENS", TIPIS DI TENGAH ATAS (diminta pemiliknya, "kayak Google Lens"). Di pop-up ia judulnya: diletakkan di tengah kepala dengan `position:absolute`, jadi tanda silang di kanan tidak menggesernya dari tengah. Di pemindai yang ditanam (Opname) ia melayang di atas gambarnya. */ .mdl:has(.pindai) .mdl-hd{position:relative;align-items:center} .mdl:has(.pindai) .mdl-hd > div{position:absolute;left:52px;right:52px;text-align:center;pointer-events:none} .mdl:has(.pindai) .mdl-hd h3, .pindai-merek{font-size:var(--f13);font-weight:400;letter-spacing:.02em} .pindai-merek{position:absolute;top:12px;left:50%;z-index:2;transform:translateX(-50%); line-height:normal;color:#fff;white-space:nowrap;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.55)} /* KAMERA YANG GAGAL MENYALA: gambarnya disembunyikan, jadi tidak ada lagi yang bisa ditimpa — dan kotak yang isinya melayang semua setinggi NOL, menelan pesan galatnya sendiri. Pilnya kembali berdiri di alirannya. */ .pindai-video[hidden] ~ .pindai-status{position:static;transform:none;margin:12px auto} /* PEMINDAI YANG DITANAM DI HALAMAN (K-221, Opname). Diminta pemiliknya "ringkas aja": gambarnya dipatok sepertiga tinggi layar, dan yang di bawahnya cuma baris keadaan beserta dua tombolnya. Ia berdiri di dalam kotaknya sendiri supaya terbaca sebagai ALAT, bukan sebagai isi dokumennya. Baris keadaannya MEMESAN TINGGINYA (`min-height`): ia berganti bunyi pada setiap pindaian, dan baris yang tumbuh-menyusut membuat seluruh halaman melompat tepat saat orangnya sedang mendekatkan barang berikutnya. */ .pindaitanam{border:1px solid var(--line);border-radius:var(--radius); padding:12px;background:var(--surface-2);margin-bottom:14px} .pindaitanam .pindai-video{max-height:min(34vh,240px)} .pindaitanam .pindai-status{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;min-height:20px} .pindaitanam .pindai-status svg{width:16px;height:16px;flex:none} .pindai-kabar-n{color:rgba(255,255,255,.7)} .pindai-kabar-n::before{content:"·";margin-right:7px} /* NOMOR BERLABEL (K-149): label di kiri, nomornya mengambil sisa lebarnya, tombol hapus di ujung kanan. Di layar telepon labelnya turun ke barisnya sendiri — combo selebar 150px di samping kolom nomor menyisakan enam huruf untuk nomor 15 angka. */ /* HARGA BAWAAN (K-151): penandanya SATU HURUF di depan angkanya, bukan kalimat — diminta pemiliknya ("penandanya jangan kalimat apalagi yang kalimat panjang, nanti khawatir memenuhi uiux"). Angkanya tetap angka biasa; yang ditenangkan cuma tildenya, supaya ia terbaca sebagai penanda dan bukan sebagai bagian dari angkanya. */ .hargabawaan > i{font-style:normal;color:var(--ink-3);margin-right:1px} .nomorbaris{display:grid;grid-template-columns:150px 1fr auto;gap:6px;align-items:start;margin-bottom:6px} .nomorbaris .inp{margin:0} @media(max-width:560px){ .nomorbaris{grid-template-columns:1fr auto;grid-template-areas:"l l" "n h"} .nomorbaris > .combo{grid-area:l} .nomorbaris > .inp{grid-area:n} .nomorbaris > .btn{grid-area:h} } /* ---------- FORM ---------- */ .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .field{display:flex;flex-direction:column;gap:6px;min-width:0} /* `.field{display:flex}` mengalahkan `[hidden]` bawaan peramban, jadi kolom yang disembunyikan tetap tergambar. Berlaku untuk setiap kolom yang cuma berdiri pada keadaan tertentu — mis. Tarif Transport pada klaim (K-138). */ .field[hidden]{display:none} /* Harga Online Shop yang belum diisi (K-141). Ia BUKAN angka, jadi ia tidak boleh berupa angka: hurufnya lebih kecil, tenang, dan tidak tebal — supaya tidak ada satu pun cara membacanya sebagai "Rp0". */ .hargakosong{font-size:.72em;font-weight:400;color:var(--ink-3);letter-spacing:.01em} .field.full{grid-column:1 / -1} /* Satu lajur pada SEMUA lebar, bukan hanya di telepon. Dipakai formulir yang kolomnya dibaca berurutan dan tiap isian menentukan isian berikutnya — Catat Biaya: arahnya menentukan kategorinya, kategorinya menentukan namanya, nominalnya menentukan akunnya. Dua lajur di layar lebar memaksa mata melompat kiri-kanan-kiri untuk mengikuti satu urutan yang sebenarnya lurus, dan pratinjau "menjadi berapa" di kakinya jadi berjauhan dari nominal yang membentuknya. */ .form--tumpuk{grid-template-columns:minmax(0,1fr)} .field label{font-size:var(--f12);color:var(--ink-2)} /* Wajib ditandai bintang merah, bukan kata. Kata "wajib" pada delapan kolom berturut-turut menjadi kolom teks kelima yang ikut dibaca; bintang terbaca sebagai tanda dan bukan sebagai isi. Kata aslinya tetap ada di dalam HTML supaya pembaca layar tetap mengucapkannya. Tidak ada penanda "opsional" sama sekali — tanpa bintang berarti opsional, dan itu keadaan mayoritas. */ /* Kata "wajib" tetap ditulis apa adanya di HTML supaya pembaca layar mengucapkannya; yang terlihat di layar cuma bintang merah. `.setsel` ikut di sini sejak baris item Pembelian memakainya: tanpa itu labelnya berbunyi "NAMA ITEM WAJIB" — katanya tercetak utuh, dan di label yang memang sudah berhuruf besar semua ia terbaca sebagai bagian dari nama kolomnya. */ .field .req,.setsel .req{font-size:0;line-height:0;color:var(--stop)} .field .req::after,.setsel .req::after{content:"*";font-size:var(--f13);line-height:1;font-weight:700;vertical-align:-1px} .field .hint{font-size:var(--f11);color:var(--ink-3)} .inp{height:var(--tinggi-kendali);padding:0 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:100%} /* Ikon yang dititipkan langsung di dalam kolom isian. Tanpa ukuran, SVG tanpa lebar melar memenuhi kolomnya — dan sekali terjadi, seluruh kolom itu berubah menjadi gambar kaca pembesar setinggi layar. */ .inp > svg{width:15px;height:15px;flex:none;color:var(--ink-3)} textarea.inp{height:auto;min-height:76px;padding:9px 11px;resize:vertical;font-family:inherit} .inp[readonly]{background:var(--surface-2);color:var(--ink-2)} .inp-money{position:relative} .inp-money span{position:absolute;left:11px;top:9px;font-size:var(--f12);color:var(--ink-3);font-family:var(--f-angka)} .inp-money input{padding-left:32px;font-family:var(--f-angka);font-variant-numeric:tabular-nums;text-align:right} .qtybox{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;width:136px;background:var(--surface)} .qtybox button{width:34px;height:34px;border:0;background:var(--surface-2);cursor:pointer;font-size:var(--f13);color:var(--ink-2)} .qtybox button:hover{background:var(--line);color:var(--ink)} .qtybox input{width:100%;height:34px;border:0;text-align:center;background:transparent;font-family:var(--f-angka);font-variant-numeric:tabular-nums} .radios{display:flex;flex-direction:column;gap:8px} .radio{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer} .radio:hover{border-color:var(--line-strong)} .radio input{margin-top:2px;accent-color:var(--ink);width:15px;height:15px} .radio b{font-size:var(--f12);font-weight:500;display:block} .radio span{font-size:var(--f12);color:var(--ink-2);display:block;margin-top:1px} .radio:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .chipset{display:flex;flex-wrap:wrap;gap:7px} .chipopt{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:var(--f12);cursor:pointer} .chipopt:hover{border-color:var(--line-strong)} .chipopt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:500} .inp.err,.combo-btn.err,.qtybox.err{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .errmsg{font-size:var(--f11);color:var(--ink);display:flex;align-items:center;gap:5px} .errmsg::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--ink);flex:none} /* ---------- SELECT / COMBOBOX / MENU ---------- */ .selectwrap{position:relative} .selectwrap::after{content:"";position:absolute;right:11px;top:14px;width:6px;height:6px;pointer-events:none; border-right:1.4px solid var(--ink-2);border-bottom:1.4px solid var(--ink-2);transform:rotate(45deg)} .selectwrap select{appearance:none;height:var(--tinggi-kendali);padding:0 28px 0 11px;border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);cursor:pointer;font-size:var(--f12)} .selectwrap select:hover{border-color:var(--line-strong)} .combo{position:relative} .combo-btn{display:flex;align-items:center;gap:8px;width:100%;height:var(--tinggi-kendali);padding:0 30px 0 11px;border:1px solid var(--line); border-radius:var(--radius);background:var(--surface);cursor:pointer;font-size:var(--f12);text-align:left;position:relative} .combo-btn:hover{border-color:var(--line-strong)} .combo-btn::after{content:"";position:absolute;right:12px;top:15px;width:6px;height:6px; border-right:1.4px solid var(--ink-2);border-bottom:1.4px solid var(--ink-2);transform:rotate(45deg)} .combo-btn .ph{color:var(--ink-3)} .combo-btn .sub{font-size:var(--f11);color:var(--ink-3);margin-left:auto;padding-right:8px} /* Tingginya dipatok oleh posisiPop pada ruang yang benar-benar ada; isinya yang menggulir, bukan popnya yang tumbuh melewati tepi layar. */ .pop{position:absolute;z-index:120;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:5px;min-width:200px;max-width:calc(100vw - 20px); display:flex;flex-direction:column;overflow:hidden} .pop button.mi{display:flex;width:100%;align-items:center;gap:10px;padding:8px 10px;border:0;background:transparent; border-radius:var(--radius);cursor:pointer;font-size:var(--f12);text-align:left;color:var(--ink)} .pop button.mi:hover{background:var(--surface-2)} .pop button.mi[disabled]{opacity:.42;cursor:not-allowed} .pop button.mi svg{width:15px;height:15px;flex:none;color:var(--ink-2)} .pop hr{border:0;border-top:1px solid var(--line);margin:5px 4px} .pop .k{font-size:var(--f10);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:7px 10px 4px} .combo-pop{padding:0} .combo-search{padding:8px;border-bottom:1px solid var(--line)} .combo-search input{width:100%;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)} /* flex:1 supaya daftarnya menyusut mengikuti tinggi pop yang sudah dipatok — kotak Cari dan kaki "Tambah …" tetap terlihat berapa pun sempitnya ruang. */ .combo-list{flex:1 1 auto;max-height:230px;min-height:60px;overflow-y:auto;padding:5px} .combo-search,.combo-foot{flex:none} .combo-opt{display:flex;width:100%;align-items:center;gap:8px;padding:8px 10px;border:0;background:transparent; border-radius:var(--radius);cursor:pointer;font-size:var(--f12);text-align:left;color:var(--ink)} .combo-opt .t{flex:1 1 auto} .combo-opt .m{font-size:var(--f11);color:var(--ink-3)} .combo-opt:hover,.combo-opt.cur{background:var(--surface-2)} .combo-opt[aria-selected="true"]{font-weight:600} .combo-empty{padding:14px 12px;font-size:var(--f12);color:var(--ink-3);text-align:center} .combo-foot{border-top:1px solid var(--line);padding:6px} /* ---------- MODAL / DRAWER ---------- */ .ov{position:fixed;inset:0;z-index:100;background:rgba(8,9,10,.5);display:flex;opacity:0;transition:opacity .14s ease} .ov.on{opacity:1} .ov--modal{align-items:flex-start;justify-content:center;padding:44px 20px;overflow-y:auto} .mdl{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); width:min(var(--w,540px),100%);display:flex;flex-direction:column;max-height:calc(100vh - 88px); transform:translateY(-8px);transition:transform .14s ease} .ov.on .mdl{transform:none} .mdl-hd{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)} .mdl-hd h3{font-size:var(--f14);font-weight:600} .mdl-hd p{margin:3px 0 0;font-size:var(--f12);color:var(--ink-2)} .mdl-x{margin-left:auto;border:0;background:transparent;width:30px;height:30px;border-radius:var(--radius);cursor:pointer;color:var(--ink-3);flex:none; display:grid;place-items:center} .mdl-x:hover{background:var(--surface-2);color:var(--ink)} .mdl-x svg{width:15px;height:15px} .mdl-bd{padding:18px;overflow-y:auto} /* Pop-up yang seluruh isinya sudah tertulis di judulnya tidak menyisakan badan kosong bersepatu 18px di bawahnya. */ .mdl-bd:empty{display:none} .mdl-bd > * + *{margin-top:16px} .mdl-ft{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap} .mdl-ft .left{margin-right:auto;align-self:center;font-size:var(--f12);color:var(--ink-2)} .ov--drawer{justify-content:flex-end} .drw{background:var(--surface);border-left:1px solid var(--line);width:min(var(--w,460px),100%);height:100%; display:flex;flex-direction:column;transform:translateX(14px);transition:transform .16s ease} .ov.on .drw{transform:none} .drw-hd{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)} .drw-hd h3{font-size:var(--f14);font-weight:600} /* Inisial di kepala drawer: lingkaran berukuran tetap, bukan anak flex yang diregangkan setinggi barisnya. `.avatarhuruf` sendiri berukuran 100% karena ia dibuat untuk mengisi petak foto yang sudah punya ukuran. */ .avatarhuruf.drw-ava{width:40px;height:40px;flex:none;border-radius:999px;font-size:var(--f13);font-weight:600} .drw-hd p{margin:3px 0 0;font-size:var(--f12);color:var(--ink-2)} .drw-bd{padding:18px;overflow-y:auto;flex:1} .drw-bd > * + *{margin-top:16px} .drw-ft{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line);background:var(--surface-2)} /* ---------- NOTICE ---------- */ .notice{display:flex;gap:11px;padding:13px 15px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface-2);font-size:var(--f12)} .notice--strong{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)} .notice b{display:block;font-size:var(--f12);margin-bottom:3px} .notice ul{margin:6px 0 0;padding-left:18px;color:var(--ink-2)} .notice li{margin:2px 0} /* ---------- EMPTY / LOADING ---------- */ .empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:56px 24px;text-align:center} /* KEADAAN KOSONG: SATU gambar saja, bukan dua yang bertumpuk. Dulu petak ini menggambar "kartu kosong" sendiri — kotak bergaris putus dengan dua garis abu di dalamnya — sementara setiap pemanggilnya menaruh IKON di dalam petak yang sama. Yang terlihat: ikon bertumpuk di atas dua garis kartu, di setiap halaman yang datanya belum ada. Dilaporkan pemiliknya: "iconnya itu selalu ada 2 tumpang tindih, mending icon card yang di tengah dihapus." Yang dicabut kartunya; ikon pemanggilnya yang bicara. */ .empty-art{width:92px;height:68px;border:1.5px dashed var(--line-strong);border-radius:var(--radius); display:flex;align-items:center;justify-content:center;color:var(--ink-3)} .empty-art svg{width:30px;height:30px} .empty h3{font-size:var(--f14);font-weight:600;margin-top:6px} .empty p{margin:0;color:var(--ink-2);font-size:var(--f12);max-width:46ch} /* Kerangka daftar: DIAM, tanpa kilau yang menyapu (K-102). Lihat `.krg`. */ .skel{height:10px;border-radius:var(--radius-kcl);background:var(--line)} .skelcard{border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:11px;background:var(--surface)} @media (prefers-reduced-motion:reduce){.ov,.mdl,.drw,.tst{transition:none}.btn .spin{animation:none}} /* ---------- TIMELINE ---------- */ .tl{position:relative;padding-left:26px} .tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)} .tl-item{position:relative;padding:0 0 20px} .tl-item:last-child{padding-bottom:0} .tl-dot{position:absolute;left:-26px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line-strong)} .tl-item[data-key="1"] .tl-dot{background:var(--ink);border-color:var(--ink)} .tl-time{font-size:var(--f11);color:var(--ink-3);font-variant-numeric:tabular-nums} .tl-title{font-size:var(--f12);font-weight:500;margin-top:2px} .tl-desc{font-size:var(--f12);color:var(--ink-2);margin-top:2px} .tl-who{font-size:var(--f12);color:var(--ink-3);margin-top:3px} /* ---------- TOAST ---------- */ .toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:130;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none} .tst{background:var(--ink);color:var(--on-ink);padding:10px 14px;border-radius:var(--radius);font-size:var(--f12);box-shadow:var(--shadow); max-width:min(560px,92vw);display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(10px); transition:opacity .15s ease, transform .15s ease} .tst.on{opacity:1;transform:none} .tst .m{width:14px;height:14px;border-radius:50%;border:1.6px solid currentColor;flex:none;position:relative} .tst--ok .m::before{content:"";position:absolute;left:3.5px;top:1px;width:4px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(40deg)} .tst--warn .m::before{content:"";position:absolute;left:5.4px;top:2px;width:1.6px;height:5px;background:currentColor} .tst--warn .m::after{content:"";position:absolute;left:5.4px;bottom:2px;width:1.6px;height:1.6px;background:currentColor} /* ---------- MISC ---------- */ .amt{font-family:var(--f-angka);font-variant-numeric:tabular-nums;white-space:nowrap} .amt small{color:var(--ink-3);font-size:var(--f11);margin-right:2px} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:2px; text-align:left;cursor:default;width:100%} button.stat{cursor:pointer} button.stat:hover{border-color:var(--line-strong)} .stat-k{font-size:var(--f11);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)} /* ANGKA TERBESAR DI SELURUH ERP, dan dulu ia satu-satunya yang tidak berhuruf mesin ketik. Akibatnya di Dashboard: lima angka bersebelahan yang tidak berjajar satu pun — padahal itulah lima angka yang paling sering dibandingkan orang, dan dibandingkan sambil lewat. */ .stat-v{font-family:var(--f-angka);font-weight:600;font-size:var(--f18);letter-spacing:-.03em; font-variant-numeric:tabular-nums;line-height:1.3} .stat-v small{font-size:var(--f12);font-weight:500;color:var(--ink-2);margin-right:2px} .stat-s{font-size:var(--f11);color:var(--ink-2)} .stat--attn{box-shadow:inset 3px 0 0 var(--ink)} .minilist{display:flex;flex-direction:column} .minirow{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)} .minirow:last-child{border-bottom:0} .minirow .t{flex:1 1 auto;font-size:var(--f12)} .minirow .t span{display:block;font-size:var(--f11);color:var(--ink-3);margin-top:2px} .minirow .v{font-family:var(--f-angka);font-size:var(--f12);font-variant-numeric:tabular-nums;white-space:nowrap} .railtoggle{display:none} /* ---------- RESPONSIF (desktop-first) ---------- */ @media (max-width:1180px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:960px){ .app{grid-template-columns:minmax(0,1fr)} /* SELEBAR LAJUR MENU DI LAYAR LEBAR, tidak lebih. Ia sempat dilebarkan menjadi 320px karena baris kepalanya dulu berisi tiga benda; sejak tombol lokasi turun ke barisnya sendiri dan tombol tutup dicabut, isinya tinggal lambangnya saja. 320px di layar 390px menyisakan 70px latar — terlalu sempit untuk ditekan dengan ibu jari, padahal justru latar itulah yang sekarang menutup lacinya. Dengan 262px sisanya 128px. */ .rail{position:fixed;left:0;top:0;width:262px;max-width:78vw;z-index:95;transform:translateX(-100%);transition:transform .18s ease} body.rail-on .rail{transform:none} .railtirai{display:block;position:fixed;inset:0;z-index:94;background:rgba(0,0,0,.45); opacity:0;pointer-events:none;transition:opacity .18s ease} body.rail-on .railtirai{opacity:1;pointer-events:auto} /* Halaman di belakang tidak ikut tergulir selama lacinya terbuka. */ body.rail-on{overflow:hidden} .railtoggle{display:inline-flex} .grid2,.grid3,.grid4,.form{grid-template-columns:minmax(0,1fr)} .page{--pad-hal:11px;--pad-atas:13px;padding:var(--pad-atas) var(--pad-hal) var(--pad-hal)} .dhead{position:static} } /* ---------- TABEL (ledger: Stock Card, Mutation, History) ---------- */ .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} table{width:100%;border-collapse:collapse;min-width:640px} th{text-align:left;font-size:var(--f10);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500; padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap} th.r,td.r{text-align:right} td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:var(--f12);vertical-align:middle} tbody tr:last-child td{border-bottom:0} tbody tr[data-click]{cursor:pointer} tbody tr[data-click]:hover td{background:var(--surface-2)} td .sub{display:block;font-size:var(--f11);color:var(--ink-3);margin-top:2px} td a{text-decoration:underline;text-underline-offset:2px} .qtypos{color:var(--ink);font-weight:500} .qtyneg{color:var(--ink);font-weight:500} /* ========================================================================== TAMBAHAN REVISI — kartu ringkasan yang bisa diklik, seksi, baris item, settlement, dan opname. Tetap satu bahasa visual: monokrom, bentuk sebagai pembeda status, bukan warna. ========================================================================== */ .grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} @media (max-width:1180px){ .grid5{grid-template-columns:repeat(3,1fr)} } @media (max-width:720px){ .grid5{grid-template-columns:repeat(2,1fr)} } button.stat{cursor:pointer;text-align:left;font:inherit;width:100%;transition:border-color .14s,background .14s,transform .1s} button.stat:hover{border-color:var(--line-strong);background:var(--surface-2)} button.stat:active{transform:translateY(1px)} button.stat[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .stat-go{display:block;margin-top:8px;font-size:var(--f11);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)} s.strike,.strike{text-decoration:line-through;color:var(--ink-3);font-weight:400} .newval{font-weight:600} .stackline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} /* Saringan TIDAK melipat, ia MENGGULIR ke samping. Dilipat, satu halaman berisi lima saringan berdiri dua baris di layar sempit dan seluruh daftarnya terdorong turun; digulir, urutannya tetap sama di lebar layar mana pun dan yang tidak muat tinggal digeser. Pop-up combonya menempel pada , jadi ia tidak ikut terpotong oleh kotak yang menggulir ini. */ .filters{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;margin-bottom:14px; overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain;padding-bottom:2px} .filters::-webkit-scrollbar{height:6px} .filters::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px} /* Yang tidak boleh menyusut: setiap saringannya. Yang boleh: pengganjal `flex:1` yang mendorong Urutkan ke kanan — begitu isinya tidak muat, ia memang tidak punya alasan untuk memakan tempat. */ .filters > .combo,.filters > .btn,.filters > .pilihbar,.filters > .chipset{flex:none} .filters .combo{min-width:0} .filters .combo-btn{min-width:152px;height:var(--tinggi-kendali);padding:0 12px;font-size:var(--f12)} .filters .combo-btn .sub{display:none} .filterhead{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px} /* Saringan baris kedua dilarutkan menjadi anak langsung baris pertama, jadi seluruh saringan berdiri dalam SATU baris yang sama — di layar lebar ia melipat sendiri bila tidak muat, di telepon ia menggulir ke samping. */ .filterhead--satu > .filters{display:contents} /* BARIS SARINGAN YANG DILIPAT (K-250). `[hidden]` bawaan peramban tidak cukup: baris di atas penyebutnya lebih kuat dan akan memenangkannya, jadi cip-cipnya justru tetap tergambar — jebakan yang sudah tiga kali memakan korban di berkas ini (`.field[hidden]`, `.btn[hidden]`, dan `.filterhead--tab > .filters[hidden]`). */ .filterhead > .filters[hidden]{display:none} .filterhead .search{flex:1;min-width:220px} /* Pada baris tunggal, batas menyusut kotak cari diturunkan. Ia tetap melar mengisi sisa tempat begitu saringannya sedikit; yang berubah cuma seberapa keras ia menolak menyempit — dan pada halaman bersaringan lima, dua puluh piksel lebar kotak cari itulah yang menentukan barisnya melipat atau tidak. */ .filterhead--satu .search{min-width:180px} /* Sebaris penuh berarti RAPAT KE KIRI, bukan disebar rata. `space-between` masuk akal saat barisnya cuma berisi dua benda — kotak cari di kiri, tombol di kanan. Begitu seluruh saringan turun ke baris yang sama, ia menyebarkan sisa tempat menjadi jurang-jurang di antara saringan, dan tiga saringan pada layar lebar berdiri berjauhan seperti tidak saling berhubungan. Yang memang milik ujung kanan cuma `.filterhead-kanan`, dan ia didorong sendiri ke sana. */ .filterhead--satu{justify-content:flex-start} .filterhead--satu > .filterhead-kanan{margin-left:auto} /* Saringan TIDAK dibiarkan menyusut-dengan-titik-titik. Sempat dicoba, dan pada Daftar Pembelian hasilnya "Semua Komplain (7)" terpotong menjadi "Semua (7)" — satu-satunya kata yang membedakan saringan itu dari empat saringan di sebelahnya justru yang hilang. Sebuah saringan yang tidak bisa dikenali lagi lebih buruk daripada sebuah baris kedua. */ /* Saringan lokasi dan tombol Pilih Item berdiri berdampingan di ujung kanan baris pencarian, dan melipat bersama-sama saat layarnya menyempit. */ .filterhead-kanan{display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* Kotak tombol di ujung kanan Daftar Item (pemindai + Pilih Item) ikut sebaris: sebagai blok biasa ia diberi lebar sempit lalu kedua tombolnya melipat di dalamnya, dan seluruh baris saringan jadi dua baris. */ .filterhead-fp{display:contents} /* ---------- kartu purchase / sale di halaman list ---------- */ .pcard{display:block;width:100%;text-align:left;font:inherit;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:16px 18px;cursor:pointer;transition:border-color .14s,box-shadow .14s;margin-bottom:10px} .pcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow)} .pcard-top{display:flex;gap:16px;align-items:flex-start;justify-content:space-between} .pcard-name{font-family:var(--f-judul);font-weight:600;font-size:var(--f13);line-height:1.35;color:var(--ink); display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .pcard-more{font-size:var(--f12);color:var(--ink-3);white-space:nowrap} .pcard-meta{margin-top:6px;font-size:var(--f12);color:var(--ink-2);display:flex;gap:6px;flex-wrap:wrap;align-items:center} .pcard-meta i{font-style:normal;color:var(--ink-3)} .pcard-amt{font-family:var(--f-angka);font-variant-numeric:tabular-nums;font-size:var(--f14);font-weight:500;white-space:nowrap;text-align:right} .pcard-amt small{display:block;font-family:var(--f-isi);font-size:var(--f11);letter-spacing:.04em; text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:2px} .pcard-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;align-items:center} .chipinfo{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border:1px solid var(--line);border-radius:999px; font-size:var(--f12);color:var(--ink-2);background:var(--surface-2)} .chipinfo b{font-family:var(--f-angka);font-weight:500;color:var(--ink)} /* Cip yang MERINGKAS sesuatu bisa ditekan untuk membacanya lengkap (K-163). Sebagai