/* ========================================================================= assets/app.css -- UI DESKTOP (Claude Design "Diamondo Warehouse") ========================================================================= Revolusi UI desktop, 13 Agu 2026. Ditulis dari NOL mengikuti handoff design_handoff_diamondo_warehouse -- bukan turunan assets/style.css. File ini dan style.css TIDAK PERNAH dimuat bersamaan: includes/header.php memilih salah satu lewat gerbang $ui_baru per halaman, jadi tidak ada kaskade yang saling berebut dan tidak perlu !important di mana pun. AWALAN d- Semua class di sini berawalan d- (desktop). Alasannya assets/mobile.css menimpa nama generik (.card .btn .badge .field .pill .row) untuk UI mobile; tanpa awalan, halaman yang sudah dimigrasi akan kena aturan mobile di lebar tertentu. Awalan bikin tabrakan itu mustahil. LEBAR Seluruh layout dibungkus @media (min-width:769px). Di bawah itu UI mobile (assets/mobile.css) yang berkuasa, persis seperti sekarang -- revolusi ini TIDAK menyentuh mobile sama sekali. Blok penutup di akhir file menyembunyikan chrome desktop (.d-rail, .d-shell) di <=768px. TIGA JEBAKAN dari CATATAN-UI yang dipegang sejak baris pertama, bukan ditambal belakangan -- jangan dibalik tanpa membaca alasannya: 1. Animasi masuk memakai animation-fill-mode:backwards, BUKAN both. both menahan transform setelah animasi selesai, jadi hover lift/zoom pada kartu KPI & baris tabel mati total. 2. Kartu memakai backdrop-filter -> bikin stacking context baru -> z-index di DALAM kartu tidak bisa menang melawan kartu sesudahnya. Popover/dropdown karena itu dirender lewat portal ke (lihat Diamondo.portal() di assets/app.js), bukan diakali z-index. 3. .d-seg memakai grid-auto-flow:column + grid-auto-columns:1fr, BUKAN flex. Dengan flex tiap tombol selebar teksnya sendiri, jadi thumb yang bergerak translateX(i*100%) tidak pernah lurus dengan tombolnya. ========================================================================= */ /* ------------------------------------------------------------------------- 1. TOKEN Nilainya disalin persis dari :root prototipe. --primary default burgundy #8c1c33; preset Warna Aksen di Pengaturan menimpanya lewat inline style di (lihat skrip anti-kedip di header.php). ------------------------------------------------------------------------- */ :root { --bg: #f2f2f5; --bg2: #e8e8ed; --card: rgba(255,255,255,.74); --card-solid: #fff; --rail: rgba(255,255,255,.42); --text: #1d1d1f; --muted: #6e6e73; --faint: #8e8e93; --border: rgba(0,0,0,.08); --hair: rgba(0,0,0,.05); --field: rgba(120,120,128,.09); /* Garis bantu horizontal di chart. Sengaja token sendiri, BUKAN --hair: --hair dipakai pemisah tipis di dalam kartu (nyaris tak terlihat, dan memang harus begitu), sedangkan garis chart perlu benar-benar terbaca sebagai kisi. Tetap abu-abu netral supaya tidak pernah tertukar dengan salah satu dari empat garis seri yang berwarna. */ --d-grid-chart: rgba(0,0,0,.16); --primary: #8c1c33; --brand: #8c1c33; --green: #34c759; --red: #ff3b30; --orange: #ff9f0a; --merek-shopee: #ee4d2d; /* oranye Shopee */ --merek-tiktok: #42b549; /* hijau Tokopedia -- kode channel 'tiktok' menampung keduanya */ --purple: #af52de; --teal: #30b0c7; /* Resep permukaan. Dipakai ulang .d-card, .d-kpi, .d-sheet supaya kalau blur-nya perlu diturunkan (mis. keluhan performa) cukup satu tempat, bukan berburu ke belasan aturan. */ --d-blur-card: blur(28px) saturate(180%); --d-blur-bar: blur(40px) saturate(190%); --d-blur-rail: blur(44px) saturate(200%); --d-blur-pop: blur(34px) saturate(190%); --d-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 20px 44px -30px rgba(0,0,0,.3); --d-shadow-pop: 0 26px 54px -22px rgba(0,0,0,.45); --d-ease-pop: cubic-bezier(.34,1.4,.42,1); --d-ease-out: cubic-bezier(.2,.9,.3,1); /* Padding kartu & baris tabel. Mode "Tampilan padat" cuma menimpa dua angka ini (lihat html.compact di bawah) -- itulah kenapa dipakai sebagai variabel, bukan ditulis langsung di tiap komponen. */ --d-pad-card: 24px; --d-pad-row: 13px 14px; color-scheme: light; } /* ---- Alias token lama ---- Halaman di LUAR handoff (login, lupa password, set password, syarat, kebijakan, menu staff) tidak dirancang ulang -- keputusannya "ikut token baru, layout tetap". Aturan tata letaknya dipindah apa adanya dari style.css, dan aturan itu menyebut nama token lama. Dipetakan di sini ke token baru supaya CSS-nya jalan tanpa disunting satu per satu, DAN supaya halaman-halaman itu otomatis ikut warna aksen serta mode gelap yang sama. Blok ini ikut terhapus kalau nanti halaman-halaman itu dirancang ulang. */ :root { --primary-dark: #6d1226; --danger: var(--red); --success: var(--green); --warning: var(--orange); --hairline: var(--hair); --hairline-soft: var(--hair); --input-bg: var(--card-solid); --surface-tint: color-mix(in srgb, var(--text) 3%, transparent); --surface-tint-2: color-mix(in srgb, var(--text) 5%, transparent); --sidebar-color: #7a1226; --sidebar-color-light: #9c2438; --sidebar-color-dark: #4a0a16; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 10px; --ease: cubic-bezier(.2, .9, .3, 1); --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 12px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05); --shadow-lg: 0 24px 56px rgba(0,0,0,.16), 0 4px 14px rgba(0,0,0,.06); --scrollbar-thumb: rgba(140,140,150,.35); --scrollbar-thumb-hover: rgba(140,140,150,.55); } html[data-theme="dark"] { --bg: #0b0b0d; --bg2: #17171a; --card: rgba(28,28,30,.72); --card-solid: #1c1c1e; --rail: rgba(28,28,30,.44); --text: #f5f5f7; --muted: #a1a1a6; --faint: #8e8e93; --border: rgba(255,255,255,.11); --hair: rgba(255,255,255,.07); --field: rgba(120,120,128,.24); --d-grid-chart: rgba(255,255,255,.20); --merek-shopee: #ff7a5c; --merek-tiktok: #5fd46a; color-scheme: dark; } /* Wallpaper personalisasi aktif -> rail dinaikkan opasitasnya supaya label 9,5px-nya tetap kebaca di atas foto apa pun. Ditandai dari PHP sebagai data-latar="1" di . */ html[data-latar="1"] { --rail: rgba(255,255,255,.72); } html[data-theme="dark"][data-latar="1"] { --rail: rgba(28,28,30,.74); } html.compact { --d-pad-card: 17px; --d-pad-row: 8px 14px; } /* ------------------------------------------------------------------------- 2. DASAR ------------------------------------------------------------------------- */ * { box-sizing: border-box; } /* [hidden] harus benar-benar menyembunyikan. Aturan bawaan browser untuk atribut ini cuma `display:none` biasa, jadi KALAH oleh display apa pun yang ditulis penulis stylesheet -- .d-actionbar{display:flex} membuat bar aksi massal tetap terlihat walau ditandai hidden. Ini satu-satunya !important di berkas ini, dan memang idiom standar untuk kasus ini. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Helvetica Neue", system-ui, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -.011em; } a { color: var(--primary); text-decoration: none; } /* Garis bawah saat hover DIBATASI ke perangkat ber-tetikus. Di layar sentuh :hover "nyangkut" setelah ketukan -- jadi setiap tombol yang kebetulan berupa (kartu Omzet dasbor, baris Perlu Direstok, panah kembali) tampil bergaris bawah dan tetap begitu sampai user mengetuk tempat lain. Di desktop tidak ada yang berubah. */ @media (hover: hover) { a:hover { text-decoration: underline; } } input, button, select, textarea { font-family: inherit; } input:focus, textarea:focus { outline: none; } /* Angka SELALU tabular supaya kolom Rupiah di tabel lurus ke bawah dan tidak "bergoyang" saat nilainya berubah lewat AJAX. */ .d-num, .d-kpi-nilai, .d-stepper-nilai { font-variant-numeric: tabular-nums; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(140,140,150,.35); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(140,140,150,.55); background-clip: content-box; } /* ------------------------------------------------------------------------- 3. KEYFRAME Sembilan animasi dari handoff. Yang memakainya WAJIB menutup dengan `backwards`, jangan `both` -- lihat jebakan #1 di kepala file. ------------------------------------------------------------------------- */ @keyframes d-fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes d-screenIn { from { opacity: 0; transform: translateY(18px) scale(.992); } to { opacity: 1; transform: none; } } @keyframes d-sheetIn { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } } @keyframes d-backdropIn { from { opacity: 0; } to { opacity: 1; } } @keyframes d-rowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } @keyframes d-toastIn { from { opacity: 0; transform: translateY(22px) scale(.9); } to { opacity: 1; transform: none; } } @keyframes d-dash { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } } @keyframes d-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes d-growX { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes d-popIn { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } @keyframes d-spin { to { transform: rotate(360deg); } } @keyframes d-pulseRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 32%, transparent); } 70% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--primary) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); } } @keyframes d-floatA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.12); } } @keyframes d-floatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,25px) scale(1.08); } } /* Hormati preferensi sistem "kurangi gerak". Bukan basa-basi aksesibilitas: animasi dash chart 1,9 detik + 30-an baris tabel yang masuk bergantian memang bisa memicu mual buat sebagian orang. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================================= MULAI DARI SINI: HANYA DESKTOP (>=769px) ========================================================================= */ @media (min-width: 769px) { /* ------------------------------------------------------------------------- 4. LATAR AMBIENT Dua blob warna aksen yang mengambang pelan + lapisan wallpaper opsional. pointer-events:none supaya tidak pernah menghalangi klik. ------------------------------------------------------------------------- */ .d-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(160deg, var(--bg), var(--bg2)); } .d-blob { position: absolute; border-radius: 50%; filter: blur(30px); transition: opacity .5s; } .d-blob-a { top: -180px; left: -120px; width: 620px; height: 620px; background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 68%); animation: d-floatA 22s ease-in-out infinite; } .d-blob-b { bottom: -220px; right: -140px; width: 680px; height: 680px; background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 68%); animation: d-floatB 26s ease-in-out infinite; } /* Wallpaper menyala -> blob aksen dipudarkan supaya fotonya tidak terlihat "kotor" tertimpa dua bercak warna. */ html[data-latar="1"] .d-blob { opacity: .25; } .d-wallpaper { position: absolute; inset: 0; background-size: cover; background-position: center; } /* ------------------------------------------------------------------------- 5. SHELL + RAIL NAVIGASI Rail 92px tetap, tinggi penuh, scroll internal tanpa scrollbar terlihat. ------------------------------------------------------------------------- */ .d-shell { position: relative; z-index: 1; display: flex; height: 100vh; overflow: hidden; } .d-rail { position: relative; flex: 0 0 92px; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 14px 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; background: var(--rail); backdrop-filter: var(--d-blur-rail); -webkit-backdrop-filter: var(--d-blur-rail); border-right: 1px solid var(--border); box-shadow: inset -1px 0 0 rgba(255,255,255,.06); } .d-rail::-webkit-scrollbar { display: none; } /* Indikator aktif: kotak tint + garis 3px. Posisinya dihitung PHP (rail_offset() di includes/ui.php) dan ditulis sebagai inline style -- di app multi-halaman tidak ada yang perlu "bergeser" antar halaman karena tiap pindah halaman itu muat ulang penuh, jadi tidak perlu JS sama sekali di sini. Transisi tetap dipasang untuk jaga-jaga kalau nanti ada halaman ber-tab yang menggeser indikator tanpa reload. */ .d-rail-tanda { position: absolute; left: 12px; top: 0; width: 68px; height: 52px; border-radius: 15px; background: color-mix(in srgb, var(--primary) 14%, transparent); transition: transform .45s var(--d-ease-pop); pointer-events: none; } .d-rail-garis { position: absolute; left: 12px; top: 0; width: 3px; height: 22px; border-radius: 2px; background: var(--primary); transition: transform .45s var(--d-ease-pop); pointer-events: none; } .d-rail-item { position: relative; z-index: 1; flex: 0 0 auto; width: 68px; height: 52px; margin-bottom: 4px; border: none; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 16px; color: color-mix(in srgb, var(--text) 82%, transparent); text-decoration: none; transition: color .25s, transform .3s var(--d-ease-pop); } .d-rail-item:hover { transform: translateY(-2px); text-decoration: none; color: var(--text); } .d-rail-item.aktif { color: var(--primary); } .d-rail-item svg { width: 22px; height: 22px; display: block; } .d-rail-label { font-size: 9.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1; } /* Titik merah notifikasi (stok di bawah minimum / resi menunggu). Cincin --card-solid dipakai supaya titiknya tetap terpisah dari ikon di belakangnya, baik mode terang maupun gelap. */ .d-rail-dot { position: absolute; top: 9px; right: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--card-solid); } .d-rail-pisah { width: 44px; height: 1px; background: var(--border); margin: 4px 0 8px; flex: 0 0 auto; } .d-rail-isi { flex: 1 0 14px; } .d-rail-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(150deg, #a82440, #6d1226); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none; transition: transform .3s var(--d-ease-pop); } .d-rail-avatar:hover { transform: scale(1.08); text-decoration: none; color: #fff; } .d-rail-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------------------- 6. AREA KONTEN (kerangka -- desktop saja) ------------------------------------------------------------------------- */ .d-viewport { flex: 1; min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; } .d-page { max-width: 1180px; margin: 0 auto; padding: 30px 40px 80px; animation: d-screenIn .5s var(--d-ease-out) backwards; } } /* ==== akhir kerangka desktop-only ==== */ /* ========================================================================= KOMPONEN -- BERLAKU DI SEMUA LEBAR ========================================================================= Semua di bawah ini SENGAJA di luar @media (min-width:769px). Alasannya: dari 20-an halaman app, cuma 6 yang punya markup mobile sendiri (blok .m-only). Sisanya -- Pencarian, Barang Keluar, Transaksi, Biaya, Laporan, Pengaturan, Tenant, Scan -- memakai markup yang SAMA di HP maupun desktop, dan selama ini mobile.css yang meneman ulang markup itu (.card, .responsive-table, dst). Begitu halaman-halaman itu pindah ke class .d-*, mobile.css tidak lagi mengenalinya; kalau gaya .d-* juga terkunci di min-width:769px, hasilnya halaman tanpa gaya sama sekali di HP -- bukan "mobile tidak tersentuh", tapi mobile rusak. Yang tetap desktop-only hanyalah KERANGKA (rail, viewport, padding halaman, latar ambient) -- itu memang digantikan topbar + tab bar milik mobile.css. Komponen isinya dipakai bersama, dengan penyesuaian sempit di blok @media (max-width:768px) paling bawah. ========================================================================= */ .d-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .d-head h1 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.035em; } .d-head p { margin: 5px 0 0; font-size: 14px; color: var(--muted); } .d-head-aksi { display: flex; gap: 9px; align-items: center; } .d-seksi { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; } .d-seksi-teks { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; } .d-seksi::after { content: ""; flex: 1; height: 1px; background: var(--hair); } /* ---- Teks telanjang di atas wallpaper foto ---- Judul halaman, subjudul, dan label seksi tidak punya kartu di belakangnya. Di atas gradien turunan tema itu aman; di atas foto arbitrer tidak -- teks #1d1d1f mode terang di atas foto malam praktis hilang. Yang ditimpa HANYA elemen telanjang itu. Sengaja bukan --text di level .d-page: token itu diwarisi juga oleh isi kartu, yang punya latar sendiri dan kontrasnya sudah benar -- menimpanya di sana justru merusak. Kombinator KETURUNAN (spasi), bukan anak-langsung (>). Terlihat seperti bisa dirapikan jadi '>' tapi JANGAN: badan halaman masih dibungkus .m-analitik > .m-analitik-body (panel geser Analitik milik UI mobile, lihat index.php), jadi .d-head bukan anak langsung .d-page dan seluruh aturan ini diam-diam tidak pernah cocok. */ .d-atas-foto-gelap .d-head h1, .d-atas-foto-gelap .d-seksi-teks { color: #f5f5f7; text-shadow: 0 1px 4px rgba(0,0,0,.45); } .d-atas-foto-gelap .d-head p { color: rgba(255,255,255,.78); text-shadow: 0 1px 4px rgba(0,0,0,.45); } .d-atas-foto-gelap .d-seksi::after { background: rgba(255,255,255,.22); } .d-atas-foto-terang .d-head h1, .d-atas-foto-terang .d-seksi-teks { color: #1d1d1f; text-shadow: 0 1px 4px rgba(255,255,255,.5); } .d-atas-foto-terang .d-head p { color: rgba(0,0,0,.68); text-shadow: 0 1px 4px rgba(255,255,255,.5); } .d-atas-foto-terang .d-seksi::after { background: rgba(0,0,0,.18); } /* Tombol ghost di kepala halaman juga duduk telanjang di atas foto, dan latarnya (--field) cuma 9% opak -- di atas foto ia hilang sama sekali. Diberi permukaan padat khusus saat wallpaper menyala. */ .d-atas-foto-gelap .d-head .d-btn-ghost, .d-atas-foto-terang .d-head .d-btn-ghost { background: var(--card-solid); border: 1px solid var(--border); } /* ------------------------------------------------------------------------- 7. KARTU ------------------------------------------------------------------------- */ .d-card { background: var(--card); backdrop-filter: var(--d-blur-card); -webkit-backdrop-filter: var(--d-blur-card); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--d-shadow-card); padding: var(--d-pad-card); animation: d-fadeUp .55s var(--d-ease-out) backwards; } /* Dua kartu yang bersaudara langsung tetap berjarak 14px (handoff: "gap antar kartu 14px"). .d-card sendiri tidak punya margin, jadi kartu yang ditulis berurutan TANPA pembungkus .d-grid/.d-tumpuk akan benar-benar bersentuhan -- terukur gap 0 di Performa Reseller & Integrasi. Di dalam pembungkus yang sudah punya gap, marginnya dinolkan lagi supaya tidak dobel. */ /* Pemilih SAUDARA UMUM (~), bukan saudara langsung (+): di antara dua kartu sering ada blok tersembunyi sumber-isi-sheet (mis. #blokGantiReseller), dan satu elemen di tengah sudah cukup membuat "+" tidak cocok -- kedua kartunya lalu menempel tanpa jarak sama sekali. */ .d-card ~ .d-card { margin-top: 14px; } .d-grid > .d-card ~ .d-card, .d-tumpuk > .d-card ~ .d-card, .d-stack > .d-card ~ .d-card { margin-top: 0; } .d-card-h2 { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 16px; } .d-card-h2 > :first-child { font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .d-grid { display: grid; gap: 14px; } .d-grid-kpi { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); } .d-grid-rasio { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); } /* Dasbor: kartu Rasio & Modal jadi ENAM sejak Total HPP dan Nilai Stok Gudang dipisah (15 Agu 2026). Dengan lantai 196px, lebar desktop biasa cuma muat 5 jalur -- kartu ke-6 turun sendirian dan barisnya timpang. Lantainya diturunkan supaya keenamnya duduk satu baris. Di-scope ke body dasbor: .d-grid-rasio juga dipakai keuangan_view.php dan data_reseller.php dengan jumlah kartu yang lain, dan tidak ada alasan mengubah kepadatan di sana. */ body.dasbor-ringkas .d-grid-rasio, body.dasbor-analitik .d-grid-rasio { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); } /* Enam kolom berarti tiap kartu ~146px ruang isi. Angka 20px membuat "Rp 198.611.295" (~145px) pas di ambang dan pecah jadi "Rp" / angka -- satuan yang menggantung sendirian di satu baris. 18px menuntaskannya (~130px) tanpa mengubah kartu rasio di halaman lain. */ body.dasbor-ringkas .d-grid-rasio .d-kpi-nilai, body.dasbor-analitik .d-grid-rasio .d-kpi-nilai { font-size: 18px; } .d-grid-2 { grid-template-columns: 2fr 1fr; } .d-grid-11 { grid-template-columns: 1fr 1fr; } /* Dua kolom Pengaturan mulai menumpuk lebih awal daripada grid lain: kartunya berisi teks penjelas panjang, jadi di bawah ~1100px dua kolom sudah terlalu sempit untuk dibaca. */ @media (max-width: 1100px) { .d-atur-kolom { grid-template-columns: 1fr; } } .d-grid-15 { grid-template-columns: 1.5fr 1fr; } /* Kartu masuk bergantian, 45ms per kartu. Ditulis sebagai nth-child supaya halaman tidak perlu menghitung delay satu-satu di inline style. */ .d-grid > *:nth-child(1) { animation-delay: 0ms; } .d-grid > *:nth-child(2) { animation-delay: 45ms; } .d-grid > *:nth-child(3) { animation-delay: 90ms; } .d-grid > *:nth-child(4) { animation-delay: 135ms; } .d-grid > *:nth-child(5) { animation-delay: 180ms; } .d-grid > *:nth-child(n+6) { animation-delay: 225ms; } /* ------------------------------------------------------------------------- 8. KARTU KPI Tanpa border (border-color transparan), sparkline full-bleed menempel dasar kartu lewat margin negatif sebesar padding kartu. ------------------------------------------------------------------------- */ .d-kpi { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--card); backdrop-filter: var(--d-blur-card); -webkit-backdrop-filter: var(--d-blur-card); border: 1px solid transparent; border-radius: 22px; box-shadow: var(--d-shadow-card); padding: 18px 20px; text-decoration: none; color: inherit; animation: d-fadeUp .55s var(--d-ease-out) backwards; transition: transform .36s cubic-bezier(.34,1.2,.42,1), box-shadow .36s; } .d-kpi.d-kpi-spark { padding: 18px 20px 0; } /* --d-kpi-warna di-set inline per kartu; bayangan hover ikut warnanya supaya tiap KPI terasa punya identitas sendiri, bukan drop shadow abu yang seragam. Tanpa outline, tanpa shade sudut (aturan handoff). */ .d-kpi:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 30px 56px -26px color-mix(in srgb, var(--d-kpi-warna, var(--primary)) 55%, transparent); z-index: 3; text-decoration: none; } a.d-kpi { cursor: pointer; } /* Kartu KPI yang sedang dipilih (mis. reseller aktif di tab Performa). */ .d-kpi-terpilih { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent), var(--d-shadow-card); } .d-kpi:hover .d-kpi-spark-wrap { opacity: 1; } .d-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.35; } .d-kpi-nilai { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin-top: 6px; color: var(--d-kpi-warna, var(--text)); } .d-kpi-delta { display: flex; align-items: baseline; gap: 5px; font-size: 11.5px; margin-top: 5px; flex-wrap: wrap; } .d-kpi-delta b { font-weight: 700; } .d-kpi-delta .d-naik { color: var(--green); } .d-kpi-delta .d-turun { color: var(--red); } .d-kpi-delta em { font-style: normal; color: var(--faint); } .d-kpi-sub { font-size: 12px; color: var(--faint); line-height: 1.45; margin-top: 6px; flex: 1 1 auto; } .d-kpi-isi { flex: 1 1 auto; } .d-kpi-spark-wrap { margin: 14px -20px 0; padding-bottom: 2px; opacity: .85; transform-origin: bottom; transition: opacity .36s; } .d-kpi-spark-wrap svg { width: 100%; height: 42px; display: block; overflow: visible; } .d-spark-garis { stroke-dasharray: 2400; animation: d-dash 1.6s cubic-bezier(.2,.8,.3,1) backwards; } /* Kartu rasio (baris "Rasio & Modal"): angkanya 20px, bukan 26px seperti KPI utama -- handoff memisahkan keduanya, dan pada kartu selebar 196px angka 26px seperti "Rp 198.611.295" pecah jadi dua baris. */ .d-kpi-rasio .d-kpi-nilai { font-size: 20px; letter-spacing: -.02em; } /* Kartu rasio harus tetap PERSEGI PANJANG (lebih lebar daripada tinggi). Semua sel grid meregang setinggi sel tertinggi, jadi tinggi barisnya ditentukan oleh kartu terisi paling banyak -- yaitu kartu dua-nilai (Total HPP + Nilai Stok Gudang). Karena itu yang dipendekkan kartu ITU, bukan grid-nya dibuat align-items:start: kalau tiap kartu setinggi isinya sendiri, dasar barisnya jadi bergerigi. */ .d-kpi-rasio .d-kpi-sub { flex: 0 0 auto; } .d-kpi-ganda .d-kpi-nilai { font-size: 17px; letter-spacing: -.015em; margin-top: 3px; } .d-kpi-ganda .d-kpi-pisah { margin: 8px 0; } /* Dua nilai dipisah garis rambut (dipakai Total HPP / Nilai Stok Gudang). */ .d-kpi-pisah { height: 1px; background: var(--hair); margin: 10px 0; } /* ------------------------------------------------------------------------- 9. TOMBOL ------------------------------------------------------------------------- */ .d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; cursor: pointer; font-weight: 600; white-space: nowrap; padding: 11px 20px; font-size: 14px; text-decoration: none; transition: all .28s cubic-bezier(.34,1.3,.42,1); } .d-btn:hover { transform: translateY(-2px); text-decoration: none; } .d-btn:disabled { cursor: default; transform: none; } .d-btn-kecil { padding: 8px 14px; font-size: 13px; border-radius: 10px; } /* Ikon di dalam tombol. Tanpa ukuran eksplisit sebuah tanpa atribut width/height jatuh ke 0x0 di flex container -- jadi SELURUH ikon tombol (Export, Rentang tanggal, dst) tidak pernah terlihat sama sekali. */ .d-btn svg, .d-btn-ikon { width: 16px; height: 16px; flex: 0 0 16px; } .d-btn-kecil svg { width: 15px; height: 15px; flex: 0 0 15px; } .d-btn-primary { border: none; background: var(--primary); color: #fff; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--primary) 90%, transparent); } .d-btn-primary:hover { color: #fff; } .d-btn-outline { border: 1px solid var(--border); background: var(--card-solid); color: var(--text); } .d-btn-outline:hover { color: var(--text); } .d-btn-ghost { border: none; background: var(--field); color: var(--text); } .d-btn-ghost:hover { color: var(--text); } /* Tombol destruktif: teks merah, latar tint 12%, border 30%. Merah terang HANYA di sini & status buruk -- lihat aturan #8 handoff. */ .d-btn-bahaya { border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); } .d-btn-bahaya:hover { color: var(--red); } /* Varian tenang: garis & teks tetap merah, tapi latarnya kartu -- bukan tint 12%. Dipakai tombol Logout penuh-lebar di Profil: blok merah selebar layar terbaca seperti peringatan, padahal logout itu tindakan biasa. Di tombol berukuran normal tint-nya tetap dipakai. */ .d-btn-bahaya.d-btn-tenang { background: var(--card-solid); } .d-btn-bahaya.d-btn-tenang:hover { background: color-mix(in srgb, var(--red) 8%, var(--card-solid)); } /* Pasangan HIJAU dari .d-btn-bahaya, pola yang sama persis (garis & teks berwarna di atas latar tint) -- untuk tindakan yang MENYELESAIKAN, bukan yang membatalkan. Dipakai berpasangan dengan .d-btn-bahaya supaya sepasang tombol terbaca sebagai "ya / tidak" cuma dari warnanya. */ .d-btn-oke { border: 1px solid color-mix(in srgb, var(--green) 32%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); } .d-btn-oke:hover { color: var(--green); } /* Pasangan KUNING dari .d-btn-bahaya/.d-btn-oke, pola yang sama persis. Untuk tindakan yang perlu MENONJOL tanpa berteriak bahaya: bukan merusak (jadi bukan merah), tapi juga bukan langkah biasa yang boleh ditekan tanpa pikir. Sejauh ini dipakai "Koreksi Angka" di sheet Detail Transaksi -- satu-satunya tombol di sana yang mengubah angka finansial. Warnanya dari token --warning (oranye), bukan kuning murni: kuning murni di atas latar terang nyaris tidak terbaca. */ .d-btn-kuning { border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent); background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); } .d-btn-kuning:hover { color: var(--warning); } /* Tombol aksi yang isinya LAMBANG saja. Kolom Aksi di tabel sempit tidak muat dua tombol berlabel teks; lihat catatan di includes/belum_checkout_helper.php. Ukurannya dipatok (bukan lewat padding) supaya kedua tombol persis sama besar walau lambangnya beda bentuk. */ .d-btn.d-btn-aksi-ikon { width: 38px; height: 36px; padding: 0; gap: 0; flex: 0 0 auto; border-radius: 10px; } /* Garis lambang ditebalkan -- stroke bawaan d_svg() 1.7 terlalu tipis untuk dibaca sekilas sambil packing. Aturan CSS mengalahkan atribut stroke-width di , jadi d_svg() tidak perlu diubah & ikon lain tidak ikut menebal. */ .d-btn.d-btn-aksi-ikon svg { width: 20px; height: 20px; flex: 0 0 20px; stroke-width: 3; } /* Tombol simpan: label -> "Menyimpan..." + spinner -> "Tersimpan" hijau. Statusnya ditaruh di data-status oleh assets/app.js. */ .d-save[data-status="jalan"] { opacity: .75; cursor: default; } .d-save[data-status="ok"] { background: var(--green); } .d-save-spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: d-spin .7s linear infinite; flex: 0 0 13px; } /* ------------------------------------------------------------------------- 10. PILL, SEGMENTED, CHIP ------------------------------------------------------------------------- */ .d-pills { display: flex; flex-wrap: wrap; gap: 8px; } .d-pill { padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: 0 0 auto; line-height: 1.2; border: 1px solid var(--border); background: var(--card-solid); color: var(--muted); text-decoration: none; transition: all .32s cubic-bezier(.34,1.3,.42,1); } .d-pill:hover { color: var(--text); text-decoration: none; } .d-pill.aktif { border-color: transparent; background: var(--primary); color: #fff; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primary) 70%, transparent); transform: translateY(-1px); } /* JEBAKAN #3: grid, bukan flex. Kolom harus sama lebar atau thumb-nya tidak lurus dengan tombolnya. --d-seg-n = jumlah item, di-set inline. */ /* Kepala kartu Riwayat Transaksi: tab status di kiri, kotak cari mengisi sisa ruang di kanan. Sebelumnya keduanya bar filter tersendiri di atas kartu, yang memakan satu baris penuh sebelum tabelnya mulai. */ .d-trx-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .d-trx-bar .d-seg { flex: 0 0 auto; } .d-trx-bar .d-search { flex: 1; min-width: 0; } .d-trx-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Kartu kepala Laporan: pintasan periode di kiri, pemilih tab menempel di kanan. Keduanya menyaring isi yang sama, jadi duduk di satu baris. */ .d-lap-bar { /* Menempel saat digulir, sama seperti bar filter di Dasbor: pilihan periode & pemilih tab dipakai bolak-balik sambil membaca tabel di bawahnya, jadi harus tetap terjangkau tanpa menggulir balik ke atas. */ position: sticky; top: 0; z-index: 12; /* Blur versi BAR, bukan versi kartu: isi tabel lewat di baliknya saat digulir, dan blur kartu yang lebih tipis membuat angkanya masih terbaca samar menembus bar. Sama dengan .d-filter di Dasbor. */ backdrop-filter: var(--d-blur-bar); -webkit-backdrop-filter: var(--d-blur-bar); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; /* Padding kartu filter memang lebih rapat dari kartu isi (24px) -- prototipe handoff menimpanya jadi 18px 22px untuk kartu ini. */ padding: 18px 22px; /* margin-bottom WAJIB: .d-card tidak punya margin sendiri, dan panel tab di bawahnya bermargin 0, jadi tanpa ini kedua kartu benar-benar bersentuhan (terukur gap 0). Handoff: jarak antar kartu 14px. */ margin: 14px 0; } .d-lap-bar .d-seg { flex: 0 0 auto; } /* Isyarat "sedang mengambil data" saat periode diganti tanpa muat ulang -- tanpa kedip halaman, tidak ada tanda lain bahwa sesuatu sedang berjalan. */ .d-lap-sibuk { opacity: .55; pointer-events: none; transition: opacity .2s; } /* SKU panjang di baris kedua No. Resi (mis. PORT96-P1-KANGSA-SILVER2-ABU) dulu menaikkan min-content kolom kiri sampai 790px, sehingga kartu Ringkasan di kanan cuma kebagian sisanya dan judulnya patah dua baris. Boleh dipenggal di mana saja; lebar kolomnya sendiri diatur lewat minmax di transaksi.php, jangan pakai min-width:0 di selnya -- kolom ber-fr (Jam, Penerima) akan runtuh sampai nol. */ .d-grid-trx .d-table-row .d-sub { overflow-wrap: anywhere; } /* minmax(0,...) supaya perbandingan 2:1 benar-benar dipakai. Dengan `2fr 1fr` polos, lantai bawaan fr adalah min-content: kolom kiri mengembang ikut isi tabel (829px terukur) dan kartu Ringkasan kebagian sisanya -- judulnya patah dua baris. Lebar minimum tiap kolom tabel sudah dijaga lewat minmax di transaksi.php, jadi kolom kiri tetap tidak bisa gepeng. */ .d-grid-trx { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } /* Bar kepala halaman Stok: kotak cari memanjang di kiri, pemilih tab menempel di kanan. Satu baris untuk dua kontrol yang dulu memakan dua. */ .d-stok-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; } /* Tempat aslinya: anak pertama kartu tabel. Marginnya menyesuaikan supaya menempel rapi ke kepala kartu, bukan mengambang. */ .d-card > .d-stok-bar { margin: 0 0 16px; } /* Kartu tabel bisa menggulir mendatar; tanpa ini barnya ikut hanyut ke kiri saat tabel lebar digulir. */ .d-card-scroll > .d-stok-bar { position: sticky; left: 0; } .d-stok-bar .d-search { flex: 1; min-width: 0; } .d-stok-bar .d-seg { flex: 0 0 auto; } .d-stok-bar input:disabled { cursor: not-allowed; } .d-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 13px; background: var(--field); width: max-content; max-width: 100%; } .d-seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--d-seg-n, 2)); border-radius: 10px; background: var(--card-solid); box-shadow: 0 1px 3px rgba(0,0,0,.14); transition: transform .42s cubic-bezier(.34,1.35,.42,1); pointer-events: none; } .d-seg-item { position: relative; z-index: 1; padding: 9px 14px; border: none; background: none; cursor: pointer; font-size: 13.5px; font-weight: 600; white-space: nowrap; line-height: 1.3; text-align: center; color: var(--muted); text-decoration: none; transition: color .3s; } .d-seg-item:hover { text-decoration: none; color: var(--text); } .d-seg-item.aktif { color: var(--text); } /* Panel tab yang ditukar di sisi klien. Nama classnya SENGAJA tetap .tab-panel (tanpa awalan d-): halaman Stok sudah memakainya di markup dan di JS gantiTab(), dan menamainya ulang berarti menyentuh keduanya tanpa alasan. Gayanya sendiri sebelumnya ada di style.css lama -- tanpa aturan di bawah, SEMUA panel tampil bertumpuk sekaligus. */ .tab-panel { display: none; } /* Tumpukan kartu berjarak, seperti pembungkus isi layar di prototipe. Dipakai panel tab halaman Scan, yang menaruh kartunya sebagai saudara langsung (bukan di dalam .d-grid). Kedua aturan .tab-panel di bawah ditulis dengan DUA class supaya menang atas .d-tumpuk polos -- kalau tidak, panel yang sedang tidak aktif ikut tampil begitu .d-tumpuk kebetulan berada di urutan CSS setelahnya. */ .d-tumpuk { display: flex; flex-direction: column; gap: 14px; } .tab-panel.d-tumpuk:not(.active) { display: none; } .tab-panel.d-tumpuk.active { display: flex; } .tab-panel.active { display: block; animation: d-fadeUp .35s var(--d-ease-out) backwards; } .d-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .d-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: 0 0 auto; border: 1px solid var(--border); background: transparent; color: var(--muted); text-decoration: none; transition: all .3s cubic-bezier(.34,1.3,.42,1); } .d-chip:hover { text-decoration: none; } .d-chip.aktif { border-color: transparent; background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); } .d-chip-tanda { font-size: 13px; opacity: .75; } .d-chip:not(.aktif) .d-chip-tanda { font-size: 14px; opacity: .6; } .d-chips-ket { font-size: 12px; color: var(--faint); margin-left: 2px; } /* ------------------------------------------------------------------------- 11. BAR FILTER STICKY z-index 12 + blur 40px. Menempel di atas viewport konten saat digulir. ------------------------------------------------------------------------- */ .d-filter { position: sticky; top: 0; z-index: 12; /* 14px, sama dengan jarak antar kartu di handoff. Dulu 4px, jadi bar filter terlihat menempel ke kartu pertama di bawahnya. */ margin-bottom: 14px; padding: 14px 18px; border-radius: 20px; background: var(--card); backdrop-filter: var(--d-blur-bar); -webkit-backdrop-filter: var(--d-blur-bar); border: 1px solid var(--border); box-shadow: var(--d-shadow-card); } .d-filter-baris { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* Sepasang tombol di ujung baris filter (Filter + Reset di Arus Kas). */ .d-filter-aksi { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; } .d-filter-pisah { height: 1px; background: var(--hair); margin: 12px 0; } /* Bagian yang sedang diambil ulang lewat Diamondo.ajaxGanti(). Sengaja cuma diredupkan, BUKAN diganti spinner: isinya masih angka yang sah (periode sebelumnya), jadi lebih baik tetap terbaca sepersekian detik daripada berkedip jadi kosong. */ .d-memuat { opacity: .45; pointer-events: none; transition: opacity .15s; } /* ------------------------------------------------------------------------- 12. TABEL Grid, bukan : kolomnya perlu fr/minmax dan tiap baris perlu jadi kartu sendiri dengan radius + hover geser. --d-kolom di-set inline. ------------------------------------------------------------------------- */ .d-table-head, .d-table-row { display: grid; grid-template-columns: var(--d-kolom); gap: 14px; align-items: center; } .d-table-head { padding: 0 14px 10px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); } /* Judul kolom yang bisa diklik untuk mengurutkan. Panahnya muncul hanya pada kolom yang sedang aktif -- panah pucat di semua kolom sekaligus membuat header jadi ramai tanpa menambah informasi. */ .d-th-sort { cursor: pointer; user-select: none; transition: color .2s; } .d-th-sort:hover { color: var(--text); } .d-th-sort.sort-asc::after { content: " \2191"; color: var(--primary); } .d-th-sort.sort-desc::after { content: " \2193"; color: var(--primary); } /* Bar paginasi. Markup-nya dibuat buatPaginasi() di assets/table-utils.js yang dipakai bersama halaman UI lama, jadi class-nya masih .btn/.small/ .pagination-info. Ditema ulang di sini secara terkurung dalam .d-paginasi, supaya table-utils.js tidak perlu dicabang dua. */ .d-paginasi { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; } .d-paginasi:empty { display: none; } .d-paginasi .pagination-info { font-size: 12.5px; color: var(--muted); } .d-paginasi .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-solid); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .2s, opacity .2s, transform .28s cubic-bezier(.34,1.3,.42,1); } /* Angkat 2px seperti semua tombol lain (handoff). Dulu cuma border yang berubah, jadi tombol paginasi terasa mati dibanding tombol di sekitarnya. */ .d-paginasi .btn:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-2px); } .d-paginasi .btn:disabled { opacity: .4; cursor: default; } /* ---- Varian untuk
sungguhan ---- d-table (grid) dipakai tabel yang barisnya dirender PHP dan tidak disentuh JS. Sebagian halaman lama punya tabel yang barisnya DIBANGUN ULANG oleh JS setelah aksi AJAX (mis. Daftar Produk: satu disusun ulang sel demi sel setelah Edit tersimpan). Mengubah tabel itu jadi
berarti ikut menulis ulang JS-nya -- pekerjaan berisiko yang tidak menghasilkan perbedaan apa pun di layar. Jadi tabel semacam itu tetap
, dan aturan di bawah membuatnya tampil sama dengan .d-table. */ .d-tabel { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13.5px; } .d-tabel .rt-head th, .d-tabel thead th { padding: 0 14px 10px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); text-align: left; white-space: nowrap; } /* Judul kolom ikut perataan selnya. Tanpa ini `text-align:left` di atas (spesifisitas 0,2,1) mengalahkan .d-kanan (0,1,0), sehingga SETIAP judul kolom angka berdiri di kiri sementara angkanya rata kanan -- matanya kehilangan garis bantu dan kolomnya jadi sulit dibaca. */ .d-tabel .rt-head th.d-kanan, .d-tabel thead th.d-kanan { text-align: right; } .d-tabel .rt-head th.d-tengah, .d-tabel thead th.d-tengah { text-align: center; } .d-tabel td { padding: var(--d-pad-row); background: var(--card-solid); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); vertical-align: middle; /* Jangan pernah memecah nilai di tengah. Tabel Paket punya 8 kolom, dan tanpa ini browser memenggal "Rp 611.500" jadi dua baris begitu ruang menyempit -- angka yang terbelah lebih sulit dibaca daripada tabel yang harus digulir sedikit. Kartunya sendiri yang bergulir mendatar, lihat .d-card-scroll. */ white-space: nowrap; } /* Kolom nama boleh membungkus -- isinya kalimat, bukan angka. */ .d-tabel td.d-bungkus { white-space: normal; } /* Baris pemisah di dalam tabel: bukan data, melainkan judul kelompok (dipakai sheet Rincian Batch Stok untuk memisahkan batch yang masih ada isinya dari riwayat yang sudah habis). Sengaja di-scope ke class sendiri supaya tidak menumpang aturan
biasa -- latar kartu, border, dan radius sudut dibatalkan semua, jadi ia terbaca sebagai label, bukan baris tabel yang kebetulan kosong. */ .d-tabel tr.batch-pemisah td { background: none; border: 0; border-radius: 0; padding: 18px 7px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); } /* JUDUL kolomnya juga. Aturan `white-space: nowrap` di atas berlaku pada .d-tabel .rt-head th / thead th (spesifisitas 0,2,1), jadi menempelkan .d-bungkus di saja dulu tidak berpengaruh apa-apa -- judul dua kata seperti "Stok Sebelum" atau "Jumlah Masuk" tetap memaksa satu baris dan ikut mendorong tabel melewati lebar kartu. Selektornya disamakan panjang supaya menang, dan break-word (bukan anywhere) supaya judul pecah di SPASI lebih dulu, tidak di tengah kata. */ .d-tabel .rt-head th.d-bungkus, .d-tabel thead th.d-bungkus { white-space: normal; overflow-wrap: break-word; } /* Kartu yang isinya tabel lebar: yang bergulir KARTUNYA, bukan badan halaman (aturan handoff -- halaman tidak boleh pernah bergeser mendatar). */ .d-card-scroll { overflow-x: auto; } .d-tabel td:first-child { border-left: 1px solid var(--hair); border-radius: 14px 0 0 14px; } .d-tabel td:last-child { border-right: 1px solid var(--hair); border-radius: 0 14px 14px 0; } .d-tabel tbody tr, .d-tabel tr { transition: transform .26s, box-shadow .26s; } /* Baris masuk bergiliran (handoff: rowIn .42s, jeda 34ms/baris). Dulu cuma .d-table-row versi grid yang dapat; tabel -- yang dipakai sebagian besar halaman -- muncul serentak tanpa animasi. */ .d-tabel tr:not(.rt-head) { animation: d-rowIn .42s var(--d-ease-out) backwards; } .d-tabel tr:not(.rt-head):nth-child(1) { animation-delay: 0ms; } .d-tabel tr:not(.rt-head):nth-child(2) { animation-delay: 34ms; } .d-tabel tr:not(.rt-head):nth-child(3) { animation-delay: 68ms; } .d-tabel tr:not(.rt-head):nth-child(4) { animation-delay: 102ms; } .d-tabel tr:not(.rt-head):nth-child(5) { animation-delay: 136ms; } .d-tabel tr:not(.rt-head):nth-child(6) { animation-delay: 170ms; } .d-tabel tr:not(.rt-head):nth-child(7) { animation-delay: 204ms; } .d-tabel tr:not(.rt-head):nth-child(8) { animation-delay: 238ms; } .d-tabel tr:not(.rt-head):nth-child(9) { animation-delay: 272ms; } .d-tabel tr:not(.rt-head):nth-child(10) { animation-delay: 306ms; } /* Lewat baris ke-11 delaynya dirata: lebih dari itu terasa seperti halaman lambat, bukan animasi -- alasan yang sama seperti .d-table-row. */ .d-tabel tr:not(.rt-head):nth-child(n+11) { animation-delay: 340ms; } /* Hover: geser 4px + bayangan halus, sesuai handoff. Berlaku untuk SEMUA baris, bukan cuma .d-baris-klik -- di prototipe pun begitu. */ .d-tabel tr:not(.rt-head):hover td { background: color-mix(in srgb, var(--primary) 4%, var(--card-solid)); } .d-tabel tr:not(.rt-head):hover { transform: translateX(4px); box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .4); } .d-tabel .empty-state, .d-tabel td.empty-state { padding: 34px; text-align: center; color: var(--faint); background: transparent; border: 0; } /* Beberapa badge berdampingan dalam satu sel, bukan bertumpuk lewat
. Dipakai kolom Status di tabel Produk supaya barisnya setinggi satu baris teks saja. flex-wrap dipertahankan supaya di kolom sempit badge-nya turun sendiri, bukan menjebol lebar tabel. */ .d-badge-baris { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .d-badge-baris > .hide-mobile { display: inline-flex; align-items: center; gap: 6px; } /* Label yang diawali kotak centang (mis. pilihan metrik grafik Laporan). */ .d-cek-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; } /* ------------------------------------------------------------------------- TABEL LABA RUGI (tab Laporan > Laba Rugi) Baris pengurang ditulis menjorok & diredupkan; dua baris jumlah diberi tint (hijau untuk Laba Kotor, burgundy untuk Laba Bersih) seperti handoff. ------------------------------------------------------------------------- */ .d-tabel-labarugi .baris-lr-kurang td:first-child { padding-left: 30px; color: var(--muted); } .d-tabel-labarugi .baris-lr-total-hijau td { background: color-mix(in srgb, var(--green) 11%, var(--card-solid)); font-weight: 700; } .d-tabel-labarugi .baris-lr-total-brand td { background: color-mix(in srgb, var(--primary) 11%, var(--card-solid)); font-weight: 700; } .d-tabel-labarugi .baris-lr-total-hijau:hover td, .d-tabel-labarugi .baris-lr-total-brand:hover td { background: inherit; } /* Daftar "label ... nilai" dua kolom di dalam kartu (kartu Titik Impas). */ .d-rincian { display: flex; flex-direction: column; gap: 2px; } .d-rincian-baris { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid var(--hair); } .d-rincian-baris:last-child { border-bottom: 0; } .d-rincian-baris > :first-child { color: var(--muted); } .d-rincian-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); border-bottom: 0; } /* Baris produk nonaktif: diredupkan, bukan disembunyikan. */ .d-tabel tr.tr-nonaktif td { opacity: .55; } /* Baris yang membuka sheet kalau diklik (Produk & Paket di halaman Stok). Handoff memindahkan Edit dari tombol per baris ke barisnya sendiri, jadi barisnya harus KELIHATAN bisa diklik: kursor berubah, dan seluruh baris bergeser sedikit ke kanan saat disorot -- gerakan yang sama dengan baris tabel di prototipe (translateX 4px + bayangan). */ .d-tabel tr.d-baris-klik { cursor: pointer; } .d-tabel tr.d-baris-klik:hover { transform: translateX(4px); box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .4); } .d-tabel tr.d-baris-klik:focus-visible { outline: none; transform: translateX(4px); } .d-tabel tr.d-baris-klik:focus-visible td { background: color-mix(in srgb, var(--primary) 7%, var(--card-solid)); } .d-tabel tr.d-baris-klik:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--primary); } /* Tabel pratinjau impor -- padat, dalam kotak bergulir. */ .d-tabel-pratinjau { width: 100%; border-collapse: collapse; font-size: 12px; } .d-tabel-pratinjau th, .d-tabel-pratinjau td { padding: 6px 10px; border-bottom: 1px solid var(--hair); text-align: left; white-space: nowrap; } .d-tabel-pratinjau th { position: sticky; top: 0; background: var(--field); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); } .d-table-body { display: flex; flex-direction: column; gap: 4px; } .d-table-row { padding: var(--d-pad-row); border-radius: 14px; background: var(--card-solid); border: 1px solid var(--hair); font-size: 13.5px; color: inherit; text-decoration: none; animation: d-rowIn .42s var(--d-ease-out) backwards; transition: transform .26s, box-shadow .26s; } .d-table-row:hover { transform: translateX(4px); box-shadow: 0 10px 26px -18px rgba(0,0,0,.4); text-decoration: none; } a.d-table-row, .d-table-row[data-klik] { cursor: pointer; } /* Sel dipotong ellipsis KECUALI kolom beraksi (.d-keep) -- tanpa ini tombol di kolom Aksi ikut terpotong begitu tabelnya sempit. */ .d-table-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .d-table-row > .d-keep { overflow: visible; } .d-kanan { text-align: right; } .d-tengah { text-align: center; } .d-table-kosong { padding: 34px; text-align: center; color: var(--faint); font-size: 13.5px; } /* Delay masuk per baris 34ms. Dibatasi 12 baris lalu rata: lebih dari itu delay-nya jadi lebih dari 0,4 detik dan mulai terasa seperti halaman lambat, bukan animasi. Baris ke-25 ke atas langsung tampil tanpa animasi sama sekali -- tabel panjang tidak boleh menunda pembacaan. */ .d-table-body > .d-table-row:nth-child(1) { animation-delay: 0ms; } .d-table-body > .d-table-row:nth-child(2) { animation-delay: 34ms; } .d-table-body > .d-table-row:nth-child(3) { animation-delay: 68ms; } .d-table-body > .d-table-row:nth-child(4) { animation-delay: 102ms; } .d-table-body > .d-table-row:nth-child(5) { animation-delay: 136ms; } .d-table-body > .d-table-row:nth-child(6) { animation-delay: 170ms; } .d-table-body > .d-table-row:nth-child(7) { animation-delay: 204ms; } .d-table-body > .d-table-row:nth-child(8) { animation-delay: 238ms; } .d-table-body > .d-table-row:nth-child(9) { animation-delay: 272ms; } .d-table-body > .d-table-row:nth-child(10) { animation-delay: 306ms; } .d-table-body > .d-table-row:nth-child(11) { animation-delay: 340ms; } .d-table-body > .d-table-row:nth-child(n+12) { animation-delay: 374ms; } .d-table-body > .d-table-row:nth-child(n+25) { animation: none; } /* Tabel yang badannya dirender ulang berkala (Barang Keluar: polling 3 detik supaya terasa realtime saat resi discan). Di sana animasi masuk justru merugikan -- tiap muat ulang mengganti SELURUH isi tbody, jadi d-rowIn main lagi dari awal dan penyegaran yang seharusnya tak terasa malah jadi kedipan berjenjang tiap 3 detik. Berlaku di HP maupun desktop: aturannya tidak dibungkus media query. Ditaruh SESUDAH blok nth-child di atas -- kekhususannya seri (0,3,0), jadi yang menang adalah yang belakangan. */ .d-tanpa-animasi .d-table-body > .d-table-row, .d-tanpa-animasi .d-table-row * { animation: none; } /* SKU pada Barang Keluar dicetak tebal (permintaan pemilik 17 Agu 2026). Di HP ia menggantikan kolom Penerima, di desktop ia satu dari tujuh kolom -- di kedua-duanya dialah yang dibaca petugas saat mencocokkan barang, jadi ia yang perlu paling cepat ketemu mata. Tidak dibungkus media query: berlaku di HP maupun desktop. Di-scope ke .baris-belum-checkout, BUKAN ke [data-label="SKU"] umum: data-label dipasang otomatis oleh d_table() dari judul kolom, jadi selektor tanpa scope akan ikut menebalkan kolom SKU di halaman lain yang tidak meminta apa-apa. .detail-more ("+2 lainnya") sengaja dikembalikan ke berat biasa -- itu keterangan bahwa masih ada sisa, bukan bagian dari SKU-nya. */ .baris-belum-checkout > [data-label="SKU"] { font-weight: 700; } .baris-belum-checkout > [data-label="SKU"] .detail-more { font-weight: 400; } /* ------------------------------------------------------------------------- 13. BADGE & DELTA ------------------------------------------------------------------------- */ .d-badge { display: inline-block; animation: d-popIn .28s var(--d-ease-pop) backwards; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; background: color-mix(in srgb, var(--d-badge-warna, var(--muted)) 14%, transparent); color: var(--d-badge-warna, var(--muted)); } /* Badge yang sekaligus tautan (mis. "n SKU tertahan" di Data Reseller): tetap terlihat sebagai badge, bukan teks bergaris bawah. */ a.d-badge { text-decoration: none; cursor: pointer; } .d-badge-ok { --d-badge-warna: var(--green); } .d-badge-warn { --d-badge-warna: var(--orange); } .d-badge-buruk { --d-badge-warna: var(--red); } .d-badge-info { --d-badge-warna: var(--teal); } /* Kelabu: keadaan yang bukan kabar baik maupun buruk, cuma "tidak berjalan" (tenant Nonaktif & Internal di handoff). --d-badge-info sudah dipakai teal, dan teal terbaca seperti informasi penting. */ .d-badge-netral { --d-badge-warna: var(--muted); } .d-badge-brand { --d-badge-warna: var(--primary); } /* Warna merek marketplace. Ditaruh sebagai token supaya tema gelap bisa menaikkan terangnya tanpa mengulang aturan badge-nya. Nilai mentah merek itu dirancang untuk latar putih; di atas #0b0b0d hijau Tokopedia mulai redup, jadi versi gelapnya dinaikkan. */ .d-badge-shopee { --d-badge-warna: var(--merek-shopee); } .d-badge-tiktok { --d-badge-warna: var(--merek-tiktok); } .d-delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: -.01em; background: color-mix(in srgb, var(--d-delta-warna) 14%, transparent); color: var(--d-delta-warna); } .d-delta-naik { --d-delta-warna: var(--green); } .d-delta-turun { --d-delta-warna: var(--red); } .d-delta i { font-style: normal; font-size: 9px; } /* ------------------------------------------------------------------------- 14. BAR HORIZONTAL & PROGRESS ------------------------------------------------------------------------- */ .d-bars { display: flex; flex-direction: column; gap: 13px; } .d-bar-label { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; } .d-bar-label > :first-child { font-weight: 600; } .d-bar-label > :last-child { color: var(--muted); font-variant-numeric: tabular-nums; } .d-bar-track { height: 8px; border-radius: 6px; background: var(--field); overflow: hidden; } .d-bar-isi { height: 100%; border-radius: 6px; background: var(--d-bar-warna, var(--primary)); transform-origin: left; animation: d-growX .8s var(--d-ease-out) backwards; transition: width .6s; } /* --------------------------------------------------------------------- Grafik batang berkelompok (d_chart_batang) -- dua batang per kelompok. Tingginya persentase dari puncak, jadi tidak perlu diukur JS. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- Slot suara scan (sheet Unggah Suara Scan). Satu baris per kejadian, dan barisnya SEKALIGUS zona lepas berkas -- garis putus-putus bernada sesuai kejadiannya (hijau berhasil, merah gagal, kelabu selesai). --------------------------------------------------------------------- */ .d-slot-suara { --d-slot-warna: var(--muted); display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--d-slot-warna) 40%, transparent); background: color-mix(in srgb, var(--d-slot-warna) 5%, transparent); transition: border-color .22s, background .22s, transform .22s; } .d-slot-ok { --d-slot-warna: var(--green); } .d-slot-buruk { --d-slot-warna: var(--red); } .d-slot-netral { --d-slot-warna: var(--muted); } .d-slot-suara.d-slot-aktif { border-color: var(--d-slot-warna); background: color-mix(in srgb, var(--d-slot-warna) 12%, transparent); transform: scale(1.01); } .d-slot-ikon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--d-slot-warna) 16%, transparent); color: var(--d-slot-warna); } .d-slot-ikon svg { width: 18px; height: 18px; } .d-slot-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .d-slot-judul { font-size: 14px; font-weight: 700; letter-spacing: -.01em; } .d-slot-ket { font-size: 12px; color: var(--muted); } .d-slot-berkas { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--faint); overflow-wrap: anywhere; } .d-slot-aksi { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } /* Kepala sheet Edit Profil: avatar + tombol ganti foto berdampingan. */ .d-profil-atas { display: flex; align-items: center; gap: 16px; } .d-profil-atas .user-avatar { flex: 0 0 62px; width: 62px; height: 62px; font-size: 22px; } /* Indikator kekuatan password. */ .d-pw-kuat { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .d-pw-track { flex: 1; height: 5px; border-radius: 999px; background: var(--field); overflow: hidden; } .d-pw-isi { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .3s var(--d-ease-out), background .3s; } .d-pw-label { font-size: 12px; font-weight: 700; flex: 0 0 auto; } @media (max-width: 560px) { .d-slot-suara { flex-wrap: wrap; } .d-slot-aksi { width: 100%; justify-content: flex-end; } } /* Sheet dua-rentang: pasangan tanggal KIRI lawan KANAN, dipisah kolom "dibandingkan dengan" bergaris tegak. Bertumpuk atas-bawah membuat keempat kotaknya terbaca seperti satu daftar berurutan, bukan dua sisi. */ .d-banding-duo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; } /* Tombol tanggal mengisi penuh kolomnya -- kalau dibiarkan selebar isinya, sisa ruang di kanan tiap tombol jadi lubang kosong yang membuat sheet terasa jauh lebih lebar dari isinya. */ .d-banding-sisi .d-kal-tombol { width: 100%; justify-content: flex-start; } .d-banding-sisi .d-field + .d-field { margin-top: 10px !important; } .d-banding-vs { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 82px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.3; } .d-banding-vs::before, .d-banding-vs::after { content: ""; flex: 1; width: 1px; background: var(--hair); } /* Di HP sheet-nya selebar layar -- tiga kolom jadi terlalu sempit, jadi dilipat: pasangan atas, pemisah mendatar, pasangan bawah. */ @media (max-width: 640px) { .d-banding-duo { grid-template-columns: 1fr; } .d-banding-vs { flex-direction: row; max-width: none; width: 100%; gap: 12px; } .d-banding-vs::before, .d-banding-vs::after { width: auto; height: 1px; } } .d-batang { --d-batang-tinggi: 220px; } .d-batang-plot { display: flex; align-items: flex-end; gap: 6px; height: var(--d-batang-tinggi); margin-top: 8px; } .d-batang-grup { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; } .d-batang-pasangan { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 7px; } .d-batang-bar { position: relative; width: 26px; max-width: 22%; min-height: 3px; border-radius: 7px 7px 0 0; transform-origin: bottom; animation: d-grow .75s var(--d-ease-out) backwards; transition: filter .25s; } .d-batang-grup:nth-child(1) .d-batang-bar { animation-delay: 0ms; } .d-batang-grup:nth-child(2) .d-batang-bar { animation-delay: 60ms; } .d-batang-grup:nth-child(3) .d-batang-bar { animation-delay: 120ms; } .d-batang-grup:nth-child(4) .d-batang-bar { animation-delay: 180ms; } .d-batang-grup:nth-child(5) .d-batang-bar { animation-delay: 240ms; } .d-batang-grup:nth-child(6) .d-batang-bar { animation-delay: 300ms; } .d-batang-grup:nth-child(n+7) .d-batang-bar { animation-delay: 360ms; } .d-batang-bar:hover { filter: brightness(1.12); } .d-batang-nama { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Tooltip kustom -- handoff melarang title= bawaan browser. */ .d-batang-tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 7px 11px; border-radius: 11px; background: var(--card-solid); border: 1px solid var(--border); box-shadow: 0 18px 34px -18px rgba(0,0,0,.45); font-size: 11.5px; color: var(--muted); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; } .d-batang-tip b { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; } .d-batang-bar:hover .d-batang-tip { opacity: 1; transform: translateX(-50%) translateY(0); } .d-batang-legenda { display: flex; gap: 18px; margin-top: 16px; font-size: 12.5px; color: var(--muted); } .d-batang-legenda span { display: inline-flex; align-items: center; gap: 7px; } .d-batang-legenda i { width: 16px; height: 4px; border-radius: 999px; } .d-bars > *:nth-child(1) .d-bar-isi { animation-delay: 0ms; } .d-bars > *:nth-child(2) .d-bar-isi { animation-delay: 70ms; } .d-bars > *:nth-child(3) .d-bar-isi { animation-delay: 140ms; } .d-bars > *:nth-child(4) .d-bar-isi { animation-delay: 210ms; } .d-bars > *:nth-child(5) .d-bar-isi { animation-delay: 280ms; } .d-bars > *:nth-child(n+6) .d-bar-isi { animation-delay: 350ms; } /* Bar mini di kolom "Pangsa" tabel produk terbaik: 46x6px. display:block WAJIB di track & isi -- keduanya (harus inline agar boleh duduk di dalam sel tabel bersama teks persennya), dan elemen inline mengabaikan width/height sepenuhnya, jadi tanpa ini barnya tidak pernah tergambar sama sekali. */ .d-pangsa { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; } .d-pangsa-track { display: block; width: 46px; height: 6px; border-radius: 4px; background: var(--field); overflow: hidden; flex: 0 0 46px; } .d-pangsa-isi { display: block; height: 100%; border-radius: 4px; background: var(--primary); transform-origin: left; animation: d-growX .8s var(--d-ease-out) backwards; } /* ------------------------------------------------------------------------- 15. ISIAN ------------------------------------------------------------------------- */ .d-field { display: block; } .d-field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 7px; } .d-input { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--card-solid); color: var(--text); font-size: 14px; transition: border-color .25s, box-shadow .25s; } .d-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--primary) 16%, transparent); } .d-input-angka { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; } /* Panah naik-turun bawaan browser di dibuang. Dua alasan: bentuknya digambar OS (handoff melarang kontrol bawaan browser), dan di kolom harga tombol itu lebih sering jadi sumber salah input daripada bantuan -- sekali serempet, HPP berubah tanpa disadari. Angka tetap diketik seperti biasa; tempat yang memang butuh naik-turun sudah punya .d-stepper sendiri. Pasangannya di assets/app.js: roda mouse & tombol panah/PageUp/PageDown juga tidak lagi mengubah nilainya. */ .d-input[type="number"]::-webkit-outer-spin-button, .d-input[type="number"]::-webkit-inner-spin-button, .qty-field::-webkit-outer-spin-button, .qty-field::-webkit-inner-spin-button, .inp-qty-selamat::-webkit-outer-spin-button, .inp-qty-selamat::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } .d-input[type="number"], .qty-field, .inp-qty-selamat { -moz-appearance: textfield; appearance: textfield; } /* Isian yang nilainya sudah diubah tapi BELUM disimpan (tabel HPP Reseller). Penanda ini yang membuat "n SKU diubah" di action bar bisa ditelusuri balik ke barisnya -- tanpa itu user harus mengingat sendiri mana yang tadi disentuh sebelum menekan Simpan. */ .d-input-berubah { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--card-solid)); } /* , dan hampir semuanya sudah diganti d_pilih(). Yang tersisa adalah dropdown yang daftar pilihannya DIBANGUN ULANG oleh JS saat berjalan (mis. daftar supplier solasi yang menyesuaikan jenis kardus terpilih) dan bisa memuat puluhan baris -- deretan pill di situ jadi tidak terpakai, bukan lebih baik. Ditema seperti .d-input, dengan panah digambar sendiri supaya tidak memakai panah bawaan OS. */ .d-select { width: 100%; padding: 11px 38px 11px 14px; border-radius: 12px; border: 1px solid var(--border); background-color: var(--card-solid); color: var(--text); font-size: 14px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; transition: border-color .25s, box-shadow .25s; } .d-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--primary) 16%, transparent); } /* bawaan browser: komponen terpilih tampil sebagai kartu (kode + modalnya + stepper qty + tombol buang), dan produk yang belum dipakai dipilih dari panel yang bisa dibuka-tutup. ------------------------------------------------------------------------- */ .komp-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .komp-baris { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 6px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--hair); animation: d-fadeUp .32s var(--d-ease-out) backwards; } .komp-info { flex: 1; min-width: 0; } .komp-kode { display: block; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .komp-ket { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); } .komp-buang { flex: 0 0 26px; width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--field); color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; transition: background .22s, color .22s; } .komp-buang:hover { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); } .komp-kosong { padding: 20px; border-radius: 14px; background: var(--field); text-align: center; font-size: 13px; color: var(--faint); } .komp-tambah-wrap { margin-top: 10px; } .komp-panel { margin-top: 8px; max-height: 220px; overflow: auto; padding: 6px; border-radius: 16px; background: var(--field); animation: d-fadeUp .3s var(--d-ease-out) backwards; } .komp-opsi { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; /* Border transparan, bukan `none`: hover mengubah WARNANYA, dan tanpa border yang sudah ada perubahan warna itu tidak terlihat sekaligus menggeser tata letak 1px saat muncul. */ border: 1px solid transparent; background: none; border-radius: 11px; cursor: pointer; text-align: left; color: var(--text); transition: background .2s, transform .24s, border-color .24s; } /* Handoff: butir daftar di sheet -> translateX(4px) + border --primary. */ .komp-opsi:hover { background: var(--card-solid); transform: translateX(4px); border-color: var(--primary); } .komp-tambah-label { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--primary); } .d-stepper { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: var(--field); } .d-stepper button { width: 32px; height: 32px; border-radius: 9px; border: none; cursor: pointer; background: var(--card-solid); color: var(--text); font-size: 16px; font-weight: 600; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: transform .22s; } .d-stepper button:active { transform: scale(.9); } .d-stepper-nilai { min-width: 38px; width: 4.5em; text-align: center; font-size: 14.5px; font-weight: 700; } /* Angkanya bisa diketik langsung -- tombol saja tidak cukup untuk perubahan stok besar. Tampilannya tetap teks polos, bukan kotak input. */ input.d-stepper-nilai { border: none; background: none; color: inherit; font-family: inherit; padding: 0; border-radius: 8px; } input.d-stepper-nilai:focus { outline: 2px solid var(--primary); outline-offset: 2px; } .d-toggle { position: relative; width: 50px; height: 30px; border-radius: 999px; border: none; cursor: pointer; background: var(--field); transition: background .32s; flex: 0 0 50px; } .d-toggle.aktif { background: var(--green); } .d-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .34s var(--d-ease-pop); } .d-toggle.aktif::after { transform: translateX(20px); } /* Drop zone berkas. Aturan #1 handoff melarang elemen bawaan browser, dan adalah pelanggar terakhir yang tersisa: tombol "Choose Files"-nya digambar OS, tidak bisa ditema, dan berbahasa Inggris walau seluruh UI berbahasa Indonesia. Input aslinya tetap ada (dibuat tak terlihat, BUKAN display:none supaya tetap bisa difokus keyboard dan tetap ikut ter-submit); yang terlihat adalah zona ini. */ .d-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px; border-radius: 16px; border: 1.5px dashed var(--border); background: var(--field); text-align: center; cursor: pointer; transition: border-color .25s, background .25s; } .d-drop:hover { border-color: var(--primary); } .d-drop.seret { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); } .d-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .d-drop svg { width: 22px; height: 22px; color: var(--faint); } .d-drop-judul { font-size: 13.5px; font-weight: 600; } .d-drop-ket { font-size: 12px; color: var(--faint); } .d-drop-nama { font-size: 12.5px; font-weight: 600; color: var(--primary); } /* Jarak antar langkah di blok Rekonsiliasi (index.php). Dulu style inline; dijadikan kelas supaya versi ringkas di kartu HP bisa merapatkannya tanpa perlu !important. Nilainya sama persis dengan inline yang digantikan. */ .d-rekon-langkah { margin-top: 16px; } /* Checkbox bulat. appearance:none lalu digambar sendiri -- kotak centang bawaan OS satu-satunya elemen di halaman ini yang tidak ikut tema, dan di mode gelap ia tampil sebagai kotak putih terang yang mencolok. */ .d-check { appearance: none; -webkit-appearance: none; position: relative; width: 21px; height: 21px; flex: 0 0 21px; border-radius: 7px; border: 1.5px solid var(--border); background: var(--card-solid); cursor: pointer; margin: 0; transition: background .24s var(--d-ease-pop), border-color .24s var(--d-ease-pop), transform .24s var(--d-ease-pop); } .d-check:hover { border-color: var(--primary); } .d-check:checked { background: var(--primary); border-color: var(--primary); /* Sedikit membesar saat tercentang -- gerakan yang sama dengan prototipe, jadi perubahannya terasa, bukan cuma berganti warna. */ transform: scale(1.06); } .d-check:checked::after { content: ""; position: absolute; left: 6.5px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); } /* Keadaan setengah (sebagian baris terpilih) di kotak "pilih semua". */ .d-check:indeterminate { background: var(--primary); border-color: var(--primary); } .d-check:indeterminate::after { content: ""; position: absolute; left: 4px; top: 8.2px; width: 11px; height: 0; border-top: 2.2px solid #fff; border-radius: 2px; } /* Kolom yang gagal validasi. Ditandai app.js waktu peristiwa 'invalid' ditahan -- lihat pasangValidasiKustom(). Ini pengganti VISUAL dari gelembung bawaan browser, bukan tambahan di atasnya. */ .d-invalid, .d-input.d-invalid, .d-select.d-invalid { border-color: var(--red) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent); } /* . Versi pertama aturan ini memakai `.d-invalid + .d-select-tombol` ("tombol SESUDAH select") dan karena itu tidak pernah cocok sama sekali. CSS tidak punya kombinator "saudara sebelumnya", jadi arahnya dibalik lewat :has(). */ .d-select-tombol:has(+ select.d-select-asli.d-invalid) { border-color: var(--red) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent); } .d-check:focus-visible { outline: none; box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--primary) 16%, transparent); } /* Baris "Pilih semua N" di atas tabel bercentang. */ .d-pilih-semua { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: var(--field); margin-bottom: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; } /* ------------------------------------------------------------------------- KOTAK SCAN (halaman Scan) Nama class-nya SENGAJA dipertahankan (.scan-box, .scan-input, .scan-sisa) dan bukan diberi awalan d-. Dua alasan: seluruh JS halaman Scan menyasar kelas & id ini (fokus otomatis, polling, mode kamera), dan assets/mobile.css sudah punya versi mobilenya sendiri untuk .scan-box -- dimuat setelah berkas ini, jadi di HP tetap versi mobile yang menang tanpa perlu diubah. ------------------------------------------------------------------------- */ .scan-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 24px; } /* Lencana ikon di atas judul -- digambar CSS, bukan , supaya ikut warna aksen yang dipilih user. */ .scan-box::before { content: ""; width: 52px; height: 52px; border-radius: 15px; margin-bottom: 16px; animation: d-pulseRing 2.4s ease-out infinite; background: color-mix(in srgb, var(--primary) 12%, transparent); background-image: linear-gradient(var(--primary), var(--primary)), linear-gradient(var(--primary), var(--primary)), linear-gradient(var(--primary), var(--primary)), linear-gradient(var(--primary), var(--primary)); background-size: 2px 18px, 2px 18px, 2px 18px, 2px 18px; background-position: 18px 17px, 23px 17px, 29px 17px, 34px 17px; background-repeat: no-repeat; } .scan-box > label { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px; } .scan-box .scan-hint { max-width: 460px; margin: 0 0 18px; } .scan-input { width: 100%; max-width: 500px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--card-solid); color: var(--text); font-size: 19px; font-weight: 600; text-align: center; letter-spacing: .01em; transition: border-color .25s, box-shadow .25s; } .scan-input::placeholder { color: var(--faint); font-weight: 500; } /* Tombol di bawah kotak input scan ("Proses", "Scan dengan Kamera HP"). */ .scan-aksi { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-top: 14px; } .scan-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent); } /* Angka sisa antrean di dalam kartu scan. Class .stat-box dipertahankan -- JS (muatUlangTerkonfirmasi) memakai closest('.stat-box') untuk menyalakan penanda oranye saat masih ada antrean. */ .scan-sisa { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; padding: 8px 16px; border-radius: 999px; background: var(--field); } .scan-sisa .num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .scan-sisa .label { font-size: 12.5px; color: var(--muted); } /* Untuk admin pil ini menuju halaman Barang Keluar (daftar lengkapnya). Staff merendernya sebagai
, jadi aturan hover di bawah tidak kena. */ a.scan-sisa { text-decoration: none; color: inherit; transition: background .25s, transform .25s; } a.scan-sisa:hover { background: var(--hair); transform: translateY(-1px); text-decoration: none; } a.scan-sisa:active { transform: scale(.98); } .scan-sisa.warn { background: color-mix(in srgb, var(--orange) 14%, transparent); } .scan-sisa.warn .num { color: var(--orange); } /* Ringkasan total di kaki form COD. */ .cod-total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, var(--green) 9%, transparent); } .cod-total > span { font-size: 13px; color: var(--muted); } .cod-total > strong { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--green); font-variant-numeric: tabular-nums; } .d-search { position: relative; } .d-search-kotak { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--border); transition: border-color .25s, box-shadow .25s; } .d-search-kotak:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--primary) 16%, transparent); } .d-search-kotak svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--faint); } /* Tombol kosongkan, muncul hanya saat kotaknya berisi (komponen SearchBox handoff). Dipasang oleh assets/app.js supaya berlaku di semua kotak cari sekaligus, bukan ditulis ulang di tiap halaman. */ .d-search-kosongkan { flex: 0 0 22px; width: 22px; height: 22px; border: none; border-radius: 50%; background: var(--field); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; /* TRANSITION, bukan animation. `animation` pada elemen yang lahir display:none tidak pernah berjalan -- animasinya dibatalkan selagi tersembunyi, dan menyalakan display kembali tidak memulainya lagi (terukur: 0 animasi aktif, transform langsung `none`). Transisi juga memberi gerakan DUA arah: mengecil lagi saat kotaknya dikosongkan, bukan lenyap seketika. */ transform: scale(.5); opacity: 0; visibility: hidden; transition: transform .26s var(--d-ease-pop), opacity .2s ease, visibility .26s, background .2s, color .2s; } /* Muncul begitu kotaknya berisi. :placeholder-shown benar TEPAT saat input tidak berisi apa pun -- termasuk ketika nilainya disetel dari kode, yang tidak memicu event 'input'. */ .d-search-kotak input:not(:placeholder-shown) ~ .d-search-kosongkan { transform: scale(1); opacity: 1; visibility: visible; } /* Hover harus SELEKTIF SETARA aturan di atas, kalau tidak scale(1)-nya menang dan tombolnya tidak bereaksi disentuh kursor. */ .d-search-kotak input:not(:placeholder-shown) ~ .d-search-kosongkan:hover { transform: scale(1.14); background: var(--hair); color: var(--text); } .d-search-kotak input:not(:placeholder-shown) ~ .d-search-kosongkan:active { transform: scale(.92); } .d-search-kotak input { flex: 1; border: none; background: none; color: var(--text); font-size: 14.5px; min-width: 0; } /* Panel saran HANYA saat ada teks -- kalau selalu tampil, panelnya menutupi daftar di bawahnya (catatan SearchBox di handoff). */ .d-search-saran { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; padding: 6px; border-radius: 16px; background: var(--card-solid); border: 1px solid var(--border); box-shadow: 0 24px 50px -18px rgba(0,0,0,.4); animation: d-fadeUp .28s var(--d-ease-out) backwards; } .d-search-saran button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: none; background: none; border-radius: 11px; cursor: pointer; text-align: left; color: var(--text); font-size: 13.5px; transition: background .2s; } .d-search-saran button:hover { background: var(--field); } .d-search-saran b { font-weight: 600; } .d-search-saran i { font-style: normal; font-size: 12px; color: var(--faint); } /* ------------------------------------------------------------------------- 16. SHEET (modal tengah), TOAST, KABAR Handoff menyebutnya "bottom sheet" tapi prototipe & screenshot desktop sama-sama menengahkannya (max-width 620px, radius 26px penuh). Yang dipakai di sini adalah prototipe. ------------------------------------------------------------------------- */ .d-sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.34); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: d-backdropIn .28s ease; display: flex; align-items: center; justify-content: center; padding: 40px; } .d-sheet { width: 100%; max-width: 620px; max-height: 84vh; overflow-y: auto; background: var(--card-solid); border: 1px solid var(--border); border-radius: 26px; box-shadow: 0 40px 90px -24px rgba(0,0,0,.5); animation: d-sheetIn .5s cubic-bezier(.2,.95,.25,1.05); } .d-sheet-head { position: sticky; top: 0; background: var(--card-solid); padding: 22px 26px 14px; border-bottom: 1px solid var(--hair); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-radius: 26px 26px 0 0; z-index: 1; } .d-sheet-judul { font-size: 19px; font-weight: 700; letter-spacing: -.02em; } .d-sheet-sub { font-size: 13px; color: var(--muted); margin-top: 3px; } .d-sheet-tutup { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; background: var(--field); color: var(--muted); font-size: 15px; line-height: 1; transition: transform .25s, background .25s; } .d-sheet-tutup:hover { transform: rotate(90deg); } .d-sheet-isi { padding: 20px 26px 26px; } /* flex-wrap WAJIB. Tanpa itu, begitu deretan tombol tidak muat, `nowrap` + `justify-content: flex-end` membuat kelebihannya meluber ke arah AWAL -- yaitu KELUAR lewat tepi KIRI sheet, bukan ke kanan seperti yang orang duga. Terukur di sheet Edit Produk (19 Agu 2026): 5 tombol butuh 536px di ruang 497px, dan tombol "Hapus" (yang ber-margin-right:auto) berdiri 12px di luar badan sheet. Gejalanya bikin bingung karena tombol yang keluar justru yang PALING KIRI, sementara yang kepanjangan ada di kanan. align-items:center menjaga tinggi tombol tetap sejajar begitu barisnya pecah jadi dua. */ .d-sheet-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; justify-content: flex-end; margin-top: 22px; } .d-toast { position: fixed; /* Dipusatkan lewat margin auto, BUKAN left:50% + translateX(-50%). Dengan cara lama, animasi masuk d-toastIn ikut menulis transform dan menimpa translateX(-50%) selama animasi berjalan -- toast muncul serong ke kanan (tepi kirinya di tengah layar) lalu baru melompat ke tengah begitu animasinya habis. Pemusatan sekarang tidak lagi bergantung pada transform, jadi ia lahir tepat di tengah. */ left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: calc(100% - 32px); bottom: 34px; /* 80 = di atas backdrop sheet (70), di bawah dropdown/popover/kalender (90). Ini nilai DESKTOP dan sengaja dibiarkan apa adanya; yang perlu lebih tinggi cuma HP, lihat blok @media di bawah. */ z-index: 80; display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 16px; background: rgba(28,28,30,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 18px 50px -12px rgba(0,0,0,.5); animation: d-toastIn .5s var(--d-ease-pop); } .d-toast-ikon { width: 19px; height: 19px; border-radius: 50%; background: var(--d-toast-warna, var(--green)); display: flex; align-items: center; justify-content: center; flex: 0 0 19px; } .d-toast-ikon svg { width: 11px; height: 11px; } /* Banner peringatan lebar penuh (koneksi putus, sinkron gagal, restok). */ .d-kabar { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; margin-bottom: 14px; background: color-mix(in srgb, var(--d-kabar-warna, var(--orange)) 9%, var(--card-solid)); border: 1px solid color-mix(in srgb, var(--d-kabar-warna, var(--orange)) 35%, transparent); text-decoration: none; color: inherit; animation: d-fadeUp .5s var(--d-ease-out) backwards; } a.d-kabar:hover { text-decoration: none; } .d-kabar-ikon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--d-kabar-warna, var(--orange)) 18%, transparent); color: var(--d-kabar-warna, var(--orange)); font-size: 17px; font-weight: 700; } .d-kabar-judul { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; } .d-kabar-teks { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .d-kabar-aksi { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; } .d-kabar-warn { --d-kabar-warna: var(--orange); } .d-kabar-buruk { --d-kabar-warna: var(--red); } /* Hijau untuk kabar BERHASIL. Sebelumnya pesan sukses memakai nada warn, jadi "Produk berhasil diperbarui" tampil oranye seperti peringatan. */ .d-kabar-ok { --d-kabar-warna: var(--green); } /* Varian ringkas: satu baris keterangan tanpa judul & tanpa tombol. Dipakai untuk catatan yang sesekali perlu dibereskan, supaya tidak menyaingi banner di atasnya yang isinya pekerjaan hari ini. */ .d-kabar-ringkas { padding: 11px 16px; gap: 11px; border-radius: 14px; } .d-kabar-ringkas .d-kabar-ikon { flex: 0 0 24px; width: 24px; height: 24px; font-size: 13px; } .d-kabar-ringkas .d-kabar-teks { margin-top: 0; } /* Varian untuk banner BERPARAGRAF (mis. peringatan "337 transaksi belum punya HPP" di Laporan yang isinya beberapa kalimat + tautan + tombol). .d-kabar biasa itu flex row -- setiap potongan teks & tautan di dalamnya jadi kolom flex tersendiri, sehingga kalimatnya terpotong-potong jadi kolom-kolom sempit. Varian ini kembali ke aliran teks normal. */ .d-kabar-blok { display: block; font-size: 13.5px; line-height: 1.55; } .d-kabar-blok .d-btn { margin-top: 10px; } /* Sparkline mungil di dalam kartu KPI Laporan (Chart.js). Tingginya sebelumnya dipatok blok