/* Nusantara ERP — front-end stylesheet. No build step: plain CSS with custom properties, light + dark via prefers-color-scheme plus a data-theme override on . */ /* ---------------------------------------------------------------- tokens */ :root { --bg: #f4f6f8; --surface: #ffffff; --surface-2: #fafbfc; --surface-3: #f1f3f6; --border: #e2e6eb; --border-strong: #cbd2da; --text: #14181d; --text-2: #47505b; --muted: #5e6874; /* dulu #6b7684 = 4,26:1 di atas --bg pada teks 11 px — di bawah AA (2 Sep 2026) */ --primary: #1a56db; --primary-hover: #1745b0; --primary-soft: #e8effc; --primary-fg: #ffffff; --danger: #c62828; --danger-soft: #fdecec; --success: #17714a; /* dulu #1b7f4d = 4,42:1 di atas --success-soft pada badge 11,5 px */ --success-soft: #e6f4ec; --warning: #96601a; --warning-soft: #fdf1dd; --info: #1f5f8b; --info-soft: #e7f1f8; --neutral: #5a6472; --neutral-soft: #eef0f3; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --shadow-md: 0 4px 12px rgba(16, 24, 40, .1), 0 2px 4px rgba(16, 24, 40, .06); --shadow-lg: 0 18px 48px rgba(16, 24, 40, .18); --radius: 8px; --radius-sm: 6px; --sidebar-w: 250px; --header-h: 56px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ================================================== SKALA (UI-1) Tiga skala yang selama ini tidak ada, sehingga 873 literal px dan 15 ukuran huruf berbeda tidak punya tempat pulang. Semuanya INDEPENDEN TEMA, jadi cukup berdiri di :root sekali — tidak seperti palet yang harus ditulis di kelima blok. UI-1 hanya MENDEFINISIKAN. Memakainya menggantikan nilai yang ada adalah UI-2, dan di situlah pikselnya boleh bergerak. Dua nilai di bawah sengaja BUKAN nilai hari ini: --fs-section 14 px (kepala kartu kini 13,5) dan --fs-kpi 22 px — keduanya target, bukan cermin. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --fs-caption: 11px; /* keterangan, label kolom, eyebrow — lantai huruf aplikasi */ --fs-secondary: 12px; /* teks pendukung, sub-sel */ --fs-label: 12px; /* label field */ --fs-body: 13px; /* teks isi — ukuran kerja aplikasi */ --fs-table: 13px; /* sel tabel */ --fs-section: 14px; /* judul kartu/seksi — TARGET, hari ini 13,5 */ --fs-page: 20px; /* judul halaman */ --fs-kpi: 22px; /* angka KPI */ --lh-tight: 1.25; --lh-body: 1.5; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --tracking-caps: .06em; --radius-lg: 12px; /* modal, laci, permukaan besar */ --radius-pill: 999px; /* lencana, chip */ /* Peran permukaan: ALIAS, bukan warna baru. Karena nilainya var(), ia mengikuti tema tanpa ditulis lima kali. */ --surface-sidebar: var(--surface); --surface-header: var(--surface); --surface-hover: var(--surface-3); --surface-selected: var(--primary-soft); /* Satu cincin fokus menggantikan dua salinan. .spotlight memakai nilai yang sama secara KEBETULAN — ia sorotan panduan, bukan fokus, dan karena itu tetap literal. */ --focus-ring: 0 0 0 3px var(--primary-soft); --drawer-w: 264px; /* laci nav ponsel; dulu 264px mentah di @media */ /* Panah with no type attribute and `input[type=text]` would then not match it. Two class selectors so this beats `input[type=text]` on specificity: a picker one pixel taller than the /` yang ditulis TANPA atribut type — yang sah dan berarti `text`. Sebuah daftar jenis adalah pagar yang bocor tiap kali seseorang memakai jenis berikutnya. Yang dikecualikan sekarang justru yang kotaknya BUKAN medan isian: kotak centang, radio, berkas, rentang. */ input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]), select { height: 36px; } /* `.pager select` (0,1,1) mengalahkan `select` (0,0,1) di atas, jadi ia butuh barisnya sendiri — pelajaran yang sama dengan `.combo .combo-input`. */ .pager select { height: 36px; } .check-row { height: 36px; } /* Kontrol DI DALAM tabel: lantai 24 px, bukan 36 (UI-7). Terukur 19 Sep 2026 di 390 px dengan pointer kasar, sesudah lantai tombol dan medan isian di atas: yang tersisa di bawah 36 px hampir seluruhnya kontrol tabel — 181 kotak centang 16x16 (81 di `.pick` pemilih baris, 100 di `.check-row` preferensi notifikasi) dan 230 tombol urut kepala kolom 17 px. Keduanya di bawah 24 px, yang ambang WCAG 2.5.8 AA, bukan selera. 24 dan bukan 36, dan itu diukur juga: pada 36 px tinggi baris kepala 42 → 62 px, pada 24 px ia 42 → 50 px. Baris ISI tidak bergeser sepersepuluh piksel pun pada keduanya (133,8/153,8 dan 116/77,5/97 byte-identik), jadi kepadatan yang pemilik bekukan tidak tersentuh — yang dibayar hanya kepala tabel, di layar sentuh saja. Kotak centang baris juga bukan sasaran tunggalnya: barisnya sendiri yang dibuka orang. */ /* KOREKSI (tinjauan pra-gabung, 19 Sep 2026). Versi pertama menulis `.pick input[type=checkbox]`, dan `.pick` mencocokkan `td.pick` SEKALIGUS `th.pick` — `table.data th.pick, table.data td.pick` (baris 1134) adalah selektor sel BADAN. list.js:1313 menaruh tepat satu kotak centang seperti itu di SETIAP baris badan pada daftar yang punya aksi massal, jadi aturan ini menumbuhkan baris yang kepadatannya DIBEKUKAN pemilik: padat 32 → 39,5 px (+23 %) normal 43,5 → 51,5 px lega 48 → 51,5 px Terukur di konteks sentuh 1024×768 pada fikstur yang meniru DOM list.js, dan baris TANPA kotak centang tidak bergerak — itulah sebabnya sapuan tidak melihatnya. Klaim komentar lama ("baris ISI byte-identik") diukur pada baris 390 px yang SUDAH membungkus ke banyak baris, jadi lantai 24 px tidak pernah mengikat di sana. Lantainya karena itu hanya untuk KEPALA. Alasan komentar lama sendiri yang menanggungnya di badan: sasaran yang dibuka orang adalah BARISNYA, bukan kotak centangnya — dan kotak centang badan kembali memakai ukuran bawaan peramban, yaitu persis pengecualian "user agent default" WCAG 2.5.8 yang §10 laporan ini sudah pakai untuk lebar meja. */ th.pick input[type=checkbox], .check-row input[type=checkbox] { width: 24px; height: 24px; } /* `.th-sort` TIDAK lagi di sini: sejak lantai meja di bawah ia 24 px pada setiap jenis pointer, jadi aturan coarse-nya akan mengulang dirinya. */ /* …dan lantai 36 px di atas dikembalikan DI DALAM tabel, secara eksplisit. Dua alasan, keduanya terukur: 1. `table.data td` memakai `height: var(--row-h)`, jadi baris yang isi tertingginya sebuah kontrol DIUKUR OLEH kontrol itu. Menaikkan kontrol 34 → 36 px menaikkan barisnya 2 px — lagi-lagi kepadatan beku, tanpa satu pun token kepadatan disentuh. 2. `table.lines input, table.lines select` (baris 1631) menyetel KEDUANYA 31 px, tetapi lantai di atas hanya mengenai setengahnya: `input:not(…):not(…):not(…):not(…):not(…)` berspesifisitas (0,5,1) dan MENANG atas `table.lines input` (0,1,1), sementara `select` telanjang (0,0,1) KALAH terhadap `table.lines select`. Satu daftar selektor, dua hasil berbeda: medan isian melompat ke 36 px sementara `